zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: convert legacy color classes to tailwind syntax

Browse Source 
Replace all custom `bg-*` utility classes across Vue components with Tailwind's arbitrary hex color notation (e.g. `bg-[#f7f7f7]`). Remove redundant hardcoded background color definitions from src/static/scss/background.scss, clean up template formatting, and update gradient button styles to use direct hex values.
This commit is contained in:
duanshuwen
2026-07-24 15:56:35 +08:00
parent d3d15b1a19
commit aa0203819c
27 changed files with 225 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
<button :class="[
'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 bg-theme-color-500',
{
'bg-FF3D60': statusCode === '0',
'bg-[#ff3d60]': statusCode === '0',
'color-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
},
]" @click="handleButtonClick(orderData)">

37
src/pages-order/order/components/GoodsInfo/index.vue
View File

@@ -1,43 +1,27 @@
<template>
<view
v-if="orderType == 0"
class="border-box bg-white p-12 rounded-12 mb-12"
>
<view v-if="orderType == 0" class="border-box bg-white p-12 rounded-12 mb-12">
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection
v-if="orderData.orderType == 0"
:selectedDate="selectedDate"
/>
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
{{ orderData.commodityName }}
</view>
<view
class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
>
<view class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12">
{{ orderData.commodityDescription }}
</view>
<!-- 权益部分 -->
<view class="border-box flex flex-items-center pt-12">
<text
class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
v-for="(item, index) in commodityFacilityList"
:key="index"
>
<text class="bg-[#f7f7f7] border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
v-for="(item, index) in commodityFacilityList" :key="index">
{{ item }}
</text>
</view>
</view>
<view
v-if="orderType != 0"
class="border-box bg-white p-12 rounded-12 mb-12"
>
<view
class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8"
>
<view v-if="orderType != 0" class="border-box bg-white p-12 rounded-12 mb-12">
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8">
{{ orderData.commodityName }}
</view>
@@ -46,11 +30,8 @@
<text class="color-525866">{{ commodityAmount }}</text>
</view>
<view
v-if="orderData.orderStatus === '0'"
class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
>凭[电子凭证]直接验证使用</view
>
<view v-if="orderData.orderStatus === '0'"
class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12">凭[电子凭证]直接验证使用</view>
</view>
</template>

21
src/pages-order/order/components/OrderCard/index.vue
View File

@@ -1,8 +1,5 @@
<template>
<view
class="order-card bg-white border-box p-12 rounded-12 m-12"
@click.stop="handleCardClick"
>
<view class="order-card bg-white border-box p-12 rounded-12 m-12" @click.stop="handleCardClick">
<!-- 卡片头部 -->
<view class="card-header flex items-center">
<view class="status-info flex items-center flex-full">
@@ -11,13 +8,10 @@
{{ getOrderTypeName() }}
</view>
</view>
<view
v-if="orderData.status !== 'pending'"
:class="[
'status-tag font-size-12',
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
]"
>
<view v-if="orderData.status !== 'pending'" :class="[
'status-tag font-size-12',
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
]">
{{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
</view>
</view>
@@ -27,9 +21,8 @@
<view v-if="orderData.orderStatus === '0'" class="text-right">
<button
class="go-pay border-box border-none font-size-14 color-white bg-FF3D60 rounded-5 inline-block text-center line-height-30"
@click.stop="handleCardClick"
>
class="go-pay border-box border-none font-size-14 color-white bg-[#ff3d60] rounded-5 inline-block text-center line-height-30"
@click.stop="handleCardClick">
去支付
</button>
</view>

41
src/pages-order/order/components/OrderQrcode/index.vue
View File

@@ -1,12 +1,6 @@
<template>
<uni-popup
ref="popupRef"
type="bottom"
:safe-area="false"
@maskClick="handleClose"
@change="handlePopupChange"
>
<view class="refund-popup bg-F5F7FA border-box">
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose" @change="handlePopupChange">
<view class="refund-popup bg-[#f5f7fa] border-box">
<view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
<view class="flex flex-col flex-items-center flex-full ">
<view class="flex-full font-size-16 text-color-900 text-center">核销凭证</view>
@@ -19,47 +13,54 @@
<view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12">
<view class="flex w-full flex-row flex-items-center flex-justify-between py-4">
<view >
<view>
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
{{ selectedVoucher.name }}
</view>
</view>
<view v-if="selectedVoucher" class="flex flex-row">
<view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
<view class="bg-[#f5f7fa] text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{
selectedVoucher.unit }}
</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count - selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count -
selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
</view>
</view>
<view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
<view
class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
<view class="flex flex-row flex-justify-between border-box w-full px-12">
<view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{ selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
<view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count - selectedVoucher.writeOffCount }}份</view>
<view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{
selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
<view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count -
selectedVoucher.writeOffCount }}份</view>
</view>
<view class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
<view class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
:style="{ borderColor: selectedVoucher?.color }">
<Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
:onval="true" />
</view>
<view v-if="false" class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
{{ selectedVoucher.name }}
<view v-if="false"
class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
{{ selectedVoucher.name }}
</view>
</view>
<view v-if="selectedVoucherList.length > 1" class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
<view v-if="selectedVoucherList.length > 1"
class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
<view class="actions-btn" @click.stop="upAction">
<uni-icons type="left" size="16" color="#171717" />
</view>
<view class="flex flex-col">
<view class="flex flex-row flex-justify-center flex-items-center">
<view class="flex flex-row flex-justify-center flex-items-center">
<view class="theme-color-500 font-size-16">{{ currentVoucherIndex + 1 }}</view>
<view class="text-color-600 font-size-12">/{{ selectedVoucherList.length }}</view>
</view>
<view class="text-color-600 font-size-14">扫码后点击下一张</view>
</view>

22
src/pages-order/order/components/VoucherList/index.vue
View File

@@ -3,20 +3,24 @@
<text class="font-size-16 color-171717 line-height-24 font-500">
核销凭证列表
</text>
<view class="flex flex-items-center flex-justify-between py-12"
:class="[index+1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
<view class="flex flex-items-center flex-justify-between py-12"
:class="[index + 1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
<view class="flex flex-col">
<text class="text-color-900 font-size-16">{{ item.name }}</text>
<view class="flex flex-row mt-8">
<view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ item.count }}{{item.unit}}</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ item.count - item.writeOffCount }}{{item.unit}}可用</view>
<view class="bg-[#f5f7fa] text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ item.count }}{{ item.unit }}
</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ item.count - item.writeOffCount
}}{{ item.unit }}可用</view>
</view>
</view>
<view class="flex flex-items-center px-14 py-8 rounded-8" :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-gray']" @click="handleShowQrcode(item, index)">
<text v-if="item.packageStatus === 0" class="font-size-14 color-white" >出示凭证</text>
<view class="flex flex-items-center px-14 py-8 rounded-8"
:class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-[#f5f5f5]']"
@click="handleShowQrcode(item, index)">
<text v-if="item.packageStatus === 0" class="font-size-14 color-white">出示凭证</text>
<text v-else class="font-size-14 text-color-300">已核销</text>
</view>
</view>
@@ -24,7 +28,7 @@
</template>
<script setup>
import {defineProps, defineEmits } from "vue";
import { defineProps, defineEmits } from "vue";
const emit = defineEmits(["selected"]);