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

refactor: adopt text-ink-600 token and clean up OrderCard

Browse Source 
Replace all hardcoded #525866 text color with the text-ink-600 design token across components and pages. Refactor the OrderCard component by moving external SCSS styles to scoped styles, replace legacy class names with Tailwind utilities, and fix minor inconsistencies. Fix the typo in src/pages/quick/index.vue where rounded-[5px]0 was used incorrectly, and delete the unused OrderCard styles file.
This commit is contained in:
DEV_DSW
2026-05-29 09:38:41 +08:00
parent 051f7d1134
commit 4232f7bc36
17 changed files with 62 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,13 +45,13 @@
<div v-else class=" card-content flex flex-items-center p-[12px]">
<div class=" left flex-full pr-20">
<div class="text-[12px] text-[#525866] leading-[20px] mb-4">
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
所在位置：{{ roomId }}
</div>
<div class="text-[12px] text-[#525866] leading-[20px] mb-4">
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
联系方式: {{ contactPhone }}
</div>
<div class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">
<div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">
需求描述: {{ contactspan }}
</div>
</div>

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

@@ -26,10 +26,10 @@
</div>
<div v-else class=" left flex-full p-[12px]">
<div class="text-[12px] text-[#525866] leading-[20px] mb-4">
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
联系方式: {{ contactPhone }}
</div>
<div class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">
<div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">
意见内容: {{ contactText }}
</div>
</div>

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

@@ -17,7 +17,7 @@
{{ moduleItem.moduleTitle }}
</span>
</div>
<span class="flex-full text-[12px] text-[#525866] leading-[20px] mt-4">
<span class="flex-full text-[12px] text-ink-600 leading-[20px] mt-4">
{{ moduleItem.moduleContent }}
</span>
</div>

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

@@ -18,8 +18,8 @@
{{ refundTitle }}
</span>
</div>
<div class="text-[14px] text-[#525866] line-height-16 mb-4"
v-for="(item, index) in commodityPurchaseInstruction" :key="index">
<div class="text-[14px] text-ink-600 line-height-16 mb-4" v-for="(item, index) in commodityPurchaseInstruction"
:key="index">
{{ item }}
</div>
</div>

4
src/pages/booking/components/ConactSection/index.vue
View File

@@ -20,7 +20,7 @@
联系方式
</div>
<div class="flex flex-items-center p-[12px]">
<div class="text-[14px] font-500 text-[#525866] mr-12">联系人姓名</div>
<div class="text-[14px] font-500 text-ink-600 mr-12">联系人姓名</div>
<div class="right">
<input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="userFormList[0].visitorName"
placeholder="请输入联系人" maxlength="20" />
@@ -28,7 +28,7 @@
</div>
<div class="flex flex-items-center p-[12px]">
<div class="text-[14px] font-500 text-[#525866] mr-12">手机号码</div>
<div class="text-[14px] font-500 text-ink-600 mr-12">手机号码</div>
<div class="right">
<input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
placeholder="请输入联系手机" maxlength="11" />

4
src/pages/booking/components/UserSection/index.vue
View File

@@ -11,7 +11,7 @@
<div class=" pl-12 pr-12">
<div class=" border-bottom pt-12 pb-12 flex flex-items-center" v-for="(item, index) in userFormList" :key="index">
<div class="text-[14px] font-500 text-[#525866] mr-12">住客姓名</div>
<div class="text-[14px] font-500 text-ink-600 mr-12">住客姓名</div>
<div class="right">
<input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="item.visitorName"
placeholder="请输入姓名" maxlength="11" />
@@ -19,7 +19,7 @@
</div>
<div class="flex flex-items-center pt-12 pb-12">
<div class="text-[14px] font-500 text-[#525866] mr-12">联系手机</div>
<div class="text-[14px] font-500 text-ink-600 mr-12">联系手机</div>
<div class="right">
<input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
placeholder="请输入联系手机" maxlength="11" />

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

@@ -24,7 +24,7 @@
<!-- 权益部分 -->
<div class="flex flex-items-center mb-8">
<span class="bg-F7F7F7 rounded-4 font-size-11 text-[#525866] mr-[4px] pt-4 pb-4 pl-6 pr-6"
<span class="bg-F7F7F7 rounded-4 font-size-11 text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
v-for="(item, index) in orderData.commodityFacilityList" :key="index">
{{ item }}
</span>
@@ -32,7 +32,7 @@
</div>
<div class=" flex flex-items-center flex-justify-between pt-12">
<span class="text-[12px] text-[#525866] line-height-18">取消政策及说明</span>
<span class="text-[12px] text-ink-600 line-height-18">取消政策及说明</span>
<div class="flex flex-items-center">
<span class="text-[12px] theme-color-500 line-height-16" @click="refundVisible = true">取消政策</span>
<uni-icons type="right" size="15" color="#99A0AE" />

2
src/pages/goods/components/GoodFacility/index.vue
View File

@@ -11,7 +11,7 @@
</span>
</div>
<div class="flex items-center flex-row mt-[4px] pb-[12px]">
<span class="text-[12px] text-[#525866] leading-[20px] mr-[4px]" v-for="(span, index) in moduleItem.desc"
<span class="text-[12px] text-ink-600 leading-[20px] mr-[4px]" v-for="(span, index) in moduleItem.desc"
:key="index">
{{ span }}
</span>

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

@@ -15,7 +15,7 @@
</div>
<div v-if="['1', '2'].includes(orderData.orderStatus)"
class=" border-top flex flex-items-center flex-justify-between text-[12px] pt-12 mt-12">
<div class="text-[#525866]">取消政策及说明</div>
<div class="text-ink-600">取消政策及说明</div>
<div class="flex flex-items-center" @click="emit('click')">
<span class="theme-color-500 mr-[4px]">查看详情</span>
<uni-icons type="right" size="12" color="#99A0AE" />

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

@@ -1,7 +1,7 @@
<template>
<div class="footer bg-white flex flex-items-center flex-justify-between p-[12px]">
<button v-if="['1', '2'].includes(statusCode)"
class="left border-none bg-white rounded-10 flex flex-items-center flex-justify-center text-[14px] font-500 text-[#525866] mr-12"
class="left border-none bg-white rounded-10 flex flex-items-center flex-justify-center text-[14px] font-500 text-ink-600 mr-12"
@click="emit('refund', orderData)">
申请退款
</button>

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

@@ -13,7 +13,7 @@
<!-- 权益部分 -->
<div class=" flex flex-items-center pt-12">
<span class="bg-F7F7F7 rounded-4 font-size-11 text-[#525866] mr-[4px] pt-4 pb-4 pl-6 pr-6"
<span class="bg-F7F7F7 rounded-4 font-size-11 text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
v-for="(item, index) in commodityFacilityList" :key="index">
{{ item }}
</span>
@@ -27,7 +27,7 @@
<div class="flex text-[12px]">
<span class="w-60 color-99A0AE">购买数量</span>
<span class="text-[#525866]">{{ commodityAmount }}</span>
<span class="text-ink-600">{{ commodityAmount }}</span>
</div>
<div v-if="orderData.orderStatus === '0'" class=" border-top pt-12 text-[14px] font-500 color-171717 mt-12">

2
src/pages/order/order/components/OrderCard/OrderCardContent.vue
View File

@@ -6,7 +6,7 @@
</div>
<div :class="[
'right font-size-18 font-bold leading-[20px]',
orderData.orderStatus === '0' ? 'color-FF3D60' : 'text-[#525866]',
orderData.orderStatus === '0' ? 'color-FF3D60' : 'text-ink-600',
]">
{{ orderData.orderAmt }}
</div>

46
src/pages/order/order/components/OrderCard/index.vue
View File

@@ -1,15 +1,17 @@
<template>
<div class="order-card bg-white p-[12px] rounded-[12px] m-[12px]" @click.stop="handleCardClick">
<div
class="transition-all duration-300 ease-out bg-white p-[12px] rounded-[12px] m-[12px] active:scale-98 active:shadow-md"
@click.stop="handleCardClick">
<!-- 卡片头部 -->
<div class="card-header flex items-center">
<div class="status-info flex items-center flex-full">
<img class="status-icon mr-[4px]" :src="getStatusIcon()" />
<div class="order-title text-[14px] leading-[20px] text-[#525866]">
<div class="flex items-center flex-full">
<img class="w-[20px] h-[20px] mr-[4px]" :src="getStatusIcon()" />
<div class="order-title text-[14px] leading-[20px] text-ink-600">
{{ getOrderTypeName() }}
</div>
</div>
<div v-if="orderData.status !== 'pending'" :class="[
'status-tag text-[12px]',
'text-[12px]',
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
]">
{{ getStatusspan(orderData.orderStatus || orderData.workOrderStatus) }}
@@ -19,9 +21,9 @@
<!-- 卡片内容 -->
<OrderCardContent :order-data="orderData" />
<div v-if="orderData.orderStatus === '0'" class="span-right">
<div v-if="orderData.orderStatus === '0'" class="text-right">
<button
class="go-pay border-none text-[14px] text-white text-[#ff3d60] rounded-[5px] inline-block text-center leading-[30px]"
class="go-pay border-none text-[14px] text-[#ff3d60] rounded-[5px] inline-block text-center leading-[30px]"
@click.stop="handleCardClick">
去支付
</button>
@@ -123,6 +125,32 @@ const handleCardClick = () => {
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
<style scoped>
.tag-0 {
color: #ff3d60;
}
.tag-1 {
color: #f00044;
}
.tag-2 {
color: #40ae36;
}
.tag-3 {
color: #808389;
}
.tag-4 {
color: #0ccd58;
}
.tag-5 {
color: #808389;
}
.tag-6 {
color: #fd8702;
}
</style>

43
src/pages/order/order/components/OrderCard/styles/index.scss
View File

@@ -1,43 +0,0 @@
.order-card {
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
}
.status-icon {
width: 20px;
height: 20px;
}
.status-tag {
&.tag-0 {
color: #ff3d60;
}
&.tag-1 {
color: #f00044;
}
&.tag-2 {
color: #40ae36;
}
&.tag-3 {
color: #808389;
}
&.tag-4 {
color: #0ccd58;
}
&.tag-5 {
color: #808389;
}
&.tag-6 {
color: #fd8702;
}
}

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

@@ -2,11 +2,11 @@
<div class="bg-white rounded-10 p-[12px]">
<div class="flex mb-8 text-[12px]">
<span class="w-60 color-99A0AE">订单编号</span>
<span class="text-[#525866]">{{ orderData.orderId }}</span>
<span class="text-ink-600">{{ orderData.orderId }}</span>
</div>
<div class="flex mb-8 text-[12px]">
<span class="w-60 color-99A0AE">下单时间</span>
<span class="text-[#525866]">{{ orderData.createTime }}</span>
<span class="text-ink-600">{{ orderData.createTime }}</span>
</div>
<div class="flex text-[12px]">
<span class="w-60 color-99A0AE">支付状态</span>

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

@@ -3,12 +3,12 @@
<div v-for="(item, index) in consumerList" :key="index">
<div class="flex mb-8 text-[12px]">
<span class="w-60 color-99A0AE">住客姓名</span>
<span class="text-[#525866]">{{ item.visitorName }}</span>
<span class="text-ink-600">{{ item.visitorName }}</span>
</div>
</div>
<div class="flex text-[12px]">
<span class="w-60 color-99A0AE">联系电话</span>
<span class="text-[#525866]">{{ contactPhone }}</span>
<span class="text-ink-600">{{ contactPhone }}</span>
</div>
</div>
</template>

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

@@ -17,7 +17,7 @@
</div>
<!-- 几晚 -->
<span class="nights bg-E5E8EE font-size-11 font-500 text-[#525866] rounded-[5px]0 ml-8 mr-8">
<span class="nights bg-E5E8EE font-size-11 font-500 text-ink-600 rounded-[5px]0 ml-8 mr-8">
{{ selectedDate.totalDays }}晚
</span>