学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

247 lines
5.4 KiB

<template>
<view class="pageBgImg">
<topNavbar title="我要咨询"></topNavbar>
<view class="pad">
<view class="card">
<view class="h2">咨询内容</view>
<view class="textareaBg">
<view class="flex">
<view class="icon">
<image src="@/static/images/index/edit.png" mode=""></image>
</view>
<view class="inputBox">
<u-textarea v-model="value" ref="textarea" placeholder="详细说明问题,以便获得更好的回答~"></u-textarea>
</view>
</view>
<view class="phoneBox">
<view class="imgBox">
<view class="img" v-for="(item,index) in imgArr" :key="item">
<view class="minusCircle" @click="deleteImg(item,index)">
<u-icon name="close-circle-fill" size="20" color="#b9061d"></u-icon>
</view>
<image :src="item" mode=""></image>
</view>
</view>
<view class="phone" @click="chooseImages">
<view class="phoneIcon">
<image src="@/static/images/index/btn_tupian.png" mode=""></image>
</view>
<view class="lab">添加图片</view>
</view>
</view>
</view>
</view>
<view class="card" style="padding-bottom: 0;">
<view class="phone_row">
<view class="label">联系电话</view>
<view class="uInput my">{{ this.vuex_userInfo.mobile }}</view>
</view>
</view>
<view class="btn active" @click="submintFn">提交</view>
</view>
</view>
</template>
<script>
import { WX_API, H5_API, prefix } from '@/config/site.config.js';
import { createconsult } from '@/config/api.js'
var _url = H5_API+ WX_API
// let url = 'api'
export default {
data() {
return {
value: '',
imgArr: [],
}
},
onLoad() {
},
methods: {
async submintFn() {
let images = this.imgArr.join(',')
let obj = {
images,
studentPhone: this.vuex_userInfo.mobile,
type: 1,
studentId: this.$store.state.user.vuex_loginInfo.userId,
content: this.value
}
const {data: res} = await createconsult(obj)
},
deleteImg(item,index) {
this.imgArr.splice(index, 1)
},
//选择图片
chooseImages(type) {
let imgNum = 3 - (this.imgArr.length)
uni.chooseImage({
count: imgNum, //允许选择的数量
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: res => {
uni.showLoading({
title: '图片上传中...'
});
res.tempFilePaths.forEach( (item,index)=>{
this.uploadImgApi(item)
})
}
})
},
uploadImgApi(filePath) {
console.log(filePath)
let token = 'Bearer '+ this.$store.state.user.vuex_loginInfo.accessToken
let _this = this
let name = new Date() * 1
// 上传图片到服务器
uni.uploadFile({
url: _url + 'app-api/infra/file/upload',//接口
filePath: filePath,//要上传的图片的本地路径
name: 'file',
formData: {
path: 'complain/'+name,
type: 1,
fileSuffix: "png"
},
header: {
Authorization: token,
'tenant-id': 1
},
success(res) {
console.log('上传成功')
let res2 = JSON.parse(res.data)
_this.imgArr.push(res2.data)
console.log(res2)
uni.hideLoading();
},
complete: (err)=> {
console.log(err)
}
})
},
}
}
</script>
<style lang="scss" scoped>
.pageBgImg {
.pad {}
.card {
padding: 0 24rpx 24rpx 24rpx ;
.h2 {
font-size: 32rpx;
font-weight: 600;
line-height: 96rpx;
}
.textareaBg {
min-height: 364rpx;
background: #F8F8F8;
border-radius: 16rpx;
border: 2rpx solid #E8E9EC;
display: flex;
flex-direction: column;
justify-content: space-between;
.flex {
padding: 20rpx;
align-items: flex-start;
.icon {
width: 24rpx;
height: 24rpx;
margin: 0 14rpx 0 24rpx;
}
.inputBox {
flex: 1;
}
/deep/ .inputBox .u-textarea {
padding: 0 !important;
border: none !important;
background: none !important;
font-size: 24rpx
}
}
.phoneBox {
display: flex;
padding: 0 10rpx 20rpx 20rpx;
.imgBox {
display: flex;
.img {
margin-right: 14rpx;
position: relative;
image {
width: 160rpx;
height: 160rpx;
border-radius: 8rpx;
overflow: hidden;
}
.minusCircle {
position: absolute;
right: -14rpx;
top: -20rpx;
z-index: 9;
}
}
}
.phone {
border: 2rpx dashed #CDCED0;
width: 160rpx;
height: 160rpx;
background: #F8F8F8;
border-radius: 8rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.phoneIcon {
width: 60rpx;
height: 60rpx;
}
.lab {
font-size: 20rpx;
color: #686B73;
margin-top: 8rpx;
}
}
}
}
}
.phone_row {
display: flex;
height: 104rpx;
padding: 0 28rpx;
line-height: 104rpx;
.label {
font-size: 32rpx;
font-weight: 600;
margin-right: 50rpx;
}
.uInput {
flex: 1;
}
}
.btn {
width: 396rpx;
height: 72rpx;
background: #D1E7FE;
border-radius: 8rpx;
font-size: 28rpx;
text-align: center;
line-height: 72rpx;
margin: 100rpx auto 114rpx auto;
color: #fff;
&.active {
background: $themC;
}
}
}
</style>