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.
 
 
 
 
 

313 lines
8.9 KiB

<template>
<view :style="colorStyle">
<view class="topdaohang" @click="goarrow">
<text class="iconfont icon-ic_leftarrow"></text>
<text >商品评价</text>
</view>
<view class="px-20">
<view class="h-120 rd-24rpx mt-24 pl-24 flex-y-center bgfot">
<text class="fs-28 fw-500 mr-32 colorhui1">商品评价</text>
<view class="flex-y-center">
<view class="flex-y-center nav-item" v-for="(item, index) in replyNav" :key="index"
@tap="replyNavChange(item.value)">
<image :src=" reply_score == item.value ? item.activePic : item.pic" class="w-44 h-44"></image>
<text class="fs-32 pl-14"
:class="reply_score == item.value ? 'font-num' : 'text--w111-999'">{{item.title}}</text>
</view>
</view>
</view>
<view class="bgfot rd-24rpx mt-20 pt-32 pr-24 pb-32 pl-24">
<view class="flex-y-center pb-40">
<image :src="productInfo.attrInfo ? productInfo.attrInfo.image : productInfo.image" class="w-88 h-88 rd-16rpx"></image>
<view class="pl-20 flex-1">
<view class="fs-28 lh-40rpx line1 w-538 colorhui1">{{productInfo.store_name}}</view>
<view class="fs-32 SemiBold mt-12 colorzong">¥{{productInfo.attrInfo?productInfo.attrInfo.price:productInfo.price}}</view>
</view>
</view>
<view class="pt-40 colorfff">
<textarea placeholder='商品满足你的期待么?说说你的想法,分享给想买的他们吧~(最多输入100个字)' v-model="comment" name="comment" placeholder-class='placeholder' maxlength='100' class="fs-26 lh-40rpx"></textarea>
<view class="grid-column-4 grid-gap-24rpx">
<view class="relative h-148" v-for="(item,index) in pics" :key="index">
<image :src="item" mode="aspectFill" class="w-148 h-148 rd-16rpx"></image>
<view class="abs-rt w-32 h-32 del-pic flex-center fs-24" @click="DelPic(index)">
<text class="iconfont icon-ic_close fs-24 text--w111-fff"></text>
</view>
</view>
<view class="h-148 flex-col flex-center upload bghui rd-16rpx"
@click='uploadpic' v-if="pics.length < 8">
<image class="w-48 h-48" src="../static/ic_camera.png"></image>
<text class="fs-24 lh-34rpx pt-8 colorhui1">上传图片</text>
</view>
</view>
</view>
</view>
<view class="bgfot rd-24rpx mt-20 pt-32 pr-24 pb-32 pl-24">
<view class="flex-y-center">
<text class="fs-28 fw-500 colorhui1">商品质量</text>
<view class="ml-40 flex">
<text class="star iconfont colorhui1"
:class="item <= product_score ? 'icon-ic_star1 colorhuang' : 'icon-ic_star'"
v-for="(item, index) in starArr" :key="index" @click="stars(0,item)"></text>
</view>
</view>
<view class="flex-y-center mt-40">
<text class="fs-28 fw-500 colorhui1">服务态度</text>
<view class="ml-40 flex">
<text class="star iconfont colorhui1"
:class="item <= service_score ? 'icon-ic_star1 colorhuang' : 'icon-ic_star'"
v-for="(item, index) in starArr" :key="index" @click="stars(1,item)"></text>
</view>
</view>
<!-- delivery_score -->
<view class="flex-y-center mt-40">
<text class="fs-28 fw-500 colorhui1">物流服务</text>
<view class="ml-40 flex">
<text class="star iconfont colorhui1"
:class="item <= delivery_score ? 'icon-ic_star1 colorhuang' : 'icon-ic_star'"
v-for="(item, index) in starArr" :key="index" @click="stars(2,item)"></text>
</view>
</view>
</view>
</view>
<view class="h-120"></view>
<view class='fixed-lb w-full pb-safe'>
<view class="mx-20 h-120 flex-center">
<view class="w-full h-80 rd-40rpx flex-center colorhei fs-28 bg-color-huang"
@tap="formSubmit">提交</view>
</view>
</view>
</view>
</template>
<script>
import {orderProduct,orderComment} from '@/api/order.js';
import {toLogin} from '@/libs/login.js';
import {mapGetters} from "vuex";
import colors from "@/mixins/color";
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
components: {},
mixins: [colors],
data() {
return {
imgHost: HTTP_REQUEST_URL,
pics: [],
replyNav:[
{
title:'好评',
pic: HTTP_REQUEST_URL + '/statics/images/product/product_reply_icon1_0.png',
activePic:HTTP_REQUEST_URL + '/statics/images/product/product_reply_icon1.png',
value:3,
},
{
title:'中评',
pic: HTTP_REQUEST_URL + '/statics/images/product/product_reply_icon2_0.png',
activePic: HTTP_REQUEST_URL + '/statics/images/product/product_reply_icon2.png',
value:2,
},
{
title:'差评',
pic: HTTP_REQUEST_URL + '/statics/images/product/product_reply_icon3_0.png',
activePic: HTTP_REQUEST_URL + '/statics/images/product/product_reply_icon3.png',
value:1,
}
],
orderId: '',
unique: '',
productInfo: {},
cart_num: 0,
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
canvasWidth: "",
canvasHeight: "",
canvasStatus: false,
product_score:-1,
service_score:-1,
delivery_score: -1,
reply_score:3,
comment:"",
starArr:[1,2,3,4,5]
};
},
watch: {
isLogin: {
handler: function(newV, oldV) {
if (newV) {
// #ifndef MP
this.getOrderProduct();
// #endif
}
},
deep: true
}
},
computed:{
...mapGetters(['isLogin']),
isSelectStar(){
if(this.product_score >= 0 && this.service_score >= 0 && this.delivery_score >= 0 && this.comment ){
return true
}
}
},
onLoad(options) {
if (!options.unique || !options.uni) return this.$util.Tips({
title: '缺少参数'
}, {
tab: 3,
url: 1
});
this.unique = options.unique;
this.orderId = options.uni;
if (this.isLogin) {
this.getOrderProduct();
}
},
onShow() {
uni.removeStorageSync('form_type_cart');
},
methods: {
goarrow(){
uni.navigateBack()
},
/**
* 获取某个产品详情
*
*/
getOrderProduct: function() {
let that = this;
orderProduct(that.unique).then(res => {
that.$set(that, 'productInfo', res.data.productInfo);
that.cart_num = res.data.cart_num;
});
},
stars: function(type, star) {
if(type == 0){
this.product_score = star;
}else if(type == 1){
this.service_score = star;
}else {
this.delivery_score = star;
}
},
replyNavChange(value){
this.reply_score = value;
},
/**
* 删除图片
*
*/
DelPic: function(index) {
let that = this,
pic = this.pics[index];
that.pics.splice(index, 1);
that.$set(that, 'pics', that.pics);
},
/**
* 上传文件
*
*/
uploadpic: function() {
let that = this;
this.canvasStatus = true
that.$util.uploadImageChange({count:8,url:'upload/image'}, function(res) {
that.pics.push(res.data.url);
}, (res) => {
this.canvasStatus = false
}, (res) => {
this.canvasWidth = res.w
this.canvasHeight = res.h
});
},
/**
* 立即评价
*/
formSubmit: function() {
let that = this;
if (!this.comment) return that.$util.Tips({
title: '请填写你对宝贝的心得!'
});
if(!this.isSelectStar) return that.$util.Tips({
title: '请完成打分!'
});
let data = {
reply_score: this.reply_score,
product_score: this.product_score,
service_score: this.service_score,
delivery_score: this.delivery_score,
pics: this.pics,
unique: this.unique,
comment: this.comment
};
uni.showLoading({
title: "正在发布评论……"
});
orderComment(data).then(res => {
uni.hideLoading();
let jumpPath = res.data.to_lottery ?
'/pages/goods/goods_comment_con/lottery_comment?type=4&order_id=' + that
.orderId : '/pages/goods/order_details/index?order_id=' + that.orderId
let obj = {
tab: 3,
url: 1
};
let pages = getCurrentPages();
if (pages[pages.length - 3]) {
if (pages[pages.length - 3].route == 'pages/goods/order_pay_status/index') {
obj.tab = 5;
obj.url = '/pages/goods/order_list/index';
}
}
if (res.data.to_lottery) {
obj.tab = 5;
obj.url = '/pages/goods/goods_comment_con/lottery_comment?type=4&order_id=' + that.orderId
}
that.$util.Tips({
title: '感谢您的评价!',
icon: 'success'
}, obj);
}).catch(err => {
uni.hideLoading();
return that.$util.Tips({
title: err
});
});
}
}
}
</script>
<style lang="scss" scoped>
.SemiBold {
font-family: SemiBold;
}
.good-pic{
width: 54rpx;
height: 59rpx;
}
.nav-item ~ .nav-item{
margin-left: 38rpx;
}
.bb-e{
border-bottom: 1px solid #eee;
}
.placeholder{
color: #7B7A7F;
font-size: 26rpx;
line-height: 40rpx;
}
.upload{
border: 1px dashed #ccc;
}
.del-pic{
background-color: #999;
border-radius: 0 16rpx 0 16rpx;
}
.star ~ .star{
margin-left: 24rpx;
}
.bg-hui{
background-color: #ccc;
}
</style>