parking_h5/pages/center/coupon/myCoupon/myCoupon.vue

<template>
  <view class="content">
    <z-paging-swiper>
      <u-navbar
        slot="top"
        title-color="#fff"
        :custom-back="customBack"
        :border-bottom="false"
        back-icon-color="#CCE8FF"
        :background="{ background: '#008CFF' }"
        title="我的优惠券"
      >
        <view class="navbar-font" slot="right" @click="jumpPage('/pages/center/coupon/couponRules/couponRules')"> 规则 </view>
      </u-navbar>
      <z-tabs ref="tabs" slot="top" :list="tabList" :current="current" barWidth="90rpx" @change="tabsChange"></z-tabs>
      <swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
        <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
          <view class="search-part" v-if="current === 0">
            <u-input class="search-part-input" v-model="form.exchangeCode" placeholder="请输入兑换码" />
            <u-button class="search-part-btn" type="primary" shape="circle" size="medium" @click="handleExchange">兑换</u-button>
          </view>
          <swiper-list-item :tabIndex="index" :currentIndex="current" ref="swiperListItem"></swiper-list-item>
        </swiper-item>
      </swiper>
      <!-- 选择车牌 -->
      <u-select v-model="chooseVehicle" :list="vehicleList" @confirm="vehicleConfirm"></u-select>
      <u-toast ref="uToast" />
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          name: '未使用',
          value: 0,
          list: []
        },
        {
          name: '已使用',
          value: 1,
          list: []
        },
        {
          name: '已失效',
          value: 2,
          list: []
        }
      ],
      current: 0,
      form: {
        exchangeCode: '',
        source: 1,
        vehicleNo: '京A88888'
      },
      vehicleList: [],
      chooseVehicle: false
    };
  },
  onLoad(options) {
    this.getCarsList();
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.current = index;
    },
    // swiper滑动中
    swiperTransition(e) {
      this.$refs.tabs.setDx(e.detail.dx);
    },
    //swiper滑动结束
    swiperAnimationfinish(e) {
      this.current = e.detail.current;
      this.$refs.tabs.unlockDx();
    },
    /**
     * 兑换
     * @date 2022-12-23
     * @returns {any}
     */
    handleExchange() {
      if (this.form.exchangeCode) {
        this.chooseVehicle = true;
      } else {
        this.$refs.uToast.show({
          title: '请输入兑换码',
          type: 'warning'
        });
      }
    },
    getCarsList() {
      this.$u.api.getMycars().then((res) => {
        this.vehicleList = res.data.rows.map((item) => {
          return { label: item.vehicleNo, value: item.vehicleNo };
        });
      });
    },
    /**
     * 车牌确认
     * @date 2022-12-23
     * @param {any} list
     * @returns {any}
     */
    vehicleConfirm(list) {
      this.form.vehicleNo = list[0].value;
      this.exchangeCoupon();
    },
    /**
     * 兑换优惠券
     * @date 2022-12-23
     * @returns {any}
     */
    exchangeCoupon() {
      this.$u.api.exchangeCouponApi(this.form).then((res) => {
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: '兑换成功!',
            type: 'success'
          });
          this.$refs['swiperListItem'][this.current].reloadData();
        }
      });
    },
    jumpPage(url) {
      this.$u.route({
        url
      });
    },
    // tabbar 返回
    customBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/index/index'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './myCoupon.scss';
</style>