363 lines
7.9 KiB
Vue
363 lines
7.9 KiB
Vue
<template>
|
|
<view class="whole">
|
|
<view class="comment">
|
|
|
|
<view class="starBox flex1">
|
|
<text style="margin-right: 20rpx;">描述相符</text>
|
|
<up-rate v-model="info.score" :active-color="Color" inactive-color="#ccc" @change="onScoreChange($event)" />
|
|
<text style="font-weight: 600;"> {{rateText[info.score]}}</text>
|
|
</view>
|
|
|
|
<!-- 文字评价 -->
|
|
<view class="descBox">
|
|
<view class="textarea">
|
|
<up-textarea v-model="info.comment" count placeholder="填写评价，可以帮助更多想买的人哦~" style="font-size: 28rpx;" :height="70" :maxlength="500"></up-textarea>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="imgBox">
|
|
<view class="imgList" v-for="(it, i) in info.imgs" :key="i">
|
|
<image v-if="it.type === 1" :src="it.url" mode="aspectFill" class="img" @click="handlePreView(it)"></image>
|
|
<image v-if="it.type === 2" :src="it.img_video" mode="aspectFill" class="img"></image>
|
|
<text @click="deleteImage(i)" class="close iconfont icon-shanchu"></text>
|
|
<view class="play flex" v-if="it.type === 2" @click="handlePreView(it)">
|
|
<up-icon name="play-circle-fill" :size="30" color="#fff" />
|
|
</view>
|
|
</view>
|
|
<view @click="toUpload()" class="plus flex">
|
|
<text class="iconfont icon-paizhao"></text>
|
|
<text>添加图视频</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="comment-btn flex" @click="submitBtn">提交评价</view>
|
|
|
|
<video-dialog :url="videoUrl" :show="showVideo" @close="showVideo = false"></video-dialog>
|
|
|
|
<!-- 隐私协议弹窗 -->
|
|
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import API from '/api/index'
|
|
import { ref, reactive, toRefs } from 'vue'
|
|
import { post } from '@/api/request.js'
|
|
import { showToast, judgePrivacy } from '@/components/common.js'
|
|
import { Style } from '@/utils/list.js'
|
|
import privacyPopup from '@/components/privacyPopup/index.vue'
|
|
import videoDialog from '@/components/videoDialog/index.vue'
|
|
|
|
export default {
|
|
components: {
|
|
privacyPopup, videoDialog
|
|
},
|
|
setup() {
|
|
const data = reactive({
|
|
urls: API.url + '/api/v1/upload',
|
|
video: API.url + '/api/v1/upload/video',
|
|
Color: uni.getStorageSync('theme_color'),
|
|
showPrivacy: false,
|
|
showVideo: false,
|
|
videoUrl: '',
|
|
info: {
|
|
score: 0,
|
|
comment: '',
|
|
imgs: []
|
|
},
|
|
rateText: {
|
|
'0': '',
|
|
'1': '非常差',
|
|
'2': '差',
|
|
'3': '一般',
|
|
'4': '满意',
|
|
'5': '超赞'
|
|
},
|
|
id: 0
|
|
})
|
|
|
|
const onScoreChange = (val) => {
|
|
data.info.score = val.value
|
|
}
|
|
|
|
async function toUpload() {
|
|
if(await judgePrivacy()) {
|
|
data.showPrivacy = true
|
|
return false
|
|
}
|
|
wx.showActionSheet({
|
|
itemList: ['上传图片', '上传视频'],
|
|
success: function(res){
|
|
if(res.tapIndex === 0) {
|
|
uploadImg()
|
|
} else if(res.tapIndex === 1) {
|
|
uploadVideo()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 上传图片
|
|
function uploadImg() {
|
|
wx.chooseImage({
|
|
success(res) {
|
|
const tempFilePaths = res.tempFilePaths
|
|
uni.showLoading({
|
|
title: '正在上传...',
|
|
mask: true
|
|
})
|
|
res.tempFilePaths.forEach((item) => {
|
|
wx.uploadFile({
|
|
url: data.urls,
|
|
filePath: item,
|
|
name: 'file',
|
|
header: {
|
|
Authorization: uni.getStorageSync('token') || '',
|
|
accept: 'application/json',
|
|
appid: API.appId
|
|
},
|
|
success(req) {
|
|
var img = JSON.parse(req.data).data
|
|
data.info.imgs.push({
|
|
type: 1,
|
|
url: img.link
|
|
})
|
|
uni.hideLoading()
|
|
},
|
|
fail() {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
fail() {
|
|
}
|
|
})
|
|
}
|
|
|
|
const uploadVideo = () => {
|
|
wx.chooseVideo({
|
|
sourceType: ['album', 'camera'],
|
|
maxDuration: 60,
|
|
camera: ['front', 'back'],
|
|
compressed: true,
|
|
success(res) {
|
|
let tempFilePath = res.tempFilePath
|
|
console.log(tempFilePath)
|
|
let duration = res.duration
|
|
let size = parseFloat(res.size / 1024 / 1024)
|
|
|
|
if (parseFloat(size) > 10) {
|
|
wx.showToast({
|
|
title: '上传的视频大小超限，请重新上传',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uploadFile(tempFilePath)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const uploadFile = (tempFilePath) => {
|
|
uni.showLoading({
|
|
title: '正在上传...',
|
|
mask: true
|
|
})
|
|
wx.uploadFile({
|
|
url: data.video,
|
|
filePath: tempFilePath,
|
|
name: 'file',
|
|
header: {
|
|
Authorization: uni.getStorageSync('token') || '',
|
|
accept: 'application/json',
|
|
appid: API.appId
|
|
},
|
|
success(res) {
|
|
var video = JSON.parse(res.data).data
|
|
data.info.imgs.push({
|
|
type: 2,
|
|
url: video.link,
|
|
img_video: video.link + '?x-oss-process=video/snapshot,t_1000,m_fast'
|
|
})
|
|
uni.hideLoading()
|
|
},
|
|
fail: function(err) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '视频上传失败',
|
|
icon: 'none'
|
|
}, 2000)
|
|
}
|
|
})
|
|
}
|
|
|
|
const deleteImage = (index) => {
|
|
data.info.imgs.splice(index, 1)
|
|
}
|
|
|
|
const handlePreView = (item) => {
|
|
if (item.type === 1) {
|
|
uni.previewImage({
|
|
current: item.url,
|
|
urls: [item.url]
|
|
})
|
|
} else {
|
|
data.showVideo = true
|
|
data.videoUrl = item.url
|
|
}
|
|
}
|
|
|
|
const submitBtn = () => {
|
|
if(!data.info.score) {
|
|
showToast('请点亮小星星喔')
|
|
return
|
|
}
|
|
let params = {
|
|
comment: data.info.comment,
|
|
stars: data.info.score,
|
|
material: data.info.imgs
|
|
}
|
|
post('/api/v1/orderComment/add/' + data.id, params).then((res) => {
|
|
wx.showToast({
|
|
title: '评价成功',
|
|
icon: 'success',
|
|
duration: 1000,
|
|
mask: true,
|
|
success() {
|
|
setTimeout(() => {
|
|
uni.navigateBack({ delta: 1 })
|
|
}, 1000)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
return {
|
|
...toRefs(data),
|
|
uploadImg,
|
|
uploadVideo,
|
|
deleteImage,
|
|
submitBtn,
|
|
onScoreChange,
|
|
handlePreView,
|
|
toUpload
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = options.id || 0
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.comment{
|
|
position: relative;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
.descBox{
|
|
margin: 40rpx 0;
|
|
.textarea{
|
|
border: 1rpx solid #E5E5E5;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
}
|
|
.text{
|
|
font-size: 24rpx;
|
|
color: #676767;
|
|
text{
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
&-btn {
|
|
width: 88%;
|
|
margin: 40rpx auto;
|
|
background-color: v-bind('Color');
|
|
color: #fff;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
border-radius: 80rpx;
|
|
position: relative;
|
|
}
|
|
}
|
|
.whole{
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
.flex{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.flex1{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.starBox {
|
|
margin-bottom: 40rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.imgBox{
|
|
flex-wrap: wrap;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
.imgList{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin: 0 20rpx 20rpx 0;
|
|
position: relative;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
.close{
|
|
position: absolute;
|
|
right: -17rpx;
|
|
top: -17rpx;
|
|
z-index: 8;
|
|
font-size: 20px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
.play{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.35);
|
|
border-radius: 8rpx;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.plus{
|
|
background-color: #fff;
|
|
border-radius: 8rpx;
|
|
flex-direction: column;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 20rpx 20rpx 0;
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
.iconfont{
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .van-field__control {
|
|
height: 70px !important;
|
|
}
|
|
</style>
|