flavorOfTimeSz/subPackages/user/comment.vue

<template>
	<view class="bg">
		<!-- 顶部商品图片、名称 -->
		<view class="top">
			<image :src="showImg(info.product_img)" mode=""></image>
			<view class="goods-title text-overflowRows">
				{{info.product_title}}
			</view>
		</view>
		<view class="line"></view>
		<view class="rate-box">
			综合评分
			<img :src="'https://static.ticket.sz-trip.com/dongtai/images/user/' + (starIndex > index ? 'star-seld.png' : 'star.png')"
			 v-for="(item,index) in 5" :key="index" @click="changeStar(item)" class="starImg"/>
		</view>
		<view class="comment-text">
			<textarea placeholder-style="color:#999;font-size:28rpx;font-weigth:500;" placeholder="请填写您的评价~" style="width: 657rpx;background: #F7F7F7;border-radius: 6px;padding: 28.67rpx 20rpx;" v-model="content"/>
		</view>
		<view class="comment-pic">
			<view class="" style="margin-top: 40.67rpx;margin-bottom: 36.67rpx;">上传图片({{list.length}}/6)</view>
			<uni-file-picker limit="6" file-mediatype="image" return-type="list"  ref="files" :auto-upload="false" @select="select" @progress="progress" @success="success" @fail="fail" @delete="del">
				<view class="" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<!-- <image style="width: 40rpx;height: 40rpx;position: absolute;right: 0;top: 0;" src="https://static.ticket.sz-trip.com/tongli/images/order/cha.png" mode=""></image> -->
					<view class="" style="margin-top: 16rpx;font-size: 24rpx;font-weight: 500;color: #999;">
						上传图片
					</view>
				</view>
			</uni-file-picker>
		</view>
		<view class="submit-btn" @click="submit">提交</view>
		
	</view>
</template>

<script>
	import {pathToBase64} from  "@/static/js/mmmm-image-tools/index.js"
	
	export default {
		data() {
			return {
				proList: [
				    {name: '', img: [], imgList: [], content: ''}
				],
				content:'',
				info: {},
				order_id: '',
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: false,
					// 是否显示分隔线
					dividline: false,
				},
				fileLists: [],
				list:[],
				starIndex: 5
			}
		},
		onLoad(options) {

		},
		onShow(){
			this.getProductInfo()
		},
		methods: {
			getProductInfo () {
				this.info =  uni.getStorageSync("commentProd");
				if (!this.info||!this.info.order_id) {
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			},
			// 更改评分
			changeStar(item) {
				this.starIndex = item + 1
			},
			del(e) {
				console.log('e',e.tempFile);
				let index = this.list.findIndex(f => f === e.tempFile)
				this.list.splice(index, 1)
				let i = this.fileLists.findIndex(f => f.url === e.tempFile)
				this.fileLists.splice(i, 1)
				this.$forceUpdate()
				console.log('删除后的list',this.list);
				console.log('删除后的fileLists',this.fileLists);
			},
			// 上传照片
			async onunload(url){
				console.log('url',url);
				let base64 = await pathToBase64(url)
				let res = await this.Post({
							method: 'POST',
							img_base64: base64
						}, '/api/pbservice/Other/base64Upload')
				return res.data.url
			},
					

			// 获取上传状态
			async select(e){
			    console.log('选择文件：',e)
				let lists = [].concat(e.tempFiles)
				console.log('lists',lists);
				let fileListLen = this.fileLists
				lists.map((item) => {
					fileListLen.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (var i = 0; i < lists.length; i++) {
					const result = await this.onunload(e.tempFiles[i].url)
					console.log('result',result)
					this.list.push(result)
				}
				console.log('fileLists',this.fileLists);
				console.log('list',this.list);
			},

			submit() {
				console.log('content',this.content);
				if (this.content == '') {
					uni.showToast({
						title: '请文字评论后再提交~',
						icon: 'none'
					});
					return;
				}
				if (this.fileLists.length != this.list.length) {
					uni.showToast({
						title: '图片上传中，请稍后再提交',
						icon: 'none'
					});
					return
				} 
				console.log('-----------',this.list);
				this.Post({
					product_id: this.info.product_id,
					order_id: this.info.order_id,
					content: this.content,
					rate: this.starIndex,
					img_list: this.list.join(","), // 空数组会转为空字符串
					sku_id: this.info.sku_id,
				},'/api/product/product_comment').then(res => {
					if (res.code == 1 || res.code == 200) {
						uni.navigateBack()
						uni.removeStorageSync(commentProd)
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.bg {
	padding: 0 26.67rpx;
	background: #fff;
	min-height: 100vh;
	padding-top: 19.33rpx;
}
.top {
	display: flex;
}
.top image {
	width: 142rpx;
	height: 142rpx;
	flex-shrink: 0;
	margin: .67rpx 20rpx .67rpx 12rpx;
	border-radius: 7rpx;
}
.goods-title {
	height: 80rpx;
	font-size: 31rpx;
	font-weight: 500;
	color: #333;
}
.line {
	height: 1rpx;
	background: #d8d8d8;
	margin: 20rpx 0;
}
 
.rate-box {
	display: flex;
	height: 106rpx;
	align-items: center;
	 
	.starImg {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
}
 
.example-body {
	padding: 10px;
	padding-top: 0;
}

.custom-image-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
	color: #333;
}

.submit-btn {
	width: 697rpx;
	height: 80rpx;
	background: #6A8A2D;
	border-radius: 11rpx;
	font-size: 36rpx;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	line-height: 80rpx;
	position: fixed;
	bottom: 53.33rpx;
}

::v-deep .uni-file-picker {
	padding-bottom: 165rpx !important;
}


::v-deep .file-picker__progress-item {
	display: none !important;
}


</style>