|
@@ -0,0 +1,479 @@
|
|
|
+<template>
|
|
|
+ <div class="mianBox" v-if="status">
|
|
|
+ <van-row class="headerBox" @click="fanhuiBtn">
|
|
|
+ <van-icon name="arrow-left" class="arrow-left" />
|
|
|
+ <van-col class="return">返回</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)">
|
|
|
+ <van-col span="12" class="dcrText">点餐人:</van-col>
|
|
|
+ <van-col span="12" class="dcr">{{item.orderUserName}}</van-col>
|
|
|
+ <van-col span="12" class="scAddressText">送餐地址:</van-col>
|
|
|
+ <van-col span="12" class="scAddress">{{item.address}}</van-col>
|
|
|
+ <van-col span="12" class="statusText">当前状态:</van-col>
|
|
|
+ <van-col span="12" :class="item.orderStatus == '3' ? 'status' : 'status1'">
|
|
|
+ {{item.orderStatus == "0" ? "待接单" : item.orderStatus == "1" ? "配餐中" : item.orderStatus == "2" ? "送餐中" : "已完成"}}
|
|
|
+ </van-col>
|
|
|
+ <van-steps :active="item.orderStatus == '0' ? '-1' : item.orderStatus" v-if="item.orderStatus != '3'" active-color="#D7000F" inactive-color="#999999">
|
|
|
+ <van-step>待接单</van-step>
|
|
|
+ <van-step>配餐中</van-step>
|
|
|
+ <van-step>送餐中</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)">
|
|
|
+ <van-col span="12" class="dcrText">点餐人:</van-col>
|
|
|
+ <van-col span="12" class="dcr">{{item.orderUserName}}</van-col>
|
|
|
+ <van-col span="12" class="scAddressText">送餐地址:</van-col>
|
|
|
+ <van-col span="12" class="scAddress">{{item.address}}</van-col>
|
|
|
+ <van-col span="12" class="statusText">当前状态:</van-col>
|
|
|
+ <van-col span="12" :class="item.orderStatus == '3' ? 'status' : 'status1'">
|
|
|
+ {{item.orderStatus == "0" ? "待接单" : item.orderStatus == "1" ? "配餐中" : item.orderStatus == "2" ? "送餐中" : "已完成"}}
|
|
|
+ </van-col>
|
|
|
+ <van-steps :active="item.orderStatus == '0' ? '-1' : item.orderStatus" v-if="item.orderStatus != '3'" active-color="#D7000F" inactive-color="#999999">
|
|
|
+ <van-step>待接单</van-step>
|
|
|
+ <van-step>配餐中</van-step>
|
|
|
+ <van-step>送餐中</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" >
|
|
|
+ <van-col span="12" class="left">订餐人:</van-col>
|
|
|
+ <van-col span="12" class="right">{{orderDetails.orderUserName || '-'}}</van-col>
|
|
|
+ <van-col span="12" class="left">餐别:</van-col>
|
|
|
+ <van-col span="12" class="right">{{orderDetails.mType || '-'}}</van-col>
|
|
|
+ <van-col span="12" class="left">手机号:</van-col>
|
|
|
+ <van-col span="12" class="right">{{orderDetails.phone || '-'}}</van-col>
|
|
|
+ <van-col span="12" class="left">送餐地址:</van-col>
|
|
|
+ <van-col span="12" class="right">{{orderDetails.address}}</van-col>
|
|
|
+ <van-col span="12" class="left">备注:</van-col>
|
|
|
+ <van-col span="12" class="right">{{orderDetails.remark || '-'}}</van-col>
|
|
|
+ </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 zt" v-if = "orderDetails.orderStatus == '0'" @click="statusChange(1)">
|
|
|
+ 接单
|
|
|
+ </van-col>
|
|
|
+ <van-col class="select zt" v-if = "orderDetails.orderStatus == '1'" @click="statusChange(2)">
|
|
|
+ 送餐
|
|
|
+ </van-col>
|
|
|
+ <van-col class="select zt" v-if = "orderDetails.orderStatus == '2'" @click="statusChange(3)">
|
|
|
+ 完成
|
|
|
+ </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 axios from "axios";
|
|
|
+import { Field, NumberKeyboard, Dialog, Toast,Step, Steps } 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: {
|
|
|
+ [Field.name]: Field,
|
|
|
+ [NumberKeyboard.name]: NumberKeyboard,
|
|
|
+ [Dialog.name]: Dialog,
|
|
|
+ [Toast.name]: Toast,
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ document.title = '中国东信智慧园区'
|
|
|
+ this.orderStatus()
|
|
|
+ if(this.$route.query.id){
|
|
|
+ console.log(this.$route.query.id)
|
|
|
+ this.orderStatus()
|
|
|
+ setTimeout(()=>{
|
|
|
+ for(let i =0;i<this.order.length;i++){
|
|
|
+ if(this.order[i].id = this.$route.query.id){
|
|
|
+ this.orderOne(this.order[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },50)
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.orderStatus()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回上级
|
|
|
+ fanhuiBtn() {
|
|
|
+ this.$router.push({ path: "/home"})
|
|
|
+ },
|
|
|
+ //订单查询
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ this.order = data
|
|
|
+ this.status = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ //active切换
|
|
|
+ activeSelect(){
|
|
|
+ if(this.active == "0"){
|
|
|
+ this.orderStatus()
|
|
|
+ }else{
|
|
|
+ this.orderStatus(3)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //订单详情
|
|
|
+ orderOne(row){
|
|
|
+ this.show = true
|
|
|
+ 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 => {
|
|
|
+ const data = res.data.data
|
|
|
+ this.dishes = data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //订单详情
|
|
|
+ orderOne(row){
|
|
|
+ this.show = true
|
|
|
+ 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 => {
|
|
|
+ const data = res.data.data
|
|
|
+ this.dishes = data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //状态变更
|
|
|
+ statusChange(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 => {
|
|
|
+ Toast("订单状态变更完成")
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.show = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ //关闭
|
|
|
+ close(id){
|
|
|
+ this.show = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.mianBox{
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ background-color: #F9F9F9 !important;
|
|
|
+ .headerBox{
|
|
|
+ position: relative;
|
|
|
+ .arrow-left{
|
|
|
+ font-size: 24px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left:-6px;
|
|
|
+ }
|
|
|
+ .return{
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 42px;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ position: absolute;
|
|
|
+ width:calc(100vw - 30px);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top{
|
|
|
+ position: relative;
|
|
|
+ .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 15px 15px;
|
|
|
+ .dcrText,.scAddressText,.statusText{
|
|
|
+ color:#999999;
|
|
|
+ padding:5px 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .dcr,.scAddress,.status{
|
|
|
+ color:#333;
|
|
|
+ text-align: right;
|
|
|
+ padding:5px 0;
|
|
|
+ }
|
|
|
+ div{
|
|
|
+ font-size: 14px;
|
|
|
+ padding:5px 0;
|
|
|
+ }
|
|
|
+ // div:nth-child(even){
|
|
|
+ // text-align: right;
|
|
|
+ // }
|
|
|
+ .status1{
|
|
|
+ color:#D7000F;
|
|
|
+ text-align: right;
|
|
|
+ padding:5px 0;
|
|
|
+ }
|
|
|
+ .van-steps{
|
|
|
+ width:100%;
|
|
|
+ background:transparent;
|
|
|
+ height:50px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order:nth-child(odd){
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .order:nth-child(even){
|
|
|
+ background-color: #F9F9F9;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .noMore{
|
|
|
+ background-color: #F9F9F9;
|
|
|
+ color:#999999;
|
|
|
+ text-align: center;
|
|
|
+ padding:20px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pcDialog{
|
|
|
+ border-radius: 4px;
|
|
|
+ width:85%;
|
|
|
+ padding-bottom:10px;
|
|
|
+ .orderDetails{
|
|
|
+ .order{
|
|
|
+ padding:16px;
|
|
|
+ border-bottom:1px solid #F0F0F0;
|
|
|
+ div{
|
|
|
+ padding:5px 0;
|
|
|
+ }
|
|
|
+ div:nth-child(odd){
|
|
|
+ text-align: left;
|
|
|
+ color:#999999;
|
|
|
+ }
|
|
|
+ div:nth-child(even){
|
|
|
+ text-align: right;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detailsText,.jjPhone{
|
|
|
+ font-size: 18px;
|
|
|
+ margin:10px 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .dishes{
|
|
|
+ max-height:calc(100vh - 550px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding:0px 16px;
|
|
|
+ .list{
|
|
|
+ color:#333;
|
|
|
+ font-size: 18px;
|
|
|
+ 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{
|
|
|
+ padding:20px 16px 10px;
|
|
|
+ position: relative;
|
|
|
+ float:right;
|
|
|
+ .select{
|
|
|
+ width:60px;
|
|
|
+ height:40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .select:nth-child(1){
|
|
|
+ margin-left:155px;
|
|
|
+ }
|
|
|
+ .select:nth-child(2){
|
|
|
+ margin-left:10px;
|
|
|
+ }
|
|
|
+ .zt{
|
|
|
+ color: #fff;
|
|
|
+ background:#D7000F;
|
|
|
+ }
|
|
|
+ .gb{
|
|
|
+ color: #D7000F;
|
|
|
+ background:#fff;
|
|
|
+ border:1px solid #D7000F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.van-steps__items{
|
|
|
+ margin-top:-10px !important;
|
|
|
+}
|
|
|
+.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:20px;
|
|
|
+ height:20px;
|
|
|
+ line-height: 20px;
|
|
|
+ top:10px;
|
|
|
+ left:20px;
|
|
|
+ color:#fff;
|
|
|
+ margin-left:20px;
|
|
|
+ background-color: #D7000F;
|
|
|
+}
|
|
|
+.pcDialog .van-dialog__footer{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.pc .van-tab__text{
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.pc .van-tabs__line{
|
|
|
+ width:55px;
|
|
|
+}
|
|
|
+</style>
|