新增接单大厅部分页面
This commit is contained in:
parent
bf08b648eb
commit
7e059570b5
|
@ -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>
|
|
@ -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>
|
|
@ -1,8 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<app-layout title="接单大厅">
|
<app-layout v-model="safePt" title="接单大厅">
|
||||||
<view class="getorder-container">
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</app-layout>
|
</app-layout>
|
||||||
|
@ -10,23 +44,162 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AppLayout from "@/components/layout/layout";
|
import AppLayout from "@/components/layout/layout";
|
||||||
|
import GetAction from "@/components/get/action";
|
||||||
export default {
|
export default {
|
||||||
name: "get-index",
|
name: "get-index",
|
||||||
data() {
|
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: {
|
components: {
|
||||||
AppLayout,
|
AppLayout,
|
||||||
|
GetAction,
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setTabHeight();
|
||||||
|
});
|
||||||
},
|
},
|
||||||
onLoad() {},
|
|
||||||
onShow() {},
|
onShow() {},
|
||||||
onReady() {},
|
onReady() {},
|
||||||
onReachBottom() {},
|
onReachBottom() {},
|
||||||
onPullDownRefresh() {},
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<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>
|
</style>
|
Loading…
Reference in New Issue