duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: standardize spacing and update RefundPopup component

Browse Source 
- standardize margin spacing across components with explicit pixel values
- replace legacy uni-popup and icons with van-ui equivalents in RefundPopup
- update font weight class to use semantic name in date range selector
This commit is contained in:
DEV_DSW
2026-05-29 11:20:45 +08:00
parent 702a7c1591
commit 78644e3b8a
11 changed files with 32 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CreateServiceOrder/index.vue
View File

@@ -44,10 +44,10 @@
<div v-else class=" card-content flex items-center p-[12px]">
<div class=" left flex-1 pr-20">
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
<div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
所在位置：{{ roomId }}
</div>
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
<div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
联系方式: {{ contactPhone }}
</div>
<div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">

2
src/components/Feedback/index.vue
View File

@@ -25,7 +25,7 @@
</div>
<div v-else class=" left flex-1 p-[12px]">
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
<div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
联系方式: {{ contactPhone }}
</div>
<div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">

59
src/components/RefundPopup/index.vue
View File

@@ -1,35 +1,34 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-[#f5f7fa] ">
<div class=" flex items-center justify-between pt-[12px] pb-[12px] relative">
<van-popup ref="popupRef" position="bottom" v-model:show="show">
<div class="rounded-t-[15px] pb-10 bg-[#f5f7fa] ">
<div class="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" />
<van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8" @click="close" />
</div>
<!-- 内容区域 -->
<div class=" rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-[40px]">
<div class="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-[8px]">
<div class="rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-[40px]">
<div class="flex items-center mb-[8px]">
<zn-icon name="zn-refund" size="20" color="#333"></zn-icon>
<span class="text-[14px] font-semibold text-[#171717] ml-[8px]">
{{ refundTitle }}
</span>
</div>
<div class="text-[14px] text-ink-600 leading-[16px] mb-4" v-for="(item, index) in commodityPurchaseInstruction"
:key="index">
<div class="text-[14px] text-ink-600 leading-[16px] mb-[4px]"
v-for="(item, index) in commodityPurchaseInstruction" :key="index">
{{ item }}
</div>
</div>
</div>
</uni-popup>
</van-popup>
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { ref, computed, defineExpose } from "vue";
import { iconsMap } from "@/static/fonts/znicons";
import ZnIcon from '@/components/ZnIcon/index.vue'
// Props定义
const props = defineProps({
@@ -50,6 +49,7 @@ const emit = defineEmits(["update:modelValue"]);
// 弹窗引用
const popupRef = ref(null);
const show = ref(false)
// 获取退款模板
const refundTitle = computed(() => {
@@ -77,29 +77,12 @@ const commodityPurchaseInstruction = computed(() => {
});
// 方法定义
const show = () => popupRef.value && popupRef.value.open();
const open = () => show.value = true;
const hide = () => popupRef.value && popupRef.value.close();
const close = () => show.value = false;
// 监听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>
defineExpose({
open,
close,
})
</script>

9
src/components/RefundPopup/styles/index.scss
View File

@@ -1,9 +0,0 @@
.refund-popup {
border-radius: 15px 15px 0 0;
padding-bottom: 40px;
}
.close {
top: 14px;
right: 12px;
}

2
src/components/UseDateRange/index.vue
View File

@@ -10,7 +10,7 @@
<div class="date-item" :class="{ selected: isSameDate(selectedDate, item.date) }"
@click="onDateClick(item)">
<div class="label text-[12px]">{{ item.weekDesc }}</div>
<div class="md text-[16px] font-600">
<div class="md text-[16px] font-semibold">
{{ formatMD(item.date) }}
</div>
<div class="status text-[12px]">{{ item.canOrder }}</div>

2
src/pages/booking/index.vue
View File

@@ -23,7 +23,7 @@
</div>
<!-- 权益部分 -->
<div class="flex items-center mb-8">
<div class="flex items-center mb-[8px]">
<span
class="bg-[#f7f7f7] rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
v-for="(item, index) in orderData.commodityFacilityList" :key="index">

2
src/pages/home/components/AnswerComponent/index.vue
View File

@@ -4,7 +4,7 @@
<div class="w-full"></div>
<div class="flex flex-col px-[16px] pt-16 pb-[12px] ">
<div v-if="tag" class="long-answer-tag">{{ tag }}</div>
<div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
<div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-[4px]">
<uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
<span class="text-[16px] font-medium span-color-900 ml-6"> {{ title }}</span>
</div>

2
src/pages/order/order/components/GoodsInfo/index.vue
View File

@@ -21,7 +21,7 @@
</div>
<div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
<div class="text-[16px] font-medium text-black leading-[24px] truncate mb-8">
<div class="text-[16px] font-medium text-black leading-[24px] truncate mb-[8px]">
{{ orderData.commodityName }}
</div>

4
src/pages/order/order/components/OrderInfo/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="bg-white rounded-[10px] p-[12px]">
<div class="flex mb-8 text-[12px]">
<div class="flex mb-[8px] text-[12px]">
<span class="w-60 text-ink-400">订单编号</span>
<span class="text-ink-600">{{ orderData.orderId }}</span>
</div>
<div class="flex mb-8 text-[12px]">
<div class="flex mb-[8px] text-[12px]">
<span class="w-60 text-ink-400">下单时间</span>
<span class="text-ink-600">{{ orderData.createTime }}</span>
</div>

2
src/pages/order/order/components/UserInfo/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="bg-white rounded-[10px] p-[12px] mb-[12px]" v-if="hasConsumerData">
<div v-for="(item, index) in consumerList" :key="index">
<div class="flex mb-8 text-[12px]">
<div class="flex mb-[8px] text-[12px]">
<span class="w-60 text-ink-400">住客姓名</span>
<span class="text-ink-600">{{ item.visitorName }}</span>
</div>

2
src/pages/quick/components/Card/index.vue
View File

@@ -5,7 +5,7 @@
<div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
{{ item.commodityName }}
</div>
<div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-4 truncate">
<div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-[4px] truncate">
{{ item.commodityFacility.join(" ") }}
</div>
<div class="text-[12px] leading-[18px] text-[#43669A]">