style:新增懒加载机制
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user