payment/src/views/catering/index.vue

<template>
  <div class="mianBox" v-if="status">
    <van-row class="headerBox" >
      <van-col class="returnWrap" @click="fanhuiBtn">
        <van-image class="arrow-left"
          :src="require('../../assets/image/left.png')"
        />
        <van-col class="return">返回</van-col>
      </van-col>
      <van-col class="title">{{title}}</van-col>
    </van-row>
    <van-row class="top">
        <van-tabs v-model="active" @click="activeSelect" class="pc">
            <van-tab title="待配餐" :badge="number"></van-tab>
            <van-tab title="已完成"></van-tab>
        </van-tabs>
        <div class="lineP"></div>
    </van-row>
    <van-row class="bottom">
        <van-row class="orderList" v-if="active==0">
          <van-col span="24" v-for="(item,index) in order" :key="index" class="order" @click="orderOne(item)">
              <div class="left dcrText" style="margin-top:0">点餐人：</div>
              <div class="right dcr" style="margin-top:0">{{item.orderUserName}}</div>
              <div class="left scAddressText">送餐地址：</div>
              <div span="18" class="right scAddress">{{item.address}}</div>
              <div class="left statusText">当前状态：</div>
              <div class="right" :class="item.orderStatus == '3' ? 'status' : 'status1'">
                  {{item.orderStatus == "0" ? "待接单" : item.orderStatus == "1" ? "配餐中" : item.orderStatus == "2" ? "送餐中"  : "已完成"}}
              </div>
              <van-steps :active="item.orderStatus == '0' ? '-1' : item.orderStatus" v-if="item.orderStatus != '3'"  active-color="#ee0a24" inactive-color="#999999">
                <van-step>{{ item.orderStatus == 0 ? '待接单' : item.orderStatus == 1 ? '已接单' : item.orderStatus == 2 ? '已接单' : '接单' }}</van-step>
                <van-step>{{ item.orderStatus == 1 ? '配餐中' : item.orderStatus == 2 ? '已配餐' : '配餐' }}</van-step>
                <van-step>{{ item.orderStatus == 2 ? '送餐中' : '送餐' }}</van-step>
              </van-steps>
          </van-col>
          <van-col span="24" class="noMore">没有更多数据了</van-col>
        </van-row>
        <van-row class="orderList" v-if="active==1">
          <van-col span="24" v-for="(item,index) in order" :key="index" class="order" @click="orderOne(item)">
              <div class="left dcrText" style="margin-top:0">点餐人：</div>
              <div class="right dcr" style="margin-top:0">{{item.orderUserName}}</div>
              <div class="left scAddressText" >送餐地址：</div>
              <div class="right scAddress">{{item.address || "-"}}</div>
              <div class="left statusText">当前状态：</div>
              <div class="right" :class="item.orderStatus == '3' ? 'status' : 'status1'">
                  {{item.orderStatus == "0" ? "待接单" : item.orderStatus == "1" ? "配餐中" : item.orderStatus == "2" ? "送餐中"  : "已完成"}}
              </div>
              <!-- <van-steps :active="item.orderStatus == '0' ? '-1' : item.orderStatus" v-if="item.orderStatus != '3'"  active-color="#ee0a24" inactive-color="#999999">
                <van-step>{{ item.orderStatus == 0 ? '待接单' : item.orderStatus == 1 ? '已接单' : item.orderStatus == 2 ? '已接单' : '接单' }}</van-step>
                <van-step>{{ item.orderStatus == 1 ? '配餐中' : item.orderStatus == 2 ? '已配餐' : '配餐' }}</van-step>
                <van-step>{{ item.orderStatus == 2 ? '送餐中' : '送餐' }}</van-step>
                </van-steps> -->
          </van-col>
          <van-col span="24" class="noMore">没有更多数据了</van-col>
        </van-row>
    </van-row>
    <van-dialog v-model="show" class="pcDialog">
       <van-row class="orderDetails">
           <van-col class="order" span="24">
              <div class="left" style="margin-top:0">订餐人：</div>
              <div class="right" style="margin-top:0">{{orderDetails.orderUserName || '-'}}</div>
              <div class="left">餐别：</div>
              <div class="right">{{orderDetails.mType || '-'}}</div>
              <div class="left">手机号：</div>
              <div class="right">{{orderDetails.phone || '-'}}</div>
              <div class="left">送餐地址：</div>
              <div class="right">{{orderDetails.address  || "-"}}</div>
              <div class="left">下单时间：</div>
              <div class="right">{{orderDetails.orderTime || '-'}}</div>
              <div class="left">备注：</div>
              <div class="right">{{orderDetails.remark || '-'}}</div>
           </van-col>
          <van-col class="detailsText">配餐明细</van-col>
          <van-col  span="24"  class="dishes">
            <van-col span="24" v-for="(item,index) in dishes" :key="index" class="list">
                <van-col span="12" class="name">{{item.mName}}</van-col>
                <van-col span="12" class="num">{{item.mCount}}份</van-col>
            </van-col>
          </van-col>
          <van-col class="statusSelect">
            <van-col class="select" :class="orderDetails.orderStatus == '0' ? 'zt' : 'overTime'"   @click="statusChange(orderDetails.orderStatus == '0' ? 1 : undefined)" >
               接单
            </van-col>
            <van-col class="select" :class="orderDetails.orderStatus == '1' ? 'zt' : 'overTime'" @click="statusChange(orderDetails.orderStatus == '1' ? 2 : undefined)">
               送餐
            </van-col>
             <van-col class="select" :class="orderDetails.orderStatus == '2' ? 'zt' : 'overTime'"  @click="statusChange(orderDetails.orderStatus == '2' ? 3 : undefined)">
               完成
            </van-col>
             <van-col class="select gb" @click="close">
               关闭
            </van-col>
          </van-col>
          <van-col class="jjPhone">紧急联系人：{{orderDetails.jjPhone}}</van-col>
        </van-row>
    </van-dialog>
  </div>
</template>
<script>
import { Toast } from "vant";
import Cookies from "js-cookie";
import { getNowTime } from "@/assets/js/dataFormate.js";
export default {
  data() {
    return {
      show:false,
      number:undefined,
      status:false,
      active:0,
      order:[],
      orderDetails:{},
      dishes:[],
      title:"配餐清单",
      orderId:undefined,
    };
  },
  components: {
    [Toast.name]: Toast,
  },
  mounted(){
    document.title = '中国东信智慧园区'
    this.orderStatus()
    if(this.$route.query.id){
        this.orderStatus2()
        setTimeout(()=>{
            for(let i =0;i<this.order.length;i++){
                if(this.order[i].id == this.$route.query.id){
                    if(this.order[i].orderStatus == '1' || this.order[i].orderStatus == '2'|| this.order[i].orderStatus == '0'){
                        this.active= 0
                    }else{
                        this.active= 1
                    }
                    this.orderOne(this.order[i])
                }
            }
        },1000)
        
    }else{
        this.orderStatus()
    }
    
  },
  methods: {
      //返回上级
    fanhuiBtn() {
        window.href = "https://smartpark.caih.com/h5/#/home/feature"
        // this.$router.go(-1)
    },
    //订单查询
    orderStatus(id){
        let data = {
            current:1,
            size:500,
            orderStatus:undefined,
            statusList:undefined
        }
        if(id){
            data.orderStatus = id
             //历史订单
            axios.post(`https://smartpark.caih.com/dxapi/dreOrder/page`,data).then(res => { 
                const data = res.data.data.records
                this.order  = data
                this.status = true
            })
        }else{
            data.statusList = [0,1,2]
             //历史订单
            axios.post(`https://smartpark.caih.com/dxapi/dreOrder/page`,data).then(res => { 
                const data = res.data.data.records
                this.number = data.length
                if(this.number == "0"){
                    this.number = undefined
                }
                if(data.length>99){
                    this.number = data.length
                }
                this.order  = data
                this.status = true
            })
        }
       
      
    },
    //订单查询
    orderStatus2(){
        let data = {
            current:1,
            size:500,
            orderStatus:undefined,
            statusList:[0,1,2,3]
        }
            //历史订单
        axios.post(`https://smartpark.caih.com/dxapi/dreOrder/page`,data).then(res => { 
            const data = res.data.data.records
            this.number = data.length
            if(this.number == "0"){
                this.number = undefined
            }
            if(data.length>99){
                this.number = data.length
            }
            this.order  = data
            this.status = true
        })
      
    },
    //active切换
    activeSelect(){
        if(this.active == "0"){
            this.orderStatus()
        }else{
            this.orderStatus(3)
        }
    },
    //订单详情
    orderOne(row){
        this.orderDetails = row
        axios.get(`https://smartpark.caih.com/dxapi/system/config/configKey/dre_urgency_phone`).then(res => { 
            this.orderDetails.jjPhone  = res.data.data
            //订单详情
            axios.get(`https://smartpark.caih.com/dxapi/dreOrderDetail/listByOrder?orderId=${row.id}`).then(res => { 
                this.dishes = res.data.data
                this.show = true
            })
        })
        
    },
    //状态变更
    statusChange(id){
        if(id){
            let time = getNowTime()
            let data = {
                id:this.orderDetails.id,
                orderStatus:id,
                receiveUserName:undefined,
                receiveUserId:undefined,
                receiveTime:undefined, 
                sendUserName:undefined,
                sendUserId:undefined,
                sendTime:undefined,
                sendEndTime:undefined,
            }
            let sid = undefined
            axios.get("https://smartpark.caih.com/dxapi/dxtop/staff/one",{
            params:{
                id:Cookies.get("userId57")
            }
            }).then(res2 =>{
                sid = res2.data.data.sid
                if(id == "1"){
                    data.receiveUserName = Cookies.get("nickName57")
                    data.receiveUserId = sid
                    data.receiveTime = time
                }
                if(id == "2"){
                    data.sendUserName= Cookies.get("nickName57")
                    data.sendUserId = sid
                    data.sendTime = time
                }
                if(id == "3"){
                    data.sendEndTime = time
                }
                axios.put(`https://smartpark.caih.com/dxapi/dreOrder/`,data).then(res => { 
                    console.log(res)
                    if(res.data.status == "SUCCESS"){
                        if(id == "3"){
                            this.active = 1
                            this.number = this.number - 1
                            if(this.number == "0"){
                                this.number = undefined
                            }
                            this.orderStatus(3)
                        }else{
                            this.active = 0
                            this.orderStatus()
                        }
                    }else{
                        Toast(res.data.msg)
                        this.orderStatus()
                    }
                    this.show = false
                })
            })
        }
    },
    //关闭
    close(id){
      this.show = false  
    }
  },
};
</script>
<style lang="scss" scoped>
.mianBox{
    width:100%;
    height:100%;
    overflow: scroll;
    background-color: #F9F9F9 !important;
    .top{
        position: relative;
        .pc{
            height:48px;
            line-height: 48px;
        }
        .lineP{
            position: absolute;
            top:12px;
            left:50%;
            width:1px;
            height:20px;
            background-color: #E8E8E8;
        }
    }
    .bottom{
        background-color: #fff;
        margin-top:10px;
        .orderList{
            .order{
                padding:15px;
                div{
                    font-size: 14px;
                    float:left;
                    line-height:26px;
                }
                .left{
                    width:30%;
                    display: inline-block;
                    color:#999999;
                    text-align: left;
                }
                .right{
                    width:70%;
                    display: inline-block;
                    color:#333;
                    text-align: right;
                }

                .status1{
                    color:#ee0a24;
                    text-align: right;
                }
                .van-steps{
                    background:transparent;
                    height:40px;
                    padding-bottom:20px;
                    width:100%;
                }
            }
            .order:nth-child(odd){
                background-color: #fff;
            }
            .order:nth-child(even){
                background-color: #F9F9F9;
            } 
        }
        .noMore{
            background-color: #F0F0F0;
            color:#999999;
            text-align: center;
            padding:20px 0;
            font-size: 12px;
        }
    }
    .pcDialog{
        border-radius: 5px;
        width:85%;
        padding:20px 0;
        .orderDetails{
            .order{
                padding:0px 16px 20px;
                border-bottom:1px solid #F0F0F0;
                div{
                    float:left;
                    line-height:26px;
                }
                .left{
                    width:40%;
                    display: inline-block;
                    text-align: left;
                    color:#999999;
                    vertical-align: top;
                }
                .right{
                    width:60%;
                    display: inline-block;
                    text-align: right;
                    color:#333; 
                    vertical-align: top;
                }
            }
        }
        .detailsText,.jjPhone{
            font-size: 15px;
            margin:20px 16px 8px;
            font-weight: 700;
        }
        .jjPhone{
            margin:20px 16px 0;
        }
        .dishes{
            max-height:calc(100vh - 550px);
            overflow-y: scroll;
            padding:0px 16px;
            .list{
                color:#333;
                font-size: 15px;
                height:40px;
                line-height: 40px;
                width:100%;
                div:nth-child(odd){
                    text-align: left;
                    padding-left:10px;
                }
                div:nth-child(even){
                    text-align: right;
                    padding-right:10px;
                }
            }
            
            .list:nth-child(odd){
                background: #F9F9F9;
            }
            .list:nth-child(even){
                background: #F0F0F0;
            }
            
        }
        .statusSelect{
            margin:20px 16px 0;
            .select{
                width:65px;
                height:44px;
                line-height: 44px; 
                font-size: 17px;
                text-align: center;
                border-radius: 5px;
            }
            .select:nth-child(1),.select:nth-child(2),.select:nth-child(3){
                margin-right:8.2px;
            }
            
            .zt{
                color: #fff;
                background:#ee0a24;
            }
            .gb{
                 color: #ee0a24;
                background:#fff;
                border:1px solid #ee0a24;
            }
            .overTime{
                background-color: #ccc;
                color:#fff;
            }
        }
    }
 
}

</style>
<style>
.van-steps__items{
    margin-top:-10px !important;
}
.van-steps--horizontal{
    padding:0;
}
.van-step__title{
    position: absolute !important;
    top:40px;
    font-size: 12px !important;
    margin-left:-50px;

}
.van-step--horizontal:last-child .van-step__title{
  margin-left:-40px;
}

.van-info{
    width:18px;
    height:18px;
    line-height: 18px;
    top:8px;
    left:24px;
    color:#fff;
    margin-left:20px;
    background-color: #ee0a24;
    font-size: 10px;
}
.pcDialog .van-dialog__footer{
    display: none;
}
.pc .van-tab__text{
    font-size: 15px;
}
.pc .van-tabs__line{
    width:45px !important;
}


</style>