pet-front-order/pages_order/components/order/CancelOrderPopup.vue

<template>
    <uv-popup ref="popup" :safeAreaInsetBottom="false" :round="10">
        <view class="cancel-popup">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">取消订单</text>
                </view>
                <view class="popup-body">
                    <text class="popup-text">请添加客服微信，方便为您解决订单疑问或退订服务</text>
                    <view class="qrcode-container">
                        <image class="qrcode-image" :src="qrCodeUrl" mode="aspectFit" :show-menu-by-longpress="true"></image>
                    </view>
                    <text class="popup-text">取消订单原因（选填）</text>
                    <view class="reason-container">
                        <textarea class="reason-input" v-model="cancelReason" placeholder="请填写取消原因，方便我们提升服务"></textarea>
                    </view>
                </view>
                <view class="popup-footer">
                    <view class="popup-btn cancel-btn" @click="close">
                        <text>不取消</text>
                    </view>
                    <view class="popup-btn confirm-btn" @click="confirmCancel">
                        <text>确认取消</text>
                    </view>
                </view>
            </view>
        </view>
    </uv-popup>
</template>

<script>
import { cancelOrder } from "@/api/system/user.js"

export default {
	props: {
		qrCodeUrl: {
			type: String,
			default: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/details/QR_Code.png'
		}
	},
    data(){
        return {
            order : {},
            cancelReason: '',
        }
    },
	methods: {
		// 打开弹窗
		open(order){
			this.order = order;
			this.$refs.popup.open();
		},
		
		// 关闭弹窗
		close() {
			this.cancelReason = ''; // 清空取消原因
			this.$refs.popup.close();
		},
		
		// 确认取消订单
		confirmCancel() {
			if (!this.order || !this.order.id) {
				uni.showToast({
					title: '订单信息不完整',
					icon: 'none'
				});
				return;
			}
			
			// 显示加载中
			uni.showLoading({
				title: '处理中...'
			});
			
			// 调用取消订单API
			cancelOrder(this.order.id, this.cancelReason).then(res => {
				uni.hideLoading();
				
				if (res && res.code === 200) {
					// 成功
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					});
					
					// 通知父组件订单已取消
					this.$emit('cancel', this.order, this.cancelReason);
					
					// 关闭弹窗
					this.close();
				} else {
					// 失败
					uni.showToast({
						title: res?.msg || '取消失败，请联系客服',
						icon: 'none'
					});
				}
			}).catch(error => {
				uni.hideLoading();
				
				uni.showToast({
					title: '取消失败，请稍后再试',
					icon: 'none'
				});
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.cancel-popup {
	// position: fixed;
	// top: 0;
	// left: 0;
	// right: 0;
	// bottom: 0;
	// z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.popup-content {
		position: relative;
		width: 600rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
		z-index: 1000;
	}
	
	.popup-header {
		padding: 30rpx;
		text-align: center;
		background-color: #FFAA48;
	}
	
	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}
	
	.popup-body {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.popup-text {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
		text-align: center;
	}
	
	.popup-subtext {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 20rpx;
		text-align: center;
	}
	
	.qrcode-container {
		width: 300rpx;
		height: 300rpx;
		margin: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.qrcode-image {
		width: 100%;
		height: 100%;
	}
	
	.popup-footer {
		display: flex;
		border-top: 1px solid #EEEEEE;
	}
	
	.popup-btn {
		flex: 1;
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
	}
	
	.cancel-btn {
		color: #666666;
		border-right: 1px solid #EEEEEE;
	}
	
	.confirm-btn {
		color: #FFAA48;
	}
	
	.reason-container {
		width: 100%;
		margin-bottom: 20rpx;
		background-color: #F7F7F7;
		border-radius: 8rpx;
	}
	
	.reason-input {
		width: 100%;
		height: 150rpx;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
		padding: 20rpx;
	}
}
</style>