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-03 00:26:01 +08:00
parent 3659cd3ef0
commit 6be5f2a51e
3 changed files with 345 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/order/action.vue Normal file
View File

@ -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>

51
src/components/widgets/loadmore.vue Normal file
View File

@ -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>

222
src/pages/order/order.vue
View File

@ -1,24 +1,234 @@
<template> <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> </template>
<script> <script>
import AppLayout from "@/components/layout/layout"; 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 { export default {
name: "order", name: "get-index",
data() { 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: { components: {
AppLayout, AppLayout,
OrderItem,
OrderAction,
LoadMore,
},
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;
}
});
},
},
}; };
</script> </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>