增加订单页面
This commit is contained in:
parent
3659cd3ef0
commit
6be5f2a51e
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<view class="component-order-action">
|
||||
<view class="btn">
|
||||
<text>立即抢单</text>
|
||||
</view>
|
||||
<view class="btn active">
|
||||
<text>立即报价</text>
|
||||
</view>
|
||||
<view v-if="false" class="btn normal">
|
||||
<text>已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "component-order-action",
|
||||
data() {
|
||||
return {
|
||||
models: this.$models,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
date: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
props: {
|
||||
order: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
destroyed() {},
|
||||
methods: {
|
||||
getOrder() {
|
||||
console.log("获取" + this.order.id);
|
||||
},
|
||||
postPrice() {
|
||||
this.$emit("postPrice");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.component-order-action {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.btn {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
padding: 16rpx 30rpx;
|
||||
line-height: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #999999;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
.btn.active {
|
||||
color: #ffffff;
|
||||
background-color: #8b9beb;
|
||||
border: 1px solid #8b9beb;
|
||||
}
|
||||
.btn.normal {
|
||||
color: #999999;
|
||||
background-color: unset;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<view class="component-widgets-loadmore">
|
||||
<view class="text" v-if="!hasMore" @click="loadmore">
|
||||
<text>我已经到底了~</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "component-widgets-loadmore",
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
hasMore: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
initPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
created() {
|
||||
this.page = this.initPage;
|
||||
},
|
||||
mounted() {},
|
||||
destroyed() {},
|
||||
methods: {
|
||||
loadmore() {
|
||||
this.$emit("loadmore", this.page);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.component-widgets-loadmore {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.text {
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +1,234 @@
|
|||
<template>
|
||||
<app-layout title="订单" btnType="unset"></app-layout>
|
||||
<app-layout v-model="safePt" title="订单" btnType="unset">
|
||||
<view class="order-container">
|
||||
<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-box" v-for="(v, k) in item.list" :key="k">
|
||||
<order-item :order="v">
|
||||
<view class="order-action">
|
||||
<view class="price">¥ 306.00</view>
|
||||
<order-action :order="v" @postPrice="postPrice(v.id)" />
|
||||
</view>
|
||||
</order-item>
|
||||
</view>
|
||||
<view class="loadmore-box">
|
||||
<load-more :hasMore="false" />
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</app-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
import OrderItem from "@/components/order/item";
|
||||
import OrderAction from "@/components/order/action";
|
||||
import LoadMore from "@/components/widgets/loadmore";
|
||||
export default {
|
||||
name: "order",
|
||||
name: "get-index",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
utils: this.$utils,
|
||||
postModal: false,
|
||||
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: 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: [
|
||||
{
|
||||
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,
|
||||
name: "服务中",
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "完工/关闭",
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "退款",
|
||||
list: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
OrderItem,
|
||||
OrderAction,
|
||||
LoadMore,
|
||||
},
|
||||
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;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.order-container {
|
||||
width: 100%;
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
.scroll-cate {
|
||||
z-index: 15;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #f7a134;
|
||||
}
|
||||
.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;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 122rpx;
|
||||
.order-item-box {
|
||||
margin-bottom: 26rpx;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 0 40rpx;
|
||||
.order-action {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.price {
|
||||
width: 250rpx;
|
||||
font-size: 42rpx;
|
||||
font-weight: bold;
|
||||
color: #ec7655;
|
||||
line-height: 42rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.loadmore-box {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue