uniapp切换列表，领取优惠券

代码可直接复制使用

 

<template>
	<view class="container">
		<view class="tabs">
			<view v-for="(item,index) in tabList" :key="index">
				<view class="tabs-item" :class="{'tabs-active-item':isActive === index}" @click="checked(index,item)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="box">
			<view class="wrapper" v-for="(item, index) in list">
				<view class="left">
					<view class="left-price">￥{{item.price}}</view>
					<view class="left-text">￥{{item.text}}</view>
				</view>
				<view class="center">
					<view class="center-title">{{item.fNote}}</view>
					<view class="center-text">{{item.text}}</view>
					<view class="center-time">{{item.fStartDate}}-{{item.fEndDate}}</view>
				</view>
				<view class="right">
					去使用
				</view>
			</view>
			<view class="tip">
				<view class="text">
					1、每人限领1张，每笔订单限用一张；
				</view>
				<view class="text">
					2、订单金额（不含运费）满100元可使用一张；
				</view>
				<view class="text">
					3、该优惠券仅限购买儿童类商品使用；
				</view>
				<view class="text">
					4、不与其他优惠叠加使用
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-text">领券中心</view>
			<van-icon name="arrow" color="#e52f2f" style="font-weight: bold;" />
		</view>
		<!-- <view class="left" :class="item.fIsUse ? 'isuse_left' : ''">
					<view class="pon_name">{{item.fName}}</view>
					<view class="pon_note">领取方式：{{item.fNote}}</view>
					<view class="pon_time">{{item.fStartDate.substring(0, 10)}} - {{item.fEndDate.substring(0, 10)}}</view>
				</view>
		  	    <b></b>
		  	    <view class="right" :class="item.fIsUse ? 'isuse_right' : 'unuse'">
					<view class="pon_use">{{item.fIsUse ? '已核销' : '未使用'}}</view>
				</view> -->


		<!-- <van-dialog :show="!isLogin"
                title="提示"
                message="请先登陆"
                @confirm="login" /> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	import {
		getCouponListMall,
		getReceiveCoupon
	} from '@/api-services/apis/home.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabList: [{
						name: '待使用'
					},
					{
						name: '已使用'
					},
					{
						name: '已过期'
					}
				],
				isActive: 0, //选中下标
				list: [{
					price: '5',
					text: '满20可用',
					fNote: '5元新人券',
					state: 1,
					fStartDate: '2020.05.20',
					fEndDate: '2022.05.20'
				}, {
					price: '5',
					text: '满20可用',
					fNote: '5元新人券',
					state: 1,
					fStartDate: '2020.05.20',
					fEndDate: '2022.05.20'
				}, {
					price: '5',
					text: '满20可用',
					fNote: '5元新人券',
					state: 1,
					fStartDate: '2020.05.20',
					fEndDate: '2022.05.20'
				}, {
					price: '5',
					text: '满20可用',
					fNote: '5元新人券',
					state: 1,
					fStartDate: '2020.05.20',
					fEndDate: '2022.05.20'
				}]
			}
		},
		computed: {
			// ...mapGetters(['isLogin']),
			...mapState(['user', 'orgCode']),
		},
		onLoad() {
			uni.$on('/coupon', () => this.downCallback())
		},
		methods: {
			onClickLeft() {
				uni.navigateBack()
			},
			login() {
				uni.navigateTo({
					url: '/pages/auth/login/index'
				})
			},
			checked(index, item) {
				this.isActive = index
			},
			//   async upCallback(page) {
			//     const [, res] = await feature(apiLuckyDrawGetLogListMallPost({
			//       page: page.num,
			//       size: page.size,
			// // search: state.searchText
			//     }))

			//     if (page.num == 1) this.list = []
			//     this.list = this.list.concat(res.data.data.list)

			//     this.mescroll.endByPage(res.data.data.list.length, res.data.data.total)
			//   },


			async addCart(item) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				const [, res] = await feature(apiSaleCartSaveMallPost([{
					fSpecId: item.fSpecId,
					fQty: 1,
					fUnitCode: item.fSaleUnitId,
					fUnitName: item.fSaleUnitName,
				}]))
				uni.showToast({
					icon: "none",
					title: '已添加到购物车'
				})
				this.$store.dispatch('cartQty')
				uni.$emit('/cart')
				// this.showSpec = false
			},
			togoods(item) {
				uni.navigateTo({
					// url: `/pages/goods/item/index?fGoodsId=${item.fGoodsId}&fSpecId=${item.fSpecId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F6F6F9;
	}

	.item-checkbox {
		--checkbox-label-margin: 16px;
		display: flex;
		align-items: center;
	}

	.tabs {
		display: flex;
		align-items: center;
		padding: 10px 36px;
		background-color: #fff;
		justify-content: space-between;

		.tabs-item {
			border-radius: 50px;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			color: #666666;
			font-weight: bold;
		}

		.tabs-active-item {
			color: #e52f2f;
			font-size: 15px;
			border-radius: 50px;
			position: relative;

			&::after {
				position: absolute;
				content: '';
				width: 25px;
				height: 2px;
				bottom: -10px;
				left: 50%;
				/* 向右偏移父容器宽度的50% */
				transform: translateX(-50%);
				/* 再向左回退自身宽度的50% */
				background-color: #e52f2f;
			}
		}
	}

	.box {
		padding: 10px 15px;

		.wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 20px;
			margin-bottom: 10px;
			border-radius: 6px;

			// filter: drop-shadow(2px 2px 3px #999);
			.left {
				.left-price {
					font-size: 20px;
					font-weight: 600;
					color: #FF4C10;
				}

				.left-text {
					font-size: 14px;
					color: #FF4C10;
					font-weight: 600;
				}
			}

			.center {
				// width: 145px;

				.center-title {
					font-size: 18px;
					font-weight: 600;
					color: #333333;
				}

				.center-text {
					font-size: 14px;
					color: #33333380;
				}

				.center-time {
					font-size: 14px;
					color: #33333380;
				}
			}

			.right {
				background: #e52f2f;
				border-radius: 20px;
				font-size: 12px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 20px;
				color: rgba(255, 255, 255, 1);
				padding: 5px 10px;
			}
		}
	}

	// .mescroll-body {
	// 	height: auto !important;
	// 	min-height: auto!important;
	// }
	.tip {
		margin-top: 20px;
		text-align: left;
		margin-left: 20px;
		padding-bottom: 64px;

		.text {
			font-size: 14px;
			font-weight: 700;
			letter-spacing: 0px;
			color: #8b8b8b;
		}
	}


	.footer {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		height: 44px;
		padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2 

		.footer-text {
			font-size: 18px;
			font-weight: 700;
			color: #e52f2f;
			margin-right: 5px;
		}
	}

	//  .wrapper div {
	// height: 100%;
	//  }
	//  .wrapper b {
	// position: absolute;
	// right: 30%;
	// top: 5px;
	// height: calc(100% - 10px);
	// border-left: 1px dotted #fff;
	//  }

	.isuse_left {
		// color: #6d9391 !important;
		background: radial-gradient(circle at top right, transparent 5px, #d3d3d3 0) top right, radial-gradient(circle at bottom right, transparent 5px, #d3d3d3 0) bottom right;
		background-size: 100% 60%;
		background-repeat: no-repeat;
	}

	.isuse_right {
		// color: #6d9391 !important;
		background: radial-gradient(circle at top left, transparent 5px, #d3d3d3 0) top left, radial-gradient(circle at bottom left, transparent 5px, #d3d3d3 0) bottom left;
		background-size: 100% 60%;
		background-repeat: no-repeat;
	}
</style>