xusfood_client/shopping/refund.vue

<template>
	<view class="">
		<u-navbar title="申请退款" :placeholder="true" :autoBack="true" :safeAreaInsetTop="true">
		</u-navbar>
		
		<view class="page-wrap">
			<view class="box">
				<u--form labelPosition="left" :model="model" labelWidth="160rpx" :rules="rules" ref="uForm">
					<u-form-item required label="退款原因" borderBottom @click="showRefundReason = true;"
						ref="refundReason">
						<text v-if="model.refundReason">{{model.refundReason}}</text>
						<text v-else style="color: #999;">请选择退款原因</text>
						<!-- <u--input v-model="model.refundReason"  disabledColor="#ffffff" placeholder="请选择退款原因"
							border="none"></u--input> -->
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="补充说明">
						<u--textarea v-model="model.remark" placeholder="请输入内容" ></u--textarea>
					</u-form-item>
				</u--form>
			</view>
			<view class="full-btn" @click="submit">提交申请</view>
		</view>
		
		<u-action-sheet :show="showRefundReason" :actions="actions" title="请选择退款原因"
			@close="showRefundReason = false" @select="reasonSelect">
		</u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					orderId:'',
					refundReason:'',
					remark:''
				},
				showRefundReason:false,
				actions: [
					{name: '不想要了'},
					{name: '拍错了'},
					{name: '商家联系缺货'},
				],
				rules: {
					'model.refundReason': {
						type: 'string',
						required: true,
						message: '请选择退款原因',
						trigger: ['blur', 'change']
					}
				},

			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
		onShow() {},
		onLoad(page) {
			console.log('page',page);
			this.model.orderId = page.id;
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			reasonSelect(e){
				// console.log('reasonSelect',e);
				this.model.refundReason = e.name;
			},
			submit() {
				// console.log('model',this.model);
				if(!this.model.orderId){uni.$u.toast('没有订单ID');return}
				if(!this.model.refundReason){uni.$u.toast('请选择退款原因');return}
				this.$u.api.refundSubmit(this.model).then(res=>{
					uni.$u.toast(res.msg)
					uni.navigateBack()
					console.log('res',res.data);
				}).catch(err=>{
					console.log('refundSubmit',err);
				})
				// this.$refs.uForm.validate().then(res => {
				// 	// uni.$u.toast('校验通过')
				// 	this.$u.api.refundSubmit({id:id}).then(res=>{
				// 		uni.$u.toast(res.msg)
				// 		uni.navigateBack()
				// 		console.log('res',res.data);
				// 	}).catch(err=>{
				// 		console.log('refundSubmit',err);
				// 	})
				// }).catch(errors => {
				// 	uni.$u.toast('校验失败')
				// })
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.box{
	background: #FFFFFF;
	border-radius: 8rpx;
	padding: 20rpx;
}
</style>