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

完成订单列表页面

This commit is contained in:
TOP糯米 2023-03-03 14:48:01 +08:00
parent fcf9046eef
commit eff4ed30e5
4 changed files with 219 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,11 @@
<view class="btn">
<text>立即抢单</text>
</view>
<view class="btn active">
<text>立即报价</text>
<view class="btn" @click="setPrice">
<text>尾款确认</text>
</view>
<view v-if="false" class="btn">
<text>取消报价</text>
</view>
<view v-if="false" class="btn normal">
<text>已完成</text>
@ -37,11 +40,8 @@ export default {
mounted() {},
destroyed() {},
methods: {
getOrder() {
console.log("获取" + this.order.id);
},
postPrice() {
this.$emit("postPrice");
setPrice() {
this.$emit("setPrice");
},
},
};

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

@ -1,7 +1,12 @@
<template>
<view class="component-order-item">
<view class="order-head">
<view class="title">{{ order.username }}-{{ order.cate }}</view>
<view class="order-title">
<text class="type" :style="{ backgroundColor: models.order.getOrderTypeColor(order.orderType) }">
{{ models.order.getOrderTypeText(order.orderType) }}
</text>
<text class="text">{{ order.username }}-{{ order.cate }}</text>
</view>
<view class="more">
<text class="text">详情</text>
<text class="iconfont icon-jinru"></text>
@ -42,7 +47,9 @@
export default {
name: "component-order-item",
data() {
return {};
return {
models: this.$models,
};
},
props: {
order: {
@ -75,19 +82,33 @@ export default {
align-items: center;
justify-content: space-between;
padding-top: 40rpx;
.title {
}
.order-title {
display: flex;
align-items: center;
.type {
display: inline-block;
box-sizing: border-box;
padding: 9rpx 24rpx;
border-radius: 10rpx;
font-size: 24rpx;
color: #ffffff;
line-height: 24rpx;
margin-right: 22rpx;
}
.text {
font-size: 30rpx;
font-weight: bold;
color: #000000;
line-height: 30rpx;
}
}
.more {
font-size: 26rpx;
font-weight: bold;
color: #666666;
line-height: 32rpx;
}
}
.order-body {
width: 100%;
border-bottom: 2rpx solid #e8e7e7;

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

@ -26,6 +26,30 @@ export default {
// 无法退款
CAN_NOT_REFUND: 8,
},
getOrderTypeColor(type) {
switch (type) {
case this.type.NORMAL:
return '#0ec4ad';
case this.state.WORKER_PRICE:
return '#0ec4ad';
case this.state.CUSTOM_PRICE:
return '#0ec4ad';
default:
return '#ff0000';
}
},
getOrderTypeText(type) {
switch (type) {
case this.type.NORMAL:
return '一口价';
case this.state.WORKER_PRICE:
return '报价';
case this.state.CUSTOM_PRICE:
return '议价';
default:
return '未知';
}
},
getOrderStateTextColor(state) {
switch (state) {
case this.state.NO_PAY:

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

@ -1,7 +1,17 @@
<template>
<app-layout v-model="safePt" title="订单" btnType="unset">
<view class="order-container">
<view class="scroll-cate" :style="{ top: safePt + 'px' }">
<view class="fixed-box" :style="{ top: safePt + 'px' }">
<view class="search-order">
<text class="iconfont icon-sousuo"></text>
<input
class="input"
v-model="keywords"
placeholder="输入订单编号/客户姓名/电话"
placeholder-class="placeholder-style-3"
/>
</view>
<view class="scroll-box">
<scroll-view scroll-x>
<view class="cate-group">
<view
@ -16,6 +26,7 @@
</view>
</scroll-view>
</view>
</view>
<view class="order-group">
<swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
<swiper-item v-for="(item, index) in tabList" :key="index">
@ -24,7 +35,7 @@
<order-item :order="v">
<view class="order-action">
<view class="price">¥ 306.00</view>
<order-action :order="v" @postPrice="postPrice(v.id)" />
<order-action :order="v" @setPrice="showPriceModal(v.id)" />
</view>
</order-item>
</view>
@ -36,6 +47,28 @@
</swiper>
</view>
</view>
<widget-modal title="尾款确认" :show="priceModal" @close="priceModal = false">
<view class="modal-content">
<view class="input-row">
<text class="title">费用增加</text>
<input
class="input"
type="number"
v-model="currentOrder.price"
@input="currentOrder.price = parseFloat(currentOrder.price)"
/>
<text class="unit">
<text class="iconfont icon-qingchu" @click="currentOrder.price = 0"></text>
<text class="text">元</text>
</text>
</view>
<view class="desc">
<text class="text">1)添加后，请客户在小程序订单中支付尾款</text>
<text class="text">2)没有尾款的话，请直接点击确认提交</text>
</view>
<view class="btn" @click="setPrice">确认添加</view>
</view>
</widget-modal>
</app-layout>
</template>
@ -44,12 +77,13 @@ import AppLayout from "@/components/layout/layout";
import OrderItem from "@/components/order/item";
import OrderAction from "@/components/order/action";
import LoadMore from "@/components/widgets/loadmore";
import WidgetModal from "@/components/widgets/modal";
export default {
name: "get-index",
data() {
return {
utils: this.$utils,
postModal: false,
priceModal: false,
safePt: 0,
tabIndex: 0,
tabHeight: 0,
@ -130,6 +164,11 @@ export default {
list: [],
},
],
currentOrder: {
id: 0,
price: 0,
},
keywords: "",
};
},
components: {
@ -137,6 +176,7 @@ export default {
OrderItem,
OrderAction,
LoadMore,
WidgetModal,
},
onLoad() {
this.$nextTick(() => {
@ -166,6 +206,14 @@ export default {
}
});
},
showPriceModal(id) {
this.currentOrder.id = id;
this.priceModal = true;
},
setPrice() {
console.log(this.currentOrder);
this.priceModal = false;
},
},
};
</script>
@ -175,14 +223,39 @@ export default {
width: 100%;
padding-bottom: 50rpx;
}
.scroll-cate {
.fixed-box {
z-index: 15;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f7a134;
background-color: #f6f6f6;
}
.search-order {
display: flex;
align-items: center;
width: 670rpx;
height: 66rpx;
margin: 0 auto 20rpx auto;
box-sizing: border-box;
padding: 20rpx;
background-color: #ffffff;
border-radius: 10rpx;
.iconfont {
display: block;
flex-shrink: 0;
margin-right: 20rpx;
font-size: 28rpx;
}
.input {
width: 100%;
font-size: 24rpx;
color: #bebebe;
}
}
.scroll-box {
width: 100%;
background-color: #f7a134;
.cate-group {
width: 100%;
height: 96rpx;
@ -201,14 +274,15 @@ export default {
border-bottom: 7rpx solid #ffffff;
}
}
}
.order-group {
z-index: 10;
position: relative;
width: 100%;
box-sizing: border-box;
padding-top: 122rpx;
padding-top: 202rpx;
.order-item-box {
margin-bottom: 26rpx;
margin-bottom: 20rpx;
background-color: #ffffff;
box-sizing: border-box;
padding: 0 40rpx;
@ -231,4 +305,56 @@ export default {
padding: 20rpx 0;
}
}
.modal-content {
width: 100%;
.input-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 0;
border-bottom: 4rpx solid #f5f5f5;
.title {
font-size: 28rpx;
color: #666666;
}
.input {
width: 308rpx;
height: 72rpx;
box-sizing: border-box;
border: 1px solid #d8d8d8;
text-align: center;
}
.unit {
color: #333333;
}
.iconfont {
display: inline-block;
font-size: 30rpx;
margin-right: 22rpx;
}
.text {
font-size: 28rpx;
}
}
.desc {
padding: 24rpx 0;
.text {
display: block;
font-size: 24rpx;
color: #999999;
line-height: 36rpx;
}
}
.btn {
width: 100%;
height: 68rpx;
line-height: 68rpx;
text-align: center;
font-size: 32rpx;
color: #ffffff;
background-color: #7286f1;
margin-top: 15rpx;
}
}
</style>