80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<u-popup ref="popup" :show="showPopup" :round="10" @close="closePopup" :mask-close-able="false">
|
|
<view class="cancel-reason-container">
|
|
<view class="title">选择取消原因</view>
|
|
<view class="reason-list">
|
|
<view v-for="(reason, index) in cancelReasons" :key="index" class="reason-item" @click="selectReason(index)">
|
|
<view :class="['radio', selectedReason === index ? 'active' : '']"></view>
|
|
<text>{{ reason }}</text>
|
|
</view>
|
|
</view>
|
|
<button class="confirm-btn" @click="confirmCancel">确认取消</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { NavgateTo } from '../../../../../utils';
|
|
|
|
export default {
|
|
name: 'cancelOrderPopup',
|
|
props: {
|
|
showPopup: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
cancelReasons: [
|
|
'商品价格不稳定',
|
|
'买错规格/品种',
|
|
'未按时发货',
|
|
'业务反馈没货',
|
|
'不想要了，无理由退货'
|
|
],
|
|
selectedReason: 0
|
|
};
|
|
},
|
|
methods: {
|
|
closePopup() {
|
|
this.$emit('update:showPopup', false);
|
|
},
|
|
|
|
selectReason(index) {
|
|
this.selectedReason = index;
|
|
},
|
|
|
|
confirmCancel() {
|
|
const selectedText = this.cancelReasons[this.selectedReason];
|
|
uni.showModal({
|
|
title: "取消订单",
|
|
content: "千辛万苦挑选的商品，确定要取消吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.$emit('update:showPopup', false);
|
|
this.$emit('orderCancelled', { reason: selectedText });
|
|
uni.showToast({
|
|
title: '订单取消成功',
|
|
icon: 'success'
|
|
});
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
showPopup(newVal) {
|
|
if (newVal) {
|
|
this.selectedReason = 0;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import './cancelOrder.css';
|
|
</style> |