5f06d8ef11
Replace all usages of legacy `.color-*` and `.text-color-*` SCSS utility classes with inline Tailwind `text-[#hexcode]` arbitrary value classes. Remove the deprecated `src/static/scss/colors.scss` file, and fix minor formatting/indentation issues across multiple component files.
102 lines
2.6 KiB
Vue
102 lines
2.6 KiB
Vue
<template>
|
|
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
|
|
<view class="refund-popup bg-[#f5f7fa] border-box">
|
|
<view class="border-box flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
|
|
<view class="flex-full font-size-16 text-[#171717] leading-[24px] text-center">取消政策</view>
|
|
<!-- 关闭按钮 -->
|
|
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
|
|
</view>
|
|
<!-- 内容区域 -->
|
|
<view class="border-box rounded-12 bg-white p-[12px] ml-[12px] mr-12 mb-40">
|
|
<view class="flex flex-items-center mb-8">
|
|
<uni-icons fontFamily="znicons" size="20" color="#333">
|
|
{{ zniconsMap["zn-refund"] }}
|
|
</uni-icons>
|
|
<text class="font-size-14 font-600 text-[#171717] ml-8">
|
|
{{ refundTitle }}
|
|
</text>
|
|
</view>
|
|
<view class="font-size-14 text-[#525866] leading-[16px] mb-4"
|
|
v-for="(item, index) in commodityPurchaseInstruction" :key="index">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from "vue";
|
|
import { zniconsMap } 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>
|