首页UI调整

components/index-ticket/index-ticket.vue

@@ -0,0 +1,20 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"index-ticket",
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pages/choice/index.vue

@@ -213,7 +213,7 @@
 	.choice {
 		width: 100%;
 		min-height: calc(100vh - 44px - var(--status-bar-height));
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/background.png) center center;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/openprize_bg.png) center center;
 		padding-bottom: 150rpx;
 
 		&-title {

pages/index/index.vue

@@ -18,17 +18,47 @@
 						<view class="box-top-action-item-txt">奖品库</view>
 					</view>
 				</view>
-				<view class="box-top-tip" @click="toRule">
-					<view class="flex box-top-tip-txt">
-						<u-icon name="file-text" color="#5F5F5F" size="20"></u-icon>
+				<view class="box-top-tip">
+					<view class="flex box-top-tip-txt" @click="toRule">
 						<text>规则说明</text>
 					</view>
+					<view class="flex box-top-tip-txt" @click="toTicket">
+						<text>所有盲票</text>
+					</view>
 				</view>
 			</view>
 			<view class="box-ticket">
-				<carousel :img-list="imgList" url-key="picUrl" @selected="selectedBanner" @changeTicket="getTicket" />
+				<!-- <carousel :img-list="imgList" url-key="picUrl" @selected="selectedBanner" @changeTicket="getTicket" /> -->
+				<swiper class="image-container" previous-margin="10rpx" next-margin="10rpx" circular :current="currentIndex" :autoplay="false" @change="swiperChange">
+					<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="item.picUrl">
+						<view class="flex image-wrap">
+							<image class="img" @click="clickImg(item)" :src="item.picUrl" lazy-load mode="aspectFill"></image>
+							<!-- <image class="img-left" src="../../static/icon/box_left.png" mode=""></image>
+							<image class="img-right" src="../../static/icon/box_right.png" mode=""></image> -->
+						</view>
+					</swiper-item>
+				</swiper>
+				
+				<swiper class="prize-container" next-margin="540rpx" :current="currentPrizeIndex" :autoplay="false" @change="prizeChange">
+					<swiper-item class="swiper-item" v-for="(item, index) in prizeList" :key="index">
+						<view class="flex image-wrap">
+							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
+						</view>
+					</swiper-item>
+				</swiper>
+				<image class="box-img" src="../../static/icon/index_box.png" mode=""></image>
+				<image class="index-left" src="../../static/icon/index_left.png" mode="" @click="ticketLeft"></image>
+				<image class="index-right" src="../../static/icon/index_right.png" mode="" @click="ticketRight"></image>
 			</view>
-			<view class="box-ticket-tip">超值100%中奖</view>
+			<view class="flex box-ticket-btn">
+				<view class="box-ticket-btn-content" @click="exchange">
+					<image src="../../static/icon/index_btn.png" mode=""></image>
+					<view class="flex title">
+						<text>{{ payInfo.salePrice / 100 }}元立即开刮</text>
+					</view>
+				</view>
+			</view>
+			<!-- <view class="box-ticket-tip">超值100%中奖</view>
 			<view class="box-start flex">
 				<view class="flex box-start-action" @click="exchange">
 					<text>立即</text>
@@ -40,7 +70,7 @@
 					</view>
 					<view class="title">更多盲票</view>
 				</view>
-			</view>
+			</view> -->
 		</view>
 		<custom-tab-bar :activeValue="'index'" />
 
@@ -72,8 +102,10 @@
 				list: [],
 
 				currentIndex: 0,
+				currentPrizeIndex: 2,
 
-				payInfo: {}
+				payInfo: {},
+				prizeList: []
 			};
 		},
 		onShow(opthios) {
@@ -81,6 +113,56 @@
 			this.getList()
 		},
 		methods: {
+			swiperChange(e) {
+				console.log(e);
+				this.dontFirstAnimation = false
+				this.currentIndex = e.detail.current
+				this.getPrize(this.imgList[this.currentIndex].boxId)
+			},
+			
+			prizeChange(e){
+				let ticketNum = this.imgList.length - 1
+				let num = this.prizeList.length - 1
+				let index = this.currentPrizeIndex = e.detail.current
+				console.log(num);
+				console.log(e.detail.current);
+				
+				let acIndex = this.currentIndex
+				if(num == index){
+					acIndex ++
+					if(acIndex < ticketNum){
+						this.currentIndex++
+					}else if(acIndex == ticketNum){
+						this.currentIndex = ticketNum
+					}else{
+						this.currentIndex = 0
+					}
+					this.currentPrizeIndex = 2
+					this.getPrize(this.imgList[this.currentIndex].boxId)
+				}
+			},
+			
+			clickImg(item) {
+				console.log(item);
+			},
+			
+			ticketLeft(){
+				if(this.currentIndex > 0){
+					this.currentIndex --
+				}else if (this.currentIndex == 0){
+					this.currentIndex = this.imgList.length - 1
+				}
+			},
+			
+			ticketRight(){
+				if((this.currentIndex >= 0) && (this.currentIndex < (this.imgList.length - 1))){
+					this.currentIndex ++
+				}else if (this.currentIndex == (this.imgList.length - 1)){
+					this.currentIndex = 0
+				}
+			},
+			
+			
 			getList() {
 				uni.showLoading({
 					title: '加载中'
@@ -101,11 +183,36 @@
 							})
 							this.total = res.total
 							this.imgList = res.rows
+							this.getPrize(this.imgList[0].boxId)
 						}
 					}).catch(() => {
 					uni.hideLoading();
 				})
 			},
+			
+			getPrize(id){
+				this.prizeList = []
+				
+				$http.post('/api/v1/mp/user/mall/ticket/detail', {
+					boxId: id,
+					noToken: true
+				}).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						let prizeList = res.data.prizeList
+						prizeList.forEach(item => {
+							let picUrlArr = item.picUrl.split(',')
+							item.picUrl = env.filePublic + picUrlArr[0]
+						})
+						this.prizeList = prizeList
+						this.currentPrizeIndex = 2
+						this.payInfo = this.imgList[this.currentIndex]
+						console.log(this.prizeList);
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
 
 			selectedBanner(item, index) {
 				uni.navigateTo({
@@ -189,15 +296,83 @@
 </style>
 
 <style lang="scss" scoped>
+	.image-container {
+		width: 750rpx;
+		height: 580rpx;
+		
+		.swiper-item {
+			position: relative;
+			width: 420rpx;
+			height: 580rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		
+		.image-wrap{
+			position: relative;
+			width: 420rpx;
+			height: 580rpx;
+			
+			.img{
+				width: 420rpx;
+				height: 580rpx;
+			}
+			
+			.img-left{
+				position: absolute;
+				top: 0;
+				left: -80rpx;
+				width: 80rpx;
+				z-index: 30;
+			}
+			
+			.img-right{
+				position: absolute;
+				top: 0;
+				right: -80rpx;
+				width: 80rpx;
+				z-index: 100;
+			}
+		}
+	}
+	
+	.prize-container{
+		width: 750rpx;
+		height:  210rpx;
+		margin-top: 60rpx;
+		
+		.swiper-item {
+			width: 100rpx;
+			height:  210rpx;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			
+			.image-wrap{
+				width: 160rpx;
+				height: 210rpx;
+				border-radius: 20rpx;
+				background: linear-gradient(0deg, #BBBBBB, #FFFFFF);
+				
+				.img{
+					width: 160rpx;
+					height: 160rpx;
+				}
+			}
+		}
+		
+	}
+	
 	.box {
 		width: 100%;
 		min-height: calc(100vh - 50px);
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/background.png) center center;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/index_bg.jpeg) center center;
 
 		&-top {
 			display: flex;
 			justify-content: space-between;
-			padding: 100rpx 40rpx 0;
+			padding: 140rpx 0 0 40rpx;
 
 			&-action {
 				display: flex;
@@ -208,14 +383,14 @@
 					&-cir {
 						width: 104rpx;
 						height: 104rpx;
-						background-color: #FE5924;
+						background-color: #FFC320 ;
 						border-radius: 50%;
 						margin-bottom: 14rpx;
 					}
 
 					&-txt {
 						text-align: center;
-						color: #5F5F5F;
+						color: #FFFFFF;
 					}
 				}
 			}
@@ -225,13 +400,48 @@
 				flex-direction: column;
 				align-items: flex-end;
 				justify-content: flex-end;
-				color: #5F5F5F;
+				
+				&-txt{
+					font-size: 24rpx;
+					width: 152rpx;
+					height: 48rpx;
+					background-color: #FFC320;
+					border-radius: 24rpx 0 0 24rpx;
+					margin-top: 40rpx;
+				}
+				&-txt:last-child{
+					background-color: #FFFFCC;
+				}
 			}
 		}
 
 		&-ticket {
-			margin: 100rpx 0 0;
-			height: 580rpx;
+			position: relative;
+			margin: 40rpx 0 0;
+			
+			.index-left{
+				position: absolute;
+				width: 100rpx;
+				height: 100rpx;
+				top: 230rpx;
+				left: 10rpx;
+				z-index: 20;
+			}
+			.index-right{
+				position: absolute;
+				width: 100rpx;
+				height: 100rpx;
+				top: 230rpx;
+				right: 10rpx;
+				z-index: 20;
+			}
+			
+			.box-img{
+				position: absolute;
+				top: 0;
+				z-index: 10;
+				width: 100vw;
+			}
 		}
 
 		&-ticket-tip {
@@ -242,51 +452,27 @@
 			color: #FE5924;
 		}
 
-		&-start {
-			align-items: flex-end;
-			position: relative;
+		&-ticket-btn{
 			margin-top: 60rpx;
-
-			&-action {
-				flex-direction: column;
-				width: 220rpx;
-				height: 220rpx;
-				font-size: 36rpx;
-				border-radius: 50%;
-				background-color: #FE5924;
-				border: 4rpx solid #FFFFFF;
-
-				text {
-					display: inline-block;
-					padding-left: 8rpx;
-					text-align: center;
-					color: #FFFFFF;
-					line-height: 50rpx;
-					letter-spacing: 8rpx;
-				}
-			}
-
-			&-all {
-				position: absolute;
-				right: 70rpx;
-
-				.icon{
-					width: 120rpx;
-					height: 120rpx;
-					border-radius: 50%;
-					background-color: #FE5924;
-					
-					.icon-image{
-						width: 80rpx;
-						height: 80rpx;
-					}
+			&-content{
+				position: relative;
+				width: 420rpx;
+				height: 142rpx;
+				image{
+					width: 420rpx;
+					height: 142rpx;
 				}
-				
 				.title{
-					margin-top: 8rpx;
-					font-size: 34rpx;
-					color: #EA350A;
-					text-align: center;
+					position: absolute;
+					top: 0;
+					width: 100%;
+					height: 142rpx;
+					text{
+						font-size: 56rpx;
+						font-weight: bold;
+						color: #C44906;
+						text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
+					}
 				}
 			}
 		}

pages/process/index.vue

@@ -93,7 +93,7 @@
 	.process {
 		width: 100%;
 		min-height: calc(100vh - 44px - var(--status-bar-height));
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/background.png) center center;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/openprize_bg.png) center center;
 	}
 
 	.box-wrap {