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-02 23:52:24 +08:00
parent 048dd1cc5f
commit c9fdf4ece1
4 changed files with 286 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@ -114,4 +114,22 @@ export default {
color: #ffffff;
}
}
// 底部固定按钮
.common-bottom-components {
z-index: 20;
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-width: 750px;
width: 100%;
height: 100rpx;
margin: 0 auto;
box-sizing: border-box;
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
}
</style>

45
src/components/get/action.vue
View File

@ -1,12 +1,21 @@
<template>
<view class="component-get-action"> </view>
<view class="component-get-action">
<view class="btn" @click="getOrder" v-if="order.orderType == models.order.type.NORMAL">
<text>立即抢单</text>
</view>
<view class="btn" @click="postPrice" v-if="order.orderType == models.order.type.WORKER_PRICE">
<text>立即报价</text>
</view>
</view>
</template>
<script>
export default {
name: "component-get-action",
data() {
return {};
return {
models: this.$models,
};
},
props: {
date: {
@ -14,12 +23,40 @@ export default {
default: () => {},
},
},
props: {
order: {
type: Object,
default: () => {},
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
methods: {
getOrder() {
console.log("获取" + this.order.id);
},
postPrice() {
this.$emit("postPrice");
},
},
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.component-get-action {
width: 100%;
text-align: right;
.btn {
display: inline-block;
font-size: 26rpx;
color: #ffffff;
padding: 18rpx 30rpx;
line-height: 26rpx;
background-color: #8b9beb;
border-radius: 30rpx;
margin-left: 20rpx;
}
}
</style>

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

@ -0,0 +1,124 @@
<template>
<view class="component-order-item">
<view class="order-head">
<view class="title">{{ order.username }}-{{ order.cate }}</view>
<view class="more">
<text class="text">详情</text>
<text class="iconfont icon-jinru"></text>
</view>
</view>
<view class="order-body">
<view class="order-desc-row datetime">
<text class="text">{{ order.createTime }}</text>
</view>
<view class="order-desc-row">
<text class="title">订单编号：</text>
<text class="text">{{ order.orderId }}</text>
</view>
<view class="order-desc-row">
<text class="title">服务分类：</text>
<text class="text">{{ order.cate }}</text>
</view>
<view class="order-desc-row limit-line clamp-1">
<text class="title">需求内容：</text>
<text class="text">{{ order.content }}</text>
</view>
<view class="order-desc-row">
<text class="title">下单时间：</text>
<text class="text">{{ order.createTime }}</text>
</view>
<view class="order-desc-row">
<text class="title">服务时间：</text>
<text class="text">{{ order.serviceTime }}</text>
</view>
</view>
<view class="order-footer">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
name: "component-order-item",
data() {
return {};
},
props: {
order: {
type: Object,
default: () => {},
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="less" scoped>
.component-order-item {
.order-item {
width: 100%;
box-sizing: border-box;
padding: 0 28rpx;
background-color: #ffffff;
margin-bottom: 26rpx;
}
.order-item:last-child {
margin-bottom: 0;
}
.order-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 40rpx;
.title {
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;
padding: 24rpx 0;
}
.order-desc-row {
position: relative;
width: 100%;
font-size: 28rpx;
line-height: 30rpx;
margin-bottom: 22rpx;
.title {
color: #999999;
}
.text {
color: #000000;
}
}
.order-desc-row:last-child {
margin-bottom: 0;
}
.order-desc-row.datetime {
margin-bottom: 40rpx;
.text {
color: #999999;
}
}
.order-footer {
width: 100%;
box-sizing: border-box;
padding: 24rpx 0;
}
}
</style>

134
src/pages/get/index.vue
View File

@ -20,36 +20,44 @@
<swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
<swiper-item v-for="(item, index) in tabList" :key="index">
<view :class="['tab' + index]">
<view
class="order-item"
v-for="(v, k) in item.list"
:key="k"
@click="utils.toPage('/pages/get/detail?id=' + v.id)"
>
<view class="order-head">
<view class="title">{{ v.username }}-{{ v.cate }}</view>
<view class="more">
<text class="text">详情</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="order-item-box" v-for="(v, k) in item.list" :key="k">
<order-item :order="v">
<view class="order-action">
<view class="price">¥ 306.00</view>
<get-action :order="v" @postPrice="postPrice(v.id)" />
</view>
</order-item>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
<view class="common-bottom-components">
<view class="setting-btn" @click="setting">
<text class="iconfont icon-shezhi"></text>
<text class="text">接单设置</text>
</view>
<view class="refresh-btn" @click="refresh">
<text class="iconfont icon-shuaxin"></text>
<text class="text">刷新列表</text>
</view>
</view>
<widget-modal title="报价" :show="postModal" @close="postModal = false"> 开始报价 </widget-modal>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import GetAction from "@/components/get/action";
import OrderItem from "@/components/order/item";
import WidgetModal from "@/components/widgets/modal";
export default {
name: "get-index",
data() {
return {
utils: this.$utils,
postModal: false,
safePt: 0,
tabIndex: 0,
tabHeight: 0,
@ -82,12 +90,37 @@ export default {
price: 306,
username: "李先生",
},
{
id: 3,
orderId: "xxgfdkgn1223",
cate: "家具安装",
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 1,
state: 1,
price: 306,
username: "李先生",
},
],
},
{
id: 2,
name: "报价订单",
list: [],
list: [
{
id: 2,
orderId: "xxgfdkgn1223",
cate: "家具安装",
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 2,
state: 1,
price: 306,
username: "李先生",
},
],
},
{
id: 3,
@ -105,6 +138,8 @@ export default {
components: {
AppLayout,
GetAction,
OrderItem,
WidgetModal,
},
onLoad() {
this.$nextTick(() => {
@ -133,7 +168,15 @@ export default {
this.tabHeight = res[0].height;
}
});
console.log(this.tabHeight);
},
postPrice(id) {
this.postModal = true;
},
setting() {
console.log("设置");
},
refresh() {
console.log("刷新");
},
},
};
@ -142,6 +185,7 @@ export default {
<style lang="less" scoped>
.getorder-container {
width: 100%;
padding-bottom: 120rpx;
}
.scroll-cate {
z-index: 15;
@ -172,33 +216,57 @@ export default {
.order-group {
z-index: 10;
position: relative;
padding-top: 131rpx;
width: 100%;
.order-item {
width: 100%;
box-sizing: border-box;
padding: 0 28rpx;
padding-top: 122rpx;
.order-item-box {
margin-bottom: 26rpx;
background-color: #ffffff;
margin-bottom: 35rpx;
}
.order-item:last-child {
margin-bottom: 0;
}
.order-head {
box-sizing: border-box;
padding: 0 40rpx;
.order-action {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 30rpx;
font-weight: bold;
color: #000000;
line-height: 30rpx;
}
.more {
font-size: 26rpx;
.price {
width: 250rpx;
font-size: 42rpx;
font-weight: bold;
color: #666666;
line-height: 26rpx;
color: #ec7655;
line-height: 42rpx;
flex-shrink: 0;
}
}
}
.common-bottom-components {
.setting-btn {
display: flex;
align-items: center;
flex-direction: column;
color: #999999;
.iconfont {
font-size: 46rpx;
}
.text {
font-size: 24rpx;
}
}
.refresh-btn {
width: 520rpx;
height: 76rpx;
border: 1px solid #999999;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
.iconfont {
font-size: 46rpx;
margin-right: 24rpx;
}
.text {
font-size: 36rpx;
}
}
}