520 lines
11 KiB
Vue
520 lines
11 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="订单管理" :border-bottom="false" :background="bgc" title-color='#000'
|
|
title-size='36' height='45'></u-navbar>
|
|
<view class="top">
|
|
<view class="top_box">
|
|
<view class="left_text">
|
|
时间范围
|
|
</view>
|
|
<view class="timebox">
|
|
<view class="left_time" @click="time1=true">
|
|
{{firsTime}}
|
|
</view>
|
|
-
|
|
<view class="right_time" @click="time2=true">
|
|
{{lasTime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="top_box" style="margin-top: 20rpx;">
|
|
<image src="https://lxnapi.ccttiot.com/bike/img/static/u9UrXmvCyDk2IGqEWGvw" mode=""
|
|
style="width: 44rpx;height: 44rpx;margin-right: 22rpx;"></image>
|
|
<view class="sear_ipt">
|
|
<input type="text" v-model="searchKeyword" placeholder="请输入内容" class="input"
|
|
placeholder-style="color:#C7CDD3" @input="search()">
|
|
</view>
|
|
</view>
|
|
<view class="tab_box">
|
|
<view class="tab_li " v-for="(item,index) in tablist" :key="index" :class="index==tabindex?'act1':''" @click="changeTab(item,index)">
|
|
{{item.label}}
|
|
<view class="line "></view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="order_cont">
|
|
<view class="order_card" v-for="(item,index) in orderList" :key="index" @click.stop="todetal(item)">
|
|
<view class="order_li">
|
|
<view class="txt">
|
|
{{item.model}}
|
|
</view>
|
|
<view class="txt3" :style="{ color: typeReturn(item.status).color }">
|
|
{{ typeReturn(item.status).text }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order_li">
|
|
<view class="txt2">
|
|
用户：{{item.realName}} {{item.phone}}
|
|
</view>
|
|
<view class="type" @click.stop="callPhone(item.phone)">
|
|
联系用户
|
|
</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="order_li">
|
|
<view class="txt2">
|
|
取车时间：{{item.createTime}}
|
|
</view>
|
|
|
|
</view>
|
|
<view class="order_li">
|
|
<view class="txt2" v-if="item.type==1" style="color: #4297F3;">
|
|
订单类型：租车订单
|
|
</view>
|
|
<view class="txt2" v-if="item.type==2" style="color: red;">
|
|
订单类型：续租订单
|
|
</view>
|
|
</view>
|
|
<view class="order_li">
|
|
<view class="txt2">
|
|
还车时间：{{item.expiryTime}}
|
|
</view>
|
|
<view :class="{'txt3': true, 'red-text': calculateTimeRemaining(item.expiryTime) === '已超时'}"
|
|
v-if="item.status==4">
|
|
{{ calculateTimeRemaining(item.expiryTime) }}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="order_li">
|
|
<view class="price">
|
|
{{item.payFee}}元
|
|
</view>
|
|
<view class="btn" v-if="item.status==7" @click.stop="confirmReturn(item)">
|
|
确认还车
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" :default-time='pickertime'></u-picker>
|
|
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='pickertime'></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let timerId;
|
|
export default {
|
|
data() {
|
|
return {
|
|
lasTime: '',
|
|
firsTime: '',
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
time1: false,
|
|
time2: false,
|
|
lasTime: '',
|
|
firsTime: '',
|
|
searchKeyword: '',
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
orderList: [],
|
|
tabindex:0,
|
|
tabstause:'',
|
|
tablist: [{
|
|
value: '',
|
|
label: '全部'
|
|
},
|
|
{
|
|
value: '0',
|
|
label: '待支付'
|
|
},
|
|
// {
|
|
// value: '1',
|
|
// label: '待取'
|
|
// },
|
|
// {
|
|
// value: '2',
|
|
// label: '待送车'
|
|
// }, {
|
|
// value: '3',
|
|
// label: '配送中'
|
|
// },
|
|
{
|
|
value: '4',
|
|
label: '进行中'
|
|
}, {
|
|
value: '8',
|
|
label: '已结束'
|
|
}, {
|
|
value: '5',
|
|
label: '超时取消'
|
|
}, {
|
|
value: '6',
|
|
label: '已取消'
|
|
}, {
|
|
value: '7',
|
|
label: '待审核'
|
|
},
|
|
|
|
|
|
],
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getList()
|
|
|
|
},
|
|
|
|
methods: {
|
|
confirmReturn(item){
|
|
|
|
this.$u.post(`appVerify/merchantReturn?orderNo=` + item.orderNo).then((res) => {
|
|
if (res.code === 200) {
|
|
this.getList()
|
|
uni.showToast({
|
|
title: '操作成功',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
todetal(item){
|
|
uni.navigateTo({
|
|
url:'/pages_store/ordder/ordder_Detail?orderNo='+item.orderNo
|
|
})
|
|
},
|
|
changeTab(item,index){
|
|
this.tabindex=index
|
|
console.log(item,'aaa');
|
|
this.tabstause=item.value
|
|
this.getList(); // 调用实际的搜索功能
|
|
},
|
|
search() {
|
|
clearTimeout(timerId);
|
|
// 设置一个新的定时器，在滑动停止后 500ms 执行 getmarks 方法
|
|
timerId = setTimeout(() => {
|
|
this.getList(); // 调用实际的搜索功能
|
|
}, 500);
|
|
|
|
},
|
|
callPhone(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
})
|
|
|
|
},
|
|
getList() {
|
|
let data = {
|
|
|
|
status: this.tabstause,
|
|
startTime: this.firsTime,
|
|
endTime: this.lasTime,
|
|
keywords: this.searchKeyword
|
|
}
|
|
this.$u.get("appVerify/orderList?", data).then((res) => {
|
|
|
|
if (res.code == 200) {
|
|
|
|
this.orderList = res.data
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
returnType(num) {
|
|
if (num == 1) {
|
|
return '自行前往门店'
|
|
} else if (num == 2) {
|
|
return '上门取车'
|
|
}
|
|
},
|
|
returnBackType(num) {
|
|
if (num == 1) {
|
|
return ''
|
|
} else if (num == 2) {
|
|
return ''
|
|
}
|
|
},
|
|
typeReturn(num) {
|
|
let result = {
|
|
text: '',
|
|
color: '#4297F3' // 默认颜色
|
|
};
|
|
|
|
if (num == 0) {
|
|
result.text = '待支付';
|
|
result.color = '#F14C4C'; // 待支付颜色
|
|
} else if (num == 1) {
|
|
result.text = '待取车';
|
|
} else if (num == 2) {
|
|
result.text = '待送车';
|
|
} else if (num == 3) {
|
|
result.text = '送车中';
|
|
} else if (num == 4) {
|
|
result.text = '进行中';
|
|
} else if (num == 5) {
|
|
result.text = '超时取消';
|
|
result.color = '#ccc'; // 超时取消颜色
|
|
} else if (num == 6) {
|
|
result.text = '已取消';
|
|
result.color = '#ccc'; // 已取消颜色
|
|
} else if (num == 7) {
|
|
result.text = '已完成';
|
|
result.color = '#3D3D3D'; // 已完成颜色
|
|
} else if (num == 8) {
|
|
result.text = '已结束';
|
|
}
|
|
|
|
return result;
|
|
},
|
|
calculateTimeRemaining(expiryTime) {
|
|
const now = new Date();
|
|
const expiry = new Date(expiryTime);
|
|
const diff = expiry - now; // 毫秒差
|
|
|
|
if (diff < 0) {
|
|
return "已超时"; // 如果过期，返回相关信息
|
|
}
|
|
|
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
|
return `${hours}小时${minutes}分`;
|
|
},
|
|
confirm1(e) {
|
|
console.log(e, 'eeeeeeee');
|
|
this.firsTime = e.year + '-' + e.month + '-' + e.day
|
|
if (this.firsTime != '' && this.lasTime != '') {
|
|
this.getList()
|
|
}
|
|
|
|
},
|
|
confirm2(e) {
|
|
this.lasTime = e.year + '-' + e.month + '-' + e.day
|
|
// this.pageNum=1
|
|
if (this.firsTime != '' && this.lasTime != '') {
|
|
this.getList()
|
|
}
|
|
|
|
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #F7FAFE;
|
|
}
|
|
|
|
.page {
|
|
.order_cont {
|
|
.order_card {
|
|
margin: 0 auto;
|
|
margin-top: 18rpx;
|
|
width: 714rpx;
|
|
padding: 32rpx 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
.line {
|
|
margin-top: 22rpx;
|
|
width: 100%;
|
|
background: #D8D8D8;
|
|
height: 1rpx;
|
|
}
|
|
|
|
.order_li {
|
|
margin-top: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.price {
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #FF1C1C;
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 334rpx;
|
|
height: 58rpx;
|
|
background: #4297F3;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
|
border: 2rpx solid #4297F3;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.txt3 {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #4297F3;
|
|
}
|
|
|
|
.txt {
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.txt1 {
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #FF8C1E;
|
|
}
|
|
|
|
.txt2 {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.type {
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
border: 1rpx solid #4297F3;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #4297F3;
|
|
}
|
|
|
|
.red-text {
|
|
color: #FF1C1C;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
padding-top: 40rpx;
|
|
padding-bottom: 20rpx;
|
|
background: #FFFFFF;
|
|
.tab_box::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tab_box {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
margin-top: 48rpx;
|
|
padding: 0 38rpx;
|
|
overflow-x: auto; // 允许水平滚动
|
|
white-space: nowrap; // 防止子元素换行
|
|
|
|
.tab_li {
|
|
margin-right: 32rpx;
|
|
display: flex; // 使子元素水平排列
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
width: 130rpx;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #3B3838;
|
|
|
|
.line {
|
|
margin-top: 12rpx;
|
|
width: 66rpx;
|
|
height: 6rpx;
|
|
background: #fff;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
|
|
.act1 {
|
|
color: #4297F3;
|
|
|
|
.line {
|
|
background: #4297F3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top_box {
|
|
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
padding: 28rpx 30rpx;
|
|
// padding: 20rpx 0;
|
|
|
|
margin: 0 auto;
|
|
width: 672rpx;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
|
|
.left_text {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
width: 25%;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
|
|
.icon-xiangxia1 {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.timebox {
|
|
width: 75%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
margin-left: 34rpx;
|
|
|
|
.left_time {
|
|
text-align: center;
|
|
margin-right: 6rpx;
|
|
height: 50rpx;
|
|
width: 45%;
|
|
border: 2rpx solid #ccc;
|
|
border-radius: 12rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #979797;
|
|
}
|
|
|
|
.right_time {
|
|
text-align: center;
|
|
margin-left: 6rpx;
|
|
height: 50rpx;
|
|
width: 45%;
|
|
border: 2rpx solid #ccc;
|
|
border-radius: 12rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #979797;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</style> |