jiaoyi-uni/pages/order/complaint/complaint.vue

<template>
	<view>
		<view class="ts-header">
			<view class="ts-h-title">投诉门店</view>
			<view class="store-info">
				<view class="store-left">
					<view class="name">{{options.poi_name}}</view>
					<view class="address">{{options.poi_address}}</view>
				</view>
			</view>
		</view>
		<view class="ts-body">
			<view class="ts-form">
				<view class="ts-form-item">
					<view class="form-title">具体问题 <text>*</text></view>
					<view class="form-input">
						{{options.text}}
					</view>
				</view>
				<view class="ts-form-item">
					<view class="form-title">问题订单 <text>*</text></view>
					<view class="form-input">
						{{options.order}}
					</view>
				</view>
				<view class="ts-form-item">
					<view class="form-title">联系方式</view>
					<view class="form-input">
						<input type="number" v-model="options.mobile" class="ts-input" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="ts-form-item">
					<view class="form-title">详细补充 <text>*</text></view>
					<view class="form-input-textarea">
						<textarea class="ts-input" v-model="options.content" placeholder="请详细描述该笔订单中您遇到的问题,描述内容不能为空" rows="10"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-btn">
				<button class="btn" :disabled="disabled" @click="submitTs">提交</button>
			</view>
			<view class="footer-safe"></view>
		</view>
		<uni-popup ref="tspopup" type="center" border-radius="10px 10px 0 0" background-color="#f8f8f8">
			<view class="ts-popup">
				<view class="title">我要投诉门店</view>
				<view class="sub-title">请仔细阅读投诉说明</view>
				<view class="sub-title">受理时间1个工作日</view>
				<view class="tips-body">
					<view class="item-title">【退款/退货纠纷】</view>
					<view class="item-desc">在订单页-申请退款，门店需在24小时处理，否则平台将自动退款，如门店拒绝退款可在此投诉;</view>
					<view class="item-title">【质量/涉假问题】</view>
					<view class="item-desc">为避免恶意投诉，请上传包含单位公章及证书编号检测报告， 请往下滑动查看《检测报告案例》</view>
				</view>
				<view class="pup-close">
					<button class="pop-btn" @click="tipsPop">我已阅读并确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
import form from "@/static/js/form.js"
export default {
	data() {
		return {
			options:null,
			disabled:false
		}
	},
	onLoad(options) {
		app = this;
		app.options = options;
		app.$nextTick(()=>{
			app.$refs.tspopup.open()
		})
	},
	methods: {
		tipsPop(){
			app.$refs.tspopup.close()
		},
		submitTs(){
			var validation = form.validation(app.options,[
				{name:"content",rule:["required"],msg:["请输入描述内容"]}
			]);
			if(validation){
				app.$dialog.showSuccess(validation);
				return false;
			}
			Api.complaint(app.options).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg);
				}
				app.$dialog.showSuccess(res.msg,"none",function(){
					uni.navigateBack()
				});
			})
		}
	}
}
</script>

<style>
page{background-color: #f8f8f8;}
.ts-popup{background-color: #fff;width: 90vw;border-radius: 20upx;}
.ts-popup .title{font-size: 32upx;color: #333;font-weight: bold;padding: 30upx 0;text-align: center;}
.ts-popup .sub-title{color: #f00;padding: 20upx 0;text-align: center;font-size: 28upx;}
.ts-popup .tips-body{width: 90%;margin: 0 auto;}
.ts-popup .tips-body .item-title{font-size: 28upx;color: #333;padding: 15upx 0;}
.ts-popup .tips-body .item-desc{font-size: 28upx;color: #333;line-height: 46upx;margin-bottom: 20upx;}
.ts-popup .pup-close{padding-top: 40upx;}
.ts-popup .pup-close .pop-btn{border: 0;background-color: #f00;font-size: 32upx;color: #fff;border-radius: 0 0 20upx 20upx;padding: 15upx 0;cursor: pointer;}

.ts-header{padding: 20upx 0;margin-bottom: 20upx;}
.ts-header .ts-h-title{font-size: 28upx;color: #666;padding: 20upx;}
.ts-header .store-info{background-color: #fff;padding: 20upx;}
.ts-header .store-info .store-left .name{font-size: 30rpx;color: #333;font-weight: bold;line-height: 80upx;}
.ts-header .store-info .store-left .address{font-size: 24rpx;color: #999;}
.ts-body{background-color: #fff;padding: 20upx;}
.ts-form .ts-form-item{border-bottom: 2upx solid #f8f8f8;padding-bottom: 10upx;}
.ts-form .ts-form-item:last-child{border-bottom: 0;}
.ts-form .ts-form-item .form-title{color: #333;font-size: 28upx;padding: 20upx 0;}
.ts-form .ts-form-item .form-title text{color: #f00;margin-left: 10upx;}
.ts-form .ts-form-item .form-input{font-size: 28upx;color: #333;height: 80upx;display: flex;align-items: center;}
.ts-form .ts-form-item .ts-input{height: 100%;border: 0;box-shadow: none;width: 100%;}
.ts-form .form-input-textarea{height: 200upx;font-size: 28upx;color: #333;}
.footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
.footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
.footer .footer-btn{padding: 20upx 0;}
.footer .footer-btn .btn{color: #fff;background-color: #f00;border-radius: 10upx;}
</style>