style:新增懒加载机制

This commit is contained in:
2026-02-19 21:45:39 +08:00
parent 7fd9c25ea8
commit 99872dd6df
16 changed files with 2531 additions and 2525 deletions
+8 -2
View File
@@ -4,17 +4,22 @@
<view class="card device-info-card">
<view class="device-location">
<view class="location-left">
<image src="/static/device_location.png" mode="aspectFit" class="location-icon"></image>
<image src="/static/device_location.png" mode="aspectFit" class="location-icon" lazy-load="true"></image>
<text class="location-name">{{ deviceLocation }}</text>
</view>
<view class="device-status" :class="deviceStatus.class">
<text class="status-text">{{ deviceStatus.text }}</text>
</view>
</view>
<view class="device-id">
<text class="id-label">{{ $t('order.deviceName') }}</text>
<text class="id-value">{{ deviceInfo.name }}</text>
</view>
<view class="device-id">
<text class="id-label">{{ $t('device.deviceNo') }}</text>
<text class="id-value">{{ deviceId }}</text>
</view>
</view>
<!-- 计费规则 -->
@@ -87,7 +92,7 @@
</view>
<!-- 微信支付分标识仅在微信小程序环境显示 -->
<view class="wechat-credit" v-if="isWechatMiniProgram">
<image src="/static/images/wxpayflag.png" mode="aspectFit" class="wx-icon"></image>
<image src="/static/images/wxpayflag.png" mode="aspectFit" class="wx-icon" lazy-load="true"></image>
<text class="credit-text">{{ $t('device.wxPayScoreDesc') }}</text>
</view>
</view>
@@ -772,6 +777,7 @@
.device-id {
display: flex;
align-items: center;
margin-bottom: 5rpx;
.id-label {
font-size: 26rpx;
+3 -3
View File
@@ -46,21 +46,21 @@
<view class="action-btn secondary small btn-nearby" @click="goToBuy">
<view class="icon-wrap">
<image src="/static/shop_icon.png" class="action-icon" mode="scaleToFill"></image>
<image src="/static/shop_icon.png" class="action-icon" mode="scaleToFill" lazy-load="true"></image>
</view>
<text class="action-label">{{ $t('home.buyDevice') }}</text>
</view>
<view class="action-btn primary btn-scan" @click="handleScan">
<view class="icon-wrap">
<image class="action-icon" src="/static/scan-icon.png" mode="aspectFill" />
<image class="action-icon" src="/static/scan-icon.png" mode="aspectFill" lazy-load="true" />
</view>
<text class="primary-label">{{ $t('home.scanToUse') }}</text>
</view>
<view class="action-btn secondary small btn-my" @click="goMy">
<view class="icon-wrap">
<image class="action-icon" src="/static/user.png" mode="aspectFit" />
<image class="action-icon" src="/static/user.png" mode="aspectFit" lazy-load="true" />
</view>
<text class="action-label">{{ $t('home.personalCenter') }}</text>
</view>
+9 -9
View File
@@ -15,7 +15,7 @@
</view>
<view class="header-right" v-if="orderInfo.orderStatus === 'in_used'">
<view class="device-no-eject-btn" @click="handleDeviceNoEject">
<image src="/static/power_no_popout.png" class="device-no-eject-icon" mode="aspectFit"></image>
<image src="/static/power_no_popout.png" class="device-no-eject-icon" mode="aspectFit" lazy-load="true"></image>
<text class="device-no-eject-text">{{ $t('order.deviceNoEject') }}</text>
</view>
</view>
@@ -50,7 +50,7 @@
</view>
<!-- 计费规则图片 -->
<view class="fee-rule-image">
<image :src="getFeeRuleImageUrl()" mode="widthFix" class="rule-image"></image>
<image :src="getFeeRuleImageUrl()" mode="widthFix" class="rule-image" lazy-load="true"></image>
</view>
</view>
@@ -89,7 +89,7 @@
<view class="rent-item" v-if="isOrderCompleted() && orderInfo.discountTypeName">
<view class="rent-label">{{ $t('order.usedPromotion') }}</view>
<view class="rent-value promotion-value">
<image src="/static/promotion-icon.png" class="promotion-icon" mode="aspectFit"></image>
<image src="/static/promotion-icon.png" class="promotion-icon" mode="aspectFit" lazy-load="true"></image>
{{ orderInfo.discountTypeName }}<text
v-if="orderInfo.discountAmount">{{'-'+orderInfo.discountAmount||''}}</text>
</view>
@@ -125,11 +125,11 @@
<!-- 支付成功状态 -->
<template v-if="orderInfo.orderStatus === 'payment_successful'">
<view class="bottom-icon-btn" @click="contactService">
<image src="/static/customer-service.png" class="icon" mode="aspectFit"></image>
<image src="/static/customer-service.png" class="icon" mode="aspectFit" lazy-load="true"></image>
<text>{{ $t('user.customerService') }}</text>
</view>
<view class="bottom-icon-btn" @click="handleDeviceNoEject">
<image src="/static/complaint.png" class="icon" mode="aspectFit"></image>
<image src="/static/complaint.png" class="icon" mode="aspectFit" lazy-load="true"></image>
<text>{{ $t('order.deviceNoEject') }}</text>
</view>
</template>
@@ -137,7 +137,7 @@
<!-- 使用中状态 -->
<template v-if="orderInfo.orderStatus === 'in_used'">
<view class="bottom-icon-btn" @click="contactService">
<image src="/static/customer-service.png" class="icon" mode="aspectFit"></image>
<image src="/static/customer-service.png" class="icon" mode="aspectFit" lazy-load="true"></image>
<text>{{ $t('user.customerService') }}</text>
</view>
<!-- 只有支持快递归还时才显示倒计时和快递归还按钮 -->
@@ -166,11 +166,11 @@
<template v-if="isOrderCompleted()">
<view class="bottom-icon-btn" @click="handleWithdraw"
v-if="!orderInfo.isWithdrawn && orderInfo.refundAmount > 0">
<image src="/static/suggess.png" class="icon" mode="aspectFit"></image>
<image src="/static/suggess.png" class="icon" mode="aspectFit" lazy-load="true"></image>
<text>{{ $t('order.feeAppeal') }}</text>
</view>
<view class="bottom-icon-btn" @click="contactService">
<image src="/static/customer-service.png" class="icon" mode="aspectFit"></image>
<image src="/static/customer-service.png" class="icon" mode="aspectFit" lazy-load="true"></image>
<text>{{ $t('user.customerService') }}</text>
</view>
<view class="action-btn primary" @click="rentAgain">
@@ -222,7 +222,7 @@
</view>
</view>
<view class="popup-body">
<image :src="returnMapImageUrl" mode="widthFix" class="map-image"></image>
<image :src="returnMapImageUrl" mode="widthFix" class="map-image" lazy-load="true"></image>
</view>
<view class="popup-footer">
<view class="save-btn" @click="saveReturnMapImage">
+1 -1
View File
@@ -6,7 +6,7 @@
@relocate="init" @markerTap="goToPositionDetail" />
<!-- 定位按钮 -->
<view class="relocate-btn" @click="init">
<image src="/static/location.png" class="relocate-icon" mode="aspectFit"></image>
<image src="/static/location.png" class="relocate-icon" mode="aspectFit" lazy-load="true"></image>
</view>
</view>
<view class="list-wrap">