463 lines
12 KiB
Vue
463 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<template v-for="(item, itemIndex) in goodsList">
|
|
<view v-if="item.refund_id <= 0" class="flex flex-direction flex-wrap align-stretch benben-flex-layout evaluate_flex_1" :key="itemIndex">
|
|
<view class="flex flex-direction flex-wrap align-stretch evaluate_fd1_0">
|
|
<view class="flex flex-wrap align-stretch evaluate_fd1_0_c0">
|
|
<image class="evaluate_fd1_0_c0_c0" mode="aspectFit" :src="item.goods_thumb"></image>
|
|
<view class="flex flex-direction flex-wrap align-stretch flex-sub evaluate_fd1_0_c0_c1">
|
|
<text class="evaluate_fd1_0_c0_c1_c0">{{ item.goods_name }}</text>
|
|
<text class="evaluate_fd1_0_c0_c1_c1">{{ item.sku_name }}</text>
|
|
<view class="flex flex-wrap align-center justify-between" style="margin-top: auto">
|
|
<view class="flex flex-wrap align-center">
|
|
<text class="evaluate_fd1_0_c0_c1_c2_c0_c0">￥</text>
|
|
<view class="evaluate_fd1_0_c0_c1_c2_c0_c1">
|
|
<text class="evaluate_price1_fd1_0_c0_c1_c2_c0_c1">{{ item.goods_money | frontPrice }}</text>
|
|
<text class="evaluate_price2_fd1_0_c0_c1_c2_c0_c1">{{ item.goods_money | laterPrice }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-wrap align-center evaluate_fd1_0_c0_c1_c2_c1">
|
|
<text>x</text>
|
|
<text>{{ item.num }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-wrap align-center justify-between evaluate_fd1_0_c1">
|
|
<text class="evaluate_fd1_0_c1_c0">商品评价</text>
|
|
<view class="flex flex-wrap align-center">
|
|
<image
|
|
@click="submitData[itemIndex].star = starNum"
|
|
v-for="starNum in [1, 2, 3, 4, 5]"
|
|
:key="starNum"
|
|
class="evaluate_star1fd1_0_c1_c1"
|
|
mode="aspectFit"
|
|
:src="submitData[itemIndex].star >= starNum ? '@/static/global/95.png' : '@/static/global/96.png'"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-wrap align-center">
|
|
<view class="flex flex-wrap evaluate_fd1_0_c2_c0">
|
|
<textarea
|
|
class="flex evaluate_input_fd1_0_c2_c0"
|
|
confirm-type="done"
|
|
:placeholder="'请输入您的评价'"
|
|
:maxlength="240"
|
|
placeholder-style="color:#999;font-size:28rpx"
|
|
v-model="submitData[itemIndex].content"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-direction flex-wrap align-stretch">
|
|
<view class="evaluate_fd1_0_c3_c0">
|
|
<text class="evaluate_fd1_0_c3_c0_c0">添加照片</text>
|
|
<text class="evaluate_fd1_0_c3_c0_c1">最多可上传{{ maxlength }}张</text>
|
|
</view>
|
|
<view class="flex flex-wrap align-start flex evaluate_fd1_0_c3_c1">
|
|
<view v-for="(image, index) in submitData[itemIndex].images" :key="index" class="flex position-relative evaluate_fd1_0_c3_c10">
|
|
<text
|
|
class="fu-iconfont2 position-absolute evaluate_fd1_0_c3_c100"
|
|
@tap.stop="delImage(submitData[itemIndex], index, 'thumb', 'images')"
|
|
>
|
|

|
|
</text>
|
|
<image
|
|
mode="aspectFill"
|
|
class="evaluate_fd1_0_c3_c101"
|
|
@tap.stop="previewImage(submitData[itemIndex].images, index)"
|
|
:src="image"
|
|
></image>
|
|
</view>
|
|
<image
|
|
class="evaluate_fd1_0_c3_c11"
|
|
@tap.stop="manyChooseImage(submitData[itemIndex], 'thumb', 'images')"
|
|
v-if="submitData[itemIndex].images.length < maxlength"
|
|
mode="aspectFit"
|
|
src="@/static/global/119.jpg"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-wrap align-center" @tap.stop="submitData[itemIndex].is_anonymous = !submitData[itemIndex].is_anonymous">
|
|
<image class="evaluate_fd1_0_c4_c0" src="@/static/global/111.png" v-if="submitData[itemIndex].is_anonymous"></image>
|
|
<image class="evaluate_fd1_0_c4_c0 evaluate_fd1_0_c4_c0_1" src="@/static/global/110.png" v-else></image>
|
|
<text class="evaluate_fd1_0_c4_c1">匿名评价</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { UploadImage } from '@/common/utils/index'
|
|
export default {
|
|
name: 'benben-goods-evaluate',
|
|
props: {
|
|
// 商品列表
|
|
goodsList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
// 提交数据
|
|
value: {
|
|
type: [String],
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
submitData: [],
|
|
maxlength: 9,
|
|
}
|
|
},
|
|
computed: {
|
|
selectSpecStr() {
|
|
return ''
|
|
},
|
|
},
|
|
watch: {
|
|
goodsList: {
|
|
handler(value) {
|
|
let submitData = []
|
|
value.map((item) => {
|
|
let info = this.submitData.find((val) => val.goods_id == item.goods_id && val.sku_id == item.sku_id)
|
|
if (info) {
|
|
submitData.push(info)
|
|
} else {
|
|
submitData.push({
|
|
refund_id: item.refund_id,
|
|
sku_id: item.sku_id,
|
|
goods_id: item.goods_id,
|
|
star: 5,
|
|
content: '',
|
|
thumb: '',
|
|
images: [],
|
|
is_anonymous: false,
|
|
})
|
|
}
|
|
})
|
|
this.submitData = submitData
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
submitData: {
|
|
handler(value) {
|
|
let goods_comment = []
|
|
for (let index = 0; index < value.length; index++) {
|
|
const element = value[index]
|
|
if (element.refund_id <= 0) {
|
|
goods_comment.push({
|
|
goods_id: element.goods_id,
|
|
sku_id: element.sku_id,
|
|
star: element.star,
|
|
content: element.content ? element.content : '这家伙太懒什么都没有留下',
|
|
thumb: element.thumb,
|
|
star: element.star,
|
|
type: element.is_anonymous ? 0 : 1,
|
|
})
|
|
}
|
|
}
|
|
this.$emit('input', JSON.stringify(goods_comment))
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
//点击删除
|
|
delImage(item, index, idsName, imgsName) {
|
|
let imgIdArr = item[idsName] ? (item[idsName] + '').split(',') : []
|
|
let imgList = JSON.parse(JSON.stringify(item[imgsName]))
|
|
imgIdArr.splice(index, 1)
|
|
imgList.splice(index, 1)
|
|
this.$set(item, idsName, imgIdArr.join(','))
|
|
this.$set(item, imgsName, imgList)
|
|
},
|
|
//点击预览
|
|
previewImage(imgList, index) {
|
|
uni.previewImage({
|
|
current: imgList[index],
|
|
urls: imgList,
|
|
})
|
|
},
|
|
//点击上传
|
|
manyChooseImage(item, idsName, imgsName) {
|
|
let self = this
|
|
let imgIdArr = item[idsName] ? (item[idsName] + '').split(',') : []
|
|
let imgList = JSON.parse(JSON.stringify(item[imgsName]))
|
|
if (self.uploading) return
|
|
if (self.maxlength - imgList.length < 1) return
|
|
// 从相册中选择图片
|
|
uni.chooseImage({
|
|
count: self.maxlength - imgList.length, // 默认3
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
success: function (res) {
|
|
self.uploading = true
|
|
// 开始上传
|
|
new UploadImage(res.tempFiles, {
|
|
complete: function (res) {
|
|
self.uploading = false
|
|
res.map((item) => {
|
|
imgIdArr.push(item.id)
|
|
imgList.push(item.path)
|
|
})
|
|
self.$set(item, idsName, imgIdArr.join(','))
|
|
self.$set(item, imgsName, imgList)
|
|
},
|
|
})
|
|
},
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.evaluate_fd2_0 {
|
|
background: rgba(64, 131, 62, 1);
|
|
background-size: 100% !important;
|
|
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.evaluate_flex_2 {
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
bottom: calc(40rpx + var(--window-bottom));
|
|
}
|
|
|
|
.evaluate_fd1_0 {
|
|
background: #fff;
|
|
background-size: 100% !important;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
padding: 32rpx 24rpx 32rpx 24rpx;
|
|
background-size: 100% auto !important;
|
|
margin: 12rpx 0rpx 12rpx 0rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0 {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 0rpx 0rpx 32rpx 0rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0_c0 {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0_c1 {
|
|
margin: 0rpx 0rpx 0rpx 34rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0_c1_c0 {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0_c1_c1 {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin: 10rpx 0rpx 36rpx 0rpx;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0_c1_c2_c0_c0 {
|
|
font-size: 20rpx;
|
|
font-weight: 700;
|
|
color: #ff4133;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0_c1_c2_c0_c1 {
|
|
margin-top: auto;
|
|
color: #ff5536;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.evaluate_price1_fd1_0_c0_c1_c2_c0_c1 {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.evaluate_price2_fd1_0_c0_c1_c2_c0_c1 {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c0_c1_c2_c1 {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.evaluate_fd1_0_c1 {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 32rpx 0rpx 32rpx 0rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c1_c0 {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.evaluate_star1fd1_0_c1_c1 {
|
|
width: 33rpx;
|
|
height: 34rpx;
|
|
margin: 0rpx 10rpx 0rpx 10rpx;
|
|
}
|
|
|
|
.evaluate_star1fd1_0_c1_c1 {
|
|
height: 33rpx;
|
|
margin: 0rpx 10rpx 0rpx 10rpx;
|
|
width: 34rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c2_c0 {
|
|
background: rgba(248, 248, 248, 1);
|
|
background-size: 100% !important;
|
|
width: 654rpx;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
height: 272rpx;
|
|
margin: 32rpx 0rpx 0rpx 0rpx;
|
|
padding: 20rpx 20rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.evaluate_input_fd1_0_c2_c0 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c0 {
|
|
margin: 32rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c0_c0 {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c0_c1 {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #bfbfbf;
|
|
margin: 0rpx 0rpx 0rpx 16rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c1 {
|
|
width: 100%;
|
|
padding: 32rpx 24rpx 0;
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c10 {
|
|
margin: 0rpx 24rpx 24rpx 0rpx;
|
|
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c100 {
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
z-index: 10;
|
|
color: #ff5536;
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c101 {
|
|
width: 186rpx;
|
|
height: 186rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c3_c11 {
|
|
width: 186rpx;
|
|
height: 186rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c4_c0 {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin: 0rpx 16rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c4_c0_1 {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin: 0rpx 16rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.evaluate_fd1_0_c4_c1 {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
|
|
.evaluate_flex_1 {
|
|
padding: 5rpx 24rpx 0rpx 24rpx;
|
|
}
|
|
|
|
.evaluate_fd0_0 {
|
|
padding: 0rpx 32rpx 0rpx 32rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
|
|
.evaluate_fd0_0_c0 {
|
|
width: 200rpx;
|
|
}
|
|
|
|
.evaluate_fd0_0_c0_c0 {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.evaluate_fd0_0_c1_c0 {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.evaluate_fd0_0_c2 {
|
|
padding: 0rpx 0rpx 0rpx 0rpx;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.evaluate_flex_0 {
|
|
background: #fff;
|
|
background-size: 100% !important;
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
top: 0rpx;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.page {
|
|
min-height: calc(100vh - var(--window-bottom));
|
|
background: #f8f8f8;
|
|
background-size: 100% auto !important;
|
|
}
|
|
</style>
|