gx

queenwuli

2021-01-15 4b80c98ef5fda8d6358778f2efe8bb35cb20ccf9

 hive-app/pages/workbench/orderList.vue

@@ -1,46 +1,57 @@
<template>
   <!-- 订单列表 -->
   <view>
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <search-bar :placeholder=placeholder class="header-input"></search-bar>
      <view class="header">
         <search-bar @confirm="search" placeholder="输入会员姓名、手机号、订单号" class="mb-0"></search-bar>
      </view>
      <view>
         <h-tabs
            class="tab"
            :activeIndex="orderStatus"
            @tabClick="tabChange"
            :tabData="tabs" 
            :config="{
               color: '#abb1cc',
               activeColor: '#518EFF',
               underLineColor: '#518EFF',
               underLineHeight: 4,
               fontSize: '30',
               fontSize: '28',
               underLineWidth: 60,
            }"
         />
         <view class="order">
            <view class="flex justify-between order-number">
               <text class="font-14">订单号: N202012123556</text>
               <text class="font-14 blue">待付款</text>
            </view>
            <view class="flex justify-between order-content">
               <view class="flex flex-v">
                  <text class="font-12">李某某</text>
                  <text class="font-12 gray mt-10">2020-12-15 18:11:01</text>
               </view>
               <view class="flex flex-v">
                  <text class="font-12">应付金额</text>
                  <text class="font-12 mt-10">实付金额</text>
                  <text class="font-12 mt-10">欠款总额</text>
               </view>
               <view class="flex flex-v">
                  <text class="font-12">￥ 8000.00</text>
                  <text class="font-12 mt-10">￥ 0.00</text>
                  <text class="font-12 mt-10">￥ 8000.00</text>
         <view class="list">
            <view class="list-item" v-for="item in list">
               <navigator :url="'./orderDetail?orderId='+item.orderId" hover-class="none">
                  <view class="list-header">
                     <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">{{item.vipName}}</text>
                        <text class="gray">{{item.orderTime}}</text>
                     </view>
                     <view class="flex justify-between flex-1">
                        <view>
                           <view>应付金额</view>
                           <view>实付金额</view>
                           <view>欠款总额</view>
                        </view>
                        <view class="right">
                           <view>￥ {{item.needPay | formatNum}}</view>
                           <view>￥ {{item.realPay | formatNum}}</view>
                           <view>￥ {{item.arrears | formatNum}}</view>
                        </view>
                     </view>
                  </view>
               </navigator>
               <view class="list-footer" v-if="item.orderStatus!=='已取消' && $utils.hasPermission('ddgl.cancel')">
                  <text class="blue-btn small-btn" @click="cancelOrder(item.orderId)">取消订单</text>
               </view>
            </view>
            <view class="flex justify-end">
               <button class="blue-btn small-btn">取消订单</button>
            <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>
@@ -50,64 +61,186 @@
<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 {
         placeholder:"输入会员姓名、手机号、编号查询",
          tabs:[
            {
               state: 1,
               name: '全部'
            },
            {
               state: 2,
               name: '代付款'
            },
            {
               state: 3,
               name: '已付款'
            },
            {
               state: 4,
               name: '欠款'
            },
         ],
        }  
         return {
            queryKey: '',
            orderStatus: 0,
            tabs:[
               {
                  state: 0,
                  name: '全部'
               },
               {
                  state: 1,
                  name: '待付款'
               },
               {
                  state: 2,
                  name: '已付款'
               },
               {
                  state: 3,
                  name: '欠款'
               },
            ],
            list: [],
            loadStatus: 'more',
            pageNum: 1
         }  
      },
      onLoad(options) {
         if(options.status){
            this.orderStatus = Number(options.status);
         }
         if(options.queryKey){
            this.queryKey = options.queryKey;
         }
         this.loadList()
			
         // 判断权限
         // #ifdef APP-PLUS
         if(!this.$utils.hasPermission('ddgl.add')){
            let webView = this.$mp.page.$getAppWebview();
            webView.setTitleNViewButtonStyle(0, {
                width: 0,  
            });
         }
         // #endif
      },
      onPullDownRefresh(){
         this.reloadData();
         let timer = setTimeout(function () {
            uni.startPullDownRefresh();
            clearTimeout(timer);
            timer = null;
         }, 800);
      },
      onReachBottom(){
         this.loadList()
      },
      onNavigationBarButtonTap(Object){
         if(Object.key === 'add'){
            uni.navigateTo({
               url: './selectCustomer'
            })
         }
      },
      methods:{
         reloadData(){
            this.list = [];
            this.pageNum = 1;
            this.loadStatus = 'more';
            this.loadList();
         },
         loadList(){
            if(this.loadStatus!=='more'){
               return;
            }
            this.$httpUtils.request('/api/order/findOrderList', {
               pageNum: this.pageNum,
               pageSize: 10,
               queryKey: this.queryKey,
               orderStatus: 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);
               }
            })
         },
         search(val){
            this.queryKey = val;
            this.reloadData();
         },
         tabChange(index){
            if(this.orderStatus === index){
               return;
            }
            this.orderStatus = index;
            this.reloadData();
         },
         caculateColor(status){
            if(status==='待付款'){
               return 'blue'
            } else if(status === '已付款'){
               return 'blueness'
            } else if(status === '欠款'){
               return 'red'
            } else {
               return 'gray'
            }
         },
         cancelOrder(id){
            uni.showModal({
                title: '提示',
                content: '确定取消订单吗？',
                success: (res) => {
                    if (res.confirm) {
                     this.$httpUtils.request('/api/order/cancelOrder/'+id).then((res) => {
                        if(res.status == 200){
                           this.reloadData()
                        }
                        this.$toast.info(res.info);
                     })
                    }
                }
            });
         }
      }
   }
</script>

<style>
   .header-input{
      margin: 0 10px;
   page{
      background: #F6F6F8;
   }
   .header{
      padding: 10px 10px 5px;
      background: #FFFFFF;
   }
   .tab{
      background: #FFFFFF;
      border-bottom: 1px solid #EDEAF4;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .order{
      border: 1px solid #EDEAF4;
   .list-item{
      background: #FFFFFF;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      margin: 10px;
      padding: 0 6px;
      color: #3a3f3f;
      border: 1px solid #EDEAF4;
      padding: 0 10px;
   }
   .order-number{
      padding: 10px 6px;
   .list-header{
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      font-size: 15px;
      border-bottom: 1px solid #EDEAF4;
   }
   .order-content{
      padding: 15px 6px;
      border-bottom: 1px solid #EDEAF4;
   .list-content{
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      font-size: 14px;
      line-height: 28px;
   }
   .small-btn{
      width: 100px;
      margin: 10px 0;
      line-height: 30px;
   .list-footer{
      display: flex;
      justify-content: flex-end;
      padding: 10px 0;
      border-top: 1px solid #EDEAF4;
   }
</style>