Files
xiuhuwangqiu/pages/order/cg-my-order.vue
2025-12-08 01:37:33 +08:00

758 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>
<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: #606266;" v-if="item.order_status == 4">退款成功</text>
</view>
</view>
<!--多个商品显示-->
<!-- <view class="product-list pr" v-if="item.product.length > 1" @click="gotoOrder(item.order_id)">
<scroll-view scroll-x="true">
<view class="list d-s-c pr100">
<view class="cover mr10" v-for="(img, num) in item.product" :key="num" style="width: 200rpx; height: 200rxpx;">
<image :src="img.image.file_path" mode="aspectFill" style="width: 200rpx; height: 200rxpx;"></image>
</view>
</view>
</scroll-view>
<view class="total-count">
<view class="left-shadow"></view>
<view class="price f22 theme-price">
¥
<text class="f40 theme-price">{{ item.pay_price }}</text>
</view>
<view class="count">共{{ item.product.length }}件</view>
</view>
</view> -->
<!--一个商品显示-->
<view class="one-product d-s-c" @click="gotoOrder(item.order_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">
<view class="d-b-c line-h-50 f24 gray9">
<view>定金</view>
<view>
<text>{{item.advance.pay_status.value == 20?'已支付':'待支付'}}</text>¥{{item.advance.pay_price}}
</view>
</view>
<view class="d-b-c line-h-50 f24 gray9">
<view>尾款</view>
<view>
<text>{{item.advance.pay_status.value == 20&&item.pay_status.value == 20?'已支付':'待支付'}}</text>
¥{{item.pay_price}}
</view>
</view>
<template v-if="item.order_status.value==10">
<view class="d-e-c line-h-50 f24 gray9"
v-if="item.advance&&item.advance.pay_status.value==20">
<view v-if="nowOverTime(item.advance.end_time)&&item.pay_end_time_format">
尾款支付截止时间:<text class="redF11">{{item.pay_end_time_format}}</text>
</view>
<view v-else-if="item.advance.end_time_text">
尾款支付时间:<text class="redF11">{{item.advance.end_time_text}}</text>
</view>
</view>
</template>
<template>
<view class="d-e-c line-h-50 f24 gray9"
v-if="item.advance.pay_status.value == 10&&item.advance.order_status==10">
<view
v-if="!nowOverTime(item.advance.pay_end_time)&&!nowOverTime(item.advance.end_time)">
定金支付截止时间: <text class="redF11">{{countDown(item.advance.pay_end_time)}}</text>
</view>
</view>
</template>
<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.order_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.order_id)">去支付</button>
</block>
<block v-if="item.order_status >= 2">
<button class="theme-btn del-btn" @click="onDelOrder(item.order_id)">删除订单</button>
</block>
</block>
<text v-if="item.order_status.value == 21" class="count">取消申请中</text>
<!-- 订单评价 -->
<button class="theme-btn" v-if="item.order_status.value == 30 && item.is_comment == 0"
@click="gotoEvaluate(item.order_id)">评价</button>
<template v-if="item.assemble_status == 10 && item.order_source == 30">
<button class="theme-btn"
@click="gotoAssembleShare(item.product[0].bill_source_id)">邀请好友拼单</button>
</template>
</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;
}
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 == 2) {
this.state_active = 3;
} else if (this.dataType == 4) {
this.state_active = 4;
}
console.log("🚀 ~ this.dataType:", this.dataType)
console.log("🚀 ~ this.dataType:", this.state_active)
},
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 'all':
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 = 4;
break;
}
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;
// self._get(
// 'user.order/lists', {
// dataType: dataType,
// page: self.page,
// list_rows: self.list_rows
// },
// function(res) {
// self.loading = false;
// self.listData = self.listData.concat(res.data.list.data);
// self.last_page = res.data.list.last_page;
// if (res.data.list.last_page <= 1) {
// self.no_more = true;
// } else {
// self.no_more = false;
// }
// }
// );
let self = this;
self.loading = true;
let dataType = self.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);
},
/*隐藏支付方式*/
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(orderId) {
let self = this;
self.gotoPage('/pages/order/cashier?order_id=' + orderId)
},
/*确认收货*/
orderReceipt(order_id) {
let self = this;
wx.showModal({
title: '提示',
content: '您确定要收货吗?',
success: function(o) {
if (o.confirm) {
uni.showLoading({
title: '正在处理'
});
self._post(
'user.order/receipt', {
order_id: order_id
},
function(res) {
uni.hideLoading();
uni.showToast({
title: res.msg,
duration: 2000,
icon: 'success'
});
self.listData = [];
self.getData();
}
);
} else {
uni.showToast({
title: '取消收货',
duration: 1000,
icon: 'none'
});
}
}
});
},
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._get(
'user.order/cancel', {
order_id: self.order_id
},
function(res) {
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
},
/*去评论*/
gotoEvaluate(e) {
this.gotoPage('/pages/order/evaluate/evaluate?order_id=' + e);
},
/*核销码*/
onQRCode(e) {
let self = this;
uni.showLoading({
title: '加载中'
});
let order_id = e;
self._get(
'user.order/qrcode', {
order_id: order_id,
source: self.getPlatform()
},
function(res) {
uni.hideLoading();
self.isCodeImg = true;
self.codeImg = res.data.qrcode;
}
);
},
/*关闭核销二维码*/
hideCodePopupFunc() {
this.isCodeImg = false;
},
/*分享拼团*/
gotoAssembleShare(e) {
let url = '/pages/plus/assemble/fight-group-detail/fight-group-detail?assemble_bill_id=' + e;
this.gotoPage(url);
},
// 删除订单
onDelOrder() {
uni.showToast({
title: '该功能正在开发中,敬请期待',
duration: 2000,
icon: 'none'
});
},
// 跳转场馆
toGround(ground_id) {
uni.navigateTo({
url: `/bundle/reserve/details?id=${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;
}
}
</style>