JiangxiMiniProgram/pages/tabbar/index/index.vue

<template>
	<view class="main pageBg">
		<!-- <button @click="$goPage('/pages/userCenter/login/face')">进入人脸识别</button> -->
		<view  style="background-color: #2170FD; width: 100%;height: 20rpx;"></view>
		<!-- <u-navbar title=" " :bgColor="bgColor" :autoBack="false">
			<view class="" slot="left">
				<view class="flex">
					<view class="adrsIcon">
						<image src="@/static/images/index/dingwei.png" mode=""></image>
					</view>
					<view class="adr">{{ vuex_cityInfo.city }} </view>
				</view>
			</view>
			<view class="rightScan" slot="right">
				<view class="scan" @click="scanCodeFn">
					<image src="@/static/images/index/scan.png" mode=""></image>
				</view>
			</view>
		</u-navbar> -->
		<!-- <button @click="refereshFn">刷新token</button> -->
		<view class="TopCon" :style="{ backgroundImage: `url(${imgUrl})`, backgroundSize: backgroundSize }">
			<view class="status_bar"></view>
			<!-- 地址、扫一扫 -->
			<view class="flex-b">
				<view class="flex">
					<view class="adrsIcon">
						<image src="@/static/images/index/dingwei.png" mode=""></image>
					</view>
					<view class="adr">{{ vuex_cityInfo.city || '杭州' }} </view>
				</view>
				<view class="scan" @click="scanCodeFn">
					<image src="@/static/images/index/scan.png" mode=""></image>
				</view>
			</view>
			<!-- 搜索 -->
			<view class="searchCon">
				<searchRow placeholder="搜索驾校、教练…" @click.native="$goPage('/pages/indexEntry/findShcool/searchShcool/searchShcool')"></searchRow>
			</view>
		</view>
		<view class="pad">
			<!-- 精钢区 -->
			<view class="card traTop">
				<view class="ul">
					<view class="li" v-for="(item,index) in entrySection" :key="index" @tap="entrySectionClick(item)">
						<view class="icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="name">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<!-- 更多入口 -->
			<view class="card">
				<view class="ul3">
					<view class="li3" v-for="(item,index) in moreSection" :key="index" @click="goPageSection(item)">
						<view class="icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="name">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<!-- 行业资讯 -->
			<view class="card">
				<view class="information">
					<view class="flex-b border">
						<view class="h1">行业资讯</view>
						<view class="more" @click="$goPage('/pages/indexEntry/iIndustryInfo/iIndustryInfo')">
							<view class="text">更多</view>
							<view class="icon">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="swiperInfo" v-if="swiperInfo.length"
						:current="current" :mode="mode" style="height: 230rpx;" :dots-styles="dotsStyles"
						field="content">
						<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height: 230rpx;">
							<swiper-item v-for="(item, index) in swiperInfo" :key="index"  @click="$goPage('/pages/indexEntry/iIndustryInfo/detail/detail?id='+ item.id)">
								<view class="swiper-item" :class="'swiper-item' + index">
									<view class="flex-b">
										<view class="imgBox">
											<image :src="item.picture" mode="aspectFill"></image>
										</view>
										<view class="rightText">
											<view class="text towRowText">{{ item.title }}</view>
											<view class="date">{{ $u.timeFormat(item.createTime, 'yyyy/mm/dd') }}</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
			<!-- 服务专区 -->
			<view class="card serviceCon">
				<view class="h1">服务专区</view>
				<view class="ul2">
					<view class="li2" v-for="(item,index) in serviceSector" :key="index" :class="'li2Bg' + index" @click="$goPage(item.url)">
						<view class="icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="textCon">
							<view class="text">{{ item.text }}</view>
							<view class="tps">{{ item.tps}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;width: 100%;"></view>
		</view>
		<u-popup :show="showPrivacy" mode="center" :round="20" >
			<privacyPopup   @disagree="showPrivacy=false" @agree="showPrivacy=false"></privacyPopup>
		</u-popup>
	</view>
</template>

<script>
	import { imgUrl } from '@/config/site.config'
	import { getarticleList } from '@/config/api.js'
	export default {
		data() {
			return {
				showPrivacy: false,
				imgUrl: imgUrl+'banner.png',
				backgroundSize: '100% 100%',
				keywords: '',
				entrySection: [{
						text: '我要报名',
						icon: require('../../../static/images/index/ic_baoming.png'),
						url: '/pages/indexEntry/enroll/enroll',
						goPage: function (){
							console.log(666)
							// this.$goPage(item.url)
						}
					},
					{
						text: '找驾校',
						icon: require('../../../static/images/index/ic_jiaxiao.png'),
						url: '/pages/indexEntry/findShcool/findShcool',
						goPage: (item)=>{
							this.$goPage(item.url)
						}
					},
					{
						text: '找考场',
						icon: require('../../../static/images/index/ic_kaochang.png'),
						url: '/pages/indexEntry/examines/examines',
						goPage: ((item)=>{
							this.$goPage(item.url)
						})
					},
					{
						text: '找驾驶馆',
						icon: require('../../../static/images/index/ic_jsg.png'),
						url: '/pages/carEntry/simulateAppointment/simulateAppointment',
						goPage: ((item)=>{
							this.$goPage(item.url)
						})
					},
					{
						text: '找陪练',
						icon: require('../../../static/images/index/ic_peilian.png'),
						goPage: ((item)=>{
							this.$u.toast('正在开发中，敬请期待...')
						})
					},
					{
						text: '理论学习',
						icon: require('../../../static/images/index/ic_lilun.png'),
						url: '/pages/indexEntry/theory/theory',
						goPage: ((item)=>{
							this.$goPage(item.url)
						})
					},
				],
				moreSection: [{
						text: '摩托车业务',
						icon: require('../../../static/images/index/btn_motuoche.png'),
						url: '/pages/indexEntry/enroll/enroll'
					},
					{
						text: '考试预约',
						icon: require('../../../static/images/index/btn_yuyue.png'),
						url: '/pages/indexEntry/findShcool/findShcool'
					},
					{
						text: '交通求助',
						icon: require('../../../static/images/index/btn_jiuzhu.png'),
						url: '/pages/indexEntry/examines/examines'
					},
					{
						text: '学驾保险',
						icon: require('../../../static/images/index/btn_baoxian.png'),
					},
					{
						text: '更多',
						icon: require('../../../static/images/index/btn_gengduo.png'),
						url: '/pages/indexEntry/theory/theory'
					},
				],
				serviceSector: [{
						text: '学车指南',
						tps: '政府平台 一站服务',
						icon: require('../../../static/images/index/img_1@2x.png'),
						url: ''
					},
					{
						text: '公益视频',
						tps: '立体呈现 学驾无忧',
						icon: require('../../../static/images/index/img_2@2x.png'),
						url: '/pages/indexEntry/publicVideo/publicVideo'
					},
					{
						text: '合格率排行',
						tps: '官方数据 阳光透明',
						icon: require('../../../static/images/index/img_3@2x.png'),
						url: '/pages/indexEntry/credit/credit?type=1'
					},
					{
						text: '行业政策',
						tps: '权威发布 精准解读',
						icon: require('../../../static/images/index/img_4@2x.png'),
						url: '/pages/indexEntry/industryPolicy/industryPolicy'
					},
					{
						text: '质量信誉排行',
						tps: '官方数据 阳光透明',
						icon: require('../../../static/images/index/img_5@2x.png'),
						url: '/pages/indexEntry/credit/credit'
					},
					{
						text: '咨询投诉',
						tps: '畅达沟通 听取民声',
						icon: require('../../../static/images/index/img_6@2x.png'),
						url: '/pages/indexEntry/consult/consult'
					},
					{
						text: '满分学习考试',
						tps: '网络教育 数据联网',
						icon: require('../../../static/images/index/img_7@2x.png'),
						url: ''
					},
					{
						text: '送考卷下乡',
						tps: '便民利民 就近考试',
						icon: require('../../../static/images/index/img_8@2x.png'),
						url: ''
					},
				],
				swiperDotIndex: 0,
				current: 1,
				mode: 'default',
				swiperInfo: [],
				dotsStyles: {
					backgroundColor: '#E8E9EC',
					border: '1px #E8E9EC solid',
					color: '#fff',
					selectedBackgroundColor: '#1989FA',
					selectedBorder: '1px #1989FA solid'
				},
				bgColor: 'transparent'
			}
		},
		async onLoad() {
			// this.getarticleListFn()
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function (res) {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 	},
			// 	fail(err) {
			// 		console.log(err)
			// 	}
			// });
			if(!this.$store.state.user.vuex_cityInfo.lat) {
				await this.$store.dispatch('getCity')
			}
			// console.log(this.$store.state.user.vuex_cityInfo)
		},

		onShow() {
			this.$store.dispatch('getUserInfo')
			if(!this.swiperInfo.length) {
				this.getarticleListFn()
			}
		},
		computed: {
			
		},
		methods: {
			entrySectionClick(item) {
				if(item.text=='我要报名') {
					this.$goPage(item.url)
					this.$store.commit('updateNonPlatformStudent', false)
					
					if(this.vuex_userInfo.applyStep==3) {
						return	this.$goPage('/pages/indexEntry/enroll/signContract/signContract')
					}
					// 去填表
					if(this.vuex_userInfo.applyStep==2) {
						return	this.$goPage('/pages/indexEntry/enroll/registInfo/registInfo')
					}
					// 去支付
					if(this.vuex_userInfo.applyStep==4||this.vuex_userInfo.applyStep==5) {
						return	this.$goPage('/pages/indexEntry/enroll/payment/payment')
					}
				}
				this.$goPage(item.url)
			},
			async getarticleListFn() {
				const {data: res} = await getarticleList(this.params)
				this.swiperInfo = res.list[0].articleManagementDO
			},
			async refereshFn() {
				const res = await this.$store.dispatch('refreshToken')
				console.log(res)
				uni.$u.http.setConfig((config) => {
					config.header.Authorization = 'Bearer ' + this.$store.state.user.vuex_loginInfo.accessToken
					console.log(111)
				    return config
				})
				console.log(222)
				// this.$store.dispatch('getUserInfo')
			},
			close() {
				
			},
			goPageSection(item) {
				uni.navigateTo({
					url:item.url
				})
			},
			// 扫码
			scanCodeFn() {
				let _this = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容6：' + res.result);
						let coderes = JSON.parse(res.result)
						console.log(coderes)
						console.log(decodeURIComponent(coderes.like))
						
						// _this.$store.commit('updateWebVeiwUrl', res.result)
						// uni.navigateTo({
						// 	url: '/pages/other/webView/webView'
						// })
					}
				});
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			change(e) {
				this.current = e.detail.current
			},
			goPage() {
				uni.navigateTo({
					url: '/pages/userCenter/login/loginByPhone'
				})
			},
			initFn() {
				uni.requestSubscribeMessage({
					tmplIds: ['0yaIdyI9NlHvGYwb3IIaIQq6uBhulYGN-rGVnJk4hZ4'],
					success(res) {
						console.log('消息是否有权限呢')
						console.log(res)
					}
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.main {
		width: 100%;

		.flex {
			.adrsIcon {
				width: 26rpx;
				height: 38rpx;
				margin-top: 4rpx;
			}

			.adr {
				padding-left: 14rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}

		.rightScan {
			padding-right: 190rpx;
		}

		.scan {
			width: 64rpx;
			height: 64rpx;
		}

		.TopCon {
			width: 100%;
			height: 476rpx;
			// background: url('../../../static/images/bigImg/index_banner.png') no-repeat;
			// background: url('http://192.168.1.20:81/zhili/image/20230809/e7086ccf82ed4aa09d156f2590a50fba.png') no-repeat;

			position: relative;

			.flex-b {
				padding: 10rpx 212rpx 0 50rpx;

			}

			.searchCon {
				position: absolute;
				left: 0;
				bottom: 68rpx;
				padding: 0 28rpx;
				width: 100%;

				
			}
		}



		.card {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			&.traTop {
				// transform: translateY(-40rpx);
				margin-top: -40rpx;
				position: relative;
				z-index: 9;
			}

			.ul {
				height: 236rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.li {
					flex: 1;
					display: flex;
					align-items: center;
					flex-direction: column;

					.icon {
						width: 92rpx;
						height: 92rpx;
					}

					.name {
						font-size: 26rpx;
						color: #333;
						padding-top: 20rpx;
						text-align: center;
					}
				}
			}
			.ul3 {
				height: 128rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				border: 2rpx solid #E8E9EC;
				border-radius: 16rpx;
				.li3 {
					// flex: 1;
					display: flex;
					align-items: center;
					flex-direction: column;
			
					.icon {
						width: 52rpx;
						height: 52rpx;
					}
			
					.name {
						font-size: 22rpx;
						color: #686B73;
						padding-top: 2rpx;
						text-align: center;
					}
				}
			}
		}

		.information {
			padding: 0 20rpx;
			height: 320rpx;

			.border {
				height: 86rpx;
				border-bottom: 2px dashed #E8E9EC;

				.h1 {
					font-size: 28rpx;
					color: #333;
				}

				.more {
					font-size: 24rpx;
					display: flex;

					.text {
						// margin-right: 8rpx;
						color: #686B73;
					}
				}
			}

			.swiper-item {
				height: 148rpx;

				.flex-b {
					padding: 30rpx 0 28rpx 0;

					.imgBox {
						width: 184rpx;
						height: 148rpx;
						background: linear-gradient(180deg, rgba(0, 122, 255, 0.5) 0%, #007AFF 100%);
						border-radius: 6rpx;
						overflow: hidden;
					}

					.rightText {
						flex: 1;
						padding: 0 0 0 30rpx;
						height: 148rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.text {
							font-size: 24rpx;
							color: #333;
						}

						.date {
							text-align: right;
							font-size: 20rpx;
							color: #686B73;
						}
					}
				}
			}
		}


		.serviceCon {
			width: 100%;
			padding: 0 20rpx 20rpx 20rpx;

			.h1 {
				font-size: 28rpx;
				color: #333;
				padding: 0 0 0 20rpx;
				font-weight: 500;
				line-height: 90rpx;
			}

			.ul2 {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.li2 {
					width: 48.8%;
					display: flex;
					align-items: center;
					padding: 14rpx 0 14rpx 14rpx;
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					height: 160rpx;

					&.li2Bg0 {
						background: linear-gradient(180deg, #F7FBFF 0%, #EFF6FF 100%);
					}

					&.li2Bg1 {
						background: linear-gradient(180deg, #FFFAF3 0%, #FFF4EA 100%);
					}

					&.li2Bg2 {
						background: linear-gradient(180deg, #F4FFF5 0%, #F3FFED 100%);
					}

					&.li2Bg3 {
						background: linear-gradient(180deg, #EFFFF9 0%, #E3FFF5 100%);
					}

					&.li2Bg4 {
						background: linear-gradient(180deg, #FAF9FF 0%, #F9F5FF 100%);
					}

					&.li2Bg5 {
						background: linear-gradient(180deg, #FCF9FB 0%, #FFF5F8 100%);
					}
					&.li2Bg6 {
						background: linear-gradient(180deg, #FDFFF3 0%, #F5FFE1 100%);
					}
					&.li2Bg7 {
						background: linear-gradient(180deg, #EDF7FF 0%, #F3F1FF 100%);
					}
					.icon {
						width: 80rpx;
						height: 80rpx;
					}

					.textCon {
						// flex: 1;
						padding-left: 10rpx;

						.text {
							font-size: 32rpx;
							color: #333;
							font-weight: 500;
						}

						.tps {
							margin-top: 6rpx;
							font-size: 20rpx;
							color: #949494;
						}
					}
				}
			}
		}
	}
</style>