discounts-minapp/activity/dailyOffer/index.vue

<template>
	<view class="dailyOffer">
		<view class="top-box">
			<view class="position-box">
				<image class="back" src="@/static/back-btn.png" @click="back" mode=""></image>
				<view class="topbar">
					天天特惠
				</view>
			</view>
		</view>
		
		<view class="discounts-item" >
			<view class="info">
				<view class="title">
					满200享 <text class="red">7</text> 折
				</view>
				<view class="time">
					有效期至2023-10-27
				</view>
			</view>
			<view class="btn-box">
				<view class="num">
					剩余 1 次
				</view>
				<view class="btn" @click="jump">
					去使用
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<zs-list class="store-box" mt="30rpx" @load="loadMore" :status="status">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image class="icon" :src="item.src" mode=""></image>
				<view class="info">
					<view class="title">
						{{item.title}}
					</view>
					<view class="bottom-box">
						<view class="chart-box">
							<image class="chart" src="../../static/chart.png" mode=""></image>
							<view class="num">
								直降¥{{item.num}}
							</view>
						</view>
						<view class="btn">
							马上抢
						</view>
					</view>
				</view>
			</view>
		</zs-list>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'more',
				list: [{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/gSNf2MrwFIob948da9579fe520ac36ef8fc3ae3164fe.png/1.png',
						title: '麓客岛，动物农场两大一小超值亲子套票',
						num:100
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/MFsbXSFsXbWH19aa1b7279e136e66a72212819c9e3d1.png/1.png',
						title: '维生素片',
						num:100
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/KsMua5e4gKl5ff07c6b0150fac72db44e877ce813381.png/1.png',
						title: '整理收纳',
						num:100
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/Qou1Wqc2PNzq84a88b1a352a1ffb04e2339b12d086fe.png/1.png',
						title: '水果',
						num:100
					}
				]
				
			}
		},
		methods: {
			back(){
				var pages = getCurrentPages();
				if(pages.length == 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack();
				}
				
			},
			loadMore() {},
		},
	}
</script>

<style lang="scss" scoped>
	.dailyOffer {
		background: #f5f5f5;
		.top-box{
			height: 518rpx;
			background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/d5Yi74GqHSzmda3003fff83f3a2813f666ea1424779f.png/1.png') no-repeat;
			background-size: 100% 100%;
			.position-box {
				position: absolute;
				width: 100%;
				top: 90rpx;
				left: 0;
				z-index: 2;
				display: flex;
				align-items: center;
				justify-content: center;

				.back {
					position: absolute;
					top: 10rpx;
					left: 30rpx;
					color: #fff;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					width: 40rpx;
					height: 40rpx;
					filter: invert(1);
				}

				.topbar {

					font-size: 36rpx;
					color: #FFFFFF;
					text-align: center;
					font-weight: bold;
					font-family: DOUYUFont;
				}
			}
		}
		
		.discounts-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: rgb(239, 239, 239);
			background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/J1452FRMQ7j829a1e8e916847035cab4b65756cc8f30.png/1.png') no-repeat;
			background-repeat: no-repeat;
			background-size: 100% 144rpx;
			border-radius: 16rpx;
			height: 144rpx;
			padding: 0 30rpx 0 140rpx;
			margin: 20rpx 30rpx;
		
			.info {
				margin-left: 20rpx;
				.title {
					color: #0F0F0F;
					font-size: 30rpx;
				}
				.red{
					color: $uni-text-primary!important;
				}
				.time {
					color: #9a9a9a;
					font-size: 24rpx;
					margin-top: 15rpx;
				}
			}
			.btn-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				.btn {
					width: 118rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 24rpx;
					background: linear-gradient(90deg, #FEFBF2 0%, #F7D188 100%);
					border-radius: 35rpx;
					color: #E5452C;
					margin-top: 15rpx;
				}
				.num{
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
		
		.item {
			width: 690rpx;
			box-sizing: border-box;
			backdrop-filter: blur(10px);
			border-radius: 16rpx;
			background: #fff;
			display: flex;
			margin: 20rpx 30rpx 0;
			padding: 20rpx;
			.icon {
				width: 220rpx;
				height: 220rpx;
				border-radius: 16rpx;
				align-self: flex-end;
			}
		
			.info {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
		
				.title {
					color: #222222;
					font-weight: bold;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
		
				.bottom-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 16rpx;
					.chart-box{
						position: relative;
						.chart{
							width: 252rpx;
							height: 98rpx;
						}
						.num{
							position: absolute;
							top: 25rpx;
							left: 35rpx;
							font-size: 24rpx;
							color: #FF4C3A;
							font-weight: bold;
						}
					}
					.btn {
						align-self: flex-end;
						width: 140rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						background: #FF4C3A;
						border-radius: 30rpx;
						color: #fff;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
		
			}
		}
		
	}
</style>