wechat/src/pages/sales/getRecord/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="top">
      <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer !== undefined ? userInfo.customer.CustomerName : ''" @selectCase="showSelect = true"></topCaseInfo>
    </div>
    <div class="info">
      <span><em>姓名：</em>{{user.name}}</span>
      <span><em>手机号：</em>{{user.phone}}</span>
    </div>
    <div class="flex-item flex-v">
      <ul class="flex-h">
        <li class="flex-item" :class="{'active': activeIndex === 0}" @click="cutNav(0)">卡记录</li>
        <li class="flex-item" :class="{'active': activeIndex === 1}" @click="cutNav(1)">券记录</li>
      </ul>
      <div class="flex-item flex-v">
        <div class="list-title">
          <span>名称</span>
          <span>领取时间</span>
          <span>记录</span>
        </div>
        <div class="flex-item">
          <div class="scollBody">
            <div v-if="activeIndex === 0">
              <div class="list-detail" v-for="(item,index) in cardList" :key="index">
                <span>{{item.CustomerCardName}}</span>
                <span>{{toolClass.dateFormat(item.ReceiveDate)}}</span>
                <span>已使用</span>
              </div>
              <span class="noData" v-if="cardAjaxOff && !cardList.length">暂无数据</span>
            </div>
            <div v-if="activeIndex === 1">
              <div class="list-detail" v-for="(item,index) in couponList" :key="index">
                <span>{{item.CustomerCouponName}}</span>
                <span>{{toolClass.dateFormat(item.ReceiveDate)}}</span>
                <span>已使用</span>
              </div>
              <span class="noData" v-if="couponAjaxOff && !couponList.length">暂无数据</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topCaseInfo from '../../../components/topCaseInfo/index'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapUserCenterActions } = createNamespacedHelpers('userCenter')
const { mapActions: actions } = createNamespacedHelpers('app')

export default {
  name: '',
  data () {
    return {
      activeIndex: 0,
      user: {
        name: this.$route.query.name,
        phone: this.$route.query.phone,
        id: this.$route.query.id
      },
      cardAjaxOff: false,
      couponAjaxOff: false,
      cardList: [],
      couponList: [],
      topCaseInfoData: {
        CaseName: '',
        CaseId: '',
        showSelect: false,
        userName: ''
      },
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      CaseList: x => x.app.CaseList,
    }),
  },
  components: {
    topCaseInfo,
  },
  created () {
    this.getCaseList().then((res) => {
      this.topCaseInfoData.CaseName = res.cases[0].CaseName
      this.topCaseInfoData.CaseId = res.cases[0].CaseId
    })
    this.getCustomerCardList({
      id: this.user.id,
      payload: {
        page: 1,
        pagesize: 10000,
      }
    }).then((res) => {
      console.log(JSON.stringify(res))
      res.list = res.list || []
      for (var n = 0; n < res.list.length; n++) {
        this.cardList.push(res.list[n])
      }
      this.cardAjaxOff = true
    })
    this.getCustomerCouponList({
      id: this.user.id,
      payload: {
        page: 1,
        pagesize: 10000,
      }
    }).then((res) => {
      console.log(JSON.stringify(res))
      res.list = res.list || []
      for (var n = 0; n < res.list.length; n++) {
        this.couponList.push(res.list[n])
      }
      this.couponAjaxOff = true
    })
  },
  methods: {
    ...actions([
      'getCaseList',
    ]),
    ...mapUserCenterActions([
      'getCustomerCardList',
      'getCustomerCouponList',
    ]),
    cutNav (index) {
      this.activeIndex = index
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>