cardDetail.vue 14.6 KB
<template>
    <view>
        <view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">共18张券被领取,合计金额100.00元,其中已使用16张</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>
                                        </view>
                                        <view class="color-green">
                                            {{i.fullCutValue}}元/张
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </uni-list-item>
                    </uni-list>
                </uni-section>
            </view>
        </view>





        <!--<uni-section title="8折(折扣券)" 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">-->
                                    <!--JE000100011-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--京A123456-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between" style="padding: 10px 0">-->
                                <!--<view>-->
                                    <!--<text class="color-blue paddingRight">领取时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--已使用-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between">-->
                                <!--<view>-->
                                    <!--<text class="color-red paddingRight">使用时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--5元/张-->
                                <!--</view>-->
                            <!--</view>-->
                        <!--</view>-->
                    <!--</template>-->
                <!--</uni-list-item>-->
            <!--</uni-list>-->
        <!--</uni-section>-->


        <!--<uni-section title="8折(折扣券)" 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">-->
                                    <!--JE000100011-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--京A123456-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between" style="padding: 10px 0">-->
                                <!--<view>-->
                                    <!--<text class="color-blue paddingRight">领取时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-red">-->
                                    <!--已失效-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between">-->
                                <!--<view>-->
                                    <!--<text class="color-red paddingRight">失效时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--5元/张-->
                                <!--</view>-->
                            <!--</view>-->
                        <!--</view>-->
                    <!--</template>-->
                <!--</uni-list-item>-->
            <!--</uni-list>-->
        <!--</uni-section>-->

        <!--<uni-section title="8折(折扣券)" 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">-->
                                    <!--JE000100011-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--京A123456-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between" style="padding: 10px 0">-->
                                <!--<view>-->
                                    <!--<text class="color-blue paddingRight">领取时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--未使用-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between">-->
                                <!--<view>-->
                                    <!--<text class="color-green paddingRight">有效截止</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--5元/张-->
                                <!--</view>-->
                            <!--</view>-->
                        <!--</view>-->
                    <!--</template>-->
                <!--</uni-list-item>-->
            <!--</uni-list>-->
        <!--</uni-section>-->
    </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,
      rows: [],
      pageNum: '1',//当前页
      pageSize: '10',//每页条数
      reload: false,
      status: 'more',
      contentText: {
        contentdown: '上拉加载更多~',
        contentrefresh: '正在加载更多~',
        contentmore: '我是有底线的~'
      },
      iconType: 'auto', // 图标样式
      dataList: [],
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    this.couponIssuedParkPage()
  },
  onShow() {
    var me = this;
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {

    couponIssuedParkPage: function () {
      console.log(this.arrayWay)
      let that = this
      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 => {
        this.dataList = res.data.dataList
        console.log(this.dataList)
      })
    },
    bindPickerChange: function (e, storage) {
      console.log('picker发送选择改变,携带值为', e.detail.value)
      this.index = e.detail.value
      this.cardType = storage[this.index].id
      this.couponIssuedParkPage()
    },
    bindPickerChangeWay: function (e, storage) {
      console.log(storage)
      this.indexWay = e.detail.value
      this.isUesed = storage[this.indexWay].id
      this.couponIssuedParkPage()
    },
    bindStartDateChange: function (e) {
      console.log(e.detail.value)
      this.beginTime = e.detail.value
      this.couponIssuedParkPage()
    },
    bindEndDateChange: function (e) {
      this.endTime = e.detail.value
      this.couponIssuedParkPage()
    },
    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>
    .rechargeWrap {
        position: relative;
        .rechargeArrow {
            position: absolute;
            right: 10px;
            top: 30px;
            font-size: 20px;
            color: #999;
        }
    }

    .recordCon {
        padding-right: 35px;
        color: #999;
        display: flex;
        justify-content: space-between;
    }

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