540 lines
14 KiB
Vue
540 lines
14 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :is-back="false" title="订单管理" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
|
|
height='40' id="navbar">
|
|
</u-navbar>
|
|
<image class="imgbj" src="https://api.ccttiot.com/smartmeter/img/static/uPH2JsGAqk9GoRjh1xzc" mode=""></image>
|
|
<view class="tab">
|
|
<view :class="tabindex == index ? 'active' : ''" @click="btntab(index,item)" v-for="(item,index) in tablist" :key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
<view class="dingdantab">
|
|
<view :class="dingdanindex == index ? 'actives' : ''" @click="btndingdan(index,item)" v-for="(item,index) in dingdanlist" :key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
<view class="list" @touchstart="touchStart" @touchend="touchEnd">
|
|
<view class="list_item" v-for="(item,index) in orderlist" :key="index" @click="btnxq(item.orderNo)">
|
|
<view class="rts" v-if="item.status == 0"><text>订单状态</text> <text class="ones">待支付</text></view>
|
|
<view class="rts" v-if="item.status == 1"><text>订单状态</text> <text class="ones">支付中</text></view>
|
|
<view class="rts" v-if="item.status == 2"><text>订单状态</text> <text class="ones">待使用</text></view>
|
|
<view class="rts" v-if="item.status == 3"><text>订单状态</text> <text class="ones">使用中</text></view>
|
|
<view class="rts" v-if="item.status == 4"><text>订单状态</text> <text class="ones">已完成</text></view>
|
|
<view class="rts" v-if="item.status == 5"><text>订单状态</text> <text class="ones">超时自动取消</text></view>
|
|
<view class="rts" v-if="item.status == 6"><text>订单状态</text> <text class="ones">用户取消订单</text></view>
|
|
<view class="rts" v-if="item.status == 7"><text>订单状态</text> <text class="ones">退款中</text></view>
|
|
<view class="rts" v-if="item.status == 8"><text>订单状态</text> <text class="ones">已退款</text></view>
|
|
<view class="top">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uHTgf2Yc0BZOrRa2hmeO" mode=""></image>
|
|
<text>{{item.reserveStartTime == null ? '--' : item.reserveStartTime.slice(0, -3)}} 至 {{item.reserveEndTime == null ? '--' : item.reserveEndTime.slice(0, -3)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="one">
|
|
<view class="lt">
|
|
<text>{{item.storeName == null ? '--' : item.storeName}}</text>
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u352aUHWOyVljMQpAjqT" mode=""></image>
|
|
</view>
|
|
<view class="rt">
|
|
订单号：{{item.orderNo == null ? '--' : item.orderNo}}
|
|
</view>
|
|
</view>
|
|
<view class="two">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ulun23wQhiiETNXRlAu4" mode=""></image>
|
|
<view class="shuo">
|
|
<view class="">
|
|
预定包厢
|
|
</view>
|
|
<view class="" style="margin: 28rpx 0;">
|
|
预定时长
|
|
</view>
|
|
<view class="">
|
|
订单费用
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rt">
|
|
<view class="">
|
|
{{item.roomName == null ? '--' : item.roomName}}
|
|
</view>
|
|
<view class="" style="margin: 28rpx 0;">
|
|
{{item.hours}}小时
|
|
</view>
|
|
<view class="">
|
|
￥{{(item.price / item.hours).toFixed(2)}}/小时
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="thr">
|
|
实际支付：<text>￥{{item.price}}</text>
|
|
</view>
|
|
<view class="fou">
|
|
<view class=""></view>
|
|
<view class="quxiao" v-if="item.status == 0 || item.status == 1 || item.status == 2 || item.status == 3">
|
|
<text v-if="item.status == 3" @click.stop="btnjies(item.orderNo)">结束订单</text>
|
|
<text v-else @click.stop="btnqux(item.orderNo)">取消订单</text>
|
|
</view>
|
|
<view class="lianxi" @click.stop="btntelshop(item.managerPhone)" v-if="item.status == 0 || item.status == 1 || item.status == 2 || item.status == 3">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uoER3VKO0LjcbyaViX9P" mode=""></image>
|
|
联系店长
|
|
</view>
|
|
<view class="chaxq">
|
|
查看详情
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100%;text-align: center;margin-top: 100rpx;font-size: 34rpx;color: #ccc;">
|
|
没有更多订单啦，快去下单吧...
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "",
|
|
},
|
|
tablist:[
|
|
{name:'全部',value:''},
|
|
{name:'待使用',value:'1,2'},
|
|
{name:'使用中',value:'3'},
|
|
{name:'已完成',value:'4,7,8'},
|
|
{name:'已取消',value:'5,6'},
|
|
],
|
|
tabindex:0,
|
|
dingdanindex:0,
|
|
dingdanlist:[
|
|
{name:'茶室订单',value:'1'},
|
|
{name:'加时订单',value:'2'},
|
|
{name:'货柜订单',value:'3'},
|
|
],
|
|
orderlist:[],
|
|
type:'1',
|
|
statusarr:'',
|
|
pagesum:1,
|
|
pagesize:10,
|
|
touchStartX: 0, // 触屏起始点x
|
|
touchStartY: 0, // 触屏起始点y
|
|
xiaflag:true,
|
|
total:'',
|
|
qingqiuflag:true
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.pagesum = 1
|
|
this.orderlist = []
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
// 按下上拉到底部进行请求
|
|
touchStart(e) {
|
|
this.touchStartX = e.touches[0].clientX;
|
|
this.touchStartY = e.touches[0].clientY;
|
|
},
|
|
// 松开
|
|
touchEnd(e) {
|
|
let deltaX = e.changedTouches[0].clientX - this.touchStartX;
|
|
let deltaY = e.changedTouches[0].clientY - this.touchStartY;
|
|
if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
|
|
if (deltaX >= 0) {
|
|
// console.log("左滑")
|
|
} else {
|
|
// console.log("右滑")
|
|
}
|
|
} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
|
|
if (deltaY < 100) {
|
|
if(this.qingqiuflag == true){
|
|
let sum = (this.pagesum - 1) * this.pagesize
|
|
console.log(sum,this.total);
|
|
if (this.total > sum) {
|
|
this.qingqiuflag = false
|
|
this.getlist()
|
|
}
|
|
}
|
|
} else {
|
|
console.log("下滑")
|
|
}
|
|
}
|
|
},
|
|
|
|
// 请求订单列表
|
|
getlist(){
|
|
this.$u.get(`/app/order/myOrderList?type=${this.type}&statusList=${this.statusarr}&pageNum=${this.pagesum}&pageSize=${this.pagesize}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.xiaflag = true
|
|
this.total = res.total
|
|
if (this.pagesum > 1) {
|
|
this.pagesum++
|
|
this.orderlist = this.orderlist.concat(res.rows)
|
|
this.qingqiuflag = true
|
|
} else {
|
|
this.pagesum++
|
|
this.orderlist = res.rows
|
|
this.qingqiuflag = true
|
|
}
|
|
console.log(this.orderlist);
|
|
}else if(res.code == 401){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您该操作需登录，是否前去登录？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url:'/pages/login/index'
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 切换tab
|
|
btntab(index,item){
|
|
this.pagesum = 1
|
|
this.orderlist = []
|
|
this.tabindex = index
|
|
this.statusarr = item.value
|
|
this.getlist()
|
|
},
|
|
// 切换订单筛选
|
|
btndingdan(index,item){
|
|
this.pagesum = 1
|
|
this.orderlist = []
|
|
this.dingdanindex = index
|
|
this.type = item.value
|
|
this.getlist()
|
|
},
|
|
// 点击跳转到详情页
|
|
btnxq(orderNo){
|
|
uni.navigateTo({
|
|
url:'/page_user/dingdanxq?orderNo=' + orderNo
|
|
})
|
|
},
|
|
// 点击结束订单
|
|
btnjies(orderNo){
|
|
let orderNos = orderNo
|
|
let that = this
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您确定要结束该订单吗?',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
let data = {
|
|
orderNo:orderNos,
|
|
type:2
|
|
}
|
|
that.$u.post(`/app/order/orderCancel?orderNo=${orderNos}&type=2`,data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '结束成功',
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
that.getlist()
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 点击取消订单
|
|
btnqux(orderNo){
|
|
let orderNos = orderNo
|
|
let that = this
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您确定要取消该订单吗?',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
let data = {
|
|
orderNo:orderNos,
|
|
type:1
|
|
}
|
|
that.$u.post(`/app/order/orderCancel?orderNo=${orderNos}&type=1`,data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
that.getlist()
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 点击联系店长拨打电话
|
|
btntelshop(managerPhone){
|
|
uni.makePhoneCall({
|
|
phoneNumber: managerPhone,
|
|
success: function(res) {
|
|
console.log('拨打电话成功', res)
|
|
},
|
|
fail: function(err) {
|
|
console.error('拨打电话失败', err)
|
|
uni.showToast({
|
|
title: '取消拨打电话',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.active{
|
|
border-bottom: 8rpx solid #48893B;
|
|
font-weight: 600 !important;
|
|
font-size: 32rpx !important;
|
|
color: #3D3D3D !important;
|
|
}
|
|
.actives{
|
|
background: #DEF1DA;
|
|
color: #48893B !important;
|
|
}
|
|
page {
|
|
background-color: #fff;
|
|
.list{
|
|
padding: 0 38rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-height: 1040rpx;
|
|
overflow: scroll;
|
|
padding-bottom: 50rpx;
|
|
.list_item{
|
|
padding: 20rpx 18rpx;
|
|
box-sizing: border-box;
|
|
width: 674rpx;
|
|
max-height: 690rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
margin-top: 24rpx;
|
|
.fou{
|
|
display: flex;
|
|
margin-top: 36rpx;
|
|
justify-content: space-between;
|
|
padding-left: 72rpx;
|
|
box-sizing: border-box;
|
|
.chaxq{
|
|
width: 172rpx;
|
|
height: 50rpx;
|
|
background: #48893B;
|
|
border-radius: 29rpx 29rpx 29rpx 29rpx;
|
|
border: 1rpx solid #48893B;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
}
|
|
.quxiao{
|
|
width: 172rpx;
|
|
height: 50rpx;
|
|
border-radius: 29rpx 29rpx 29rpx 29rpx;
|
|
border: 1rpx solid #48893B;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
font-size: 28rpx;
|
|
color: #48893B;
|
|
}
|
|
.lianxi{
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 189rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
border-radius: 29rpx 29rpx 29rpx 29rpx;
|
|
border: 1rpx solid #48893B;
|
|
font-size: 28rpx;
|
|
color: #48893B;
|
|
image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
.thr{
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
margin-top: 26rpx;
|
|
text{
|
|
font-weight: 600;
|
|
font-size: 44rpx;
|
|
}
|
|
}
|
|
.two{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
padding-bottom: 30rpx;
|
|
box-sizing: border-box;
|
|
.lt{
|
|
display: flex;
|
|
image{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-right: 40rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.shuo{
|
|
view{
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
.rt{
|
|
text-align: right;
|
|
view{
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
.one{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 22rpx;
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
padding-bottom: 24rpx;
|
|
box-sizing: border-box;
|
|
.lt{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
image{
|
|
width: 14rpx;
|
|
height: 36rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.rt{
|
|
font-size: 24rpx;
|
|
color: #7C7C7C;
|
|
}
|
|
}
|
|
.rts{
|
|
width: 100%;
|
|
text-align: right;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-weight: 600;
|
|
.ones{
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #48893B;
|
|
}
|
|
}
|
|
.top{
|
|
width: 634rpx;
|
|
height: 90rpx;
|
|
background: #DEF1DA;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
.lt{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
image{
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dingdantab{
|
|
width: 674rpx;
|
|
height: 112rpx;
|
|
padding: 24rpx 30rpx;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: auto;
|
|
margin-top: 34rpx;
|
|
view{
|
|
width: 198rpx;
|
|
height: 64rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
text-align: center;
|
|
line-height: 64rpx;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #7C7C7C;
|
|
}
|
|
}
|
|
.tab{
|
|
width: 100%;
|
|
padding: 0 54rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
margin-top: 42rpx;
|
|
view{
|
|
padding-bottom: 10rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
.imgbj{
|
|
width: 750rpx;
|
|
height: 346rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
|
|
</style> |