theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

comment 8.1

Browse Source
This commit is contained in:
ghusermoon
2020-08-01 16:36:48 +08:00
parent 865e2a741a
commit 854976c8f0
18 changed files with 356 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
pageE/order/Comment.vue
View File

@@ -2,33 +2,7 @@
<view class="comment">
<view class="main-container">
<view class="goods-comment" v-for="(goods, index) in goodsList" :key="index">
<view class="goods-info">
<image :src="goods.goods_image"></image>
<view class="goods-text">
<view class="goods-name u-line-1">{{ goods.goods_name }}</view>
<!-- <view class="goods-spec u-line-1">{{ }}</view> -->
</view>
</view>
<view class="rate">
<view class="title">描述相符</view>
<u-rate :count="5" v-model="describe[index]" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
</view>
<u-input v-model="content[index]" type="textarea" height="100" :auto-height="true" placeholder="发表你的评价吧，收货时心情如何？" />
<u-upload
:ref="'upload' + index"
:custom-btn="true"
:max-count="count"
:auto-upload="false"
@on-uploaded="uploadImage"
:action="action"
:header="header"
:form-data="formData"
:name="fileName"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="../static/mine/27.png"></image>
</view>
</u-upload>
<CommentView :goods="goods" :index="index" @setLocalImage="setLocalImage" @setContent="setContent" @setDescribe="setDescribe"></CommentView>
</view>
</view>
<view class="order-rate">
@@ -45,45 +19,60 @@
</view>
</template>
<script>
import CommentView from './commentItem';
import common from '@/static/js/common.js'
export default {
data() {
return {
orderId: '',
count: 4, // 最大图片数量
count: 3, // 最大图片数量
logistics: 0, // 物流服务
service: 0, // 服务态度
action: this.$u.http.config.baseUrl + '/Upload/uploadfile', // 下面是上传图片的参数
header: {
"authorization": 'Bearer' + " " + uni.getStorageSync('token')
},
fileName: 'common',　// 与formData name 一样
formData: {
name: 'common', // 其他图片
},
describe: [],
content: [],
imageList: [],
imageList: [], // 本地图片路径
goodsList: [],
imageIndex: 0, // 图片上传标识
uploadImageList: [], // 线上图片名字
}
},
beforeMount() {
// this.init();
// this.getOrderInfo();
components: {
CommentView
},
onLoad(option) {
this.orderId = option.oid;
this.getOrderInfo(option.oid);
},
methods: {
uploadImage(lists) {
let imageList = [];
lists.forEach(res => {
if(res.response.errCode == 0) imageList.push(res.response.data.file_name);
})
this.imageList[this.imageIndex] = imageList;
if(this.imageIndex == this.goodsList.length - 1) this.addOrderEvaluate();
setLocalImage({ list, index }) {
this.imageList[index] = list;
},
setContent({ content, index }) {
this.content[index] = content;
},
setDescribe({ describe, index }) {
this.describe[index] = describe;
},
uploadImage() {
let allPromise = [];
this.imageList.forEach((img, index) => {
this.uploadImageList[index] = [];
img.forEach(filePath => {
let promise = common.uploadFile({
url: this.$u.http.config.baseUrl + '/Upload/uploadfile',
name: 'common',
filePath: filePath,
})
promise.then(result => {
this.uploadImageList[index].push(result.file_name);
})
allPromise.push(promise);
})
})
Promise.all(allPromise).then(() => {
this.addOrderEvaluate();
})
},
// 设初始值
setModelKey(data) {
data.forEach(() => {
this.content.push('');
@@ -96,8 +85,39 @@ export default {
order_id: id,
}).then(res => {
if(res.errCode == 0) {
// this.goodsList = res.data.extend_order_goods;
this.goodsList = [1,2];
this.goodsList = res.data.extend_order_goods;
// this.goodsList = [{
// "rec_id": 14,
// "order_id": 13,
// "goods_id": 39,
// "goods_name": "自然堂 水润保湿两件套 补水保湿套装",
// "goods_price": "69.40",
// "goods_num": 1,
// "goods_image": "1_2017092202443553519.jpg",
// "goods_pay_price": "43.40",
// "store_id": 1,
// "buyer_id": 3,
// "goods_type": "1",
// "promotions_id": 0,
// "commis_rate": 0,
// "gc_id": 30
// },
// {
// "rec_id": 13,
// "order_id": 13,
// "goods_id": 113,
// "goods_name": "舒思盾经络按摩仪数码家用多功能针灸穴位电子理疗腰椎颈椎电疗仪",
// "goods_price": "168.00",
// "goods_num": 1,
// "goods_image": "1_2017092901414663050.jpg",
// "goods_pay_price": "106.00",
// "store_id": 1,
// "buyer_id": 3,
// "goods_type": "1",
// "promotions_id": 0,
// "commis_rate": 0,
// "gc_id": 72
// }];
this.setModelKey(this.goodsList);
}
})
@@ -112,25 +132,19 @@ export default {
return true;
},
submitComment() {
this.goodsList.forEach((_, index) => {
this.imageIndex = index;
const upload = 'upload' + index;
this.$refs[upload][0].upload();
// console.log(this.content);
// console.log(this.describe);
// console.log(this.imageList);
this.uploadImage();
// this.goodsList.forEach((_, index) => {
})
// let i = 0;
// while(JSON.stringify(this.imageList[this.imageIndex]) != '[]' && i <= this.goodsList.length) {
// this.imageIndex = i;
// const upload = 'upload' + index;
// this.$refs[upload][0].upload();
// i++;
// }
// })
},
addOrderEvaluate() {
if(!this.verifyParams()) return false;
let files = [];
console.log(this.imageList);
this.imageList.forEach((item, index) => {
// console.log(this.uploadImageList);
this.uploadImageList.forEach((item, index) => {
files[index] = '';
// console.log(item);
item.forEach((img, idx) => {
@@ -149,10 +163,10 @@ export default {
scores_three: this.describe,
file: files,
};
// console.log(params);
// this.$u.api.updateOrderEvaluate(params).then(res => {
// this.$u.toast(res.message);
// })
console.log(params);
this.$u.api.updateOrderEvaluate(params).then(res => {
this.$u.toast(res.message);
})
},
},
};

2
pageE/order/Details.vue
View File

@@ -68,7 +68,7 @@
</view>
</view>
<view class="btn" v-if="['1', '2', '4', '6'].indexOf(state) >= 0">
<view class="cancel" v-if="state == '4' || state == '1' " @click="applyRefund">申请退款</view>
<view class="cancel" v-if="state == '4' || state == '1'" @click="applyRefund">申请退款</view>
<view class="cancel" v-if="state == '1'" @click="toOtherPage('Logistics')">查看物流</view>
<view class="logistics" v-if="state == '1'" @click="confirmReceive">确认收货</view>
<view class="comment" v-if="state == '2'" @click="toOtherPage('Comment')">立即评价</view>

138
pageE/order/commentItem.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<view class="comment-item-view">
<view class="view-container">
<view class="goods-info">
<image :src="goods.goods_image"></image>
<view class="goods-text">
<view class="goods-name u-line-1">{{ goods.goods_name }}</view>
<!-- <view class="goods-spec u-line-1">{{ }}</view> -->
</view>
</view>
<view class="rate">
<view class="title">描述相符</view>
<u-rate :count="5" v-model="describe" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
</view>
<u-input v-model="content" type="textarea" height="100" :auto-height="true" placeholder="发表你的评价吧，收货时心情如何？" />
<u-upload
:ref="'upload' + index"
:custom-btn="true"
:max-count="count"
:auto-upload="false"
:action="action"
:header="header"
:form-data="formData"
:name="fileName"
@on-list-change="setImageList"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="../static/mine/27.png"></image>
</view>
</u-upload>
</view>
</view>
</template>
<script>
export default {
data() {
return {
count: 3,
action: this.$u.http.config.baseUrl + '/Upload/uploadfile',
header: {
"authorization": 'Bearer' + " " + uni.getStorageSync('token')
},
fileName: 'common',　// 与formData name 一样
formData: {
name: 'common', // 其他图片
},
content: '',
describe: '',
imageList: [],
}
},
props: {
goods: Object,
index: Number
},
watch: {
content(value) {
this.$emit('setContent', { content: value, index: this.index });
},
describe(value) {
this.$emit('setDescribe', { describe: value, index: this.index });
},
},
methods: {
setImageList(lists) {
// console.log(lists);
this.imageList = [];
lists.forEach(item => {
this.imageList.push(item.url);
})
console.log(this.imageList);
this.$emit('setLocalImage', { list: this.imageList, index: this.index });
}
}
};
</script>
<style lang="scss" scoped>
.comment-item-view {
.view-container {
.goods-info {
display: flex;
margin-bottom: 40rpx;
> image {
width: 113rpx;
height: 106rpx;
border-radius: 5rpx;
margin-right: 20rpx;
background-color: antiquewhite;
}
.goods-text {
.goods-name {
width: 530rpx;
font-size: 28rpx;
color: rgba(0,0,51,1);
margin-bottom: 20rpx;
}
.goods-spec {
max-width: 300rpx;
box-sizing: content-box;
padding: 10rpx 15rpx;
font-size: 24rpx;
color: rgba(153,153,153,1);
background:rgba(236,236,236,1);
border-radius: 6rpx;
display: inline-block;
}
}
}
textarea {
width: 100% !important;
margin-bottom: 60rpx;
}
.slot-btn {
width: 140rpx;
height: 140rpx;
background: rgba(236,236,236,1);
border-radius: 10rpx;
text-align: center;
> image {
margin-top: 48rpx;
width: 54rpx;
height: 49rpx;
}
}
.rate {
display: flex;
&:not(:last-child) {
margin-bottom: 35rpx;
}
.title {
margin-right: 25rpx;
font-size: 28rpx;
color: rgba(51,51,51,1);
}
}
}
}
</style>