mp-ui-user/pages/index/index.vue

<template>
	<view>
		<!-- 非H5撑高元素 -->
		<!-- <view class="status_bar"></view> -->
		<view class="box">
			<view class="box-top">
				<view class="box-top-action">
					<!-- <view class="box-top-action-item">
						<view class="flex box-top-action-item-cir">
							<u-icon name="scan" color="#fff" size="45"></u-icon>
						</view>
						<view class="box-top-action-item-txt">扫一扫</view>
					</view> -->
					<view class="box-top-action-item" @click="toPrize">
						<view class="flex box-top-action-item-cir">
							<u-icon name="gift" color="#fff" size="45"></u-icon>
						</view>
						<view class="box-top-action-item-txt">奖品库</view>
					</view>
				</view>
				<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" /> -->
				<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="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>
					<text>开刮</text>
				</view>
				<view class="box-start-all" @click="toTicket">
					<view class="flex icon">
						<image class="icon-image" src="../../static/icon/index_all.png" mode="aspectFill"></image>
					</view>
					<view class="title">更多盲票</view>
				</view>
			</view> -->
		</view>
		<custom-tab-bar :activeValue="'index'" />

		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	import Carousel from '../../components/vear-carousel/vear-carousel'
	import PayPopup from '../../components/pay-popup/pay-popup.vue'
	export default {
		components: {
			CustomTabBar,
			Carousel,
			PayPopup
		},
		data() {
			return {
				imgList: [],
				value: 1,
				payShow: false,
				checked: false,

				pageNum: 1,
				total: 100,
				list: [],

				currentIndex: 0,
				currentPrizeIndex: 2,

				payInfo: {},
				prizeList: []
			};
		},
		onShow(opthios) {
			this.loginState = uni.getStorageSync('token') ? true : false
			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: '加载中'
				});
				let data = {
					categoryId: '',
					tagId: '',
					type: 'online',
					noToken: true
				}
				$http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							res.rows.forEach(item => {
								let picUrlArr = item.picUrl.split(',')
								item.picUrl = env.filePublic + picUrlArr[0]
							})
							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({
					url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
				})
			},

			getTicket(index) {
				this.currentIndex = index
			},

			close() {
				this.payShow = false
			},

			toProcess(id) {
				this.payShow = false
				uni.navigateTo({
					url: `/pages/process/index?id=${ id }`
				})
			},

			exchange() {
				this.payInfo = this.imgList[this.currentIndex]
				let data = {
					couponIds: [],
					autoCoupon: 1,
					boxId: this.payInfo.boxId,
					orderNum: 1
				}
				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
					if (res.code == 0) {
						let info = {
							...res.data,
							...this.payInfo
						}
						this.payInfo = info
						this.payShow = true
					}
				}).catch(() => {
					uni.$u.toast('开刮失败，请重试！');
				})
			},

			toTicket() {
				uni.navigateTo({
					url: '/pages/ticketBox/index'
				})
			},

			toPrize() {
				if (!this.loginState) {
					uni.navigateTo({
						url: "/pages/login/index"
					})	
					return
				}
				uni.navigateTo({
					url: '/pages/prize/index'
				})
			},
			
			toRule(){
				uni.navigateTo({
					url: '/pages/about/rule'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}

	/deep/ .u-tabbar__placeholder {
		display: none;
	}
</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/index_bg.jpeg) center center;

		&-top {
			display: flex;
			justify-content: space-between;
			padding: 140rpx 0 0 40rpx;

			&-action {
				display: flex;

				&-item {
					margin-right: 76rpx;

					&-cir {
						width: 104rpx;
						height: 104rpx;
						background-color: #FFC320 ;
						border-radius: 50%;
						margin-bottom: 14rpx;
					}

					&-txt {
						text-align: center;
						color: #FFFFFF;
					}
				}
			}

			&-tip {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-end;
				
				&-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 {
			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 {
			margin-top: 20rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 40rpx;
			color: #FE5924;
		}

		&-ticket-btn{
			margin-top: 60rpx;
			&-content{
				position: relative;
				width: 420rpx;
				height: 142rpx;
				image{
					width: 420rpx;
					height: 142rpx;
				}
				.title{
					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);
					}
				}
			}
		}
	}
</style>