上啦 betterscroll

<template>
  <div>
    <Scroll v-if="list.length>0" ref="scroll" :autoUpdate="true" @pullingUp="loadMore" class="content" @pullingDown="loadRefresh"  :style='{height:divHeight}' >
    <div class="order-detail" v-for="(item, index) in list" :key="index">
      <div class="order-title">
        <span>
          申请时间：{{item.createTime}}
          <br />
          订单编号：{{item.orderId}}
        </span>
        <label :class="`status amo-status-${item.orderStatus}`">{{item.orderStatusText}}</label>
      </div>
      <div class="order-info action-btn" @click="goOrderDetails(item.orderId,item.joinId,item.actId)">
        <div class="goods-img" :style="{ backgroundImage: `url(${item.giftPicUrl})`}"></div>
       
        </div>
      </div>
      <div class="but-box" v-if="item.orderStatus==3">
        <a class="circle-but next action-btn" @click="nextFn">继续支付</a>
        <a class="circle-but cancel action-btn" @click="cancelFn(item.orderId,item.joinId)">取消</a>
      </div>
      <div class="but-box" v-if="item.orderStatus==6||item.orderStatus==4">
        <a class="circle-but confirm action-btn" @click="confirmFn(item.orderId,item.joinId)">确认收货</a>
      </div>
    </div>
    </Scroll>
  </div>
</template>

<script>
 
import {weChatPay} from '../acceptGift2/wxPay'
import Scroll from 'vue-slim-better-scroll';
var API = {
  EXCHANGE_INFO: "/myExchange/aa.back", // 查询会员订单列表
  
};

var ORDER_STATUS = {
  "0": "已取消",
  "3": "待付款",
  "4": "已支付",
  "6": "已发货",
  "8": "已完成"
};

// 积分图标定制
$(document.body).append(`<style>.exchangeDetail.hasScoreIcon .icon-jinbi:before{
        background-image: url('${PAGE.score_icon}?x-oss-process=style/imagespace-preview');
    }</style>`);

export default {
  data() {
    return {
      memberId: null,
      num:1,
      list: [],
      divHeight:document.documentElement.clientHeight +'px'
    };
  },
  components: {
    Scroll
  },
  created() {
    this.Init();

  },
  /*mounted: function() {
    this.$refs.scroll.style.height =  document.documentElement.clientHeight +'px';
  },*/
  methods: {
    loadRefresh() {
      location.reload();
    },
    async loadMore() {
      console.log('lllllllllll')
       await this.getMyOrderList(this.memberId);
    },
    async Init() {
      this.openId = localStorage.getItem('openid')
      const me = this;
      base.ajaxGet('/apis/member/memberinfo').then(function (res) {
        me.memberId = res.data.id;
        me.doSearch(res.data.id);
        return res
      }).catch(function (res) {
        console.log(res)
      })

    },
    // 初始化
    async doSearch(mId) {
      dialog.loading();
      try {
        await basic.loginForce(); // 判断是否需要登陆

        // 渲染列表
        const data = await this.getMyOrderList(mId);
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.orderStatusText = ORDER_STATUS[item.orderStatus];
            item.createTime = new Date(item.createTime).toLocaleDateString();
          });
          // this.list = data.list;
        } else {
          console.log("啥都没有，快去下单");
        }

        this.setShareContent() // 设置分享内容

        dialog.loaded();
      } catch (error) {
        console.error(error);
        dialog.loaded();
        await dialog.alert("获取信息失败，请刷新页面重试或联系客服人员。");
        location.reload();
      }
    },

    // 设置分享内容
    setShareContent(actPic, giftName = "") {
      window.PAGE.infoImage = actPic;
      window.PAGE.pageDesc = "【积分赢好礼】" + giftName;
      shareTool.updateContent();
    },

    // 获取我的订单列表
    async getMyOrderList(v) {

      const res = await basic.requestFromUniversal.get(API.EXCHANGE_INFO, {
        merchantNum: parameter.merchantNum, // 商家ID
        pageSize:10,
        pageNo:this.num,
        memberId:v // 会员ID
      });
      if (res.code == 0) {
        this.num++;
        console.log(res.data)
        this.list = [...this.list, ...res.retObj.list];

        return res.retObj;
      } else {
        throw res.msg;
      }
    },

    // 跳转到订单详情页
    goOrderDetails(orderId,joinId,actId, index) {
      basic.renderPageWithModule("orderDetails", {
        orderId: orderId, // 订单ID
        joinId: joinId, // 不知道是啥
        actId: actId, // 兑换活动ID
        merchantNum: parameter.merchantNum, // 商家ID
        memberId: this.memberId, // 会员ID
        orderModel: 1 // 兑换订单类型 0 积分;1 积分加钱购
      });
    },

    // 继续支付
    nextFn() {
      weChatPay(localStorage.getItem('appId'),localStorage.getItem('timeStamp'),localStorage.getItem('nonceStr'),localStorage.getItem('package'),localStorage.getItem('sign'),()=>{this.Init()});
    },

    // 取消订单
    async cancelFn(orderId,joinId) {
      console.log(this.memberId)
      dialog.loading();
      try{
        const res = await basic.requestFromUniversal.post(API.EXCHANGE_CANCEL, {
          orderId: orderId,
          merchantNum: parameter.merchantNum,
          actUser: this.memberId,
          id: joinId,
        });
        if (res.code == '0'){
          console.log('+++++____+++')
          dialog.tip("center", '已取消');
          dialog.loaded();
          this.Init();
          return res.retObj;
        } else {
          dialog.loaded();
          throw res.msg;
        }
      }catch{

      }

    },

    // 确认收货
    async  confirmFn(orderId,joinId) {
      dialog.loading();
      try{
        const res = await basic.requestFromUniversal.post(API.EXCHANGE_CONFIRM, {
          orderId:orderId,
          merchantNum: parameter.merchantNum,
          memberId: this.memberId,
          joinId: joinId,
          orderModel: 1
        });
        if (res.code == '0'){
          dialog.tip("center", '已确认收货');
          dialog.loaded();
          this.Init();
          return res.retObj;
        } else {
          dialog.loaded();
          throw res.msg;
        }
      }catch{

      }
    }
  }
};
</script>

<style>
</style>