shop_app/pages/mine/msg/complaint.vue

<template>
	<view class="whole">
		<view class="tips" :style="{color: Color}">此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</view>
		<view class="oneBox">
			<view class="row">
				<view class="span">补充描述<text>*</text></view>
				<view class="pad20">
					<up-textarea v-model="desc" count placeholder="补充描述" style="font-size: 28rpx;" :height="70" :maxlength="500"></up-textarea>
				</view>
			</view>
			<view class="row">
				<view class="span">联系电话<text>*</text></view>
				<view class="pad20">
					<input class="input" type="text" v-model="mobile" placeholder="请输入您的联系方式" />
				</view>
			</view>
			
			<view class="orderBox row" v-if="type == 1">
				<view class="span">相关订单</view>
				<view class="cont flex" @click="showOrder = true">
					<view v-if="order_sn">
						<view class="tit">{{order_sn}}</view>
						<text>{{goods_name}}</text>
					</view>
					<view class="tit" v-else>请选择订单</view>
					<up-icon name="arrow-right" />
				</view>
			</view>
			
			<view class="row">
				<view class="span">图片凭证（选填）</view>
				<view class="upImg">
					<view class="hasimg" v-for="(item, index) in imgList" :key="index">
						<image :src="item" class="img" mode="aspectFill"></image>
						<view class="icon flexc" @click="delUpImg(item, index)"><up-icon name="close" color="#fff" size="12" /></view>
					</view>
					<view class="plus flexc" @click="uploadImg()">
						<up-icon name="camera-fill" color="#9D9D9D" size="24" />
						<text>上传凭证</text>
					</view>
				</view>
			</view>
			
			<view class="btmbox flexc" @click="commitSubmit()">提交</view>
		</view>
		
		
		<up-popup :show="showOrder" mode="bottom" :round="10" @close="showOrder = false">
			<view class="itemBox">
				<view class="title">我的订单</view>
				<scroll-view scroll-y="true" class="content" @scrolltolower="scorllBottom">
					<view class="item" v-for="item in orderList" :key="item.id" @click="selectOrder(item)">
						<view class="one flex">
							<view class="no">{{item.order_sn}}</view>
							<text>{{statusObj[item.status]}}</text>
						</view>
						<view class="two" v-for="it in item.items" :key="it.id">
							<image :src="it.pic_url + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill"></image>
							<view class="cont">
								<view class="tit">{{it.goods_name}}<view class="sku">{{it.sku_name}}</view></view>
								<view class="btm flex">
									<view class="price">￥{{it.price}}</view>
									<text>×{{it.number}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="noMore" v-if="orderList.length && page >= lastPage && !loading">— 没有更多了 —</view>
					<view v-if="!orderList.length && !loading">
						<up-empty mode="order" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/order.png" text="暂无订单"></up-empty>
					</view>
					<view v-if="loading" class="loadbox">
						<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
					</view>
				</scroll-view>
			</view>
		</up-popup>
		
	</view>
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast } from '@/components/common.js'
	import { Style } from '@/utils/list.js'
	import API from '/api/index'
	
	export default {
		setup() {
			const data = reactive({
				reason: '',
				mobile: '',
				desc: '',
				imgList: [],
				Color: uni.getStorageSync('theme_color'),
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				showPrivacy: false,
				order_id: 0,
				order_sn: 0,
				goods_name: '',
				showOrder: false,
				page: 1,
				lastPage: 0,
				orderList: [],
				loading: false,
				statusObj: {
					'0': '待付款',
					'1': '待发货',
					'2': '处理中',
					'3': '待收货',
					'7': '已完成',
					'6': '退款成功',
					'8': '关闭订单',
					'9': '取消订单'
				},
				type: 0
			})

			function changeDesc(e) {
				data.desc = e.detail
			}
		  
			// 上传图片
			async function uploadImg() {
				if(data.imgList.length === 5) {
					showToast('最多只能添加5张图片喔')
					return false
				}
				data.onDialog = true
				uni.chooseImage({
					success(res) {
						const tempFilePaths = res.tempFilePaths
						uni.showLoading({
							title: '正在上传...',
							mask: true
						})
						uni.uploadFile({
							url: API.url + '/api/v1/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('token') || '',
								accept: 'application/json',
								appid: API.appId
							},
							success(req) {
								const imgUrl = JSON.parse(req.data).data.link
								data.imgList.push(imgUrl)
								uni.hideLoading()
								data.onDialog = false
							},
							fail() {
								uni.hideLoading()
								data.onDialog = false
							}
						})
					},
					fail() {
						data.onDialog = false
					}
				})
			}
		  
			// 删除图片
			function delUpImg(item, index) {
				data.imgList.splice(index, 1)
			}

			// 确认提交
			const commitSubmit = async () => {
				if(!data.mobile) {
					return showToast('请填写联系方式')
				}
				if(!data.desc) {
					return showToast('请输入补充描述')
				}
				if(data.type == 1 && !data.order_id) {
					return showToast('商品问题的投诉需选择相应订单')
				}
				uni.showLoading({
					mask: true,
					title: '正在提交'
				})
				let param = {
					complain_type: data.type,
					order_id: data.order_id,
					complain_reason: data.reason,
					contact_phone: data.mobile,
					added_desc: data.desc,
					images: data.imgList
				}
				if(data.type != 1) {
					param.order_id = ''
				}
				post('/api/v1/feedback', param).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1000,
						mask: true,
						success() {
							setTimeout(() => {
								uni.navigateBack({delta: 1})
							}, 1000)
						}
					})
				}).catch(() => {
					uni.hideLoading()
				})
			}
			
			function getPhone() {
				get('/api/v1/address/default').then(res => {
					if(!Array.isArray(res.data)) {
						data.mobile = res.data.mobile
					}
				})
			}
			
			function getOrderList() {
				data.loading = true
				get('/api/v1/order', {page: data.page, pageSize: 20, status: ''}).then(res => {
					data.orderList = data.orderList.concat(res.data)
					data.lastPage = res.meta.last_page
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			function getOrderInfo() {
				get('/api/v1/order/' + data.order_id).then(res => {
					data.order_sn = res.data.order_sn
					data.goods_name = res.data.items && res.data.items[0].goods_name
				})
			}
			
			function scorllBottom() {
				if (data.page < data.lastPage) {
					data.page++
					getOrderList()
				}
			}
			
			function selectOrder(item) {
				data.order_id = item.id
				data.order_sn = item.order_sn
				data.goods_name = item.items[0].goods_name
				data.showOrder = false
			}

			return {
				...toRefs(data),
				changeDesc,
				commitSubmit,
				uploadImg,
				delUpImg,
				getPhone,
				scorllBottom,
				getOrderList,
				selectOrder,
				getOrderInfo
			}
		},
		async onLoad(options) {
			this.order_id = (options.order_id || 0) * 1
			this.type = (options.type || 0) * 1
			this.desc = options.desc || ''
			// await this.$onLaunched
			this.getPhone()
			if(this.type == 1) {
				this.getOrderList()
				if(this.order_id * 1) {
					this.getOrderInfo()
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
.whole {
	background-color: #F5F5F5;
	position: relative;
	padding-bottom: 140rpx;
	.pad20{
		padding: 20rpx 0;
		box-sizing: border-box;
	}
	.oneBox{
		.row{
			padding: 0 24rpx;
			font-size: 28rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.span{
				line-height: 80rpx;
				font-weight: 600;
				font-size: 30rpx;
				position: relative;
				&::after{
					position: absolute;
					border-bottom: 1px solid #f4f4f4;
					width: calc(100% + 40rpx);
					left: -20rpx;
					bottom: 0;
					content: '';
				}
				text{
					font-size: 24rpx;
					color: #f00;
				}
			}
			.input{
				width: 100%;
				height: 64rpx;
			}
			.upImg{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				padding: 24rpx 0;
				.hasimg{
					width: 130rpx;
					height: 130rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					position: relative;
					.img{
						width: 100%;
						height: 100%;
					}
					.icon{
						position: absolute;
						top: -18rpx;
						right: -18rpx;
						width: 36rpx;
						height: 36rpx;
						background: rgba(0, 0, 0, 0.6);
						border-radius: 50%;
						z-index: 10;
					}
				}
				.plus{
					width: 140rpx;
					height: 140rpx;
					flex-direction: column;
					border: 1px dashed #707070;
					box-sizing: border-box;
					border-radius: 6rpx;
					text{
						font-size: 24rpx;
						color: #9D9D9D;
						text-align: center;
					}
				}
			}
		}
	}
	.tips{
		position: sticky;
		top: 0;
		width: 100%;
		margin-bottom: 24rpx;
		background: v-bind('bgColor');
		font-size: 26rpx;
		padding: 14rpx 0;
		text-align: center;
		z-index: 10;
	}
	.orderBox{
		.cont{
			padding: 18rpx 0;
			.tit{
				padding: 8rpx 0;
			}
			text{
				font-size: 26rpx;
				color: #9D9D9D;
			}
		}
	}
	
	.btmbox{
		width: 94%;
		height: 80rpx;
		color: #fff;
		background: v-bind('Color');
		border-radius: 10rpx;
		font-size: 30rpx;
		position: fixed;
		bottom: 30rpx;
		left: 3%;
	}
	.flexc{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.itemBox{
	.title{
		font-size: 30rpx;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
	}
	.content{
		height: calc(80vh - 80rpx);
		overflow: auto;
		padding: 1rpx 20rpx 20rpx;
		box-sizing: border-box;
		background-color: #f2f2f2;
	}
	.item{
		margin-top: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		background: #fff;
		padding: 0 20rpx;
		border-radius: 10rpx;
		.one{
			line-height: 70rpx;
			border-bottom: 1px solid #e8e8e8;
			text{
				color: #9D9D9D;
			}
		}
		.two{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px solid #f7f7f7;
			.cont{
				width: calc(100% - 180rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.tit{
					.sku{
						font-size: 26rpx;
						color: #888;
					}
				}
				.btm{
					.price{
						font-size: 30rpx;
					}
					text{
						font-size: 24rpx;
						color: #9D9D9D;
					}
				}
			}
			image{
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
	.noMore{
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin: auto;
		padding: 30rpx 0;
		width: 100%;
	}
	.loadbox{
		padding: 30rpx 0;
		text-align: center;
		color: #666;
	}
}
</style>