vant tab+列表+下拉刷新

我的订单
<template>
  <section id="my_order" selected="true" params="{}">
    <ul id="order_type" class="order_type disflex">
      <li class="boxflex" :class="{'on':status==0}" @click="changeStatus(0)"><span>{{ statusText[0] }}</span></li>
      <li class="boxflex" :class="{'on':status==1}" @click="changeStatus(1)"><span>{{ statusText[1] }}</span></li>
      <li class="boxflex" :class="{'on':status==2}" @click="changeStatus(2)"><span>{{ statusText[2] }}</span></li>
      <li class="boxflex" :class="{'on':status==3}" @click="changeStatus(3)"><span>{{ statusText[3] }}</span></li>
      <li class="boxflex" :class="{'on':status==4}" @click="changeStatus(5)"><span>{{ statusText[5] }}</span></li>
    </ul>
    <van-pull-refresh v-model="isLoading" class="orderList" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :error.sync="error"
        :finished="finished"
        :immediate-check="false"
        :offset="offset"
        error-text="请求失败，点击重新加载"
        @load="getList"
      >
        <template v-if="orderList && orderList.length > 0">
          <div v-for="groupItem in orderList" class="order_detail">
            <div class="disflex">
              <span class="order_num_id">订单号: {{ groupItem.orderId }}</span>
              <span class="boxflex"></span>
              <span class="order_status" :class="'order_status_'+groupItem.status">{{ groupItem.statusDescribe }}</span>
            </div>
            <ul>
              <li v-for="productsItem in groupItem.items" class="my_order_drug_box disflex" :orderid="groupItem.orderId" @click="orderDetail(groupItem.orderId)">
                <div class="drug_img">
                  <img :src="productsItem.icon" />
                </div>
                <div class="order_drug_detail boxflex">
                  <p class="drug_name">{{ productsItem.name }}</p>
                  <p class="icon-collection">
                    <span v-if="productsItem.rx == 1" class="collection-rx">Rx</span>
                    <span v-if="productsItem.medicare == 1" class="collection-payment">医保支付</span>
                    <span v-if="productsItem.preSale == 1" class="presell">预售</span>
                  </p>
                  <div class="drug_price disflex">
                    <span class="sale_price">￥{{ productsItem.price }}</span>
                    <span v-if="productsItem.marketPrice == null || productsItem.marketPrice == ''" class="del_price boxflex"></span>
                    <span class="quantity">×{{ productsItem.quantity }}</span>
                  </div>
                  <div class="drug_quantity" :class="[productsItem.preSale == 1 ? 'order_presale' :'hide']">
                    {{ productsItem.preSale == 1 ? productsItem.preSaleContent : '' }}</div>
                  <p v-if="productsItem.takeTheirContent" class="drug-since">{{ productsItem.takeTheirContent }}</p>
                </div>
              </li>
            </ul>
            <div class="order_total_box">
              <span class="drug_quantity">共计{{ groupItem.quantity }}件商品</span>
              <span class="drug_total_price">合计:￥{{ groupItem.realPay }}</span>
              <span class="drug_freight">(含运费{{ groupItem.freight }}元)</span>
            </div>
            <div :class="[groupItem.orderStatus ? 'cancle_order_box disflex' : 'hide']">
              <span v-if="groupItem.orderStatus==1" class="cancleTips boxflex">{{ groupItem.cancelOrderTips }}</span>
              <span v-if="groupItem.cancel==1" class="cancleBtn" :orderId="groupItem.orderId" @click="canelOrder({'orderId':groupItem.orderId})">取消订单</span>
              <span v-if="groupItem.online == 1 &&groupItem.orderStatus== 1 &&groupItem.canPay == 1" class="payBtn" :orderId="groupItem.orderId" :plam="groupItem.JsParameters" @click="payMent(groupItem.orderId)">付款</span>
              <span v-if="(groupItem.orderStatus == 3||groupItem.orderStatus == 5) && groupItem.shippingMethod !='药店自提'" class="tracking" :orderid="groupItem.orderId" @click="logistics(groupItem.orderId)">查看物流</span>

            </div>
          </div>
        </template>
        <template v-else-if="orderList && orderList.length == 0">
          <div class="no_data">
            <img src="../assets/image/noData.png">
            <p>{{ noDataText[status] }}</p>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </section>
</template>

<style scoped lang="less">
@import '../assets/css/my_order.less';
</style>

<script>
import API from '@/api/order'
// import loading from '../components/loading/loading'
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      status: 0, //导航订单状态
      page: 1, //页码
      hasNext: true, //是否有下一页
      orderList: [], //数据列表
      isShow: true, //是否显示取消订单
      canelOrderId: '', //取消订单id
      noDataText: {
        0: '您没有订单',
        1: '您没有需要付款的订单',
        2: '您没有在等待发货的订单',
        3: '您还没有等待收货的订单',
        4: '您还没有已经取消的订单',
        5: '您暂时没有订单信息'
      },
      statusText: {
        0: '全部',
        1: '待付款',
        2: '待发货',
        3: '待收货',
        4: '已取消',
        5: '已收货'
		    }, //显示状态

		    queryData: {
        page: 1
      },
		    offset: 30,
		    error: false,
      loading: false,
      finished: false,
      isLoading: false
    }
  },
  metaInfo: {
	  	title: '订单列表'
  },
  // components: {
  // 	loading
  // },
  created: function() {
    // sessionStorage.setItem('token','eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzeXN0ZW0iLCJ1c2VyVHlwZSI6IjIiLCJleHAiOjE1ODg0ODg0NzQsInVzZXJJZCI6IjE2NCJ9.cWOE_ts36Ksbx_izw0tv-YohDI7zyuyL-j7Ht46MLQ8')
    this.getList()
  },
  methods: {
    	getList(refresh) {
    		var _this = this
    		var params = {}
      params.page = _this.page
      if (_this.status !== 0) {
        params.status = _this.status
      }
      _this.$showLoading()
      console.log('params=', params)
      API.orderList(params).then(res => {
        if (res.code === 0) {
          if (this.queryData.page === 1) {
            this.orderList = res.data[0].result
          } else {
            this.orderList = this.orderList.concat(res.data[0].result)
          }
          this.queryData.page++
          if (!res.data[0].hasNext) {
            console.log('没有下一页')
            this.finished = true
          }
          console.log(res, this.queryData)
        } else {
          this.error = true
          this.$toast(res.msg)
        }
        if (refresh) {
          this.isLoading = false
        } else {
          this.loading = false
        }
        console.log(this.loading)
        _this.$hideLoading()
      },
      () => {
        if (refresh) {
          this.isLoading = false
        } else {
          this.loading = false
        }
        this.error = true
        this.finished = true
        _this.$hideLoading()
      })
    	},
    	onRefresh() {
      this.queryData.page = 1
      this.getList('refresh')
    },
    changeStatus(index) {
      var _this = this
      _this.status = index
      _this.page = 1
      _this.onRefresh()
    },
    //取消订单
	    canelOrder: function(e) {
	    	this.isShow = false
	    	this.canelOrderId = e.orderId
	    	console.log(e.orderId)
	    },
	    // 隐藏取消订单弹层
	    canelMask: function() {
	    	this.isShow = true
	    },
	    // 取消订单
	    canelSure() {
	    	var _this = this
	    	_this.$showLoading()
	    	var params = {}
      params.orderId = _this.canelOrderId
      API.orderCancel(params).then(res => {
        _this.$hideLoading()
        if (res.code == 0) {
          _this.isShow = true
          console.log(res)
        } else {
          _this.$toast(res.msg)
          console.log('数据错误')
        }
      }).catch((error) => {
        _this.$hideLoading()
        console.log(error)
      })
	    },
	    // 订单详情
	    orderDetail(orderId) {
	    	console.log(orderId)
	    },
	    // 查看物流
	    logistics(orderId) {
	    	console.log(orderId)
	    },
	    // 付款
	    payMent(orderId) {
	    	console.log(orderId)
	    	var _this = this
	    	_this.$showLoading()
	    	var params = {}
      params.orderId = orderId
      API.payInfo(params).then(res => {
        _this.$hideLoading()
        if (res.code == 0) {
          console.log(res)
          _this.Common.weixinPay(res, _this.jsApiCall)
        } else {
          _this.$toast(res.msg)
          console.log('数据错误')
        }
      }).catch((error) => {
        _this.$hideLoading()
        console.log(error)
      })
	    },
	    jsApiCall(res) {
      if (res.data[0].JsParameters == '' || !res.data[0].JsParameters) {
        JSBridge.showToast('订单异常，请联系客服！')
      } else {
        var JsParameters = JSON.parse(res.data[0].JsParameters)
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          JsParameters,
          function(res) {
            //alert(res.err_code+res.err_desc+res.err_msg);
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
                        	_this.$toast('支付成功')
              // var goSuccess = {};
              // goSuccess.K = WEB;
              // goSuccess.V = 'order.html#pay_success'+encodeURIComponent(',[{"orderId":"'+params.orderId+'"}]');
              // JSBridge.webToAppPage(JSON.stringify(goSuccess));
            } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
              that.removeAttr('ckTrue')
              _this.$toast('取消微信支付')
              //url = "";
            } else if (res.err_msg == 'get_brand_wcpay_request:fail') {
              that.removeAttr('ckTrue')
              _this.$toast('支付失败!')
              //url = "";
            } else {
              that.removeAttr('ckTrue')
              _this.$toast(res.err_msg)
            }
          }
        )
      }
    }
  }
}
</script>