fangliaoxiaochengxv/components/AfterReson.vue

<template>
	<u-popup :show="value" :round="10" mode="bottom" @close="close">
		<view class="pop-content">
			<view class="text-center ">
				<text class="color-3 fw700 fs18">请选择原因</text>
				<view class="float-right" @click="close">
					<u-icon name="close" color="#8E8E8E" size="30"></u-icon>
				</view>
			</view>
			<view class="fs12 color-9 mb30 mt5">
				订单一旦取消，无法恢复，金额/积分将原路返还
			</view>
			<view class="list-box">
				<u-radio-group iconPlacement="right" activeColor="#F39800" v-model="checkedReason" placement="column">
					<u-radio :customStyle="{marginBottom: '20px'}" v-for="(item, index) in reasonList" :key="index"
						:label="item" :name="item">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="common-btn" @click="submit">提交</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "AfterReson",
		props: {
			value: {
				type: Boolean,
				default: true
			},
			dictId: {
				type: [String, Number],
				default: 15
			}
		},
		data() {
			return {
				show: false,
				checkedReason: '',
				reasonList: [],
			};
		},
		watch: {
			value(nv) {
				if (nv) {
					this.getReasonList()
				}
				// this.show = this.showFlag
			}
		},
		// mounted() {
		// 	this.getReasonList()
		// },
		methods: {
			close() {
				this.$emit('input', false)
			},
			submit() {
				this.$emit('input', false)
				this.$emit('confirm', this.checkedReason)
			},
			getReasonList() {
				this.$api.getConfigData({ dict_id: this.dictId }).then(res => {
					this.reasonList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-content {
		padding: 36rpx;
	}
</style>