新增接单大厅部分页面

This commit is contained in:
TOP糯米 2023-03-02 21:49:26 +08:00
parent bf08b648eb
commit 7e059570b5
3 changed files with 229 additions and 7 deletions

View File

@ -0,0 +1,25 @@
<template>
<view class="component-get-action"> </view>
</template>
<script>
export default {
name: "component-get-action",
data() {
return {};
},
props: {
date: {
type: Object,
default: () => {},
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="less" scoped></style>

24
src/pages/get/detail.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<app-layout title="接单详情"> </app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
export default {
name: "get-detail",
data() {
return {};
},
components: {
AppLayout,
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped></style>

View File

@ -1,8 +1,42 @@
<template>
<app-layout title="接单大厅">
<app-layout v-model="safePt" title="接单大厅">
<view class="getorder-container">
<view class="tab-cate-group">
<view class="scroll-cate" :style="{ top: safePt + 'px' }">
<scroll-view scroll-x>
<view class="cate-group">
<view
class="cate-item"
v-for="(item, index) in tabList"
:key="index"
:class="{ active: tabIndex == index }"
@click="tabIndex = index"
>
{{ item.name }}
</view>
</view>
</scroll-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">
<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>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</app-layout>
@ -10,23 +44,162 @@
<script>
import AppLayout from "@/components/layout/layout";
import GetAction from "@/components/get/action";
export default {
name: "get-index",
data() {
return {};
return {
utils: this.$utils,
safePt: 0,
tabIndex: 0,
tabHeight: 0,
tabList: [
{
id: 1,
name: "一口价订单",
list: [
{
id: 1,
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,
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: [],
},
{
id: 3,
name: "指派订单",
list: [],
},
{
id: 4,
name: "配送订单",
list: [],
},
],
};
},
components: {
AppLayout,
GetAction,
},
onLoad() {
this.$nextTick(() => {
this.setTabHeight();
});
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
methods: {
switchTab(index) {
this.tabIndex = index;
this.$nextTick(() => {
this.setTabHeight();
});
},
changeTab(e) {
this.switchTab(e.detail.current);
},
setTabHeight() {
let query = uni.createSelectorQuery().in(this);
query.select(".tab" + this.tabIndex).boundingClientRect();
query.exec((res) => {
if (res && res[0]) {
this.tabHeight = res[0].height;
}
});
console.log(this.tabHeight);
},
},
};
</script>
<style lang="less" scoped>
.getorder-container {
width: 100%;
}
.scroll-cate {
z-index: 15;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #7286f1;
}
.cate-group {
width: 100%;
height: 96rpx;
white-space: nowrap;
box-sizing: border-box;
padding: 5rpx 0;
.cate-item {
display: inline-block;
height: 86rpx;
line-height: 86rpx;
margin: 0 20rpx;
color: #ffffff;
}
.cate-item.active {
box-sizing: border-box;
border-bottom: 7rpx solid #ffffff;
}
}
.order-group {
z-index: 10;
position: relative;
padding-top: 131rpx;
width: 100%;
.order-item {
width: 100%;
box-sizing: border-box;
padding: 0 28rpx;
background-color: #ffffff;
margin-bottom: 35rpx;
}
.order-item:last-child {
margin-bottom: 0;
}
.order-head {
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;
font-weight: bold;
color: #666666;
line-height: 26rpx;
}
}
}
</style>