java-mall-app/paotui/order/lists.vue
2024-11-01 16:35:40 +08:00

588 lines
14 KiB
Vue

<template>
<view class="content">
<scroll-view scroll-x class="bg-white nav text-center">
<view class="cu-item" :class="1 ==TabCur?'text-yellow cur':''" @tap="tabSelect" :data-id="1">
{{__('新任务')}}
</view>
<view class="cu-item" :class="2 ==TabCur?'text-yellow cur':''" @tap="tabSelect" :data-id="2">
{{__('待取货')}}
</view>
<view class="cu-item" :class="3 ==TabCur?'text-yellow cur':''" @tap="tabSelect" :data-id="3">
{{__('配送中')}}
</view>
<view class="cu-item" :class="4 ==TabCur?'text-yellow cur':''" @tap="tabSelect" :data-id="4">
{{__('已完成')}}
</view>
</scroll-view>
<scroll-view class="m-product-all" scroll-y="true" @scrolltolower="scrollbottom" style="width:100%;height:100%;position: absolute;" v-if="(ptm_is_active)">
<view v-if="(list.length>0)" >
<view class="part" v-for="(item,index) in list" :key="index" :data-state="item.po_state_id" :data-id="item.po_id" @click.stop="jump_detail">
<view class="par_scd qy-bg-red">{{item.expectedtime}}</view>
<view class="part_01">
<view class="pare_01_l ">
<img class="pare_logo" :src="(item.store_logo)"></img>
<view style="float:left;padding:20rpx 0 0 20rpx;">
<view style="font-size: 24rpx;color: #333;">{{item.store_name}}</view>
<view style="font-size: 24rpx;color: #333;">{{item.po_id}}</view>
</view>
</view>
<view class="pare_01_r">{{item.po_distance}} KM</view>
</view>
<view class="time qy-bg-white margin-bottom-sm">
<view class="time_l ">
<view class="time_l_01 qy-text-red">{{__('¥')}} <span>{{item.po_freight}}</span></view>
<view class="time_l_02">{{__('本单预计收入')}}</view>
</view>
<view class="time_m"></view>
<view class="time_l ">
<view class="time_r_01 qy-text-red"><span>{{item.po_expectedtime}}</span></view>
<view class="time_r_02">{{__('预约送达时间')}}</view>
</view>
</view>
<view style="border-top: 2rpx solid #FAFAFA;">
<view class="Process padding-xs" >
<view class="process_01">
<view class="process_01_l">
<view class="process_01_l_01 qy-bg-yellow text-white">
<view class="tex" style="line-height: 1.5;font-size: 24rpx;">{{__('取')}}</view>
</view>
</view>
<view class="process_01_r">
<view class="">{{__('地址')}}</view>
<span>{{item.store_address}}</span>
</view>
</view>
<view class="process_01">
<view class="process_01_l">
<view class="process_01_l_01 qy-bg-red text-white">
<view class="tex" style="line-height: 1.5;font-size: 24rpx;">{{__('送')}}</view>
</view>
</view>
<view class="process_01_r">
<view class="process_01_r_01">{{__('地址')}}</view>
<span>{{item.po_receive_address}}</span>
</view>
</view>
</view>
</view>
<block v-if="(item.po_state_id == 1)">
<view class="padding flex flex-direction">
<button class="cu-btn bg-yellow round " :data-id="item.po_id" @click.stop="jump_grabbing">{{__('抢单')}}</button>
</view>
</block>
<block v-if="(item.po_state_id == 2)">
<view class="padding flex flex-direction">
<button class="cu-btn bg-yellow round " :data-id="item.po_id" @click.stop="jump_pickup">{{__('待取货')}}</button>
</view>
</block>
<block v-if="(item.po_state_id == 3)">
<view class="padding flex flex-direction">
<button class="cu-btn bg-yellow round " :data-id="item.po_id" @click.stop="jump_service">{{__('已送达')}}</button>
</view>
</block>
<block v-if="(item.po_state_id == 4)">
<view class="padding flex flex-direction">
<button class="cu-btn bg-yellow round " :data-id="item.po_id" @click.stop="jump_cancel">{{__('删除')}}</button>
</view>
</block>
</view>
<view class="m-loading-box">
<block v-if="(ispage)">
<view class="u-loadmore">
<label class="u-loading"></label>
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
</view>
</block>
<block v-else>
<view class="u-loadmore u-loadmore-line">
<text class="u-loadmore-tips">{{__('没有更多数据啦!')}}</text>
</view>
</block>
</view>
</view>
<view redirect="true" class="m-nullpage" v-else style="top:20%">
<view class="m-nullpage-middle">
<view class="m-null-tip">
<text>{{__('亲~您还没有订单哦')}}</text>
</view>
</view>
</view>
</scroll-view>
<view class="u-end" v-else>
<image mode="aspectFit" lazy-load src="../images/user/sys.png"></image>
<view class="u-end-title">{{__('快来开工吧')}}</view>
</view>
<view class="page-ball" @click="editActive">
<view class="page-title">{{ptm_is_active?__('收工') : __('开工')}}</view>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
export default {
data() {
return {
TabCur:1,
list:[],
page: 1,
ispage: false,
flag: true,
state_id: 1,
ptm_is_active: 0,
filterData:[],
filterDropdownValue:[],
scrollTop:0,
}
},
components: {
'HMfilterDropdown':HMfilterDropdown
},
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
onLoad: function(options) {
var that = this;
uni.setNavigationBarTitle({
title:this.__('订单列表')
});
this.ptm_is_active = uni.getStorageSync('ptm_is_active');
this.forceUserInfo(function(user) {
});
if(options.state)
{
this.setData({
TabCur: options.state,
})
}
that.$.request({
url: this.Config.URL.productfilter_opt,
data: {},
dataType: 'json',
success: function(data, status, msg, code) {
if (status == 200) {
that.filterData = data;
} else {
}
}
});
if(this.ptm_is_active == 1)
{
this.getOrder()
}
},
methods: {
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
tabSelect(e) {
if(this.ptm_is_active == 1)
{
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
this.setData({
list:[],
page: 1,
ispage: false,
flag: true,
})
this.getOrder()
}
},
jump_cancel(e){
var that = this;
var params = {
po_id: e.target.dataset.id
};
that.$.request({
url: that.Config.URL.city.order_remove,
data: params,
success: function(data, status, msg, code) {
that.$.showModal({
title: that.__("提示"),
content: msg,
success: function (res) {
if (res.confirm) {
that.setData({
list:[],
page: 1,
ispage: false,
flag: true,
})
that.getOrder()
}
},
})
}
});
},
//修改接单员状态
editActive: function() {
var that = this;
if(that.ptm_is_active == 1)
{
var is_active = 0
}
else
{
var is_active = 1
}
var params = {
ptm_is_active: is_active
}
that.$.request({
url: that.Config.URL.city.paotui_active,
data: params,
success: function(data, status, msg, code) {
if(status == 200)
{
that.setData({
ptm_is_active: data.ptm_is_active
})
uni.setStorageSync('ptm_is_active', data.ptm_is_active);
that.setData({
list:[],
page: 1,
ispage: false,
flag: true,
})
that.getOrder()
that.$.alert(that.__('操作成功!'))
}
}
});
},
//送达
jump_service(e){
var that = this;
that.$.gopage("/paotui/order/signinpic?po_id=" + e.target.dataset.id);
},
//取货
jump_pickup(e){
var that = this;
var params = {
po_id: e.target.dataset.id
};
that.$.request({
url: that.Config.URL.city.order_pickup,
data: params,
success: function(data, status, msg, code) {
if(status == 200){
that.$.alert('取货成功',function() {
that.setData({
list:[],
page: 1,
ispage: false,
flag: true,
})
that.getOrder()
})
}
else
{
that.$.alert(msg)
}
}
});
},
//抢单
jump_grabbing(e){
var that = this;
var params = {
po_id: e.target.dataset.id
};
that.$.showModal({
title: that.__("提示"),
content: "确认抢单?",
success: function (res) {
if (res.confirm) {
that.$.request({
url: that.Config.URL.city.order_apply,
data: params,
success: function(data, status, msg, code) {
if(status == 200){
that.$.alert(that.__('抢单成功'))
that.setData({
list:[],
page: 1,
ispage: false,
flag: true,
})
that.getOrder()
}
else
{
that.$.alert(msg)
}
}
});
}
},
})
},
jump_deliver(){
uni.navigateTo({
url: '/horseman/deliver/deliver'
});
},
jump_detail(e){
var that = this;
var po_id = e.currentTarget.dataset.id;
var state = e.currentTarget.dataset.state;
switch(parseInt(state)) {
case 1:
that.$.gopage("/paotui/order/navigation?po_id=" + po_id);
break;
case 2:
that.$.gopage("/paotui/order/navigation?po_id=" + po_id);
break;
case 3:
that.$.gopage("/paotui/order/navigation?po_id=" + po_id);
break;
case 4:
that.$.gopage("/paotui/order/detail?po_id=" + po_id);
break;
default:
break;
}
},
jump_coupon(){
uni.navigateTo({
url: '/horseman/coupon/coupon'
});
},
jump_fill(){
uni.navigateTo({
url: '/horseman/fill/fill'
});
},
getOrder: function() {
var that = this;
var params = {
po_state_id: that.TabCur
};
that.$.request({
url: that.Config.URL.city.order_lists,
data: params,
success: function(data, status, msg, code) {
if (200 == status) {
if (data.page >= data.total) {
that.setData({
flag: false,
ispage: false,
list: that.list.concat(data.items)
})
} else {
that.setData({
flag: true,
ispage: true,
list: that.list.concat(data.items)
})
}
} else {
that.setData({
flag: false,
ispage: false
})
}
}
});
},
scrollbottom: function () {
if (this.flag)
{
var that = this;
that.setData({flag: false}), clearTimeout(t);
var t = setTimeout(function () {
that.setData({page: that.page + 1}), that.getOrder()
}, 500)
}
}
}
}
</script>
<style lang='scss'>
@import "../../styles/colorui/main";
@import "../../paotui/css/paotui";
.content {
.ad{
img{width: 100%;height: 100px;}
}
.part{background-color: #fff;padding: 5px 0 0;margin-bottom: 6px;
.par_scd{color: #fff;display: inline-block;font-size: 12px;padding: 1px 10px 1px 10px;
border-radius:0 10px 10px 0 ;}
.part_01{display: flex;margin: 5px 10px;justify-content: space-between;border-bottom: 1px solid #FAFAFA;padding: 5px 0;
.pare_01_l{color: #FB303C;font-weight: 600;font-size: 18px;}
}
.pare_01_r{color: #3F3F3F;font-size: 14px;}
}
.bbtn{display: flex;justify-content: space-between;
.bbtn_10{width: 48%;}
}
.qy-bg-yellow {
background-color: #FBBD08;
}
.round {
color: #ffffff;
}
.pare_logo {
width:100rpx;
height:100rpx;
float:left;
}
}
.time{display: flex;padding: 10px 10px 5px;
span{font-size: 22px;}
.time_l{width: 50%;text-align: center;}
.time_m{border-left: 1px solid #F2F2F2;margin-top: 10px;height: 20px;}
}
.Process{background-color: #fff;padding: 10px;
.process_01{display: flex;padding: 10px 0;justify-content: space-between;border-bottom: 1px solid #FAFAFA;
.process_01_l{width: 10%;display:flex;align-items: center;
.process_01_l_01{width: 20px;height: 20px;text-align: center;line-height: 20px;font-size: 12px;
border-radius:16px 16px 16px 0;
-webkit-transform:rotate(-45deg);
-moz-transform: ratate(-45deg);
transform:rotate(-45deg);
.tex{transform:rotate(45deg);}
}
}
.process_01_r{width: 88%;font-size: 16px;font-weight: 600;
.process_01_r_01{padding-bottom: 5px;}
span{font-size: 12px;font-weight: 100;}
}
}
.icon-map{
}
}
.qy-bg-yellow {
background-color: #FBBD08;
}
.text-white {
color: #ffffff;
}
.qy-bg-red {
background-color: #FB303C;
}
.page-ball {
display: block;
padding-top: 15.625%;
width: 15.625%;
text-align: center;
/* line-height: 50px; */
border-radius: 50%;
background: #6A4A23;
color: #fff;
font-size: 30rpx;
position: fixed;
bottom: 50rpx;
right: 24rpx;
z-index: 999;
}
.page-title {
display: inline-block;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%); */
-webkit-transform: translate(-50%,-50%);
}
.u-end {
padding-top: 100rpx;
}
.u-end-title {
text-align: center;
}
.text-center {
position: fixed;
width: 100%;
top: var(--window-top);
left: 0;
z-index: 6;
}
.m-product-all {
top: 100rpx;
}
</style>