fix

Helius

2021-02-20 45fb4b11ad51bb38306765b11a6747402e382cee

 hive-app/pages/workbench/serviceOrderList.vue

@@ -1,11 +1,13 @@
<template>
   <view>
      <view class="header">
         <search-bar class="mb-0" placeholder="输入会员姓名、手机号、订单号查询"></search-bar>
         <search-bar @confirm="search" class="mb-0" placeholder="输入会员姓名、手机号、订单号查询"></search-bar>
      </view>
      <view>
         <h-tabs
            class="tab"
            :activeIndex="orderStatus"
            @tabClick="tabChange"
            :tabData="tabs" 
            :config="{
               color: '#abb1cc',
@@ -17,42 +19,62 @@
            }"
         />
         <view class="list">
            <navigator url="./serviceOrderDetail" class="list-item" v-for="item in 4">
            <navigator :url="'./serviceOrderDetail?id='+item.id" class="list-item" v-for="item in list">
               <view class="list-header">
                  <text>订单号: N202012123556</text>
                  <text class="gray">2020-12-15 18:11:01</text>
                  <text>订单号: {{item.serviceNo}}</text>
                  <text class="gray">{{item.time}}</text>
               </view>
               <view class="list-content">
                  <view class="flex flex-v">
                     <view>
                        <image src="../../static/images/order-icon1.png" class="icon"></image>
                        <text>李广</text>
                        <text>{{item.vipName}}</text>
                     </view>
                     <view class="flex mt-10">
                        <image src="../../static/images/order-icon2.png" class="icon" style="padding-top: 3px;"></image>
                        <view>
                           <text>肽补水·无创水光管理</text>
                           <text class="block mt-5">肽补水·无创水光管理</text>
                           <text class="block" :class="index===0?'':'mt-5'" v-for="(op, index) in item.projs">{{op.projName}}</text>
                        </view>
                     </view>
                     <view class="mt-10">
                        <image src="../../static/images/order-icon3.png" class="icon"></image>
                        <text>VIP-2（星海店）</text>
                        <text>{{item.bed || '-'}}</text>
                     </view>
                     
                  </view>
                  <view class="flex flex-v right">
                     <text class="gray">90分钟</text>
                     <text class="gray mt-10">莉莉</text>
                     <text class="gray mt-5">雯雯</text>
                     <text class="blue mt-10">待付款</text>
                  <view class="flex flex-v right" style="flex: 0 0 70px;">
                     <text class="gray mb-5">{{item.timeLength}}分钟</text>
                     <text class="gray mt-5" v-for="(op, index) in item.projs">{{op.beautyName || '-'}}</text>
                     <text class="mt-10" :class="item.status==7 || item.status==8?'gray':'blue'">{{item.status | formatStatus}}</text>
                  </view>
               </view>
               <view class="list-footer">
                  <text class="white-btn small-btn">取消</text>
                  <text class="blue-btn small-btn ml-10">开始服务</text>
               <view :class="isShowFooter(item.status, item.projs, item.staffId)?'list-footer':''">
                  <text class="white-btn small-btn" 
                     v-if="isShowCancelBtn(item.status, item.projs, item.staffId)" 
                     @click.stop="cancelOrder(item.id)">
                     取消
                  </text>
                  <text class="blue-btn small-btn ml-10"
                     v-if="isShowOrder(item.status)"
                     @click.stop="confirmServiceOrder(item.id)">
                     确认预约
                  </text>
                  <text class="blue-btn small-btn ml-10" 
                     v-if="isShowStartServiceBtn(item.status, item.projs)"
                     @click.stop="startService(item.id)">
                     开始服务
                  </text>
                  <text class="blue-btn small-btn ml-10"
                     v-if="isShowEndServiceBtn(item.status, item.projs)"
                     @click.stop="endService(item.id)">
                     结束服务
                  </text>
               </view>
            </navigator>
            <no-record :isShow="!list.length" txt="暂无服务单记录"></no-record>
            <view v-if="list.length">
               <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
            </view>
         </view>
      </view>
   </view>
@@ -61,21 +83,29 @@
<script>
   import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
   import searchBar from '../../components/searchBar/index.vue';
   import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
   export default {
      components: {
          HTabs,
         searchBar
         searchBar,
         uniLoadMore
      },
      data() {
        return {
         queryKey: '',
         orderStatus: 0,
          tabs:[
            {
               state: 1,
               state: 0,
               name: '全部'
            },
            {
               state: 1,
               name: '待确认'
            },
            {
               state: 2,
               name: '待预约'
               name: '待排班'
            },
            {
               state: 3,
@@ -94,7 +124,212 @@
               name: '已完成'
            }
         ],
         list: [],
         userId: '',
         loadStatus: 'more',
         pageNum: 1
        }  
      },
      onLoad(options) {
         if(options.status){
            this.orderStatus = Number(options.status);
         }
         if(options.queryKey){
            this.queryKey = options.queryKey;
         }
         this.loadList();
         this.userId = this.$httpUtils.getRoleInfo().id;
         // 判断权限
         // #ifdef APP-PLUS
         if(!this.$utils.hasPermission('fwdgl.add')){
            let webView = this.$mp.page.$getAppWebview();
            webView.setTitleNViewButtonStyle(0, {
                width: 0,  
            });
         }
         // #endif
      },
      onPullDownRefresh(){
         this.reloadData();
         let timer = setTimeout(function () {
            uni.stopPullDownRefresh();
            clearTimeout(timer);
            timer = null;
         }, 800);
      },
      onReachBottom(){
         this.loadList()
      },
      onNavigationBarButtonTap(Object){
         if(Object.key === 'add'){
            uni.navigateTo({
               url: './selectCustomer?type=2'
            })
         }
      },
      methods:{
         reloadData(){
            this.list = [];
            this.pageNum = 1;
            this.loadStatus = 'more';
            this.loadList();
         },
         loadList(){
            if(this.loadStatus!=='more'){
               return;
            }
            this.$httpUtils.request('/api/serviceOrder/findServiceOrderList', {
               pageNum: this.pageNum,
               pageSize: 10,
               queryKey: this.queryKey,
               status: this.orderStatus
            }, 'POST').then((res) => {
               if(res.status == 200){
                  let result = res.rows;
                  if(result.length < 10){
                     this.loadStatus = 'noMore';
                  } else {
                     this.pageNum ++ ;
                     this.loadStatus = 'more';
                  }
                  this.list = this.list.concat(result);
               }
            })
         },
         // 是否显示操作按钮
         isShowFooter(status, items, staffId){
            return this.isShowCancelBtn(status, items, staffId) ||
               this.isShowStartServiceBtn(status, items) ||
               this.isShowEndServiceBtn(status, items) ||
               this.isShowOrder(status)
         },
         // 是否显示取消按钮
         isShowCancelBtn(status, items, staffId){
            // 美疗师和下单顾问可以取消服务
            let isEnable = (items.some((item) => item.id == this.userId)) || (this.userId == staffId);
            return status != 5 && status != 6 && status != 7 && status != 8 && isEnable && this.$utils.hasPermission('fwdgl.cancel');
         },
         // 是否显示确认预约
         isShowOrder(status){
            return status == 9 && this.$utils.hasPermission('fwdgl.qryy');
         },
         // 是否显示开始服务按钮
         isShowStartServiceBtn(status, items){
            // 只有美疗师本人才可以开始服务
            let isEnable = items.some((item) => item.id == this.userId)
            return status == 4 && isEnable && this.$utils.hasPermission('fwdgl.begin');
         },
         // 是否显示结束服务按钮
         isShowEndServiceBtn(status, items){
            // 只有美疗师本人才可以开始服务
            let isEnable = items.some((item) => item.id == this.userId)
            return status == 5 && isEnable && this.$utils.hasPermission('fwdgl.end');
         },
         search(val){
            this.queryKey = val;
            this.reloadData();
         },
         tabChange(index){
            if(this.orderStatus === index){
               return;
            }
            this.orderStatus = index;
            this.reloadData();
         },
         // 取消订单
         cancelOrder(id){
            uni.showModal({
                title: '提示',
                content: '确定取消服务吗？',
                success: (res) => {
                    if (res.confirm) {
                     this.$httpUtils.request('/api/serviceOrder/cancelService/'+id).then((res) => {
                        if(res.status == 200){
                           this.reloadData()
                        }
                        this.$toast.info(res.info);
                     })
                    }
                }
            });
         },
         // 确认预约
         confirmServiceOrder(id){
            uni.showModal({
                title: '提示',
                content: '确认预约吗？',
                success: (res) => {
                    if (res.confirm) {
                     this.$httpUtils.request('/api/serviceOrder/confirmServiceOrder', {
                        id:id
                     }, 'POST').then((res) => {
                        if(res.status == 200){
                           this.reloadData()
                        }
                        this.$toast.info(res.info);
                     })
                    }
                }
            });
         },
         //开始服务
         startService(id){
            uni.showModal({
                title: '提示',
                content: '确定开始服务吗？',
                success: (res) => {
                    if (res.confirm) {
                     this.$httpUtils.request('/api/serviceOrder/startService/'+id).then((res) => {
                        if(res.status == 200){
                           this.reloadData()
                        }
                        this.$toast.info(res.info);
                     })
                    }
                }
            });
         },
         // 结束服务
         endService(id){
            uni.showModal({
                title: '提示',
                content: '确定结束服务吗？',
                success: (res) => {
                    if (res.confirm) {
                     this.$httpUtils.request('/api/serviceOrder/stopService/'+id).then((res) => {
                        if(res.status == 200){
                           this.reloadData()
                        }
                        this.$toast.info(res.info);
                     })
                    }
                }
            });
         }
      },
      filters:{
         // 状态 1-待预约 2-待派单 3-待配料 4-待服务 5-服务中 6-服务完成 7-服务单结束 8-服务单取消
         formatStatus(val){
            if(val==1){
               return '待预约'
            } else if(val == 2){
               return '待派单'
            } else if(val == 3){
               return '待配料'
            } else if(val == 4){
               return '待服务'
            } else if(val == 5){
               return '服务中'
            } else if(val == 6){
               return '已完成'
            } else if(val == 7){
               return '服务单结束'
            } else if(val == 9){
               return '待确认'
            } else {
               return '已取消'
            }
         },
      }
   }
</script>
@@ -116,11 +351,12 @@
      border-radius: 4px;
      margin: 10px;
      color: #3a3f3f;
      padding: 0 10px;
   }
   .list-header{
      display: flex;
      justify-content: space-between;
      padding: 12px 15px;
      padding: 12px 0;
      font-size: 15px;
      border-bottom: 1px solid #EDEAF4;
   }
@@ -128,7 +364,7 @@
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      padding: 12px 0;
      font-size: 14px;
   }
   .list-content .icon{
@@ -140,7 +376,7 @@
   .list-footer{
      display: flex;
      justify-content: flex-end;
      padding: 10px 15px;
      padding: 10px 0;
      border-top: 1px solid #EDEAF4;
   }
</style>