<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="订单评价" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view>
|
<view class='img-list'>
|
<view v-for="item in info.items" :key="item.id">
|
<view class="coreshop-bg-white coreshop-card-box coreshop-margin-10">
|
<view class="coreshop-card-view coreshop-order-view">
|
<view class="coreshop-font-md coreshop-text-bold coreshop-text-black">商品信息</view>
|
<u-line color="#eee" border-style="dashed" margin="10px 0" />
|
<view class="orderList coreshop-padding-0">
|
<view class="item" @click="goGoodsDetail(item.goodsId)">
|
<view class="left">
|
<u--image :showLoading="true" :src="item.imageUrl" width="80px" height="80px" mode="aspectFill"></u--image>
|
</view>
|
<view class="content">
|
<view class="title u-line-4">{{item.name}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="coreshop-card-view coreshop-order-view">
|
<view class="coreshop-font-md coreshop-text-bold coreshop-text-black">商品评分</view>
|
<u-line color="#eee" border-style="dashed" margin="10px 0" />
|
<view>
|
<u-rate v-model="score[item.id]" @change="changeScore"></u-rate>
|
</view>
|
</view>
|
<view class="coreshop-card-view coreshop-order-view">
|
<view class="coreshop-font-md coreshop-text-bold coreshop-text-black">评价内容</view>
|
<u-line color="#eee" border-style="dashed" margin="10px 0" />
|
<view class="evaluate-c-t">
|
<textarea v-model="textarea[item.id]" placeholder="宝贝满足你的期待吗? 说说你的使用心得" />
|
</view>
|
</view>
|
<view class="coreshop-card-view coreshop-order-view">
|
<view class="coreshop-font-md coreshop-text-bold coreshop-text-black">上传图片（可上传{{maxUploadImg}}张）</view>
|
<u-line color="#eee" border-style="dashed" margin="10px 0" />
|
<view class="evaluate-c-b">
|
<view class="goods-img-item" v-if="images[item.id].length" v-for="(img, key) in images[item.id]" :key="key">
|
<image class="del" src="/static/images/common/del.png" mode="" @click="removeImg(item.id, key)"></image>
|
<image class="" :src="img" mode="" @click="clickImg(img)"></image>
|
</view>
|
<view class="upload-img" v-show="isupload[item.id]">
|
<image class="icon" src="/static/images/common/camera.png" mode="" @click="uploadImg(item.id)"></image>
|
<view class="">上传照片</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="coreshop-foot-hight-view" />
|
<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
|
<u-button type="error" size="normal" @click="toEvaluate" :disabled='submitStatus' :loading='submitStatus'>提交评论</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
return {
|
orderId: 0,
|
info: {}, // 订单详情
|
images: [],
|
score: [], // 商品评价
|
textarea: [], // 商品评价信息
|
isupload: [], // 启/禁用 图片上传按钮
|
rate: 5,
|
submitStatus: false
|
}
|
},
|
onLoad(options) {
|
this.orderId = options.orderId
|
if (this.orderId) {
|
this.orderInfo();
|
} else {
|
this.$refs.uToast.show({
|
message: '参数获取失败', type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
});
|
}
|
},
|
computed: {
|
// 获取vuex中状态
|
maxUploadImg() {
|
return this.$store.state.config.imageMax
|
}
|
},
|
methods: {
|
// 获取订单详情
|
orderInfo() {
|
let data = {
|
id: this.orderId
|
}
|
this.$u.api.orderDetail(data).then(res => {
|
if (res.status && res.data.payStatus >= 2 && res.data.shipStatus >= 3 && res.data.confirmStatus >= 2 && res.data.isComment === false) {
|
const _info = res.data
|
let images = []
|
let textarea = []
|
let upload = []
|
let score = []
|
_info.items.forEach(item => {
|
images[item.id] = []
|
textarea[item.id] = ''
|
upload[item.id] = true
|
score[item.id] = 5
|
})
|
this.info = _info
|
this.images = images
|
this.textarea = textarea
|
this.score = score
|
this.isupload = upload
|
} else {
|
this.$u.toast('订单不存在或状态不可评价!')
|
}
|
})
|
},
|
// 上传图片
|
uploadImg(key) {
|
this.$upload.uploadFiles(null, res => {
|
if (res.status) {
|
//this.images[key].push(res.data.src + '?x-oss-process=image/resize,m_lfit,h_200,w_200')
|
this.images[key].push(res.data.src)
|
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
} else {
|
this.$u.toast(res.msg)
|
}
|
})
|
},
|
// 删除图片
|
removeImg(id, key) {
|
this.images[id].splice(key, 1)
|
},
|
// 图片点击放大
|
clickImg(img) {
|
// 预览图片
|
uni.previewImage({
|
urls: img.split()
|
});
|
},
|
// 改变评分
|
changeScore(e) {
|
this.score[e.id] = e.value
|
},
|
// 提交评价
|
toEvaluate() {
|
this.submitStatus = true;
|
let items = [];
|
let _this = this;
|
|
this.images.forEach((item, key) => {
|
let model = {
|
orderItemId: key,
|
images: item,
|
score: _this.score[key],
|
textarea: _this.textarea[key]
|
}
|
items.push(model);
|
})
|
let data = {
|
orderId: _this.orderId,
|
items: items
|
}
|
this.$u.api.orderEvaluate(data).then(res => {
|
if (res.status) {
|
_this.$refs.uToast.show({
|
message: '评价填写成功', type: 'success', complete: function () {
|
// 更改订单列表页的订单状态
|
let pages = getCurrentPages(); // 当前页
|
let beforePage = pages[pages.length - 2]; // 上个页面
|
|
if (beforePage !== undefined && beforePage.route === 'pages/member/order/index/index') {
|
// #ifdef MP-WEIXIN
|
beforePage.$vm.isReload = true
|
// #endif
|
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
_this.$db.set('orderUserEvaluate', true, true);
|
// #endif
|
}
|
|
let before = pages[pages.length - 3]; // 上个页面
|
if (before !== undefined && before.route === 'pages/member/order/index/index') {
|
// #ifdef MP-WEIXIN
|
before.$vm.isReload = true
|
// #endif
|
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
_this.$db.set('orderUserEvaluate', true, true);
|
// #endif
|
}
|
uni.navigateBack({
|
delta: 1,
|
animationType: 'pop-out',
|
animationDuration: 200
|
});
|
}
|
})
|
} else {
|
_this.$u.toast(res.msg)
|
}
|
});
|
}
|
},
|
watch: {
|
images: {
|
handler() {
|
this.images.forEach((item, key) => {
|
this.isupload[key] = item.length >= this.maxUploadImg ? false : true
|
})
|
},
|
deep: true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "evaluate.scss";
|
</style>
|
