tongli_WeChat/subPackages/order/writeComment.vue

<template>
	<view class="bg">
		<!-- 顶部商品图片、名称 -->
		<view class="top">
			<image :src="showImg(info.specifications_image)" mode=""></image>
			<view class="goods-title text-overflowRows">
				{{info.specifications_name}}
			</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 NEWAPIURL from '@/static/js/request.js';
	// import {pathToBase64,base64ToPath} from  "../../js_sdk/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,
					// 线条样式
					// borderStyle: {
					// 	width: 1,
					// 	color: 'blue',
					// 	style: 'dashed',
					// 	radius: 2
					// }
				},
				fileLists: [],
				list:[],
				starIndex: 5
			}
		},
		onLoad(options) {
			console.log(options);
			if (options.order_id) {
				this.order_id = options.order_id;
			}
		
			this.getDetail()
		},
		methods: {
			// 更改评分
			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);
			},
			// 上传照片
			onunload(url){
				console.log('url',url);
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: NEWAPIURL+'/api/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							'token': this.$store.state.user.userInfo.token || uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).token : ''
						},
						success:res => {
							resolve(JSON.parse(res.data).data.url)
						},
						fail:(err)=>{
							uni.hideLoading()
							uni.showToast({
								title: '上传失败，请重新上传',
								icon: 'none'
							})
						}
					})
				})
			},
			// 获取上传状态
			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: '上传中'
					})
					// console.log('打印',fileListLen);
				})
				// console.log('fileListLen',fileListLen);
				for (var i = 0; i < lists.length; i++) {
					const result = await this.onunload(e.tempFiles[i].url)
					console.log('result',result)
					// let item = fileListLen[fileListLen.length-1]
					// console.log('item',item)
					// this.fileLists.splice(fileListLen.length-1, 1, Object.assign(item, {
					// 	status: 'success',
					// 	message: '',
					// 	url: result
					// }))
					// fileListLen++
					this.list.push(result)
				}
				console.log('fileLists',this.fileLists);
				console.log('list',this.list);
			},
			getDetail() {
				this.Post({
					order_id: this.order_id
				},
				'/api/order/orderDetail'
				).then(res => {
					if (res) {
						let index = res.data.order_child.findIndex(item => item.status == 'WAIT_COMMENT')
						this.info = res.data.order_child[index];
					}
				});
			},
			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
				} else{
					this.list = this.list.map(item => NEWAPIURL + item);
				}
				console.log('-----------',this.list);
				this.Post({
					goods_id: this.info.goods_id,
					child_id: this.info.child_id,
					content: this.content,
					image_list: this.list+'',
					rate: this.starIndex
				},
				'/api/Goods/comment'
				).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: '/subPackages/order/trades'
						})
					}
				});
			},
		}
	}
</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: #C3282E;
	border-radius: 40rpx;
	font-size: 36rpx;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	line-height: 80rpx;
	position: fixed;
	bottom: 53.33rpx;
}

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

/deep/ .icon-del-box {
	// background: #ed4545 !important;
}

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


</style>