xinyi/chuangte_bike_newxcx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c14d41317b
chuangte_bike_newxcx/page_shanghu/guanli/admin_order.vue

666 lines
15 KiB
Vue
Raw Normal View History

新电动车
2025-04-01 21:35:30 +08:00
<template>
<view class="page">
<u-navbar :is-back="false" title="订单管理" :border-bottom="false" :background="bgc" title-color='#2E4975'
title-size='36' height='45'></u-navbar>
<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;">
<view class="left_text" @click="shows=true">
{{tit}}
<view class="iconfont icon-xiangxia1"></view>
</view>
<view class="sear_ipt">
<input type="text" v-model="searchKeyword" placeholder="请输入内容" class="input"
placeholder-style="color:#C7CDD3" @input="search()">
</view>
</view>
<view class="tap">
<view class="tap_cont " :class="zhuangtai==''?'act1':''" @click="changeidx('')">
全部
</view>
<view class="tap_cont" :class="zhuangtai=='PROCESSING'?'act1':''" @click="changeidx('PROCESSING')">
进行中
</view>
<view class="tap_cont" :class="zhuangtai=='WAIT_PAY'?'act1':''" @click="changeidx('WAIT_PAY')">
待支付
</view>
<view class="tap_cont" :class="zhuangtai=='FINISHED'?'act1':''" @click="changeidx('FINISHED')">
已完成
</view>
</view>
<u-mask :show="show" :z-index='100' />
<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>
<scroll-view class="warp_box" @scrolltolower="handqixing" scroll-y>
<view class="swiper-item ">
<view class="card" v-for="(item,index) in allList" :key="index" @click="toOrderDetail(item.deviceSn,item.id)">
<view class="line"></view>
<view class="top_info">
<view class="top_info_left">
订单编号：{{item.no}}
</view>
<view class="top_info_right" v-if="item.status=='PROCESSING'">
<view class="yuan"></view>
进行中
</view>
<view class="top_info_right" v-if="item.status== 'WAIT_PAY'"
style="color: orangered;">
<view class="yuan" style="background: orangered;"></view>
待支付
</view>
<view class="top_info_right" v-if="item.status=='FINISHED'" style="color: green;">
<view class="yuan" style="background: green;"></view>
已完成
</view>
</view>
<view class="lines"></view>
<view class="order_info">
<view class="info_li">
<view class="half_info_li">
租赁用户：<span>{{item.userName}}</span>
</view>
</view>
<view class="info_li">
<view class="half_info_li">
新版电动车
2025-04-10 08:57:21 +08:00
车辆编号：<span>{{item.deviceSn == null ? '--' : item.deviceSn}}</span>
新电动车
2025-04-01 21:35:30 +08:00
</view>
<view class="half_info_li">
租赁时长：<span>{{computedList(item.duration)}}</span>
</view>
</view>
<view class="info_li">
<view class="half_info_li">
订单费用：<span>{{item.totalFee}}元</span>
</view>
<view class="half_info_li">
有无退款：<span v-if="item.payRefunded>0" style="color: red;">有</span>
<span v-else>无</span>
</view>
</view>
<view class="info_li">
<view class="half_info_li">
开始时间：<span>{{formatDate(item.startTime)}}</span>
</view>
<view class="half_info_li" v-if="item.deviceVehicleNum">
车牌号：<span>{{item.deviceVehicleNum}}</span>
</view>
<view class="half_info_li" v-else>
车牌号：<span>--</span>
</view>
</view>
</view>
</view>
<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 30rpx;">
当前没有更多订单啦...
</view>
</view>
</scroll-view>
<u-select v-model="shows" :list="list" title='添加方式' @confirm="searchconfirm"></u-select>
<TabBar :indexs='3' style=""></TabBar>
</view>
</template>
<script>
import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue';
let timerId;
let timerId1;
export default {
components: {
TabBar
},
data() {
return {
bgc: {
backgroundColor: "#F7FAFE",
},
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
pickertime: '',
time1: false,
time2: false,
lasTime: '',
firsTime: '',
searchKeyword: '',
curtitidx: '',
swiperHeight: 400,
allList: [],
ingList: [],
reprement: [],
alreadyList: [],
show: false,
showfz: false,
showgj: false,
showtk: false,
orderInfo: {},
新版电动车
2025-04-10 08:57:21 +08:00
initialValues: {},
新电动车
2025-04-01 21:35:30 +08:00
areaId: false,
tit: '车牌号',
shows: false,
list: [{
value: '1',
label: '手机号'
},
{
value: '2',
label: '车牌号'
}],
typeidx: '2',
passList: [],
dispatchFee: 0,
manageFee: 0,
ridingFee: 0,
appointmentFee: 0,
reason: '',
pageNum: 1,
isback: false,
zhuangtai:'',
新版电动车
2025-04-10 08:57:21 +08:00
total:'',
wateringListone:[]
新电动车
2025-04-01 21:35:30 +08:00
}
},
新版电动车
2025-04-10 08:57:21 +08:00
onLoad() {
新电动车
2025-04-01 21:35:30 +08:00
if (uni.getStorageSync('adminAreaid')) {
this.areaId = uni.getStorageSync('adminAreaid')
this.orderList()
}
},
新版电动车
2025-04-10 08:57:21 +08:00
onShow() {
// if (uni.getStorageSync('adminAreaid')) {
// this.areaId = uni.getStorageSync('adminAreaid')
// this.orderList()
// // this.getArea()
// }
},
新电动车
2025-04-01 21:35:30 +08:00
watch: {
},
computed: {
userId() {
return this.$store.getters.userId;
},
},
computed: {
},
onReachBottom() {
},
methods: {
handqixing() {
新版电动车
2025-04-10 08:57:21 +08:00
console.log(this.total,this.allList.length);
新电动车
2025-04-01 21:35:30 +08:00
if(this.total > this.allList.length){
this.orderList()
}
},
formatDate(value) {
if (!value) return ''
let date = new Date(value)
let month = date.getMonth() + 1 // 月份从0开始计数，所以加1
let day = date.getDate()
let hours = date.getHours()
let minutes = date.getMinutes()
// 确保月份、日期、小时和分钟都是两位数
month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
hours = hours < 10 ? '0' + hours : hours
minutes = minutes < 10 ? '0' + minutes : minutes
return `${month}-${day} ${hours}:${minutes}`
},
searchconfirm(e) {
this.typeidx = e[0].value
this.tit = e[0].label
},
computedList(seconds, showSeconds = true) {
if (isNaN(seconds)) return "--";
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
const parts = [];
if (h > 0) parts.push(`${h}时`);
if (m > 0 || h > 0) parts.push(`${m}分`); // 如果有小时则始终显示分钟
if (showSeconds) parts.push(`${s}秒`);
return parts.join("") || "0钟";
},
toOrderDetail(id,orid) {
uni.navigateTo({
url: '/page_shanghu/guanli/order_detail?id=' + id + '&orid=' + orid
})
},
checkAndUpdate(key) {
clearTimeout(timerId)
timerId = setTimeout(() => {
let inputValue = parseFloat(this.orderInfo[key]);
let initialValue = parseFloat(this.initialValues[key]);
if (inputValue > initialValue) {
this.orderInfo[key] = initialValue;
}
}, 500)
},
showtks(item) {
this.orderInfo = item
this.show = true
this.showtk = true
this.initialValues.dispatchFee = this.orderInfo.dispatchFee
this.initialValues.manageFee = this.orderInfo.manageFee
this.initialValues.ridingFee = this.orderInfo.ridingFee
this.initialValues.appointmentFee = this.orderInfo.appointmentFee
},
closetk() {
this.show = false
this.showtk = false
this.orderInfo = {}
},
showgjs(item) {
this.orderInfo = item
this.show = true
this.showgj = true
},
closegj() {
this.show = false
this.showgj = false
this.orderInfo = {}
},
showfzs(item) {
this.orderInfo = item
this.show = true
this.showfz = true
},
orderList() {
新版电动车
2025-04-10 08:57:21 +08:00
let data = {}
新电动车
2025-04-01 21:35:30 +08:00
if (this.typeidx == 1) {
data = {
新电动车
2025-04-11 18:23:16 +08:00
userPhone: this.searchKeyword,
新电动车
2025-04-01 21:35:30 +08:00
status: this.zhuangtai,
createDateRange:this.firsTime == '' ? '' : this.lasTime == '' ? '' : this.firsTime + ',' + this.lasTime,
areaId: this.areaId,
pageSize: 20,
新电动车
2025-04-12 18:01:40 +08:00
pageNum: this.pageNum,
isAsc:'desc',
orderByColumn:'createTime'
新电动车
2025-04-01 21:35:30 +08:00
};
} else if (this.typeidx == 2) { // 修改条件为 this.typeidx == 2
data = {
新电动车
2025-04-11 18:23:16 +08:00
deviceVehicleNum: this.searchKeyword,
新电动车
2025-04-01 21:35:30 +08:00
type: '1',
status:this.zhuangtai,
createDateRange:this.firsTime == '' ? '' : this.lasTime == '' ? '' : this.firsTime + ',' + this.lasTime,
areaId: this.areaId,
pageSize: 20,
新电动车
2025-04-12 18:01:40 +08:00
pageNum: this.pageNum,
isAsc:'desc',
orderByColumn:'createTime'
新电动车
2025-04-01 21:35:30 +08:00
};
}
this.$u.get('/bst/order/list?', data).then((res) => {
if (res.code === 200) {
this.total = res.total
if(this.pageNum == 1){
this.allList = res.rows
}else{
this.allList = this.allList.concat(res.rows)
}
this.pageNum++
this.curtitidx = 0
this.$forceUpdate()
}
})
},
async changeidx(idx) {
this.zhuangtai = idx
this.pageNum = 1
this.allList = []
this.ingList = []
this.reprement = []
this.alreadyList = []
this.orderList()
},
confirm1(e) {
console.log(e, 'eeeeeeee');
this.firsTime = e.year + '-' + e.month + '-' + e.day
this.pageNum = 1
this.orderList()
},
confirm2(e) {
this.lasTime = e.year + '-' + e.month + '-' + e.day
this.pageNum = 1
this.orderList()
},
search() {
this.pageNum = 1
this.allList = []
this.ingList = []
this.reprement = []
this.alreadyList = []
新版电动车
2025-04-10 08:57:21 +08:00
clearTimeout(timerId1)
新电动车
2025-04-01 21:35:30 +08:00
timerId1 = setTimeout(() => {
this.pageNum = 1
this.orderList()
}, 500)
// 根据关键字过滤 this.classlist
},
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.page {
width: 750rpx;
.tip_box {
position: fixed;
left: 72rpx;
top: 628rpx;
width: 610rpx;
background: #FFFFFF;
border-radius: 30rpx 30rpx 30rpx 30rpx;
z-index: 110;
padding-bottom: 100rpx;
.top {
padding: 52rpx 38rpx 42rpx 36rpx;
.ipt_box {
margin-top: 22rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.text {
width: 350rpx;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
}
.ipt {
padding: 10rpx 18rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 26rpx;
width: 420rpx;
height: 64rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx solid #979797;
.input {
width: 80%;
}
}
}
.tip {
width: 100%;
text-align: center;
font-weight: 700;
font-size: 32rpx;
color: #3D3D3D;
}
.txt {
margin-top: 32rpx;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
}
.bot {
position: absolute;
width: 610rpx;
display: flex;
flex-wrap: nowrap;
bottom: -20rpx;
.bot_left {
border-radius: 0rpx 0rpx 0rpx 30rpx;
width: 50%;
height: 86rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
background: #EEEEEE;
}
.bot_right {
border-radius: 0rpx 0rpx 30rpx 0rpx;
width: 50%;
height: 86rpx;
background: #4C97E7;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-weight: 500;
font-size: 32rpx;
}
}
}
.warp_box {
height: 61vh;
overflow: scroll;
.swiper-item {
.card {
margin: 16rpx auto;
width: 750rpx;
background: #fff;
.btn_box {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
height: 96rpx;
.btn {
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 36rpx;
color: #3D3D3D;
width: 49%;
}
.btn_line {
width: 0rpx;
height: 51rpx;
border: 2rpx solid #4C97E7;
}
}
.order_info {
padding: 0rpx 30rpx;
display: flex;
flex-wrap: wrap;
.info_li {
display: flex;
flex-wrap: nowrap;
width: 100%;
font-weight: 400;
font-size: 28rpx;
color: #808080;
.half_info_li:first-child {
width: 60%;
}
.half_info_li {
width: 40%;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span{
color: #000;
}
}
}
}
.line {
width: 750rpx;
height: 22rpx;
background: #F6F6F6;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.lines {
width: 750rpx;
height: 2rpx;
background: #f7f7f7;
}
.top_info {
padding: 24rpx 32rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.top_info_left {
width: 70%;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
font-weight: 600;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.top_info_right {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-left: auto;
.yuan {
margin-right: 12rpx;
border-radius: 50%;
width: 14rpx;
height: 14rpx;
background: #4C97E7;
}
font-weight: 400;
font-size: 28rpx;
color: #4C97E7;
}
}
}
}
}
.tap {
margin-top: 24rpx;
width: 750rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
.tap_cont {
text-align: center;
padding-bottom: 15rpx;
width: 100rpx;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
border-bottom: 6rpx solid #fff;
}
.act1 {
border-bottom: 6rpx solid #4C97E7;
color: #4C97E7;
}
}
.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>
Reference in New Issue Copy Permalink