book-hi/pages-car/components/cancel-order-popup.vue

<template>
	<common-dialog ref="popup" title="取消订单" confirm-text="确定" @confirm="handleConfirm" @cancel="close"
		:custom-style="{width: '600rpx'}">
		<view class="reason-list">
			<u-radio-group v-model="selectedReason" :wrap="true">
				<view class="reason-item" v-for="(item, index) in reasonList" :key="index"
					@click="selectedReason = item.value">
					<text class="reason-text">{{ item.label }}</text>
					<u-radio :name="item.value" active-color="#38C148"></u-radio>
				</view>
			</u-radio-group>
		</view>
	</common-dialog>
</template>

<script>
	import CommonDialog from '@/components/common-dialog.vue';

	export default {
		name: "cancel-order-popup",
		components: {
			CommonDialog
		},
		data() {
			return {
				reasonList: [],
				selectedReason: '',
				currentOrderId: null
			};
		},
		methods: {
			open(orderId) {
				this.currentOrderId = orderId;
				this.$refs.popup.openPopup();
				this.selectedReason = '';
				if (this.reasonList.length === 0) {
					this.getReasonList();
				}
			},
			close() {
				this.$refs.popup.closePopup();
			},
			getReasonList() {
				uni.$u.http.get('/token/common/getDictOptions?type=cancel_reason').then(res => {
					if (res.code === 200) {
						this.reasonList = res.data.map(item => ({
							label: item.dictLabel,
							value: item.dictValue
						}));
					}
				});
			},
			handleConfirm() {
				if (!this.selectedReason) {
					uni.showToast({
						title: '请选择取消原因',
						icon: 'none'
					});
					return;
				}
				if (!this.currentOrderId) return;

				this.$u.api.cancelOrderAjax({
					orderId: this.currentOrderId,
					reason: this.selectedReason
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '订单取消成功',
							icon: 'success'
						});
						this.close();
						this.$emit('success');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.reason-list {
		padding: 20rpx 0;
		text-align: left;
		max-height: 500rpx;
		overflow-y: auto;

		.reason-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.reason-text {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
		}
	}
</style>