questionbankvue3/pages/index/index.vue

<template>
	<view class="content">
		<up-navbar title="选择类型" @leftClick="rightClick" :autoBack="false"></up-navbar>
		<view class="padding">
			<view class="tit">请选择城市</view>
			<view class="ard_row">
				<view class="leftBox" @click="getWarpweft">
					<up-icon name="map"  size="20"></up-icon>
					<view class="text" v-if="usecarStore.carInfo.cityName">{{ usecarStore.carInfo.cityName}} <text style="font-size: 20rpx;color: blue;margin-left: 10rpx;">(包函当地题库)</text></view>
					<view class="text" v-else>选择城市</view>
				</view>
				<view class="moreBox"  @click="$goPage('/pages/index/comp/city')">
					<view class="txt">选择城市</view>
					<u-icon name="arrow-right" color="#1989FA" size="14"></u-icon>
				</view>
			</view>
			<view class="tit">请选择需要学习的题库类型</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in tabData" :key="index" @click="chooseCar(item)" :class="{active: item.id==currentCar.id}">
					<view class="checkBox" v-if="item.id==currentCar.id">
						<image src="@/static/images/dg.png" mode=""></image>
					</view>
					<view class="icon">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="name">{{item.title}}</view>
					<view class="carType" v-for="(item2,index2) in item.descriptionArr" :key="index2">{{ item2 }}</view>
				</view>
			</view>
			
			<view class="btnBox">
				<oneBtn text="确 定" @oneBtnClick="oneBtnClick"></oneBtn>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()
	import allCity from './comp/allCity.js'
	import setObj from '@/config/site.config.js';
	let {
		mapKey
	} = setObj
	import {
		jsonp
	} from 'vue-jsonp'
	import {
		ref,
		reactive
	} from 'vue';
	import { loginApi, questbanktypeApi, treeSelect} from '@/config/api.js'
	import {
		onLoad,
		onReady,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	
	const rightClick = () => {  
		goApp()
	    // uni.navigateBack()
	};  
	const tabData = ref([
		{name: '小车',  type: 'C1/C2/C3', style: 'width: 114rpx;height: 61rpx;', icon: new URL('@/static/images/car4.png', import.meta.url).href, id: '1'},
		{name: '货车',  type: 'A2/B2', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car2.png', import.meta.url).href, id: '1'},
		{name: '客车',  type: 'A1/B1/A3', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car1.png', import.meta.url).href, id: '1'},
		{name: '摩托车',  type: 'D/E/F', style: 'width: 102rpx;height: 73rpx;', icon: new URL('@/static/images/car3.png', import.meta.url).href, id: '1'},
	])
	const currentCar = ref('')
	function chooseCar(item) {
		currentCar.value = item
		usecarStore.setCar('carType', item.carType)
		usecarStore.setCar('carTypeName', item.title)
	}
	function goApp() {
		console.log( uni.webView)
		uni.webView.postMessage({
			data: {
			  action: 'goApp'
			}
		});
		uni.webView.navigateBack()
	}
	function oneBtnClick() {
		uni.navigateTo({
			url: '/pages/exercises/theoryStudy/theoryStudy'
		})
	}
	onLoad(async (option)=>{
		// 登录来源:1：洛阳学车APP；2：浙里学车APP
		let phone = option.phone?option.phone:'18267103161'
		let type = option.type?option.type:'1'
		if(!phone) return uni.$u.toast('未查到您的手机号')
		await loginFn(phone, type)
		questbanktypeFn()
	})
	// loginFn()
	// 请求登录
	async function loginFn(phone, type) {
		console.log('会执行吗？？')
		const res = await loginApi({
			"username": phone,
			type
		})
		console.log(res)
		res.data.phone = phone
		res.data.type = type
		
		uni.setStorageSync('loginInfo', res.data);
	}
	// 车型请求
	async function questbanktypeFn() {
		const {data: res} = await questbanktypeApi()
		let arr = res.map(item=>{
			item.descriptionArr = item.description.split(':')
			return item
		})
		tabData.value = arr
		currentCar.value = res[0]
	}
	
	async function treeSelectFn() {
		const res = await treeSelect()
		console.log(res)
	}
	// treeSelectFn()
	
	onPullDownRefresh(()=>{
		questbanktypeFn().then(()=>{
			uni.stopPullDownRefresh()
		}).catch(()=>{
			uni.stopPullDownRefresh()
		})
	})
	
	let citys = []
	function initcity() {
		let cityArr = allCity.map(arr => {
			return arr.cityInfoList.map(item => {
				let obj = {
					cityName: item.cityName,
					pinYin: item.cityPinyin,
					py: item.cityAcronym.toLocaleLowerCase(),
					code: item.cityCode,
					cityInitial: item.cityInitial
				}
				return obj
			})
		})
		citys = cityArr.flat()
		console.log(citys)
	}
	initcity()
	
	function getWarpweft() {
				uni.getLocation({
							type: 'wgs84',
							success: function(res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
								let url = 'https://apis.map.qq.com/ws/geocoder/v1/'
								jsonp(url, {
									key: mapKey,
									location: res.latitude + ',' + res.longitude,
									output: 'jsonp'
								}).then(res => {
									console.log('jsonp', res.result.address_component);
									let {
										province,
										city,
										district
									} = res.result.address_component;
									
									console.log(province, city, district);
									let currentCity = citys.find(item=>item.cityName==city)
									if(!currentCity) {
										return uni.$u.toast('获取定位失败，请手动选择城市')
									}
									usecarStore.setCar('city', currentCity.code)
									usecarStore.setCar('cityName', currentCity.cityName)
									console.log(currentCity, '当前城市')
								}).catch(()=>{
									uni.$u.toast('获取定位失败，请手动选择城市')
								})
					
					},
					fail() {
						uni.$u.toast('获取定位失败，请手动选择城市')
					}
				})
	}
</script>

<style lang="scss" scoped>
	.ard_row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-radius: 10rpx;
		background: #EDF8FF;
		.leftBox {
			display: flex;
			align-items: center;
			.text {
				color: #333;
				font-size: 28rpx;
				margin-left: 6rpx;
			}
		}
	}
	.moreBox {
		display: flex;
		align-items: center;
		.txt {
			font-size: 28rpx;
			color: $themC;
			margin-right: 8rpx;
		}
	}
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.btnBox {
		position: fixed;
		bottom: 70rpx;
		left: 0;
		padding: 20px;
		width: 100%;
	}
	.content {
		width: 100%;
		padding-top: 100rpx;
		
	  up-navbar {
	
	  }
	
	  .tit {
		padding: 60rpx 0rpx 30rpx 0;
		font-size: 28rpx;
		color: #333;
		font-weight: 700;
	  }
	
	  .ul {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
	    .li {
			width: 190rpx;
			// height: 190rpx;
			padding: 20rpx 0;
			border-radius: 10rpx;
			position: relative;
			display: flex;align-items: center;margin: 30rpx 0rpx 0 0 ;flex-direction: column;
			&.active {
				background: #EDF8FF;
			}
	      .checkBox {
			  position: absolute;
			  top: 0;
			  right: 0;
			  width: 36rpx;
			  height: 36rpx;
			  background: #4DBEFF;
			  border-radius: 0px 10rpx 0px 10rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
	        image {
				display: block;
				width: 32rpx;
				height: 23rpx;
	        }
	      }
	
	      .icon {
	        width: 106rpx;
			height: 68rpx;
	      }
	
	      .name {
			font-size: 28rpx;
			margin: 4rpx 0;
			
	      }
	
	      .carType {
			font-size: 24rpx;
			color: #ccc;
			padding: 4rpx;
	      }
	    }
	  }
	}
</style>