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 18:32:09 +08:00
parent 648be7f9f1
commit 4940986b8f
5 changed files with 307 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/order/action.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<view class="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: false }">
<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 }">
<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 }">
<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 }">
<text>重新申请</text>
</view>
</block>
<block v-if="order.state == $models.order.state.ORDER_CLOSE || order.state == $models.order.state.ALL_FINISH">
<view class="del" v-if="true" @click.stop="delOrder">
<text class="iconfont icon-shanchu"></text>
</view>
</block>
</view>
</template>
<script>
export default {
name: "order-action",
data() {
return {};
},
props: {
order: {
type: Object,
default: () => {},
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {
cancelOrder() {
this.$emit("cancelOrder");
},
delOrder() {
this.$emit("delOrder");
},
appraiseOrder() {
this.$emit("appraiseOrder");
},
drawbackOrder() {
this.$emit("drawbackOrder");
},
reapplyOrder() {
this.$emit("reapplyOrder");
},
},
};
</script>
<style lang="less" scoped>
.order-action {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
.btn,
.del {
margin-left: 30rpx;
}
.btn {
display: inline-block;
background: rgba(139, 155, 235, 0);
border: 1px solid #999999;
border-radius: 28rpx;
padding: 15rpx 26rpx;
font-size: 26rpx;
color: #999999;
line-height: 26rpx;
}
.btn.active {
color: #666666;
}
.del {
color: #b5b5b5;
font-size: 40rpx;
}
}
</style>

148
src/components/order/item.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<!-- @click="$utils.toPage('/pages/order/detail?id=' + order.id)" -->
<view class="order-item">
<view class="order-header">
<view class="state-text">
<text>{{ $models.order.parseOrderStateText(order.state) }}</text>
</view>
<view class="more">
<text class="text">详情</text>
<text class="iconfont icon-jinru"></text>
</view>
</view>
<view class="order-body">
<view class="row">
<text class="title">订单编号：</text>
<text class="text">{{ order.orderId }}</text>
<text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
</view>
<view class="row">
<text class="title">服务分类：</text>
<text class="text">{{ order.cate }}</text>
</view>
<view class="row limit-line clamp-1">
<text class="title">需求内容：</text>
<text class="text">{{ order.explain }}</text>
</view>
<view class="row">
<text class="title">下单时间：</text>
<text class="text">{{ order.createTime }}</text>
</view>
<view class="row">
<text class="title">服务时间：</text>
<text class="text">{{ order.serviceTime }}</text>
</view>
<view class="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)
"
>
单个师傅
</block>
<block v-else>
师傅列表
</block>
</view>
</view>
<view class="order-footer">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
name: "order-order-item",
data() {
return {};
},
props: {
order: {
type: Object,
default: () => {},
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {
copyOrderId(orderId) {
const that = this;
uni.setClipboardData({
data: orderId,
success(result) {
that.$utils.toast("内容已复制");
},
fail(error) {
that.$utils.toast("复制失败");
},
});
},
},
};
</script>
<style lang="less" scoped>
.order-item {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #ffffff;
.order-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 32rpx;
padding: 30rpx 0 18rpx 0;
.state-text {
font-size: 30rpx;
font-weight: bold;
color: #000000;
}
.more {
font-size: 26rpx;
color: #666666;
display: flex;
align-items: center;
}
.iconfont {
color: #a7a7a7;
font-size: 32rpx;
margin-left: 8rpx;
}
}
}
.order-body {
width: 100%;
border-bottom: 2rpx solid #e8e7e7;
padding: 18rpx 0;
.row {
position: relative;
width: 100%;
font-size: 28rpx;
line-height: 30rpx;
margin-bottom: 22rpx;
.title {
color: #999999;
}
.text {
color: #000000;
}
.copy {
color: #8194f2;
margin-left: 24rpx;
}
}
.row:last-child {
margin-bottom: 0;
}
}
.order-footer {
width: 100%;
}
</style>

21
src/components/order/order-item.vue
View File

@ -1,21 +0,0 @@
<template>
<view class="order-item">
</view>
</template>
<script>
export default {
name: "order-order-item",
data() {
return {};
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="less" scoped></style>

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

@ -1,9 +1,17 @@
export default {
type: {
NORMAL: 1,
WORKER_PRICE: 2,
CUSTOM_PRICE: 3,
},
state: {
ORDER_CLOSE: -2,
NO_PAY: -1,
NO_PRICE: 0,
NO_SELECT_WORKER: 1,
NO_SERVICE: 2,
NO_APPRAISE: 3,
ALL_FINISH: 4,
},
parseOrderStateText(state) {
switch (state) {

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

@ -23,44 +23,16 @@
<swiper-item>
<view class="tab-item" :class="['tab' + tabIdx]">
<view class="order-list">
<block v-for="(item, index) in tabItem.list" :key="index">
<view class="order-item" @click="$utils.toPage('/pages/order/detail?id=' + item.id)">
<view class="order-header">
<view class="state-text">
<text>等待师傅报价</text>
</view>
<view class="more">
<text class="text">详情</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="order-item" v-for="(item, index) in tabItem.list" :key="index">
<order-item :order="item" :index="index">
<view class="action-group">
<order-action :order="item" />
</view>
<view class="order-body">
<view class="row">
<text class="title">订单编号：</text>
<text class="text">{{ item.orderId }}</text>
<text class="copy" @click.stop="copyOrderId(item.orderId)">复制</text>
</view>
<view class="row">
<text class="title">服务分类：</text>
<text class="text">{{ item.cate }}</text>
</view>
<view class="row limit-line clamp-1">
<text class="title">需求内容：</text>
<text class="text">{{ item.explain }}</text>
</view>
<view class="row">
<text class="title">下单时间：</text>
<text class="text">{{ item.createTime }}</text>
</view>
<view class="row">
<text class="title">服务时间：</text>
<text class="text">{{ item.serviceTime }}</text>
</view>
<view class="worker-list"></view>
</view>
<view class="order-footer"></view>
</view>
</block>
</order-item>
</view>
</view>
<view class="more-list">
<widget-load-more :hasMore="tabItem.more" />
</view>
</view>
</swiper-item>
@ -72,6 +44,9 @@
<script>
import AppLayout from "@/components/layout/layout";
import OrderItem from "@/components/order/item";
import OrderAction from "@/components/order/action";
import WidgetLoadMore from "@/components/widgets/loadmore";
export default {
name: "order",
data() {
@ -82,6 +57,7 @@ export default {
{
type: "all",
name: "全部订单",
more: true,
list: [
{
id: 1,
@ -90,8 +66,8 @@ export default {
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 1,
status: 0,
orderType: 2,
state: 1,
worker: {
id: 1,
name: "张师傅",
@ -128,7 +104,7 @@ export default {
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 1,
status: 1,
state: 1,
worker: {
id: 1,
name: "张师傅",
@ -146,13 +122,39 @@ export default {
{
type: "drawback",
name: "退款记录",
list: [],
more: true,
list: [
{
id: 3,
orderId: "xxgfdkgn1224",
cate: "家具安装",
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 1,
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: [],
},
],
},
],
};
},
components: {
AppLayout,
OrderItem,
OrderAction,
WidgetLoadMore,
},
onLoad() {
this.$nextTick(() => {
@ -185,18 +187,6 @@ export default {
});
},
loadData() {},
copyOrderId(orderId) {
const t = this;
uni.setClipboardData({
data: orderId,
success(result) {
t.$utils.toast("内容已复制");
},
fail(error) {
t.$utils.toast("复制失败");
},
});
},
},
};
</script>
@ -230,64 +220,20 @@ export default {
}
.order-list-group {
width: 100%;
touch-action: none;
.list-tab-list {
width: 100%;
}
}
.order-item {
width: 100%;
padding: 30rpx;
box-sizing: border-box;
background-color: #ffffff;
margin-bottom: 30rpx;
.order-header {
.more-list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 32rpx;
.state-text {
font-size: 30rpx;
font-weight: bold;
color: #000000;
}
.more {
font-size: 26rpx;
color: #666666;
display: flex;
align-items: center;
}
.iconfont {
color: #a7a7a7;
font-size: 32rpx;
margin-left: 8rpx;
}
padding-bottom: 12px;
}
}
.order-body {
width: 700rpx;
border-bottom: 2rpx solid #e8e7e7;
padding: 35rpx 0 18rpx 0;
.row {
position: relative;
.order-item {
width: 100%;
font-size: 28rpx;
line-height: 30rpx;
margin-bottom: 22rpx;
.title {
color: #999999;
}
.text {
color: #000000;
}
.copy {
color: #8194f2;
margin-left: 24rpx;
}
margin-bottom: 30rpx;
}
.row:last-child {
margin-bottom: 0;
.action-group {
width: 100%;
padding: 30rpx 0;
}
}
</style>