0c23d7ccb5
- replace all outdated flex-full utility classes with modern flex-1 across Vue components - standardize scrollbar hiding by using scrollbar-none utility instead of verbose vendor prefixes - update order detail page layout and scroll container styling - add scrollbar-none usage guidelines to AGENTS.md documentation
106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
|
|
<div class="refund-popup bg-F5F7FA ">
|
|
<div class=" flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
|
|
<div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
|
|
取消政策
|
|
</div>
|
|
<!-- 关闭按钮 -->
|
|
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
|
|
</div>
|
|
<!-- 内容区域 -->
|
|
<div class=" rounded-[12px] bg-white p-[12px] ml-12 mr-12 mb-40">
|
|
<div class="flex flex-items-center mb-8">
|
|
<uni-icons fontFamily="znicons" size="20" color="#333">
|
|
{{ iconsMap["zn-refund"] }}
|
|
</uni-icons>
|
|
<span class="text-[14px] font-600 text-[#171717] ml-8">
|
|
{{ refundTitle }}
|
|
</span>
|
|
</div>
|
|
<div class="text-[14px] text-ink-600 leading-[16px] mb-4" v-for="(item, index) in commodityPurchaseInstruction"
|
|
:key="index">
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from "vue";
|
|
import { iconsMap } from "@/static/fonts/znicons";
|
|
|
|
// Props定义
|
|
const props = defineProps({
|
|
// 弹窗显示状态
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// 订单数据
|
|
orderData: {
|
|
type: Object,
|
|
default: () => { },
|
|
},
|
|
});
|
|
|
|
// Events定义
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
// 弹窗引用
|
|
const popupRef = ref(null);
|
|
|
|
// 获取退款模板
|
|
const refundTitle = computed(() => {
|
|
if (props.orderData.commodityPurchaseInstruction) {
|
|
return (
|
|
props.orderData.commodityPurchaseInstruction.refundTitle || "退订规则"
|
|
);
|
|
}
|
|
|
|
return "退订规则";
|
|
});
|
|
|
|
const commodityPurchaseInstruction = computed(() => {
|
|
if (
|
|
props.orderData.commodityPurchaseInstruction &&
|
|
props.orderData.commodityPurchaseInstruction.refundContent
|
|
) {
|
|
// 以换行符为分隔符，将字符串转换为数组
|
|
return props.orderData.commodityPurchaseInstruction.refundContent.split(
|
|
"\n",
|
|
);
|
|
}
|
|
|
|
return {};
|
|
});
|
|
|
|
// 方法定义
|
|
const show = () => popupRef.value && popupRef.value.open();
|
|
|
|
const hide = () => popupRef.value && popupRef.value.close();
|
|
|
|
// 监听modelValue变化
|
|
watch(
|
|
() => props.modelValue,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
show();
|
|
} else {
|
|
hide();
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
const handleClose = () => {
|
|
emit("update:modelValue", false);
|
|
emit("close");
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./styles/index.scss";
|
|
</style>
|