298 lines
7.2 KiB
Vue
298 lines
7.2 KiB
Vue
<template>
|
||
<view>
|
||
<view class="navbar ">
|
||
|
||
<view v-for="item in tabs" class="item " :class="[tabCur==item.id?'on':'']" @click="selectTab(item.id)">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-list">
|
||
<view class="order-box" v-for="item in list" :key="item.id" >
|
||
<view class="order-header" @click="goDetail(item.id)">
|
||
<view>{{item.type_name}}</view>
|
||
<view >
|
||
{{item.status_name}}
|
||
</view>
|
||
</view>
|
||
<view class="order-info" @click="goDetail(item.id)">
|
||
<view class="order-li">
|
||
<view class="fl">订单号：</view>{{item.order_no}}
|
||
</view>
|
||
<view class="order-li">
|
||
<view class="" style="justify-content: space-between; display: flex;width:100%">
|
||
<view><view class="fl">预约人：</view> {{item.accept_name}}</view>
|
||
<view class="gongli" v-if="item.distance>=0">
|
||
{{item.distance}}/km
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-li">
|
||
<view>
|
||
<view class="fl">手机号：</view><view v-if="item.person_id>0">{{item.accept_mobile}}</view>
|
||
<view v-else>接单后可看</view></view>
|
||
|
||
</view>
|
||
|
||
<view class="order-li">
|
||
<view class="fl">预约重量：</view>
|
||
{{item.weight}}
|
||
</view>
|
||
<view class="order-li">
|
||
<view class="fl">预约时间：</view>
|
||
{{item.order_time}}
|
||
</view>
|
||
|
||
<view class="order-li">
|
||
<view class="fl">预约地址：</view>
|
||
{{item.accept_address}}
|
||
</view>
|
||
</view>
|
||
<view class="footer pb-32 " >
|
||
<view class="btn btn-default " @click="goDetail(item.id)" >详情</view>
|
||
<view class="btn btn-default " @click="setorder(item.id,2)" v-if="item.status==1 && jiedan_type ==1 ">接单</view>
|
||
|
||
<view class="btn btn-default" @click="setorder(item.id,1)" v-if="item.status==2 ">转给他人</view>
|
||
<view class="btn btn-default" @click="toshow(item.id)" v-if="item.status==2 ">点击完成</view>
|
||
</view>
|
||
</view>
|
||
<view class="zanwuimg" v-if="list.length == 0">
|
||
<image src="../../static/img/null.png" mode="widthFix"></image>
|
||
<view>暂无相关订单</view>
|
||
</view>
|
||
</view>
|
||
|
||
<lvv-popup position="bottom" ref="lvvpopref">
|
||
<view style="width: 100%;height: 700upx;background: #F8F8F8;;position: absolute;left:0;bottom: 0;">
|
||
<view class="pop-c">
|
||
<view class="pop-t">
|
||
<view class='hs-row invoice'>
|
||
<view class='hs-row-hd'>
|
||
<view class='hs-hd-title'>完成订单</view>
|
||
</view>
|
||
<view class='hs-row-ft'
|
||
@click="toclose()">
|
||
<image class='fr icon' src='/static/img/close.png'></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="neirong">
|
||
<view class="content-top">
|
||
<view class='hs-box'>
|
||
<view class='hs-row'>
|
||
<view class='hs-row-hd'>
|
||
<view class='hs-hd-title' style="width: 100px;">订单金额：</view>
|
||
</view>
|
||
<view class='hs-row-bd' style="width: 95%;">
|
||
<input type="text" class='hs-input' placeholder='请填写金额' v-model="money" ></input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button-bottom">
|
||
<button class="btn btn-success" @click="setorder(jiesuan_order_id,3)" :disabled='submitStatus' :loading='submitStatus'>完成</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</lvv-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import lvvPopup from '@/components/lvv-popup/lvv-popup.vue';
|
||
export default {
|
||
components: { lvvPopup },
|
||
data() {
|
||
return {
|
||
jiesuan_order_id:0,
|
||
jiedan_type:0,
|
||
show:false,
|
||
tabs: [
|
||
{
|
||
id: 2,
|
||
name: '已接单'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '已完成'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '已取消'
|
||
},
|
||
],
|
||
tabCur: 2,
|
||
list: [],
|
||
page:1,
|
||
money:'',
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
},
|
||
|
||
onShow () {
|
||
|
||
this.page = 1
|
||
this.list = []
|
||
|
||
var token = uni.getStorageSync('userToken');
|
||
if (!token) {
|
||
return false;
|
||
}
|
||
this.getList()
|
||
},
|
||
onPullDownRefresh() {
|
||
this.page = 1
|
||
this.list = []
|
||
this.getList()
|
||
},
|
||
onReachBottom() {
|
||
this.page++
|
||
this.getList()
|
||
},
|
||
methods:{
|
||
toshow(id) {
|
||
this.jiesuan_order_id = id;
|
||
this.$refs.lvvpopref.show();
|
||
},
|
||
toclose() {
|
||
this.jiesuan_order_id = 0;
|
||
this.$refs.lvvpopref.close();
|
||
},
|
||
closePopup(){
|
||
this.show = false
|
||
},
|
||
selectTab(id){
|
||
this.page=1
|
||
this.tabCur = id
|
||
this.list = []
|
||
this.getList()
|
||
},
|
||
setorder(id,status){
|
||
var msg ='';
|
||
if(status ==2){
|
||
msg ='确认要接单吗？';
|
||
}
|
||
if(status ==1){
|
||
msg ='确认要转给他人吗？';
|
||
}
|
||
if(status ==3){
|
||
if (this.money == '' || this.money < 0 || isNaN(parseFloat(this.money))) {
|
||
uni.showToast({ title: '请输入结算金额' , icon: 'none' })
|
||
return false;
|
||
}
|
||
msg ='确认要结算完成吗？';
|
||
}
|
||
|
||
uni.showModal({
|
||
title:'提示',
|
||
content: msg,
|
||
success:(ret)=>{
|
||
if(ret.confirm){
|
||
this.$api.setorder({
|
||
order_id:id ,
|
||
money:this.money ,
|
||
status:status
|
||
}, res => {
|
||
if (res.code == "1") {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
this.page=1
|
||
this.list = []
|
||
this.getList()
|
||
this.money =''
|
||
this.toclose();
|
||
},1000)
|
||
}else{
|
||
uni.showToast({ title: res.msg , icon: 'none' })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getList(){
|
||
this.$api.orderlist({
|
||
page:this.page,
|
||
status:this.tabCur
|
||
}, res => {
|
||
|
||
if (res.code == "1") {
|
||
let list = res.data.list.data
|
||
if(list.length>0){
|
||
this.list = [
|
||
...this.list,
|
||
...list
|
||
]
|
||
this.page++
|
||
}else{
|
||
uni.showLoading({
|
||
title:'加载中...'
|
||
})
|
||
setTimeout(()=>{
|
||
uni.hideLoading()
|
||
return
|
||
},500)
|
||
this.zanwuflag = true
|
||
this.flagjiazai = true
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
goDetail(id){
|
||
uni.navigateTo({
|
||
url:'/pages/person/orderinfo?id=' + id
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #eee;
|
||
}
|
||
|
||
|
||
.card-list {
|
||
padding: 120rpx 14rpx 50px;
|
||
}
|
||
.order-box {
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
.footer{
|
||
display: flex;
|
||
justify-content: flex-end;padding-bottom: 10px;
|
||
}
|
||
.order-header {
|
||
width: 100%;
|
||
padding: 28rpx;
|
||
justify-content: space-between;
|
||
display: flex;
|
||
}
|
||
.order-info {
|
||
padding: 0 28rpx;
|
||
.order-li {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
padding-bottom: 28rpx;
|
||
|
||
.fl{ width: 76px;
|
||
text-align: right;
|
||
display: inline-block;}
|
||
}
|
||
}
|
||
}
|
||
.empty{text-align: center;} .navbar {
|
||
/* #ifdef H5 */
|
||
margin-top:44px;
|
||
/* #endif */
|
||
}
|
||
</style>
|