pz/pages/order/evaluate.vue

<template>
	<view class="content">
		<view class="equity_box">
			<view class="text-box uni-textarea"><textarea placeholder-style="color:#999" :placeholder="placeholder" v-model="text"></textarea></view>
			<view class="">
				<view class="add-img-box flex_item">
					<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
						<image class="add-img" @click.stop="imgInfo(index)" :src="item" mode="aspectFill"></image>
						<image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
					</view>
					<view v-if="imgList.length < 9" class="add-img-item" @click.stop="scImg()"><image class="add-img" src="/static/img/add.png"></image></view>
				</view>
			</view>
		</view>
		<view @click.stop="submit" class="submit-btn" v-if="type == 0">提交</view>
	</view>
</template>

<script>
import { after_sales, upload, orderDetail } from '@/api/order.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	components: {
		uniRate
	},
	data() {
		return {
			type: 1, //1查看0申请
			text: '', //评论内容
			placeholder: '请详细描述您的售后理由...',
			imgList: [],
			unique: '', //商品唯一标识码
			imgCount: 3 //最多支持9张上传，可以修改
		};
	},
	onLoad(option) {
		this.unique = option.unique;
	},
	onShow() {
		this.loadData();
	},
	methods: {
		loadData() {
			orderDetail({}, this.unique).then(({ data }) => {
				this.type = data.after_sales;
				if (this.type == 1) {
					this.placeholder = data.after_remarks;
					this.imgList = data.after_images;
				}
			});
		},
		//单张上传图片
		scImg() {
			let obj = this;
			console.log(obj.imgCount, 11);
			if (obj.imgCount == 0) {
				uni.showToast({
					title: '最多添加6张图片',
					icon: 'none'
				});
				return;
			}
			upload({
				file: ''
			})
				.then(e => {
					obj.imgList.push(e[0].url);
					obj.imgCount = 3 - obj.imgList.length;
				})
				.catch(e => {});
		},
		//提交评论
		submit(e) {
			let obj = this;
			if (obj.imgList.length < 1) {
				uni.showToast({
					title: '请添加图片',
					icon: 'none'
				});
				return;
			}
			after_sales(
				{
					after_images: obj.imgList,
					after_remarks: obj.text
				},
				obj.unique
			)
				.then(e => {
					uni.showModal({
						title: '提示',
						content: '申请售后成功，是否前往个人中心页',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/user/my'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
				.catch(e => {});
		},
		//点击图片显示大图
		imgInfo(i) {
			let tempList = [];
			console.log(111);
			this.imgList.forEach(e => {
				tempList.push(e);
			});
			console.log(tempList);
			//显示图片
			uni.previewImage({
				current: i,
				loop: false,
				urls: tempList,
				indicator: 'default'
			});
		},
		//删除图片
		delImg(i) {
			uni.showModal({
				content: '确定删除这张吗',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(i, 1);
						this.imgCount++;
					} else if (res.cancel) {
					}
				}
			});
		},
		// 页面跳转
		navto(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f6f6;
	height: 100%;
	.content {
		background: #f8f6f6;
		height: 100%;
	}
}
.equity_box {
	border-radius: 10rpx;
	padding: 25rpx 25rpx;
	margin: 25rpx 0rpx;
	background: #ffffff;
	.text-box {
		height: 200rpx;
		textarea {
			font-size: 25rpx;
			width: 100%;
			height: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
		}
	}
}
.submit-btn {
	margin: 102rpx auto 0;
	width: 560rpx;
	height: 85rpx;
	background: #24a17d;
	border-radius: 43px;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFangSC;
	font-weight: 500;
	color: #ffffff;
	line-height: 85rpx;
}
.add-img-box {
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 50rpx;
}
.add-img-item {
	width: 180rpx;
	height: 180rpx;
	border-radius: 24rpx;
	position: relative;
	margin: 0rpx 20rpx;
	margin-bottom: 25rpx;
	.add-img {
		width: 100%;
		height: 100%;
	}
}
.add-img-camera {
	flex: 1;
}
.add-img-del {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	left: 155rpx;
	bottom: 155rpx;
	//background-color: rgba(238, 0, 0, 1);
	border-radius: 20rpx;
}
.address-time {
	width: 484rpx;
	height: 88rpx;
	background-color: rgba(245, 245, 245, 1);
	opacity: 1;
	border-radius: 24rpx;
	text-align: center;

	font-size: 35rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.line {
	width: 750rpx;
	height: 1px;
	transform: scaleY(0.3);
	background-color: rgba(0, 0, 0, 0.5);
}
</style>