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

完善订单页面

This commit is contained in:
TOP糯米 2023-02-23 23:09:35 +08:00
parent 4940986b8f
commit 9e1b38581c
8 changed files with 430 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,22 +7,22 @@
order.state == $models.order.state.NO_SELECT_WORKER
"
>
<view class="btn" @click.stop="cancelOrder" :class="{ active: false }">
<view class="btn" @click.stop="cancelOrder" :class="{ active: true }">
<text>取消订单</text>
</view>
</block>
<block v-if="order.state == $models.order.state.NO_APPRAISE">
<view class="btn" v-if="false" @click.stop="appraiseOrder" :class="{ active: false }">
<view class="btn" v-if="false" @click.stop="appraiseOrder">
<text>评价师傅</text>
</view>
</block>
<block v-if="order.state == $models.order.state.NO_SERVICE">
<view class="btn" v-if="false" @click.stop="drawbackOrder" :class="{ active: false }">
<view class="btn" v-if="false" @click.stop="drawbackOrder">
<text>申请退款</text>
</view>
</block>
<block v-if="order.state == $models.order.state.ORDER_CLOSE">
<view class="btn" v-if="false" @click.stop="reapplyOrder" :class="{ active: false }">
<view class="btn" v-if="false" @click.stop="reapplyOrder">
<text>重新申请</text>
</view>
</block>

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

@ -1,9 +1,8 @@
<template>
<!-- @click="$utils.toPage('/pages/order/detail?id=' + order.id)" -->
<view class="order-item">
<view class="order-item" @click="toDetail">
<view class="order-header">
<view class="state-text">
<text>{{ $models.order.parseOrderStateText(order.state) }}</text>
<view class="state-text" :style="{ color: $models.order.getOrderStateTextColor(order.state) }">
<text>{{ $models.order.getOrderStateText(order.state) }}</text>
</view>
<view class="more">
<text class="text">详情</text>
@ -40,10 +39,23 @@
(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="text">{{ order.workerList.length }}位师傅已报价</text>
<text class="iconfont icon-jinru"></text>
</view>
</view>
</block>
</view>
</view>
@ -54,10 +66,13 @@
</template>
<script>
import WorkerItem from "@/components/worker/item";
export default {
name: "order-order-item",
data() {
return {};
return {
previewWorkerList: [],
};
},
props: {
order: {
@ -65,8 +80,18 @@ export default {
default: () => {},
},
},
components: {},
created() {},
components: {
WorkerItem,
},
created() {
for (let index = 0; index < 3; index++) {
if (this.order.workerList[index]) {
this.previewWorkerList.push(this.order.workerList[index]);
} else {
break;
}
}
},
mounted() {},
destroyed() {},
methods: {
@ -82,6 +107,13 @@ export default {
},
});
},
toDetail() {
let type = "detail";
if (this.order.status == this.$models.order.state.NO_SELECT_WORKER) {
type = "worker";
}
this.$utils.toPage("/pages/order/detail?type=" + type + "&id=" + this.order.id);
},
},
};
</script>
@ -102,7 +134,6 @@ export default {
.state-text {
font-size: 30rpx;
font-weight: bold;
color: #000000;
}
.more {
font-size: 26rpx;
@ -141,8 +172,60 @@ export default {
.row:last-child {
margin-bottom: 0;
}
.worker-box {
width: 100%;
}
}
.order-footer {
width: 100%;
}
.worker-list-group {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 20rpx 0 10rpx 0;
.list-group {
display: flex;
}
.list-item:first-child {
margin-left: 0;
}
.list-item {
display: flex;
align-items: center;
flex-direction: column;
margin-left: 36rpx;
.cover {
width: 110rpx;
height: 110rpx;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
margin-bottom: 8rpx;
}
.price {
font-size: 26rpx;
font-weight: bold;
color: #ec7655;
}
}
.more-worker {
display: flex;
align-items: center;
.text {
font-size: 26rpx;
font-weight: bold;
color: #666666;
}
.iconfont {
font-size: 32rpx;
color: #a7a7a7;
}
}
}
.worker-item-box {
width: 100%;
padding: 20rpx 0 10rpx 0;
}
</style>

104
src/components/worker/item.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<view class="worker-item">
<view class="head">
<image class="cover" :src="data.cover" mode="aspectFill" />
<text v-if="showPrice" class="price">¥ {{ data.price }}</text>
</view>
<view class="desc">
<view class="name">
<text>{{ data.name }}</text>
</view>
<view class="type" :style="{ color: $models.worker.getWorkerTypeTextColor(data.type) }">
<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>
</view>
</view>
</view>
</template>
<script>
export default {
name: "worker-item",
data() {
return {};
},
props: {
showPrice: {
type: Boolean,
default: true,
},
data: {
type: Object,
default: () => {},
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="less" scoped>
.worker-item {
width: 100%;
display: flex;
align-items: center;
.head {
display: flex;
align-items: center;
flex-direction: column;
margin-right: 28rpx;
.cover {
width: 110rpx;
height: 110rpx;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
margin-bottom: 8rpx;
}
.price {
font-size: 26rpx;
font-weight: bold;
color: #ec7655;
}
}
.desc {
display: flex;
align-items: flex-start;
flex-direction: column;
line-height: 28rpx;
.name {
font-size: 28rpx;
color: #010101;
}
.type,
.detail {
font-size: 24rpx;
font-weight: bold;
}
.type {
display: inline-block;
// color: #d9a019;
margin: 20rpx 0;
}
.detail {
color: #999999;
}
.section-text::after {
display: inline-block;
content: "|";
margin: 0 10rpx;
}
.section-text:last-child::after {
display: none;
content: "";
}
}
}
</style>

2
src/core/models.js
View File

@ -1,7 +1,9 @@
import order from "@/core/models/order";
import user from "@/core/models/user";
import worker from "@/core/models/worker";
export default {
order,
user,
worker,
}

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

@ -13,7 +13,21 @@ export default {
NO_APPRAISE: 3,
ALL_FINISH: 4,
},
parseOrderStateText(state) {
getOrderStateTextColor(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';
default:
return '#ff0000';
}
},
getOrderStateText(state) {
switch (state) {
case this.state.NO_PAY:
return '待支付';

26
src/core/models/worker.js Normal file
View File

@ -0,0 +1,26 @@
export default {
type: {
NORMAL: 1,
SETTLE: 2,
},
getWorkerTypeTextColor(type) {
switch (type) {
case this.type.NORMAL:
return '#179C43';
case this.type.SETTLE:
return '#D9A019';
default:
return '#999999';
}
},
getWorkerTypeText(type) {
switch (type) {
case this.type.NORMAL:
return '普通师傅';
case this.type.SETTLE:
return '入驻师傅';
default:
return '未知';
}
}
}

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

@ -1,6 +1,35 @@
<template>
<app-layout headerBackgroundColor="#00418c" textColor="light">
订单详情
<app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="订单详情" textColor="dark">
<view class="state-textbox">
<text class="state-text">等待您选择师傅</text>
<text class="state-desc">为保证师傅按时上门，建议尽快选择师傅并完成支付 </text>
</view>
<view class="order-detail-header">
<view class="select-group">
<view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
<text class="text">服务师傅</text>
</view>
<view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
<text class="text">订单详情</text>
</view>
</view>
</view>
<view class="order-detail-body">
<swiper
class="list-tab-list"
:current="tabIndex"
:duration="300"
@change="changeTab"
:style="{ height: tabHeight + 'px' }"
>
<swiper-item>
<view class="detail-tab tab0">选择师傅</view>
</swiper-item>
<swiper-item>
<view class="detail-tab tab1">2</view>
</swiper-item>
</swiper>
</view>
</app-layout>
</template>
@ -9,18 +38,146 @@ import AppLayout from "@/components/layout/layout";
export default {
name: "order-detail",
data() {
return {};
return {
tabIndex: 0,
tabHeight: 0,
order: {
id: 1,
orderId: "xxgfdkgn1223",
cate: "家具安装",
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
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,
},
],
},
};
},
components: {
AppLayout,
},
onLoad() {},
onLoad(e) {
if (e.type && e.type == "detail") {
this.switchTab(1);
} else {
this.switchTab(0);
}
},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
methods: {
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);
query.select(element).boundingClientRect();
query.exec((res) => {
if (res && res[0]) {
this.tabHeight = res[0].height;
}
});
},
},
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.state-textbox {
width: 750rpx;
box-sizing: border-box;
background: #8c9bec;
padding: 30rpx;
color: #ffffff;
text-align: center;
.state-text {
display: block;
font-size: 40rpx;
font-weight: bold;
line-height: 40rpx;
margin-bottom: 26rpx;
}
.state-desc {
display: block;
font-size: 24rpx;
line-height: 24rpx;
}
}
.select-group {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
margin-bottom: 20rpx;
.select-item {
width: 210rpx;
height: 115rpx;
box-sizing: border-box;
text-align: center;
.text {
font-size: 30rpx;
color: #999999;
line-height: 115rpx;
}
}
.select-item.active {
border-bottom: 7rpx solid #8b9aeb;
.text {
font-weight: bold;
color: #8b9aeb;
}
}
}
</style>

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

@ -1,6 +1,6 @@
<template>
<app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="订单" textColor="dark" btnType="unset">
<view class="order-select-group">
<view class="select-group">
<view
class="select-item"
v-for="(selectItem, selectIndex) in tabList"
@ -81,18 +81,33 @@ export default {
workerList: [
{
id: 1,
name: "张师傅",
cover: require("@/static/temp/order/1.png"),
price: "306.00",
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
{
id: 2,
id: 1,
name: "王师傅",
cover: require("@/static/temp/order/1.png"),
price: "306.00",
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
{
id: 3,
id: 1,
name: "李师傅",
cover: require("@/static/temp/order/1.png"),
price: "306.00",
price: 306.0,
type: 1,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
},
],
},
@ -110,7 +125,7 @@ export default {
name: "张师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
type: 1,
type: 2,
times: 687,
favorable_rate: 99.8,
grade: 4.5,
@ -192,7 +207,7 @@ export default {
</script>
<style lang="less" scoped>
.order-select-group {
.select-group {
width: 100%;
display: flex;
align-items: center;