book-hi/pages-mall/components/after-sales/apply-reason.vue

<!-- 售后申请 -->
<template>
	<view class="slot">
		<view class="form">
			<u-form :model="form" ref="form" label-width="140rpx">
				<u-form-item label="退款原因">
					<u-input v-model="form.reason" type="select" placeholder="请选择" @click="openReasonPopup" />
				</u-form-item>
				<u-form-item label="退款说明">
					<u-input v-model="form.desc" placeholder="选填" />
				</u-form-item>
				<u-form-item label="退款金额" :border-bottom="false">
					<u-input type="digit" v-model="form.user_refundFee" placeholder="-" />
				</u-form-item>
			</u-form>
		</view>
		<view class="btn">
			<u-button type="primary" shape="circle" @click="submit"><text>提交</text></u-button>
		</view>

		<!-- 原因选择框 -->
		<SelectReason ref="SelectReason" title="退款原因" :ops="reasonOps" @change="changeReason"></SelectReason>
	</view>
</template>

<script>
	var _self;
	import SelectReason from '@/components/select-reason.vue';
	export default {
		name: 'apply-reason',
		components: {
			SelectReason
		},
		props: {
			totalPrice:{
				type:String|Number,
				default:0
			},
		},
		data() {
			return {
				// 表单
				form: {
					reasonId: null,
					reason: '',
					desc: '',
					user_refundFee:null,
				},
				refundFeeMax:null,
				// 原因
				currentReasonIndex: null,
				reasonOps: [{
						label: '不喜欢/不想要',
						value: '1'
					},
					{
						label: '实物与描述不符合',
						value: '2'
					},
					{
						label: '卖家发错商品',
						value: '3'
					},
					{
						label: '与卖家协商一致',
						value: '4'
					},
					{
						label: '其他',
						value: '-1'
					}
				]
			};
		},
		watch: {
			// 监听关键字，如果有输入关键字，则打开待选词列表
			totalPrice:{
				handler(newVal) {
					console.log(newVal);
					this.refundFeeMax = newVal;
					this.form.user_refundFee = newVal;
				},
				deep:true,
				immediate:true,
			}
		},
		onLoad() {
			_self = this;
		},
		methods: {
			// 计算金额，
			
			// 打开原因选择框
			openReasonPopup() {
				this.$refs.SelectReason.open(this.currentReasonIndex);
			},

			// 选择原因回调
			changeReason(index) {
				console.log(index);
				this.currentReasonIndex = index;
				this.form.reasonId = this.reasonOps[index].value;
				this.form.reason = this.reasonOps[index].label;
			},

			// 提交
			submit() {
				if (!this.form.reasonId) {
					this.$u.toast('请选择退款原因');
					return;
				}
				// if(this.refundFeeMax&&this.refundFeeMax<this.form.user_refundFee){
				// 	this.$u.toast("退款金额不能超出选中商品总价值")
				// 	return;
				// }
				let reason = this.form.reason;
				console.log(this.form.desc);
				if(this.form.desc){
					reason+=`(${this.form.desc})`
				}
				this.$emit('done',{
					reason: reason,
					user_refundFee: this.form.user_refundFee || 0
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.form {
		background-color: $app-theme-bg-color;
		border-radius: 16rpx;
		box-shadow: $app-theme-shadow;
		padding: 0 30rpx;
	}

	.btn {
		padding: 60rpx 0rpx;
	}
</style>