新增订单详情页面
This commit is contained in:
parent
6bedd1aad2
commit
d0386fd24c
|
|
@ -49,6 +49,12 @@
|
|||
"navigationBarTitleText": "我的订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/demand/demand",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<app-layout headerBackgroundColor="#00418c" textColor="light">
|
||||
订单详情
|
||||
</app-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
export default {
|
||||
name: "order-detail",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,40 +1,29 @@
|
|||
<template>
|
||||
<app-layout
|
||||
headerBackgroundColor="#F6F6F6"
|
||||
backgroundColor="#F6F6F6"
|
||||
title="订单"
|
||||
textColor="dark"
|
||||
>
|
||||
<view class="order-menu">
|
||||
<app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="订单" textColor="dark" btnType="unset">
|
||||
<view class="order-select-group">
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="[tabIndex == 0 ? 'active' : '']"
|
||||
@click="tabIndex = 0"
|
||||
class="select-item"
|
||||
v-for="(selectItem, selectIndex) in tabList"
|
||||
:key="selectIndex"
|
||||
:class="[tabIndex == selectIndex ? 'active' : '']"
|
||||
@click="switchTab(selectIndex)"
|
||||
>
|
||||
<text class="text">全部订单</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="[tabIndex == 1 ? 'active' : '']"
|
||||
@click="tabIndex = 1"
|
||||
>
|
||||
<text class="text">退款记录</text>
|
||||
<text class="text">{{ selectItem.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-list-container">
|
||||
<swiper
|
||||
class="list-container"
|
||||
:current="tabIndex"
|
||||
:duration="300"
|
||||
@change="changeTab"
|
||||
:style="{ height: tabHeight + 'px' }"
|
||||
>
|
||||
<view class="order-list-group">
|
||||
<swiper class="list-tab-list" :current="tabIndex" :duration="300" @change="changeTab" :style="{ height: tabHeight + 'px' }">
|
||||
<block v-for="(tabItem, tabIdx) in tabList" :key="tabIdx">
|
||||
<swiper-item>
|
||||
<view class="tab-item tab0">1</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="tab-item tab1">2</view>
|
||||
<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>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</app-layout>
|
||||
|
|
@ -47,29 +36,127 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
tabHeight: 0,
|
||||
tabList: [
|
||||
{
|
||||
type: "all",
|
||||
name: "全部订单",
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
orderId: "xxgfdkgn1223",
|
||||
cate: "家具安装",
|
||||
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
||||
createTime: "2022-10-18 10:56:34",
|
||||
serviceTime: "2022-10-18 10:56:34",
|
||||
orderType: 1,
|
||||
status: 0,
|
||||
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: [
|
||||
{
|
||||
id: 1,
|
||||
cover: require("@/static/temp/order/1.png"),
|
||||
price: "306.00",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
cover: require("@/static/temp/order/1.png"),
|
||||
price: "306.00",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
cover: require("@/static/temp/order/1.png"),
|
||||
price: "306.00",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
orderId: "xxgfdkgn1224",
|
||||
cate: "家具安装",
|
||||
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
||||
createTime: "2022-10-18 10:56:34",
|
||||
serviceTime: "2022-10-18 10:56:34",
|
||||
orderType: 1,
|
||||
status: 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: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "drawback",
|
||||
name: "退款记录",
|
||||
list: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
},
|
||||
onLoad() {},
|
||||
onLoad() {
|
||||
this.$nextTick(() => {
|
||||
this.setTabHeight();
|
||||
});
|
||||
},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.tabIndex = index;
|
||||
this.loadData();
|
||||
this.$nextTick(() => {
|
||||
this.setTabHeight();
|
||||
});
|
||||
},
|
||||
changeTab(e) {
|
||||
this.switchTab(e.detail.current);
|
||||
},
|
||||
setTabHeight() {
|
||||
let element = ".tab" + this.tabIndex;
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select(element).boundingClientRect();
|
||||
query.exec((res) => {
|
||||
if (res && res[0]) {
|
||||
this.tabHeight = res[0].height;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadData() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.order-menu {
|
||||
.order-select-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
.menu-item {
|
||||
.select-item {
|
||||
width: 210rpx;
|
||||
height: 115rpx;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -80,7 +167,7 @@ export default {
|
|||
line-height: 115rpx;
|
||||
}
|
||||
}
|
||||
.menu-item.active {
|
||||
.select-item.active {
|
||||
border-bottom: 7rpx solid #8b9aeb;
|
||||
.text {
|
||||
font-weight: bold;
|
||||
|
|
@ -88,12 +175,17 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.order-list-container {
|
||||
.order-list-group {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background-color: #ffffff;
|
||||
.list-container {
|
||||
touch-action: none;
|
||||
.list-tab-list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.order-item {
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Loading…
Reference in New Issue