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 22:46:06 +08:00
parent 54a93f9c5a
commit fcdc39e724
5 changed files with 160 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
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: titleColor }">
<text>{{ title }}</text>
<view class="state-text" :style="{ color: stateTextColor }">
<text>{{ stateText }}</text>
</view>
<view class="more">
<text class="text">详情</text>
@ -31,23 +31,41 @@
<text class="title">服务时间：</text>
<text class="text">{{ order.serviceTime }}</text>
</view>
<view class="order-worker-box">
<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>
<!-- 购买订单|报/议价订单|货运订单 可展示师傅信息 -->
<block v-if="order.listType == listType.T1 || order.listType == listType.T2 || order.listType == listType.T3">
<view class="order-worker-box">
<!-- 报价订单未选择师傅 展示师傅列表 -->
<block
v-if="order.listType == listType.T2 && order.orderType == 2 && order.state == state[order.listType].S1"
>
<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>
</view>
</view>
<view class="more-worker">
<text class="worker-num">{{ order.workerList.length }}位师傅已报价</text>
<text class="iconfont icon-jinru"></text>
</view>
</block>
<!-- 购买订单|报/议价订单已选择师傅 展示师傅简介 -->
<block
v-if="
(order.listType == listType.T1 &&
order.state != state[order.listType].S1 &&
order.state != state[order.listType].S2) ||
(order.listType == listType.T2 && order.state != state[order.listType].S1)
"
>
<view class="worker-item-box">
<worker-item :data="order.worker" />
</view>
</block>
</view>
</view>
</block>
</view>
<view class="order-footer">
<slot></slot>
@ -81,13 +99,15 @@ export default {
for (let index = 0; index < 3; index++) {
if (this.order.workerList[index]) {
this.previewWorkerList.push(this.order.workerList[index]);
} else {
break;
}
} else 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;
let [stateText, stateDesc, stateTextColor] = this.$models.order.stateText(
this.order.listType,
this.order.orderType,
this.order.state
);
this.stateText = stateText;
this.stateTextColor = stateTextColor || "#000000";
},
mounted() {},
destroyed() {},

9
src/components/worker/item.vue
View File

@ -2,7 +2,7 @@
<view class="component-worker-item">
<view class="head">
<image class="cover" :src="data.cover" mode="aspectFill" />
<text v-if="showPrice" class="price">¥ {{ data.price }}</text>
<text v-if="showPrice" class="price">¥ {{ utils.formatNumber(data.price || 0, 2) }}</text>
</view>
<view class="desc">
<view class="name">
@ -12,9 +12,9 @@
<text>{{ models.worker.getWorkerTypeText(data.type) }}</text>
</view>
<view class="detail">
<text class="section-text">服务{{ data.times }}次</text>
<text class="section-text">好评率{{ data.favorable_rate }}%</text>
<text class="section-text">评分{{ data.grade }}/5.0 </text>
<text class="section-text">服务{{ data.times || 0 }}次</text>
<text class="section-text">好评率{{ data.favorable_rate || 0 }}%</text>
<text class="section-text">评分{{ data.grade || 0 }}/5.0 </text>
</view>
</view>
</view>
@ -25,6 +25,7 @@ export default {
name: "component-worker-item",
data() {
return {
utils: this.$utils,
models: this.$models,
};
},

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

@ -46,7 +46,7 @@ export default {
let current = this.state[listType];
if (listType == this.listType.T1) {
switch (state) {
case current.S1: return ['待支付'];
case current.S1: return ['待支付', '为保证师傅按时上门，建议尽快选择师傅并完成支付'];
case current.S2: return ['待师傅接单'];
case current.S3: return ['服务中'];
case current.S4: return ['待支付尾款'];
@ -59,12 +59,12 @@ export default {
if (orderType == 1) {
return ['待师傅接单'];
}
return ['待师傅报价'];
return ['待选择师傅'];
case current.S2:
if (orderType == 1) {
return ['师傅已接单，待支付'];
}
return ['待支付'];
return ['已选择师傅，待支付'];
case current.S3: return ['服务中'];
case current.S4: return ['待支付尾款'];
case current.S5: return ['服务已完成，待确认'];
@ -120,13 +120,7 @@ export default {
*/
orderList(options) {
return new Promise((resolve, reject) => {
prototype.$request({
api: options.api,
data: {
page: options.page,
status: options.status,
},
}).then(response => {
prototype.$request(options.request).then(response => {
if (response.code == 1) {
let list = [];
response.data.forEach((item) => {
@ -140,7 +134,7 @@ export default {
serviceTime: item.times,
orderType: item.types,
state: item.status,
worker: item.shifu || {},
worker: item.shifu,
workerList: [],
});
});
@ -149,5 +143,31 @@ export default {
return reject(response.msg);
}).catch(e => { });
});
},
/**
* 订单详情
*/
orderDetail(options) {
return new Promise((resolve, reject) => {
prototype.$request(options.request).then(response => {
if (response.code == 1) {
return resolve({
id: response.data.id,
address: response.data.address,
orderId: response.data.order,
cate: "待返数据",
content: response.data.desc,
createTime: response.data.time,
serviceTime: response.data.times,
orderType: response.data.types,
state: response.data.status,
images: [],
worker: [],
workerList: [],
});
}
return reject(response.msg);
}).catch(e => { });
});
}
}

142
src/pages/order/detail.vue
View File

@ -1,15 +1,15 @@
<template>
<app-layout title="订单详情">
<view class="state-textbox">
<text class="state-text">等待您选择师傅</text>
<text class="state-desc">为保证师傅按时上门，建议尽快选择师傅并完成支付 </text>
<text class="state-text">{{ stateText }}</text>
<text class="state-desc" v-if="stateDesc">{{ stateDesc }}</text>
</view>
<view class="order-detail-header">
<view class="select-group">
<view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
<view class="select-item" :class="{ active: tabIndex == 0 }" @click="switchTab(0)">
<text class="text">服务师傅</text>
</view>
<view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
<view class="select-item" :class="{ active: tabIndex == 1 }" @click="switchTab(1)">
<text class="text">订单详情</text>
</view>
</view>
@ -19,7 +19,7 @@
class="list-tab-list"
:current="tabIndex"
:duration="300"
@change="changeTab"
@change="switchTab($event.detail.current)"
:style="{ height: tabHeight + 'px' }"
>
<swiper-item>
@ -132,72 +132,13 @@ export default {
pageConfig: {},
tabIndex: 0,
tabHeight: 0,
order: {
id: 1,
orderId: "xxgfdkgn1223",
cate: "家具安装",
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
images: [
{
src: require("@/static/temp/cate/1.png"),
},
{
src: require("@/static/temp/cate/1.png"),
},
{
src: require("@/static/temp/cate/1.png"),
},
{
src: require("@/static/temp/cate/1.png"),
},
],
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: 2,
name: "王师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
{
id: 3,
name: "李师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
],
},
stateText: "",
stateDesc: "",
stateTextColor: "",
id: 0,
listType: "",
orderType: 0,
order: {},
};
},
components: {
@ -209,26 +150,38 @@ export default {
onLoad(e) {
this.pageConfig = getApp().globalData.pageConfig;
if (e.type && e.type == "detail") {
if (e.id && e.id > 0) {
this.id = e.id;
} else {
return this.$utils.toast("参数错误").then(() => {
this.$utils.toPage("", {}, "back");
});
}
if (e.tab && e.tab == "detail") {
this.switchTab(1);
} else {
this.switchTab(0);
}
if (e.list) {
this.listType = e.list;
}
this.loadDetail();
},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {
/**
* 切换Tab
*/
switchTab(index) {
this.tabIndex = index;
this.$nextTick(() => {
this.setTabHeight();
});
},
changeTab(e) {
this.switchTab(e.detail.current);
},
setTabHeight() {
let element = ".tab" + this.tabIndex;
let query = uni.createSelectorQuery().in(this);
@ -239,6 +192,7 @@ export default {
}
});
},
// 复制订单号
copyOrderId(orderId) {
const that = this;
uni.setClipboardData({
@ -251,9 +205,15 @@ export default {
},
});
},
/**
* 师傅详情
*/
workerDetail(id) {
this.$utils.toPage("/pages/worker/detail?id=" + id);
},
/**
* 选择师傅
*/
chooseWorker(id) {
const that = this;
uni.showModal({
@ -265,6 +225,36 @@ export default {
},
});
},
loadDetail() {
this.$models.order
.orderDetail({
request: {
api: "order.detail.t1",
data: {
id: this.id,
},
},
})
.then((detail) => {
let [stateText, stateDesc, stateTextColor] = this.$models.order.stateText(
this.listType,
detail.orderType,
detail.state
);
this.stateText = stateText;
this.stateDesc = stateDesc;
this.stateTextColor = stateTextColor;
this.order = {
...detail,
listType: this.listType,
};
})
.catch((e) => {
this.$utils.toast(e).then(() => {
this.$utils.toPage("", {}, "back");
});
});
},
},
};
</script>
@ -282,12 +272,12 @@ export default {
font-size: 40rpx;
font-weight: bold;
line-height: 40rpx;
margin-bottom: 26rpx;
}
.state-desc {
display: block;
font-size: 24rpx;
line-height: 24rpx;
margin-top: 26rpx;
}
}
.select-group {

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

@ -27,7 +27,7 @@
class="order-item"
v-for="(item, index) in tabItem.list"
:key="index"
@click="toDetail(item.id, item.state)"
@click="toDetail(item.id, item.state, item.listType, item.orderType)"
>
<order-item :order="item" :index="index">
<view class="action-group">
@ -89,7 +89,7 @@ export default {
{
listType: this.$models.order.listType.T4,
name: "退款记录",
api: "order.list.t1",
api: "order.list.t4",
status: 1,
page: 1,
more: true,
@ -149,9 +149,13 @@ export default {
}
this.$models.order
.orderList({
api: currentTab.api,
page: currentTab.page,
status: currentTab.status,
request: {
api: currentTab.api,
data: {
page: currentTab.page,
status: currentTab.status,
},
},
listType: currentTab.listType,
})
.then((orderList) => {
@ -171,12 +175,13 @@ export default {
/**
* 跳转详情
*/
toDetail(id, state) {
let type = "detail";
if (state == this.$models.order.state.NO_SELECT_WORKER) {
type = "worker";
toDetail(id, state, listType, orderType) {
let tab = "detail";
// 报价订单未选择师傅 跳转后切换到师傅列表
if (listType == this.$models.order.listType.T2 && orderType == 2 && state == this.$models.order.state[listType].T1) {
tab = "worker";
}
this.$utils.toPage("/pages/order/detail?type=" + type + "&id=" + id);
this.$utils.toPage("/pages/order/detail?list=" + listType + "&tab=" + tab + "&id=" + id);
},
},
};