duantuihe/pages/index/index.vue

<template>
	<view class="container">
		<navBar title="" :navImg="navImg" :back="false" color="#333333" background="#FFFFFF" />
		<loadingPage v-if="showLoadingPage" />
		<!-- 轮播图 -->
		<view class="swiperBox">
			<u-swiper height="572rpx" imgMode="" :autoplay="true" interval="5000" :list="list1" @click="toPage" circular
				@change="swiperChange">
			</u-swiper>

			<!-- 	<u-swiper height="572rpx" imgMode="aspectFill" :autoplay="false" :list="list1" @click="" circular>
			</u-swiper> -->

			<view class='swiperDot'>
				<view :class="[currSwiperIndex==index?'dotA':'dot']" v-for="(item,index) in list1" :key="index">
				</view>
			</view>
		</view>



		<view class="mainContent" :style="{'background-image':`url(${picBase+'indexBg.png'})`}">
			<view class="topBox" :style="{'background-image':`url(${picBase+'indexCardBg.png'})`}" @click="toGen">
				<view class="top">
					即 刻 生 成
				</view>
				<view class="bot">
					<view class="center">
						给孩子一个
					</view>
					<view class="slogn">
						独一无二的故事礼物
						<image class="wArr" :src="picBase+'wArr.png'" mode=""></image>
					</view>
				</view>



			</view>

			<view class="botBox" :style="{'background-image':`url(${picBase+'indexBg2.png'})`}">
				<view class="title">
					绘本广场
					<image class="bookIcon" :src="picBase+'indexBook.png'">
					</image>
				</view>
				<view class="empty" style="margin-top: 50%;" v-if="jingxuanList.length==0">
					<u-empty mode="data" />
				</view>
				<!-- <view class="" v-else>
					
				</view> -->
				<view class="list" v-else>
					<view v-if="index % 2==0" class="item" v-for="(item,index) in jingxuanList"
						@click="toHuibenDetail(item)" :key="index">
						<image class="pic" :src="'https://'+item.sd_image" mode="widthFix">
						</image>
						<view class="des">
							{{item.title}}
						</view>
					</view>

					<view v-if="index % 2==1" class="item" v-for="(item,index) in jingxuanList"
						@click="toHuibenDetail(item)" :key="index">
						<image class="pic" :src="'https://'+item.sd_image" mode="widthFix">
						</image>
						<view class="des">
							{{item.title}}
						</view>
					</view>


				</view>

				<u-loadmore :status="status" />
				<tabBar :tabBarList="tabBarList" :routePath="routePath" @onTabBar="onTabBar" />

				<!-- 隐私弹框 -->
				<privacy-popup @confirmP="confirmP" :urlTitle="urlTitle" @cancleP="cancleP"
					:showPrivateBox="showPop"></privacy-popup>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		getJingxuan,
		getbanner,
		addTeam,
		getPosterBg,
		login
	} from '@/api/index/index.js'
	import PrivacyPopup from "@/components/privacyPopup/index.vue";
	import uploadUrl from '@/common/config.js'
	export default {
		components: {
			PrivacyPopup
		},
		data() {
			return {
				showLoadingPage: true,

				currSwiperIndex: 0,
				// adListSwiper: [],
				status: 'nomore',
				picBase: this.$picBase,
				baseUrl: uploadUrl.baseUrl,
				jingxuanList: [],

				navImg: this.$picBase + 'logo.png',
				showPop: false,
				urlTitle: '',

				list1: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],

				tabBarList: [{
						"pagePath": "pages/index/index",
						"iconPath": "../../static/tabbar/index.png",
						"selectedIconPath": "../../static/tabbar/index_a.png",
						"text": "首页"
					},
					{
						"pagePath": "pages/my/index",
						"iconPath": "../../static/tabbar/my.png",
						"selectedIconPath": "../../static/tabbar/my_a.png",
						"text": "我的"
					}
				],
				routePath: '',
				// bannerList: [],


				total: 0,
				page: 1,

				shareTitle: null,
				shareImg: '',

				bannerList: []
			}
		},


		async onLoad(o) {
			setTimeout(() => {
				this.showLoadingPage = false
			}, 1100)

			// 处理团队推广逻辑
			console.log('index----onload参数', o);
			// o.scene = 9999
			if (o.scene) {
				uni.setStorageSync('inviteInfo', o.scene)
				// this.addTeam({
				// 	id: o.scen
				// })

			}
			// this.login()


			//  else {
			// 	uni.setStorageSync('inviteInfo', o.scen)
			// }


			uni.hideTabBar()
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			this.routePath = curRoute;
			console.log('routePath', this.routePath);
			this.getJingxuan()
		},

		onShareAppMessage(params) {
			if (params.from === 'button' || params.from === 'menu') {
				return {
					// title: this.shareTitle,
					// imageUrl: this.$ossBaseUrl + this.shareImg,
					path: '/pages/index/index',
					mpId: this.$appId,
					type: this.$shareType,
				}
			}
		},
		onShow() {
			this.handlePrivate()
			this.getbanner()
			this.getShare()

		},
		onReachBottom() {
			console.log('onReachBottom()------------------------');

			if (this.jingxuanList.length < this.total) {
				this.status = 'loading'
				this.getJingxuan()
			}
		},
		methods: {
			toPage(e) {
				console.log('e', this.bannerList[e].url);
				if (this.bannerList[e].url) {
					uni.navigateTo({
						url: this.bannerList[e].url
					})
				}
			},
			login() {
				let _this = this
				uni.login({
					provider: 'weixin',
					success: async (res) => {
						if (res.errMsg == 'login:ok') {
							let parmas = {
								code: res.code,
								helpId: uni.getStorageSync('inviteInfo') ? uni.getStorageSync(
									'inviteInfo') : ''
							}
							console.log('登录所传的parmas参数:', parmas);
							let res1 = await login(parmas)

							console.log('登录返回值--------', res1);
							if (res1.code == 0) {
								uni.setStorageSync('token', res1.data.token)
								uni.setStorageSync('userInfo', res1.data.user_info)
								uni.removeStorageSync('inviteInfo')

							} else {
								_this.$toast(res1.message)
							}
						}
					}
				});
			},
			swiperChange(e) {
				// console.log('swiper---e', e);
				this.currSwiperIndex = e.current
			},
			async getShare() {
				let res1 = await getPosterBg({
					key: 'share_title'
				})
				console.log('分享信息返回值--------1', res1);
				if (res1.code == 0) {
					this.shareTitle = res1.data.value
				} else {
					this.$toast(res1.message)
				}

				let res2 = await getPosterBg({
					key: 'share_image'
				})
				console.log('分享信息返回值--------2', res2);
				if (res2.code == 0) {
					this.shareImg = res2.data.value
				} else {
					this.$toast(res2.message)
				}

				// 
			},
			toGen() {
				uni.navigateTo({
					url: '/pages/index/genHuiBen/index'
				})
			},

			toHuibenDetail(item) {
				getApp().huibenDetail = item
				uni.navigateTo({
					url: '/pages/index/genRes/index'
				})
			},
			async addTeam(p) {
				let res1 = await addTeam(p)
				console.log('加入团队返回值--------2', res1);
				if (res1.code == 0) {
					console.log('加入团队成功--------------------------------');
				} else {
					this.$toast(res1.message)
				}
			},
			async getbanner() {
				let res1 = await getbanner()
				console.log('首页轮播图返回值--------2', res1);
				if (res1.code == 0) {

					this.bannerList = res1.data
					let tempList = []

					res1.data.forEach((item, index) => {
						tempList.push(item.image_path)
					})

					this.list1 = tempList
					// this.adListSwiper = tempList
					console.log('list1', this.list1);
				} else {
					this.$toast(res1.message)
				}
			},
			async getJingxuan() {

				let res1 = await getJingxuan({
					page: this.page,
					// size: 2
				})
				console.log('首页精选返回值--------2', res1.data.data);
				if (res1.code == 0) {
					this.total = res1.data.total
					// this.jingxuanList = [1]

					this.jingxuanList = this.jingxuanList.concat(res1.data.data)
					this.status = 'nomore'

					console.log('page', this.page, 'this.jingxuanList', this.jingxuanList);
					this.page++
				} else {
					this.$toast(res1.message)
				}
			},

			toGen() {
				if (!uni.getStorageSync('token')) {
					this.$toast('请登录后操作')

					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500)
					return
				}
				uni.navigateTo({
					url: '/pages/index/genHuiBen/index'
				})
			},
			handlePrivate() {
				let _this = this
				if (uni.getPrivacySetting) {
					uni.getPrivacySetting({
						success: res => {
							console.log("是否需要授权--首页：", res.needAuthorization, "隐私协议的名称为：", res
								.privacyContractName)
							_this.urlTitle = res
								.privacyContractName
							if (res.needAuthorization) {
								getApp().globalData.showPrivacy = true;
								_this.showPop = true
							} else {
								getApp().globalData.showPrivacy = false;
							}
						},
						fail: () => {},
						complete: () => {},
					})
				}
			},
			confirmP() {
				this.showPop = false
			},
			cancleP() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '拒绝将退出小程序,确定退出?',
					success: function(res) {
						if (res.confirm) {
							_this.showPop = false
							wx.exitMiniProgram({
								success: function() {
									// uni.removeStorageSync('iv'); //清除缓存	
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			onTabBar(e) {
				console.log('e------------', e);
				uni.switchTab({
					url: '/' + e
				})
			},
			async testReq() {

				console.log('testStore()111111', this.$store.getters['user/testInfo']);
				console.log('testStore()111111', this.$store.getters['user/testInfo2']);
				// let res = await getValidateCode({
				// 	phone: '15609038521',
				// 	event: 'register'
				// })
				// uni.showToast({
				// 	title: res.msg,
				// 	icon: 'none'
				// })
				// console.log('发送短信验证码返回值', res);
				// if (res.code == 0) {}
			},
			testStore() {
				this.$store.dispatch('user/testAct', '6666666')
				console.log('testStore()', this.$store.getters['user/testInfo']);
				// this.$store.dispatch('testAct', '66666');
				// console.log('存入仓库后', this.$store.getters.testInfo);
			},
			async testLogin() {
				let res = await this.$store.dispatch('user/testAct2', {
					phone: '15609038533',
					event: 'register'
				})
				console.log('测试登录返回值：', res);
			},
			testLogout() {
				this.$store.dispatch('user/testAct3')
				console.log('测试退出登录返回值：', this.$store.getters['user/testInfo3']);
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>