342 lines
7.3 KiB
Vue
342 lines
7.3 KiB
Vue
<template>
|
||
<view class="service-page">
|
||
<custom-navbar
|
||
title="工时购买记录"
|
||
:showBack="true"
|
||
backgroundColor="#FFFFFF"
|
||
></custom-navbar>
|
||
<view class="flexed">
|
||
<!-- 状态标签 -->
|
||
<view class="tab-container">
|
||
<view
|
||
v-for="(tab, index) in tabs"
|
||
:key="index"
|
||
:class="['tab-item', { active: currentTab === index }]"
|
||
@click="switchTab(index, tab.id)"
|
||
>
|
||
{{ tab.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务列表 -->
|
||
<view class="service-list" v-if="services && services.length != 0">
|
||
<orderCard
|
||
:dataItem="item"
|
||
v-for="item in services"
|
||
@goDetail="goDetail"
|
||
@goPay="goPay"
|
||
@goRefund="goRefund"
|
||
@cancel="cancel"
|
||
@reOrder="reOrder"
|
||
></orderCard>
|
||
</view>
|
||
|
||
<!-- 暂无数据 -->
|
||
<noData v-else></noData>
|
||
|
||
|
||
<!-- 加载更多 -->
|
||
<view v-if="hasMore" class="load-more">
|
||
<text>已加载全部</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import orderCard from "./components/orderCard.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
state: undefined,
|
||
currentTab: 0,
|
||
tabs: [
|
||
{
|
||
id: undefined,
|
||
text: "全部",
|
||
},
|
||
|
||
{
|
||
id: 1,
|
||
text: "待支付",
|
||
},
|
||
{
|
||
id: 2,
|
||
text: "待接单",
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "待服务",
|
||
},
|
||
{
|
||
id: 4,
|
||
text: "服务中",
|
||
},
|
||
{
|
||
id: 5,
|
||
text: "已完成",
|
||
},
|
||
{
|
||
id: 7,
|
||
text: "已取消",
|
||
},
|
||
],
|
||
services: [],
|
||
hasMore: false,
|
||
startX: 0,
|
||
moveX: 0,
|
||
currentIndex: -1,
|
||
count: 0,
|
||
isLoad: true, //加载完成
|
||
page: 1,
|
||
limit: 10,
|
||
};
|
||
},
|
||
components: {
|
||
orderCard,
|
||
},
|
||
onLoad() {
|
||
this.getServicesList();
|
||
},
|
||
onPullDownRefresh() {
|
||
this.getServicesList();
|
||
},
|
||
async onReachBottom() {
|
||
console.log("onReachBottom");
|
||
if (this.count <= this.page * this.limit || !this.isLoad) {
|
||
return;
|
||
}
|
||
this.page++;
|
||
this.getServicesList(false);
|
||
},
|
||
methods: {
|
||
// 再来一单
|
||
reOrder(item) {
|
||
// 方式1：跳转到服务详情页重新下单
|
||
uni.navigateTo({
|
||
url: `/pages/shop/manHour/manHourDetail?id=${item.work_hour_id}&type=reorder&orderId=${item.id}`
|
||
});
|
||
|
||
},
|
||
getServicesList(isRefresh = true) {
|
||
this.isLoad = false;
|
||
if (isRefresh) {
|
||
this.page = 1;
|
||
this.limit = 10;
|
||
}
|
||
let url = "/sj/workHourOrder/list";
|
||
request
|
||
.post(url, { state: this.state, page: this.page, limit: this.limit })
|
||
.then((res) => {
|
||
if (isRefresh) {
|
||
this.services = res.data.list;
|
||
this.count = res.data.count;
|
||
} else {
|
||
this.services = [...this.services, ...res.data.list];
|
||
this.count = res.data.count;
|
||
}
|
||
})
|
||
.finally(() => {
|
||
uni.stopPullDownRefresh();
|
||
this.isLoad = true;
|
||
});
|
||
},
|
||
switchTab(index, id) {
|
||
this.currentTab = index;
|
||
this.state = id;
|
||
this.getServicesList();
|
||
},
|
||
goDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/shop/manHourDetail?order_id=${item.id}`,
|
||
});
|
||
},
|
||
goPay(item) {
|
||
uni.redirectTo({
|
||
url: `/pages/shop/pay?id=${item.id}&money=${item.order_money}&title=${item.title}&number=${item.number}&identity=0`,
|
||
});
|
||
},
|
||
goRefund(item) {
|
||
uni.showModal({
|
||
title: "申请退款",
|
||
content: "确定要申请退款吗？（订单取消后，支付金额将原路退回）",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
let data = {
|
||
orderNo: item.number,
|
||
amount: item.pay_money,
|
||
sjid: item.id,
|
||
};
|
||
let url = "";
|
||
if (item.pay_kind == 1) {
|
||
url = "";
|
||
} else if (item.pay_kind == 2) {
|
||
url = "/sj/workHourOrder/weChatRefund";
|
||
} else if (item.pay_kind == 3) {
|
||
url = "/sj/workHourOrder/aliRefund";
|
||
}
|
||
request
|
||
.post(url, data)
|
||
.then((res) => {
|
||
if (res.code == 1 || res.code == 200) {
|
||
uni.showToast({ title: "申请退款成功！", icon: "none" });
|
||
this.getServicesList();
|
||
} else {
|
||
uni.showToast({ title: res.msg, icon: "none" });
|
||
}
|
||
})
|
||
.catch((err) => console.log(err));
|
||
}
|
||
},
|
||
});
|
||
},
|
||
cancel(item) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: "取消订单",
|
||
content: "确定要取消该订单吗？",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
let data = {
|
||
order_no: item.number,
|
||
};
|
||
let url = "/sj/workHourOrder/cancel";
|
||
request
|
||
.post(url, data)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({ title: "取消成功！", icon: "none" });
|
||
that.getServicesList();
|
||
} else {
|
||
uni.showToast({ title: res.msg, icon: "none" });
|
||
}
|
||
})
|
||
.catch((err) => console.log(err));
|
||
}
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.service-page {
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.flexed {
|
||
position: sticky;
|
||
top: 88rpx;
|
||
left: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.search-inp {
|
||
width: 700rpx;
|
||
height: 68rpx;
|
||
background-color: #eef4fa;
|
||
border-radius: 34rpx;
|
||
padding: 0 70rpx 0 48rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #999999;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
position: absolute;
|
||
right: 56rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 标签栏样式 */
|
||
.tab-container {
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
gap: 48rpx;
|
||
align-items: center;
|
||
background-color: #FAFAFA;
|
||
padding: 30rpx 0rpx 20rpx 30rpx;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tab-item {
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
padding: 16rpx 0;
|
||
position: relative;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #000000;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 32rpx;
|
||
height: 6rpx;
|
||
background-color: #E8101E;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
/* 服务列表样式 */
|
||
.service-list {
|
||
}
|
||
|
||
.service-nothings {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 280rpx 0 0;
|
||
}
|
||
.nothings-text {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
text-align: center;
|
||
font-style: italic;
|
||
}
|
||
/* 平台特定样式 */
|
||
/* #ifdef H5 */
|
||
.service-container {
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-PLUS */
|
||
.service-image {
|
||
border: 1rpx solid #eeeeee;
|
||
}
|
||
.flexed {
|
||
top: calc(var(--status-bar-height) + 88rpx);
|
||
}
|
||
/* #endif */
|
||
|
||
/* #ifdef MP-WEIXIN */
|
||
.flexed {
|
||
top: calc(var(--status-bar-height) + 88rpx);
|
||
}
|
||
.service-item {
|
||
/* 小程序阴影效果 */
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
/* #endif */
|
||
</style>
|