经销商管理pay

doum

5 天以前 1dcd8399c853ef724133d4d1ad0d700db0f293e7

 mini-program/pagesA/pages/order/order.vue

@@ -1,60 +1,443 @@
<template>
   <view class="box">
      <view class="cate">
         <view @click="i = index" :class="i === index ? 'cate-item active' : 'cate-item'" v-for="(item, index) in list" :key="index">
            {{item}}
            <view class="cate-item-xiab" v-if="i === index"></view>
         <view @click="changeRow(item)" :class="active === index ? 'cate-item active' : 'cate-item'" v-for="(item, index) in cate" :key="index">
            {{item.name}}
            <view class="cate-item-xiab" v-if="active === index"></view>
         </view>
      </view>
      <view class="list">
         <view class="list-item" v-for="(item, index) in 5" :key="index">
            <view class="a">
         <view class="list-item" v-for="(item, index) in dataList" :key="index">
            <view class="a"  @click="jumpOrderDetail(item.id)">
               <view class="a-left">
                  <view class="a-left-tips">自提</view>
                  <text>鼎元农机一号经销商</text>
                  <view :class="'a-left-tips '+(item.receiveType==1?'shop-top-tips-a':'shop-top-tips-b')">{{item.receiveType==1?'自提':'配送'}}</view>
                  <text>订单号：{{item.code}}</text>
               </view>
               <view class="a-right">待付款：</view>
               <text v-if="item.status ==0" class="a-right">待支付</text>
               <text  v-if="item.status ==1" class="a-right">{{item.receiveType==1?'待自提':'待发货'}}</text>
               <text  v-if="item.status ==2" class="a-right">待收货</text>
               <text  v-if="item.status ==3" class="a-right grey">交易完成</text>
               <text  v-if="item.status ==4" class="a-right grey">已取消</text>
               <text  v-if="item.status ==6" class="a-right grey">已退款</text>
            </view>
            <view class="b">
               <view class="b-item">
            <view class="b"  @click="jumpOrderDetail(item.id)">
               <view class="b-item" v-for="(item1, index1) in (item.goodsorderDetailList||[])"  >
                  <view class="b-item-image">
                     <image src="/static/logo.png" mode="widthFix"></image>
                     <image :src="item1.imgurl||'/static/static/default2.png'" mode="widthFix"></image>
                  </view>
                  <view class="b-item-title">中联艾禾宽齿 适用雷沃/中联/久保田</view>
                  <view class="b-item-title">{{item1.name||''}}</view>
                  <view class="b-item-jia">
                     <text>¥499.00</text>
                     <text>x1</text>
                     <text>¥{{(item1.price||0).toFixed(2)}}</text>
                     <text>x{{item1.goodsNum||0}}</text>
                  </view>
               </view>
            </view>
            <view class="c">
               <view class="c-label">
                  <view class="c-label-title">需付款：</view>
                  <view class="c-label-title">实付款：</view>
                  <view class="c-label-price">
                     <text>998</text>
                     <text>.00</text>
                     <text>{{(item.price||0).toFixed(2)}}</text>
                     <text></text>
                  </view>
               </view>
               <view class="c-btns">
                  <view class="c-btns-item blue">联系客户</view>
                  <view class="c-btns-item bluebg">自提核销</view>
               <view class="c-btns" v-if="userType ==1">
                  <view class="c-btns-item blue" @click="contactPhone(item)">联系客户</view>
                  <view class="c-btns-item bg" v-if="item.status==1 && item.receiveType==1" @click="hexiaoOrder(item)">自提核销</view>
               </view>
               <view class="c-btns" v-if="userType !=1"> 
                  <view class="c-btns-item grey" @click="cancelOrder(item)" v-if="item.status==0 || item.status==1">取消订单</view> 
                  <view class="c-btns-item grey" @click="deleteOrder(item)" v-if="item.status==4">删除订单</view> 
                  <view class="c-btns-item blue" @click="openQrcode(item)"  v-if="item.status==1 && item.receiveType==1">自提码</view>
                  <view class="c-btns-item blue" @click="payOrder(item)" v-if="item.status==0">去支付</view> 
                  <view class="c-btns-item blue" @click="doneOrder(item)" v-if="item.status==2">确认收货</view>
               </view>
            </view>
            <view class="d">
               订单备注：11月22日来拿
            <view class="d" v-if="item.memberInfo"  @click="jumpOrderDetail(item.id)">
               订单备注：{{item.memberInfo||''}}
            </view>
         </view>
         <view v-if="!hasNext" class="nomore">已加载全部</view>
      </view>
      <u-popup :show="showPhone" round="15" mode="bottom" :safeAreaInsetBottom="true"  @close="contactPhone()" :closeable="true" :closeOnClickOverlay="true">
         <view class="phone">
            <view class="phone-head">
               <view></view>
               <text>联系客户</text> 
            </view>
            <!-- <view class="phone-item">
               <view>
                  <image style="width: 36rpx;height: 36rpx" src="/static/icon/ic_kefu.png" mode="widthFix"></image>
                  <button open-type="contact" plain="true" bindcontact="handleContact">在线客服</button>
               </view>
                <view class="line" v-if="serverPhone && serverPhone.length"></view>
            </view> -->
             <view class="phone-item" >
                <view>
                  <image src="/static/icon/ic_call@2x.png" mode="widthFix" @click="contactPhoneDo()" ></image>
                  <text>{{linkItem.linkname||''}} </text> 
                  <text style="margin-left: 10px;"> {{linkItem.linkphone||''}}</text> 
               </view> 
             </view>  
             <view style="width: 100%; height: 30rpx;"></view>
            <!-- <view class="phone-botton"  @click="contactPhone()" >关闭</view> -->
         </view>
      </u-popup>
      <!-- 确认收货 -->
      <u-popup :show="showDone" round="15" :safeAreaInsetBottom="false" mode="center">
         <view class="tc">
            <view class="tc-contemt">
               <view class="tc-contemt-title">确认收货提醒</view>
               <view class="tc-contemt-nr">
                  您确认已经收到商品了吗？
               </view>
            </view>
            <view class="tc-btn">
               <view class="tc-btn-item" @click="showDone = false;currentOrder=null;">取消</view>
               <view class="tc-btn-item" style="color: #004096;" @click="doneOrderDo()">确认收货</view>
            </view>
         </view>
      </u-popup>
      <!-- 取消订单 -->
      <u-popup :show="showCancel" round="15" :safeAreaInsetBottom="false" mode="center">
         <view class="tc">
            <view class="tc-contemt">
               <view class="tc-contemt-title">确定取消提醒</view>
               <view class="tc-contemt-nr">
                  您确认取消该订单吗？
               </view>
            </view>
            <view class="tc-btn">
               <view class="tc-btn-item" @click="showCancel = false;currentOrder=null;">我再想想</view>
               <view class="tc-btn-item" style="color: red;" @click="cancelOrderDo">确认取消</view>
            </view>
         </view>
      </u-popup>
      <!-- 删除订单 -->
      <u-popup :show="showDelete" round="15" :safeAreaInsetBottom="false" mode="center">
         <view class="tc">
            <view class="tc-contemt">
               <view class="tc-contemt-title">确认删除提醒</view>
               <view class="tc-contemt-nr">
                  您确认删除该订单吗？
               </view>
            </view>
            <view class="tc-btn">
               <view class="tc-btn-item" @click="showDelete = false;currentOrder=null;">我再想想</view>
               <view class="tc-btn-item" style="color: red;" @click="deleteOrderDo">确认删除</view>
            </view>
         </view>
      </u-popup>
      <u-popup :show="showQrcode" round="15" @close="openQrcode()"   :safeAreaInsetBottom="false" mode="bottom"  :closeable="true" :closeOnClickOverlay="false">
         <view class="tc" style="width: 100%;">
            <view class="tc-contemt">
               <view class="tc-contemt-title" style="text-align: center;">自提码</view>
               <view class="tc-contemt-nr" style="border: 1rpx solid #f2f2f2;width: 150px;height: 150px;">
                  <image style="border: 1rpx solid #f2f2f2;width: 150px;height: 150px;" v-if="currentOrder && currentOrder.qrCodeBase64" :src="currentOrder.qrCodeBase64"  model="widthFix" ></image>
               </view>
                <view class="tc-contemt-title" style="text-align: center;">{{currentOrder.exchangeCode|| ''}}</view>
            </view>
         </view>
      </u-popup>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import QRCode from 'qrcode';
   export default {
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','shopInfo', 'shopToken'])
      },
      data() {
         return {
            i: 0,
            list: ['全部', '待支付', '待自提']
            i: '',
            currentOrder:null,
            showDone:false,
            showCancel:false,
            showDelete:false,
            showQrcode:false,
            showPay:false,
            showPhone:false,
            loading:false,
            active:0,
            currentPage:1,
            total:0,
            hasNext:true,
            userType:null,
            dataList:[],
            shop:{}, 
            linkItem:{},
            cate:[],
            cate1: [
               { name: '全部', id: '' ,index:0},
               { name: '待支付', id: 0 ,index:1},
               { name: '待发货/自提', id: 1,index:2 }
            ],
            cate0: [
               { name: '全部', id: '' ,index:0},
               { name: '待支付', id: 0 ,index:1},
               { name: '待发货/自提', id: 1,index:2 },
               { name: '待收货', id: 2 ,index:3},
            ]
         };
      },
      onLoad(options) {
         console.log(options )
         this.active = 0
         this.cate =[]
         this.userType = Number(options.userType)
         if(this.userType == 1){
            this.shop  ={}
            this.checkShopLogin()
            this.shop = this.shopInfo || {}
             this.cate =this.cate1;
         }else{
             this.cate =this.cate0;
         }
         if (options.status) {
            this.active =  Number(options.status)
            this.i = this.cate[this.active].id
         }
         this.getFirstPageData()
         var that =this
         uni.$on('updateOrder',function(data){
            console.log('监听到事件来自 update ，携带参数 msg 为：' ,data);
            if(data.delete == 1){
               //删除订单，强制刷新数据
               that.getFirstPageData()
            }else if(data.info!=null && data.info.orderId!=null){
                 console.log('监听到事件来自 update 01：' ,data);
               that.dataList.forEach((item,index)=>{
                  if(item.id==data.info.orderId){
                      console.log('监听到事件来自 update 02：' ,data);
                     item.status = data.info.orderStatus
                  }
               }) 
            }
				
          })
      },
      onShow() {
         this.showDone=false
         this.showCancel=false
         this.showDelete=false
         this.showQrcode=false
         this.showPay=false
         this.showPhone=false
         this.loading=false,
         this.currentOrder=null
      },
      onReachBottom(){
         this.getDataList();
      },
      methods: {
         async openQrcode(item){
            this.currentOrder = null
            var that =this
            if(!this.showQrcode){
               this.currentOrder = item
               if(this.currentOrder.qrCodeBase64 == undefined && this.currentOrder.qrCodeBase64==null){
                  try {
                     const ocanvas = uni.createOffscreenCanvas({ type: "2d" });
                     const qrCodeBase64 = await QRCode.toDataURL(ocanvas,this.currentOrder.exchangeCode, {
                        scale: 1, // 二维码的缩放比例，可以根据需要调整
                        width: 150, // 二维码的宽度，可以根据需要调整
                        margin: 1 // 二维码周围的空白边距，可以根据需要调整
                     }); 
                     this.currentOrder.qrCodeBase64 =qrCodeBase64
                     that.showQrcode = true
                  } catch (err) {
                     uni.showToast({
                        title:'生成自提码失败',
                        icon:'error'
                     })
                  }
               }else{
                  that.showQrcode = true
               }
            }else{
               this.showQrcode = false
            }
         },
         hexiaoOrder(item){
            uni.navigateTo({
               url:'/pagesA/pages/write-off-a/write-off-a?id='+item.id
            })
         },
         cancelOrder(item){
            this.currentOrder = null
            this.showCancel = !this.showCancel
            if(this.showCancel){
               this.currentOrder = item
            }
         },
         deleteOrder(item){
            this.currentOrder = null
            this.showDelete = !this.showDelete
            if(this.showDelete){
               this.currentOrder = item
            }
         },
			
         payOrder(item){
         },
         doneOrder(item){
            this.currentOrder = null
            this.showDone = !this.showDone
            if(this.showDone){
               this.currentOrder = item
            }
         },
         async  doneOrderDo(){
            if(this.userType == 1 || this.currentOrder==null || this.currentOrder.id == null) {
               return
            }
            var that =this
            let res = await this.$u.api.affirmOrder({ orderId: this.currentOrder.id  });
            if (res.code === 200 ) { 
               //修改订单状态
               this.dataList.forEach(item=>{
                  if(item.id==this.currentOrder.id){
                     item.status =3
                  }
               }) 
               this.doneOrder()
            }else{
               /* uni.showToast({
                  title:res.message||'确定收货失败！',
                  icon:'error'
               }) */
            }
         },
         async cancelOrderDo(){
            if(this.userType == 1 || this.currentOrder==null || this.currentOrder.id == null) {
               return
            }
               var that =this
            let res = await that.$u.api.cancelOrder({ orderId: this.currentOrder.id  });
            if (res.code === 200 ) { 
               //修改订单状态
               this.dataList.forEach(item=>{
                  if(item.id==this.currentOrder.id){
                     item.status = 4
                  }
               }) 
               this.cancelOrder()
            }else{
               /* uni.showToast({
                  title:res.message||'取消订单失败！',
                  icon:'error'
               }) */
            }
         },
         async deleteOrderDo(){
            if(this.userType == 1 || this.currentOrder==null || this.currentOrder.id == null) {
               return
            }
            var that =this
            let res = await that.$u.api.delOrder({ orderId: this.currentOrder.id  });
            if (res.code === 200 ) { 
               //修改订单状态
               /* var tindex = -1;
               this.dataList.forEach((item,index)=>{
                  if(item.id==this.currentOrder.id){
                     tindex = index
                  }
               }) 
               if(tindex>=0){
                  this.dataList.splice(tindex,1)
               } */
               this.getFirstPageData()
            }else{
               /* uni.showToast({
                  title:res.message||'删除订单失败！',
                  icon:'error'
               }) */
            }
         },
         contactPhone(item){
             this.showPhone = !this.showPhone
             this.linkItem = item ||{}
             console.log("==================================",this.showPhone)
         },
         contactPhoneDo(){ 
            if(this.linkItem.linkphone !=null && this.linkItem.linkphone!=''){
               uni.makePhoneCall({
                  phoneNumber: this.linkItem.linkphone  
               })
            }
         },
         changeRow( item) {
             this.active=item.index
             this.i = item.id
            this.getFirstPageData()
         },
         getFirstPageData(){
            this.currentPage = 0
            this.hasNext=true
            this.total=0
            this.dataList=[]
            this.getDataList()
         },
         async getDataList(){
               if(this.loading || !this.hasNext){
                  return
               }
               this.loading=true
               this.currentPage =   this.currentPage+1
               if(this.currentPage == 1){
                  this.hasNext =true
                  this.dataList=[]
               }
               var that =this 
               let res ={};
               if(this.userType == 1){
                  res = await that.$u.api.shopOrderPage({
                        capacity:10,
                        model: {
                           receiveType: 1, 
                           status: this.i
                        },
                        page:this.currentPage
                     });
               }else{
                  res = await that.$u.api.orderPage({
                        capacity:10,
                        model: {
                           receiveType: 1, 
                           status: this.i
                        },
                        page:this.currentPage
                     });
               }
               console.log(res)
               if (res.code === 200 ) { 
                  if ( res.data && res.data.page ===this.currentPage) { 
                     res.data.records = res.data.records||[]
                      that.dataList.push(...res.data.records)
                      that.total=res.data.total
                      if( this.currentPage >= res.data.pageCount||0){
                         that.hasNext=false
                      }else{
                         that.hasNext=true
                      }
                  }
               } 
               this.loading=false
         },
         jumpOrderDetail(id){
            uni.navigateTo({
               url: '/pagesA/pages/order-details/order-details?userType='+this.userType+'&id='+id
            })
         }, 
         checkShopLogin(){
            var that =this
            if( this.shopInfo ==null || this.shopInfo.id==null ||  this.shopToken==null || this.shopToken==''){
               uni.navigateTo({
                  url: '/pages/login/login'
               })
            } 
         }
      }
   }
</script>
@@ -69,6 +452,7 @@
      .list {
         width: 100%;
         padding: 22rpx 30rpx;
         padding-bottom: 60rpx;
         box-sizing: border-box;
         .list-item {
            width: 100%;
@@ -91,13 +475,20 @@
                  .a-left-tips {
                     padding: 0 6rpx;
                     height: 40rpx;
                     line-height: 40rpx;
                     background: #00B775;
                     line-height: 40rpx; 
                     border-radius: 8rpx;
                     font-weight: 400;
                     font-size: 22rpx;
                     color: #FFFFFF;
                     margin-right: 16rpx;
                  }
                  .shop-top-tips-a {
                     background: #00B775; 
                     border: 1rpx solid #00B775;
                  }
                  .shop-top-tips-b {
                     background: #004096;
                     border: 1rpx solid #004096;
                  }
                  text {
                     font-weight: 400;
@@ -110,10 +501,25 @@
                  font-size: 26rpx;
                  color: #E4001D;
               }
               .grey{
                  color: #999999 !important;
               }
            }
            .d{
               width: 100%;
               padding:20rpx 20rpx;
               margin-top: 22rpx;
               background: #F8F9FB;
               border-radius: 8rpx;
               font-weight: 400;
               font-size: 26rpx;
               color: #666666;
               line-height: 36rpx;
               text-align: left;
               font-style: normal;
            }
            .b {
               width: 100%;
               height: 136rpx;
               display: flex;
               flex-direction: column;
               margin-top: 22rpx;
@@ -145,6 +551,10 @@
                     font-size: 30rpx;
                     color: #222222;
                     margin-right: 30rpx;
                     display: -webkit-box;
                     -webkit-line-clamp: 2; /* 限制文本为2行 */
                     -webkit-box-orient: vertical;
                     overflow: hidden;
                  }
                  .b-item-jia {
                     flex-shrink: 0;
@@ -211,9 +621,21 @@
                     border: 1rpx solid #004096;
                     color: #004096 !important;
                  }
                  .bluebg {
                     background: #004096 !important;
                  .grey {
                     border: 1rpx solid #666666;
                     color: #666666 !important;
                  }
                  .bg{
                     background: #004096;
                     border-radius: 34rpx;
                     border: 1rpx solid #004096;
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 400;
                     font-size: 28rpx;
                     color: #FFFFFF !important;
                     line-height: 40rpx;
                     text-align: center;
                     font-style: normal;
                  }
                  .c-btns-item {
                     padding: 0 24rpx;
@@ -223,27 +645,16 @@
                     align-items: center;
                     justify-content: center;
                     border-radius: 34rpx;
                     border: 1rpx solid #B2B2B2;
                     // border: 1rpx solid #B2B2B2;
                     font-weight: 400;
                     font-size: 28rpx;
                     color: #666666;
                     // color: #666666;
                     margin-right: 20rpx;
                     &:last-child {
                        margin: 0 !important;
                     }
                  }
               }
            }
            .d {
               width: 100%;
               padding: 20rpx;
               box-sizing: border-box;
               background: #F8F9FB;
               border-radius: 8rpx;
               font-weight: 400;
               font-size: 26rpx;
               color: #666666;
               margin-top: 24rpx;
            }
         }
      }