style:修改订单详情页订单支付方式展示效果

pages/order/details.vue

@@ -19,9 +19,26 @@
         <text class="value">{{ orderInfo.deviceNo || '-' }}</text>
       </view>
       <view class="info-item">
-        <text class="label">支付方式</text>
+        <text class="label">租借方式</text>
-        <text class="value">{{ paymentMethod }}</text>
+        <view class="value payment-method">
+          <!-- <text>{{ paymentMethod }}</text> -->
+          
+          <!-- 支付方式标识 -->
+          <view class="payment-badge wx-score" v-if="orderInfo.payWay === 'wx_score_pay'">
+            <image src="/static/images/wxpayflag.png" mode="aspectFit" class="badge-icon"></image>
+            <view class="badge-text">
+              <text>微信支付分</text>
+              <text class="divider">|</text>
+              <text class="highlight">免押租借</text>
+            </view>
+          </view>
+          <!-- 押金租借标识 -->
+          <view class="payment-badge deposit" v-else>
+            <text class="badge-text">押金租借</text>
+          </view>
+        </view>
       </view>
+      
       <view class="info-item">
         <text class="label">创建时间</text>
         <text class="value">{{ orderInfo.createTime || '-' }}</text>
@@ -378,6 +395,55 @@ const navigateToReturn = () => {
         word-break: break-all;
         text-align: right;
         max-width: 70%;
+        
+        &.payment-method {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          
+          .payment-badge {
+            margin-top: 8rpx;
+            display: flex;
+            align-items: center;
+            padding: 4rpx 10rpx;
+            border-radius: 8rpx;
+            
+            &.wx-score {
+              background: rgba(7, 193, 96, 0.08);
+              
+              .badge-icon {
+                width: 32rpx;
+                height: 26rpx;
+                margin-right: 8rpx;
+              }
+              
+              .badge-text {
+                font-size: 22rpx;
+                color: #07c160;
+                display: flex;
+                align-items: center;
+                
+                .divider {
+                  margin: 0 6rpx;
+                }
+                
+                .highlight {
+                  font-weight: 500;
+                }
+              }
+            }
+            
+            &.deposit {
+              background: #f5f5f5;
+              
+              .badge-text {
+                font-size: 22rpx;
+                color: #666;
+                font-weight: 500;
+              }
+            }
+          }
+        }
       }
       
       &.total {

unpackage/dist/build/mp-weixin/pages/order/details.js

@@ -1 +1 @@
-"use strict";const e=require("../../common/vendor.js"),t=require("../../config/user.js"),a={__name:"details",setup(a){const n=e.ref(""),r=e.ref({}),i=e.computed((()=>{switch(r.value.orderStatus){case"waiting_for_payment":return"等待支付";case"in_used":return"使用中";case"used_done":return"已完成";case"order_cancelled":return"已取消";default:return"未知状态"}})),o=e.computed((()=>{switch(r.value.orderStatus){case"waiting_for_payment":return"status-waiting";case"in_used":return"status-using";case"used_done":return"status-finished";case"order_cancelled":return"status-cancelled";default:return""}})),u=e.computed((()=>{switch(r.value.orderStatus){case"waiting_for_payment":return"请在15分钟内完成支付";case"in_used":return"设备正在使用中";case"used_done":return"感谢您的使用";case"order_cancelled":return"该订单已取消";default:return""}})),d=e.computed((()=>{const e=r.value.payWay;return"wx_score_pay"===e?"微信支付分 (免押金)":"wx_pay"===e?"微信支付":"押金支付"}));e.onLoad((async t=>{t&&t.orderId?(n.value=t.orderId,await s()):(e.index.showToast({title:"订单信息不存在",icon:"none"}),setTimeout((()=>{e.index.navigateBack()}),1500))}));const s=async()=>{try{e.index.showLoading({title:"加载中"});const a=await t.queryById(n.value);if(200!==a.code||!a.data)throw new Error("获取订单详情失败");r.value=a.data,r.value.createTime&&(r.value.createTime=c(new Date(r.value.createTime))),r.value.startTime&&(r.value.startTime=c(new Date(r.value.startTime))),r.value.endTime&&(r.value.endTime=c(new Date(r.value.endTime))),e.index.hideLoading()}catch(a){e.index.hideLoading(),e.index.showToast({title:a.message||"获取订单详情失败",icon:"none"})}},c=e=>`${e.getFullYear()}-${(e.getMonth()+1).toString().padStart(2,"0")}-${e.getDate().toString().padStart(2,"0")} ${e.getHours().toString().padStart(2,"0")}:${e.getMinutes().toString().padStart(2,"0")}`,l=e=>{if(!e)return"";const t=parseInt(e);if(t<60)return`${t}分钟`;{const e=Math.floor(t/60),a=t%60;return a>0?`${e}小时${a}分钟`:`${e}小时`}},v=()=>{e.index.showModal({title:"确认取消",content:"确定要取消此订单吗？",success:async a=>{if(a.confirm)try{e.index.showLoading({title:"处理中"});const a=await t.cancelOrder({orderId:n.value});if(200!==a.code)throw new Error(a.msg||"取消订单失败");e.index.hideLoading(),e.index.showToast({title:"订单已取消",icon:"success"}),await s()}catch(r){e.index.hideLoading(),e.index.showToast({title:r.message||"取消订单失败",icon:"none"})}}})},m=async()=>{try{e.index.showLoading({title:"处理中"});const a=await t.confirmPaymentAndRent(n.value);if(200!==a.code)throw new Error(a.msg||"支付失败");e.index.hideLoading(),e.index.showToast({title:"支付成功",icon:"success"}),await s()}catch(a){e.index.hideLoading(),e.index.showToast({title:a.message||"支付失败",icon:"none"})}},g=()=>{e.index.navigateTo({url:`/pages/return/index?deviceId=${r.value.deviceNo}&orderId=${n.value}`})};return(t,a)=>e.e({a:e.n(o.value),b:e.t(i.value),c:e.t(u.value),d:e.t(r.value.orderNo||"-"),e:e.t(r.value.deviceNo||"-"),f:e.t(d.value),g:e.t(r.value.createTime||"-"),h:e.t(r.value.startTime||"-"),i:r.value.endTime},r.value.endTime?{j:e.t(r.value.endTime)}:{},{k:r.value.phone},r.value.phone?{l:e.t(r.value.phone)}:{},{m:r.value.depositAmount},r.value.depositAmount?{n:e.t(r.value.depositAmount)}:{},{o:r.value.packageTime&&r.value.packagePrice},r.value.packageTime&&r.value.packagePrice?{p:e.t(r.value.packagePrice),q:e.t(l(r.value.packageTime))}:{},{r:e.t(r.value.payAmount||0),s:"waiting_for_payment"===r.value.orderStatus},"waiting_for_payment"===r.value.orderStatus?{t:e.o(v),v:e.o(m)}:"in_used"===r.value.orderStatus?{x:e.o(g)}:{},{w:"in_used"===r.value.orderStatus})}},n=e._export_sfc(a,[["__scopeId","data-v-dc707034"]]);wx.createPage(n);
+"use strict";const e=require("../../common/vendor.js"),a=require("../../common/assets.js"),t=require("../../config/user.js"),n={__name:"details",setup(n){const r=e.ref(""),i=e.ref({}),o=e.computed((()=>{switch(i.value.orderStatus){case"waiting_for_payment":return"等待支付";case"in_used":return"使用中";case"used_done":return"已完成";case"order_cancelled":return"已取消";default:return"未知状态"}})),s=e.computed((()=>{switch(i.value.orderStatus){case"waiting_for_payment":return"status-waiting";case"in_used":return"status-using";case"used_done":return"status-finished";case"order_cancelled":return"status-cancelled";default:return""}})),u=e.computed((()=>{switch(i.value.orderStatus){case"waiting_for_payment":return"请在15分钟内完成支付";case"in_used":return"设备正在使用中";case"used_done":return"感谢您的使用";case"order_cancelled":return"该订单已取消";default:return""}}));e.computed((()=>{const e=i.value.payWay;return"wx_score_pay"===e?"微信支付分 (免押金)":"wx_pay"===e?"微信支付":"押金支付"})),e.onLoad((async a=>{a&&a.orderId?(r.value=a.orderId,await d()):(e.index.showToast({title:"订单信息不存在",icon:"none"}),setTimeout((()=>{e.index.navigateBack()}),1500))}));const d=async()=>{try{e.index.showLoading({title:"加载中"});const a=await t.queryById(r.value);if(200!==a.code||!a.data)throw new Error("获取订单详情失败");i.value=a.data,i.value.createTime&&(i.value.createTime=c(new Date(i.value.createTime))),i.value.startTime&&(i.value.startTime=c(new Date(i.value.startTime))),i.value.endTime&&(i.value.endTime=c(new Date(i.value.endTime))),e.index.hideLoading()}catch(a){e.index.hideLoading(),e.index.showToast({title:a.message||"获取订单详情失败",icon:"none"})}},c=e=>`${e.getFullYear()}-${(e.getMonth()+1).toString().padStart(2,"0")}-${e.getDate().toString().padStart(2,"0")} ${e.getHours().toString().padStart(2,"0")}:${e.getMinutes().toString().padStart(2,"0")}`,l=e=>{if(!e)return"";const a=parseInt(e);if(a<60)return`${a}分钟`;{const e=Math.floor(a/60),t=a%60;return t>0?`${e}小时${t}分钟`:`${e}小时`}},v=()=>{e.index.showModal({title:"确认取消",content:"确定要取消此订单吗？",success:async a=>{if(a.confirm)try{e.index.showLoading({title:"处理中"});const a=await t.cancelOrder({orderId:r.value});if(200!==a.code)throw new Error(a.msg||"取消订单失败");e.index.hideLoading(),e.index.showToast({title:"订单已取消",icon:"success"}),await d()}catch(n){e.index.hideLoading(),e.index.showToast({title:n.message||"取消订单失败",icon:"none"})}}})},m=async()=>{try{e.index.showLoading({title:"处理中"});const a=await t.confirmPaymentAndRent(r.value);if(200!==a.code)throw new Error(a.msg||"支付失败");e.index.hideLoading(),e.index.showToast({title:"支付成功",icon:"success"}),await d()}catch(a){e.index.hideLoading(),e.index.showToast({title:a.message||"支付失败",icon:"none"})}},g=()=>{e.index.navigateTo({url:`/pages/return/index?deviceId=${i.value.deviceNo}&orderId=${r.value}`})};return(t,n)=>e.e({a:e.n(s.value),b:e.t(o.value),c:e.t(u.value),d:e.t(i.value.orderNo||"-"),e:e.t(i.value.deviceNo||"-"),f:"wx_score_pay"===i.value.payWay},"wx_score_pay"===i.value.payWay?{g:a._imports_0$2}:{},{h:e.t(i.value.createTime||"-"),i:e.t(i.value.startTime||"-"),j:i.value.endTime},i.value.endTime?{k:e.t(i.value.endTime)}:{},{l:i.value.phone},i.value.phone?{m:e.t(i.value.phone)}:{},{n:i.value.depositAmount},i.value.depositAmount?{o:e.t(i.value.depositAmount)}:{},{p:i.value.packageTime&&i.value.packagePrice},i.value.packageTime&&i.value.packagePrice?{q:e.t(i.value.packagePrice),r:e.t(l(i.value.packageTime))}:{},{s:e.t(i.value.payAmount||0),t:"waiting_for_payment"===i.value.orderStatus},"waiting_for_payment"===i.value.orderStatus?{v:e.o(v),w:e.o(m)}:"in_used"===i.value.orderStatus?{y:e.o(g)}:{},{x:"in_used"===i.value.orderStatus})}},r=e._export_sfc(n,[["__scopeId","data-v-e8875514"]]);wx.createPage(r);

unpackage/dist/build/mp-weixin/pages/order/details.wxml

@@ -1 +1 @@
-<view class="details-container data-v-dc707034"><view class="status-card data-v-dc707034"><view class="{{['status-icon', 'data-v-dc707034', a]}}"></view><view class="status-text data-v-dc707034">{{b}}</view><view class="status-desc data-v-dc707034">{{c}}</view></view><view class="info-card data-v-dc707034"><view class="card-title data-v-dc707034">订单信息</view><view class="info-item data-v-dc707034"><text class="label data-v-dc707034">订单号</text><text class="value data-v-dc707034">{{d}}</text></view><view class="info-item data-v-dc707034"><text class="label data-v-dc707034">设备号</text><text class="value data-v-dc707034">{{e}}</text></view><view class="info-item data-v-dc707034"><text class="label data-v-dc707034">支付方式</text><text class="value data-v-dc707034">{{f}}</text></view><view class="info-item data-v-dc707034"><text class="label data-v-dc707034">创建时间</text><text class="value data-v-dc707034">{{g}}</text></view><view class="info-item data-v-dc707034"><text class="label data-v-dc707034">开始时间</text><text class="value data-v-dc707034">{{h}}</text></view><view wx:if="{{i}}" class="info-item data-v-dc707034"><text class="label data-v-dc707034">结束时间</text><text class="value data-v-dc707034">{{j}}</text></view><view wx:if="{{k}}" class="info-item data-v-dc707034"><text class="label data-v-dc707034">联系电话</text><text class="value data-v-dc707034">{{l}}</text></view></view><view class="info-card data-v-dc707034"><view class="card-title data-v-dc707034">费用信息</view><view wx:if="{{m}}" class="info-item data-v-dc707034"><text class="label data-v-dc707034">押金</text><text class="value data-v-dc707034">￥{{n}}</text></view><view wx:if="{{o}}" class="info-item data-v-dc707034"><text class="label data-v-dc707034">套餐</text><text class="value data-v-dc707034">￥{{p}}元 / {{q}}</text></view><view class="info-item total data-v-dc707034"><text class="label data-v-dc707034">合计</text><text class="value data-v-dc707034">￥{{r}}</text></view></view><view wx:if="{{s}}" class="action-buttons data-v-dc707034"><view class="btn cancel data-v-dc707034" bindtap="{{t}}">取消订单</view><view class="btn primary data-v-dc707034" bindtap="{{v}}">立即支付</view></view><view wx:elif="{{w}}" class="action-buttons data-v-dc707034"><view class="btn primary data-v-dc707034" bindtap="{{x}}">归还设备</view></view></view>
+<view class="details-container data-v-e8875514"><view class="status-card data-v-e8875514"><view class="{{['status-icon', 'data-v-e8875514', a]}}"></view><view class="status-text data-v-e8875514">{{b}}</view><view class="status-desc data-v-e8875514">{{c}}</view></view><view class="info-card data-v-e8875514"><view class="card-title data-v-e8875514">订单信息</view><view class="info-item data-v-e8875514"><text class="label data-v-e8875514">订单号</text><text class="value data-v-e8875514">{{d}}</text></view><view class="info-item data-v-e8875514"><text class="label data-v-e8875514">设备号</text><text class="value data-v-e8875514">{{e}}</text></view><view class="info-item data-v-e8875514"><text class="label data-v-e8875514">租借方式</text><view class="value payment-method data-v-e8875514"><view wx:if="{{f}}" class="payment-badge wx-score data-v-e8875514"><image src="{{g}}" mode="aspectFit" class="badge-icon data-v-e8875514"></image><view class="badge-text data-v-e8875514"><text class="data-v-e8875514">微信支付分</text><text class="divider data-v-e8875514">|</text><text class="highlight data-v-e8875514">免押租借</text></view></view><view wx:else class="payment-badge deposit data-v-e8875514"><text class="badge-text data-v-e8875514">押金租借</text></view></view></view><view class="info-item data-v-e8875514"><text class="label data-v-e8875514">创建时间</text><text class="value data-v-e8875514">{{h}}</text></view><view class="info-item data-v-e8875514"><text class="label data-v-e8875514">开始时间</text><text class="value data-v-e8875514">{{i}}</text></view><view wx:if="{{j}}" class="info-item data-v-e8875514"><text class="label data-v-e8875514">结束时间</text><text class="value data-v-e8875514">{{k}}</text></view><view wx:if="{{l}}" class="info-item data-v-e8875514"><text class="label data-v-e8875514">联系电话</text><text class="value data-v-e8875514">{{m}}</text></view></view><view class="info-card data-v-e8875514"><view class="card-title data-v-e8875514">费用信息</view><view wx:if="{{n}}" class="info-item data-v-e8875514"><text class="label data-v-e8875514">押金</text><text class="value data-v-e8875514">￥{{o}}</text></view><view wx:if="{{p}}" class="info-item data-v-e8875514"><text class="label data-v-e8875514">套餐</text><text class="value data-v-e8875514">￥{{q}}元 / {{r}}</text></view><view class="info-item total data-v-e8875514"><text class="label data-v-e8875514">合计</text><text class="value data-v-e8875514">￥{{s}}</text></view></view><view wx:if="{{t}}" class="action-buttons data-v-e8875514"><view class="btn cancel data-v-e8875514" bindtap="{{v}}">取消订单</view><view class="btn primary data-v-e8875514" bindtap="{{w}}">立即支付</view></view><view wx:elif="{{x}}" class="action-buttons data-v-e8875514"><view class="btn primary data-v-e8875514" bindtap="{{y}}">归还设备</view></view></view>

unpackage/dist/build/mp-weixin/pages/order/details.wxss

@@ -1 +1 @@
-.details-container.data-v-dc707034{min-height:100vh;background:#f7f8fa;padding:30rpx 30rpx 100rpx;box-sizing:border-box}.details-container .status-card.data-v-dc707034{background:#fff;border-radius:20rpx;padding:40rpx;display:flex;flex-direction:column;align-items:center;margin-bottom:30rpx;box-shadow:0 4rpx 16rpx rgba(0,0,0,.04)}.details-container .status-card .status-icon.data-v-dc707034{width:120rpx;height:120rpx;border-radius:50%;margin-bottom:20rpx}.details-container .status-card .status-icon.status-waiting.data-v-dc707034{background:#fff9c4}.details-container .status-card .status-icon.status-using.data-v-dc707034{background:#e8f5e9}.details-container .status-card .status-icon.status-finished.data-v-dc707034{background:#e3f2fd}.details-container .status-card .status-icon.status-cancelled.data-v-dc707034{background:#ffebee}.details-container .status-card .status-text.data-v-dc707034{font-size:36rpx;font-weight:600;color:#333;margin-bottom:10rpx}.details-container .status-card .status-desc.data-v-dc707034{font-size:28rpx;color:#999}.details-container .info-card.data-v-dc707034{background:#fff;border-radius:20rpx;padding:30rpx;margin-bottom:30rpx;box-shadow:0 4rpx 16rpx rgba(0,0,0,.04)}.details-container .info-card .card-title.data-v-dc707034{font-size:32rpx;font-weight:600;color:#333;margin-bottom:20rpx;position:relative;padding-left:20rpx}.details-container .info-card .card-title.data-v-dc707034:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8rpx;height:32rpx;background:#1976d2;border-radius:4rpx}.details-container .info-card .info-item.data-v-dc707034{display:flex;justify-content:space-between;align-items:center;padding:20rpx 0;border-bottom:1px solid #f5f5f5}.details-container .info-card .info-item.data-v-dc707034:last-child{border-bottom:none}.details-container .info-card .info-item .label.data-v-dc707034{font-size:28rpx;color:#666}.details-container .info-card .info-item .value.data-v-dc707034{font-size:28rpx;color:#333;word-break:break-all;text-align:right;max-width:70%}.details-container .info-card .info-item.total.data-v-dc707034{margin-top:10rpx;padding-top:30rpx;border-top:1px solid #f5f5f5}.details-container .info-card .info-item.total .label.data-v-dc707034,.details-container .info-card .info-item.total .value.data-v-dc707034{font-size:32rpx;font-weight:600;color:#333}.details-container .info-card .info-item.total .value.data-v-dc707034{color:#ff5722}.details-container .action-buttons.data-v-dc707034{display:flex;justify-content:space-between;padding:30rpx 0}.details-container .action-buttons .btn.data-v-dc707034{flex:1;height:88rpx;display:flex;align-items:center;justify-content:center;font-size:32rpx;font-weight:500;border-radius:44rpx}.details-container .action-buttons .btn.cancel.data-v-dc707034{background:#f5f5f5;color:#666;margin-right:20rpx}.details-container .action-buttons .btn.primary.data-v-dc707034{background:#1976d2;color:#fff}.details-container .action-buttons .btn.data-v-dc707034:active{opacity:.9}
+.details-container.data-v-e8875514{min-height:100vh;background:#f7f8fa;padding:30rpx 30rpx 100rpx;box-sizing:border-box}.details-container .status-card.data-v-e8875514{background:#fff;border-radius:20rpx;padding:40rpx;display:flex;flex-direction:column;align-items:center;margin-bottom:30rpx;box-shadow:0 4rpx 16rpx rgba(0,0,0,.04)}.details-container .status-card .status-icon.data-v-e8875514{width:120rpx;height:120rpx;border-radius:50%;margin-bottom:20rpx}.details-container .status-card .status-icon.status-waiting.data-v-e8875514{background:#fff9c4}.details-container .status-card .status-icon.status-using.data-v-e8875514{background:#e8f5e9}.details-container .status-card .status-icon.status-finished.data-v-e8875514{background:#e3f2fd}.details-container .status-card .status-icon.status-cancelled.data-v-e8875514{background:#ffebee}.details-container .status-card .status-text.data-v-e8875514{font-size:36rpx;font-weight:600;color:#333;margin-bottom:10rpx}.details-container .status-card .status-desc.data-v-e8875514{font-size:28rpx;color:#999}.details-container .info-card.data-v-e8875514{background:#fff;border-radius:20rpx;padding:30rpx;margin-bottom:30rpx;box-shadow:0 4rpx 16rpx rgba(0,0,0,.04)}.details-container .info-card .card-title.data-v-e8875514{font-size:32rpx;font-weight:600;color:#333;margin-bottom:20rpx;position:relative;padding-left:20rpx}.details-container .info-card .card-title.data-v-e8875514:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8rpx;height:32rpx;background:#1976d2;border-radius:4rpx}.details-container .info-card .info-item.data-v-e8875514{display:flex;justify-content:space-between;align-items:center;padding:20rpx 0;border-bottom:1px solid #f5f5f5}.details-container .info-card .info-item.data-v-e8875514:last-child{border-bottom:none}.details-container .info-card .info-item .label.data-v-e8875514{font-size:28rpx;color:#666}.details-container .info-card .info-item .value.data-v-e8875514{font-size:28rpx;color:#333;word-break:break-all;text-align:right;max-width:70%}.details-container .info-card .info-item .value.payment-method.data-v-e8875514{display:flex;flex-direction:column;align-items:flex-end}.details-container .info-card .info-item .value.payment-method .payment-badge.data-v-e8875514{margin-top:8rpx;display:flex;align-items:center;padding:4rpx 10rpx;border-radius:8rpx}.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score.data-v-e8875514{background:rgba(7,193,96,.08)}.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-icon.data-v-e8875514{width:32rpx;height:26rpx;margin-right:8rpx}.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-text.data-v-e8875514{font-size:22rpx;color:#07c160;display:flex;align-items:center}.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-text .divider.data-v-e8875514{margin:0 6rpx}.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-text .highlight.data-v-e8875514{font-weight:500}.details-container .info-card .info-item .value.payment-method .payment-badge.deposit.data-v-e8875514{background:#f5f5f5}.details-container .info-card .info-item .value.payment-method .payment-badge.deposit .badge-text.data-v-e8875514{font-size:22rpx;color:#666;font-weight:500}.details-container .info-card .info-item.total.data-v-e8875514{margin-top:10rpx;padding-top:30rpx;border-top:1px solid #f5f5f5}.details-container .info-card .info-item.total .label.data-v-e8875514,.details-container .info-card .info-item.total .value.data-v-e8875514{font-size:32rpx;font-weight:600;color:#333}.details-container .info-card .info-item.total .value.data-v-e8875514{color:#ff5722}.details-container .action-buttons.data-v-e8875514{display:flex;justify-content:space-between;padding:30rpx 0}.details-container .action-buttons .btn.data-v-e8875514{flex:1;height:88rpx;display:flex;align-items:center;justify-content:center;font-size:32rpx;font-weight:500;border-radius:44rpx}.details-container .action-buttons .btn.cancel.data-v-e8875514{background:#f5f5f5;color:#666;margin-right:20rpx}.details-container .action-buttons .btn.primary.data-v-e8875514{background:#1976d2;color:#fff}.details-container .action-buttons .btn.data-v-e8875514:active{opacity:.9}

unpackage/dist/dev/mp-weixin/app.json

@@ -39,5 +39,10 @@
       }
     ]
   },
+  "permission": {
+    "scope.getPhoneNumber": {
+      "desc": "您的手机号将用于登录和订单服务"
+    }
+  },
   "usingComponents": {}
 }

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -6990,7 +6990,7 @@ function isConsoleWritable() {
 function initRuntimeSocketService() {
   const hosts = "192.168.10.59,127.0.0.1";
   const port = "8090";
-  const id = "mp-weixin_1_bom0";
+  const id = "mp-weixin_eQjgTz";
   const lazy = typeof swan !== "undefined";
   let restoreError = lazy ? () => {
   } : initOnError();

unpackage/dist/dev/mp-weixin/pages/order/details.js

@@ -1,5 +1,6 @@
 "use strict";
 const common_vendor = require("../../common/vendor.js");
+const common_assets = require("../../common/assets.js");
 const config_user = require("../../config/user.js");
 const _sfc_main = {
   __name: "details",
@@ -51,7 +52,7 @@ const _sfc_main = {
           return "";
       }
     });
-    const paymentMethod = common_vendor.computed(() => {
+    common_vendor.computed(() => {
       const payWay = orderInfo.value.payWay;
       if (payWay === "wx_score_pay") {
         return "微信支付分 (免押金)";
@@ -192,35 +193,38 @@ const _sfc_main = {
         c: common_vendor.t(orderStatusDesc.value),
         d: common_vendor.t(orderInfo.value.orderNo || "-"),
         e: common_vendor.t(orderInfo.value.deviceNo || "-"),
-        f: common_vendor.t(paymentMethod.value),
+        f: orderInfo.value.payWay === "wx_score_pay"
-        g: common_vendor.t(orderInfo.value.createTime || "-"),
+      }, orderInfo.value.payWay === "wx_score_pay" ? {
-        h: common_vendor.t(orderInfo.value.startTime || "-"),
+        g: common_assets._imports_0$2
-        i: orderInfo.value.endTime
+      } : {}, {
+        h: common_vendor.t(orderInfo.value.createTime || "-"),
+        i: common_vendor.t(orderInfo.value.startTime || "-"),
+        j: orderInfo.value.endTime
       }, orderInfo.value.endTime ? {
-        j: common_vendor.t(orderInfo.value.endTime)
+        k: common_vendor.t(orderInfo.value.endTime)
       } : {}, {
-        k: orderInfo.value.phone
+        l: orderInfo.value.phone
       }, orderInfo.value.phone ? {
-        l: common_vendor.t(orderInfo.value.phone)
+        m: common_vendor.t(orderInfo.value.phone)
       } : {}, {
-        m: orderInfo.value.depositAmount
+        n: orderInfo.value.depositAmount
       }, orderInfo.value.depositAmount ? {
-        n: common_vendor.t(orderInfo.value.depositAmount)
+        o: common_vendor.t(orderInfo.value.depositAmount)
       } : {}, {
-        o: orderInfo.value.packageTime && orderInfo.value.packagePrice
+        p: orderInfo.value.packageTime && orderInfo.value.packagePrice
       }, orderInfo.value.packageTime && orderInfo.value.packagePrice ? {
-        p: common_vendor.t(orderInfo.value.packagePrice),
+        q: common_vendor.t(orderInfo.value.packagePrice),
-        q: common_vendor.t(formatTime(orderInfo.value.packageTime))
+        r: common_vendor.t(formatTime(orderInfo.value.packageTime))
       } : {}, {
-        r: common_vendor.t(orderInfo.value.payAmount || 0),
+        s: common_vendor.t(orderInfo.value.payAmount || 0),
-        s: orderInfo.value.orderStatus === "waiting_for_payment"
+        t: orderInfo.value.orderStatus === "waiting_for_payment"
       }, orderInfo.value.orderStatus === "waiting_for_payment" ? {
-        t: common_vendor.o(handleCancelOrder),
+        v: common_vendor.o(handleCancelOrder),
-        v: common_vendor.o(handlePayment)
+        w: common_vendor.o(handlePayment)
       } : orderInfo.value.orderStatus === "in_used" ? {
-        x: common_vendor.o(navigateToReturn)
+        y: common_vendor.o(navigateToReturn)
       } : {}, {
-        w: orderInfo.value.orderStatus === "in_used"
+        x: orderInfo.value.orderStatus === "in_used"
       });
     };
   }

unpackage/dist/dev/mp-weixin/pages/order/details.wxml

@@ -1 +1 @@
-<view class="details-container data-v-2b5cbeae"><view class="status-card data-v-2b5cbeae"><view class="{{['status-icon', 'data-v-2b5cbeae', a]}}"></view><view class="status-text data-v-2b5cbeae">{{b}}</view><view class="status-desc data-v-2b5cbeae">{{c}}</view></view><view class="info-card data-v-2b5cbeae"><view class="card-title data-v-2b5cbeae">订单信息</view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">订单号</text><text class="value data-v-2b5cbeae">{{d}}</text></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">设备号</text><text class="value data-v-2b5cbeae">{{e}}</text></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">支付方式</text><text class="value data-v-2b5cbeae">{{f}}</text></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">创建时间</text><text class="value data-v-2b5cbeae">{{g}}</text></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">开始时间</text><text class="value data-v-2b5cbeae">{{h}}</text></view><view wx:if="{{i}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">结束时间</text><text class="value data-v-2b5cbeae">{{j}}</text></view><view wx:if="{{k}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">联系电话</text><text class="value data-v-2b5cbeae">{{l}}</text></view></view><view class="info-card data-v-2b5cbeae"><view class="card-title data-v-2b5cbeae">费用信息</view><view wx:if="{{m}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">押金</text><text class="value data-v-2b5cbeae">￥{{n}}</text></view><view wx:if="{{o}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">套餐</text><text class="value data-v-2b5cbeae">￥{{p}}元 / {{q}}</text></view><view class="info-item total data-v-2b5cbeae"><text class="label data-v-2b5cbeae">合计</text><text class="value data-v-2b5cbeae">￥{{r}}</text></view></view><view wx:if="{{s}}" class="action-buttons data-v-2b5cbeae"><view class="btn cancel data-v-2b5cbeae" bindtap="{{t}}">取消订单</view><view class="btn primary data-v-2b5cbeae" bindtap="{{v}}">立即支付</view></view><view wx:elif="{{w}}" class="action-buttons data-v-2b5cbeae"><view class="btn primary data-v-2b5cbeae" bindtap="{{x}}">归还设备</view></view></view>
+<view class="details-container data-v-2b5cbeae"><view class="status-card data-v-2b5cbeae"><view class="{{['status-icon', 'data-v-2b5cbeae', a]}}"></view><view class="status-text data-v-2b5cbeae">{{b}}</view><view class="status-desc data-v-2b5cbeae">{{c}}</view></view><view class="info-card data-v-2b5cbeae"><view class="card-title data-v-2b5cbeae">订单信息</view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">订单号</text><text class="value data-v-2b5cbeae">{{d}}</text></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">设备号</text><text class="value data-v-2b5cbeae">{{e}}</text></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">租借方式</text><view class="value payment-method data-v-2b5cbeae"><view wx:if="{{f}}" class="payment-badge wx-score data-v-2b5cbeae"><image src="{{g}}" mode="aspectFit" class="badge-icon data-v-2b5cbeae"></image><view class="badge-text data-v-2b5cbeae"><text class="data-v-2b5cbeae">微信支付分</text><text class="divider data-v-2b5cbeae">|</text><text class="highlight data-v-2b5cbeae">免押租借</text></view></view><view wx:else class="payment-badge deposit data-v-2b5cbeae"><text class="badge-text data-v-2b5cbeae">押金租借</text></view></view></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">创建时间</text><text class="value data-v-2b5cbeae">{{h}}</text></view><view class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">开始时间</text><text class="value data-v-2b5cbeae">{{i}}</text></view><view wx:if="{{j}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">结束时间</text><text class="value data-v-2b5cbeae">{{k}}</text></view><view wx:if="{{l}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">联系电话</text><text class="value data-v-2b5cbeae">{{m}}</text></view></view><view class="info-card data-v-2b5cbeae"><view class="card-title data-v-2b5cbeae">费用信息</view><view wx:if="{{n}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">押金</text><text class="value data-v-2b5cbeae">￥{{o}}</text></view><view wx:if="{{p}}" class="info-item data-v-2b5cbeae"><text class="label data-v-2b5cbeae">套餐</text><text class="value data-v-2b5cbeae">￥{{q}}元 / {{r}}</text></view><view class="info-item total data-v-2b5cbeae"><text class="label data-v-2b5cbeae">合计</text><text class="value data-v-2b5cbeae">￥{{s}}</text></view></view><view wx:if="{{t}}" class="action-buttons data-v-2b5cbeae"><view class="btn cancel data-v-2b5cbeae" bindtap="{{v}}">取消订单</view><view class="btn primary data-v-2b5cbeae" bindtap="{{w}}">立即支付</view></view><view wx:elif="{{x}}" class="action-buttons data-v-2b5cbeae"><view class="btn primary data-v-2b5cbeae" bindtap="{{y}}">归还设备</view></view></view>

unpackage/dist/dev/mp-weixin/pages/order/details.wxss

@@ -115,6 +115,46 @@
   text-align: right;
   max-width: 70%;
 }
+.details-container .info-card .info-item .value.payment-method.data-v-2b5cbeae {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.data-v-2b5cbeae {
+  margin-top: 8rpx;
+  display: flex;
+  align-items: center;
+  padding: 4rpx 10rpx;
+  border-radius: 8rpx;
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score.data-v-2b5cbeae {
+  background: rgba(7, 193, 96, 0.08);
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-icon.data-v-2b5cbeae {
+  width: 32rpx;
+  height: 26rpx;
+  margin-right: 8rpx;
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-text.data-v-2b5cbeae {
+  font-size: 22rpx;
+  color: #07c160;
+  display: flex;
+  align-items: center;
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-text .divider.data-v-2b5cbeae {
+  margin: 0 6rpx;
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.wx-score .badge-text .highlight.data-v-2b5cbeae {
+  font-weight: 500;
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.deposit.data-v-2b5cbeae {
+  background: #f5f5f5;
+}
+.details-container .info-card .info-item .value.payment-method .payment-badge.deposit .badge-text.data-v-2b5cbeae {
+  font-size: 22rpx;
+  color: #666;
+  font-weight: 500;
+}
 .details-container .info-card .info-item.total.data-v-2b5cbeae {
   margin-top: 10rpx;
   padding-top: 30rpx;