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.
345 lines
7.8 KiB
345 lines
7.8 KiB
<template>
|
|
|
|
<BaseContainer class="goods-evaluate">
|
|
<NavBar title="商品评价" />
|
|
<template v-if="cart_info.id">
|
|
<view class="goods-section">
|
|
<view>
|
|
<image mode="aspectFit" :src="cart_info.productInfo.image" alt="" />
|
|
</view>
|
|
<view>{{ cart_info.productInfo.store_name }}</view>
|
|
<view>
|
|
<view>￥{{ cart_info.truePrice }}</view>
|
|
<view>x{{ cart_info.cart_num }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 评价 -->
|
|
<view class="evaluate-section">
|
|
<view class="ul" v-if="rateList.length">
|
|
<view class="li" v-for="(item, index) in rateList" :key="index">
|
|
<view>{{ item.name }}</view>
|
|
<view>
|
|
<text
|
|
v-for="star in 5"
|
|
:key="star"
|
|
:class="{ on: star <= item.value }"
|
|
class="iconfont iconxing"
|
|
@click="rateChange(star, index)"
|
|
></text>
|
|
</view>
|
|
<view>{{ item.value | toDesc }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="sub-box">
|
|
<textarea
|
|
v-model="textValue"
|
|
ref="textarea"
|
|
:style="{ minHeight: '3em' }"
|
|
maxlength="500"
|
|
auto-height
|
|
placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
|
|
></textarea>
|
|
<view class="img-box">
|
|
<view v-if="imageList.length">
|
|
<view
|
|
class="img-item"
|
|
v-for="(item, index) in imageList"
|
|
:key="item"
|
|
>
|
|
<image :src="item" :alt="item" />
|
|
<view @click="imageDelete(index)"></view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="label"
|
|
v-if="imageList.length < 6"
|
|
@click="imageUpload"
|
|
>
|
|
<view class="span">上传图片</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="button flex flex-center" @click="evaluateSubmit"
|
|
>立即评价</view
|
|
>
|
|
</view>
|
|
</template>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOrderReplyData, saveProductComment } from "@/api/user";
|
|
|
|
export default {
|
|
filters: {
|
|
// 转换评分
|
|
toDesc(value) {
|
|
return ["非常差", "差", "一般", "好", "非常好"][value - 1];
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
cart_info: {},
|
|
textValue: "",
|
|
imageList: [],
|
|
rateList: [
|
|
{
|
|
name: "商品质量",
|
|
value: 5,
|
|
},
|
|
{
|
|
name: "服务态度",
|
|
value: 5,
|
|
},
|
|
{
|
|
name: "物流服务",
|
|
value: 5,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad({ unique }) {
|
|
this.unique = unique;
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
uni.showLoading({ mask: true });
|
|
try {
|
|
const { data } = await getOrderReplyData(this.unique);
|
|
uni.hideLoading();
|
|
this.cart_info = data.cartInfo.cart_info;
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(err.msg);
|
|
}
|
|
},
|
|
// 上传图片
|
|
imageUpload() {
|
|
this.$util.pickerOneImg().then((path) => {
|
|
path && this.imageList.push(path);
|
|
});
|
|
},
|
|
// 删除图片
|
|
imageDelete(index) {
|
|
this.imageList.splice(index, 1);
|
|
},
|
|
// 评分
|
|
rateChange(value, index) {
|
|
this.rateList[index].value = value;
|
|
},
|
|
// 提交评价
|
|
async evaluateSubmit() {
|
|
uni.showLoading({ mask: true });
|
|
|
|
const data = {
|
|
product_score: this.rateList[0].value,
|
|
service_score: this.rateList[1].value,
|
|
delivery_score: this.rateList[2].value,
|
|
comment: this.textValue.trim(),
|
|
pics: this.imageList,
|
|
};
|
|
|
|
try {
|
|
const { msg, code } = await saveProductComment(this.unique, data);
|
|
uni.hideLoading();
|
|
this.$util.showMsg(msg);
|
|
if (code === 200) {
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: "/pages/special/order_store_list",
|
|
});
|
|
}, 500);
|
|
}
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
.goods-evaluate .goods-section {
|
|
display: -webkit-box;
|
|
display: flex;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #ffffff;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.goods-evaluate .goods-section image {
|
|
display: block;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 6rpx;
|
|
background-color: #868686;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.goods-evaluate .goods-section > view:nth-child(2) {
|
|
-webkit-box-flex: 1;
|
|
flex: 1;
|
|
margin-right: 25rpx;
|
|
margin-left: 25rpx;
|
|
}
|
|
|
|
.goods-evaluate .goods-section > view:last-child {
|
|
text-align: right;
|
|
color: #999999;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section {
|
|
padding: 35rpx 30rpx 80rpx;
|
|
margin-top: 12rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section > .ul .li {
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section > .ul .li ~ .li {
|
|
margin-top: 35rpx;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section .li view:nth-child(2) {
|
|
margin-right: 30rpx;
|
|
margin-left: 40rpx;
|
|
font-size: 0;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section .li view:last-child {
|
|
font-size: 24rpx;
|
|
color: #aaa;
|
|
}
|
|
|
|
.goods-evaluate .iconxing {
|
|
font-size: 36rpx;
|
|
color: #ccc;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.goods-evaluate .iconxing ~ .iconxing {
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.goods-evaluate .iconxing.on {
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.sub-box {
|
|
padding: 30rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 55rpx;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.goods-evaluate textarea {
|
|
width: 100%;
|
|
resize: none;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.goods-evaluate textarea::-webkit-input-placeholder,
|
|
.goods-evaluate textarea::placeholder {
|
|
color: #bbb;
|
|
}
|
|
|
|
.img-box {
|
|
margin-top: 60rpx;
|
|
margin-right: -32rpx;
|
|
margin-bottom: -32rpx;
|
|
|
|
&::after {
|
|
content: " ";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.img-item {
|
|
position: relative;
|
|
float: left;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-right: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.img-item image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 3rpx;
|
|
background-color: #e93323;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section .img-item view {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
margin-top: -12rpx;
|
|
margin-right: -12rpx;
|
|
background: #2c8eff
|
|
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1klEQVQ4T63TLVJDUQyG4edUlBkQrQYcawGDKCuAVbCE7gBThwAUi4BKNCyBH4nChknnlCnl3jt0bmPPyZvkS74SETs4wjs+SymhIyKiYBf7eCsRcYApnnGXoDZITR7hBBNcJSBpp7jAHDdNkLXkczzgOgHZ0pKaD38gnX9y3K4PVY7WAll9ES2QW3zhGI3d/QBaIE91OylYoz6/ACuQcVX5EgPcY4bX9Q1tF9Cgw/9H6CVirzX2PqQep/y4POV0VZrpZUMzneVq0wvDauePDey8h8O08zdMV6S1c4zvwQAAAABJRU5ErkJggg==")
|
|
center/16rpx no-repeat;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section .label {
|
|
float: left;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border: 1px solid #ddd;
|
|
border-radius: 3rpx;
|
|
margin-right: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
font-size: 0;
|
|
line-height: 140rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.goods-evaluate .evaluate-section .label .span {
|
|
display: inline-block;
|
|
padding-top: 50rpx;
|
|
background: url("@/static/icon/camera.png") center top/46rpx no-repeat;
|
|
vertical-align: middle;
|
|
font-size: 22rpx;
|
|
line-height: 1.5;
|
|
color: #bbb;
|
|
}
|
|
|
|
.goods-evaluate .button {
|
|
width: 100%;
|
|
height: 86rpx;
|
|
border-radius: 43rpx;
|
|
margin-top: 55rpx;
|
|
background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
|