修改样式

This commit is contained in:
有果 2026-03-25 14:38:42 +08:00
parent 8af1682f58
commit 528956881e
8 changed files with 132 additions and 38 deletions

View File

@ -11,7 +11,7 @@
<!-- 内容 --> <!-- 内容 -->
<view class="modal-text-wrap" v-if="props.content"> <view class="modal-text-wrap" v-if="props.content">
<text class="modal-text font28 fontb"> <text class="modal-text font28">
{{ props.content }} {{ props.content }}
</text> </text>
</view> </view>

View File

@ -7,10 +7,10 @@
@change="popupChange" @change="popupChange"
> >
<view class="uv-picker"> <view class="uv-picker">
<!-- <view class="title"> <view class="title">
请选择区域 {{ title }} <image class="close-icon" style="width: 20rpx;height: 20rpx;" src="/static/home/close.svg" @click="cancel"></image>
</view> --> </view>
<uv-toolbar <!-- <uv-toolbar
v-if="showToolbar" v-if="showToolbar"
:cancelColor="cancelColor" :cancelColor="cancelColor"
:confirmColor="confirmColor" :confirmColor="confirmColor"
@ -19,7 +19,7 @@
:title="title" :title="title"
@cancel="cancel" @cancel="cancel"
@confirm="confirm" @confirm="confirm"
></uv-toolbar> ></uv-toolbar> -->
<!-- #ifdef MP-TOUTIAO --> <!-- #ifdef MP-TOUTIAO -->
<picker-view <picker-view
class="uv-picker__view" class="uv-picker__view"
@ -73,6 +73,16 @@
> >
<uv-loading-icon mode="circle"></uv-loading-icon> <uv-loading-icon mode="circle"></uv-loading-icon>
</view> </view>
<view class="btn" style="padding:20rpx 0">
<uv-button :customStyle="{
height: '86rpx',
lineHeight: '86rpx',
color: '#fff',
fontSize: '32rpx',
}" color="#FB322E" shape="circle" @click="confirm">
{{ confirmText }}
</uv-button>
</view>
</view> </view>
</uv-popup> </uv-popup>
</template> </template>
@ -293,6 +303,21 @@ export default {
.uv-picker { .uv-picker {
position: relative; position: relative;
.title{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 36rpx;
font-size: 36rpx;
font-weight: 600;
}
.btn{
:deep(.uv-button){
width: 470rpx;
}
}
&__view { &__view {
&__column { &__column {

View File

@ -40,6 +40,7 @@
"common.notRented": "Not rented", "common.notRented": "Not rented",
"common.rented": "Rented", "common.rented": "Rented",
"common.locked": "Locked", "common.locked": "Locked",
"common.loading": "Loading",
"locale.auto": "System", "locale.auto": "System",
"locale.en": "English", "locale.en": "English",
"locale.zh-hans": "简体中文", "locale.zh-hans": "简体中文",

View File

@ -40,6 +40,7 @@
"common.notRented": "未租", "common.notRented": "未租",
"common.rented": "已租", "common.rented": "已租",
"common.locked": "鎖定", "common.locked": "鎖定",
"common.loading": "加载中",
"locale.auto": "系统", "locale.auto": "系统",
"locale.en": "English", "locale.en": "English",
"locale.zh-hans": "简体中文", "locale.zh-hans": "简体中文",

View File

@ -73,8 +73,10 @@
<view class="orderInfo sflist card" v-if="unitTypeData.length"> <view class="orderInfo sflist card" v-if="unitTypeData.length">
<ul> <ul>
<li @click="showUnitPopup"> <li @click="showUnitPopup">
<view class="left"><text class="font32 fontb">体积</text> <text style="font-size: 26rpx;margin-left: 10rpx;" <view class="left"><text class="font32 fontb">体积</text>
v-if="state.selectUnitRow?.name">仓号{{ state.selectUnitRow?.name }}</text></view> <!-- <text style="font-size: 26rpx;margin-left: 10rpx;"
v-if="state.selectUnitRow?.name">仓号{{ state.selectUnitRow?.name }}</text> -->
</view>
<view class="right font26 fontb textGary"><text <view class="right font26 fontb textGary"><text
:style="{ color: state.selectUnitRow?.name ? '#A8AAAC' : '#FB322E' }">{{ :style="{ color: state.selectUnitRow?.name ? '#A8AAAC' : '#FB322E' }">{{
state.selectUnitRow?.name ? `${state.selectUnitRow?.volume}` : "请选择" }} </text> state.selectUnitRow?.name ? `${state.selectUnitRow?.volume}` : "请选择" }} </text>
@ -105,10 +107,10 @@
</ul> </ul>
</view> </view>
<view class="toOrder card font28" v-if="unitTypeData.length"> <view class="toOrder card font28" v-if="unitTypeData.length">
<view class="left font28"> <view class="left " >
<text class="price font36 fontb"> {{ state.priceData.expense ? `${state.priceData.expense}` : '¥--' <text class="price fontb" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }"> {{ state.priceData.expense ? `${state.priceData.expense}` : '¥--'
}}</text> }}</text>
<view class="detail" @click="showPayPopup"><text class="font28">明细</text> <view class="detail" v-if="state.priceData.expense" @click="showPayPopup"><text style="margin-right: 10rpx;font-weight: 600;" :class="{ overMaxFont:String(state.priceData?.expense).length>6 }" v-if="state.priceData?.expense">{{ state.priceData.leaseOriginalPrice }}</text><text>明细</text>
<image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image> <image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
</view> </view>
</view> </view>
@ -158,7 +160,7 @@
<uv-popup ref="unitPopupRef" mode="bottom" zIndex="999" round="24px"> <uv-popup ref="unitPopupRef" mode="bottom" zIndex="999" round="24px">
<view class="unitPopupBox"> <view class="unitPopupBox">
<view class="title font36 fontb"> <view class="title font36 fontb">
仓型选择 体积选择
</view> </view>
<view class="info"> <view class="info">
<uv-radio-group v-model="state.radiovalue" activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8"> <uv-radio-group v-model="state.radiovalue" activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8">
@ -320,11 +322,14 @@
<view class="title2 font32 fontb"> <view class="title2 font32 fontb">
<text>优惠信息</text> <text style="color: #FB322E;">- {{ state.priceData.favorable }}</text> <text>优惠信息</text> <text style="color: #FB322E;">- {{ state.priceData.favorable }}</text>
</view> </view>
<view class="title2 textGary2 fontb font28">
<text>租期优惠{{state.month}}个月长租</text><text style="color: #FB322E;">- {{ state.priceData.leaseDiscount }}</text>
</view>
<view class="toOrder card font28"> <view class="toOrder card font28">
<view class="left font28"> <view class="left font28">
<text class="price font36 fontb"> {{ state.priceData.expense ? `${state.priceData.expense}` : '--' <text class="price fontb" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }"> {{ state.priceData.expense ? `${state.priceData.expense}` : '--'
}}</text> }}</text>
<view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text class="font28">明细</text> <view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text style="margin-right: 10rpx;font-weight: 600;" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }" v-if="state.priceData?.expense">¥{{ state.priceData.leaseOriginalPrice }}</text><text class="font28">明细</text>
<image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image> <image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
</view> </view>
</view> </view>
@ -1081,12 +1086,21 @@ function changeMove(event) {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 38rpx; font-size: 38rpx;
.price {
&.overMaxFont{
font-size: 32rpx;
}
}
.detail { .detail {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 40rpx; margin-left: 16rpx;
color: #FFFFFF; color: #FFFFFF;
font-size: 28rpx; font-size: 28rpx;
.overMaxFont{
font-size: 24rpx;
}
image { image {
margin-left: 10rpx; margin-left: 10rpx;
transform: rotate(180deg); transform: rotate(180deg);
@ -1356,12 +1370,20 @@ function changeMove(event) {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 38rpx; font-size: 38rpx;
.price {
&.overMaxFont{
font-size: 32rpx;
}
}
.detail { .detail {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 40rpx;
color: #FFFFFF; color: #FFFFFF;
margin-left: 16rpx;
font-size: 28rpx; font-size: 28rpx;
.overMaxFont{
font-size: 24rpx;
}
image{ image{
margin-left: 10rpx; margin-left: 10rpx;
} }
@ -1489,7 +1511,7 @@ function changeMove(event) {
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
// align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
image { image {

View File

@ -42,7 +42,7 @@
</view> </view>
</view> </view>
</view> </view>
<uvPickerSlef ref="cityPicker" confirmColor="#FB322E" round="24px" :columns="[state.cityData]" @confirm="cityConfirm"></uvPickerSlef> <uvPickerSlef ref="cityPicker" confirmColor="#FB322E" round="24px" title="选择城市" :columns="[state.cityData]" @confirm="cityConfirm"></uvPickerSlef>
<view class="footer"> <view class="footer">
<view @click="toHome"> <view @click="toHome">
返回主页 返回主页

View File

@ -1,11 +1,11 @@
<template> <template>
<view class="container" :class="[`${themeInfo.theme}-theme`]"> <view class="container" :class="[`${themeInfo.theme}-theme`]">
<view class="header"> <view class="header">
<uv-tabs lineWidth="80rpx" lineHeight="10rpx" lineColor="#f56c6c" :scrollable="false" :list="list"> <uv-tabs @change="handleChange" :current="state.current" lineWidth="80rpx" lineHeight="10rpx" lineColor="#f56c6c" :scrollable="false" :list="list">
</uv-tabs> </uv-tabs>
</view> </view>
<view class="content"> <view class="content">
<view class="card orderList" v-for="item in state.orderList" :key="item.orderId"> <view class="card orderList" v-for="item in currentOrderList" :key="item.orderId">
<view class="orderInfo"> <view class="orderInfo">
<!-- <uv-button shape="circle">复制</uv-button> --> <!-- <uv-button shape="circle">复制</uv-button> -->
<view class="orderOn">订单号{{ item.orderNo }} <uv-button @click="copyOrderOn(item)" <view class="orderOn">订单号{{ item.orderNo }} <uv-button @click="copyOrderOn(item)"
@ -217,7 +217,7 @@
background: '#FB322E', background: '#FB322E',
color: '#fff', color: '#fff',
fontSize: '32rpx', fontSize: '32rpx',
}" shape="circle"> }" color="#FB322E" shape="circle">
刷新 刷新
</uv-button> </uv-button>
</view> </view>
@ -245,7 +245,7 @@
background: '#FB322E', background: '#FB322E',
color: '#fff', color: '#fff',
fontSize: '32rpx', fontSize: '32rpx',
}" shape="circle"> }" color="#FB322E" shape="circle">
刷新 刷新
</uv-button> </uv-button>
</view> </view>
@ -301,15 +301,19 @@
</view> </view>
<view class="title2 font32 fontb"> <view class="title2 font32 fontb">
<text>优惠信息</text> <text style="color: #FB322E;">- {{ state.priceData.favorable }}</text> <text>优惠信息</text> <text style="color: #FB322E;">- {{ state.priceData.favorable }}</text>
</view>
<view class="title2 textGary2 fontb font28">
<text>租期优惠{{state.month}}个月长租</text><text style="color: #FB322E;">- {{ state.priceData.leaseDiscount }}</text>
</view> </view>
<view class="toOrder card font28"> <view class="toOrder card font28">
<view class="left font28"> <view class="left font28">
<text class="price font36 fontb"> {{ state.priceData.expense ? `${state.priceData.expense}` <text class="price fontb" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }"> {{ state.priceData.expense ? `${state.priceData.expense}`
:'--'}}</text> :'--'}}</text>
<view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text <view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text style="margin-right: 10rpx;font-weight: 600;" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }" v-if="state.priceData?.expense">{{ state.priceData.leaseOriginalPrice }}</text>
class="font28">明细</text> <!-- <text
<image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" class="font28">明细</text> -->
mode="heightFix" class="icon"></image> <!-- <image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;"
mode="heightFix" class="icon"></image> -->
</view> </view>
</view> </view>
<view class="right"> <view class="right">
@ -554,6 +558,7 @@ const state = ref({
month: 24, month: 24,
selfMonth: 1, selfMonth: 1,
refundLoading: false, refundLoading: false,
current:0,
}); });
const list = [{ const list = [{
name: '在租', name: '在租',
@ -561,7 +566,33 @@ const list = [{
name: '到期', name: '到期',
}, { }, {
name: '待支付' name: '待支付'
}] },
]
const currentOrderList = computed(() => {
const isType1 = (item) =>
!(item.orderStartStatus == 2 && item.refundLockerStatus === 0)
&& item.refundLockerStatus === 4
const isType2 = (item) =>
item.orderStatus == 2
if (state.value.current == 0) {
// 1 2
return state.value.orderList.filter(
item => !isType1(item) && !isType2(item)
)
}
if (state.value.current == 1) {
return state.value.orderList.filter(isType1)
}
if (state.value.current == 2) {
return state.value.orderList.filter(isType2)
}
})
const showImage = (url) => { const showImage = (url) => {
if (!url) return; if (!url) return;
@ -570,6 +601,11 @@ const showImage = (url) => {
}); });
}; };
const handleChange = (e) => {
state.value.current = e.index
GetOrderList()
}
const copyOrderOn = (item) => { const copyOrderOn = (item) => {
uni.setClipboardData({ uni.setClipboardData({
data: item.orderNo, data: item.orderNo,
@ -1161,14 +1197,22 @@ onShow(() => {
color: #E9CBA1; color: #E9CBA1;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 38rpx;
.price {
&.overMaxFont{
font-size: 32rpx;
}
}
.detail { .detail {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 40rpx; margin-left: 20rpx;
color: #FFFFFF; color: #FFFFFF;
font-size: 28rpx; font-size: 28rpx;
.overMaxFont{
font-size: 24rpx;
}
image { image {
margin-left: 10rpx; margin-left: 10rpx;
} }

View File

@ -67,7 +67,7 @@
<view style="display:flex;align-items:center;width:100%"> <view style="display:flex;align-items:center;width:100%">
<view @click="showAreaCodePicker" <view @click="showAreaCodePicker"
style="display:flex;align-items:center;padding-right:16rpx"> style="display:flex;align-items:center;padding-right:16rpx">
<uv-input v-model="state.formData.areaCode" border="none" style="width:120rpx"></uv-input> <uv-input readonly v-model="state.formData.areaCode" border="none" style="width:120rpx"></uv-input>
<uv-icon name="play-right-fill" size="24rpx" style="transform: rotate(90deg)"></uv-icon> <uv-icon name="play-right-fill" size="24rpx" style="transform: rotate(90deg)"></uv-icon>
</view> </view>
@ -122,12 +122,12 @@
</view> </view>
</view> </view>
<!-- 选择证件类型 --> <!-- 选择证件类型 -->
<uv-picker ref="typePickerRef" :confirmText="$t('common.confirm')" <uvPickerSlef ref="typePickerRef" :confirmText="$t('common.confirm')"
:cancelText="$t('common.cancel')" confirmColor="#FB322E" round="24px" :columns="state.cardType" keyName="label" :cancelText="$t('common.cancel')" confirmColor="#FB322E" round="24px" title="证件类型" :columns="state.cardType" keyName="label"
@confirm="confirmCardType"></uv-picker> @confirm="confirmCardType"></uvPickerSlef>
<!-- 是否验证成功 --> <!-- 是否验证成功 -->
<myModal v-model="state.showAuthModal" :content="state.contentTips" :cancelShow="false"></myModal> <myModal v-model="state.showAuthModal" :content="state.contentTips" :cancelShow="false"></myModal>
<uv-picker ref="AreaCodePickerRef" :columns="[areaCodeList]" keyName="label" round="24px" @confirm="onAreaCodeConfirm" /> <uvPickerSlef ref="AreaCodePickerRef" title="区号" :columns="[areaCodeList]" keyName="label" round="24px" @confirm="onAreaCodeConfirm" />
</view> </view>
</template> </template>
@ -140,7 +140,8 @@ import { navigateBack } from '@/utils/common.js';
import navBar from "@/components/navBar.vue"; import navBar from "@/components/navBar.vue";
import { isShichang } from '@/config/index.js' import { isShichang } from '@/config/index.js'
import myUpload from "@/components/myUpload.vue"; import myUpload from "@/components/myUpload.vue";
import AgreementCheck from "@/components/agreementCheck.vue"; // import AgreementCheck from "@/components/agreementCheck.vue";
import uvPickerSlef from "@/components/uv-pickerself/components/uv-picker/uv-picker.vue";
// //
import { useMainStore } from "@/store/index.js"; import { useMainStore } from "@/store/index.js";
import myModal from "@/components/myModal.vue"; import myModal from "@/components/myModal.vue";