refactor: replace legacy flex utility classes and remove flex.scss
Replace all instances of prefixed flex utility classes (like flex-items-center, flex-justify-between, flex-full, flex-shrink-0) with their standard un-prefixed counterparts (items-center, justify-between, flex-1, shrink-0) across the codebase. Remove the deprecated src/static/scss/flex.scss partial file as it is no longer needed after these updates.
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="bg-white rounded-[12px] p-[12px] mb-[12px]">
|
||||
<view class="flex flex-items-center flex-justify-between">
|
||||
<view class="flex flex-items-center">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex items-center">
|
||||
<text class="text-[16px] text-[#171717] leading-[24px] font-[500]">
|
||||
订单金额
|
||||
</text>
|
||||
@@ -14,9 +14,9 @@
|
||||
超时后,订单将自动取消
|
||||
</view>
|
||||
<view v-if="['1', '2'].includes(orderData.orderStatus)"
|
||||
class="border-box border-top flex flex-items-center flex-justify-between text-[12px] pt-[12px] mt-[12px]">
|
||||
class="border-box border-top flex items-center justify-between text-[12px] pt-[12px] mt-[12px]">
|
||||
<view class="text-[#525866]">取消政策及说明</view>
|
||||
<view class="flex flex-items-center" @click="emit('click')">
|
||||
<view class="flex items-center" @click="emit('click')">
|
||||
<text class="theme-color-500 mr-[4px]">查看详情</text>
|
||||
<uni-icons type="right" size="12" color="#99A0AE" />
|
||||
</view>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<view class="footer bg-white flex flex-items-center flex-justify-between p-[12px]">
|
||||
<view class="footer bg-white flex items-center justify-between p-[12px]">
|
||||
<button v-if="['1', '2'].includes(statusCode)"
|
||||
class="left border-none bg-white rounded-[10px] flex flex-items-center flex-justify-center text-[14px] font-[500] text-[#525866] mr-[12px]"
|
||||
class="left border-none bg-white rounded-[10px] flex items-center justify-center text-[14px] font-[500] text-[#525866] mr-[12px]"
|
||||
@click="emit('refund', orderData)">
|
||||
申请退款
|
||||
</button>
|
||||
<button :class="[
|
||||
'right border-none rounded-[10px] flex flex-full flex-items-center flex-justify-center text-[14px] font-[500] bg-[#0CCD58]',
|
||||
'right border-none rounded-[10px] flex flex-1 items-center justify-center text-[14px] font-[500] bg-[#0CCD58]',
|
||||
{
|
||||
'bg-[#ff3d60]': statusCode === '0',
|
||||
'text-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 权益部分 -->
|
||||
<view class="border-box flex flex-items-center pt-[12px]">
|
||||
<view class="border-box flex items-center pt-[12px]">
|
||||
<text class="bg-[#f7f7f7] rounded-[4px] text-[11px] text-[#525866] mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
|
||||
v-for="(item, index) in commodityFacilityList" :key="index">
|
||||
{{ item }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="info-row flex items-center mt-[8px]">
|
||||
<text class="label text-[12px] text-[#99a0ae]">{{ label }}:</text>
|
||||
<text class="value flex-full text-[12px] text-[#99a0ae]">{{ value }}</text>
|
||||
<text class="value flex-1 text-[12px] text-[#99a0ae]">{{ value }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="card-content pt-[12px]">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="left flex-full text-[14px] leading-[20px] text-[#171717] mr-[12px]">
|
||||
<view class="left flex-1 text-[14px] leading-[20px] text-[#171717] mr-[12px]">
|
||||
{{ orderData.commodityName }}
|
||||
</view>
|
||||
<view :class="[
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="order-card bg-white p-[12px] rounded-[12px] m-[12px]" @click.stop="handleCardClick">
|
||||
<!-- 卡片头部 -->
|
||||
<view class="card-header flex items-center">
|
||||
<view class="status-info flex items-center flex-full">
|
||||
<view class="status-info flex items-center flex-1">
|
||||
<image class="status-icon mr-[4px]" :src="getStatusIcon()" />
|
||||
<view class="order-title text-[14px] leading-[20px] text-[#525866]">
|
||||
{{ getOrderTypeName() }}
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<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-[12px] pb-[12px] relative">
|
||||
<view class="flex flex-col flex-items-center flex-full ">
|
||||
<view class="flex-full text-[16px] text-[#0B5C2D] text-center">核销凭证</view>
|
||||
<view class="flex-full text-[12px] text-[#02C34E] text-center mt-[4px]">请向工作人员出示此码</view>
|
||||
<view class="border-box flex items-center justify-between pt-[12px] pb-[12px] relative">
|
||||
<view class="flex flex-col items-center flex-1 ">
|
||||
<view class="flex-1 text-[16px] text-[#0B5C2D] text-center">核销凭证</view>
|
||||
<view class="flex-1 text-[12px] text-[#02C34E] text-center mt-[4px]">请向工作人员出示此码</view>
|
||||
</view>
|
||||
<!-- 关闭按钮 -->
|
||||
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="bg-white rounded-[12px] flex flex-col flex-items-center flex-justify-center p-[12px] mb-[12px] mx-[12px]">
|
||||
<view class="bg-white rounded-[12px] flex flex-col items-center justify-center p-[12px] mb-[12px] mx-[12px]">
|
||||
|
||||
<view class="flex w-full flex-row flex-items-center flex-justify-between py-[4px]">
|
||||
<view class="flex w-full flex-row items-center justify-between py-[4px]">
|
||||
<view>
|
||||
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
|
||||
{{ selectedVoucher.name }}
|
||||
@@ -32,8 +31,8 @@
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="flex flex-col w-full flex-items-center flex-justify-center rounded-[8px] border pt-[16px] pb-[32px] mt-[12px]">
|
||||
<view class="flex flex-row flex-justify-between w-full px-[12px]">
|
||||
class="flex flex-col w-full items-center justify-center rounded-[8px] border pt-[16px] pb-[32px] mt-[12px]">
|
||||
<view class="flex flex-row justify-between w-full px-[12px]">
|
||||
<view class="bg-[#F0F8F3] text-[#0CCD58] text-[14px] px-[12px] leading-[24px] rounded-[12px]">凭证{{
|
||||
selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
|
||||
<view class="text-[#0CCD58] text-[14px] px-[12px] leading-[24px] rounded-[12px]">此码仅可核销{{
|
||||
@@ -42,7 +41,7 @@
|
||||
selectedVoucher.writeOffCount }}份</view>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-items-center flex-justify-center mt-[20px] p-[20px] rounded-[12px] border borderColor"
|
||||
<view class="flex items-center justify-center mt-[20px] p-[20px] rounded-[12px] border borderColor"
|
||||
:style="{ borderColor: selectedVoucher?.color }">
|
||||
<Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
|
||||
:onval="true" />
|
||||
@@ -55,13 +54,13 @@
|
||||
</view>
|
||||
|
||||
<view v-if="selectedVoucherList.length > 1"
|
||||
class="flex flex-row w-full flex-items-center flex-justify-between mt-[16px] mb-[24px]">
|
||||
class="flex flex-row w-full items-center justify-between mt-[16px] mb-[24px]">
|
||||
<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 justify-center items-center">
|
||||
<view class="theme-color-500 text-[16px]">{{ currentVoucherIndex + 1 }}</view>
|
||||
<view class="text-[#02C34E] text-[12px]">/{{ selectedVoucherList.length }}</view>
|
||||
</view>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
核销凭证列表
|
||||
</text>
|
||||
|
||||
<view class="flex flex-items-center flex-justify-between py-[12px]"
|
||||
<view class="flex items-center justify-between py-[12px]"
|
||||
: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">
|
||||
@@ -20,7 +20,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-items-center px-[14px] py-[8px] rounded-[8px]"
|
||||
<view class="flex items-center px-[14px] py-[8px] rounded-[8px]"
|
||||
:class="[item.packageStatus === 0 ? 'bg-[#0CCD58]' : 'bg-[#f5f5f5]']" @click="handleShowQrcode(item, index)">
|
||||
<text v-if="item.packageStatus === 0" class="text-[14px] text-white">出示凭证</text>
|
||||
<text v-else class="text-[14px] text-[#77FEAB]">已核销</text>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="order-detail-page flex flex-col h-screen">
|
||||
<TopNavBar titleAlign="center" :background="$theme - color - 100" title="订单详情" />
|
||||
|
||||
<view class="order-detail-wrapper flex-full overflow-hidden scroll-y">
|
||||
<view class="order-detail-wrapper flex-1 overflow-hidden scroll-y">
|
||||
<OrderStatusInfo :orderData="orderData" />
|
||||
|
||||
<VoucherList v-if="orderData.orderType != 0 && orderData.orderStatus === '2'" :orderData="orderData"
|
||||
|
||||
Reference in New Issue
Block a user