|
@@ -1,146 +1,152 @@
|
|
|
<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>
|
|
|
+ <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'
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+ 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;
|
|
|
+ if (this.form.vehicleNo) {
|
|
|
+ this.exchangeCoupon();
|
|
|
+ } else {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '请选择有车牌',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 兑换优惠券
|
|
|
+ * @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';
|
|
|
+ @import './myCoupon.scss';
|
|
|
</style>
|