小程序

doum

17 小时以前 599cbbfede5e74d928c987434844a74ce2002694

 mini-program/pages/order/order.vue

@@ -1,62 +1,115 @@
<template>
   <view class="box">
      <view class="cate">
         <view @click="changeRow(index)" :class="i === index ? 'cate-item active' : 'cate-item'" v-for="(item, index) in cate" :key="index">
         <view @click="changeRow(index)" :class="active === index ? 'cate-item active' : 'cate-item'" v-for="(item, index) in cate" :key="'cate_'+index">
            {{item.name}}
            <view class="cate-item-xiab" v-if="i === index"></view>
            <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="list-item" v-for="(item, index) in dataList" :key="index">
            <view class="a">
               <view class="a-left">
                  <view class="a-left-tips">自提</view>
                  <text>鼎元农机一号经销商</text>
                  <view class="a-left-tips">{{item.receiveType==1?'自提':'快递配送'}}</view>
                  <text>订单号：{{item.id}}</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-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/logo.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 class="b-item" v-for="(item1, index1) in (item.goodsorderDetailList||[])">
                  <view class="b-item-image">
                     <image :src="item1.imgurl||'/static/logo.png'" mode="widthFix"></image>
                  </view>
                  <view class="b-item-title">{{item1.name||''}}</view>
                  <view class="b-item-jia">
                     <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">取消订单</view>
                  <view class="c-btns-item blue">立即支付</view>
                  <view class="c-btns-item blue" @click="contactPhone(item)">联系经销商</view>
                  <view class="c-btns-item bg" >自提码</view>
               </view>
            </view>
            <view class="d" v-if="item.memberInfo">
               订单备注：{{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>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','userInfo', 'token'])
      },
      data() {
         return {
            i: '',
            active:0,
            loading:false,
            currentPage:1,
            total:0,
            hasNext:true,
            dataList:[], 
            linkItem:{},
            cate: [
               { name: '全部', id: '' },
               { name: '待支付', id: 0 },
               { name: '待发货/自提', id: 1 },
               { name: '待收货', id: 2 },
            ],
            list: []
               { name: '待发货/自提', id: 1 ,
               { name: '待收货', id: 2 }
            ]
         };
      },
      onLoad(options) {
@@ -64,9 +117,80 @@
            this.i = Number(options.status)
         }
      },
      onShow() {
         this.shop  ={}
         this.checkUserLogin()
         this.shop = this.shopInfo || {}
         this.getFirstPageData()
      },
      onReachBottom(){
         this.getDataList();
      },
      methods: {
         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(index) {
            this.active=index
            this.i = this.cate[index].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 = await that.$u.api.orderPage({
                     capacity:10,
                     model: {
                        orderStatus: 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
         },
         checkUserLogin(){
            var that =this
            if( this.userInfo ==null || this.userInfo.id==null ||  this.token==null || this.token==''){
               uni.navigateTo({
                  url: '/pages/index/index'
               })
            } 
         }
      }
   }
@@ -82,6 +206,7 @@
      .list {
         width: 100%;
         padding: 22rpx 30rpx;
         padding-bottom: 60rpx;
         box-sizing: border-box;
         .list-item {
            width: 100%;
@@ -123,10 +248,12 @@
                  font-size: 26rpx;
                  color: #E4001D;
               }
               .grey{
                  color: #999999 !important;
               }
            }
            .b {
               width: 100%;
               height: 136rpx;
               display: flex;
               flex-direction: column;
               margin-top: 22rpx;
@@ -158,6 +285,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;
@@ -224,6 +355,18 @@
                     border: 1rpx solid #004096;
                     color: #004096 !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;
                     box-sizing: border-box;