cxhxy/addons/food/uni_app/pages/user/coupon/index.vue

<template>
	<view>
		<view class="hm-header-xian"></view>
		<u-sticky offsetTop="0" customNavHeight="0" bgColor="#ffffff">
			<u-tabs :list="tabs" lineColor="#FF9900" :itemStyle="{height:'88rpx',width:'100rpx'}" :current="current"
				@change="change" :scrollable="false">
			</u-tabs>
		</u-sticky>
		<view class="hm-wrap">
			<swiper class="swiper" :current="current" @animationfinish="animationfinish">
				<swiper-item class="item" v-for="(tabs_item,tabs_index) in tabs" :key="tabs_index">
					<scroll-view scroll-y class="hm-w-h">
						<view class="hm-p-lr-20" v-if="(list[current]).length">
							<view v-for="(item, index) in list[current]" :key="index">
								<view class="coupon">
									<view class="top-box">
										<view
											:class="item.rule.value==10?'subscript hm-bg-success':'subscript hm-bg-warning'">
											{{item.rule.text}}
										</view>
										<image :src="item.shop.logo?item.shop.logo:applet.head_img"></image>
										<view class="hm-col-0 hm-font-b hm-font-28">{{item.coupon.name}}</view>
										<view class="hm-col-b hm-p-t-10 hm-font-26">过期时间：{{item.expiretime.text}}后失效</view>
										<view class="hm-col-b hm-p-t-5 hm-font-26">
											使用门店：{{item.shop?item.shop.shop_name:'所有门店'}}</view>
									</view>
									<view class="bottom-box hm-line-1">
										{{item.coupon.explain}}
										<view class="hm-dis-block-inline hm-fr">
											<u-button size="mini" type="error" shape="circle" plain text="立即使用"
												@click="goTo('shop/index')"></u-button>
										</view>
									</view>
									<view class="left"></view>
									<view class="right"></view>
								</view>
							</view>
						</view>
						<view v-else class="hm">
							<img :src="applet.domain + '/addons/food/img/empty/coupon.png'" />
							<view class="text">暂无优惠券列表</view>
						</view>
						<!-- 技术支持 -->
						<view class="hm">
							{{applet.copyright}} <text class="v">V{{applet.version}}</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	let App = getApp();
	export default {
		data() {
			return {
				applet: {},
				tabs: null,
				current: 0,
				list: null,
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.applet = uni.getStorageSync('applet');
			this.getListAll();
		},
		methods: {
			/**
			 * 获取优惠活动列表
			 */
			getListAll: function() {
				let _this = this;
				App._get('user.coupon/all', {}, function(result) {
					_this.list = result.data.list;
					_this.tabs = result.data.tabs;
				});
			},
			/**
			 * tab栏切换
			 */
			change(e) {
				let _this = this;
				_this.current = e.index;
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.current = current;
			},
			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			},
		}
	};
</script>
<style lang="scss" scoped>
	.swiper {
		flex: 1;

		.item {
			height: 100%;
			padding-top: 100rpx;
			.coupon {
				margin-top: 10rpx;

				.top-box {
					height: 120rpx;
					padding: 20rpx;
					background: #fff;
					border-radius: 10rpx;
					border-top-right-radius: 50rpx;
					border-bottom: dashed 1rpx #ccc;

					/*box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);*/
					image {
						height: 120rpx;
						width: 120rpx;
						margin-right: 30rpx;
						border-radius: 8rpx;
						float: left;
					}

					.subscript {
						color: #fff;
						padding: 5rpx 20rpx;
						float: right;
						margin-top: -20rpx;
						margin-right: -20rpx;
						border-top-right-radius: 50rpx;
						border-bottom-left-radius: 50rpx;
						font-size: 24rpx;
						font-family: "黑体";
					}
				}

				.bottom-box {
					background: #fff;
					padding: 20rpx;
					border-radius: 0 0 10rpx 10rpx;
					font-size: 24rpx;
					color: #999;
				}

				.left {
					width: 18rpx;
					height: 40rpx;
					background: #f7f7f7;
					border-top-right-radius: 50rpx;
					border-bottom-right-radius: 50rpx;
					float: left;
					margin-top: -105rpx;
				}

				.right {
					width: 18rpx;
					height: 40rpx;
					background: #f7f7f7;
					border-top-left-radius: 50rpx;
					border-bottom-left-radius: 50rpx;
					float: right;
					margin-top: -105rpx;
				}
			}
		}
	}
</style>