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.
417 lines
12 KiB
417 lines
12 KiB
<template> |
|
<view class="evaluate-con"> |
|
<view class="header"> |
|
<cu-custom :isBack="true" :isCenter="true"> |
|
<block slot="backText"> |
|
<view class="backImg"> |
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
</view> |
|
</block> |
|
<block slot="content"> |
|
<view class="tab-title">商品评价</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
|
|
<view class="content-box"> |
|
<view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo"> |
|
<view class="pictrue"> |
|
<image :src="orderCon.productInfo.attrInfo.image || orderCon.productInfo.image" class="image" /> |
|
</view> |
|
<view class="text"> |
|
<view class="name line1">{{ orderCon.productInfo.storeName }}</view> |
|
<view class="sku-box acea-row"> |
|
<view class="sku">{{orderCon.productInfo.attrInfo.sku}}</view> |
|
</view> |
|
<view class="money acea-row row-between-wrapper"> |
|
<view>￥{{ orderCon.productInfo.price }}</view> |
|
<view class="num">x{{ orderCon.cartNum }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="score-box"> |
|
<view class="score-item acea-row row-middle" v-for="(item, scoreListIndexw) in scoreList" :key="scoreListIndexw" > |
|
<view>{{ item.name }}</view> |
|
<view class="starsList acea-row"> |
|
<view class="item" @click="stars(starsIndexn, scoreListIndexw)" v-for="(itemn, starsIndexn) in item.stars" :key="starsIndexn"> |
|
<image v-if="item.index >= starsIndexn" src="../../../static/images/star-light.png" mode=""></image> |
|
<image v-else src="../../../static/images/star-border-light.png" mode=""></image> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="textarea-box acea-row"> |
|
<image src="@/static/images/write-icon.png" mode=""></image> |
|
<textarea class="textarea" |
|
placeholder="为其他小伙伴提供更有帮助性的评价吧！" |
|
placeholder-style="font-size:24rpx;color: #999999;line-height:32rpx;font-weight:400;" |
|
v-model="expect" |
|
></textarea> |
|
</view> |
|
|
|
<view class="pictrue-list" :style="uploadPictures.length>0?'':'padding-bottom: 20rpx;'"> |
|
<view class="acea-row row-middle" v-if="uploadPictures.length > 0"> |
|
<view class="pictrue" v-for="(item, uploadPicturesIndex) in uploadPictures" :key="uploadPicturesIndex" > |
|
<image class="image" :src="item" mode="aspectFill"/> |
|
<image class="close" src="../../../static/images/close.png" mode="" @click="uploadPictures.splice(uploadPicturesIndex, 1)"></image> |
|
</view> |
|
<view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage"> |
|
<image class="camera" src="../../../static/images/camera.png" mode=""></image> |
|
<view>添加图片</view> |
|
</view> |
|
</view> |
|
<view class="no-picture acea-row row-column row-center-wrapper" v-else @tap="chooseImage"> |
|
<image class="camera" src="../../../static/images/camera.png" mode=""></image> |
|
<view>添加图片</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
|
|
<view class="evaluateBnt" @click="submit">提交</view> |
|
|
|
<!-- <view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo"> |
|
<view class="pictrue"> |
|
<image :src="orderCon.productInfo.image" class="image" /> |
|
</view> |
|
<view class="text acea-row row-between"> |
|
<view class="name line2">{{ orderCon.productInfo.storeName }}</view> |
|
<view class="money"> |
|
<view>￥{{ orderCon.productInfo.price }}</view> |
|
<view class="num">x{{ orderCon.cartNum }}</view> |
|
</view> |
|
</view> |
|
</view> --> |
|
<!-- <view class="score"> |
|
<view |
|
class="item acea-row row-middle" |
|
v-for="(item, scoreListIndexw) in scoreList" |
|
:key="scoreListIndexw" |
|
> |
|
<view>{{ item.name }}</view> |
|
<view class="starsList"> |
|
<text |
|
@click="stars(starsIndexn, scoreListIndexw)" |
|
v-for="(itemn, starsIndexn) in item.stars" |
|
:key="starsIndexn" |
|
class="iconfont" |
|
:class="item.index >= starsIndexn ? 'icon-shitixing font-color-red': 'icon-kongxinxing'" |
|
></text> |
|
</view> |
|
<text class="evaluate">{{item.index === -1 ? "" : item.index + 1 + "分"}}</text> |
|
</view> |
|
<view class="textarea"> |
|
<textarea placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" v-model="expect"></textarea> |
|
<view class="list acea-row row-middle"> |
|
<view |
|
class="pictrue" |
|
v-for="(item, uploadPicturesIndex) in uploadPictures" |
|
:key="uploadPicturesIndex" |
|
> |
|
<image :src="item" /> |
|
<text |
|
class="iconfont icon-guanbi1 font-color-red" |
|
@click="uploadPictures.splice(uploadPicturesIndex, 1)" |
|
></text> |
|
</view> |
|
<view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage"> |
|
<text class="iconfont icon-icon25201"></text> |
|
<view>上传图片</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="evaluateBnt bg-color-red" @click="submit">立即评价</view> |
|
</view> --> |
|
</view> |
|
</template> |
|
<script> |
|
import { postOrderProduct, postOrderComment } from "@/api/store"; |
|
import { trim, chooseImage } from "@/utils"; |
|
import { VUE_APP_API_URL } from "@/config"; |
|
import { required } from "@/utils/validate"; |
|
import { validatorDefaultCatch } from "@/utils/dialog"; |
|
|
|
const NAME = "GoodsEvaluate"; |
|
|
|
export default { |
|
name: NAME, |
|
components: { |
|
// VueCoreImageUpload |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
orderCon: { |
|
cartProduct: { |
|
productInfo: {} |
|
} |
|
}, |
|
scoreList: [ |
|
// { |
|
// name: "评分", |
|
// stars: ["", "", "", "", ""], |
|
// index: -1 |
|
// }, |
|
{ |
|
name: "商品评分", |
|
stars: ["", "", "", "", ""], |
|
index: -1 |
|
}, |
|
{ |
|
name: "服务评分", |
|
stars: ["", "", "", "", ""], |
|
index: -1 |
|
} |
|
], |
|
uploadPictures: [], |
|
expect: "", |
|
unique: "" |
|
}; |
|
}, |
|
mounted: function() { |
|
this.unique = this.$yroute.query.id; |
|
this.getOrderProduct(); |
|
}, |
|
watch: { |
|
$yroute(n) { |
|
if (n.name === NAME && this.unique !== n.params.id) { |
|
this.unique = n.params.id; |
|
this.$set(this.scoreList[0], "index", -1); |
|
this.$set(this.scoreList[1], "index", -1); |
|
this.expect = ""; |
|
this.uploadPictures = []; |
|
this.getOrderProduct(); |
|
} |
|
} |
|
}, |
|
methods: { |
|
getOrderProduct: function() { |
|
let that = this, |
|
unique = that.unique; |
|
postOrderProduct(unique).then(res => { |
|
that.orderCon = res.data; |
|
}); |
|
}, |
|
stars: function(indexn, indexw) { |
|
this.scoreList[indexw].index = indexn; |
|
}, |
|
chooseImage() { |
|
chooseImage(img => { |
|
this.uploadPictures.push(img); |
|
}); |
|
}, |
|
async submit() { |
|
const expect = trim(this.expect), |
|
product_score = |
|
this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1, |
|
service_score = |
|
this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1; |
|
try { |
|
await this.$validator({ |
|
product_score: [ |
|
required("请给商品评分", { |
|
type: "number" |
|
}) |
|
], |
|
service_score: [ |
|
required("请给服务评分", { |
|
type: "number" |
|
}) |
|
] |
|
}).validate({ |
|
product_score, |
|
service_score |
|
}); |
|
} catch (e) { |
|
return validatorDefaultCatch(e); |
|
} |
|
postOrderComment({ |
|
productScore: product_score, |
|
serviceScore: service_score, |
|
unique: this.unique, |
|
pics: this.uploadPictures.join(","), |
|
comment: expect |
|
}) |
|
.then(() => { |
|
uni.showToast({ |
|
title: "评价成功", |
|
icon: "success", |
|
duration: 2000 |
|
}); |
|
|
|
// ? 回跳到上一页 |
|
this.$yrouter.back(); |
|
|
|
// ? 默认跳转到详情页 |
|
// this.$yrouter.push({ |
|
// path: "/pages/order/OrderDetails/index", |
|
// query: { |
|
// id: this.orderCon.orderId |
|
// } |
|
// }); |
|
|
|
// ? 可选重定向到详情页，这时左上角会有一个返回首页的图标 |
|
// this.$yrouter.reLaunch({ |
|
// path: "/pages/home/index", |
|
// }); |
|
}) |
|
.catch(err => { |
|
uni.showToast({ |
|
title: |
|
err.msg || err.response.data.msg || err.response.data.message, |
|
icon: "none", |
|
duration: 2000 |
|
}); |
|
}); |
|
} |
|
} |
|
}; |
|
</script> |
|
<style scoped lang="less"> |
|
.header { |
|
.tab-title { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #2DB5AE; |
|
line-height: 42rpx; |
|
} |
|
.backImg { |
|
width: 88rpx; |
|
height: 62rpx; |
|
padding-left: 26rpx; |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.content-box { |
|
margin: 0rpx 32rpx 46rpx; |
|
padding: 20rpx 20rpx 0rpx; |
|
width: 686rpx; |
|
// height: 340px; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
.sku-box { |
|
padding: 18rpx 0rpx; |
|
.sku { |
|
padding: 0rpx 16rpx; |
|
height: 46rpx; |
|
background: #E3E3E3; |
|
border-radius: 8rpx; |
|
font-size: 20rpx; |
|
line-height: 46rpx; |
|
} |
|
} |
|
} |
|
|
|
.score-box { |
|
.score-item { |
|
padding-bottom: 20rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 34rpx; |
|
.starsList { |
|
padding-left: 20rpx; |
|
.item { |
|
width: 48rpx; |
|
height: 48rpx; |
|
margin-right: 24rpx; |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.textarea-box { |
|
width: 646rpx; |
|
height: 170rpx; |
|
box-shadow: inset 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.15); |
|
border-radius: 16rpx; |
|
position: relative; |
|
padding: 16rpx; |
|
margin-bottom: 20rpx; |
|
image { |
|
width: 32rpx; |
|
height: 32rpx; |
|
} |
|
.textarea { |
|
width: 582rpx; |
|
height: 100%; |
|
font-size: 24rpx; |
|
color: #3A3A3C; |
|
font-weight: 500; |
|
line-height: 32rpx; |
|
} |
|
} |
|
|
|
.pictrue-list { |
|
font-size: 20rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
line-height: 26rpx; |
|
.pictrue { |
|
width: 204rpx; |
|
height: 204rpx; |
|
background: #F1F1F1; |
|
border-radius: 16rpx; |
|
margin-right: 17rpx; |
|
margin-bottom: 20rpx; |
|
position: relative; |
|
.image { |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 16rpx; |
|
} |
|
.close { |
|
width: 30rpx; |
|
height: 30rpx; |
|
position: absolute; |
|
top: 10rpx; |
|
right: 10rpx; |
|
} |
|
} |
|
.pictrue:nth-child(3n) { |
|
margin-right: 0rpx; |
|
} |
|
.no-picture { |
|
width: 646rpx; |
|
height: 204rpx; |
|
background: #F1F1F1; |
|
border-radius: 16rpx; |
|
} |
|
.camera { |
|
width: 104rpx; |
|
height: 104rpx; |
|
} |
|
} |
|
|
|
.evaluateBnt { |
|
margin: 0rpx 32rpx; |
|
width: 686rpx; |
|
height: 70rpx; |
|
background: #2DB5AE; |
|
border-radius: 16rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #F5F6F8; |
|
line-height: 70rpx; |
|
text-align: center; |
|
} |
|
|
|
.evaluate-con .score .textarea .list .pictrue.uploadBnt { |
|
border: 1px solid #ddd; |
|
} |
|
</style> |