cardDetail.vue 11.1 KB
<template>
    <view>
        <view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">
            共{{issuedCount}}张券被领取,合计金额{{$common.moneyFormat(totalFee)}}元,其中已使用{{usedCount}}张
        </view>


        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    所有类型
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChange($event,array)" :value="index" :range="array" :range-key="'text'">
                        <view class="uni-input">{{array[index].text}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    所有状态
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChangeWay($event,arrayWay)" :value="indexWay" :range="arrayWay"
                            :range-key="'text'">
                        <view class="uni-input">{{arrayWay[indexWay].text}}</view>
                    </picker>
                </view>
            </view>
        </view>


        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    开始时间
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="beginTime" :start="startDate" :end="endDate"
                            @change="bindStartDateChange">
                        <view class="uni-input">{{beginTime}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    结束时间
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="endTime" :start="startDate" :end="endDate" @change="bindEndDateChange">
                        <view class="uni-input">{{endTime}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view v-if="dataList.length>0">
            <view v-for="(i, index) in dataList" :key="i.id">
                <!--<uni-section :title="i.cardRuleName+'('+i.cardType|cardTypeFormate+')'" type="line">-->
                <uni-section :title="`${i.cardRuleName}   (${$common.cardTypeFormat(i.cardType)})`" type="line">
                    <uni-list>
                        <uni-list-item>
                            <template v-slot:body>
                                <view class="slot-box uni-con-width">
                                    <view class="uni-flex uni-space-between ">
                                        <view class="color-blue">
                                            {{i.cardNo}}
                                        </view>
                                        <view class="color-blue">
                                            {{i.carNumber}}
                                        </view>
                                    </view>
                                    <view class="uni-flex uni-space-between" style="padding: 10px 0">
                                        <view>
                                            <text class="color-blue paddingRight">领取时间</text>
                                            <uni-dateformat :date="i.issuedEffDate"
                                                            format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
                                        </view>
                                        <view class="color-green" v-if="i.isUesed=='1'">
                                            已使用
                                        </view>
                                        <view class="color-blue" v-else>
                                            未使用
                                        </view>
                                    </view>
                                    <view class="uni-flex uni-space-between">
                                        <view>
                                            <text class="color-red paddingRight">使用时间</text>
                                            <!--<uni-dateformat v-if="i.isUesed=='1'" :date="i.usedDate"-->
                                                            <!--format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>-->
                                            <!--<uni-dateformat v-else :date="i.exp_data"-->
                                                            <!--format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>-->
                                            <uni-dateformat :date="i.usedDate"
                                                            format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>

                                        </view>
                                        <view class="color-green">
                                            {{$common.moneyFormat(i.fullCutValue)}}元/张
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </uni-list-item>
                    </uni-list>
                </uni-section>
            </view>
            <!--<uni-load-more :status="status"/>-->
        </view>
        <uni-load-more :status="status"/>

    </view>
</template>

<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      title: 'picker',
      array: [
        {text: '单次券', id: 1},
        {text: '时长券', id: 2},
        {text: '满减券', id: 3},
        {text: '金额券', id: 4},
        {text: '包天券', id: 5},
      ],
      arrayWay: [
        {text: '已使用/绑定', id: 1},
        {text: '未使用', id: 0},
      ],
      index: 0,
      indexWay: 0,
      cardType: '1', //卡券类型 :1-单次券,2-时长券,3-满减券,4-金额券,5-包天券
      isUesed: '1',  //1:已使用/绑定 0:未使用
      beginTime: currentDate,
      endTime: currentDate,
      pageNum: '1',//当前页
      pageSize: '10',//每页条数
      totalPages: '1', // 总条数
      status: 'no-more',
      dataList: [],
      issuedCount: 0,// 被领取张数
      usedCount: 0,// 使用张数
      totalFee: 0, // 金额
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    this.fetchData()
    this.couponDetailSummary()
  },
  onShow() {
    var me = this;
  },
  // 下拉刷新触发
  onPullDownRefresh(val) {
    console.log('下拉刷新触发')
    this.pageNum = 1
    this.pageSize = this.pageSize
    this.totalPages = 1
    this.dataList = []
    this.fetchData()
  },
  // 上拉加载触发
  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.fetchData()
    }
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    fetchData: function () {
      let that = this
      that.status = 'loading'
      let paramsData = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        beginTime: this.beginTime + ' 00:00:00',
        endTime: this.endTime + ' 23:59:59',
        cardType: this.cardType.toString(), //卡券类型 :1-单次券,2-时长券,3-满减券,4-金额券,5-包天券
        isUesed: this.isUesed.toString(),  //1:已使用/绑定 0:未使用
      }
      // 首页信息获取 接口
      that.$myRequest({
        url: that.$common.couponIssuedParkPage,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        // const resDataArray = that.dataList.concat(res.data.dataList);
        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)
      })
    },
    couponDetailSummary: function () {
      let that = this
      that.status = 'loading'
      let paramsData = {
        beginTime: this.beginTime + ' 00:00:00',
        endTime: this.endTime + ' 23:59:59',
        cardType: this.cardType.toString(), //卡券类型 :1-单次券,2-时长券,3-满减券,4-金额券,5-包天券
        isUesed: this.isUesed.toString(),  //1:已使用/绑定 0:未使用
      }
      // 首页信息获取 接口
      that.$myRequest({
        url: that.$common.couponDetailSummary,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        console.log(res)
        this.issuedCount = res.data.issuedCount  // 被领取张数
        this.usedCount = res.data.usedCount  // 使用张数
        this.totalFee = res.data.totalFee  // 金额
      })
    },
    bindPickerChange: function (e, storage) {
      console.log('picker发送选择改变,携带值为', e.detail.value)
      this.index = e.detail.value
      this.cardType = storage[this.index].id
      this.pageNum = 1
      this.pageSize = this.pageSize
      this.totalPages = 1
      this.dataList = []
      this.fetchData()
      this.couponDetailSummary()
    },
    bindPickerChangeWay: function (e, storage) {
      console.log(storage)
      this.indexWay = e.detail.value
      this.isUesed = storage[this.indexWay].id
      this.pageNum = 1
      this.pageSize = this.pageSize
      this.totalPages = 1
      this.dataList = []
      this.fetchData()
      this.couponDetailSummary()
    },
    bindStartDateChange: function (e) {
      console.log(e.detail.value)
      this.beginTime = e.detail.value
      this.pageNum = 1
      this.pageSize = this.pageSize
      this.totalPages = 1
      this.dataList = []
      this.fetchData()
      this.couponDetailSummary()
    },
    bindEndDateChange: function (e) {
      this.endTime = e.detail.value
      this.pageNum = 1
      this.pageSize = this.pageSize
      this.totalPages = 1
      this.dataList = []
      this.fetchData()
      this.couponDetailSummary()
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
  }
}
</script>

<style lang="scss" scoped>

    .paddingRight {
        padding-right: 20px;
    }
</style>