工行这里学车报名流程h5
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.
 
 
 
 

307 lines
6.3 KiB

<template>
<view class="main pageBg">
<view class="swiperBox">
<u-swiper :list="list" :show-bar="false" :mode="'none'" @change="changeSwiper" :height="468"></u-swiper>
<view class="tag">
{{swiperIndex+1}} / {{list.length}}
</view>
<view class="pozArc">
<image src="@/static/images/acr.png" mode=""></image>
</view>
</view>
<view class="schooInfo">
<view class="info">
<view class="callPhone">
<a :href="'tel:'+ 18674054687"></a>
<image src="../../static/images/home_icon_telephone@3x.png" mode=""></image>
</view>
<view class="name">{{info.schoolName}}</view>
<view class="star">
<u-rate :count="5" v-model="info.starLevel" active-color="#F5682D" disabled></u-rate>
<view class="starText">
{{ $u.utils.priceTo(info.starLevel) }}分
</view>
</view>
<view class="row">
<view class="text">行业信用{{info.creditrating}}</view>
<view class="text "
@click="$goPage('/pages/schoolDetails/schoolPublicity/schoolPublicity?trainingSchoolId='+trainingSchoolId)">
<view class="icon">
<image src="../../static/images/second_icon_information@3x.png" mode=""></image>
</view>
<view class="blueTxt">公示信息</view>
</view>
</view>
</view>
<view class="" style="padding: 16rpx 0">
<view class="addressCon">
<view class="address">{{info.address}}</view>
<view class="rightCon" @click="openMap">
<view class="icon">
<image src="../../static/images/second_icon_navigation@3x.png" mode=""></image>
</view>
<view class="txt">地图导航</view>
</view>
</view>
</view>
</view>
<view class="card">
<view class="h1">驾校简介</view>
<view class="desc">{{info.introduce || '暂无信息'}}</view>
</view>
<view class="card">
<view class="tabs">
<view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">班型</view>
<view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">场地</view>
</view>
<tabCon :siteList="siteList" :TrainingClass="TrainingClass" :current="currentTab"/>
</view>
</view>
</template>
<script>
import indexApi from '@/api/index.js'
import tabCon from './comp/tabCon.vue'
export default {
components: {
tabCon
},
data() {
return {
trainingSchoolId: '',
list: [],
swiperIndex: 0,
info: {},
TrainingClass: [],
sitePageIndex: 1,
siteList: [],
currentTab: 1
}
},
onLoad(options) {
this.trainingSchoolId = this.$store.state.currentSchool.trainingSchoolId
this.getTrainingSchoolAppDetailsFn()
this.queryTrainingClasssFn()
this.queryTrainingSiteAppListFn()
},
methods: {
// 打开地图
openMap() {
uni.openLocation({
latitude: this.info.lat,
longitude: this.info.lng
})
},
changeTab(num) {
this.currentTab = num
},
changeSwiper(index) {
this.swiperIndex = index
},
// 获取详情数据
async getTrainingSchoolAppDetailsFn() {
const [nulls, res] = await indexApi.getTrainingSchoolAppDetails({
trainingSchoolId: this.trainingSchoolId
})
this.info = res.data
let imgArr = JSON.parse(res.data.images)
this.list = imgArr.map(item => item.u1)
},
// 获取班型数据
async queryTrainingClasssFn() {
const [nulls,res] = await indexApi.queryTrainingClasss({trainingSchoolId: this.trainingSchoolId})
this.TrainingClass = res.data
console.log(res)
},
// 获取场地数据
async queryTrainingSiteAppListFn() {
const [nulls, res] = await indexApi.queryTrainingSiteAppList({trainingSchoolId: this.trainingSchoolId, pageIndex: this.sitePageIndex, pageSize: 40})
this.sitePageIndex ++
this.siteList.push(...res.data)
},
}
}
</script>
<style lang="scss" scoped>
.swiperBox {
position: relative;
.tag {
position: absolute;
right: 48rpx;
bottom: 64rpx;
width: 76rpx;
height: 32rpx;
line-height: 32rpx;
border-radius: 16rpx;
white-space: nowrap;
background: rgba(0, 0, 0, 0.4);
font-size: 24rpx;
color: #fff;
text-align: center;
}
.pozArc {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 96rpx;
}
}
.schooInfo {
width: 100%;
background: #fff;
padding: 0 32rpx;
.info {
width: 100%;
position: relative;
.callPhone {
width: 80rpx;
height: 80rpx;
top: 8rpx;
right: 32rpx;
position: absolute;
a {
position: absolute;
opacity: 0;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height: 100%;
display: block;
background-color: red;
}
}
.name {
font-size: 40rpx;
color: #333;
font-weight: 600;
}
.row {
display: flex;
align-items: center;
padding: 28rpx 0 14rpx 0;
border-bottom: 1px solid #E8E9EC;
.text {
font-size: 24rpx;
color: #686B73;
margin-right: 50rpx;
}
.text {
display: flex;
.icon {
width: 32rpx;
height: 32rpx;
}
.blueTxt {
color: #1989FA;
font-size: 24rpx;
text-decoration: underline;
margin-left: 14rpx;
}
}
}
}
.addressCon {
margin: 24rpx 0;
display: flex;
align-items: center;
width: 100%;
background: url('../../static/images/second_img_map@3x.png');
height: 116rpx;
background-size: 100% 100%;
.address {
font-size: 28rpx;
color: #333333;
flex: 1;
width: 0;
}
.rightCon {
min-width: 96rpx;
text-align: center;
margin-right: 32rpx;
.icon {
width: 32rpx;
height: 30rpx;
margin: 0 auto;
}
.txt {
font-size: 24rpx;
color: #1989FA;
margin-top: 10rpx;
}
}
}
}
.card {
width: 100%;
padding: 32rpx;
background: #fff;
margin-top: 16rpx;
.h1 {
font-size: 32rpx;
color: #333;
margin-bottom: 36rpx;
font-weight: 600;
}
.desc {
font-size: 28rpx;
color: #333;
}
}
.tabs {
display: flex;
align-items: center;
padding-bottom: 30rpx;
.tab {
flex: 1;
text-align: center;
font-size: 32rpx;
color: #B3B5B9;
&.active {
color: #1989FA;
font-weight: 600;
position: relative;
&::before {
width: 48rpx;
height: 4rpx;
background: #1989FA;
// border-radius: 200rpx 200rpx 0px 0px;
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12rpx;
}
}
}
}
</style>