<template>
|
<view class="page">
|
<view v-for="(item, index) in orderDetail.skuList" :key="index">
|
<view class="goods-box-single">
|
<image class="goods-img" :src="item.img + style(200)" mode="aspectFill" />
|
<view class="right">
|
<text class="title clamp">
|
{{ item.spuTitle }}
|
</text>
|
<text class="attr-box">
|
{{ item.title }} x {{ item.num }}
|
</text>
|
<text class="price">
|
{{ item.price / 100.0 }}
|
</text>
|
</view>
|
</view>
|
<view class="appraise-title appraise-star-view">
|
<text>宝贝评分</text>
|
<view class="appraise-star-view">
|
<text
|
v-for="(value,key) in stars"
|
:key="key"
|
class="yticon icon-shoucang_xuanzhongzhuangtai appraise-star"
|
:class="key < orderDetail.skuList[index].score ? 'active' : ''"
|
@tap="chooseStar(value,index)"
|
/>
|
</view>
|
</view>
|
<view class="appraise-body">
|
<textarea v-model="item.content" placeholder="请输入评价(可空)..." class="appraise-textare" />
|
</view>
|
<view class="appraise-body appraise-uploader">
|
<view class="uni-uploader">
|
<view class="uni-uploader-head">
|
<view class="uni-uploader-title" style="color: #6f6f74;">
|
晒一晒
|
</view>
|
<view class="uni-uploader-info">
|
{{ item.imgs.length }}/8
|
</view>
|
</view>
|
<view class="uni-uploader-body">
|
<view class="uni-uploader__files">
|
<block v-for="(image,imgIndex) in item.imgs" :key="imgIndex">
|
<view class="uni-uploader__file" style="position: relative;">
|
<image class="uni-uploader__img" :src="image + style(200)" @tap="previewImage" />
|
<view class="close-view" @click="close(item, index, imgIndex)">
|
x
|
</view>
|
</view>
|
</block>
|
<view v-show="imageList.length < 8" class="uni-uploader__input-box">
|
<view class="uni-uploader__input" @tap="chooseImg(item,index)" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<button type="primary" class="appraise-submit" @tap="send">
|
提交
|
</button>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
style: this.$api.style,
|
stars: [1, 2, 3, 4, 5],
|
imageList: [],
|
sendDate: {
|
score: 0,
|
content: '',
|
contact: ''
|
},
|
orderDetail: {
|
skuList: []
|
},
|
appraiseRequest: {
|
appraiseDTOList: []
|
}
|
}
|
},
|
onLoad(option) {
|
const that = this
|
uni.showLoading({
|
title: '正在加载'
|
})
|
that.$api.request('order', 'getOrderDetail', {
|
orderId: option.orderid
|
}, failres => {
|
uni.hideLoading()
|
that.$api.msg(failres.errmsg)
|
}).then(res => {
|
uni.hideLoading()
|
that.orderDetail = res.data
|
that.orderDetail.skuList.forEach(item => {
|
item.score = 0
|
item.content = ''
|
item.imgs = []
|
})
|
})
|
},
|
methods: {
|
close(item, index, imgIndex) {
|
item.imgs.splice(imgIndex, 1)
|
this.orderDetail.skuList.splice(index, item)
|
},
|
|
chooseImg(item, index) { // 选择图片
|
const that = this
|
that.$api.uploadImg(res => {
|
item.imgs.push(res)
|
that.orderDetail.skuList.splice(index, that.orderDetail.skuList[index])
|
})
|
},
|
chooseStar(e, index) { // 点击评星
|
const that = this
|
that.orderDetail.skuList[index].score = e
|
that.orderDetail.skuList.splice(index, that.orderDetail.skuList[index])
|
},
|
previewImage() { // 预览图片
|
uni.previewImage({
|
urls: this.imageList
|
})
|
},
|
send() { // 发送反馈
|
const that = this
|
const requestItems = []
|
that.orderDetail.skuList.forEach(item => {
|
if (item.score <= 0) {
|
that.$api.msg('请为所有宝贝点上星星')
|
return
|
}
|
|
requestItems.push({
|
skuId: item.skuId,
|
spuId: item.spuId,
|
score: item.score,
|
content: item.content,
|
imgUrl: item.imgs.length > 0 ? item.imgs.join(',') : ''
|
})
|
})
|
|
that.appraiseRequest.orderId = that.orderDetail.id
|
that.appraiseRequest.appraiseDTOList = requestItems
|
|
that.$api.request('appraise', 'create', {
|
appraiseRequestDTO: JSON.stringify(that.appraiseRequest)
|
}).then(res => {
|
that.$api.msg('评价成功！')
|
that.$api.prePage().loadData('refresh')
|
uni.navigateBack()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #FFFFFF;
|
}
|
view{
|
font-size: 28upx;
|
}
|
.input-view {
|
font-size: 28upx;
|
}
|
.close-view{
|
text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
|
}
|
/* 上传 */
|
.uni-uploader {
|
flex: 1;
|
flex-direction: column;
|
}
|
.uni-uploader-head {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
.uni-uploader-info {
|
color: #B2B2B2;
|
}
|
.uni-uploader-body {
|
margin-top: 16upx;
|
}
|
.uni-uploader__files {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
.uni-uploader__file {
|
margin: 10upx;
|
width: 210upx;
|
height: 210upx;
|
}
|
.uni-uploader__img {
|
display: block;
|
width: 210upx;
|
height: 210upx;
|
}
|
.uni-uploader__input-box {
|
position: relative;
|
margin:10upx;
|
width: 208upx;
|
height: 208upx;
|
border: 2upx solid #D9D9D9;
|
}
|
.uni-uploader__input-box:before,
|
.uni-uploader__input-box:after {
|
content: " ";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
background-color: #D9D9D9;
|
}
|
.uni-uploader__input-box:before {
|
width: 4upx;
|
height: 79upx;
|
}
|
.uni-uploader__input-box:after {
|
width: 79upx;
|
height: 4upx;
|
}
|
.uni-uploader__input-box:active {
|
border-color: #999999;
|
}
|
.uni-uploader__input-box:active:before,
|
.uni-uploader__input-box:active:after {
|
background-color: #999999;
|
}
|
.uni-uploader__input {
|
position: absolute;
|
z-index: 1;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
opacity: 0;
|
}
|
|
/*问题反馈*/
|
.appraise-title {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20upx;
|
color: #6f6f74;
|
background-color: #FFFFFF;
|
font-size: 28upx;
|
}
|
.appraise-star-view.appraise-title {
|
justify-content: flex-start;
|
margin: 0;
|
}
|
.appraise-quick {
|
position: relative;
|
padding-right: 40upx;
|
}
|
.appraise-quick:after {
|
font-family: uniicons;
|
font-size: 40upx;
|
content: '\e581';
|
position: absolute;
|
right: 0;
|
top: 50%;
|
color: #bbb;
|
-webkit-transform: translateY(-50%);
|
transform: translateY(-50%);
|
}
|
.appraise-body {
|
background: #fff;
|
}
|
.appraise-textare {
|
height: 200upx;
|
font-size: 28upx;
|
line-height: 34upx;
|
width: 100%;
|
box-sizing: border-box;
|
padding: 20upx 30upx 0;
|
}
|
.appraise-input {
|
font-size: 34upx;
|
height: 50upx;
|
min-height: 50upx;
|
padding: 15upx 20upx;
|
line-height: 50upx;
|
}
|
.appraise-uploader {
|
padding: 22upx 20upx;
|
}
|
.appraise-star {
|
font-family: uniicons;
|
font-size: 40upx;
|
margin-left: 6upx;
|
}
|
.appraise-star-view {
|
margin-left: 20upx;
|
}
|
.appraise-star:after {
|
content: '\e408';
|
}
|
.appraise-star.active {
|
color: #FFB400;
|
}
|
.appraise-star.active:after {
|
content: '\e438';
|
}
|
.appraise-submit {
|
background: #007AFF;
|
color: #FFFFFF;
|
margin: 20upx;
|
}
|
/* 单条商品 */
|
.goods-box-single {
|
display: flex;
|
padding: 20upx;
|
|
.goods-img {
|
display: block;
|
width: 120upx;
|
height: 120upx;
|
}
|
|
.right {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
padding: 0 30upx 0 24upx;
|
overflow: hidden;
|
|
.title {
|
font-size: $font-base + 2upx;
|
color: $font-color-dark;
|
line-height: 1;
|
}
|
|
.attr-box {
|
font-size: $font-sm + 2upx;
|
color: $font-color-light;
|
padding: 10upx 12upx;
|
}
|
|
.price {
|
font-size: $font-base + 2upx;
|
color: $font-color-dark;
|
|
&:before {
|
content: '￥';
|
font-size: $font-sm;
|
margin: 0 2upx 0 8upx;
|
}
|
}
|
}
|
}
|
</style>
|
