popularize-front/pages/index/index.vue

<template>
	<view class="page">
		<view class="head-box"></view>
		<uv-navbar :title="navTitle" leftIcon=" "  :titleStyle="{color:'#fff'}" :bgColor="bgColor" height="100rpx"></uv-navbar>
		<view class="content">
			<view class="search-box">
				<view class="search-box-l"
				@click="$refs.popup.open()">
					<image class="address-img" src="@/static/image/home/address-icon.png" mode="widthFix"></image>
					<view>{{ selectArea.city }}</view>
					<image class="sjx-img" src="@/static/image/home/sjx-icon.png" mode="widthFix"></image>
				</view>
				<view class="search-box-r">
					<uv-search @search="search" placeholder="搜索相关内容" v-model="params.title" shape="square" :showAction="false" color="#fff" placeholderColor="#BDABAC" :clearabled="false" searchIconColor="#fff" searchIconSize="50rpx" bgColor="#4A2A2B" height="63rpx"></uv-search>
				</view>
			</view>
			<view class="swipe-box">
				<uv-swiper :list="list" keyName="image" height="336rpx" radius="30rpx" bgColor="transparent" indicator	indicatorMode="dot"></uv-swiper>
			</view>
			
			<view class="ydsk-box">
				<view class="ydsk-box-title">悦动时刻</view>
				<view class="ydsk-box-gird">
					<view class="gird-l" @click="skip('')">
						<view class="left-box">
							<view class="title-box">
								<view>活动签到</view>
								<view>签到有好礼</view>
							</view>
							<view class="btn-box">立即查看</view>
						</view>
						<image class="hdqd-img" :src="configList.index_sign" mode="widthFix"></image>
						<!-- <image class="hdqd-img" src="@/static/image/home/hdqd-img.png" mode="widthFix"></image> -->
					</view>
					<view class="gird-r">
						<view class="hd-box" @click="skip('activeList')">
							<view class="left-box">
								<view class="title-box">
									活动
								</view>
								<view class="btn-box">立即查看</view>
							</view>
							<image class="hdqd-img" :src="configList.index_huodong" mode="widthFix"></image>
							<!-- <image class="hdqd-img" src="@/static/image/home/hd-img.png" mode="widthFix"></image> -->
						</view>
						<view class="hd-box lx-box" @click="skip('travelList')">
							<view class="left-box">
								<view class="title-box">
									旅行
								</view>
								<view class="btn-box">立即查看</view>
							</view>
							<image class="hdqd-img" :src="configList.index_lvxing" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="hd-list">
				<uv-tabs
					@click= "tabs"
					:list="hdList" 
					lineWidth="50rpx" 
					:lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{
						color: '#fff',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#999',
						transform: 'scale(1)'
					}" 
					itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
				></uv-tabs>
				
				<active-item :cardListData="cardListData"/>
				<uv-load-more :status="status" fontSize="24rpx" dashed line />
			</view>
		
		</view>
		
		<uv-popup ref="popup" mode="bottom" bgColor="">
			<view class="popup-cont">
				<view class="popup-title">
					<view></view>
					<view>选择地区</view>
					<uv-icon name="close" color="#fff" @click="$refs.popup.close();"></uv-icon>
				</view>
				<view class="popup-list">
					<scroll-view
					style="height: 100%;"
					scroll-y="true">
						<view class="list-item" 
						v-for="(item,i) in areaList" 
						:key="i" 
						@click="$store.commit('setArea', i)">
							<view class="item-l" :class="selectArea.id == item.id ? 'chooose-class' : ''">
								<view>{{item.city}}</view>
								<!-- <view class="item-l-val">￥{{item.price}}</view> -->
							</view>
							<uv-icon name="checkmark" color="#FF5858" v-if="selectArea.id == item.id"></uv-icon>
						</view>
					</scroll-view>
				</view>
				<view class="confirm-box">
					<uv-button @click="clickArea" 
					text="确定" color="#381615" 
					shape="circle" 
					:customStyle="{
						color:'#FF5858'
					}"></uv-button>
				</view>
			</view>
		</uv-popup>
		
		<tabber select="home" />
	</view>
</template>

<script>
	// import Position from '@/utils/position.js'
	import tabber from '@/components/base/tabbar.vue'
	import activeItem from '@/components/active/active-item.vue'
	import { mapState } from 'vuex'
	export default {
		components:{
			tabber,
			activeItem
		},
		data() {
			return {
				status:"loading",
				params:{
					title:'',
					state:0,
					pageNo:1,
					pageSize:10
				},
				totalPage:0,
				bgColor:'transparent',
				navTitle:'',
				keyword:'',
				list: [],
				hdList: [
					{ id: 0, name: '近期活动' },
					{ id: 1, name: '往期活动' },
				],
				lineBg: require('@/static/image/cart/tabIcon.png'),
				cardListData: [],
				city : '定位中',
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 50) {
				this.bgColor = '#49070c'
				this.navTitle = '首页'
			}else{
				this.bgColor = 'transparent'
				this.navTitle = ''
			}
		},
		onReachBottom() {
			if(this.params.pageNo >= this.totalPage) return
			this.params.pageNo ++
			this.getActivityPageList()
		},
		computed : {
			...mapState(['areaList']),
		},
		onLoad() {
			this.getBanner()
			// this.getLocationDetail()
			this.$store.commit('getArea', list => {
				if(!this.selectArea.id){
					this.$store.commit('setArea', 0)
					this.$nextTick(() => {
						this.getActivityPageList()
					})
				}
			})
			
			if(this.selectArea.id){
				this.getActivityPageList()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.cardListData = []
			this.getActivityPageList()
		},
		methods:{
			getLocationDetail(){
				Position.getLocationDetail()
				.then(res => {
					this.city = res.addressDetail.city
				})
			},
			search() {
				this.params.pageNo = 1
				this.cardListData = []
				this.getActivityPageList()
			},
			getActivityPageList() {
				this.$api('activityPageList', {
					...this.params,
					cityId : this.selectArea.id
				}, res=>{
					uni.stopPullDownRefresh()
					if(res.code == 200) {
						this.totalPage = res.result.pages
						this.cardListData = [...this.cardListData,...res.result.records]
						if(this.params.pageNo >= this.totalPage) {
							this.status = "nomore"
						}else {
							this.status = "loadmore"
						}
					}
				})
			},
			getBanner() {
				this.$api('banner',res=>{
					if(res.code == 200) {
						this.list = res.result
					}
				})
			},
			tabs(val) {
				this.params.pageNo = 1
				this.cardListData = []
				this.params.state = val.id
				this.getActivityPageList()
			},
			skip(val) {
				if(!val) {
					if(!uni.getStorageSync('token')){
						return this.$utils.toLogin()
					}
					uni.setStorageSync('currentState',1)
					uni.switchTab({
						url:'/pages/index/cart'
					})
				}else{
					uni.navigateTo({
						url: `/pages_my/${val}`
					})
				}
			},
			clickArea(){
				this.tabs({id : 0})
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #060504;
	}
</style>
<style scoped lang="scss">
	.page {
		.head-box {
			background: url('@/static/image/nav-bg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 534rpx;
			position: absolute;
			top: 0;
			z-index: -1;
		}
		.content {
			margin-top: 40rpx;
			color: #fff;
			padding: 0 30rpx;
			padding-top: calc(var(--status-bar-height) + 110rpx);
			
			.search-box {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				&-l {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					position: relative;
					view {
						font-weight: 400;
						font-size: 27rpx;
						color: #FFFFFF;
						margin: 0 18rpx 0 15rpx;
					}
					.address-img {
						width: 26rpx;
					}
					.sjx-img {
						width: 13rpx;
					}
				}
				&-r {
					flex:1;
				}
			}
		
			.swipe-box {
				margin-bottom: 41rpx;
			}
		
			.ydsk-box {
				margin-bottom: 10rpx;
				&-title {
					width: 250rpx;
					background: url('@/static/image/home/title-bg.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					height: 31rpx;
					line-height: 31rpx;
					font-weight: bold;
					font-size: 35rpx;
					color: #FFFFFF;
					margin: 0 auto 33rpx;
				}
				&-gird {
					display: flex;
					justify-content: space-between;
					.gird-l {
						box-sizing: border-box;
						width: 378rpx;
						height: 278rpx;
						padding: 36rpx 0 24rpx 26rpx;
						background: url('@/static/image/home/hdqd-bg.png') no-repeat;
						background-size: 100% 100%;
						position: relative;
						.hdqd-img {
							position: absolute;
							right: 34rpx;
							top: 48rpx;
							width: 200rpx;
						}
					
						.left-box {
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.title-box {
								view {
									font-weight: bold;
									font-size: 29rpx;
									color: #060504;
									&:nth-child(2) {
										font-weight: 400;
										font-size: 21rpx;
										color: #4C4C4C;
										margin-top: 20rpx;
									}
								}
							}
							.btn-box {
								width: 108rpx;
								height: 41rpx;
								background: url('@/static/image/home/hdqd-btn.png') no-repeat;
								background-size: 100% 100%;
								font-weight: 500;
								font-size: 17rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 41rpx;
							}
						}
					}
					.gird-r {
						.hd-box {
							width: 288rpx;
							height: 130rpx;
							padding: 25rpx 0 24rpx 26rpx;
							box-sizing: border-box;
							background: url('@/static/image/home/hd-bg.png') no-repeat;
							background-size: 100% 100%;
							position: relative;
							.left-box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.title-box {
									font-weight: bold;
									font-size: 28rpx;
									color: #57270F;
								}
								.btn-box {
									width: 98rpx;
									height: 35rpx;
									background: url('@/static/image/home/hd-btn.png') no-repeat;
									background-size: 100% 100%;
									font-weight: 500;
									font-size: 16rpx;
									color: #FFFFFF;
									text-align: center;
									line-height: 35rpx;
								}
							}
							.hdqd-img {
								position: absolute;
								right: 22rpx;
								top: 25rpx;
								width: 123rpx;
								height: 100rpx;
							}
						}
						.lx-box {
							width: 288rpx;
							height: 130rpx;
							padding: 25rpx 0 24rpx 26rpx;
							box-sizing: border-box;
							background: url('@/static/image/home/lx-bg.png') no-repeat;
							background-size: 100% 100%;
							position: relative;
							margin-top: 18rpx;
							.left-box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.title-box {
									font-weight: bold;
									font-size: 28rpx;
									color: #57270F;
								}
								.btn-box {
									width: 98rpx;
									height: 35rpx;
									background: url('@/static/image/home/lx-btn.png') no-repeat;
									background-size: 100% 100%;
									font-weight: 500;
									font-size: 16rpx;
									color: #FFFFFF;
									text-align: center;
									line-height: 35rpx;
								}
							}
							.hdqd-img {
								position: absolute;
								right: 22rpx;
								top: 25rpx;
								width: 123rpx;
								height: 100rpx;
							}
						}
					}
				}
			}
		}
		
		.popup-cont {
			width: 95%;
			margin: 0 auto;
			background-image: linear-gradient(to top, #000000, #331212);
			height:662rpx;
			border-radius: 33rpx 33rpx 0 0;
			.popup-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 54rpx 52rpx;
				font-weight: 500;
				font-size: 29rpx;
				color: #999999;
			}
			.popup-list {
				padding: 0 50rpx;
				height: 400rpx;
				.list-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 110rpx;
					border-bottom: 1px solid #3F3535;
					.item-l {
						font-weight: 500;
						font-size: 29rpx;
						color: #CCCCCC;
						display: flex;
						align-items: center;
						.item-l-val {
							margin-left: 40rpx;
						}
					}
					.chooose-class {
						color: #FF5858;
					}
				}
			}
			.confirm-box {
				padding: 0 50rpx;
				margin-top: 30rpx;
				.confirm-btn-box {
					
				}
			}
		}
	}
</style>