You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
7.4 KiB
301 lines
7.4 KiB
<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>
|