375 lines
12 KiB
Vue
375 lines
12 KiB
Vue
<template>
|
|
<app-layout v-model="safePt" title="接单大厅">
|
|
<view class="getorder-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="{ minHeight: '75vh', height: tabHeight + 'px' }"
|
|
@change="switchTab($event.detail.current)"
|
|
>
|
|
<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" @click.stop="toDetail(v.id)">
|
|
<order-item :order="v">
|
|
<view class="order-action">
|
|
<view class="price">
|
|
<text
|
|
v-if="
|
|
v.listType == 't1' ||
|
|
v.listType == 't3' ||
|
|
(v.listType == 't2' && v.orderType == 1)
|
|
"
|
|
>
|
|
¥ {{ v.price }}
|
|
</text>
|
|
</view>
|
|
<get-action
|
|
:order="v"
|
|
@postPrice="showPostPriceModal(v.id)"
|
|
@getOrder="getOrder({ id: v.id, listType: v.listType })"
|
|
/>
|
|
</view>
|
|
</order-item>
|
|
</view>
|
|
<view class="loadmore-box">
|
|
<load-more :hasMore="item.more" @loadmore="loadData" />
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }">
|
|
<view class="setting-btn" @click="setting">
|
|
<text class="iconfont icon-shezhi"></text>
|
|
<text class="text">接单设置</text>
|
|
</view>
|
|
<view class="refresh-btn" @click="refresh">
|
|
<text class="iconfont icon-shuaxin"></text>
|
|
<text class="text">刷新列表</text>
|
|
</view>
|
|
</view>
|
|
<get-post-price v-show="showPriceModal" @close="showPriceModal = false" @post="postPrice" />
|
|
</app-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import AppLayout from "@/components/layout/layout";
|
|
import GetAction from "@/components/get/action";
|
|
import OrderItem from "@/components/order/item";
|
|
import GetPostPrice from "@/components/get/post-price";
|
|
import LoadMore from "@/components/widgets/loadmore";
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
name: "get-index",
|
|
data() {
|
|
return {
|
|
utils: this.$utils,
|
|
pageConfig: {},
|
|
showPriceModal: false,
|
|
safePt: 0,
|
|
tabIndex: 0,
|
|
tabHeight: 0,
|
|
tabList: [
|
|
{
|
|
listType: "t1",
|
|
name: "购买订单",
|
|
page: 1,
|
|
more: true,
|
|
list: [],
|
|
},
|
|
{
|
|
listType: "t2",
|
|
name: "报/议价订单",
|
|
page: 1,
|
|
more: true,
|
|
list: [],
|
|
},
|
|
{
|
|
listType: "t3",
|
|
name: "配送订单",
|
|
page: 1,
|
|
more: true,
|
|
list: [],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
GetAction,
|
|
OrderItem,
|
|
GetPostPrice,
|
|
LoadMore,
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
refreshGet: (state) => state.system.refreshGet,
|
|
getTabIndex: (state) => state.system.getTabIndex,
|
|
}),
|
|
},
|
|
onLoad() {
|
|
this.pageConfig = getApp().globalData.pageConfig;
|
|
},
|
|
onShow() {
|
|
if (this.refreshGet && this.getTabIndex == this.tabIndex) {
|
|
this.switchTab(this.tabIndex);
|
|
}
|
|
if (this.getTabIndex != this.tabIndex) {
|
|
this.tabIndex = this.getTabIndex;
|
|
}
|
|
},
|
|
onReady() {},
|
|
onHide() {},
|
|
onReachBottom() {
|
|
this.loadData();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.switchTab(this.tabIndex);
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
onShareTimeline() {},
|
|
onShareAppMessage() {},
|
|
methods: {
|
|
/**
|
|
* 切换列表
|
|
*/
|
|
switchTab(index) {
|
|
this.$store.commit("system/getTabIndex", index);
|
|
this.tabIndex = index;
|
|
let currentTab = this.tabList[index];
|
|
currentTab.page = 1;
|
|
currentTab.more = true;
|
|
currentTab.list = [];
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 0,
|
|
});
|
|
this.loadData();
|
|
},
|
|
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;
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 加载数据
|
|
*/
|
|
loadData() {
|
|
let currentTab = this.tabList[this.tabIndex];
|
|
return new Promise((resolve, reject) => {
|
|
if (!currentTab.more) {
|
|
return;
|
|
}
|
|
this.$models.get
|
|
.getList({
|
|
request: {
|
|
api: "get.list." + currentTab.listType,
|
|
data: {
|
|
page: currentTab.page,
|
|
},
|
|
},
|
|
listType: currentTab.listType,
|
|
})
|
|
.then((list) => {
|
|
if (list.length == 0) {
|
|
currentTab.more = false;
|
|
} else {
|
|
currentTab.page++;
|
|
currentTab.list = currentTab.list.concat(list);
|
|
}
|
|
this.$nextTick(() => {
|
|
this.setTabHeight();
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: "无法接单",
|
|
content: e,
|
|
showCancel: false,
|
|
success(success) {
|
|
if (success.confirm) {
|
|
that.$utils.toPage("", {}, "back");
|
|
}
|
|
},
|
|
});
|
|
});
|
|
});
|
|
},
|
|
/**
|
|
* 报价
|
|
*/
|
|
showPostPriceModal(id) {
|
|
this.$store.commit("order/setPostId", id);
|
|
this.showPriceModal = true;
|
|
},
|
|
/**
|
|
* 确认价格
|
|
*/
|
|
postPrice(e) {
|
|
this.showPriceModal = false;
|
|
this.getOrder({
|
|
id: e.id,
|
|
listType: "t2",
|
|
price: e.price,
|
|
});
|
|
},
|
|
/**
|
|
* 接单
|
|
*/
|
|
getOrder(order) {
|
|
let requestData = {
|
|
id: order.id,
|
|
};
|
|
if (order.price) {
|
|
requestData.money = order.price;
|
|
}
|
|
this.$models.get
|
|
.getOrder({
|
|
api: "get.getOrder." + order.listType,
|
|
data: requestData,
|
|
})
|
|
.then((message) => {
|
|
this.$utils.toast(message).then(() => {
|
|
this.switchTab(this.tabIndex);
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
this.$utils.toast(e);
|
|
});
|
|
},
|
|
setting() {
|
|
this.$utils.toPage("/pages/member/service-info");
|
|
},
|
|
/**
|
|
* 刷新列表
|
|
*/
|
|
refresh() {
|
|
this.switchTab(this.tabIndex);
|
|
},
|
|
/**
|
|
* 查看详情
|
|
*/
|
|
toDetail(id) {
|
|
this.$store.commit("system/refreshGet", false);
|
|
let currentTab = this.tabList[this.tabIndex];
|
|
this.$utils.toPage("/pages/get/detail?list=" + currentTab.listType + "&id=" + id);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.getorder-container {
|
|
width: 100%;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
.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;
|
|
display: flex;
|
|
justify-content: center;
|
|
.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;
|
|
}
|
|
}
|
|
.common-bottom-components {
|
|
.setting-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
color: #999999;
|
|
.iconfont {
|
|
font-size: 46rpx;
|
|
}
|
|
.text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.refresh-btn {
|
|
width: 520rpx;
|
|
height: 76rpx;
|
|
border: 1px solid #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999999;
|
|
.iconfont {
|
|
font-size: 46rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
.text {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |