book-hi/pages-mall/components/after-sales/back-money.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 v-model="totalPrice" disabled 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: 'back-money',
		components: {
			SelectReason
		},
		props: {
			totalPrice:{
				type:String|Number,
				default:0
			},
		},
		data() {
			return {
				// 表单
				form: {
					reasonId: null,
					reason: '',
					desc: '',
				},
				
				// 原因
				currentReasonIndex: null,
				reasonOps: [{
						label: '不喜欢/不想要',
						value: '1'
					},
					{
						label: '实物与描述不符合',
						value: '2'
					},
					{
						label: '卖家发错商品',
						value: '3'
					},
					{
						label: '其他',
						value: '-1'
					}
				]
			};
		},
		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;
				}
				this.$emit('done',{
					refund_type:1,
					reason: this.form.reason,
				})
			}
		}
	};
</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>