comment 8.1

pageE/order/Comment.vue

@@ -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);
+			})
 		},
 	},
 };