topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

展示订单列表，整理订单状态、按钮

This commit is contained in:
TOP糯米 2023-03-11 03:12:00 +08:00
parent 088a3093fb
commit 4d204a5b97
5 changed files with 322 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/components/order/action.vue
View File

@ -1,40 +1,78 @@
<template>
<view class="component-order-action">
<block
v-if="
order.state == models.order.state.NO_PAY ||
order.state == models.order.state.NO_PRICE ||
order.state == models.order.state.NO_SELECT_WORKER
"
>
<view class="btn" @click.stop="cancelOrder" :class="{ active: true }">
<text>取消订单</text>
</view>
<block v-if="order.listType == listType.T1">
<block v-if="order.state == state[order.listType].S1">
<view class="btn" @click.stop="payOrder">
<text>立即支付</text>
</view>
</block>
<block v-if="order.state == state[order.listType].S2">
<view class="btn" @click.stop="cancelOrder">
<text>取消订单</text>
</view>
</block>
</block>
<block v-if="order.state == models.order.state.NO_APPRAISE">
<view class="btn" @click.stop="appraiseOrder" :class="{ active: true }">
<text>评价师傅</text>
</view>
<block v-if="order.listType == listType.T2">
<block v-if="order.state == state[order.listType].S1">
<view class="btn" @click.stop="cancelOrder">
<text>取消订单</text>
</view>
</block>
<block v-if="order.state == state[order.listType].S2">
<view class="btn" @click.stop="payOrder">
<text>立即支付</text>
</view>
</block>
</block>
<block v-if="order.state == models.order.state.NO_SERVICE">
<view class="btn" @click.stop="refundOrder" :class="{ active: true }">
<text>申请退款</text>
</view>
<!-- T1、T2公共操作 -->
<block v-if="order.listType == listType.T1 || order.listType == listType.T2">
<block
v-if="
order.state == state[order.listType].S3 ||
order.state == state[order.listType].S4 ||
order.state == state[order.listType].S5
"
>
<view class="btn" @click.stop="refundOrder">
<text>申请退款</text>
</view>
</block>
<block v-if="order.state == state[order.listType].S4">
<view class="btn" @click.stop="payRetainage">
<text>支付尾款</text>
</view>
</block>
<block v-if="order.state == state[order.listType].S5">
<view class="btn" @click.stop="confirmOrder">
<text>确认完成</text>
</view>
</block>
<block v-if="order.state == state[order.listType].S6">
<view class="btn" @click.stop="appraiseOrder">
<text>评价师傅</text>
</view>
<view class="del" @click.stop="delOrder">
<text class="iconfont icon-shanchu"></text>
</view>
</block>
</block>
<block v-if="order.state == models.order.state.ORDER_CLOSE">
<view class="btn" @click.stop="reapplyOrder" :class="{ active: true }">
<text>重新申请</text>
</view>
</block>
<block v-if="order.state == models.order.state.CAN_NOT_REFUND">
<view class="btn" @click.stop="showReason" :class="{ active: true }">
<text>查看原因</text>
</view>
</block>
<block v-if="order.state == models.order.state.ORDER_CLOSE || order.state == models.order.state.ALL_FINISH || order.state == models.order.state.CAN_NOT_REFUND || order.state == models.order.state.REFUNDED">
<view class="del" v-if="true" @click.stop="delOrder">
<text class="iconfont icon-shanchu"></text>
</view>
<!-- 退款 -->
<block v-if="order.listType == listType.T4">
<block v-if="order.state == state[order.listType].S1">
<view class="btn" @click.stop="cancelRefund">
<text>取消申请</text>
</view>
</block>
<block v-if="order.state == state[order.listType].S3">
<view class="btn" @click.stop="showReason">
<text>查看未通过原因</text>
</view>
</block>
<block v-if="order.state == state[order.listType].S2 || order.state == state[order.listType].S3">
<view class="del" @click.stop="delOrder">
<text class="iconfont icon-shanchu"></text>
</view>
</block>
</block>
</view>
</template>
@ -44,7 +82,8 @@ export default {
name: "component-order-action",
data() {
return {
models: this.$models,
listType: this.$models.order.listType,
state: this.$models.order.state,
};
},
props: {
@ -58,32 +97,62 @@ export default {
mounted() {},
destroyed() {},
methods: {
// 取消
/**
* 支付
*/
payOrder() {
this.$emit("payOrder");
},
/**
* 支付尾款
*/
payRetainage() {
this.$emit("payRetainage");
},
/**
* 取消
*/
cancelOrder() {
this.$emit("cancelOrder");
},
// 删除
/**
* 删除
*/
delOrder() {
this.$emit("delOrder");
},
// 评价
/**
* 确认完成
*/
confirmOrder() {
this.$emit("confirmOrder");
},
/**
* 评价
*/
appraiseOrder() {
// this.$emit("appraiseOrder");
this.$utils.toPage("/pages/worker/appraise?id=" + this.order.worker.id);
},
// 退款
/**
* 退款
*/
refundOrder() {
// this.$emit("refundOrder");
this.$utils.toPage("/pages/order/refund?id=" + this.order.worker.id);
},
// 查看未通过原因
/**
* 取消退款
*/
cancelRefund() {
this.$emit("cancelRefund");
},
/**
* 查看未通过原因
*/
showReason() {
this.$utils.toPage("/pages/order/refund?type=reason&id=" + this.order.worker.id);
},
// 重新提交
reapplyOrder() {
this.$emit("reapplyOrder");
},
},
};
</script>
@ -105,7 +174,8 @@ export default {
border-radius: 28rpx;
padding: 15rpx 26rpx;
font-size: 26rpx;
color: #999999;
// color: #999999;
color: #666666;
line-height: 26rpx;
}
.btn.active {

48
src/components/order/item.vue
View File

@ -1,8 +1,8 @@
<template>
<view class="component-order-item">
<view class="order-header">
<view class="state-text" :style="{ color: models.order.getOrderStateTextColor(order.state) }">
<text>{{ models.order.getOrderStateText(order.state) }}</text>
<view class="state-text" :style="{ color: titleColor }">
<text>{{ title }}</text>
</view>
<view class="more">
<text class="text">详情</text>
@ -32,31 +32,21 @@
<text class="text">{{ order.serviceTime }}</text>
</view>
<view class="order-worker-box">
<block
v-if="
order.orderType == models.order.type.NORMAL ||
order.orderType == models.order.type.CUSTOM_PRICE ||
(order.orderType == models.order.type.WORKER_PRICE && order.state == models.order.state.NO_SERVICE)
"
>
<view class="worker-item-box">
<worker-item :data="order.worker" />
</view>
</block>
<block v-else>
<view class="worker-list-group">
<view class="list-group">
<view class="list-item" v-for="(item, index) in previewWorkerList" :key="index">
<image class="cover" :src="item.cover" mode="aspectFill" />
<text class="price">¥ {{ item.price }}</text>
</view>
</view>
<view class="more-worker">
<text class="worker-num">{{ order.workerList.length }}位师傅已报价</text>
<text class="iconfont icon-jinru"></text>
<view class="worker-item-box">
<worker-item :data="order.worker" />
</view>
<view class="worker-list-group">
<view class="list-group">
<view class="list-item" v-for="(item, index) in previewWorkerList" :key="index">
<image class="cover" :src="item.cover" mode="aspectFill" />
<text class="price">¥ {{ item.price }}</text>
</view>
</view>
</block>
<view class="more-worker">
<text class="worker-num">{{ order.workerList.length }}位师傅已报价</text>
<text class="iconfont icon-jinru"></text>
</view>
</view>
</view>
</view>
<view class="order-footer">
@ -71,7 +61,10 @@ export default {
name: "component-order-item",
data() {
return {
models: this.$models,
listType: this.$models.order.listType,
state: this.$models.order.state,
title: "",
titleColor: "",
previewWorkerList: [],
};
},
@ -92,6 +85,9 @@ export default {
break;
}
}
let [title, color] = this.$models.order.stateText(this.order.listType, this.order.orderType, this.order.state);
this.title = title;
this.titleColor = typeof color === "undefined" ? "#000000" : color;
},
mounted() {},
destroyed() {},

14
src/core/apis.js
View File

@ -128,8 +128,18 @@ export default {
url: "/order/submitordera",
},
list: {
url: "/order/getmyorder",
showLoading: true,
t1: {
url: "/order/getmyorder",
showLoading: true,
},
t2: {
url: "/orderb/getmyorderblist",
showLoading: true,
},
t3: {
url: "/project/freightorder",
showLoading: true,
},
},
}
}

166
src/core/models/order.js
View File

@ -2,80 +2,85 @@ import Vue from "vue"
let prototype = Vue.prototype;
export default {
type: {
NORMAL: 1,
WORKER_PRICE: 2,
CUSTOM_PRICE: 3,
listType: {
// 普通订单
T1: 't1',
// 一口价/报价订单
T2: 't2',
// 货运订单
T3: 't3',
// 退款订单
T4: 't4',
},
state: {
// 订单关闭
ORDER_CLOSE: -2,
// 未支付
NO_PAY: -1,
// 等待师傅报价
NO_PRICE: 0,
// 等待您选择师傅
NO_SELECT_WORKER: 1,
// 等待师傅上门
NO_SERVICE: 2,
// 完成订单
NO_APPRAISE: 3,
// 服务完结
ALL_FINISH: 4,
// 已申请退款
APPLY_REFUND: 6,
// 已退款
REFUNDED: 7,
// 无法退款
CAN_NOT_REFUND: 8,
t1: {
S1: 0,
S2: 1,
S3: 2,
S4: 4,
S5: 5,
S6: 6,
},
t2: {
S1: 0,
S2: 1,
S3: 2,
S4: 4,
S5: 5,
S6: 6,
},
t3: {},
t4: {
S1: 7,
S2: 8,
S3: 9,
},
},
getOrderStateTextColor(state) {
stateTextColor(listType, orderType, state) {
switch (state) {
case this.state.NO_PAY:
return '#000000';
case this.state.NO_PRICE:
return '#000000';
case this.state.NO_SELECT_WORKER:
return '#000000';
case this.state.NO_SERVICE:
return '#000000';
case this.state.NO_APPRAISE:
return '#000000';
case this.state.ALL_FINISH:
return '#000000';
case this.state.APPLY_REFUND:
return '#000000';
case this.state.REFUNDED:
return '#000000';
case this.state.CAN_NOT_REFUND:
return '#000000';
default:
return '#ff0000';
return '#000000';
}
},
getOrderStateText(state) {
switch (state) {
case this.state.NO_PAY:
return '待支付';
case this.state.NO_PRICE:
return '等待师傅报价';
case this.state.NO_SELECT_WORKER:
return '等待您选择师傅';
case this.state.NO_SERVICE:
return '等待师傅上门';
case this.state.NO_APPRAISE:
return '完成订单';
case this.state.ALL_FINISH:
return '服务完结';
case this.state.APPLY_REFUND:
return '已提交申请';
case this.state.REFUNDED:
return '已退款';
case this.state.CAN_NOT_REFUND:
return '未通过';
default:
return '未知状态';
stateText(listType, orderType, state) {
let current = this.state[listType];
if (listType == this.listType.T1) {
switch (state) {
case current.S1: return ['待支付'];
case current.S2: return ['待师傅接单'];
case current.S3: return ['服务中'];
case current.S4: return ['待支付尾款'];
case current.S5: return ['服务已完成，待确认'];
case current.S6: return ['订单已完成'];
}
} else if (listType == this.listType.T2) {
switch (state) {
case current.S1:
if (orderType == 1) {
return ['待师傅接单'];
}
return ['待师傅报价'];
case current.S2:
if (orderType == 1) {
return ['师傅已接单，待支付'];
}
return ['待支付'];
case current.S3: return ['服务中'];
case current.S4: return ['待支付尾款'];
case current.S5: return ['服务已完成，待确认'];
case current.S6: return ['订单已完成'];
}
} else if (listType == this.listType.T3) {
return ['未知状态'];
} else if (listType == this.listType.T4) {
switch (state) {
case current.S1: return ['退款申请审核中'];
case current.S2: return ['已退款'];
case current.S3: return ['退款未通过'];
}
}
return ['未知', '#000000'];
},
/**
* 下单
@ -113,16 +118,35 @@ export default {
/**
* 订单列表
*/
list(page, status) {
orderList(options) {
return new Promise((resolve, reject) => {
prototype.$request({
api: "order.list",
api: options.api,
data: {
page: page,
status: status,
page: options.page,
status: options.status,
},
}).then(response => {
console.log(response);
if (response.code == 1) {
let list = [];
response.data.forEach((item) => {
list.push({
listType: options.listType,
id: item.id,
orderId: item.order,
cate: "待返数据",
content: item.desc,
createTime: item.time,
serviceTime: item.times,
orderType: item.types,
state: item.status,
worker: item.shifu || {},
workerList: [],
});
});
return resolve(list);
}
return reject(response.msg);
}).catch(e => { });
});
}

219
src/pages/order/order.vue
View File

@ -5,8 +5,8 @@
class="select-item"
v-for="(selectItem, selectIndex) in tabList"
:key="selectIndex"
:class="[tabIndex == selectIndex ? 'active' : '']"
@click="switchTab(selectIndex)"
:class="{ active: tabIndex == selectIndex }"
@click="tabIndex = selectIndex"
>
<text class="text">{{ selectItem.name }}</text>
</view>
@ -16,7 +16,7 @@
class="list-tab-list"
:current="tabIndex"
:duration="300"
@change="changeTab"
@change="switchTab($event.detail.current)"
:style="{ height: tabHeight + 'px' }"
>
<block v-for="(tabItem, tabIdx) in tabList" :key="tabIdx">
@ -60,135 +60,40 @@ export default {
tabHeight: 0,
tabList: [
{
type: "all",
name: "全部订单",
page: 1,
more: false,
list: [
{
id: 1,
orderId: "xxgfdkgn1223",
cate: "家具安装",
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 2,
state: 1,
worker: {
id: 1,
name: "张师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
workerList: [
{
id: 1,
name: "张师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
{
id: 1,
name: "王师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
{
id: 1,
name: "李师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
],
},
{
id: 2,
orderId: "xxgfdkgn1224",
cate: "家具安装",
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 1,
state: 3,
worker: {
id: 1,
name: "张师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 2,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
workerList: [],
},
{
id: 3,
orderId: "xxgfdkgn1225",
cate: "家具安装",
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 1,
state: 2,
worker: {
id: 1,
name: "张师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 2,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
workerList: [],
},
],
},
{
type: "refund",
name: "退款记录",
listType: this.$models.order.listType.T1,
name: "购买订单",
api: "order.list.t1",
status: -1,
page: 1,
more: true,
list: [
{
id: 3,
orderId: "xxgfdkgn1224",
cate: "家具安装",
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 1,
state: 8,
worker: {
id: 1,
name: "张师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
workerList: [],
},
],
list: [],
},
{
listType: this.$models.order.listType.T2,
name: "报/议价订单",
api: "order.list.t2",
status: -1,
page: 1,
more: true,
list: [],
},
{
listType: this.$models.order.listType.T3,
name: "货运订单",
api: "order.list.t3",
status: -1,
page: 1,
more: true,
list: [],
},
{
listType: this.$models.order.listType.T4,
name: "退款记录",
api: "order.list.t1",
status: 1,
page: 1,
more: true,
list: [],
},
],
};
@ -200,23 +105,29 @@ export default {
WidgetLoadMore,
},
onLoad() {
this.switchTab();
this.switchTab(0);
},
onShow() {},
onReady() {},
onReachBottom() {},
onReachBottom() {
this.loadData();
},
onPullDownRefresh() {},
methods: {
/**
* 切换tab页
*/
switchTab(index) {
this.tabIndex = index;
let currentTab = this.tabList[index];
currentTab.page = 1;
currentTab.more = true;
currentTab.list = [];
this.loadData();
this.$nextTick(() => {
this.setTabHeight();
});
},
changeTab(e) {
this.switchTab(e.detail.current);
},
/**
* 动态设置页面高度
*/
setTabHeight() {
let element = ".tab" + this.tabIndex;
let query = uni.createSelectorQuery().in(this);
@ -227,9 +138,39 @@ export default {
}
});
},
/**
* 加载列表数据
*/
loadData() {
this.$models.order.list(1, -1);
let currentTab = this.tabList[this.tabIndex];
return new Promise((resolve, reject) => {
if (!currentTab.more) {
return reject("没有更多了");
}
this.$models.order
.orderList({
api: currentTab.api,
page: currentTab.page,
status: currentTab.status,
listType: currentTab.listType,
})
.then((orderList) => {
if (orderList.length == 0) {
currentTab.more = false;
} else {
currentTab.page++;
currentTab.list = currentTab.list.concat(orderList);
}
this.$nextTick(() => {
this.setTabHeight();
});
return resolve();
});
});
},
/**
* 跳转详情
*/
toDetail(id, state) {
let type = "detail";
if (state == this.$models.order.state.NO_SELECT_WORKER) {