|
|
<template> <view class=""> <view class="pad"> <view class="card"> <view class="top_row"> <view class="tit">{{ info.tit }}</view> <u-checkbox-group iconPlacement="right" :size="14" > <u-checkbox v-model="info.anonymity" shape="circle" label="匿名提交" :iconSize="12" :labelSize="12" ></u-checkbox> </u-checkbox-group> </view> <view class="user_row"> <view class="avatar"> <image :src="info.photoPath" mode=""></image> </view> <view class="name">{{info.school? info.schoolName: info.coachName}}</view> </view> <view class="star_row"> <view class="lab">服务态度</view> <view class="star"> <u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" v-model="info.serviceLevel" ></u-rate> </view> </view> <view class="star_row" v-if="info.school"> <view class="lab">驾校风貌</view> <view class="star"> <u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" v-model="info.schoolLevel" ></u-rate> </view> </view> <view class="star_row"> <view class="lab">教学安排</view> <view class="star"> <u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" v-model="info.teachLevel" ></u-rate> </view> </view> <view class="star_row"> <view class="lab">教学质量</view> <view class="star"> <u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" v-model="info.qualityLevel" ></u-rate> </view> </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="info.description" ref="textarea" placeholder="详细说明问题，以便获得更好的回答~" border="none"></u-textarea> </view> </view> <view class="phoneBox"> <view class="imgBox"> <view class="img" v-for="(item,index) in info.imgArr" :key="item"> <view class="minusCircle" @click="deleteImg(item)"> <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" v-if="info.imgArr.length<3"> <view class="phoneIcon"> <image src="@/static/images/index/btn_tupian.png" mode=""></image> </view> <view class="lab">添加图片</view> </view> <view class="phone" @click="chooseVideo" v-if="!info.videoUrl" > <view class="phoneIcon"> <image src="@/static/images/index/btn_tupian.png" mode=""></image> </view> <view class="lab">添加视频</view> </view> <view class="imgBox" style="margin-left: 16rpx;" v-else> <view class="img"> <view class="minusCircle" @click="info.videoUrl=''"> <u-icon name="close-circle-fill" size="20" color="#b9061d"></u-icon> </view> <video :src="info.videoUrl" style="width: 160rpx;height: 160rpx;display: block;" ></video> </view> </view> </view> </view> </view> </view> </view></template>
<script> import { WX_API, H5_API, prefix } from '@/config/site.config.js'; var _url = H5_API+ WX_API export default { props: [ 'info' ], data() { return { checked: false, imgArr:[] } }, methods: { deleteImg(item) { let index = this.info.imgArr.findIndex(val=>val==item) this.info.imgArr.splice(index, 1) }, chooseVideo() { uni.chooseVideo({ sourceType: ['album', 'camera'], compressed: true, success: (res)=> { // 在这里处理选定的视频文件
console.log(res.tempFilePath); // 调用上传视频函数
this.uploadImgApi(res.tempFilePath, res.name, 'video') }, fail: function (error) { console.log(error); } }); }, uploadVideo(filePath) { uni.uploadFile({ url: 'https://your-upload-api.com/upload-video', filePath: filePath, name: 'video', formData: { // 你可能需要传递其他表单数据
}, success: function (res) { var data = JSON.parse(res.data); if (data.code === 0) { // 上传成功，处理服务器返回的数据
console.log('上传成功', data); } else { // 上传失败，处理错误信息
console.log('上传失败', data); } }, fail: function (error) { console.log('上传失败', error); } }); }, //选择图片
chooseImages(type) { let imgNum = 3 - (this.imgArr.length) uni.chooseImage({ count: imgNum, //允许选择的数量
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: res => { uni.showLoading({ title: '图片上传中...' }); console.log(res) res.tempFiles.forEach( (item,index)=>{ this.uploadImgApi(item.path, item.name) }) } }) }, uploadImgApi(filePath, imgName, vdo) { console.log(filePath) let token = 'Bearer '+ this.$store.state.user.vuex_loginInfo.accessToken let _this = this let timer = new Date() * 1 // 上传图片到服务器
uni.uploadFile({ url: _url + 'app-api/infra/file/upload',//接口
filePath: filePath,//要上传的图片的本地路径
name: 'file', formData: { path: 'complain/'+ uni.$u.date(name, 'yyyy-mm-dd')+'/'+timer + '-'+ imgName, type: 1, fileSuffix: "png" }, header: { Authorization: token, 'tenant-id': 1 }, success(res) { console.log('上传成功') let res2 = JSON.parse(res.data) if(vdo) { _this.info.videoUrl = res2.data }else { _this.info.imgArr.push(res2.data) } console.log(res2) uni.hideLoading(); }, complete: (err)=> { console.log(err) } }) }, } }</script>
<style lang="scss" scoped> @import '../../../../common/css/textareaBg.scss'; .phoneBox { flex-wrap: wrap; .img { margin-bottom: 16rpx; } .phone { margin-right: 16rpx; } .imgBox { flex-wrap: wrap; } } .card { padding: 28rpx; margin-bottom: 20rpx; .top_row { display: flex; align-items: center; padding-bottom: 24rpx; border-bottom: 2rpx solid #E8E9EC; justify-content: space-between; .tit { font-weight: 600; color: #333333; font-size: 32rpx; } } .user_row { width: 100%; height: 100rpx; display: flex; align-items: center; .avatar { width: 60rpx; height: 60rpx; border-radius: 50%; overflow: hidden; } .name { font-size: 28rpx; font-weight: 500; padding-left: 26rpx; } } .star_row { padding: 14rpx 0; display: flex; align-items: center; .lab { font-size: 28rpx; font-weight: 500; padding-right: 32rpx; } .star { } } .textareaBg { margin-top: 22rpx; } }</style>
|
