Files
nianxx-h5/src/components/RefundPopup/index.vue
duanshuwen 1a5a2ae6a9 refactor: clean up codebase and add new features
Replace SCSS variable usages with explicit pixel/hex values for consistent styling across all components
Fix broken template syntax including missing class spaces and incorrect closing tags
Migrate constant and API imports to centralized @/constants and @/api modules
Add new utility classes: IdUtils, CallbackUtils, and TimerUtils
Add new chat conversation API endpoints for recent conversations and message lists
Add new Discovery page components (FindTabs, QuickQuestions, CardSwiper) and their styles
Update app store config to use environment variables for base API and WebSocket URLs
Add new selected tab icon assets
2026-05-26 23:50:37 +08:00

106 lines
2.6 KiB
Vue

<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-F5F7FA border-box">
<div class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
<div class="flex-full font-size-16 color-171717 line-height-24 text-center">
取消政策
</div>
<!-- 关闭按钮 -->
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
</div>
<!-- 内容区域 -->
<div class="border-box rounded-12 bg-white p-12 ml-12 mr-12 mb-40">
<div class="flex flex-items-center mb-8">
<uni-icons fontFamily="znicons" size="20" color="#333">
{{ zniconsMap["zn-refund"] }}
</uni-icons>
<span class="font-size-14 font-600 color-171717 ml-8">
{{ refundTitle }}
</span>
</div>
<div class="font-size-14 color-525866 line-height-16 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 { 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>