在当前页面想在页面数据未加载前就选中current 并改变inactiveColor为白色，以下代码实现出来有很长延迟，原因在哪，如何修改
<template>
<view class="list-view-content">
<view class="list-view-header">
<uv-navbar
titleStyle="color:'#FFF'"
leftIconColor="#FFF"
bgColor="#3592EF"
fixed
placeholder
:autoBack="true"
>
<template v-slot:center>
<view class="uv-nav-slot">
<uv-subsection :list="list" :current="current" @change="change"
activeColor="#3C9CFF"
inactiveColor="#FFF"
bgColor="#3C9CFF"
:custom-style="{width:'160px',height: '38px', border: '1px solid #FFF', borderRadius: '18px',padding:'0'}"
:custom-item-style="{height: '38px'}" ></uv-subsection>
<uv-badge v-if="unPayNum" type="error" max="99" :value="unPayNum" absolute :customStyle="{top: '0px',right: '10px',}"></uv-badge>
</view>
</template>
<template v-if="current === 0" v-slot:right>
<text style="font-size: small;">打印小票</text>
<uv-switch
:size="15"
:value="$store.state.orderManagement.isPrintEnabled"
@change="$store.dispatch('orderManagement/togglePrint')"
inactive="#DCDFE6"
></uv-switch>
</template>
</uv-navbar>
</view>
<!-- 未核销订单页面 -->
<view v-show="current === 0">
<view>
<scroll-view scroll-x>
<view class="gun-item-content">
<view v-for="(item,index) in gunList" :class="gunChangeIndex === index ? 'gun-item-active' : ''"
:key="index" @click="gunChange(index)">
<text v-if="item.pkId < 0">全部</text>
<text v-else>{{ item.oilGunCode }}号枪</text>
</view>
</view>
</scroll-view>
</view>
</view>
<view v-show="current === 0" class="list-view-item-content">
<scroll-view class="list-view-item-scroll" scroll-y >
<template v-if="loading && orderList.length == 0">
<uv-loading-icon></uv-loading-icon>
</template>
<uv-empty mode="list"
v-else-if="orderList.length === 0"></uv-empty>
<view class="order-list-content" v-for="(item) in orderList" :key="item.id">
<view class="df f-ac order-cell">
<view class="flex-1">
<text class="fc-212121">订单总额</text>
</view>
<view class="">
<text class="fc-212121">{{ item.priceTotal }}</text>
</view>
</view>
<view class="df f-ac order-cell">
<view class="flex-1">
<text class="fc-212121">枪号</text>
</view>
<view class="">
<text class="fc-212121">{{ item.gunNum }}</text>
</view>
</view>
<view class="df f-ac order-cell">
<view class="flex-1">
<text class="fc-212121">油品</text>
</view>
<view class="">
<text class="fc-212121">{{ item.oilName }}</text>
</view>
</view>
<view class="df f-ac order-cell">
<view class="flex-1">
<text class="fc-212121">升数</text>
</view>
<view class="">
<text class="fc-212121">{{ item.howLiters }}</text>
</view>
</view>
<view class="df f-ac order-cell">
<view class="flex-1">
<text class="fc-212121">
加油时间</text>
</view>
<view class="">
<text class="fc-212121">{{ item.createdate }}</text>
</view>
</view>
<view class="df f-ac order-cell">
<view class="flex-1">
<text class="fc-212121">员工姓名</text>
</view>
<view class="">
<text class="fc-212121">{{ item.operatorName }}</text>
</view>
</view>
<uv-row gutter="10" class="mt-10">
<uv-col :span="6">
<uv-button @click="toWechartPay(item)" color="#F6F8FA" :customStyle="{color:'#3592EF'}">微信</uv-button>
</uv-col>
<uv-col :span="6">
<uv-button @click="showSearchCardPopup(item)" color="#F6F8FA" :customStyle="{color:'#3592EF'}">
实体卡支付
</uv-button>
</uv-col>
</uv-row>
<uv-row gutter="10" class="mt-10">
<uv-col :span="6">
<uv-button @click="morePay(item)" color="#F6F8FA" :customStyle="{color:'#3592EF'}">更多支付</uv-button>
</uv-col>
<uv-col :span="6">
<uv-button @click="updateOrder(item)" color="#F6F8FA" :customStyle="{color:'#3592EF'}">修改订单</uv-button>
</uv-col>
</uv-row>
</view>
</scroll-view>
</view>
<!-- 补订单按钮 -->
<uv-button v-show="current === 0"
type="primary"
@click="navigateToSupplementOrder"
customStyle="width: 80%;margin-left: 25%"
>
<text style="color: #ffffff">补订单</text>
</uv-button>
<!-- 车牌付订单页面内容 -->
<view v-show="current === 1" class="plate-order-container">
<!-- 搜索车牌 -->
<view class="box-search">
<text class="fc-212121">车牌号：</text>
<uv-input placeholder="请输入车牌号" v-model="vehicleId" border="surround" clearable @blur="loadPlateOrders"></uv-input>
<uv-button type="primary" @click="loadPlateOrders" class="ml-10">查询</uv-button>
</view>
<scroll-view scroll-y="true" class="h-600 mt-10">
<uv-empty mode="list" v-show="!plateOrders.length"></uv-empty>
<!-- 车牌付订单列表 -->
<view
v-for="(order, idx) in plateOrders"
:key="idx"
class="order-card"
:class="{'paid-order': order.settleStatus === 1, 'failed-order': order.settleStatus === 2,'in-progress-order':order.settleStatus === 3 || order.settleStatus === -1, }"
>
<!-- 状态标签 -->
<view v-show="order.settleStatus !== 0" class="status-tag">
{{ order.settleStatus === 1 ? '已支付' : order.settleStatus === 2 ? '支付失败': order.settleStatus === -1 ? '已取消' :'进行中' }}
</view>
<view class="order-item-l">
<text class="fc-212121">车牌号：</text>
<text class="fw-bolder">{{ order.plateNumber }}</text>
</view>
<view class="order-item-s">
<text class="fc-212121">品类：</text>
<text class="fc-212121">{{ order.oilName }}</text>
</view>
<!-- 根据卡类型判断 绑定此车牌且
开通车牌付的车队卡号 或 手机号（绑定此车牌的会员手机号） -->
<view class="order-item-l" v-if="order.memberId && order.memberId.startsWith('SIMP')">
<text class="fc-212121">卡号：</text>
<text class="fc-212121">{{ order.memberId }}</text>
</view>
<view class="order-item-l" v-else>
<text class="fc-212121">手机号：</text>
<text class="fc-212121">{{ order.phone }}</text>
</view>
<view class="order-item-s">
<text class="fc-212121">油品账户：</text>
<text class="fc-212121">{{ order.balance }}</text>
</view>
<view :class="order.settleStatus === 1 ? 'order-item-l' :'gun-selection'" >
<text class="fc-212121">枪号：</text>
<!-- 已支付 必有枪号 -->
<text v-if="order.settleStatus === 1" class="fw-bolder"
>
{{ order.selectedGun }}号枪
</text>
<!-- 未支付/支付失败，有枪号就支持修改 -->
<view v-else-if="order.selectedGun" class="selected-gun">
<text class="fw-bolder mr-10" >
{{ order.selectedGun }}号枪
</text>
<uv-button
size="small"
type="primary"
@click="modifyGun(order)"
>修改枪号</uv-button>
<uv-button
v-if="order.settleStatus === 3"
class="ml-10"
size="small"
type="warning"
@click="cancelPlatePay(order)"
>取消车牌付</uv-button>
</view>
<!-- 未选择枪号 -->
<view v-if="!order.selectedGun" class="selected-gun">
<view
v-for="gun in order.chooseGunCodes"
:key="gun"
class="gun-option"
:class="{ 'selected': order.tempSelectedGun === gun }"
@click='selectGun(order,gun)'
>
{{ gun }}号枪
</view>
<uv-button type="primary" size="small" @click="confirmGunSelection(order)" >确认</uv-button>
</view>
</view>
<view class="order-item-s" v-if="order.settleStatus === 1">
<text class="fc-212121">
加油金额：</text>
<text class="fc-212121">{{ order.amount }}</text>
</view>
<view class="order-item-l" v-if="order.settleStatus === 1">
<text class="fc-212121">升数：</text>
<text class="fc-212121">{{ order.liters }}L</text>
</view>
<view class="order-item-s" v-if="order.settleStatus === 1">
<text class="fc-212121">实付金额：</text>
<text class="fc-212121">{{ order.paidAmount }}</text>
</view>
<view class="order-item" v-if="order.settleStatus === 1">
<text class="fc-212121">
加油时间：</text>
<text class="fc-212121">{{ order.createDate }}</text>
</view>
<view class="order-item-l" v-if="order.settleStatus !== 1">
<text class="fc-212121">时间：</text>
<text class="fc-212121">{{ order.createDate }}</text>
</view>
<view class="order-item-s" v-if="order.settleStatus !== 1">
<text class="fc-212121">位置：</text>
<text class="fc-212121">{{ order.position }}</text>
</view>
<view class="tip-text" v-if="order.settleStatus === 2">
<text class="fc-ED5736">失败原因：</text>
<text class="fc-ED5736">{{ order.remark }}</text>
</view>
</view>
</scroll-view>
</view>
<PayCode ref="payCode" :order-info="orderItem" @payCodeSuccess="payCodeSuccess"></PayCode>
<!-- 刷卡操作-->
<SearchCard ref="searchCardPopup" @searchCardCallBack="searchCardCallBack"></SearchCard>
</view>
</template>
<script>
import {Component} from "vue-property-decorator";
import Vue from "vue";
import {namespace} from "vuex-class";
import {selectPosMachineOrderList} from "@/apis/order";
import {findPosList, cancelCamera, updateGunCode} from "@/apis/site";
import PayCode from "@/components/PayCode";
import SearchCard from "@/components/SearchCard";
import ScreenPopup from "./components/ScreenPopup";
import {findGunStatus} from "@/apis/site";
import PayTypes from "@/enum/pay";
const userModule = namespace('user');
@Component({
components: {
PayCode,
SearchCard,
ScreenPopup
}
})
export default class UnpaidOrder extends Vue {
@userModule.State("userInfo") userInfo;
oilTypeIndex = null;
gunChangeIndex = 0;
gunList = [];
orderList = [];
loading = true;
nowPage = 1;
orderItem = null;
startTime = "";
endTime = "";
showPopup=false;
isPrintEnabled =true;
list = ['
加油订单', '车牌付'];
current = 1; // 0 或 1
vehicleId='';//车牌号
unPayNum = 0;
plateOrders = [];
refreshTimer = null; // 定义定时器变量
tempGunSelections = new Map(); // 使用Map存储临时枪号选择状态（支持多订单修改）
pendingChanges = new Set(); // 跟踪有未保存修改的订单ID
handlePrintToggle(){
this.isPrintEnabled
localStorage.setItem("isPrintEnabled",this.isPrintEnabled)
}
onShow(){
this.getOrderData();
}
async onLoad() {
await this.startAutoRefresh(); // 启动定时器
await this.getOilGunList();
await this.loadPlateOrders(); // 加载车牌付订单
}
onHide() {
this.clearAutoRefresh(); // 页面隐藏时停止定时器
}
onUnload() {
this.clearAutoRefresh(); // 页面卸载时停止定时器
// 清理状态缓存
this.tempGunSelections.clear();
this.pendingChanges.clear();
}
change(index) {
this.current = index;
if(this.current){
this.loadPlateOrders()
} else {
this.getOilGunList()
}
}
getOrderData() {
this.loading = true;
this.orderList = []; // 清空旧数据
selectPosMachineOrderList({
gunNum: this.gunChangeIndex > 0 ? this.gunList[this.gunChangeIndex].oilGunCode : '',
payStatus:0,
startTime: this.startTime,
endTime: this.endTime,
stationNum: this.userInfo.stationId,
nowPage: this.nowPage,
pageSize: 5
}).then((res) => {
uni.stopPullDownRefresh();
this.loading = false;
this.orderList = res.resultData || []
})
};
/*油枪切换*/
gunChange(index) {
if (this.gunChangeIndex === index) {
return;
}
this.gunChangeIndex = index;
this.orderList = [];
this.getOrderData();
};
/*获取站点油枪*/
getOilGunList() {
return new Promise((resolve, reject) => {
findGunStatus({
oilSiteId: this.userInfo.stationId
}).then(res => {
let allGun = {
pkId: -1,
};
this.gunList = [allGun, ...res.data.list];
return resolve(res.data.list);
})
})
};
showPayCode(item) {
this.orderItem = item;
this.$refs.payCode.openPopup({
orderId: item.orderId,
orderNum: item.orderNum,
txnAmt: item.priceTotal
});
};
onPullDownRefresh() {
this.refreshData();
};
refreshData() {
this.orderList = [];
this.getOrderData();
};
showSearchCardPopup(item) {
this.orderItem = item;
this.$refs.searchCardPopup.openCardSearch();
this.showPopup = true;
};
morePay(item) {
this.$Router.push({
name: "payOrder",
params: {
orderId: item.orderId
}
})
};
/*移动支付回调*/
payCodeSuccess(params) {
this.orderList = [];
this.getOrderData();
this.$Router.push({
name: "paySuccess",
params: {
orderNum: params.orderNum
}
})
};
searchCardCallBack(params) {
setTimeout(()=>{
this.showPopup = false;
},500)
/* 防止在其他页面执行回调 */
this.showPopup && this.$Router.push({
name: "payOrder",
params: {
orderId: this.orderItem.orderId,
cardId: params.cardId
}
})
};
toWechartPay(item) {
this.$Router.push({
name: "payOrder",
params: {
orderId: item.orderId,
payType: PayTypes.WECHAT.value
}
})
};
navigateToSupplementOrder() {
this.$Router.push({
name: "subsequentOrders",
query: { fromPage: 'orderList' }
});
};
// 跳转到更新界面
updateOrder(item) {
const params = {
orderId: Number(item.orderId),
howLiters: Number(item.howLiters),
priceTotal: Number(item.priceTotal),
createTime: String(item.createdate),
operatorName: this.$store.getters.user.userInfo.userName,
unitPrice: Number(item.unitPrice),
};
const updateStr = encodeURIComponent(JSON.stringify(params));
uni.navigateTo({
url: `/pages/supplementOrder/updateOrder/index?updateStr=${updateStr}`,
});
};
// 加载车牌付订单
loadPlateOrders() {
// 保存当前所有未提交的修改
this.preserveTempStates();
findPosList({
vehicleId: this.vehicleId,
siteId: this.userInfo.stationId,
}).then((res) => {
uni.stopPullDownRefresh();
// const newOrders = res.resultData || []
const newOrders = [
// 未支付 未选择枪号1
{
id:'1',
plateNumber:'京GDF999',
oilName:'92#',
memberId: "SIMP15703808278",
phone:'15703808278',
accountBalance:'1000.00',
chooseGunCodes:[1,2],
createDate:'2025-09-12 10:18:55',
position:'1号
加油机',
amount:'',
liters:'',
paidAmount:'',
settleStatus:0,
selectedGun:'',
},
// 未支付 未选择枪号2
{
id:'9',
plateNumber:'京GDF888',
oilName:'92#',
memberId: "",
phone:'15703808278',
accountBalance:'1000.00',
chooseGunCodes:[1,2],
createDate:'2025-09-12 10:18:55',
position:'2号
加油机',
amount:'',
liters:'',
paidAmount:'',
settleStatus:0,
selectedGun:'',
},
// 未支付 已选择枪号
{
id:'2',
plateNumber:'京GDF999',
oilName:'92#',
memberId: "",
phone:'15703808278',
accountBalance:'1000.00',
chooseGunCodes:[1,2],
createDate:'2025-09-12 10:18:55',
position:'1号
加油机',
amount:'',
liters:'',
paidAmount:'',
settleStatus:0,
selectedGun:2,
},
// 进行中
{
id:'3',
plateNumber:'京GDF999',
oilName:'92#',
memberId: "",
phone:'15703808278',
accountBalance:'1000.00',
chooseGunCodes:[1,2],
createDate:'2025-09-12 10:18:55',
position:'1号
加油机',
amount:'',
liters:'',
paidAmount:'',
settleStatus:3,
selectedGun:2,
},
// 已支付 支付成功
{
id:'4',
plateNumber:'京NE8863',
oilName:'92#',
memberId: "",
phone:'15703808278',
accountBalance:'1000.00',
chooseGunCodes:[1,2],
createDate:'2025-09-12 10:18:55',
position:'1号
加油机',
amount:'',
liters:'20',
paidAmount:'',
settleStatus:1,
selectedGun:2,
},
// 支付失败
{
id:'5',
plateNumber:'京GDF999',
oilName:'92#',
memberId: "",
phone:'15703808278',
accountBalance:'1000.00',
chooseGunCodes:[1,2],
createDate:'2025-09-12 10:18:55',
position:'1号
加油机',
amount:'',
liters:'',
paidAmount:'',
settleStatus:2,
selectedGun:1,
remark:'账户余额不足',
},
]
//更新数据并恢复状态
this.plateOrders = this.mergeWithTempStates(newOrders)
this.unPayNum = res.data.unPayNum
})
}
// 保存所有临时状态到Map
preserveTempStates() {
this.plateOrders.forEach(order => {
if (order.tempSelectedGun !== undefined && order.tempSelectedGun !== null) {
// 使用订单ID作为唯一键
this.tempGunSelections.set(order.id, order.tempSelectedGun);
// 标记为有未保存修改
if (order.tempSelectedGun !== order.selectedGun) {
this.pendingChanges.add(order.id);
}
}
});
}
// 合并新数据与临时状态
mergeWithTempStates(newOrders) {
return newOrders.map(order => {
// 检查是否有未保存的临时状态
if (this.tempGunSelections.has(order.id)) {
const tempGun = this.tempGunSelections.get(order.id);
return {
...order,
tempSelectedGun: tempGun,
// 添加修改标记
hasPendingChanges: this.pendingChanges.has(order.id)
};
}
// 没有临时状态则返回原始数据
return { ...order, hasPendingChanges: false };
});
}
// 选择枪号
selectGun(order, gun) {
// 更新UI
this.$set(order, 'tempSelectedGun', gun);
// 立即存储到状态Map
this.tempGunSelections.set(order.id, gun);
// 标记为有未保存修改
if (gun !== order.selectedGun) {
this.pendingChanges.add(order.id);
} else {
this.pendingChanges.delete(order.id);
}
}
// 确认枪号选择
async confirmGunSelection(order) {
if (!order.tempSelectedGun) {
uni.showToast({ title: '请先选择枪号', icon: 'none' });
return;
}
try {
// 调用API保存修改
await updateGunCode({
id: order.id,
gunCode: order.tempSelectedGun
});
// 更新本地状态
this.$set(order, 'selectedGun', order.tempSelectedGun);
this.$set(order, 'tempSelectedGun', null);
this.$set(order, 'hasPendingChanges', false);
// 清除临时状态
this.tempGunSelections.delete(order.id);
this.pendingChanges.delete(order.id);
uni.showToast({ title: '操作成功' });
} catch (error) {
uni.showToast({ title: '操作失败', icon: 'none' });
}
}
// 修改枪号
modifyGun(order) {
console.log(order);
const orderInfo = encodeURIComponent(JSON.stringify(order));
uni.navigateTo({
// url: `/pages/modifyGun/index?orderId=${order.id}`,
url: `/pages/modifyGun/index?order=${orderInfo}`,
events: {
updateGun: (gunNumber) => {
order.selectedGun = gunNumber;
}
}
});
};
// 取消车牌付
cancelPlatePay(order){
uni.showModal({
title: '提示',
content: '确认取消车牌付吗?',
icon: "none",
showCancel: true,
confirmText: '确认',
success: (res) => {
if (res.confirm) {
order.settleStatus = -1
cancelCamera(order.id).then((res) => {
uni.showToast({ title: '已取消' });
})
}
}
})
}
startAutoRefresh() {
// 清除可能存在的旧定时器
this.clearAutoRefresh();
// 设置新定时器，每5秒执行一次
this.refreshTimer = setInterval(() => {
this.loadPlateOrders();
}, 2000);
}
clearAutoRefresh() {
if (this.refreshTimer) {
clearInterval(this.refreshTimer);
this.refreshTimer = null;
}
}
}
</script>
<style scoped lang="scss">
.gun-item-content {
display: flex;
align-items: center;
margin: 10px;
.gun-item-active text {
background-color: #3592EF;
color: #ffffff;
}
text {
background-color: #ffffff;
text-align: center;
width: 60px;
font-size: 16px;
margin-right: 10px;
border-radius: 3px;
display: inline-block;
padding: 5px 15px;
}
}
.order-list-content {
padding: 15px;
background-color: #ffffff;
margin: 0 10px 10px 10px;
//height: 250px;
.order-cell {
margin: 3px 0;
font-size: 15px;
}
.list-title {
flex: 1;
}
}
.uv-nav-slot{
position: relative;
}
::v-deep .uv-subsection__item__text {
font-size: 14px !important;
}
/* 新增车牌付订单样式 */
.plate-order-container {
padding: 10px;
.order-card {
background: #fff;
border-radius: 8px;
padding: 15px;
margin-bottom: 10px;
position: relative;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
font-size: 14px;
color: #212121 !important;
.order-item {
margin:4px 0;
}
.order-item-l {
flex-basis: 60%;
margin:4px 0;
}
.order-item-s {
flex-basis: 40%;
margin:4px 0;
}
.status-tag {
position: absolute;
width: 48px;
top: 10px;
right: -10px;
color: white;
padding: 3px 10px;
border-radius: 3px;
transform: rotate(45deg);
font-size: 12px;
text-align: center;
}
.selected-gun {
display: flex;
align-items: center;
}
.tip-text {
font-size: 12px;
color: #fa5151;
}
}
.paid-order .status-tag {
background: #40a0ffd8;
}
.failed-order .status-tag {
background: #d9001988;
}
.in-progress-order .status-tag {
background: #f59a23c9;
}
.gun-selection {
display: flex;
flex-basis: 100%;
align-items: center;
margin:4px 0;
}
}
.box-search {
display: flex;
align-items: center;
}
</style>
扫一扫
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
