unknown
9 months ago
35 changed files with 261 additions and 5077 deletions
-
2config/api.js
-
127pages.json
-
376pages/carEntry/examineAppointment/comp/pickDate.vue
-
92pages/carEntry/examineAppointment/comp/step1.vue
-
120pages/carEntry/examineAppointment/comp/step2.vue
-
195pages/carEntry/examineAppointment/comp/step3.vue
-
200pages/carEntry/examineAppointment/examineAppointment.vue
-
379pages/carEntry/simulateAppointment/comp/pickDate.vue
-
85pages/carEntry/simulateAppointment/comp/step1.vue
-
204pages/carEntry/simulateAppointment/comp/step2.vue
-
197pages/carEntry/simulateAppointment/comp/step3.vue
-
150pages/carEntry/simulateAppointment/simulateAppointment.vue
-
59pages/indexEntry/credit/credit.vue
-
121pages/indexEntry/examines/allExamines/allExamines.vue
-
51pages/indexEntry/examines/allNews/allNews.vue
-
117pages/indexEntry/examines/comp/examineItem.vue
-
32pages/indexEntry/examines/comp/newItem.vue
-
201pages/indexEntry/examines/detail/detail.vue
-
98pages/indexEntry/examines/examines.vue
-
34pages/indexEntry/examines/newsDetail/newsDetail.vue
-
121pages/indexEntry/examines/warningEducation/warningEducation.vue
-
2pages/indexEntry/findShcool/shcoolDetail/shcoolDetail.vue
-
236pages/indexEntry/signIn/signAndOut/signAndOut.vue
-
2pages/indexEntry/signIn/signIn.vue
-
94pages/mineEntry/myCollect/myCollect.vue
-
49pages/mineEntry/myCollect/videoItem.vue
-
284pages/mineEntry/uAvatarCropper/uAvatarCropper.vue
-
1265pages/mineEntry/uAvatarCropper/weCropper.js
-
12pages/tabbar/index/comp/schoolItem.vue
-
10pages/tabbar/learnCar/index.vue
-
227pages/userCenter/login/login - 副本.vue
-
192pages/userCenter/login/loginByPhone.vue
-
BINstatic/images/carIcon/home_icon_buzhou@2x.png
-
BINstatic/images/carIcon/home_icon_weidao@2x.png
-
BINstatic/images/carIcon/home_icon_zhuangtai@2x.png
@ -1,376 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step1"> |
|
||||
<view class="card"> |
|
||||
<view class="dateBox"> |
|
||||
<view class="month-row"> |
|
||||
<view class="month" @click="show=true">{{ currentMonth }}</view> |
|
||||
<view class="arrow"> |
|
||||
<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="date_row"> |
|
||||
<view class="icon left" @click="changeDateIndex(-1)"> |
|
||||
<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> |
|
||||
</view> |
|
||||
<view class="dateArr" > |
|
||||
<view class="dateWidth" v-for="(item,index) in dateArr[currentDay]" :key="index" @click="chooseDate(item)" > |
|
||||
<view class="date" :class="{active: chooseDay==item.date}"> |
|
||||
<!-- <view class="dian"></view> --> |
|
||||
<view class="week">{{ item.week }}</view> |
|
||||
<view class="num">{{ item.num }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="icon right" @click="changeDateIndex(1)"> |
|
||||
<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="card" > |
|
||||
<view class="timeCon"> |
|
||||
<view class="h2" v-if="timerArr.length">上午</view> |
|
||||
<view class="time_box"> |
|
||||
<view class="time_item" v-for="(item,index) in timerArr" :key="index" @click="chooseCourse(item)" :class="{active: courseIds==item.id, disable: item.status!=0}" > |
|
||||
<view class="lab">{{ statusTxt[item.status] }}</view> |
|
||||
<view class="time">{{ item.classTime }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="h2" v-if="timerArr2.length">下午</view> |
|
||||
<view class="time_box"> |
|
||||
<view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseCourse(item)" :class="{active: courseIds==item.id, disable: item.status!=0}"> |
|
||||
<view class="lab">{{ statusTxt[item.status] }}</view> |
|
||||
<view class="time">{{ item.classTime }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card" v-if="!timerArr2.length&&!timerArr.length"> |
|
||||
<nodata>暂无预约排课</nodata> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
|
|
||||
|
|
||||
<u-datetime-picker |
|
||||
:show="show" |
|
||||
v-model="chooseMonth" |
|
||||
:minDate="minDate" |
|
||||
:maxDate="maxDate" |
|
||||
mode="year-month" |
|
||||
@cancel="show=false" |
|
||||
@confirm="changeMonth" |
|
||||
></u-datetime-picker> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { getDates, getMonthsBetweenDates } from '@/config/utils.js' |
|
||||
import { examSimulationClass } from '@/config/api.js' |
|
||||
export default { |
|
||||
props: ['step', 'FormData'], |
|
||||
data() { |
|
||||
return { |
|
||||
maxDate: 0, |
|
||||
minDate: 0, |
|
||||
monthArr: [], |
|
||||
show: false, |
|
||||
dateArr: [], |
|
||||
currentDay: 0,//当前显示的日期组索引 |
|
||||
chooseDay: '', |
|
||||
chooseMonth: '', |
|
||||
timerArr: [], |
|
||||
statusTxt: ['可预约', '未开放', '已过期', '已约满', '已约过'], //状态0、未过期 1、无排课,2、已过期,3已约满 |
|
||||
timerArr2: [], |
|
||||
chooseTimerId: '', |
|
||||
endDate: null, |
|
||||
startDate: null, |
|
||||
courseIds: '', |
|
||||
radioVal: '', |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.initDate() |
|
||||
}, |
|
||||
computed: { |
|
||||
currentMonth() { |
|
||||
let tiemr = new Date(this.chooseDay) * 1 |
|
||||
return this.$u.date(tiemr, 'yyyy.mm') |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
courseIds: { |
|
||||
handler(val) { |
|
||||
let allTimer = [...this.timerArr,...this.timerArr2] |
|
||||
let total = allTimer.reduce((pre, item)=>{ |
|
||||
if(item.status==1) { |
|
||||
pre.push(item.classTime) |
|
||||
} |
|
||||
return pre |
|
||||
},[]) |
|
||||
if(total.length==this.courseIds.length) { |
|
||||
this.radioVal = 0 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获得排课 |
|
||||
async examSimulationClassFn() { |
|
||||
uni.showLoading({ |
|
||||
title: '正在加载...' |
|
||||
}) |
|
||||
let obj = { "examSiteId": this.FormData.examSiteId, "examCarId": this.FormData.carId, "trainType": this.FormData.trainType, "subject": this.FormData.subject, "classDate": this.chooseDay} |
|
||||
const {data: res} = await examSimulationClass(obj) |
|
||||
uni.hideLoading() |
|
||||
this.timerArr2 = res.afternoonSimulationClass |
|
||||
this.timerArr = res.morningSimulationClass |
|
||||
// 如果是今天的日期检查有没有过期 |
|
||||
if(this.chooseDay==this.dateArr[0][0].date) { |
|
||||
let arr = [...this.timerArr,...this.timerArr2] |
|
||||
arr.forEach(item=>{ |
|
||||
let timer = new Date() * 1 |
|
||||
let date = this.chooseDay+' '+(item.classTime.split('-')[0]) |
|
||||
date = date.replace(/-/g,'/'); |
|
||||
let timer2 = new Date(date).getTime(); |
|
||||
if(timer>timer2) { |
|
||||
item.status = 2 |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
// 初始化日期 |
|
||||
async initDate() { |
|
||||
this.startDate = this.$u.timeFormat(new Date()*1, 'yyyy-mm-dd'); |
|
||||
// 定义一个表示一个月的毫秒数 |
|
||||
this.minDate = new Date()*1 |
|
||||
const oneMonthMilliseconds = 30 * 24 * 60 * 60 * 1000; |
|
||||
this.maxDate = this.endDate = this.minDate + oneMonthMilliseconds |
|
||||
|
|
||||
this.dateArr = getDates(this.startDate, this.endDate); |
|
||||
this.chooseDay = this.dateArr[0][0].date |
|
||||
console.log(this.dateArr) |
|
||||
this.examSimulationClassFn() |
|
||||
}, |
|
||||
// 点击月份 |
|
||||
changeMonth(val) { |
|
||||
let startDate = this.$u.date(val.value, 'yyyy-mm-dd') |
|
||||
for(let i=0; i<this.dateArr.length; i++) { |
|
||||
for(let j=0; j<this.dateArr[i].length; j++) { |
|
||||
let date = this.dateArr[i][j].date |
|
||||
if(startDate==date) { |
|
||||
this.currentDay = i |
|
||||
this.chooseDay = date |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
this.show = false |
|
||||
}, |
|
||||
// 选择日期 |
|
||||
chooseDate(item) { |
|
||||
this.chooseDay = item.date |
|
||||
this.examSimulationClassFn() |
|
||||
// console.log('*****') |
|
||||
// console.log(this.chooseDay) |
|
||||
}, |
|
||||
changeDateIndex(num) { |
|
||||
if(this.currentDay==0&&num==-1) return this.$u.toast('已是可选最小日期') |
|
||||
if(this.currentDay==this.dateArr.length-1&&num==1) return this.$u.toast('已是可选最大日期') |
|
||||
this.currentDay = this.currentDay + num |
|
||||
this.chooseDay = this.dateArr[this.currentDay][0].date |
|
||||
this.FormData.courseIds = this.courseIds = '' |
|
||||
this.$emit('updatedForm', this.FormData) |
|
||||
this.examSimulationClassFn() |
|
||||
}, |
|
||||
chooseCourse(item) { |
|
||||
if(item.status!=0) return |
|
||||
this.FormData.courseIds = this.courseIds = item.id |
|
||||
this.FormData.classDate = item.classDate |
|
||||
this.FormData.classTime = item.classTime |
|
||||
this.$emit('updatedForm', this.FormData) |
|
||||
console.log(item) |
|
||||
|
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.card { |
|
||||
width: 100%; |
|
||||
margin-bottom: 24rpx; |
|
||||
overflow: hidden; |
|
||||
.dateBox { |
|
||||
padding: 36rpx 0 40rpx 0; |
|
||||
.month-row { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.month { |
|
||||
font-size: 32rpx; |
|
||||
color: $themC; |
|
||||
} |
|
||||
|
|
||||
.arrow { |
|
||||
margin-left: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.date_row { |
|
||||
width: 100%; |
|
||||
height: 100rpx; |
|
||||
position: relative; |
|
||||
.icon { |
|
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
background: rgba(51,51,51,0.18); |
|
||||
backdrop-filter: blur(4rpx); |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
border-radius: 50%; |
|
||||
&.left { |
|
||||
left: 16rpx; |
|
||||
} |
|
||||
&.right { |
|
||||
right: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.dateArr { |
|
||||
display: flex; |
|
||||
padding: 0 70rpx; |
|
||||
// justify-content: space-between; |
|
||||
&.oneDate { |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.dateWidth { |
|
||||
width: 20%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.date { |
|
||||
width: 74rpx; |
|
||||
height: 100rpx; |
|
||||
border-radius: 16rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
.dian { |
|
||||
width: 12rpx; |
|
||||
height: 12rpx; |
|
||||
background: #D8D8D8; |
|
||||
border-radius: 50%; |
|
||||
&.active { |
|
||||
background: #1989FA; |
|
||||
} |
|
||||
} |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
.week { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.num { |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.card { |
|
||||
.timeCon { |
|
||||
padding: 0 24rpx 40rpx 24rpx; |
|
||||
} |
|
||||
.h2 { |
|
||||
line-height: 90rpx; |
|
||||
font-weight: 500; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.time_box { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
justify-content: space-between; |
|
||||
&::after{ |
|
||||
display:block; |
|
||||
content:""; |
|
||||
width: 32%; |
|
||||
height:0px; |
|
||||
} |
|
||||
.time_item { |
|
||||
width: 30%; |
|
||||
height: 120rpx; |
|
||||
background: #F8F8F8; |
|
||||
border-radius: 12rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
border-radius: 12rpx; |
|
||||
margin-bottom: 20rpx; |
|
||||
color: #333; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
&.disable { |
|
||||
opacity: 0.4; |
|
||||
} |
|
||||
.lab { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.time { |
|
||||
font-size: 24rpx; |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
margin: 108rpx auto 50rpx auto; |
|
||||
} |
|
||||
.iconArrowBg { |
|
||||
background: #D8D8D8; |
|
||||
width: 26rpx; |
|
||||
height: 26rpx; |
|
||||
border-radius: 50%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
margin-left: 4px; |
|
||||
} |
|
||||
.step2 { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding-bottom: 40px; |
|
||||
.btnBg { |
|
||||
width: 310rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,92 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step2"> |
|
||||
<view class="card" v-for="(item,index) in list" :key="index" :class="{active: siteId==item.id}" @click="chooseSite(item)"> |
|
||||
<view class="leftTxt"> |
|
||||
<view class="name oneRowText">{{ item.name}}</view> |
|
||||
<view class="adr">{{ item.address }}</view> |
|
||||
</view> |
|
||||
<view class="icon"> |
|
||||
<image src="@/static/images/car/btn_daohang_cli.png" mode="" v-if="siteId==item.id"></image> |
|
||||
<image src="@/static/images/car/btn_daohang.png" mode="" v-else></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="poz_btn"> |
|
||||
<view class="btn_row" > |
|
||||
<view class="btn" @click="changeStep(2)">下一步</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: ['list', 'siteId'], |
|
||||
methods: { |
|
||||
changeStep(val) { |
|
||||
if(!this.siteId) return this.$u.toast('请选择考场') |
|
||||
this.$emit('changeStep', val) |
|
||||
}, |
|
||||
chooseSite(item) { |
|
||||
this.$emit('chooseSite', item) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.poz_btn { |
|
||||
position: fixed; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
padding: 32rpx; |
|
||||
width: 100%; |
|
||||
background: #F6F6F6; |
|
||||
} |
|
||||
.step2 { |
|
||||
width: 100%; |
|
||||
padding-bottom: 120rpx; |
|
||||
.card { |
|
||||
padding: 28rpx 36rpx; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
margin-bottom: 20rpx; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
.leftTxt { |
|
||||
width: 0; |
|
||||
flex: 1; |
|
||||
.name { |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.adr { |
|
||||
font-size: 24rpx; |
|
||||
margin-top: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
width: 72rpx; |
|
||||
height: 72rpx; |
|
||||
border-radius: 50%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
</style> |
|
@ -1,120 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step3"> |
|
||||
<view class="card"> |
|
||||
<view class="list" v-if="list.length"> |
|
||||
<view class="itemW" v-for="(item,index) in list" :key="index" @click="chooseCar(item)"> |
|
||||
<view class="listItem" :class="{active: carId==item.id}" > |
|
||||
<view class="num">{{item.carNumber}}号车</view> |
|
||||
<view class="text">{{ item.licnum }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<nodata v-else></nodata> |
|
||||
</view> |
|
||||
|
|
||||
<view class="btn_row" style="margin-top: 108rpx;"> |
|
||||
<view class="border btn" @click="changeStep(1)">返回上一步</view> |
|
||||
<view class="btn" @click="changeStep(3)">下一步</view> |
|
||||
</view> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: ['list', 'carId'], |
|
||||
data() { |
|
||||
return { |
|
||||
// list: [{ |
|
||||
// text: '00001', |
|
||||
// id: 1 |
|
||||
// }, |
|
||||
// { |
|
||||
// text: '00002', |
|
||||
// id: 1 |
|
||||
// }, |
|
||||
// { |
|
||||
// text: '00003', |
|
||||
// id: 1 |
|
||||
// }, |
|
||||
// ], |
|
||||
show: true |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
changeStep(val) { |
|
||||
if(val==3&&!this.carId) return this.$u.toast('请选择车辆') |
|
||||
this.$emit('changeStep', val) |
|
||||
}, |
|
||||
chooseCar(item) { |
|
||||
this.$emit('chooseCar', item) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.card { |
|
||||
padding: 20rpx 18rpx; |
|
||||
} |
|
||||
|
|
||||
.list { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
display: flex; |
|
||||
.itemW { |
|
||||
width: 33.33%; |
|
||||
padding: 10rpx 0; |
|
||||
} |
|
||||
.listItem { |
|
||||
width: 94%; |
|
||||
height: 120rpx; |
|
||||
background: #F8F8F8; |
|
||||
border-radius: 12rpx; |
|
||||
font-weight: 500; |
|
||||
text-align: center; |
|
||||
font-size: 24rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin: 0 auto; |
|
||||
.num { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 600; |
|
||||
margin-bottom: 10rpx; |
|
||||
} |
|
||||
&.active { |
|
||||
width: 200rpx; |
|
||||
height: 120rpx; |
|
||||
background: rgba(25, 137, 250, 0.1); |
|
||||
border-radius: 12rpx; |
|
||||
border: 2rpx solid $themC; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn_row { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
|
|
||||
&.border { |
|
||||
background: rgba(25, 137, 250, 0.1); |
|
||||
border: 2rpx solid $themC; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
@ -1,195 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step1"> |
|
||||
|
|
||||
<pickDateTimer :FormData="FormData" @updatedForm="updatedForm"/> |
|
||||
|
|
||||
<view class="btn_row"> |
|
||||
<view class="border btn" @click="changeStep(2)">返回上一步</view> |
|
||||
<view class="btn" @click="showClick">确认预约</view> |
|
||||
</view> |
|
||||
|
|
||||
<u-popup :show="show" mode="center" :round="8"> |
|
||||
<view class="popupCon"> |
|
||||
<view class="h2">再次确认预约信息</view> |
|
||||
<view class="content"> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约类型</view> |
|
||||
<view class="val">考场模拟训练预约</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约科目</view> |
|
||||
<view class="val">{{ FormData.subject==2?'科目二':'科目三'}}</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约考场</view> |
|
||||
<view class="val">{{ FormData.classDate }}</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约车型</view> |
|
||||
<view class="val">{{FormData.trainType }}</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约车辆</view> |
|
||||
<view class="val">{{ FormData.licnum }}</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约时间</view> |
|
||||
<view class="val">{{ FormData.classDate }} {{FormData.classTime}}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="btn_row"> |
|
||||
<view class="border btn" @click="show = false">返回修改</view> |
|
||||
<view class="btn" @click="examSimulationCreateFn">确认</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-popup> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import pickDateTimer from './pickDate' |
|
||||
import { examSimulationCreate } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: {pickDateTimer}, |
|
||||
props: ['step','FormData'], |
|
||||
data() { |
|
||||
return { |
|
||||
show: false |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
changeStep(val) { |
|
||||
this.$emit('changeStep', val) |
|
||||
}, |
|
||||
async examSimulationCreateFn() { |
|
||||
if(!this.FormData.courseIds) return this.$u.toast('请选择预约时间') |
|
||||
let obj = { |
|
||||
"studentId": this.studentId, |
|
||||
"classDetailId": this.FormData.courseIds |
|
||||
} |
|
||||
const res = await examSimulationCreate(obj) |
|
||||
if(res.code==0) { |
|
||||
this.show = false |
|
||||
this.$u.toast('预约成功') |
|
||||
setTimeout(()=>{ |
|
||||
this.$goPage('/pages/mineEntry/myAppointment/myAppointment?currentTab=3') |
|
||||
},1500) |
|
||||
} |
|
||||
console.log(res) |
|
||||
}, |
|
||||
updatedForm(val) { |
|
||||
this.$emit('updatedForm',val) |
|
||||
}, |
|
||||
showClick() { |
|
||||
if(!this.FormData.courseIds) return this.$u.toast('请选择预约时间') |
|
||||
this.show = true |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.card { |
|
||||
width: 100%; |
|
||||
overflow: hidden; |
|
||||
.dateBox { |
|
||||
padding: 36rpx 0 40rpx 0; |
|
||||
.month-row { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.month { |
|
||||
font-size: 32rpx; |
|
||||
color: $themC; |
|
||||
} |
|
||||
|
|
||||
.arrow { |
|
||||
margin-left: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.date_row { |
|
||||
width: 100%; |
|
||||
height: 100rpx; |
|
||||
position: relative; |
|
||||
.icon { |
|
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
background: rgba(51,51,51,0.18); |
|
||||
backdrop-filter: blur(4rpx); |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
border-radius: 50%; |
|
||||
&.left { |
|
||||
left: 16rpx; |
|
||||
} |
|
||||
&.right { |
|
||||
right: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.popupCon { |
|
||||
padding: 30rpx 50rpx; |
|
||||
|
|
||||
.h2 { |
|
||||
font-weight: 600; |
|
||||
color: #333333; |
|
||||
line-height: 70rpx; |
|
||||
font-size: 36rpx; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
padding-bottom: 20rpx; |
|
||||
|
|
||||
.row { |
|
||||
padding: 22rpx 0; |
|
||||
display: flex; |
|
||||
font-size: 28rpx; |
|
||||
align-items: center; |
|
||||
|
|
||||
.lab { |
|
||||
width: 180rpx; |
|
||||
color: #686B73; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.val { |
|
||||
flex: 1; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn_row { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
|
|
||||
&.border { |
|
||||
background: rgba(25, 137, 250, 0.1); |
|
||||
border: 2rpx solid $themC; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,200 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar :title="`考场模拟训练科目${FormData.subject}预约`"></topNavbar> |
|
||||
<view class="pad"> |
|
||||
<view class="top_row"> |
|
||||
<view class="step_row"> |
|
||||
<view class="dian" @click="changeStep(1)"> |
|
||||
<view class="num" :class="{active: currentStep==1}">1</view> |
|
||||
</view> |
|
||||
<view class="line"></view> |
|
||||
<view class="dian" @click="changeStep(2)"> |
|
||||
<view class="num" :class="{active: currentStep==2}">2</view> |
|
||||
</view> |
|
||||
<view class="line"></view> |
|
||||
<view class="dian" @click="changeStep(3)"> |
|
||||
<view class="num" :class="{active: currentStep==3}">3</view> |
|
||||
</view> |
|
||||
<!-- <view class="line"></view> |
|
||||
<view class="dian" @click="changeStep(4)"> |
|
||||
<view class="num" :class="{active: currentStep==4}">4</view> |
|
||||
</view> --> |
|
||||
<!-- <view class="line"></view> |
|
||||
<view class="dian" @click="changeStep(5)"> |
|
||||
<view class="num" :class="{active: currentStep==5}">5</view> |
|
||||
</view> --> |
|
||||
</view> |
|
||||
<view class="step_text"> |
|
||||
<!-- <view class="txt">选择科目</view> --> |
|
||||
<view class="txt">选择考场</view> |
|
||||
<!-- <view class="txt">选择车型</view> --> |
|
||||
<view class="txt">选择车辆</view> |
|
||||
<view class="txt">选择时间</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<step1 v-if="currentStep==1" @changeStep="changeStep" :list="siteList" @chooseSite="chooseSite" :siteId="FormData.examSiteId"></step1> |
|
||||
<step2 v-if="currentStep==2" @changeStep="changeStep" :list="carList" @chooseCar="chooseCar" :carId="FormData.carId"></step2> |
|
||||
<step3 v-if="currentStep==3" @changeStep="changeStep" :FormData="FormData" @updatedForm="updatedForm"></step3> |
|
||||
<!-- <step4 v-if="currentStep==4" @changeStep="changeStep"></step4> --> |
|
||||
<!-- <step5 v-if="currentStep==5" @changeStep="changeStep"></step5> --> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import step1 from './comp/step1' |
|
||||
import step2 from './comp/step2' |
|
||||
import step3 from './comp/step3' |
|
||||
import { examSitePage, examSimulationClass, examCarPage, } from '@/config/api' |
|
||||
// import step5 from './comp/step5' |
|
||||
export default { |
|
||||
components: { step1, step2, step3,}, |
|
||||
data() { |
|
||||
return { |
|
||||
currentStep: 1, |
|
||||
siteParams: { |
|
||||
siteType: '2', |
|
||||
carType: 'C1', |
|
||||
longitude: '', |
|
||||
latitude: '' |
|
||||
}, |
|
||||
carParams: { "pageNo": 1, "pageSize": 20, "carType": 'C1',}, |
|
||||
FormData: { |
|
||||
examSiteId: '', |
|
||||
carId: '', |
|
||||
subject: 2, |
|
||||
classDate: '', |
|
||||
classTime: '', |
|
||||
licnum: '', |
|
||||
siteName: '', |
|
||||
trainType: 'C1' |
|
||||
}, |
|
||||
siteList: [], |
|
||||
carList: [], |
|
||||
carTotal: 20, |
|
||||
} |
|
||||
}, |
|
||||
onLoad(options) { |
|
||||
if(options.subject) this.FormData.subject = options.subject |
|
||||
this.FormData.trainType = this.vuex_userInfo.trainType |
|
||||
this.siteParams.carType = this.vuex_userInfo.trainType |
|
||||
this.carParams.carType = this.vuex_userInfo.trainType |
|
||||
// this.carType = |
|
||||
let vuex_cityInfo = this.$store.state.user.vuex_cityInfo |
|
||||
if(!vuex_cityInfo.lat) { |
|
||||
this.$store.dispatch('getCity') |
|
||||
}else { |
|
||||
this.siteParams.latitude = vuex_cityInfo.lat |
|
||||
this.siteParams.longitude = vuex_cityInfo.lng |
|
||||
} |
|
||||
this.examSitePageFn() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 选择车型 |
|
||||
chooseCar(item) { |
|
||||
this.FormData.carId = item.id |
|
||||
this.FormData.carId = item.id |
|
||||
this.FormData.licnum = item.licnum |
|
||||
console.log(this.FormData.carId) |
|
||||
}, |
|
||||
// 选择考场 |
|
||||
chooseSite(item) { |
|
||||
this.FormData.examSiteId = item.id |
|
||||
this.FormData.siteName = item.name |
|
||||
this.carParams.pageNo = 1 |
|
||||
this.carList = [] |
|
||||
this.examCarPageFn() |
|
||||
}, |
|
||||
// 获得考场 |
|
||||
async examSitePageFn() { |
|
||||
const {data: res} = await examSitePage(this.siteParams) |
|
||||
this.siteList = res |
|
||||
|
|
||||
}, |
|
||||
// 获得车辆 |
|
||||
async examCarPageFn() { |
|
||||
this.carParams.examId = this.FormData.examSiteId |
|
||||
const {data: res} = await examCarPage(this.carParams) |
|
||||
this.carParams.pageNo++ |
|
||||
this.carList.push(...res.list) |
|
||||
this.carTotal = res.total |
|
||||
}, |
|
||||
|
|
||||
changeStep(num) { |
|
||||
this.currentStep = num |
|
||||
}, |
|
||||
updatedForm(val) { |
|
||||
this.FormData = val |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.top_row { |
|
||||
width: 100%; |
|
||||
padding-bottom: 36rpx; |
|
||||
.step_row { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
width: 100%; |
|
||||
padding: 0 32rpx; |
|
||||
.dian { |
|
||||
width: 180rpx; |
|
||||
height: 100rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
position: relative; |
|
||||
// background: red; |
|
||||
} |
|
||||
.num { |
|
||||
width: 46rpx; |
|
||||
height: 46rpx; |
|
||||
background: #D1E7FE; |
|
||||
line-height: 46rpx; |
|
||||
border-radius: 50%; |
|
||||
text-align: center; |
|
||||
color: $themC; |
|
||||
font-size: 24rpx; |
|
||||
position: absolute; |
|
||||
z-index: 9; |
|
||||
&.active { |
|
||||
border:2rpx solid $themC; |
|
||||
&::before { |
|
||||
content: ''; |
|
||||
width: 66rpx; |
|
||||
height: 66rpx; |
|
||||
border-radius: 50%; |
|
||||
position: absolute; |
|
||||
z-index: -1; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%,-50%); |
|
||||
background: rgba(255,255,255,0.6); |
|
||||
filter: blur(6rpx); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.line { |
|
||||
width: 60rpx; |
|
||||
height: 4rpx; |
|
||||
background: rgba(255,255,255,0.4); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.step_text { |
|
||||
display: flex; |
|
||||
.txt { |
|
||||
flex: 1; |
|
||||
text-align: center; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,379 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step1"> |
|
||||
<view class="card"> |
|
||||
<view class="dateBox"> |
|
||||
<view class="month-row"> |
|
||||
<view class="month" @click="show=true">{{ currentMonth }}</view> |
|
||||
<view class="arrow"> |
|
||||
<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="date_row"> |
|
||||
<view class="icon left" @click="changeDateIndex(-1)"> |
|
||||
<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> |
|
||||
</view> |
|
||||
<view class="dateArr" > |
|
||||
<view class="dateWidth" v-for="(item,index) in dateArr[currentDay]" :key="index" @click="chooseDate(item)" > |
|
||||
<view class="date" :class="{active: chooseDay==item.date}"> |
|
||||
<!-- <view class="dian"></view> --> |
|
||||
<view class="week">{{ item.week }}</view> |
|
||||
<view class="num">{{ item.num }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="icon right" @click="changeDateIndex(1)"> |
|
||||
<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="card" > |
|
||||
<view class="timeCon"> |
|
||||
<view class="h2" v-if="timerArr.length">上午</view> |
|
||||
<view class="time_box"> |
|
||||
<view class="time_item" v-for="(item,index) in timerArr" :key="index" @click="chooseCourse(item)" :class="{active: courseIds==item.id, disable: item.status!=0}" > |
|
||||
<view class="lab">{{ statusTxt[item.status] }}</view> |
|
||||
<view class="time">{{ item.classTime }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="h2" v-if="timerArr2.length">下午</view> |
|
||||
<view class="time_box"> |
|
||||
<view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseCourse(item)" :class="{active: courseIds==item.id, disable: item.status!=0}"> |
|
||||
<view class="lab">{{ statusTxt[item.status] }}</view> |
|
||||
<view class="time">{{ item.classTime }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card" v-if="!timerArr2.length&&!timerArr.length"> |
|
||||
<nodata>暂无预约排课</nodata> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
|
|
||||
|
|
||||
<u-datetime-picker |
|
||||
:show="show" |
|
||||
v-model="chooseMonth" |
|
||||
:minDate="minDate" |
|
||||
:maxDate="maxDate" |
|
||||
mode="year-month" |
|
||||
@confirm="changeMonth" |
|
||||
@cancel="show=false" |
|
||||
></u-datetime-picker> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { getDates, getMonthsBetweenDates } from '@/config/utils.js' |
|
||||
import { simulationClass } from '@/config/api.js' |
|
||||
export default { |
|
||||
props: ['step', 'FormData'], |
|
||||
data() { |
|
||||
return { |
|
||||
maxDate: 0, |
|
||||
minDate: 0, |
|
||||
monthArr: [], |
|
||||
show: false, |
|
||||
dateArr: [], |
|
||||
currentDay: 0,//当前显示的日期组索引 |
|
||||
chooseDay: '', |
|
||||
chooseMonth: '', |
|
||||
timerArr: [], |
|
||||
statusTxt: ['可预约', '未开放', '已过期', '已约满', '已约过'], //状态0、未过期 1、无排课,2、已过期,3已约满 |
|
||||
timerArr2: [], |
|
||||
chooseTimerId: '', |
|
||||
endDate: null, |
|
||||
startDate: null, |
|
||||
courseIds: '', |
|
||||
radioVal: '', |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
mounted() { |
|
||||
this.initDate() |
|
||||
}, |
|
||||
computed: { |
|
||||
currentMonth() { |
|
||||
let tiemr = new Date(this.chooseDay) * 1 |
|
||||
return this.$u.date(tiemr, 'yyyy.mm') |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
courseIds: { |
|
||||
handler(val) { |
|
||||
let allTimer = [...this.timerArr,...this.timerArr2] |
|
||||
let total = allTimer.reduce((pre, item)=>{ |
|
||||
if(item.status==1) { |
|
||||
pre.push(item.classTime) |
|
||||
} |
|
||||
return pre |
|
||||
},[]) |
|
||||
if(total.length==this.courseIds.length) { |
|
||||
this.radioVal = 0 |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
// 获得排课 |
|
||||
async simulationClassFn() { |
|
||||
uni.showLoading({ |
|
||||
title: '正在加载...' |
|
||||
}) |
|
||||
let obj = { "pointId": this.FormData.pointId, "trainType": this.FormData.trainType, "classDate":this.chooseDay, "studentId": this.FormData.studentId} |
|
||||
const {data: res} = await simulationClass(obj) |
|
||||
this.timerArr2 = res.afternoonSimulationClass |
|
||||
this.timerArr = res.morningSimulationClass |
|
||||
uni.hideLoading() |
|
||||
// 如果是今天的日期检查有没有过期 |
|
||||
if(this.chooseDay==this.dateArr[0][0].date) { |
|
||||
let arr = [...this.timerArr,...this.timerArr2] |
|
||||
arr.forEach(item=>{ |
|
||||
let timer = new Date() * 1 |
|
||||
let date = this.chooseDay+' '+(item.classTime.split('-')[0]) |
|
||||
date = date.replace(/-/g,'/'); |
|
||||
let timer2 = new Date(date).getTime(); |
|
||||
if(timer>timer2) { |
|
||||
item.status = 2 |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
// 初始化日期 |
|
||||
async initDate() { |
|
||||
this.startDate = this.$u.timeFormat(new Date()*1, 'yyyy-mm-dd'); |
|
||||
// 定义一个表示一个月的毫秒数 |
|
||||
this.minDate = new Date()*1 |
|
||||
const oneMonthMilliseconds = 30 * 24 * 60 * 60 * 1000; |
|
||||
this.maxDate = this.endDate = this.minDate + oneMonthMilliseconds |
|
||||
console.log('**************') |
|
||||
console.log(this.startDate) |
|
||||
console.log(this.endDate) |
|
||||
|
|
||||
this.dateArr = getDates(this.startDate, this.endDate); |
|
||||
this.chooseDay = this.dateArr[0][0].date |
|
||||
|
|
||||
this.simulationClassFn() |
|
||||
}, |
|
||||
// 点击月份 |
|
||||
changeMonth(val) { |
|
||||
let startDate = this.$u.date(val.value, 'yyyy-mm-dd') |
|
||||
for(let i=0; i<this.dateArr.length; i++) { |
|
||||
for(let j=0; j<this.dateArr[i].length; j++) { |
|
||||
let date = this.dateArr[i][j].date |
|
||||
if(startDate==date) { |
|
||||
this.currentDay = i |
|
||||
this.chooseDay = date |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
this.show = false |
|
||||
}, |
|
||||
// 选择日期 |
|
||||
chooseDate(item) { |
|
||||
this.FormData.courseIds = '' |
|
||||
this.chooseDay = item.date |
|
||||
this.simulationClassFn() |
|
||||
this.$emit('updatedForm', this.FormData) |
|
||||
}, |
|
||||
changeDateIndex(num) { |
|
||||
if(this.currentDay==0&&num==-1) return this.$u.toast('已是可选最小日期') |
|
||||
if(this.currentDay==this.dateArr.length-1&&num==1) return this.$u.toast('已是可选最大日期') |
|
||||
this.currentDay = this.currentDay + num |
|
||||
this.chooseDay = this.dateArr[this.currentDay][0].date |
|
||||
this.FormData.courseIds = [] |
|
||||
this.$emit('updatedForm', this.FormData) |
|
||||
this.simulationClassFn() |
|
||||
}, |
|
||||
chooseCourse(item) { |
|
||||
if(item.status!=0) return |
|
||||
this.FormData.courseIds = this.courseIds = item.id |
|
||||
this.FormData.classDate = item.classDate |
|
||||
this.FormData.classTime = item.classTime |
|
||||
this.$emit('updatedForm', this.FormData) |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.card { |
|
||||
width: 100%; |
|
||||
margin-bottom: 24rpx; |
|
||||
overflow: hidden; |
|
||||
.dateBox { |
|
||||
padding: 36rpx 0 40rpx 0; |
|
||||
.month-row { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.month { |
|
||||
font-size: 32rpx; |
|
||||
color: $themC; |
|
||||
} |
|
||||
|
|
||||
.arrow { |
|
||||
margin-left: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.date_row { |
|
||||
width: 100%; |
|
||||
height: 100rpx; |
|
||||
position: relative; |
|
||||
.icon { |
|
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
background: rgba(51,51,51,0.18); |
|
||||
backdrop-filter: blur(4rpx); |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
border-radius: 50%; |
|
||||
&.left { |
|
||||
left: 16rpx; |
|
||||
} |
|
||||
&.right { |
|
||||
right: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.dateArr { |
|
||||
display: flex; |
|
||||
padding: 0 70rpx; |
|
||||
// justify-content: space-between; |
|
||||
&.oneDate { |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.dateWidth { |
|
||||
width: 20%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.date { |
|
||||
width: 74rpx; |
|
||||
height: 100rpx; |
|
||||
border-radius: 16rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
.dian { |
|
||||
width: 12rpx; |
|
||||
height: 12rpx; |
|
||||
background: #D8D8D8; |
|
||||
border-radius: 50%; |
|
||||
&.active { |
|
||||
background: #1989FA; |
|
||||
} |
|
||||
} |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
.week { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.num { |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.card { |
|
||||
.timeCon { |
|
||||
padding: 0 24rpx 40rpx 24rpx; |
|
||||
} |
|
||||
.h2 { |
|
||||
line-height: 90rpx; |
|
||||
font-weight: 500; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.time_box { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
justify-content: space-between; |
|
||||
&::after{ |
|
||||
display:block; |
|
||||
content:""; |
|
||||
width: 32%; |
|
||||
height:0px; |
|
||||
} |
|
||||
.time_item { |
|
||||
width: 30%; |
|
||||
height: 120rpx; |
|
||||
background: #F8F8F8; |
|
||||
border-radius: 12rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
border-radius: 12rpx; |
|
||||
margin-bottom: 20rpx; |
|
||||
color: #333; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
&.disable { |
|
||||
opacity: 0.4; |
|
||||
} |
|
||||
.lab { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.time { |
|
||||
font-size: 24rpx; |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
margin: 108rpx auto 50rpx auto; |
|
||||
} |
|
||||
.iconArrowBg { |
|
||||
background: #D8D8D8; |
|
||||
width: 26rpx; |
|
||||
height: 26rpx; |
|
||||
border-radius: 50%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
margin-left: 4px; |
|
||||
} |
|
||||
.step2 { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding-bottom: 40px; |
|
||||
.btnBg { |
|
||||
width: 310rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,85 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step2"> |
|
||||
<view class="card" v-for="(item,index) in list" :key="index" :class="{active: FormData.pointId==item.id}" @click="choosePoint(item)"> |
|
||||
<view class="leftTxt"> |
|
||||
<view class="name oneRowText">{{ item.pointName }}</view> |
|
||||
<view class="adr">{{item.pointAddress}}</view> |
|
||||
</view> |
|
||||
<view class="icon"> |
|
||||
<image src="@/static/images/index/telephone_cli.png" mode="" v-if="FormData.pointId==item.id"></image> |
|
||||
<image src="@/static/images/index/telephone.png" mode="" v-else></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="poz_btn"> |
|
||||
<view class="btn_row" > |
|
||||
<!-- <view class="border btn" @click="changeStep(1)">返回上一步</view> --> |
|
||||
<view class="btn" @click="changeStep(2)">下一步</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: ['list', 'FormData'], |
|
||||
methods: { |
|
||||
changeStep(val) { |
|
||||
if(!this.FormData.pointId) return this.$u.toast('请选择模拟馆') |
|
||||
this.$emit('changeStep', val) |
|
||||
}, |
|
||||
choosePoint(item) { |
|
||||
this.$emit('choosePoint',item) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
.step2 { |
|
||||
width: 100%; |
|
||||
padding-bottom: 120rpx; |
|
||||
.card { |
|
||||
padding: 28rpx 36rpx; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
margin-bottom: 20rpx; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
.leftTxt { |
|
||||
width: 0; |
|
||||
flex: 1; |
|
||||
.name { |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.adr { |
|
||||
font-size: 24rpx; |
|
||||
margin-top: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
width: 72rpx; |
|
||||
height: 72rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
margin: 108rpx auto 50rpx auto; |
|
||||
} |
|
||||
</style> |
|
@ -1,204 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step1"> |
|
||||
|
|
||||
<pickDate :FormData="FormData" @updatedForm="updatedForm" /> |
|
||||
|
|
||||
<view class="poz_btn"> |
|
||||
<view class="btn_row" > |
|
||||
<view class="border btn" @click="changeStep(1)">返回上一步</view> |
|
||||
<view class="btn" @click="changeStep(3)">下一步</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import pickDate from './pickDate' |
|
||||
import { examSimulationCreate } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: {pickDate}, |
|
||||
props: ['step','FormData'], |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
changeStep(val) { |
|
||||
console.log(this.FormData.courseIds) |
|
||||
if(val==3&&!this.FormData.courseIds) return this.$u.toast('请选择预约时间段') |
|
||||
this.$emit('changeStep', val) |
|
||||
}, |
|
||||
updatedForm(val) { |
|
||||
this.$emit('updatedForm',val) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.poz_btn { |
|
||||
position: fixed; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
padding: 12rpx 32rpx; |
|
||||
width: 100%; |
|
||||
background: #F6F6F6; |
|
||||
.btn_row { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
padding-bottom: 20rpx; |
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
|
|
||||
&.border { |
|
||||
background: rgba(25, 137, 250, 0.1); |
|
||||
border: 2rpx solid $themC; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.card { |
|
||||
width: 100%; |
|
||||
margin-bottom: 24rpx; |
|
||||
overflow: hidden; |
|
||||
.dateBox { |
|
||||
padding: 36rpx 0 40rpx 0; |
|
||||
.month-row { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.month { |
|
||||
font-size: 32rpx; |
|
||||
color: $themC; |
|
||||
} |
|
||||
|
|
||||
.arrow { |
|
||||
margin-left: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.date_row { |
|
||||
width: 100%; |
|
||||
height: 100rpx; |
|
||||
position: relative; |
|
||||
.icon { |
|
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
background: rgba(51,51,51,0.18); |
|
||||
backdrop-filter: blur(4rpx); |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
border-radius: 50%; |
|
||||
&.left { |
|
||||
left: 16rpx; |
|
||||
} |
|
||||
&.right { |
|
||||
right: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.dateArr { |
|
||||
display: flex; |
|
||||
padding: 0 70rpx; |
|
||||
// justify-content: space-between; |
|
||||
&.oneDate { |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.dateWidth { |
|
||||
width: 20%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.date { |
|
||||
width: 74rpx; |
|
||||
height: 100rpx; |
|
||||
border-radius: 16rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
.week { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.num { |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.card { |
|
||||
.timeCon { |
|
||||
padding: 0 24rpx 40rpx 24rpx; |
|
||||
} |
|
||||
.h2 { |
|
||||
line-height: 90rpx; |
|
||||
font-weight: 500; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.time_box { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
justify-content: space-between; |
|
||||
.time_item { |
|
||||
width: 30%; |
|
||||
height: 120rpx; |
|
||||
background: #F8F8F8; |
|
||||
border-radius: 12rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
border-radius: 12rpx; |
|
||||
color: #333; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
&.disable { |
|
||||
opacity: 0.4; |
|
||||
} |
|
||||
.lab { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.time { |
|
||||
font-size: 24rpx; |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</style> |
|
@ -1,197 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step3"> |
|
||||
<view class="card"> |
|
||||
<view class="list"> |
|
||||
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: FormData.deviceNum==item.seq}" @click="chooseDevice(item)"> |
|
||||
{{ item.seq }} </view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="btn_row" style="margin-top: 108rpx;"> |
|
||||
<view class="border btn" @click="changeStep(2)">返回上一步</view> |
|
||||
<view class="btn" @click="confirmClick">确认</view> |
|
||||
</view> |
|
||||
|
|
||||
<u-popup :show="show" mode="center" :round="8"> |
|
||||
<view class="popupCon"> |
|
||||
<view class="h2">再次确认预约信息</view> |
|
||||
<view class="content"> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约类型</view> |
|
||||
<view class="val">模拟器训练预约</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约时间</view> |
|
||||
<view class="val">{{FormData.classDate}} {{ FormData.classTime}}</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">模拟驾驶馆</view> |
|
||||
<view class="val">{{FormData.pointName}}</view> |
|
||||
</view> |
|
||||
<view class="row"> |
|
||||
<view class="lab">预约模拟器</view> |
|
||||
<view class="val">{{ FormData.deviceNum}}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="btn_row"> |
|
||||
<view class="border btn" @click="show = false">返回修改</view> |
|
||||
<view class="btn" @click="simulationCreateFn">确认</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-popup> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { simulationDevices, simulationCreate } from '@/config/api.js' |
|
||||
export default { |
|
||||
props: ['FormData'], |
|
||||
data() { |
|
||||
return { |
|
||||
list: [], |
|
||||
show: false |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.simulationDevicesFn() |
|
||||
}, |
|
||||
watch: { |
|
||||
FormData: { |
|
||||
handler(newVal) { |
|
||||
if(newVal) { |
|
||||
this.$emit('updatedForm', newVal) |
|
||||
} |
|
||||
}, |
|
||||
deep: true |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
changeStep(val) { |
|
||||
this.$emit('changeStep', val) |
|
||||
}, |
|
||||
async simulationDevicesFn() { |
|
||||
let arr = this.FormData.classTime.split('-') |
|
||||
let obj = { "pointId": this.FormData.pointId, "classDate": this.FormData.classDate, "beginTime": arr[0], "endTime": arr[1]} |
|
||||
const {data: res} = await simulationDevices(obj) |
|
||||
this.list = res |
|
||||
|
|
||||
}, |
|
||||
chooseDevice(item) { |
|
||||
this.FormData.deviceNum = item.seq |
|
||||
this.$emit('updatedForm', this.FormData) |
|
||||
// this.$set(this.FormData, 'deviceNum', ) |
|
||||
console.log(this.FormData.deviceNum) |
|
||||
// this.FormData.deviceName = item.seq |
|
||||
|
|
||||
}, |
|
||||
confirmClick(item) { |
|
||||
if(!this.FormData.deviceNum) return this.$u.toast('请选择模拟器') |
|
||||
this.show = true |
|
||||
}, |
|
||||
// 创建预约 |
|
||||
async simulationCreateFn() { |
|
||||
let obj = { |
|
||||
"studentId": this.FormData.studentId, |
|
||||
"classId": this.FormData.courseIds, |
|
||||
"deviceNum": this.FormData.deviceNum |
|
||||
} |
|
||||
const res = await simulationCreate(obj) |
|
||||
if(res.code==0) { |
|
||||
this.show = false |
|
||||
this.$u.toast('预约成功') |
|
||||
setTimeout(()=>{ |
|
||||
this.$goPage('/pages/mineEntry/myAppointment/myAppointment?currentTab=1') |
|
||||
},1500) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.card { |
|
||||
padding: 28rpx 24rpx; |
|
||||
} |
|
||||
|
|
||||
.list { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.listItem { |
|
||||
width: 32.4%; |
|
||||
height: 120rpx; |
|
||||
background: #F8F8F8; |
|
||||
border-radius: 12rpx; |
|
||||
font-weight: 500; |
|
||||
text-align: center; |
|
||||
line-height: 120rpx; |
|
||||
|
|
||||
&.active { |
|
||||
width: 200rpx; |
|
||||
height: 120rpx; |
|
||||
background: rgba(25, 137, 250, 0.1); |
|
||||
border-radius: 12rpx; |
|
||||
border: 2rpx solid $themC; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.popupCon { |
|
||||
padding: 30rpx 50rpx; |
|
||||
|
|
||||
.h2 { |
|
||||
font-weight: 600; |
|
||||
color: #333333; |
|
||||
line-height: 70rpx; |
|
||||
font-size: 36rpx; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
padding-bottom: 20rpx; |
|
||||
|
|
||||
.row { |
|
||||
padding: 22rpx 0; |
|
||||
display: flex; |
|
||||
font-size: 28rpx; |
|
||||
align-items: center; |
|
||||
|
|
||||
.lab { |
|
||||
width: 180rpx; |
|
||||
color: #686B73; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.val { |
|
||||
flex: 1; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn_row { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
|
|
||||
&.border { |
|
||||
background: rgba(25, 137, 250, 0.1); |
|
||||
border: 2rpx solid $themC; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,150 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar title="模拟器训练预约"></topNavbar> |
|
||||
<view class="pad"> |
|
||||
<view class="top_row"> |
|
||||
<view class="step_row"> |
|
||||
<view class="dian" @click="changeStep(1)"> |
|
||||
<view class="num" :class="{active: currentStep==1}">1</view> |
|
||||
</view> |
|
||||
<view class="line"></view> |
|
||||
<view class="dian" @click="changeStep(2)"> |
|
||||
<view class="num" :class="{active: currentStep==2}">2</view> |
|
||||
</view> |
|
||||
<view class="line"></view> |
|
||||
<view class="dian" @click="changeStep(3)"> |
|
||||
<view class="num" :class="{active: currentStep==3}">3</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="step_text"> |
|
||||
<view class="txt">选择模拟驾驶馆</view> |
|
||||
<view class="txt">预约时间</view> |
|
||||
<view class="txt">选择模拟器</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<step1 v-if="currentStep==1" @changeStep="changeStep" :list="list1" :FormData="FormData" @choosePoint="choosePoint"></step1> |
|
||||
<step2 v-if="currentStep==2" @changeStep="changeStep" :FormData="FormData" @updatedForm="updatedForm" ></step2> |
|
||||
<step3 v-if="currentStep==3" @changeStep="changeStep" :FormData="FormData" @updatedForm="updatedForm"></step3> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import step1 from './comp/step1' |
|
||||
import step2 from './comp/step2' |
|
||||
import step3 from './comp/step3' |
|
||||
import { simulationDevices, simulationPoint, } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: { step1, step2, step3 }, |
|
||||
data() { |
|
||||
return { |
|
||||
currentStep: 1, |
|
||||
list1: [], |
|
||||
FormData: { |
|
||||
pointName: '', |
|
||||
pointId: '', |
|
||||
trainType: '', |
|
||||
studentId: '', |
|
||||
deviceName: '', |
|
||||
classDate: '', |
|
||||
classTime: '', |
|
||||
deviceNum: '', |
|
||||
courseIds: '', |
|
||||
beginTime: '', |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.simulationPointFn() |
|
||||
this.FormData.trainType = this.vuex_userInfo.trainType |
|
||||
this.FormData.studentId = this.studentId |
|
||||
}, |
|
||||
methods: { |
|
||||
updatedForm(val) { |
|
||||
this.FormData = val |
|
||||
}, |
|
||||
changeStep(num) { |
|
||||
this.currentStep = num |
|
||||
}, |
|
||||
// 选择模拟点 |
|
||||
choosePoint(item) { |
|
||||
this.FormData.pointName = item.pointName |
|
||||
this.FormData.pointId = item.id |
|
||||
}, |
|
||||
// 模拟点 |
|
||||
async simulationPointFn() { |
|
||||
const {data: res} = await simulationPoint({schoolId: this.vuex_userInfo.schoolId,lat: this.vuex_cityInfo.lat,lng: this.vuex_cityInfo.lng}) |
|
||||
this.list1 = res |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.top_row { |
|
||||
width: 100%; |
|
||||
padding-bottom: 36rpx; |
|
||||
.step_row { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
width: 100%; |
|
||||
padding: 0 32rpx; |
|
||||
.dian { |
|
||||
width: 180rpx; |
|
||||
height: 100rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
position: relative; |
|
||||
// background: red; |
|
||||
} |
|
||||
.num { |
|
||||
width: 46rpx; |
|
||||
height: 46rpx; |
|
||||
background: #D1E7FE; |
|
||||
line-height: 46rpx; |
|
||||
border-radius: 50%; |
|
||||
text-align: center; |
|
||||
color: $themC; |
|
||||
font-size: 24rpx; |
|
||||
position: absolute; |
|
||||
z-index: 9; |
|
||||
&.active { |
|
||||
border:2rpx solid $themC; |
|
||||
&::before { |
|
||||
content: ''; |
|
||||
width: 66rpx; |
|
||||
height: 66rpx; |
|
||||
border-radius: 50%; |
|
||||
position: absolute; |
|
||||
z-index: -1; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%,-50%); |
|
||||
background: rgba(255,255,255,0.6); |
|
||||
filter: blur(6rpx); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.line { |
|
||||
width: 60rpx; |
|
||||
height: 4rpx; |
|
||||
background: rgba(255,255,255,0.4); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.step_text { |
|
||||
display: flex; |
|
||||
.txt { |
|
||||
flex: 1; |
|
||||
text-align: center; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,59 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBg"> |
|
||||
<view class="ul"> |
|
||||
<view class="li"> |
|
||||
<view class="num">1</view> |
|
||||
<view class="con"> |
|
||||
<schoolItme :showPhone="false"/> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import schoolItme from '../findShcool/comp/schoolItem.vue' |
|
||||
export default { |
|
||||
components: { schoolItme }, |
|
||||
onLoad(option) { |
|
||||
if(option.type) { |
|
||||
uni.setNavigationBarTitle({ |
|
||||
title: '合格率排行' |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.ul { |
|
||||
padding: 28rpx; |
|
||||
} |
|
||||
.li { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
.num { |
|
||||
width: 56rpx; |
|
||||
height: 36rpx; |
|
||||
border-radius: 4rpx; |
|
||||
text-align: center; |
|
||||
background: #ADADAD; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
margin-right: 28rpx; |
|
||||
&:nth-child(1) { |
|
||||
background: #FF6B6D; |
|
||||
} |
|
||||
&:nth-child(2) { |
|
||||
background: #F18840; |
|
||||
} |
|
||||
&:nth-child(3) { |
|
||||
background: #FFB83E; |
|
||||
} |
|
||||
} |
|
||||
.con { |
|
||||
flex: 1; |
|
||||
width: 0; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,121 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar title="找考场"></topNavbar> |
|
||||
<view class="pad"> |
|
||||
<view class="search"> |
|
||||
<searchRow placeholder="搜索考场名称" @searchFn="searchFn"/> |
|
||||
</view> |
|
||||
<view class="navBox"> |
|
||||
<view class="nav" v-for="(item,index) in navList" :key="index" :class="{active: params.siteType==item.id}" @click="changeNav(item)">{{ item.text }}</view> |
|
||||
</view> |
|
||||
<view class="card" v-for="(item,index) in list" :key="index"> |
|
||||
<examineItem :item="item"></examineItem> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view style="padding-bottom: 20rpx;" v-if="list.length"> |
|
||||
<u-loadmore :status="status" /> |
|
||||
</view> |
|
||||
<nodata v-if="!list.length&&status=='nomore'"></nodata> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import examineItem from '../comp/examineItem.vue' |
|
||||
import { getexamSite } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: { |
|
||||
examineItem |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
navList: [ |
|
||||
{text: '全部', id: 0}, |
|
||||
{text: '理论', id: 1}, |
|
||||
{text: '科目二', id: 2}, |
|
||||
{text: '科目三', id: 3}, |
|
||||
], |
|
||||
currentNav: 0, |
|
||||
list: [], |
|
||||
params: { |
|
||||
pageNo: 1, |
|
||||
pageSize: 20, |
|
||||
siteType: 0 |
|
||||
}, |
|
||||
status: 'loading' |
|
||||
} |
|
||||
}, |
|
||||
onLoad() { |
|
||||
let vuex_cityInfo = this.$store.state.user.vuex_cityInfo |
|
||||
if(!vuex_cityInfo.lat) { |
|
||||
this.$store.dispatch('getCity') |
|
||||
}else { |
|
||||
this.params.lat = vuex_cityInfo.lat |
|
||||
this.params.lng = vuex_cityInfo.lng |
|
||||
} |
|
||||
this.getexamSiteFn() |
|
||||
}, |
|
||||
|
|
||||
onReachBottom() { |
|
||||
if(this.total>this.list.length) { |
|
||||
this.getexamSiteFn() |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
changeNav(item) { |
|
||||
this.params.siteType = item.id |
|
||||
this.status = 'loading' |
|
||||
this.initList() |
|
||||
}, |
|
||||
searchFn(val) { |
|
||||
this.params.name = val |
|
||||
this.initList() |
|
||||
}, |
|
||||
initList() { |
|
||||
this.params.pageNo = 1 |
|
||||
this.list = [] |
|
||||
this.getexamSiteFn() |
|
||||
}, |
|
||||
async getexamSiteFn() { |
|
||||
const {data: res} = await getexamSite(this.params) |
|
||||
this.list.push(...res.list) |
|
||||
this.total = res.total |
|
||||
if(this.list.length>=this.total) this.status = 'nomore' |
|
||||
console.log(res) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.pageBgImg { |
|
||||
min-height: 100vh; |
|
||||
} |
|
||||
.navBox { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
padding: 24rpx 42rpx 36rpx 42rpx; |
|
||||
.nav { |
|
||||
display: flex; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
&.active { |
|
||||
position: relative; |
|
||||
&::before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
bottom: -14rpx; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
width: 50rpx; |
|
||||
height: 4rpx; |
|
||||
background-color: #fff; |
|
||||
border-radius: 0 0 2rpx 2rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.card { |
|
||||
padding: 32rpx 24rpx 28rpx 24rpx; |
|
||||
margin-bottom: 20rpx; |
|
||||
} |
|
||||
</style> |
|
@ -1,51 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar title="信息资讯"></topNavbar> |
|
||||
<view class="ul"> |
|
||||
<view class="card" v-for="(item,index) in infoList" :key="index"> |
|
||||
<newItem :item="item"></newItem> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view style="padding-bottom: 20rpx;" v-if="infoList.length"> |
|
||||
<u-loadmore :status="status" /> |
|
||||
</view> |
|
||||
<nodata v-if="!infoList.length"></nodata> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import newItem from '../comp/newItem' |
|
||||
import { getExamSiteInfo } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: { newItem }, |
|
||||
data() { |
|
||||
return { |
|
||||
infoList: [], |
|
||||
params: {id: '',pageNo: 1,pageSize: 20, }, |
|
||||
status: 'loading' |
|
||||
} |
|
||||
}, |
|
||||
onLoad(options) { |
|
||||
this.params.id = options.id |
|
||||
this.getExamSiteInfoFn() |
|
||||
}, |
|
||||
methods: { |
|
||||
async getExamSiteInfoFn() { |
|
||||
const {data: res} = await getExamSiteInfo(this.params) |
|
||||
this.params.pageNo ++ |
|
||||
this.infoList.push(...res.list) |
|
||||
this.total = res.total |
|
||||
if(this.infoList.length>=this.total) this.status = 'nomore' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.ul { |
|
||||
padding: 28rpx; |
|
||||
} |
|
||||
.card { |
|
||||
margin-bottom: 20rpx; |
|
||||
} |
|
||||
</style> |
|
@ -1,117 +0,0 @@ |
|||||
<template> |
|
||||
<view class="li" @click="$goPage('/pages/indexEntry/examines/detail/detail?id='+ item.id)"> |
|
||||
<view class="flex"> |
|
||||
<view class="cover"> |
|
||||
<image :src="item.images" mode="" v-if="item.images"></image> |
|
||||
</view> |
|
||||
<view class="textCon"> |
|
||||
<view class="name">{{ item.name}}</view> |
|
||||
<!-- <view class="starBox"> |
|
||||
<u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" :value="4" :readonly="true"></u-rate> |
|
||||
<view class="num">4.9分</view> |
|
||||
</view> --> |
|
||||
<view class="modeCar">准考车型:{{item.carType}}</view> |
|
||||
</view> |
|
||||
<callPhone :servicePhone="[{name: item.phone}]"> |
|
||||
<view class="pozPhone"> |
|
||||
<image src="@/static/images/index/telephone.png" mode=""></image> |
|
||||
</view> |
|
||||
</callPhone> |
|
||||
|
|
||||
</view> |
|
||||
<view class="redBox" v-if="item.notification&&item.notification.length"> |
|
||||
<!-- <view class="marqueeW"> --> |
|
||||
<!-- </view> --> |
|
||||
<view class="minText" v-if="item.notification.length<24"> |
|
||||
<u-icon name="volume" color="#C12727" size="18"></u-icon> |
|
||||
<view class="redTxt">{{ item.notification }}</view> |
|
||||
</view> |
|
||||
<u-notice-bar :text="item.notification" bgColor="#FBE8EA" color="#C12727" fontSize="12" v-else></u-notice-bar> |
|
||||
|
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: ['item'], |
|
||||
data() { |
|
||||
return { |
|
||||
text1: '免费开放日:2023/08/08 ' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.flex { |
|
||||
position: relative; |
|
||||
.cover { |
|
||||
width: 204rpx; |
|
||||
height: 140rpx; |
|
||||
background-color: #f5f5f5; |
|
||||
border-radius: 8rpx; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.textCon { |
|
||||
flex: 1; |
|
||||
padding: 0 0 0 36rpx; |
|
||||
.name { |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
margin-bottom: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.starBox { |
|
||||
padding: 10rpx 0 20rpx 0; |
|
||||
} |
|
||||
|
|
||||
.modeCar { |
|
||||
font-size: 24rpx; |
|
||||
color: #686B73; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.pozPhone { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
right: 20rpx; |
|
||||
width: 72rpx; |
|
||||
height: 72rpx; |
|
||||
transform: translateY(-50%); |
|
||||
} |
|
||||
} |
|
||||
.redBox { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
background: #FBE8EA; |
|
||||
height: 40rpx; |
|
||||
align-items: center; |
|
||||
margin-top: 34rpx; |
|
||||
overflow: hidden; |
|
||||
.icon { |
|
||||
width: 40rpx; |
|
||||
image { |
|
||||
width: 28rpx; |
|
||||
height: 28rpx; |
|
||||
margin-left: auto; |
|
||||
} |
|
||||
} |
|
||||
.marqueeW { |
|
||||
width: 0; |
|
||||
flex: 1; |
|
||||
} |
|
||||
} |
|
||||
.minText { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding-left: 20rpx; |
|
||||
.redTxt { |
|
||||
color: #C12727; |
|
||||
font-size: 24rpx; |
|
||||
padding-left: 20rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
@ -1,32 +0,0 @@ |
|||||
<template> |
|
||||
|
|
||||
<view class="newItem" > |
|
||||
<view class="h2">{{ item.title}}!</view> |
|
||||
<view class="text">{{ item.mainBody }}</view> |
|
||||
<view class="date">发布时间:{{ $u.date(item.createTime, 'yyyy/mm/dd')}}</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: ['item'] |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.newItem { |
|
||||
padding: 24rpx; |
|
||||
font-size: 28rpx; |
|
||||
.h2 { |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
.text { |
|
||||
color: #686B73; |
|
||||
padding: 8rpx 0 32rpx 0; |
|
||||
} |
|
||||
.date { |
|
||||
font-size: 20rpx; |
|
||||
color: #686B73; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,201 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 考场详情 --> |
|
||||
<view class="pageBg"> |
|
||||
<view class="swiper-box" :style="{ backgroundImage: `url(${detailInfo.images})`, backgroundSize: '100% ' }"> |
|
||||
<view class="navPoz"> |
|
||||
<topNavbar title=" "></topNavbar> |
|
||||
</view> |
|
||||
<!-- <u-swiper :list="list1" :height="261"></u-swiper> --> |
|
||||
<view class="radian"> |
|
||||
<image :src="radianImg" mode=""></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view <view class="pad traTop"> |
|
||||
<view class="card info"> |
|
||||
<view class="cover"> |
|
||||
<image :src="detailInfo.images" mode="aspectFill"></image> |
|
||||
</view> |
|
||||
<view class="textCon"> |
|
||||
<view class="name">{{detailInfo.name}}</view> |
|
||||
<view class="modeCar">准考车型:{{detailInfo.carType}}</view> |
|
||||
</view> |
|
||||
<callPhone :servicePhone="[{name: detailInfo.phone}]"> |
|
||||
<view class="pozPhone"> |
|
||||
<image src="@/static/images/index/telephone.png" mode=""></image> |
|
||||
</view> |
|
||||
</callPhone> |
|
||||
</view> |
|
||||
<!-- 考场位置 --> |
|
||||
<view class="location"> |
|
||||
<view class="h1">考场位置</view> |
|
||||
<view class="pozLi"> |
|
||||
<pozCard :info="{address: detailInfo.address, lat:detailInfo.lat,lng: detailInfo.lng, distance: distance}"></pozCard> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 信息资讯 --> |
|
||||
<view class="news"> |
|
||||
<view class="flex-b"> |
|
||||
<view class="h1">信息资讯</view> |
|
||||
<moreRight text='查看全部' @click.native="$goPage('/pages/indexEntry/examines/allNews/allNews?id='+ id)"></moreRight> |
|
||||
</view> |
|
||||
<view class="card" v-for="(item,index) in infoList" :key="index" style="margin-bottom: 20rpx;"> |
|
||||
<newItem :item="item"></newItem> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="btn" @click="goExamine">我要模拟</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import newItem from '../comp/newItem' |
|
||||
import { imgUrl } from '@/config/site.config.js' |
|
||||
import { getExamSiteDatil, getExamSiteInfo } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: { newItem }, |
|
||||
data() { |
|
||||
return { |
|
||||
radianImg: imgUrl+'radian.png', |
|
||||
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', |
|
||||
], |
|
||||
detailInfo: {}, |
|
||||
infoList: [], |
|
||||
id: '', |
|
||||
params: {}, |
|
||||
distance: '' |
|
||||
} |
|
||||
}, |
|
||||
onLoad(options) { |
|
||||
this.id = options.id |
|
||||
let vuex_cityInfo = this.$store.state.user.vuex_cityInfo |
|
||||
if(!vuex_cityInfo.lat) { |
|
||||
this.$store.dispatch('getCity') |
|
||||
}else { |
|
||||
this.params.lat = vuex_cityInfo.lat |
|
||||
this.params.lng = vuex_cityInfo.lng |
|
||||
} |
|
||||
this.getExamSiteDatilFn() |
|
||||
this.getExamSiteInfoFn() |
|
||||
}, |
|
||||
methods: { |
|
||||
async getExamSiteDatilFn() { |
|
||||
const {data: res} = await getExamSiteDatil( Object.assign({id: this.id, },this.params)) |
|
||||
this.distance = res.distance |
|
||||
this.detailInfo = res.siteDO |
|
||||
}, |
|
||||
async getExamSiteInfoFn() { |
|
||||
const {data: res} = await getExamSiteInfo({id: this.id,pageNo: 1,pageSize: 2, }) |
|
||||
this.infoList = res.list |
|
||||
}, |
|
||||
async goExamine() { |
|
||||
const res = await this.$store.dispatch('checkLogin') |
|
||||
if(!res) return |
|
||||
// uni.navigateTo({ |
|
||||
// url: '/pages/indexEntry/enroll/enroll?tit=学员信息' |
|
||||
// }) |
|
||||
// return |
|
||||
await this.$store.dispatch('getUserInfo') |
|
||||
if(this.vuex_userInfo.schoolId) { |
|
||||
uni.navigateTo({ |
|
||||
url: '/pages/carEntry/examineAppointment/examineAppointment' |
|
||||
}) |
|
||||
}else { |
|
||||
// 非平台学员 |
|
||||
this.$store.commit('updateNonPlatformStudent', 'NonPlatformStudent') |
|
||||
uni.navigateTo({ |
|
||||
url: '/pages/indexEntry/enroll/enroll?tit=学员信息' |
|
||||
}) |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
.swiper-box { |
|
||||
position: relative; |
|
||||
height: 500rpx; |
|
||||
.navPoz { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
z-index: 9; |
|
||||
left: 0; |
|
||||
} |
|
||||
.radian { |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 84rpx; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 9; |
|
||||
} |
|
||||
} |
|
||||
.h1 { |
|
||||
line-height: 96rpx; |
|
||||
} |
|
||||
.traTop { |
|
||||
position: relative; |
|
||||
top: -120rpx; |
|
||||
z-index: 99; |
|
||||
} |
|
||||
|
|
||||
.info { |
|
||||
height: 208rpx; |
|
||||
align-items: center; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
padding: 24rpx; |
|
||||
position: relative; |
|
||||
.cover { |
|
||||
width: 204rpx; |
|
||||
height: 140rpx; |
|
||||
border-radius: 8rpx; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.textCon { |
|
||||
flex: 1; |
|
||||
padding: 0 0 0 36rpx; |
|
||||
|
|
||||
.name { |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
margin-bottom: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.starBox { |
|
||||
padding: 10rpx 0 20rpx 0; |
|
||||
} |
|
||||
|
|
||||
.modeCar { |
|
||||
font-size: 24rpx; |
|
||||
color: #686B73; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.pozPhone { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
right: 40rpx; |
|
||||
width: 72rpx; |
|
||||
height: 72rpx; |
|
||||
transform: translateY(-50%); |
|
||||
} |
|
||||
} |
|
||||
.btn { |
|
||||
width: 396rpx; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
margin: 30rpx auto; |
|
||||
} |
|
||||
</style> |
|
@ -1,98 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar title="找考场"></topNavbar> |
|
||||
<view class="pad"> |
|
||||
<view class="card"> |
|
||||
<view class="navBox"> |
|
||||
<view class="nav" v-for="(item,index) in navList" :key="index" @click="$goPage(item.url)"> |
|
||||
<view class="icon"> |
|
||||
<image :src="item.icon" mode=""></image> |
|
||||
</view> |
|
||||
<view class="text">{{ item.text }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="h1_row"> |
|
||||
<view class="h1">附近考场</view> |
|
||||
<moreRight text="查看全部考场" @click.native="$goPage('/pages/indexEntry/examines/allExamines/allExamines')"></moreRight> |
|
||||
</view> |
|
||||
<view class="card" v-for="(item,index) in list" :key="index"> |
|
||||
<examineItem :item="item"></examineItem> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import examineItem from './comp/examineItem.vue' |
|
||||
import { getexamSite } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: { examineItem }, |
|
||||
data() { |
|
||||
return { |
|
||||
navList: [ |
|
||||
{text: '我要模拟', icon: require('../../../static/images/index/btn_moni.png'), id: 1 }, |
|
||||
{text: '考场取号', icon: require('../../../static/images/index/btn_quhao.png'), id: 2 }, |
|
||||
{text: '领证宣誓', icon: require('../../../static/images/index/btn_xuanshi.png'), id: 3 }, |
|
||||
{text: '警示教育', icon: require('../../../static/images/index/btn_jiaoyu.png'), id: 4 , url: '/pages/indexEntry/examines/warningEducation/warningEducation'}, |
|
||||
{text: '驾照邮寄', icon: require('../../../static/images/index/btn_youjix.png'), id: 5 }, |
|
||||
], |
|
||||
list: [], |
|
||||
params: { |
|
||||
pageNo: 1, |
|
||||
pageSize: 10, |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
onLoad() { |
|
||||
let vuex_cityInfo = this.$store.state.user.vuex_cityInfo |
|
||||
if(!vuex_cityInfo.lat) { |
|
||||
this.$store.dispatch('getCity') |
|
||||
}else { |
|
||||
this.params.lat = vuex_cityInfo.lat |
|
||||
this.params.lng = vuex_cityInfo.lng |
|
||||
} |
|
||||
this.getexamSiteFn() |
|
||||
}, |
|
||||
methods: { |
|
||||
async getexamSiteFn() { |
|
||||
const {data: res} = await getexamSite(this.params) |
|
||||
this.list = res.list |
|
||||
console.log(res) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.navBox { |
|
||||
display: flex; |
|
||||
.nav { |
|
||||
flex: 2; |
|
||||
.icon { |
|
||||
width: 92rpx; |
|
||||
height: 92rpx; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
|
|
||||
.text { |
|
||||
font-size: 26rpx; |
|
||||
margin-top: 22rpx; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.h1_row { |
|
||||
height: 104rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.card { |
|
||||
padding: 32rpx 24rpx 28rpx 24rpx; |
|
||||
margin-bottom: 20rpx; |
|
||||
} |
|
||||
.redBox { |
|
||||
|
|
||||
} |
|
||||
</style> |
|
@ -1,34 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar title="信息资讯"></topNavbar> |
|
||||
<view class="pad"> |
|
||||
<view class="card"> |
|
||||
<view class="h2">最新免费开放日来啦!</view> |
|
||||
<view class="content"> |
|
||||
内容 |
|
||||
</view> |
|
||||
<view class="date">发布时间:2023/08/06</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.card { |
|
||||
padding: 28rpx 24rpx; |
|
||||
.h2 { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
.content { |
|
||||
padding: 40rpx 0 100rpx; |
|
||||
} |
|
||||
.date { |
|
||||
color: #686B73; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,121 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar title="安全警示教育在线视频学习"></topNavbar> |
|
||||
<view class="pad"> |
|
||||
<view class="searcBox"> |
|
||||
<searchRow placeholder="搜索视频名称"/> |
|
||||
</view> |
|
||||
<view class="card"> |
|
||||
<view class="con"> |
|
||||
<view class="tit">第一章</view> |
|
||||
<view class="li" v-for="(item,index) in 10" :key="index"> |
|
||||
<view class="cover"> |
|
||||
<view class="status">未开始</view> |
|
||||
<view class="startIcon"> |
|
||||
<image src="@/static/images/index/btn_bofang.png" mode=""></image> |
|
||||
</view> |
|
||||
<view class="coverImg"> |
|
||||
<image src="@/static/images/index/avatar.png" mode=""></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="rightTxt"> |
|
||||
<view class="name">公益短片之“车速决定命运”</view> |
|
||||
<view class="time">3:22</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return {} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.searcBox { |
|
||||
padding: 0rpx 0 30rpx 0; |
|
||||
} |
|
||||
|
|
||||
.card { |
|
||||
.con { |
|
||||
.tit { |
|
||||
border-bottom: 2rpx solid #E8E9EC; |
|
||||
line-height: 74rpx; |
|
||||
padding-left: 16rpx; |
|
||||
} |
|
||||
|
|
||||
.li { |
|
||||
display: flex; |
|
||||
padding: 30rpx 16rpx; |
|
||||
border-bottom: 2rpx dashed #E8E9EC; |
|
||||
&:last-child { |
|
||||
border: none; |
|
||||
} |
|
||||
.cover { |
|
||||
background: #000; |
|
||||
width: 302rpx; |
|
||||
height: 168rpx; |
|
||||
border-radius: 12rpx; |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
flex-shrink: 0; |
|
||||
.status { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
width: 108rpx; |
|
||||
height: 40rpx; |
|
||||
background: #ADADAD; |
|
||||
border-radius: 12rpx 0px 12rpx 0px; |
|
||||
line-height: 40rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
z-index: 8; |
|
||||
} |
|
||||
|
|
||||
.startIcon { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
bottom: 50%; |
|
||||
// transform: translateX(-50%); |
|
||||
// transform: translateY(-50%); |
|
||||
transform: translate(-50%, 50%); |
|
||||
width: 60rpx; |
|
||||
height: 60rpx; |
|
||||
z-index: 9; |
|
||||
} |
|
||||
.coverImg { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
image { |
|
||||
opacity: 0.92; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.rightTxt { |
|
||||
flex: 1; |
|
||||
width: 0; |
|
||||
padding-left: 28rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: space-between; |
|
||||
font-size: 28rpx; |
|
||||
.name { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.time { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -0,0 +1,236 @@ |
|||||
|
<template> |
||||
|
<view class="main"> |
||||
|
<view class="signAndOut"> |
||||
|
<view class="top_row"> |
||||
|
<view class="flex-box"> |
||||
|
<view class="icon"> |
||||
|
<image src="@/static/images/carIcon/home_icon_buzhou@2x.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="txt">步骤</view> |
||||
|
</view> |
||||
|
<view class="flex-box"> |
||||
|
<view class="icon"> |
||||
|
<image src="@/static/images/carIcon/home_icon_zhuangtai@2x.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="txt">状态</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="step"> |
||||
|
<view class="li" :class="{active: step1}"> |
||||
|
<view class="leftIcon" > |
||||
|
<view class="icon">1</view> |
||||
|
<view class="line" ></view> |
||||
|
</view> |
||||
|
<view class="textCon"> |
||||
|
<view class="text">信息认证</view> |
||||
|
<view class="redTps" v-if="!step1">失败原因:{{stepFailureReason}}</view> |
||||
|
</view> |
||||
|
<view class="btn" :class="{red: !step1}">{{step1?'通过': '不通过'}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="li" :class="{active: step2}"> |
||||
|
<view class="leftIcon"> |
||||
|
<view class="icon">2</view> |
||||
|
<view class="line" ></view> |
||||
|
</view> |
||||
|
<view class="textCon"> |
||||
|
<view class="text">人脸识别</view> |
||||
|
<view class="redTps"></view> |
||||
|
</view> |
||||
|
<view class="btn" v-if="step2">通过</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="li" :class="{active: step3}"> |
||||
|
<view class="leftIcon"> |
||||
|
<view class="icon">3</view> |
||||
|
</view> |
||||
|
<view class="textCon"> |
||||
|
<view class="text">信息同步</view> |
||||
|
<view class="redTps"></view> |
||||
|
</view> |
||||
|
<view class="btn" v-if="step3">通过</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="footBtn"> |
||||
|
<view class="oneBtn" :class="{active: btnActive}" v-if="!step1" @click="$goPage('/pages/other/oldStudentBinding/oldStudentBinding?goBackIndex=1')">重新认证</view> |
||||
|
<view class="oneBtn" :class="{active: step3}" v-else @click="goBack">我知道了</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import {Base64} from 'node_modules/js-base64/base64.js'; |
||||
|
// const PPFace = uni.requireNativePlugin('PP-BaiduFaceV2'); |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
deviceCode: 0, |
||||
|
stepFailureReason: '未通过', |
||||
|
step1: false, |
||||
|
step2: false, |
||||
|
step3: false, |
||||
|
btnActive: false |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.main { |
||||
|
padding: 10rpx 32rpx; |
||||
|
} |
||||
|
|
||||
|
.signAndOut { |
||||
|
width: 100%; |
||||
|
height: calc(100vh - 150rpx); |
||||
|
background-color: #fff; |
||||
|
padding: 48rpx; |
||||
|
border-radius: 16rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.footBtn { |
||||
|
padding: 48rpx 100rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
bottom: 60rpx; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.top_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 0 0 52rpx; |
||||
|
|
||||
|
.flex-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.icon { |
||||
|
width: 28rpx; |
||||
|
height: 28rpx; |
||||
|
|
||||
|
image { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.txt { |
||||
|
font-size: 28rpx; |
||||
|
color: #FD6401; |
||||
|
margin-left: 14rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step { |
||||
|
padding: 50rpx 0 0 0; |
||||
|
|
||||
|
.li { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 256rpx; |
||||
|
|
||||
|
// padding: 0 0 8rpx 0; |
||||
|
.leftIcon { |
||||
|
width: 56rpx; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
.icon { |
||||
|
width: 56rpx; |
||||
|
height: 56rpx; |
||||
|
border-radius: 50%; |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 56rpx; |
||||
|
// background: url('../../../../static/images/carIcon/home_icon_weidao@2x.png'); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
position: absolute; |
||||
|
left: 26rpx; |
||||
|
top: 50rpx; |
||||
|
width: 5rpx; |
||||
|
height: 200rpx; |
||||
|
border: 2rpx solid; |
||||
|
border-image: linear-gradient(180deg, rgba(238, 238, 238, 1), rgba(216, 216, 216, 1)) 2 2; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.textCon { |
||||
|
flex: 1; |
||||
|
padding: 0 0 0 8rpx; |
||||
|
font-weight: 550; |
||||
|
|
||||
|
.text { |
||||
|
font-size: 36rpx; |
||||
|
color: #363A44; |
||||
|
} |
||||
|
|
||||
|
.redTps { |
||||
|
font-size: 28rpx; |
||||
|
color: #E63633; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 108rpx; |
||||
|
height: 52rpx; |
||||
|
text-align: center; |
||||
|
line-height: 52rpx; |
||||
|
color: #ffffff; |
||||
|
background: linear-gradient(180deg, #53D3E5 0%, #3593FB 100%); |
||||
|
border-radius: 8rpx; |
||||
|
|
||||
|
&.red { |
||||
|
background: linear-gradient(180deg, #ea7c48 0%, #f54e40 100%); |
||||
|
} |
||||
|
} |
||||
|
&.active { |
||||
|
.leftIcon { |
||||
|
.icon { |
||||
|
// background: url('../../../static/images/icon/home_icon_yiguo@2x.png'); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.line { |
||||
|
border-image: linear-gradient(180deg, rgba(83, 211, 229, 1), rgba(53, 147, 251, 1)) 2 2; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.oneBtn { |
||||
|
width: 100%; |
||||
|
height: 96rpx; |
||||
|
border-radius: 48rpx; |
||||
|
font-size: 36rpx; |
||||
|
color: #fff; |
||||
|
background: linear-gradient(180deg, #EEEEEE 0%, #D8D8D8 100%); |
||||
|
text-align: center; |
||||
|
line-height: 96rpx; |
||||
|
|
||||
|
&.active { |
||||
|
background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -1,94 +0,0 @@ |
|||||
<template> |
|
||||
<view class="pageBgImg"> |
|
||||
<topNavbar title="我的收藏"></topNavbar> |
|
||||
<view class="pad"> |
|
||||
<view class="searcBox"> |
|
||||
<searchRow placeholder="搜索视频名称" @searchFn="searchFn"/> |
|
||||
</view> |
|
||||
<view class="ul"> |
|
||||
<view class="li" v-for="(item,index) in list" :key="index" @click="$goPage('/pages/indexEntry/publicVideo/videoDetail/videoDetail?id='+ item.id)"> |
|
||||
<videoItem :item="item"></videoItem> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view style="padding-bottom: 20rpx;" v-if="list.length"> |
|
||||
<u-loadmore :status="status" /> |
|
||||
</view> |
|
||||
<nodata v-if="!list.length"></nodata> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import videoItem from './videoItem.vue' |
|
||||
import { getcollectVideo } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: { videoItem }, |
|
||||
data() { |
|
||||
return { |
|
||||
list: [], |
|
||||
params: { |
|
||||
phone: '', |
|
||||
title: '', |
|
||||
pageNo: 1, |
|
||||
pageSize: 20 |
|
||||
}, |
|
||||
total: 20, |
|
||||
status: 'loading' |
|
||||
} |
|
||||
}, |
|
||||
onLoad() { |
|
||||
this.params.phone = this.vuex_userInfo.phone |
|
||||
this.getcollectVideoFn() |
|
||||
}, |
|
||||
onPullDownRefresh() { |
|
||||
this.params.pageNo = 1 |
|
||||
this.list = [] |
|
||||
this.getcollectVideoFn().then(()=>{ |
|
||||
uni.stopPullDownRefresh() |
|
||||
}) |
|
||||
}, |
|
||||
onReachBottom() { |
|
||||
if(this.total>this.list.length) { |
|
||||
this.getcollectVideoFn() |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
searchFn(val) { |
|
||||
this.params.title = val |
|
||||
this.list = [] |
|
||||
this.params.pageNo = 1 |
|
||||
this.getcollectVideoFn() |
|
||||
}, |
|
||||
async getcollectVideoFn() { |
|
||||
const {data: res} = await getcollectVideo(this.params) |
|
||||
this.params.pageNo ++ |
|
||||
this.list.push(...res.list) |
|
||||
this.total = res.total |
|
||||
if(this.list.length>=this.total) this.status = 'nomore' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.ul { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: wrap; |
|
||||
.li { |
|
||||
width: 100%; |
|
||||
width: 48%; |
|
||||
height: 260rpx; |
|
||||
background: #FFFFFF; |
|
||||
box-shadow: 0px 8rpx 20rpx 0px rgba(0,0,0,0.04), 2rpx 2rpx 8rpx 0px rgba(0,0,0,0.06); |
|
||||
border-radius: 16rpx; |
|
||||
margin-bottom: 24rpx; |
|
||||
padding: 16rpx; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
.searcBox { |
|
||||
padding: 0rpx 0 32rpx 0; |
|
||||
} |
|
||||
</style> |
|
@ -1,49 +0,0 @@ |
|||||
<template> |
|
||||
<view class="vdo"> |
|
||||
<view class="coverBox"> |
|
||||
<view class="start"> |
|
||||
<image src="@/static/images/index/btn_bofang.png" mode=""></image> |
|
||||
</view> |
|
||||
<view class="cover"> |
|
||||
<image :src="item.videoCover" mode="aspectFill"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="text oneRowText">{{ item.title }}</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: ['item'] |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.coverBox { |
|
||||
width: 100%; |
|
||||
height: 168rpx; |
|
||||
background: $themC; |
|
||||
border-radius: 12rpx; |
|
||||
position: relative; |
|
||||
.start { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%,-50%); |
|
||||
width: 50rpx; |
|
||||
height: 50rpx; |
|
||||
z-index: 2; |
|
||||
} |
|
||||
|
|
||||
.cover { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.text { |
|
||||
font-size: 24rpx; |
|
||||
padding: 20rpx 0 6rpx 0; |
|
||||
} |
|
||||
</style> |
|
@ -1,284 +0,0 @@ |
|||||
<template> |
|
||||
<view class="content"> |
|
||||
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }"> |
|
||||
<canvas |
|
||||
class="cropper" |
|
||||
:disable-scroll="true" |
|
||||
@touchstart="touchStart" |
|
||||
@touchmove="touchMove" |
|
||||
@touchend="touchEnd" |
|
||||
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" |
|
||||
canvas-id="cropper" |
|
||||
id="cropper" |
|
||||
></canvas> |
|
||||
<canvas |
|
||||
class="cropper" |
|
||||
:disable-scroll="true" |
|
||||
:style="{ |
|
||||
position: 'fixed', |
|
||||
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`, |
|
||||
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`, |
|
||||
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`, |
|
||||
height: `${cropperOpt.height * cropperOpt.pixelRatio}` |
|
||||
}" |
|
||||
canvas-id="targetId" |
|
||||
id="targetId" |
|
||||
></canvas> |
|
||||
</view> |
|
||||
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }"> |
|
||||
<view class="upload" @click="uploadTap">取消</view> |
|
||||
<view class="getCropperImage" @click="getCropperImage(false)">完成</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import WeCropper from './weCropper.js'; |
|
||||
export default { |
|
||||
props: { |
|
||||
// 裁剪矩形框的样式,其中可包含的属性为lineWidth-边框宽度(单位rpx),color: 边框颜色, |
|
||||
// mask-遮罩颜色,一般设置为一个rgba的透明度,如"rgba(0, 0, 0, 0.35)" |
|
||||
boundStyle: { |
|
||||
type: Object, |
|
||||
default() { |
|
||||
return { |
|
||||
lineWidth: 4, |
|
||||
borderColor: 'rgb(245, 245, 245)', |
|
||||
mask: 'rgba(0, 0, 0, 0.35)' |
|
||||
}; |
|
||||
} |
|
||||
}, |
|
||||
avatarSrc: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
// // 裁剪框宽度,单位rpx |
|
||||
// rectWidth: { |
|
||||
// type: [String, Number], |
|
||||
// default: 400 |
|
||||
// }, |
|
||||
// // 裁剪框高度,单位rpx |
|
||||
// rectHeight: { |
|
||||
// type: [String, Number], |
|
||||
// default: 400 |
|
||||
// }, |
|
||||
// // 输出图片宽度,单位rpx |
|
||||
// destWidth: { |
|
||||
// type: [String, Number], |
|
||||
// default: 400 |
|
||||
// }, |
|
||||
// // 输出图片高度,单位rpx |
|
||||
// destHeight: { |
|
||||
// type: [String, Number], |
|
||||
// default: 400 |
|
||||
// }, |
|
||||
// // 输出的图片类型,如果发现裁剪的图片很大,可能是因为设置为了"png",改成"jpg"即可 |
|
||||
// fileType: { |
|
||||
// type: String, |
|
||||
// default: 'jpg', |
|
||||
// }, |
|
||||
// // 生成的图片质量 |
|
||||
// // H5上无效,目前不考虑使用此参数 |
|
||||
// quality: { |
|
||||
// type: [Number, String], |
|
||||
// default: 1 |
|
||||
// } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 底部导航的高度 |
|
||||
bottomNavHeight: 50, |
|
||||
originWidth: 200, |
|
||||
width: 0, |
|
||||
height: 0, |
|
||||
cropperOpt: { |
|
||||
id: 'cropper', |
|
||||
targetId: 'targetCropper', |
|
||||
pixelRatio: 1, |
|
||||
width: 0, |
|
||||
height: 0, |
|
||||
scale: 2.5, |
|
||||
zoom: 8, |
|
||||
cut: { |
|
||||
x: (this.width - this.originWidth) / 2, |
|
||||
y: (this.height - this.originWidth) / 2, |
|
||||
width: this.originWidth, |
|
||||
height: this.originWidth |
|
||||
}, |
|
||||
boundStyle: { |
|
||||
lineWidth: uni.upx2px(this.boundStyle.lineWidth), |
|
||||
mask: this.boundStyle.mask, |
|
||||
color: this.boundStyle.borderColor |
|
||||
} |
|
||||
}, |
|
||||
// 裁剪框和输出图片的尺寸,高度默认等于宽度 |
|
||||
// 输出图片宽度,单位px |
|
||||
destWidth: 200, |
|
||||
// 裁剪框宽度,单位px |
|
||||
rectWidth: 350, |
|
||||
// 输出的图片类型,如果'png'类型发现裁剪的图片太大,改成"jpg"即可 |
|
||||
fileType: 'png', |
|
||||
src: '', // 选择的图片路径,用于在点击确定时,判断是否选择了图片 |
|
||||
}; |
|
||||
}, |
|
||||
onLoad(options) { |
|
||||
|
|
||||
let rectInfo = uni.getSystemInfoSync(); |
|
||||
this.width = rectInfo.windowWidth; |
|
||||
this.height = rectInfo.windowHeight - this.bottomNavHeight; |
|
||||
this.cropperOpt.width = this.width; |
|
||||
this.cropperOpt.height = this.height; |
|
||||
this.cropperOpt.pixelRatio = rectInfo.pixelRatio; |
|
||||
|
|
||||
if (this.destWidth) this.destWidth = this.destWidth; |
|
||||
if (this.rectWidth) { |
|
||||
let rectWidth = Number(this.rectWidth); |
|
||||
this.cropperOpt.cut = { |
|
||||
x: (this.width - rectWidth) / 2, |
|
||||
y: (this.height - rectWidth) / 2, |
|
||||
width: rectWidth, |
|
||||
height: rectWidth |
|
||||
}; |
|
||||
} |
|
||||
this.rectWidth = this.rectWidth; |
|
||||
if (this.fileType) this.fileType = this.fileType; |
|
||||
// 初始化 |
|
||||
this.cropper = new WeCropper(this.cropperOpt) |
|
||||
.on('ready', ctx => { |
|
||||
// wecropper is ready for work! |
|
||||
}) |
|
||||
.on('beforeImageLoad', ctx => { |
|
||||
// before picture loaded, i can do something |
|
||||
}) |
|
||||
.on('imageLoad', ctx => { |
|
||||
// picture loaded |
|
||||
}) |
|
||||
.on('beforeDraw', (ctx, instance) => { |
|
||||
// before canvas draw,i can do something |
|
||||
}); |
|
||||
// 设置导航栏样式,以免用户在page.json中没有设置为黑色背景 |
|
||||
uni.setNavigationBarColor({ |
|
||||
frontColor: '#ffffff', |
|
||||
backgroundColor: '#000000' |
|
||||
}); |
|
||||
this.src = encodeURI(options.url) |
|
||||
// 获取裁剪图片资源后,给data添加src属性及其值 |
|
||||
this.cropper.pushOrign(this.src); |
|
||||
}, |
|
||||
methods: { |
|
||||
touchStart(e) { |
|
||||
this.cropper.touchStart(e); |
|
||||
}, |
|
||||
touchMove(e) { |
|
||||
this.cropper.touchMove(e); |
|
||||
}, |
|
||||
touchEnd(e) { |
|
||||
this.cropper.touchEnd(e); |
|
||||
}, |
|
||||
getCropperImage(isPre = false) { |
|
||||
if(!this.src) return this.$u.toast('请先选择图片再裁剪'); |
|
||||
|
|
||||
let cropper_opt = { |
|
||||
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值 |
|
||||
destWidth: Number(this.destWidth), |
|
||||
fileType: this.fileType |
|
||||
}; |
|
||||
this.cropper.getCropperImage(cropper_opt, (path, err) => { |
|
||||
if (err) { |
|
||||
uni.showModal({ |
|
||||
title: '温馨提示', |
|
||||
content: err.message |
|
||||
}); |
|
||||
} else { |
|
||||
if (isPre) { |
|
||||
uni.previewImage({ |
|
||||
current: '', // 当前显示图片的 http 链接 |
|
||||
urls: [path] // 需要预览的图片 http 链接列表 |
|
||||
}); |
|
||||
} else { |
|
||||
uni.$emit('uAvatarCropper', path); |
|
||||
// console.log(path) |
|
||||
uni.navigateBack() |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
uploadTap() { |
|
||||
uni.navigateBack() |
|
||||
return |
|
||||
const self = this; |
|
||||
uni.chooseImage({ |
|
||||
count: 1, // 默认9 |
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 |
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 |
|
||||
success: (res) => { |
|
||||
self.src = res.tempFilePaths[0]; |
|
||||
// 获取裁剪图片资源后,给data添加src属性及其值 |
|
||||
|
|
||||
self.cropper.pushOrign(this.src); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
@import '@/uni_modules/uview-ui/libs/css/components.scss'; |
|
||||
|
|
||||
.content { |
|
||||
background: rgba(255, 255, 255, 1); |
|
||||
} |
|
||||
|
|
||||
.cropper { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
z-index: 11; |
|
||||
} |
|
||||
|
|
||||
.cropper-buttons { |
|
||||
background-color: #000000; |
|
||||
color: #eee; |
|
||||
} |
|
||||
|
|
||||
.cropper-wrapper { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
width: 100%; |
|
||||
background-color: #000; |
|
||||
} |
|
||||
|
|
||||
.cropper-buttons { |
|
||||
width: 100vw; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
position: fixed; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
.cropper-buttons .upload, |
|
||||
.cropper-buttons .getCropperImage { |
|
||||
width: 50%; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.cropper-buttons .upload { |
|
||||
text-align: left; |
|
||||
padding-left: 50rpx; |
|
||||
} |
|
||||
|
|
||||
.cropper-buttons .getCropperImage { |
|
||||
text-align: right; |
|
||||
padding-right: 50rpx; |
|
||||
} |
|
||||
</style> |
|
1265
pages/mineEntry/uAvatarCropper/weCropper.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,227 +0,0 @@ |
|||||
<template> |
|
||||
<view class="main" :style="{ background: `url(${imgUrl}) no-repeat`, backgroundSize: backgroundSize }"> |
|
||||
<view class="h1Img"> |
|
||||
<image src="../../../static/images/userCenter/loginTitle.png" mode=""></image> |
|
||||
</view> |
|
||||
<view class="btnCon"> |
|
||||
<!-- #ifdef MP-WEIXIN --> |
|
||||
<view class="btn" @click="getPhoneNumber">手机号快捷登录 <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="hide" v-if="isCheck">手机号</button> </view> |
|
||||
<!-- #endif --> |
|
||||
<view class="btn border" @click="$goPage('/pages/userCenter/login/loginByPhone?isCheck='+isCheck);">手机号登录/注册</view> |
|
||||
</view> |
|
||||
<view style="margin-top: 40rpx;"> |
|
||||
<privacyRadion :isCheck="isCheck" @changeRadio="changeRadio"></privacyRadion> |
|
||||
</view> |
|
||||
|
|
||||
<!-- <u-popup :show="show" :round="10" mode="center" > |
|
||||
<view class=""> |
|
||||
<view class="popupCon"> |
|
||||
<view class="h1">提 示</view> |
|
||||
<view class="msg">授权手机号,我们才能继续为您 <br>提供服务哦~</view> |
|
||||
<view class="oneBtn">我知道了</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-popup> --> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { imgUrl } from '@/config/site.config' |
|
||||
import privacyRadion from './comp/privacyRadion.vue' |
|
||||
import { weixinLogin } from '@/config/api.js' |
|
||||
export default { |
|
||||
components: {privacyRadion}, |
|
||||
data() { |
|
||||
return { |
|
||||
isCheck: false, |
|
||||
show: false, |
|
||||
imgUrl: imgUrl+'loginTopBg.png', |
|
||||
backgroundSize: '100% 360rpx', |
|
||||
} |
|
||||
}, |
|
||||
onLoad() { |
|
||||
// uni.getLocation({ |
|
||||
// type: 'wgs84', |
|
||||
// success: function (res) { |
|
||||
// console.log(res) |
|
||||
// console.log('当前位置的经度:' + res.longitude); |
|
||||
// console.log('当前位置的纬度:' + res.latitude); |
|
||||
// } |
|
||||
// }); |
|
||||
}, |
|
||||
methods: { |
|
||||
async getPhoneNumber (e) { |
|
||||
if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策'); |
|
||||
let phoneCode = e.detail.code |
|
||||
console.log(e.detail.errMsg) // 回调信息(成功失败都会返回) |
|
||||
console.log(e.detail) // 错误码(失败时返回) |
|
||||
const loginCode = await this.loginFn() |
|
||||
if(!loginCode||!phoneCode) return |
|
||||
console.log('登录验证码') |
|
||||
console.log(loginCode) |
|
||||
let obj = { |
|
||||
phoneCode, |
|
||||
loginCode |
|
||||
} |
|
||||
const {data: res} = await weixinLogin(obj) |
|
||||
this.$store.commit('update_vuex_loginInfo',res) |
|
||||
this.$store.dispatch('getUserInfo') |
|
||||
// this.$goPage('/pages/userCenter/login/face') |
|
||||
uni.switchTab({ |
|
||||
url: '/pages/tabbar/index/index' |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
loginFn() { |
|
||||
// 微信登录 |
|
||||
return new Promise((resolve,reject)=>{ |
|
||||
uni.login({ |
|
||||
provider: 'weixin', |
|
||||
success: loginRes => { |
|
||||
if (loginRes.code) { |
|
||||
// 登录成功,获取用户信息 |
|
||||
console.log('loginRes.code') |
|
||||
console.log(loginRes.code) |
|
||||
resolve(loginRes.code) |
|
||||
// this.getUserInfo(loginRes.code); |
|
||||
} else { |
|
||||
console.error('微信登录失败'); |
|
||||
} |
|
||||
}, |
|
||||
fail: err => { |
|
||||
reject(null) |
|
||||
console.error('微信登录失败', err); |
|
||||
} |
|
||||
}); |
|
||||
}) |
|
||||
|
|
||||
}, |
|
||||
getUserInfo(code) { |
|
||||
// 获取用户信息 |
|
||||
uni.getUserInfo({ |
|
||||
provider: 'weixin', |
|
||||
success: userInfoRes => { |
|
||||
// 在这里处理获取到的用户信息 |
|
||||
console.log('用户信息', userInfoRes); |
|
||||
// 发送 code 和用户信息到后台进行登录操作 |
|
||||
this.loginBackend(code, userInfoRes); |
|
||||
}, |
|
||||
fail: err => { |
|
||||
console.error('获取用户信息失败', err); |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
loginBackend(code, userInfo) { |
|
||||
// 在这里发送 code 和用户信息到后台进行登录操作 |
|
||||
// 可以使用 uni.request 或其他 HTTP 库发送请求 |
|
||||
}, |
|
||||
|
|
||||
// 是否选择协议 |
|
||||
changeRadio(val) { |
|
||||
this.isCheck = val |
|
||||
}, |
|
||||
init() { |
|
||||
uni.login({ |
|
||||
provider: 'weixin', |
|
||||
"onlyAuthorize": true, |
|
||||
success: function (loginRes) { |
|
||||
console.log('11') |
|
||||
console.log(loginRes) |
|
||||
// 登录成功 |
|
||||
uni.getUserInfo({ |
|
||||
provider: 'weixin', |
|
||||
success: function(info) { |
|
||||
// 获取用户信息成功, info.authResult保存用户信息 |
|
||||
console.log('11') |
|
||||
console.log(info) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
fail: function (err) { |
|
||||
// 登录授权失败 |
|
||||
// err.code是错误码 |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.main { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
// background: url('../../../static/images/userCenter/loginTopBg.png') no-repeat; |
|
||||
// background-size: 100% 360rpx; |
|
||||
.h1Img { |
|
||||
width: 658rpx; |
|
||||
height: 94rpx; |
|
||||
margin: 288rpx 0 120rpx 0; |
|
||||
} |
|
||||
.btnCon { |
|
||||
.btn { |
|
||||
width: 396rpx; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
color: #fff; |
|
||||
margin-bottom: 32rpx; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
font-size: 28rpx; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
.hide { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
display: inline-block; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
&.border { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.popupCon { |
|
||||
width: 558rpx; |
|
||||
height: 344rpx; |
|
||||
border-radius: 16rpx; |
|
||||
overflow: hidden; |
|
||||
.h1 { |
|
||||
line-height: 124rpx; |
|
||||
text-align: center; |
|
||||
font-size: 36rpx; |
|
||||
font-weight: 600; |
|
||||
height: 124rpx; |
|
||||
width: 100%; |
|
||||
background: linear-gradient(180deg, #C1DFFE 0%, #FFFFFF 100%); |
|
||||
} |
|
||||
|
|
||||
.msg { |
|
||||
font-size: 28rpx; |
|
||||
color: #686B73; |
|
||||
padding: 0 0 30rpx 0; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.oneBtn { |
|
||||
line-height: 112rpx; |
|
||||
height: 112rpx; |
|
||||
border-top: 1px solid #E8E9EC; |
|
||||
text-align: center; |
|
||||
font-size: 36rpx; |
|
||||
color: $themC; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,192 +0,0 @@ |
|||||
<template> |
|
||||
<view class="main" :style="{ background: `url(${imgUrl}) no-repeat`, backgroundSize: backgroundSize }"> |
|
||||
<!-- <view class="u-back-top"> |
|
||||
<view class="backBox"> |
|
||||
<u-icon name="arrow-left" color="#333" size="28"></u-icon> |
|
||||
</view> |
|
||||
</view> --> |
|
||||
<u-navbar title=" " :bgColor="bgColor" :autoBack="true"></u-navbar> |
|
||||
<view class="title">短信验证码登录</view> |
|
||||
<view class="form"> |
|
||||
<view class="form-item"> |
|
||||
<view class="prefix"> |
|
||||
<view class="jia">+</view> |
|
||||
<view class="num">86</view> |
|
||||
<view class="" style="margin: 0 32rpx 0 12rpx;"> |
|
||||
<u-icon name="arrow-down" color="#333" size="16" ></u-icon> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="inputBox my"> |
|
||||
<u--input placeholder="请输入手机号" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="form-item"> |
|
||||
<view class="inputBox my"> |
|
||||
<u--input placeholder="请输入验证码" border="none" clearable style="height: 100%;" :clearable="false" v-model="FormData.code"></u--input> |
|
||||
</view> |
|
||||
<view class="code" @click='goSms' :class="{active: isPhone&&!codeOn}">{{codeText}}</view> |
|
||||
</view> |
|
||||
<view class="loginBtn" :class="{active: btnHighlight}" @click="submitFn">登 录</view> |
|
||||
<view style="margin-top: 40rpx;"> |
|
||||
<privacyRadion :isCheck="isCheck" @changeRadio="changeRadio"></privacyRadion> |
|
||||
</view> |
|
||||
<!-- <button @click="$goPage('/pages/userCenter/login/face')">进入人脸识别</button> --> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { getLoginCode, loginSMS } from '@/config/api.js' |
|
||||
import privacyRadion from './comp/privacyRadion.vue' |
|
||||
import { imgUrl } from '@/config/site.config' |
|
||||
export default { |
|
||||
components: {privacyRadion}, |
|
||||
data() { |
|
||||
return { |
|
||||
imgUrl: imgUrl+'loginTopBg.png', |
|
||||
backgroundSize: '100% 360rpx', |
|
||||
isCheck:false, |
|
||||
codeText: '获取验证码', |
|
||||
FormData: {}, |
|
||||
codeOn: false, |
|
||||
bgColor: 'transparent' |
|
||||
} |
|
||||
}, |
|
||||
onLoad(options) { |
|
||||
this.isCheck = options.isCheck=='true'?true:false |
|
||||
}, |
|
||||
computed: { |
|
||||
isPhone() { |
|
||||
return uni.$u.test.mobile(this.FormData.phone) |
|
||||
}, |
|
||||
btnHighlight() { |
|
||||
return this.isPhone&&uni.$u.test.code(this.FormData.code, 4) |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 是否选择协议 |
|
||||
changeRadio(val) { |
|
||||
this.isCheck = val |
|
||||
}, |
|
||||
// 发送短信验证码 |
|
||||
goSms() { |
|
||||
const { |
|
||||
FormData |
|
||||
} = this |
|
||||
if (!FormData.phone) return this.$u.toast('请输入手机号'); |
|
||||
if (!this.isPhone) return this.$u.toast('手机号格式有误'); |
|
||||
if (this.codeOn) return |
|
||||
this.codeOn = true; |
|
||||
getLoginCode({ |
|
||||
scene: 1, |
|
||||
mobile: FormData.phone, |
|
||||
}).then(()=>{ |
|
||||
var time = 30; |
|
||||
this.codeText = time + "秒后重新发送" |
|
||||
var timer = setInterval(() => { |
|
||||
time--; |
|
||||
this.codeText = time + "秒后重新发送" |
|
||||
if (time == 0) { |
|
||||
clearInterval(timer); |
|
||||
this.codeText = "获取验证码"; |
|
||||
this.codeOn = false; |
|
||||
} |
|
||||
}, 1000); |
|
||||
}).catch(()=>{ |
|
||||
this.codeOn = false; |
|
||||
}) |
|
||||
// 获取验证码 |
|
||||
|
|
||||
}, |
|
||||
async submitFn() { |
|
||||
if(!this.btnHighlight) return |
|
||||
if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策'); |
|
||||
let obj = { |
|
||||
mobile: this.FormData.phone, |
|
||||
code: this.FormData.code |
|
||||
} |
|
||||
const res = await loginSMS(obj) |
|
||||
this.$store.commit('update_vuex_loginInfo',res.data) |
|
||||
this.$store.dispatch('getUserInfo') |
|
||||
// this.$goPage('/pages/userCenter/login/face') |
|
||||
uni.switchTab({ |
|
||||
url: '/pages/tabbar/index/index' |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
.main { |
|
||||
width: 100%; |
|
||||
min-height: 100vh; |
|
||||
// background: url('../../../static/images/userCenter/loginTopBg.png') no-repeat; |
|
||||
// background-size: 100% 360rpx; |
|
||||
.u-back-top { |
|
||||
padding: 32rpx 0 0 0; |
|
||||
.backBox { |
|
||||
padding: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.title { |
|
||||
font-size: 48rpx; |
|
||||
color: #333; |
|
||||
padding: 202rpx 0 80rpx 0; |
|
||||
text-align: center; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.form { |
|
||||
padding: 0 46rpx; |
|
||||
.form-item { |
|
||||
height: 112rpx; |
|
||||
background: #F4F7FF; |
|
||||
border-radius: 16rpx; |
|
||||
width: 100%; |
|
||||
line-height: 112rpx; |
|
||||
display: flex; |
|
||||
margin-bottom: 40rpx; |
|
||||
padding: 0 40rpx; |
|
||||
.prefix { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 32rpx; |
|
||||
color: #333; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.inputBox { |
|
||||
flex: 1; |
|
||||
} |
|
||||
.code { |
|
||||
color: #BBBBBB; |
|
||||
margin-left: 30rpx; |
|
||||
&.active { |
|
||||
color: $themC |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.loginBtn { |
|
||||
width: 100%; |
|
||||
height: 112rpx; |
|
||||
background: rgba(25,137,250,0.3); |
|
||||
border-radius: 16rpx; |
|
||||
text-align: center; |
|
||||
line-height: 112rpx; |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
color: #fff; |
|
||||
margin-top: 100rpx; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,1); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</style> |
|
After Width: 28 | Height: 28 | Size: 624 B |
After Width: 56 | Height: 56 | Size: 2.8 KiB |
After Width: 28 | Height: 28 | Size: 597 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue