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
-
10pages/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