businessCard/businessCard.vue

<template>
    <view>
        <view v-if="dataList.length>0">
            <view v-for="(i, index) in dataList" :key="i.id">
                <uni-section :title="`${i.cardRuleName}(${i.cardTypeName })`" type="line">
                    <uni-card padding="0" spacing="0">
                        <uni-list>
                            <uni-list-item title="适应车场" :rightText="i.plName">
                                <text></text>
                            </uni-list-item>
                            <uni-list-item :title="`价格: ¥${$common.moneyFormat(i.value)}/张`"
                                           :rightText="`商户库存:${i.cardNum}张`"></uni-list-item>
                        </uni-list>
                        <view slot="actions" class="card-actions no-border">
                            <view class="card-actions-item" @click="toBuy(i)">
                                <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
                                <text class="card-actions-item-text">购买</text>
                            </view>
                            <view class="card-actions-item" @click="provideCard(i)" v-show="i.cardNum>0">
                                <uni-icons type="redo-filled" size="18" color="#999"></uni-icons>
                                <text class="card-actions-item-text">发放</text>
                            </view>
                            <view class="card-actions-item" @click="printClick(i)" v-show="i.cardNum>0">
                                <uni-icons type="shop-filled" size="18" color="#999"></uni-icons>
                                <text class="card-actions-item-text">打印</text>
                            </view>
                        </view>
                    </uni-card>
                </uni-section>
            </view>
        </view>
        <uni-load-more :status="status"/>
        <!--<view class="common-page-head" v-else>暂无可以购买的商户卡券</view>-->
    </view>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
      rows: [],
      pageNum: 1,//当前页
      pageSize: 10,//每页条数
      totalPages: '1', // 总条数
      status: 'no-more',
      refreshIfNeeded: false,
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    this.couponRuleParkPage()
  },
  onShow() {
    var pages = getCurrentPages(); // 获取当前页面栈
    var currentPage = pages[pages.length - 1]; // 当前页面
    if (currentPage.data.refreshIfNeeded) {
      console.log('show')
      currentPage.data.refreshIfNeeded = false;
      this.pageNum = 1//当前页
      this.pageSize = 10//每页条数
      this.dataList = []
      this.status = 'no-more'
      this.couponRuleParkPage(); // 当前页面 method中的方法，用来刷新当前页面
    }
  },
  watch: {
    // //监听reFresh,如果有修改就执行监听器
    // reFresh: function() {
    //   //调接口刷新数据
    //   this.couponRuleParkPage()
    // }
  },
  // 下拉刷新触发
  onPullDownRefresh(val) {
    console.log('下拉刷新触发')
    this.pageNum = 1
    this.pageSize = this.pageSize
    this.totalPages = 1
    this.dataList = []
    this.couponRuleParkPage()
  },
  // 上拉加载触发
  onReachBottom() {
    console.log('上拉加载触发')
    console.log(this.totalPages)
    console.log(this.dataList.length)
    if (this.totalPages == this.dataList.length) {
      this.status = 'no-more'
      return
    } else {
      this.pageNum++;
      this.couponRuleParkPage()
    }
  },
  computed: {},
  methods: {
    // 通过商户ID查询停车记录信息
    couponRuleParkPage() {
      let that = this
      that.status = 'loading'
      let paramsData = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      // 首页信息获取 接口
      that.$myRequest({
        url: that.$common.couponRuleParkPage,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        if (res.data.dataList.length > 0) {
          if (res.data.pageTotals < 10) {
            that.status = 'no-more'
          } else {
            that.status = 'more'
            console.log('more')
          }
        } else {
          that.status = 'no-more'
        }
        that.totalPages = res.data.pageTotals;
        that.dataList = that.dataList.concat(res.data.dataList)
        console.log(that.dataList.length)
      })
    },
    toBuy(i) {
      console.log(i.cardNum)
      uni.navigateTo({
        url: '../businessCard/buyCard?optionData=' + JSON.stringify(i)
      });
    },
    printClick(i) {
      // uni.navigateTo({
      //   url: '../businessCard/cardPrint?optionData=' + JSON.stringify(i)
      // });
      uni.showToast({
        title: '产品开发中,敬请期待',
        icon: 'none',
        duration: 2000
      });
    },
    provideCard(i) {
      if (i.cardNum == 0) {
        uni.showToast({
          title: '暂无卡券库存,无法发放',
          icon: 'none',
          duration: 2000
        });
      } else {
        uni.navigateTo({
          url: '../businessCard/provideCard?optionData=' + JSON.stringify(i)
        });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    /deep/ .uni-section {
        padding-bottom: 10px;
    }
    .card-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 45px;
        border-top: 1px #eee solid;
    }
    .card-actions-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .card-actions-item-text {
        font-size: 12px;
        color: #666;
        margin-left: 5px;
    }
    .cover-image {
        flex: 1;
        height: 150px;
    }
    .no-border {
        border-width: 0;
    }
</style>