414 lines
9.2 KiB
Vue
414 lines
9.2 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="选择订单" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color="#000"
|
||
title-size="36" height="45"></u-navbar>
|
||
|
||
<view class="loading-wrap" v-if="loading && list.length === 0">
|
||
<u-loading mode="circle" size="48"></u-loading>
|
||
<text class="loading-tip">加载中...</text>
|
||
</view>
|
||
|
||
<u-empty v-else-if="!loading && list.length === 0" mode="list" text="暂无进行中的租车订单"
|
||
margin-top="120"></u-empty>
|
||
|
||
<view class="list-section" v-else>
|
||
<view class="page-tip">
|
||
<u-icon name="info-circle" size="28" color="#4C97E7"></u-icon>
|
||
<text class="page-tip-text">以下为使用中的订单，点击整条卡片可切换当前主订单</text>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="list-scroll" :show-scrollbar="false">
|
||
<view hover-class="card-tap-hover" class="order-card" v-for="item in list" :key="item._key"
|
||
@click="btnitem(item)">
|
||
<view class="card-top">
|
||
<view class="card-top-left">
|
||
<text class="order-label">订单编号</text>
|
||
<text class="order-no" selectable>{{ item.orderNo }}</text>
|
||
</view>
|
||
<view class="card-action">
|
||
<text class="action-text">切换</text>
|
||
<u-icon name="arrow-right" size="28" color="#4C97E7"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fee-block">
|
||
<text class="fee-title">骑行费用</text>
|
||
<view class="fee-amount">
|
||
<text class="fee-num">{{ item.rideFeeText }}</text>
|
||
<text class="fee-suffix">元</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="kv-block">
|
||
<view class="kv-row">
|
||
<text class="kv-k">下单时间</text>
|
||
<text class="kv-v">{{ item.orderStartTimeText }}</text>
|
||
</view>
|
||
<view class="kv-row">
|
||
<text class="kv-k">车辆编号</text>
|
||
<text class="kv-v">{{ item.deviceSnText }}</text>
|
||
</view>
|
||
<view class="kv-row">
|
||
<text class="kv-k">车牌号</text>
|
||
<text class="kv-v">{{ item.devicePlateText }}</text>
|
||
</view>
|
||
<view class="kv-row">
|
||
<text class="kv-k">骑行时长</text>
|
||
<text class="kv-v strong">{{ item.rideDurationText }}</text>
|
||
</view>
|
||
<view class="kv-row last">
|
||
<text class="kv-k">行驶距离</text>
|
||
<text class="kv-v">{{ item.distanceKmText }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-tail"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: '#fff'
|
||
},
|
||
list: [],
|
||
loading: false,
|
||
submitting: false
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getlist();
|
||
},
|
||
methods: {
|
||
mapDisplayRow(raw, index) {
|
||
const id = raw && raw.id;
|
||
const _key = id !== undefined && id !== null ? `id-${id}` : `i-${index}`;
|
||
return {
|
||
...raw,
|
||
_key,
|
||
rideFeeText: this.formatMoney(raw.rideFee),
|
||
deviceSnText: raw.deviceSn == null ? '--' : String(raw.deviceSn),
|
||
devicePlateText: raw.deviceVehicleNum == null ? '--' : String(raw.deviceVehicleNum),
|
||
orderStartTimeText: raw.orderStartTime || '--',
|
||
rideDurationText: this.calculateRideDuration(raw.orderStartTime),
|
||
distanceKmText: this.formatDistanceKm(raw.orderDistance)
|
||
};
|
||
},
|
||
formatMoney(val) {
|
||
if (val == null || val === '') return '0.00';
|
||
const n = Number(val);
|
||
return Number.isFinite(n) ? n.toFixed(2) : '0.00';
|
||
},
|
||
formatDistanceKm(meters) {
|
||
if (meters == null || meters === '') return '0.0 Km';
|
||
const m = Number(meters);
|
||
if (!Number.isFinite(m)) return '0.0 Km';
|
||
return `${(m / 1000).toFixed(1)} Km`;
|
||
},
|
||
getlist() {
|
||
this.loading = true;
|
||
this.$u
|
||
.get(`/app/orderDevice/mineUsingList`)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
const rows = Array.isArray(res.data) ? res.data : [];
|
||
this.list = rows.map((row, i) => this.mapDisplayRow(row, i));
|
||
} else {
|
||
this.list = [];
|
||
uni.showToast({
|
||
title: res.msg || '加载失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.list = [];
|
||
uni.showToast({
|
||
title: '网络异常，请稍后重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
btnitem(item) {
|
||
if (this.submitting) return;
|
||
this.submitting = true;
|
||
let success = false;
|
||
this.$u
|
||
.put(`/app/orderDevice/setHighestSort?id=${item.id}`)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
success = true;
|
||
uni.showToast({
|
||
title: '切换订单成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 900);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '操作失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
.catch(() => {
|
||
uni.showToast({
|
||
title: '网络异常，请稍后重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
.finally(() => {
|
||
if (!success) this.submitting = false;
|
||
});
|
||
},
|
||
calculateRideDuration(startTime) {
|
||
if (!startTime) return '--';
|
||
const start = new Date(startTime).getTime();
|
||
if (!Number.isFinite(start)) return '--';
|
||
const now = Date.now();
|
||
let diffMs = now - start;
|
||
if (!Number.isFinite(diffMs)) return '--';
|
||
if (diffMs < 0) diffMs = 0;
|
||
const totalMinutes = Math.max(Math.ceil(diffMs / (1000 * 60)), 1);
|
||
const hours = Math.floor(totalMinutes / 60);
|
||
const minutes = totalMinutes % 60;
|
||
return `${hours}时${minutes}分`;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* 与商户端运维模块统一：主色 #4C97E7（见 yunwei/index、换电工单卡片等） */
|
||
$mc-primary: #4c97e7;
|
||
$mc-primary-soft: #ebf4ff;
|
||
$mc-primary-border: rgba(76, 151, 231, 0.22);
|
||
$page-bg: #f5f7fa;
|
||
$card-bg: #ffffff;
|
||
$text-title: #1a2332;
|
||
$text-body: #4a5568;
|
||
$text-hint: #8b95a5;
|
||
$hairline: #edf0f4;
|
||
|
||
page {
|
||
background-color: $page-bg;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
|
||
.page {
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.loading-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 160rpx;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.loading-tip {
|
||
margin-top: 24rpx;
|
||
color: $text-hint;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.list-section {
|
||
flex: 1;
|
||
height: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.page-tip {
|
||
flex-shrink: 0;
|
||
margin: 0 24rpx 16rpx;
|
||
padding: 18rpx 20rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
background-color: $mc-primary-soft;
|
||
border-radius: 12rpx;
|
||
border-left: 6rpx solid $mc-primary;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.page-tip-text {
|
||
flex: 1;
|
||
padding-top: 2rpx;
|
||
font-size: 24rpx;
|
||
color: $text-body;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.list-scroll {
|
||
flex: 1;
|
||
height: 0;
|
||
box-sizing: border-box;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.list-tail {
|
||
height: calc(40rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.order-card {
|
||
background: $card-bg;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
overflow: hidden;
|
||
border: 1rpx solid $hairline;
|
||
box-shadow: 0 4rpx 24rpx rgba(26, 35, 50, 0.05);
|
||
}
|
||
|
||
.card-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 24rpx;
|
||
padding: 24rpx 24rpx 20rpx;
|
||
}
|
||
|
||
.card-top-left {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.order-label {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: $text-hint;
|
||
line-height: 1.25;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.order-no {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: $text-title;
|
||
line-height: 1.4;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.card-action {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
align-self: center;
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: $mc-primary;
|
||
}
|
||
|
||
.fee-block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 24rpx;
|
||
padding: 20rpx 20rpx;
|
||
background: $mc-primary-soft;
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid $mc-primary-border;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.fee-title {
|
||
font-size: 26rpx;
|
||
color: $text-body;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.fee-amount {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.fee-num {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: $mc-primary;
|
||
line-height: 1;
|
||
letter-spacing: -0.5rpx;
|
||
}
|
||
|
||
.fee-suffix {
|
||
font-size: 24rpx;
|
||
color: $text-hint;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.kv-block {
|
||
padding: 8rpx 24rpx 16rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.kv-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 32rpx;
|
||
padding: 18rpx 0;
|
||
border-bottom: 1rpx solid $hairline;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.kv-row.last {
|
||
border-bottom: none;
|
||
padding-bottom: 8rpx;
|
||
}
|
||
|
||
.kv-k {
|
||
flex-shrink: 0;
|
||
width: 160rpx;
|
||
font-size: 26rpx;
|
||
color: $text-hint;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.kv-v {
|
||
flex: 1;
|
||
min-width: 0;
|
||
text-align: right;
|
||
font-size: 26rpx;
|
||
color: $text-title;
|
||
line-height: 1.45;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.kv-v.strong {
|
||
color: $mc-primary;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.card-tap-hover {
|
||
opacity: 0.88;
|
||
background-color: #fafbfd;
|
||
}
|
||
</style>
|