discounts-minapp/activity/choiceness/index.vue

<template>
	<view class="choiceness">
		<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>

			<u-scroll-list class="swiper" :indicator="false" @scroll="left">
				<view class="scroll-list" style="flex-direction: row;" @scroll="left">
					<view class="type-item" v-for="(item, index) in typeList" :key="index" @click="handleTab(index)">
						<image class="type-icon" :src="item.src"></image>
						<view class="title-box">
							<view class="type-title">
								{{item.title}}
							</view>
						</view>
					</view>
					
				</view>
			</u-scroll-list>


			<view class="detail-box">
				<image class="icon" :src="info.src" mode=""></image>
				<view class="info-box">
					<image class="card-tab" src="../../static/tab-title.png" mode=""></image>
					<image class="info-icon" :src="info.src" mode=""></image>
					<view class="info">
						<view class="title">
							{{info.detail.title}}
						</view>
						<view class="sub-title">
							{{info.detail.desc}}
						</view>
						<view class="btn-box">
							<view class="tab">
								<view class="label">
									折
								</view>
								<view class="value">
									{{info.detail.cardName}}
								</view>
							</view>
							<view class="btn">
								马上抢
							</view>
						</view>
					</view>
				</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="card-tab" src="../../static/tab-title.png" mode=""></image>
				<image class="info-icon" :src="item.src" mode=""></image>
				<view class="info">
					<view class="title">
						{{item.title}}
					</view>
					<view class="sub-title">
						{{item.desc}}
					</view>
					<view class="btn-box">
						<view class="tab">
							<view class="label">
								折
							</view>
							<view class="value">
								{{item.cardName}}
							</view>
						</view>
						<view class="btn">
							马上抢
						</view>
					</view>
				</view>
			</view>
		</zs-list>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				info: null,
				status: 'more',
				typeList: [{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/oLyIxdcdjuKT616019cf80a7b7ae265abcf3b05a9b10.png/1.png',
						title: '甘肃敦煌',
						detail: {
							title: '景区门票·鸣沙山月牙泉',
							desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
							cardName: '满200享7折'
						}
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/gSNf2MrwFIob948da9579fe520ac36ef8fc3ae3164fe.png/1.png',
						title: '北京烤鸭',
						detail: {
							title: '景区门票·鸣沙山月牙泉',
							desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
							cardName: '满200享7折'
						}
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/MFsbXSFsXbWH19aa1b7279e136e66a72212819c9e3d1.png/1.png',
						title: '维生素片',
						detail: {
							title: '景区门票·鸣沙山月牙泉',
							desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
							cardName: '满200享7折'
						}
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/KsMua5e4gKl5ff07c6b0150fac72db44e877ce813381.png/1.png',
						title: '整理收纳',
						detail: {
							title: '景区门票·鸣沙山月牙泉',
							desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
							cardName: '满200享7折'
						}
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/Qou1Wqc2PNzq84a88b1a352a1ffb04e2339b12d086fe.png/1.png',
						title: '水果',
						detail: {
							title: '景区门票·鸣沙山月牙泉',
							desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
							cardName: '满200享7折'
						}
					}
				],
				list: [{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/gSNf2MrwFIob948da9579fe520ac36ef8fc3ae3164fe.png/1.png',
						title: '北京烤鸭',
						desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
						cardName: '满200享7折'
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/MFsbXSFsXbWH19aa1b7279e136e66a72212819c9e3d1.png/1.png',
						title: '维生素片',
						desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
						cardName: '满200享7折'
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/KsMua5e4gKl5ff07c6b0150fac72db44e877ce813381.png/1.png',
						title: '整理收纳',
						desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
						cardName: '满200享7折'
					},
					{
						src: 'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/Qou1Wqc2PNzq84a88b1a352a1ffb04e2339b12d086fe.png/1.png',
						title: '水果',
						desc: '鸣沙山月牙泉景区门票+往返观光车特惠套票',
						cardName: '满200享7折'
					}
				]
			}
		},
		watch: {
			active: {
				handler: function(val) {
					this.info = this.typeList[val]
				},
				immediate: true
			},

		},
		methods: {
			back(){
				var pages = getCurrentPages();
				if(pages.length == 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack();
				}
				
			},
			left(val) {
				console.log('left', val);
			},
			loadMore() {},
			handleTab(val) {
				this.active = val
			}
		},
		created() {

		}
	}
</script>

<style lang="scss">
	.choiceness {
		background: #F5f5f5;

		.top-box {
			background: linear-gradient(180deg, #FF4C3A 0%, rgba(255, 255, 255, 0) 70%);
			padding-top: 170rpx;
			padding-bottom: 20rpx;

			.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;
				}
			}
		}

		.u-scroll-list {
			padding: 0 30rpx;
		}

		.scroll-list {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			height: 176rpx;
		}

		.type-item {
			width: 140rpx;
			height: 176rpx;
			border-radius: 16rpx;
			position: relative;
			margin-left: 20rpx;
			display: inline-block;

			.type-icon {
				width: 140rpx;
				height: 176rpx;
			}

			.title-box {
				width: 100%;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				color: #FFFFFF;
				position: absolute;
				left: 0%;
				bottom: 0%;
				backdrop-filter: blur(5px);

				.type-title {
					width: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 20rpx;
				}
			}

		}

		.detail-box {
			width: 686rpx;
			height: 582rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
			left: 30rpx;
			top: 30rpx;

			&::before {
				position: absolute;
				top: -18rpx;
				left: calc(88rpx - 30rpx);
				content: '';
				width: 0;
				height: 0;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 20rpx solid #fff;
			}

			.icon {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}

			.info-box {
				position: absolute;
				left: 44rpx;
				bottom: 44rpx;
				width: 596rpx;
				height: 222rpx;
				padding: 24rpx 20rpx;
				box-sizing: border-box;
				backdrop-filter: blur(10px);
				border-radius: 16rpx;
				background: rgba(255, 255, 255, .2);
				display: flex;
				align-items: center;

				.card-tab {
					width: 196rpx;
					height: 58rpx;
					position: absolute;
					top: -8rpx;
					left: 0%;
				}

				.info-icon {
					width: 142rpx;
					height: 142rpx;
					border-radius: 16rpx;
					align-self: flex-end;
				}

				.info {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: #FFFFFF;
						font-weight: bold;
						font-size: 28rpx;
					}

					.sub-title {
						background: rgba(255, 255, 255, .5);
						font-size: 24rpx;
						color: #222222;
						border-radius: 16rpx;
						padding: 10rpx;
						margin-top: 8rpx;
					}

					.btn-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 16rpx;

						.tab {
							display: flex;
							align-items: center;

							.label {
								width: 48rpx;
								height: 44rpx;
								line-height: 44rpx;
								font-size: 24rpx;
								text-align: center;
								color: #FFFFFF;
								background: linear-gradient(180deg, #FF4A39 0%, #FC8B45 100%);
								border-radius: 8rpx 0rpx 0rpx 8rpx;
							}

							.value {
								background: rgba(255, 255, 255, 0.5);
								color: #FE5B47;
								line-height: 44rpx;
								font-weight: 400;
								font-size: 24rpx;
								padding: 0 10rpx;
								border-radius: 0 8rpx 8rpx 0;
							}
						}

						.btn {
							width: 140rpx;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
							background: #FF4C3A;
							border-radius: 30rpx;
							color: #fff;
							font-size: 28rpx;
							font-weight: bold;
						}
					}

				}
			}
		}

		.item {
			width: 690rpx;
			box-sizing: border-box;
			backdrop-filter: blur(10px);
			border-radius: 16rpx;
			background: #fff;
			display: flex;
			align-items: center;
			margin: 30rpx 30rpx 0;
			padding: 60rpx 20rpx 20rpx;

			.card-tab {
				width: 196rpx;
				height: 58rpx;
				position: absolute;
				top: -8rpx;
				left: 0%;
			}

			.info-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;
				}

				.sub-title {
					background: rgba(255, 76, 58, .1);
					font-size: 24rpx;
					color: #FF4C3A;
					border-radius: 16rpx;
					padding: 10rpx;
					margin-top: 10rpx;
				}

				.btn-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 16rpx;

					.tab {
						display: flex;
						align-items: center;

						.label {
							width: 48rpx;
							height: 44rpx;
							line-height: 44rpx;
							font-size: 24rpx;
							text-align: center;
							color: #FFFFFF;
							background: linear-gradient(180deg, #FF4A39 0%, #FC8B45 100%);
							border-radius: 8rpx 0rpx 0rpx 8rpx;
						}

						.value {
							background: rgba(254, 91, 71, 0.1);
							color: #FE5B47;
							line-height: 44rpx;
							font-weight: 400;
							font-size: 24rpx;
							padding: 0 10rpx;
							border-radius: 0 8rpx 8rpx 0;
						}
					}

					.btn {
						width: 140rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						background: #FF4C3A;
						border-radius: 30rpx;
						color: #fff;
						font-size: 28rpx;
						font-weight: bold;
					}
				}

			}
		}
	}
</style>