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;
				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';
</style>