gx

queenwuli

2021-01-09 79f11f34546a394ab1c16ba427c31e9b59d05523

 hive-app/pages/workbench/orderList.vue

@@ -2,11 +2,13 @@
   <!-- 订单列表 -->
   <view>
      <view class="header">
         <search-bar class="mb-0"></search-bar>
         <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',
@@ -18,31 +20,35 @@
            }"
         />
         <view class="list">
            <navigator url="./orderDetail" class="list-item" v-for="item in 4">
               <view class="list-header">
                  <text>订单号: N202012123556</text>
                  <text class="blue">待付款</text>
               </view>
               <view class="list-content">
                  <view class="flex flex-v">
                     <text class="font-bold font-16">李某某</text>
                     <text class="gray">2020-12-15 18:11:01</text>
            <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="flex flex-v">
                     <text>应付金额</text>
                     <text>实付金额</text>
                     <text>欠款总额</text>
                  <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>
                  <view class="flex flex-v right">
                     <text>￥ 8000.00</text>
                     <text>￥ 0.00</text>
                     <text>￥ 8000.00</text>
                  </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 class="list-footer">
                  <text class="blue-btn small-btn">取消订单</text>
               </view>
            </navigator>
            </view>
         </view>
      </view>
   </view>
@@ -57,26 +63,104 @@
         searchBar
      },
      data() {
        return {
          tabs:[
            {
               state: 1,
               name: '全部'
            },
            {
               state: 2,
               name: '待付款'
            },
            {
               state: 3,
               name: '已付款'
            },
            {
               state: 4,
               name: '欠款'
            },
         ],
        }  
         return {
            orderStatus: 0,
            tabs:[
               {
                  state: 0,
                  name: '全部'
               },
               {
                  state: 1,
                  name: '待付款'
               },
               {
                  state: 2,
                  name: '已付款'
               },
               {
                  state: 3,
                  name: '欠款'
               },
            ],
            list: []
         }  
      },
      onLoad(options) {
         if(options.status){
            this.orderStatus = Number(options.status);
         }
         this.loadList()
			
         // 判断权限
         // #ifdef APP-PLUS
         if(!this.$utils.hasPermission('ddgl.add')){
            let webView = this.$mp.page.$getAppWebview();
            webView.setTitleNViewButtonStyle(0, {
                width: 0,  
            });
         }
         // #endif
      },
      onNavigationBarButtonTap(Object){
         if(Object.key === 'add'){
            uni.navigateTo({
               url: './selectCustomer'
            })
         }
      },
      methods:{
         loadList(){
            this.$httpUtils.request('/api/order/findOrderList', {
               pageNum: 1,
               pageSize: 100,
               queryKey: this.queryKey,
               orderStatus: this.orderStatus
            }, 'POST').then((res) => {
               if(res.status == 200){
                  this.list = res.rows;
               }
            })
         },
         search(val){
            this.queryKey = val;
            this.loadList();
         },
         tabChange(index){
            if(this.orderStatus === index){
               return;
            }
            this.orderStatus = index;
            this.loadList();
         },
         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) {
                        console.log('用户点击确定');
                     this.$httpUtils.request('/api/order/cancelOrder/'+id).then((res) => {
                        if(res.status == 200){
                           this.loadList()
                        }
                        this.$toast.info(res.info);
                     })
                    }
                }
            });
         }
      }
   }
</script>