671 lines
18 KiB
Vue
671 lines
18 KiB
Vue
<template>
|
||
<view :data-theme='theme()' class="cg-order" :class="theme() || ''">
|
||
<navbar bg="#F6F7F9">
|
||
<template v-slot:content>
|
||
<view class="search-wrap2 d-b-c" style="margin-left: 30rpx;">
|
||
<view class="index-search t-c flex-1" style="border: none;background-color: #fff;border-radius: 36rpx;">
|
||
<span class="icon iconfont icon-sousuo"></span>
|
||
<input type="text" v-model="keyWord" class="flex-1 ml10 f30 gray3" value="" placeholder-class="f32 gray7"
|
||
placeholder="搜索场馆订单" confirm-type="search" @confirm="search()"/>
|
||
</view>
|
||
<!--<button class="btn ml10" @click="search()" type="default">搜索</button>-->
|
||
</view>
|
||
</template>
|
||
</navbar>
|
||
|
||
<view class="top-tabbar">
|
||
<!-- <view :class="state_active == 0 ? 'tab-item active' : 'tab-item'" @click="stateFunc('all')">全部订单</view>
|
||
<view :class="state_active == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">待付款</view>
|
||
<view :class="state_active == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">已预约</view>
|
||
<view :class="state_active == 3 ? 'tab-item active' : 'tab-item'" @click="stateFunc(3)">已完成</view>
|
||
<view :class="state_active == 4 ? 'tab-item active' : 'tab-item'" @click="stateFunc(4)">退订/退款</view> -->
|
||
<view :class="state_active == 0 ? 'tab-item active' : 'tab-item'" @click="stateFunc(0)">全部订单</view>
|
||
<view :class="state_active == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">待付款</view>
|
||
<view :class="state_active == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">已预约</view>
|
||
<view :class="state_active == 3 ? 'tab-item active' : 'tab-item'" @click="stateFunc(3)">进行中</view>
|
||
<view :class="state_active == 4 ? 'tab-item active' : 'tab-item'" @click="stateFunc(4)">已完成</view>
|
||
<view :class="state_active == 5 ? 'tab-item active' : 'tab-item'" @click="stateFunc(5)">退订/退款</view>
|
||
</view>
|
||
|
||
<view class="d-f a-i-c ball-type-box">
|
||
<view class="ball" :class="ballType == 1 ? 'active' : ''" @click="changeBallType(1)">网球</view>
|
||
<view class="ball" :class="ballType == 2 ? 'active' : ''" @click="changeBallType(2)">篮球</view>
|
||
</view>
|
||
<!--列表-->
|
||
<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
|
||
@scrolltolower="scrolltolowerFunc">
|
||
<view :class="topRefresh ? 'top-refresh open' : 'top-refresh'">
|
||
<view class="circle" v-for="(circle, n) in 3" :key="n"></view>
|
||
</view>
|
||
<view class="order-list">
|
||
<view class="item" v-for="(item, index) in listData" :key="index">
|
||
<view class="order-head d-b-c">
|
||
<view class="d-f a-i-c">
|
||
<!-- <text class="state-text">{{ item.order_source_text }}</text> -->
|
||
<text class="cg-name flex-1 fb" @click="toGround(item.ground_id)">{{ item.ground_name }}</text>
|
||
<image style="width: 48rpx;height: 48rpx;" src="@/static/icon/right.png" mode=""></image>
|
||
</view>
|
||
<view class="state cg-state">
|
||
<text class="red" v-if="item.order_status == 0">待付款</text>
|
||
<text style="color: #365A9A;" v-if="item.order_status == 1">已预约</text>
|
||
<text style="color: #606266;" v-if="item.order_status == 2">进行中</text>
|
||
<text style="color: #C9C9C9;" v-if="item.order_status == 3">已完成</text>
|
||
<text style="color: #C9C9C9;" v-if="item.order_status == 4">订单取消</text>
|
||
<text style="color: #606266;" v-if="item.order_status == 5">退款成功</text>
|
||
</view>
|
||
</view>
|
||
<!--一个商品显示-->
|
||
<view class="one-product d-s-c" @click="gotoOrder(item.id)">
|
||
<image :src="item.image" mode="aspectFill" style="width: 200rpx; height: 200rpx; border-radius: 10rpx;"></image>
|
||
<view class="flex-1">
|
||
<view class="pro-info cg-info2">订单号：{{ item.order_sn }}</view>
|
||
<view class="pro-info cg-info3">预约时间：{{ item.trade[0].day_title }}</view>
|
||
</view>
|
||
|
||
<!-- <view class="total-count">
|
||
<view class="left-shadow"></view>
|
||
<view class="price theme-price f22">
|
||
¥
|
||
<text class="f40 theme-price" v-if="item.order_source==80">
|
||
{{ (item.pay_price*1 + item.advance.pay_price*1).toFixed(2) }}
|
||
</text>
|
||
<text class="f40 theme-price" v-else>{{ item.pay_price }}</text>
|
||
</view>
|
||
<view class="count">共{{ item.product[0].total_num }}件</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="order-bts presale" v-if="item.order_source==80">
|
||
|
||
<template v-if="item.order_status.value != 21">
|
||
<view class="d-e-c">
|
||
<!-- 订单付款 -->
|
||
<template v-if="item.advance.pay_status.value == 20&&item.pay_status.value == 10">
|
||
<template v-if="nowOverTime(item.advance.end_time)&&item.order_status.value!=20">
|
||
<view class="d-e-c mt10" v-if="item.advance.main_order_no!=item.order_no">
|
||
<button class="pay-btn theme-btn"
|
||
@click="gotoPage('/pages/order/cashier?order_id='+item.order_id)">支付尾款</button>
|
||
</view>
|
||
<view class="d-e-c mt10" v-else>
|
||
<button class="pay-btn theme-btn"
|
||
@click="depositPay(item.order_id)">支付尾款</button>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
<view class="d-e-c mt10"
|
||
v-if="item.pay_status.value == 10&&item.advance.order_status==10&&item.advance.money_return==1">
|
||
<button class="pay-btn theme-borderbtn"
|
||
@click="cancelAdvance(item.advance.order_advance_id)">取消定金</button>
|
||
</view>
|
||
<template v-if="item.order_status.value == 10&&item.pay_status.value == 20">
|
||
<template v-if="item.delivery_status.value == 10">
|
||
<button @click="cancelOrder(item.order_id)"
|
||
class="theme-borderbtn">申请取消</button>
|
||
</template>
|
||
</template>
|
||
<view class="d-e-c mt10"
|
||
v-if="item.advance.pay_status.value == 10&&item.order_status.value!=20&&!nowOverTime(item.advance.pay_end_time)">
|
||
<button class="pay-btn theme-btn"
|
||
@click="gotoPage('/pages/order/cashier?order_type=40&order_id=' + item.advance.order_advance_id)">支付定金
|
||
</button>
|
||
</view>
|
||
<view class="d-e-c mt10"
|
||
v-if="item.delivery_status.value == 20 && item.receipt_status.value == 10">
|
||
<button class="pay-btn theme-btn" @click="orderReceipt(item.order_id)">确认收货
|
||
</button>
|
||
</view>
|
||
<view class="d-e-c mt10" v-if="item.order_status.value == 30 && item.is_comment == 0">
|
||
<button class="pay-btn theme-btn" @click="gotoEvaluate(item.order_id)">评价
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view v-else class="count d-e-c ww100 redF11">取消申请中</view>
|
||
</view>
|
||
<view class="order-bts" v-else>
|
||
<block>
|
||
<!-- 未支付取消订单 -->
|
||
<button @click="showCancleOrderPopup(item.id)" class="theme-borderbtn cancel-btn"
|
||
v-if="item.order_status == 0">取消订单</button>
|
||
<!-- 订单付款 -->
|
||
<block v-if="item.order_status == 0">
|
||
<button class="theme-btn pay-btn" @click="onPayOrder(item.ground_id, item.id)">去支付</button>
|
||
</block>
|
||
|
||
<block v-if="item.order_status >= 2">
|
||
<button class="theme-btn del-btn" @click="onDelOrder(item.id)">删除订单</button>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
|
||
<text class="iconfont icon-wushuju"></text>
|
||
<text class="cont">亲，暂无相关记录哦</text>
|
||
</view>
|
||
<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
|
||
</view>
|
||
</scroll-view>
|
||
<!--核销二维码-->
|
||
<Popup :show="isCodeImg" type="middle" @hidePopup="hideCodePopupFunc">
|
||
<view class="ww100 p20 box-s-b">
|
||
<image class="ww100" :src="codeImg" mode="widthFix"></image>
|
||
</view>
|
||
</Popup>
|
||
|
||
<!-- 取消订单 -->
|
||
<Popup :show="cancelOrderPopup" radius="16rpx">
|
||
<view class="notice-popup">
|
||
<view class="title">确定取消订单？</view>
|
||
<view class="desc">
|
||
取消订单后无法恢复，是否确认取消
|
||
</view>
|
||
<view class="btn">
|
||
<view class="btn1" @click="cancelOrderPopup = false">取消</view>
|
||
<view class="btn2" @click="cancelOrder">确定</view>
|
||
</view>
|
||
</view>
|
||
</Popup>
|
||
|
||
<!-- 删除订单 -->
|
||
<Popup :show="delOrderPopup" radius="16rpx">
|
||
<view class="notice-popup">
|
||
<view class="title">确定删除订单？</view>
|
||
<view class="desc">
|
||
删除订单后无法恢复，是否确认删除订单？
|
||
</view>
|
||
<view class="btn">
|
||
<view class="btn1" @click="delOrderPopup = false">取消</view>
|
||
<view class="btn2" @click="delOrder">确定</view>
|
||
</view>
|
||
</view>
|
||
</Popup>
|
||
|
||
<tabBar></tabBar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Popup from '@/components/uni-popup.vue';
|
||
import uniLoadMore from '@/components/uni-load-more.vue';
|
||
import navbar from '@/components/navbar.vue';
|
||
import {
|
||
pay
|
||
} from '@/common/pay.js';
|
||
export default {
|
||
components: {
|
||
Popup,
|
||
uniLoadMore,
|
||
navbar
|
||
},
|
||
data() {
|
||
return {
|
||
/*手机高度*/
|
||
phoneHeight: 0,
|
||
/*可滚动视图区域高度*/
|
||
scrollviewHigh: 0,
|
||
/*状态选中*/
|
||
state_active: 0,
|
||
/*顶部刷新*/
|
||
topRefresh: false,
|
||
/*数据*/
|
||
listData: [],
|
||
/*数据类别*/
|
||
dataType: 'all',
|
||
/*是否显示支付类别弹窗*/
|
||
isPayPopup: false,
|
||
/*支付方式*/
|
||
pay_type: 20,
|
||
/*订单id*/
|
||
order_id: 0,
|
||
/*最后一页码数*/
|
||
last_page: 0,
|
||
/*当前页面*/
|
||
page: 1,
|
||
/*每页条数*/
|
||
list_rows: 10,
|
||
/*有没有等多*/
|
||
no_more: false,
|
||
/*是否正在加载*/
|
||
loading: true,
|
||
/*是否显示核销二维码*/
|
||
isCodeImg: false,
|
||
codeImg: '',
|
||
cancelOrderPopup: false,
|
||
delOrderPopup: false,
|
||
orderStatus: '',
|
||
keyWord: '',
|
||
ballType: 1, // 1网球 2篮球
|
||
};
|
||
},
|
||
computed: {
|
||
/*加载中状态*/
|
||
loadingType() {
|
||
if (this.loading) {
|
||
return 1;
|
||
} else {
|
||
if (this.listData.length != 0 && this.no_more) {
|
||
return 2;
|
||
} else {
|
||
return 0;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (typeof e.dataType != 'undefined') {
|
||
this.dataType = e.dataType;
|
||
}
|
||
|
||
// state_active 是tab栏的下标，dataType是订单状态，两者不一致，需要转换
|
||
if (this.dataType == 'all') {
|
||
// 全部订单
|
||
this.state_active = 0;
|
||
} else if (this.dataType == 0) {
|
||
// 待付款
|
||
this.state_active = 1;
|
||
} else if (this.dataType == 1) {
|
||
// 已预约
|
||
this.state_active = 2;
|
||
} else if (this.dataType == 3) {
|
||
// 已完成
|
||
this.state_active = 4;
|
||
} else if (this.dataType == 5) {
|
||
// 退订/退款
|
||
this.state_active = 5;
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
onShow() {
|
||
/*获取订单列表*/
|
||
this.page = 1;
|
||
this.listData = [];
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
/*初始化*/
|
||
init() {
|
||
let self = this;
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
self.phoneHeight = res.windowHeight;
|
||
// 计算组件的高度
|
||
let view = uni.createSelectorQuery().select('.top-tabbar');
|
||
view.boundingClientRect(data => {
|
||
let h = self.phoneHeight - data.height;
|
||
self.scrollviewHigh = h;
|
||
}).exec();
|
||
}
|
||
});
|
||
},
|
||
|
||
// 切换球类
|
||
changeBallType(type) {
|
||
let self = this;
|
||
|
||
self.ballType = type;
|
||
self.listData = [];
|
||
self.getData();
|
||
},
|
||
|
||
/*状态切换*/
|
||
stateFunc(e) {
|
||
console.log("🚀 ~ e:", e)
|
||
let self = this;
|
||
console.log("🚀 ~ state_active:", self.state_active)
|
||
|
||
if (self.state_active != e) {
|
||
self.page = 1;
|
||
self.loading = true;
|
||
self.state_active = e;
|
||
|
||
switch (e) {
|
||
case 0:
|
||
// 全部订单
|
||
self.listData = [];
|
||
self.dataType = 'all';
|
||
break;
|
||
case 1:
|
||
// 待付款
|
||
self.listData = [];
|
||
self.dataType = 0;
|
||
break;
|
||
case 2:
|
||
// 已预约
|
||
self.listData = [];
|
||
self.dataType = 1;
|
||
break;
|
||
case 3:
|
||
// 进行中
|
||
self.listData = [];
|
||
self.dataType = 2;
|
||
break;
|
||
case 4:
|
||
// 已完成
|
||
self.listData = [];
|
||
self.dataType = 3;
|
||
break;
|
||
case 5:
|
||
// 退订/退款
|
||
self.listData = [];
|
||
self.dataType = 5;
|
||
break;
|
||
}
|
||
console.log("🚀 ~fff self.dataType:", self.dataType)
|
||
|
||
self.getData();
|
||
}
|
||
},
|
||
|
||
/*可滚动视图区域到底触发*/
|
||
scrolltolowerFunc() {
|
||
let self = this;
|
||
if (self.no_more) {
|
||
return;
|
||
}
|
||
self.page++;
|
||
if (self.page <= self.last_page) {
|
||
self.getData();
|
||
} else {
|
||
self.no_more = true;
|
||
}
|
||
},
|
||
|
||
/*获取数据*/
|
||
getData() {
|
||
let self = this;
|
||
self.loading = true;
|
||
let dataType = self.dataType;
|
||
console.log("🚀 ~ dataType:", dataType)
|
||
if (dataType == 'all') {
|
||
dataType = '';
|
||
}
|
||
self._post(
|
||
'order.groundOrder/orderGroundList', {
|
||
order_status: dataType,
|
||
search: self.keyWord,
|
||
page: self.page,
|
||
size: self.list_rows,
|
||
app_id: self.getAppId(),
|
||
type: self.ballType
|
||
},
|
||
function(res) {
|
||
self.loading = false;
|
||
self.listData = self.listData.concat(res.data.lists.data);
|
||
console.log("🚀 ~ self.listData:", self.listData)
|
||
self.last_page = res.data.lists.last_page;
|
||
if (res.data.lists.last_page <= 1) {
|
||
self.no_more = true;
|
||
} else {
|
||
self.no_more = false;
|
||
}
|
||
}
|
||
);
|
||
},
|
||
/*计算时分秒*/
|
||
countDown(t) {
|
||
let time = t - (Date.now() / 1000);
|
||
//天数
|
||
let day = Math.floor(time / (60 * 60 * 24));
|
||
//取模（余数）
|
||
let modulo = time % (60 * 60 * 24);
|
||
//小时数
|
||
let hour = Math.floor(modulo / (60 * 60));
|
||
modulo = modulo % (60 * 60);
|
||
//分钟
|
||
let minute = Math.floor(modulo / 60);
|
||
//秒
|
||
let second = modulo % 60;
|
||
day = this.convertTwo(day);
|
||
hour = this.convertTwo(hour);
|
||
minute = this.convertTwo(minute);
|
||
second = this.convertTwo(second);
|
||
let text = parseInt(day) > 0 ? (parseInt(day) + '天 ') : '' + parseInt(hour) + '时' + parseInt(minute) +
|
||
'分' + parseInt(second) + '秒';
|
||
return text
|
||
},
|
||
|
||
/*跳转页面*/
|
||
gotoOrder(e) {
|
||
this.gotoPage(`/pages/order/cg-order-detail?order_id=${e}&ballType=${this.ballType}`);
|
||
},
|
||
|
||
/*隐藏支付方式*/
|
||
hidePopupFunc() {
|
||
this.isPayPopup = false;
|
||
},
|
||
|
||
/*去支付*/
|
||
payTypeFunc(payType) {
|
||
let self = this;
|
||
self.isPayPopup = false;
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
self._post(
|
||
'user.order/pay', {
|
||
payType: payType,
|
||
order_id: self.order_id,
|
||
pay_source: self.getPlatform()
|
||
},
|
||
function(res) {
|
||
pay(res, self);
|
||
}
|
||
);
|
||
},
|
||
depositPay(e) {
|
||
this.gotoPage('/pages/order/confirm-order?order_type=retainage&order_id=' + e)
|
||
},
|
||
|
||
// 跳转支付页面
|
||
onPayOrder(groundId = 0, orderId = 0) {
|
||
let self = this;
|
||
if (self.ballType == 1) {
|
||
// 网球场
|
||
self.gotoPage(`/bundle/reserve/confirm?orderId=${orderId}&venueId=${groundId}&typeId=1`);
|
||
return
|
||
}
|
||
},
|
||
|
||
|
||
cancelAdvance(e) {
|
||
let self = this;
|
||
let order_id = e;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要取消吗?',
|
||
success: function(o) {
|
||
if (o.confirm) {
|
||
uni.showLoading({
|
||
title: '正在处理'
|
||
});
|
||
self._get(
|
||
'plus.advance.Order/cancelFront', {
|
||
order_id: order_id
|
||
},
|
||
function(res) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
duration: 2000,
|
||
icon: 'success'
|
||
});
|
||
self.listData = [];
|
||
self.getData();
|
||
}
|
||
);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 取消订单弹窗
|
||
showCancleOrderPopup(order_id) {
|
||
this.cancelOrderPopup = true;
|
||
this.order_id = order_id;
|
||
},
|
||
|
||
/*取消订单*/
|
||
cancelOrder(e) {
|
||
let self = this;
|
||
uni.showLoading({
|
||
title: '正在处理'
|
||
});
|
||
self._post(
|
||
'order.groundOrder/cancelGroundOrder', {
|
||
order_id: self.order_id
|
||
},
|
||
function(res) {
|
||
self.cancelOrderPopup = false;
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
duration: 2000,
|
||
icon: 'success'
|
||
});
|
||
self.listData = [];
|
||
self.getData();
|
||
}
|
||
);
|
||
},
|
||
nowOverTime(t) {
|
||
|
||
let now = new Date().getTime();
|
||
let time = new Date(t * 1000).getTime();
|
||
return now >= time
|
||
|
||
},
|
||
|
||
// 删除订单
|
||
onDelOrder(order_id) {
|
||
this.delOrderPopup = true;
|
||
this.order_id = order_id;
|
||
},
|
||
|
||
delOrder() {
|
||
let self = this;
|
||
uni.showLoading({
|
||
title: '正在处理'
|
||
});
|
||
self._post(
|
||
'order.groundOrder/delGroundOrder',
|
||
{
|
||
order_id: self.order_id
|
||
},
|
||
function(res) {
|
||
self.delOrderPopup = false;
|
||
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
duration: 2000,
|
||
icon: 'success'
|
||
});
|
||
self.listData = [];
|
||
self.getData();
|
||
}
|
||
);
|
||
},
|
||
|
||
// 跳转场馆
|
||
toGround(ground_id) {
|
||
uni.navigateTo({
|
||
url: `/bundle/reserve/details?id=${ground_id}&typeId=${this.ballType}`
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.search-wrap2 .index-serch {
|
||
border: none !important;
|
||
background-color: #fff !important;
|
||
border-radius: 36rpx !important;
|
||
}
|
||
|
||
@import url("css/cg-order.css");
|
||
|
||
|
||
.notice-popup {
|
||
padding: 20rpx 0;
|
||
width: 100%;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
color: #303133;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.desc {
|
||
margin-top: 48rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #303133;
|
||
line-height: 52rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn {
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 44rpx;
|
||
|
||
.btn1 {
|
||
width: 240rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
background: #F6F7F8;
|
||
border-radius: 8rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.btn2 {
|
||
width: 240rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
background: #365A9A;
|
||
color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ball-type-box {
|
||
margin-left: 40rpx;
|
||
margin-bottom: 24rpx;
|
||
.ball {
|
||
width: 108rpx;
|
||
height: 52rpx;
|
||
text-align: center;
|
||
line-height: 52rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
font-size: 26rpx;
|
||
color: #606266;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.ball.active {
|
||
background: #365A9A;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
|
||
.tab-item {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #365A9A;
|
||
font-size: 30rpx;
|
||
}
|
||
</style>
|