200 lines
5.1 KiB
Vue
200 lines
5.1 KiB
Vue
<template>
|
||
<view>
|
||
<view style="width: 95%;height: 180upx;background: #FFFFFF; border-radius: 20upx;padding: 20upx;margin: 20upx;">
|
||
<view style="display: flex;margin: 15upx 0 0 20upx;">
|
||
<image :src="list.img" style="width: 20%; height: 120upx;"></image>
|
||
<view style="margin-left: 20upx;width: 75%;">
|
||
<view style="font-size: 34upx;color: #FF332F;font-weight: bold;margin-top: 10upx;">¥ {{list.price}}</view>
|
||
<view style="width: 100%;margin-top: 10upx;font-size: 28upx;color: #333333;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{list.title}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="background: #FFFFFF;padding: 20upx;margin: 20upx;width: 95%;border-radius: 20rpx;">
|
||
<view style="font-size: 32rpx;color: #333333;">分享你的使用体验吧</view>
|
||
<view class="orang-view">
|
||
<view><textarea placeholder="写出您的感受,可以帮助更多小伙伴哦~" v-model="content" style="color: #999999;font-size: 26rpx;width: 100%;" /></view>
|
||
</view>
|
||
<view class="header-ping">
|
||
<text class="quanbu2" style="font-weight: bold;">
|
||
服务评分
|
||
</text>
|
||
<view class="feedback-star-view">
|
||
<text class="feedback-star" style="font-size: 42upx;" v-for="(value, key) in stars" :key="key" :class="key < score ? 'active' : ''"
|
||
@tap="chooseStar(value)"></text>
|
||
</view>
|
||
<text style="color: #999999;font-size: 28upx;text-align: right;margin-left: 20upx;width: 24%;">{{evaluate}}</text>
|
||
</view>
|
||
<shmily-drag-image :list.sync="imageList"></shmily-drag-image>
|
||
</view>
|
||
<button style="background-color: #20C675;width: 690upx;color: #FFFFFF;border-radius: 20rpx;margin-top: 40rpx;" @click='addPinglun()'>发布评论</button>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue'
|
||
export default {
|
||
components: {
|
||
shmilyDragImage
|
||
},
|
||
data() {
|
||
return {
|
||
stars: [1, 2, 3, 4, 5],
|
||
imageList: [],
|
||
userImage:'',
|
||
userName:'',
|
||
userId:'',
|
||
content:'',
|
||
list:[],
|
||
evaluate:'',
|
||
score: 0
|
||
};
|
||
},
|
||
onLoad(d) {
|
||
let ordersId = d.ordersId;
|
||
this.userId = this.$queue.getData('userId');
|
||
if(this.userId){
|
||
this.getUserInfo();
|
||
}
|
||
if(ordersId){
|
||
this.getListById(ordersId);
|
||
}
|
||
},
|
||
methods: {
|
||
chooseStar(e) {
|
||
this.score = e;
|
||
// 1非常差,2差,3,一般,4好,5非常好
|
||
if(e==1){
|
||
this.evaluate='非常不满意'
|
||
}else if(e==2){
|
||
this.evaluate='不满意'
|
||
}else if(e==3){
|
||
this.evaluate='一般满意'
|
||
}else if(e==4){
|
||
this.evaluate='满意'
|
||
}else if(e==5){
|
||
this.evaluate='非常满意'
|
||
}
|
||
},
|
||
getUserInfo() {
|
||
this.$Request.get("/app/user/selectUserById").then(res => {
|
||
if (res.code == 0) {
|
||
this.userName = res.data.userName
|
||
this.userImage = res.data.avatar
|
||
}
|
||
});
|
||
},
|
||
getListById(id) {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
this.$Request.getT('/app/orders/find?id=' + id).then(res => {
|
||
if (res.status === 0) {
|
||
this.list = res.data;
|
||
}
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
addPinglun(){
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
var image = '';
|
||
for (var i = 0; i < this.imageList.length; i++) {
|
||
if(i === 0){
|
||
image = this.imageList[i];
|
||
}else{
|
||
image = image + ',' + this.imageList[i];
|
||
}
|
||
}
|
||
if(this.content == ''){
|
||
uni.hideLoading();
|
||
this.$queue.showToast('评论信息不能为空!');
|
||
return;
|
||
}
|
||
|
||
if(this.score === 0){
|
||
uni.hideLoading();
|
||
this.$queue.showToast('评分不能为空');
|
||
return;
|
||
}
|
||
var scoreType = 0;
|
||
if(this.score === 1 || this.score === 2){
|
||
scoreType = 3;
|
||
}else if(this.score === 3){
|
||
scoreType = 2;
|
||
}else{
|
||
scoreType = 1;
|
||
}
|
||
let data = {
|
||
content:this.content,
|
||
goodsId:this.list.goodsId,
|
||
img:image,
|
||
orderId:this.list.id,
|
||
sku:this.list.detailJson,
|
||
skuId:this.list.skuId,
|
||
score:this.score,
|
||
userHeader:this.userImage,
|
||
scoreType:scoreType,
|
||
userId:this.userId,
|
||
userName:this.userName
|
||
}
|
||
this.$Request.postJson('/app/selfGoodsComment/save',data).then(res =>{
|
||
if(res.status === 0){
|
||
uni.showToast({
|
||
title: '评论成功!'
|
||
});
|
||
setTimeout(res =>{
|
||
uni.hideLoading();
|
||
uni.navigateBack();
|
||
},1000);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F2F2F2;
|
||
}
|
||
|
||
.ping-img{
|
||
width: 38upx;height: 38upx; vertical-align: text-top;margin-right: 14upx;
|
||
}
|
||
.orang-view{
|
||
background: #F5F6F8; padding: 20upx;border-radius: 15upx;margin: 20upx 0 40upx;
|
||
}
|
||
.header-ping{
|
||
display: flex;justify-content: space-around;padding-bottom: 20upx;
|
||
}
|
||
/* 星星 */
|
||
@font-face {
|
||
font-family: uniicons;
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
|
||
}
|
||
.ping-view2{font-size: 24upx;color: #999999;margin-top:20upx;}
|
||
.feedback-star {
|
||
font-family: uniicons;
|
||
margin-left: 18upx;
|
||
color: #999999;
|
||
}
|
||
.feedback-star-view {
|
||
margin-left: 0upx;
|
||
margin-top: -2upx;
|
||
}
|
||
.feedback-star:after {
|
||
content: '\e408';
|
||
}
|
||
.feedback-star.active {
|
||
color: #20C675;
|
||
}
|
||
.feedback-star.active:after {
|
||
content: '\e438';
|
||
}
|
||
/* 星星 */
|
||
|
||
</style> |