gx

queenwuli

2021-01-12 a6653e19d20a61e7b8f788037d2a4df3f93a4f32

 hive-app/pages/workbench/followRecords/orderList.vue

@@ -1,9 +1,10 @@
<template>
   <!-- 订单列表 -->
   <view>
		
      <h-tabs
         class="tab"
         :activeIndex="orderStatus"
         :activeIndex="tabIndex"
         @tabClick="tabChange"
         :tabData="tabs" 
         :config="{
@@ -15,18 +16,20 @@
            underLineWidth: 60,
         }"
      />
      <view v-if="this.orderStatus==0">
      <view class="header">
         <search-bar @confirm="search" placeholder="输入会员姓名、手机号、订单号" class="mt-0"></search-bar>
      </view>
      <view v-if="tabIndex==0">
         <view class="list">
            <view class="list-item" v-for="item in 2">
               <navigator url="./" hover-class="none">
            <view class="list-item" v-for="item in orderList">
                  <view class="list-header">
                     <text>订单号: 123456789</text>
                     <text class="blue">待付款</text>
                  <text>订单号: {{item.orderNo}}</text>
                  <text :class="caculateColor(item.orderStatus)">{{item.orderStatus}}</text>
                  </view>
                  <view class="list-content">
                     <view class="flex flex-v flex-1">
                        <text class="font-bold font-15">刘亦菲</text>
                        <text class="gray">2020-12-23 12:34</text>
                     <text class="font-bold font-15">{{item.vipName}}</text>
                     <text class="gray">{{item.orderTime}}</text>
                     </view>
                     <view class="flex justify-between flex-1">
                        <view>
@@ -35,69 +38,79 @@
                           <view>欠款总额</view>
                        </view>
                        <view class="right">
                           <view>￥ 233</view>
                           <view>￥ 233</view>
                           <view>￥ 233</view>
                        <view>￥ {{item.needPay | formatNum}}</view>
                        <view>￥ {{item.realPay | formatNum}}</view>
                        <view>￥ {{item.arrears | formatNum}}</view>
                        </view>
                     </view>
                  </view>
               </navigator>
               <view class="list-footer">
                  <text class="blue-btn small-btn mr-10">选择</text>
                  <text class="blue-btn small-btn">查看详情</text>
                  <text class="blue-btn small-btn mr-10" @click="choose(item)">选择</text>
                  <navigator :url="'../orderDetail?orderId='+item.orderId" class="blue-btn small-btn">查看详情</navigator>
               </view>
            </view>
         </view>
         <no-record :isShow="!orderList.length" txt="暂无订单记录"></no-record>
         <view v-if="orderList.length">
            <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
      </view>
      <view v-if="this.orderStatus==1">
      </view>
      <view v-else>
         <view class="list">
            <navigator url="./" class="list-item" v-for="item in 2">
            <view class="list-item" v-for="item in serviceOrderList">
               <view class="list-header">
                  <text>订单号: 123456789</text>
                  <text class="gray">2020-12-23 12:34</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>Label</text>
                        <text>{{item.vipName}}</text>
                     </view>
                     <view class="flex align-center mt-10">
                        <image src="../../../static/images/order-icon2.png" class="icon"></image>
                     <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" :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" style="flex: 0 0 70px;">
                     <text class="gray mb-5">90分钟</text>
                     <text class="gray mt-5">邝健琼</text>
                     <text class="mt-10 blue">待配料</text>
                     <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="blue-btn small-btn mr-10">选择</text>
                  <text class="blue-btn small-btn">查看详情</text>
                  <text class="blue-btn small-btn mr-10" @click="choose(item)">选择</text>
                  <navigator :url="'../serviceOrderDetail?id='+item.id" class="blue-btn small-btn">查看详情</navigator>
               </view>
            </navigator>
            </view>
         </view>
         <no-record :isShow="!serviceOrderList.length" txt="暂无服务单记录"></no-record>
         <view v-if="serviceOrderList.length">
            <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
         </view>
      </view>
   </view>
</template>

<script>
   import searchBar from '../../../components/searchBar/index.vue';
   import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
   export default{
      components: {
         searchBar,
          HTabs
      },
      data() {
         return {
            tabIndex: 0,
            tabs:[
               {
                  state: 0,
@@ -108,16 +121,116 @@
                  name: '服务单'
               }
            ],
            orderStatus: 0,
            orderList: [],
            serviceOrderList: [],
            loadStatus: 'more',
            pageNum: 1
         }  
      },
      onLoad() {
         this.loadList()
      },
      onPullDownRefresh(){
         this.reloadData();
         let timer = setTimeout(function () {
            uni.startPullDownRefresh();
            clearTimeout(timer);
            timer = null;
         }, 800);
      },
      onReachBottom(){
         this.loadList()
      },
      methods:{
         tabChange(index){
            if(this.orderStatus === index){
               console.log(index)
			
         reloadData(){
            this.orderList = [];
            this.serviceOrderList = [];
            this.pageNum = 1;
            this.loadStatus = 'more';
            this.loadList();
         },
         loadList(){
            const url = this.tabIndex==0?'/api/order/findOrderList':'/api/serviceOrder/findServiceOrderList'
            if(this.loadStatus!=='more'){
               return;
            }
            this.orderStatus = index;
            this.$httpUtils.request(url, {
               pageNum: this.pageNum,
               pageSize: 10,
               queryKey: this.queryKey,
               orderStatus: 0
            }, 'POST').then((res) => {
               if(res.status == 200){
                  let result = res.rows;
                  if(result.length < 10){
                     this.loadStatus = 'noMore';
                  } else {
                     this.pageNum ++ ;
                     this.loadStatus = 'more';
                  }
                  if(this.tabIndex == 0){
                     this.orderList = this.orderList.concat(result);
                  }else{
                     this.serviceOrderList = this.serviceOrderList.concat(result);
                  }
               }
            })
         },
         search(val){
            this.queryKey = val;
            this.reloadData()
         },
         tabChange(index){
            if(this.tabIndex === index){
               return;
            }
            this.tabIndex = index;
            this.reloadData();
         },
         caculateColor(status){
            if(status==='待付款'){
               return 'blue'
            } else if(status === '已付款'){
               return 'blueness'
            } else if(status === '欠款'){
               return 'red'
            } else {
               return 'gray'
            }
         },
         choose(item){
            uni.$emit('orderChange', {
               type: this.tabIndex,
               id: this.tabIndex==0?item.orderId:item.id,
               vipName: item.vipName,
               vipId: item.vipId
            });
            setTimeout(() => {
               uni.navigateBack();
            }, 200)
         }
      },
      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 {
               return '已取消'
            }
         },
      }
   }
@@ -127,6 +240,10 @@
   page{
      background: #F6F6F8;
   }
   .header{
      padding: 10px 10px 5px;
      background: #FFFFFF;
   }
   .tab{
      background: #FFFFFF;
   }