comment 8.1

pageE/order/commentItem.vue

@@ -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>