21 changed files with 1297 additions and 68 deletions
-
41api/index.js
-
32pages.json
-
25pages/application/entry.vue
-
564pages/application/fillRegistInfo.vue
-
363pages/application/payment.vue
-
36pages/application/registrationPhone.vue
-
167pages/application/success.vue
-
7pages/index/comp/list.vue
-
56pages/index/index.vue
-
14pages/payRecords/payRecords.vue
-
5pages/schoolDetails/comp/tabCon.vue
-
2pages/schoolDetails/details.vue
-
43pages/user/privacyAgreement/privacyAgreement.vue
-
BINstatic/images/idcardA.png
-
BINstatic/images/idcardB.png
-
BINstatic/images/jiaofei_zfbIphone@2x.png
-
BINstatic/images/jiaofei_zhifu_selectIphone@2x.png
-
BINstatic/images/jiaofei_zhifu_unselectIphone@2x.png
-
BINstatic/images/third_icon_success@2x.png
-
BINstatic/images/third_img_fail@2x.png
-
8store/index.js
@ -0,0 +1,564 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<u-form :model="form" ref="uForm" :label-width="'auto'"> |
|||
<u-form-item label="驾校名称" > |
|||
<view class="tar"> |
|||
{{currentSchool.schoolName}} |
|||
</view> |
|||
</u-form-item> |
|||
<u-form-item label="学驾车型" prop="classModel" required > |
|||
<view @click="showDriveModels=true" class="select_row" > |
|||
<u-input v-model="form.classModel" input-align="right" placeholder="请选择" disabled @click="showDriveModels=true" /> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
<u-form-item label="班型" prop="classModel" required > |
|||
<view @click="showDriveModels=true" class="select_row" > |
|||
<u-input v-model="form.trainingClassLable" input-align="right" placeholder="请选择" disabled @click="showDriveModels=true" /> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
|
|||
<view class="line"></view> |
|||
|
|||
<u-form-item label="业务类型" required prop="businessTypeName" > |
|||
<view class="tag_row"> |
|||
<view class="tag" v-for="(item, index) in businessTypeArr" :key="index" @click="form.businessType=item.id" :class="{active: item.id==form.businessType}">{{item.name}}</view> |
|||
</view> |
|||
</u-form-item> |
|||
|
|||
<!-- <view :class="{line: !form.businessType}"></view> --> |
|||
|
|||
<view class="" v-if="form.businessType==1"> |
|||
|
|||
<!-- <u-form-item label="原驾驶证号" required > |
|||
<u-input v-model="form.certificateCodeShow" disabled input-align="right" placeholder="" disabled/> |
|||
</u-form-item> --> |
|||
<u-form-item label="驾驶证初领日期" required > |
|||
<view @click="showFirstLicenceTime=true" class="select_row"> |
|||
<u-input v-model="form.firstLicenceTime" disabled input-align="right" placeholder="请选择" @click="showFirstLicenceTime=true"/> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
<u-form-item label="原准驾车型" required> |
|||
<view @click="showOldDriveModel=true" class="select_row"> |
|||
<u-input v-model="form.oldDriveModel" disabled input-align="right" placeholder="请选择" @click="showOldDriveModel=true"/> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
<view class="line"></view> |
|||
</view> |
|||
<view :class="{line: !form.businessType}"></view> |
|||
<u-form-item label="异地转入" required prop="businessTypeName" > |
|||
<view class="tag_row" @click="transfer=!transfer"> |
|||
<view class="tag" :class="{active: transfer}">是</view> |
|||
<view class="tag" :class="{active: !transfer}">否</view> |
|||
</view> |
|||
</u-form-item> |
|||
<view class="" v-if="transfer"> |
|||
<u-form-item label="转出城市" prop="coachName" > |
|||
<view @click="showDriveModels=true" class="select_row" > |
|||
<u-input v-model="form.value" input-align="right" placeholder="请选择" disabled @click="showDriveModels=true" /> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
<u-form-item label="已学科目" prop="coachName" > |
|||
<view @click="showDriveModels=true" class="select_row" > |
|||
<u-input v-model="form.value" input-align="right" placeholder="请选择" disabled @click="showDriveModels=true" /> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
</view> |
|||
|
|||
<view class="h2"> |
|||
学员信息 <text>请准确填写学员真实信息</text> |
|||
</view> |
|||
|
|||
<u-form-item label="头 像" > |
|||
<view @click="chooseImages" class="select_row" > |
|||
<view class="avatar"> |
|||
<image :src="form.avatar" mode=""></image> |
|||
</view> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
<u-form-item label="姓 名" > |
|||
<u-input placeholder="请填写" input-align="right"></u-input> |
|||
</u-form-item> |
|||
<u-form-item label="性 别" > |
|||
<view @click="showDriveModels=true" class="select_row" > |
|||
<u-input v-model="form.classModel" input-align="right" placeholder="请选择" disabled @click="showDriveModels=true" /> |
|||
<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon> |
|||
</view> |
|||
</u-form-item> |
|||
<u-form-item label="国 籍" prop="coachName" > |
|||
<view class="tar">中国</view> |
|||
</u-form-item> |
|||
<u-form-item label="证件类型" prop="coachName" > |
|||
<view class="tar">身份证</view> |
|||
</u-form-item> |
|||
<u-form-item label="证件号码" prop="coachName" > |
|||
<view class="tar"> |
|||
<u-input placeholder="请输入证件号码" input-align="right"></u-input> |
|||
</view> |
|||
</u-form-item> |
|||
<view class="idcardBox"> |
|||
<view class="idcard"> |
|||
<image src="@/static/images/idcardA.png" mode="widthFix"></image> |
|||
</view> |
|||
<view class="idcard"> |
|||
<image src="@/static/images/idcardB.png" mode="widthFix"></image> |
|||
</view> |
|||
</view> |
|||
<view class="line"></view> |
|||
<view class="remark"> |
|||
<view class="h3">备注</view> |
|||
<view class="remarkInput"> |
|||
<u-input v-model="form.value" type="textarea" :border="false" :auto-height="true" :height="176"/> |
|||
</view> |
|||
</view> |
|||
</u-form> |
|||
|
|||
<view class="footBox"> |
|||
<view class="leftCon"> |
|||
<view class="row1"> |
|||
<view class="lab">总额：</view> |
|||
<view class="redPrice"> |
|||
<text>￥</text>266.00 |
|||
</view> |
|||
<view class="oldPrice">300.00</view> |
|||
</view> |
|||
<view class="redTxt">享9.5折，已减271元！</view> |
|||
</view> |
|||
<view class="rightBtn" @click="$goPage('/pages/application/payment')">下一步</view> |
|||
</view> |
|||
|
|||
<!-- 车型 --> |
|||
<u-picker mode="selector" v-model="showDriveModels" :range="selectorDriveModels" @confirm="confirmDriveModels"></u-picker> |
|||
<!-- 班型 --> |
|||
<u-picker mode="selector" v-model="showTrainingClasss" :range="selectorTrainingClasss" range-key="className" @confirm="confirmTrainingClasss"></u-picker> |
|||
<!-- 原驾驶证初领日期 --> |
|||
<u-picker mode="time" v-model="showFirstLicenceTime" @confirm="confirmFirstLicenceTime" :params="paramsPicker"></u-picker> |
|||
|
|||
<!-- 原驾驶证学驾车型 --> |
|||
<u-popup v-model="showOldDriveModel" mode="bottom"> |
|||
<view class="carBox"> |
|||
<view class="carh1">学驾车型</view> |
|||
<view v-for="(item,index) in carTypeArr" :key="index" class="carLi"> |
|||
<view class="carType">{{item.lab}}</view> |
|||
<view class="carName_row"> |
|||
<view class="carName" v-for="(item2,index2) in item.arr" :key="index2" @click="pickerCarClick(item2)" :class="{active: pickerCarArr.indexOf(item2) > -1}">{{item2}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="payBtn_row"> |
|||
<view class="payBtn border" @click="pickerCar()">重置</view> |
|||
<view class="payBtn" @click="pickerCar(1)">完成</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import indexApi from '@/api/index.js' |
|||
import {mapState} from 'vuex' |
|||
import { APP_API, APP_HOST } from '@/site.config.js'; |
|||
const _url = APP_HOST + APP_API + '/util/manage/uploadFile.do'; |
|||
export default { |
|||
|
|||
computed: { |
|||
...mapState(['currentSchool','classChooseItem']), |
|||
// 该函数内部运行的返回值大致为：{num: () => this.$store.state.num, school: () => this.$store.state.school} |
|||
}, |
|||
data() { |
|||
return { |
|||
transfer: false, |
|||
showDriveModels: false, |
|||
showTrainingClasss: false, |
|||
showFirstLicenceTime: false, |
|||
showOldDriveModel: false, |
|||
form: { |
|||
classModel: '', |
|||
trainingClassLable: '', |
|||
businessType: 0, |
|||
firstLicenceTime: '', |
|||
avatar: [],//上传头像 |
|||
}, |
|||
info: {}, |
|||
selectorTrainingClasss: [],//班型数据 |
|||
selectorDriveModels: [],//车型数据 |
|||
businessTypeArr: [ |
|||
{name: '初领', id: 0}, |
|||
{name: '增领', id: 1} |
|||
], |
|||
carTypeArr: [ |
|||
{lab: '小车',arr: ['C1','C2','C3']}, |
|||
{lab: '货车',arr: ['A2','B2',]}, |
|||
{lab: '客车',arr: ['A1','B3','B1']}, |
|||
{lab: '摩托车',arr: ['D','E','F']}, |
|||
{lab: '其它',arr: ['C4','C5','C6']}, |
|||
], |
|||
pickerCarArr: [], |
|||
paramsPicker: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
}, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// totalPrice trainingClassId |
|||
this.createTrainingApplySimpleFn() |
|||
this.form.classModel = this.classChooseItem.className |
|||
this.form.trainingClassLable = this.classChooseItem.classModel |
|||
}, |
|||
methods: { |
|||
// 选择原驾驶证学驾车型 |
|||
pickerCarClick(item) { |
|||
let index = this.pickerCarArr.indexOf(item) |
|||
if(index>-1) { |
|||
this.pickerCarArr.splice(index, 1); |
|||
}else { |
|||
this.pickerCarArr.push(item) |
|||
} |
|||
}, |
|||
// 选择原驾驶证学驾车型 点击重置或确定 |
|||
pickerCar(num) { |
|||
if(num==1) { |
|||
if(!this.pickerCarArr.length) return this.$u.toast('请选择学驾车型') |
|||
this.form.oldDriveModel = this.pickerCarArr.join('') |
|||
this.showOldDriveModel = false |
|||
}else { |
|||
this.pickerCarArr = [] |
|||
this.form.oldDriveModel = '' |
|||
} |
|||
}, |
|||
// 选择原驾驶证初领日期 |
|||
confirmFirstLicenceTime(val) { |
|||
let str = val.year+'-'+val.month+'-'+val.day |
|||
this.form.firstLicenceTime = str |
|||
console.log(val) |
|||
}, |
|||
// 选择车型 |
|||
async confirmDriveModels(i) { |
|||
let index = i[0] |
|||
this.form.classModel = this.selectorDriveModels[index] |
|||
this.form.trainingClassLable = '' |
|||
await this.queryTrainingClasssFn() |
|||
this.showTrainingClasss = true |
|||
|
|||
}, |
|||
// 选择班型 |
|||
confirmTrainingClasss(i) { |
|||
let index = i[0] |
|||
let item = this.selectorTrainingClasss[index] |
|||
this.form.trainingClassId = item.trainingClassId |
|||
this.form.trainingClassLable = item.className |
|||
this.totalPrice = item.totalPrice |
|||
|
|||
}, |
|||
// 获取班型 |
|||
async queryTrainingClasssFn() { |
|||
if(!this.info.trainingSchoolId) return |
|||
let obj = {pageSize: 20,pageIndex: 1,trainingSchoolId: this.info.trainingSchoolId,} |
|||
if(this.form.classModel) obj.classModel = this.form.classModel |
|||
const [nulls, res] = await indexApi.querySimpleTrainingClasssByModel(obj) |
|||
this.selectorTrainingClasss = res.data |
|||
console.log('获取班型') |
|||
console.log(res) |
|||
}, |
|||
// 获取学驾车型 |
|||
async queryDriveModelsFn() { |
|||
if(!this.info.trainingSchoolId) return |
|||
const [nulls, res] = await indexApi.queryDriveModels({trainingSchoolId: this.info.trainingSchoolId}) |
|||
this.selectorDriveModels = res.data |
|||
console.log('学驾车型') |
|||
console.log(res) |
|||
}, |
|||
// 查询状态 |
|||
async getTrainingApplyDetailsFn() { |
|||
console.log(this.trainingApplyId) |
|||
const [nulls, res] = await indexApi.getTrainingApplyDetails({trainingApplyId: this.trainingApplyId}) |
|||
this.info = res.data |
|||
console.log('整体状态控制***************') |
|||
console.log(res) |
|||
console.log(nulls) |
|||
if(this.info.checkStatus==1) this.stepIcon = 1 //按顺序：体检，面签，1为完成，0-未完成 |
|||
if(this.info.applyStatus==1) this.currentIndex = this.stepIcon = 3//0-预报名，1-已报名，2-已支付,3-已学完 |
|||
if(this.info.applyStatus==1&&this.info.contractStatus<2) this.showSignPopup = true |
|||
if(this.info.contractStatus==2) this.currentIndex = 5 |
|||
if(this.info.contractStatus==2&&this.info.applyStatus==1) { |
|||
if(!this.info.trainingOrderId) { |
|||
this.createOrder() |
|||
}else { |
|||
uni.redirectTo({ |
|||
url: '/pages/learnDriveStep/payMoney/payMoney?trainingOrderId='+ this.info.trainingOrderId + '&trainingApplyId='+ this.trainingApplyId |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
// 第一步先报名 |
|||
async createTrainingApplySimpleFn() { |
|||
let trainingSchoolId = this.$store.state.currentSchool.trainingSchoolId |
|||
let trainingClassId = this.$store.state.classChooseItem.trainingClassId |
|||
const [nulls, res] = await indexApi.createTrainingApplySimple({trainingSchoolId, trainingClassId}) |
|||
if(res.code==0) { |
|||
this.trainingOrderId = res.data |
|||
}else if(res.code==502) { |
|||
// 已经报名过这个学校了 存在未支付订单 |
|||
this.$u.toast(res.message) |
|||
} |
|||
}, |
|||
//选择图片 |
|||
chooseImages(type) { |
|||
uni.chooseImage({ |
|||
count: 1, //允许选择的数量 |
|||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|||
sourceType: ['album', 'camera'], //从相册选择 |
|||
success: res => { |
|||
// console.log(res) |
|||
uni.showLoading({ |
|||
title: '图片上传中...' |
|||
}); |
|||
|
|||
this.uploadImgApi(res.tempFilePaths[0]) |
|||
} |
|||
}) |
|||
}, |
|||
uploadImgApi(filePath) { |
|||
console.log(filePath) |
|||
let _this = this |
|||
// 上传图片到服务器 |
|||
uni.uploadFile({ |
|||
url: _url,//接口 |
|||
filePath: filePath,//要上传的图片的本地路径 |
|||
name: 'file', |
|||
|
|||
formData: { |
|||
fileType: 1, |
|||
fileSuffix: "png" |
|||
}, |
|||
header: { |
|||
token: uni.getStorageSync("Authorization") || '', |
|||
}, |
|||
success(res) { |
|||
console.log(res) |
|||
console.log('上传成功') |
|||
let res2 = JSON.parse(res.data) |
|||
console.log(res2) |
|||
if(res2.code==0) { |
|||
_this.form.avatar = res2.data |
|||
} |
|||
uni.hideLoading(); |
|||
}, |
|||
complete: ()=> {} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
width: 100%; |
|||
padding: 0 32rpx 100rpx 32rpx; |
|||
background: #fff; |
|||
} |
|||
.payBtn_row { |
|||
width: 100%; |
|||
padding: 20rpx 46rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
border-top: 1px solid #ededed; |
|||
.payBtn { |
|||
width: 48%; |
|||
line-height: 96rpx; |
|||
color: #fff; |
|||
height: 96rpx; |
|||
background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); |
|||
border-radius: 49rpx; |
|||
text-align: center; |
|||
&.border { |
|||
border: 2rpx solid rgba(53, 147, 251, 1); |
|||
color: #1989FA; |
|||
background: #fff; |
|||
} |
|||
} |
|||
} |
|||
.select_row { |
|||
display: flex;justify-content: flex-end;width: 100%; |
|||
} |
|||
.avatar { |
|||
width: 96rpx; |
|||
height: 96rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
.idcardBox { |
|||
display: flex; |
|||
padding: 42rpx 0 28rpx 0; |
|||
.idcard { |
|||
flex: 1; |
|||
padding: 0 10rpx; |
|||
} |
|||
} |
|||
.h2 { |
|||
width: 100vw; |
|||
margin-left: -32rpx; |
|||
height: 96rpx; |
|||
background: #F6F7F8; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
line-height: 96rpx; |
|||
padding: 0 32rpx; |
|||
text { |
|||
font-size: 28rpx; |
|||
color: #686B73; |
|||
padding: 0 0 0 8rpx; |
|||
} |
|||
} |
|||
.line { |
|||
height: 20rpx; |
|||
width: 100vw; |
|||
background-color: #f7f7f7; |
|||
margin: -1px 0 0 -32rpx; |
|||
} |
|||
.tar { |
|||
text-align: right; |
|||
width: 100%; |
|||
} |
|||
.tag_row { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: flex-end; |
|||
// padding-top: 15rpx; |
|||
.tag { |
|||
width: 88rpx; |
|||
height: 56rpx; |
|||
background: #F6F7F8; |
|||
border-radius: 28rpx; |
|||
font-size: 28rpx; |
|||
color: #686B73; |
|||
margin-left: 12rpx; |
|||
text-align: center; |
|||
line-height: 56rpx; |
|||
&.active { |
|||
background: #EDF8FE; |
|||
border: 1rpx solid #3593FB; |
|||
color: #1989FA; |
|||
} |
|||
} |
|||
} |
|||
.remark{ |
|||
padding-bottom: 80rpx; |
|||
.remarkInput { |
|||
width: 100%; |
|||
padding: 12rpx 32rpx; |
|||
border-radius: 8rpx; |
|||
background: #F6F7F8; |
|||
} |
|||
.h3 { |
|||
height: 108rpx; |
|||
line-height: 108rpx; |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
.footBox { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 128rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: inset 0px 1px 0px 0px #E8E9EC; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.leftCon { |
|||
flex: 1; |
|||
width: 0; |
|||
.row1 { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
.lab { |
|||
color: #333; |
|||
} |
|||
|
|||
.redPrice { |
|||
color: #E63633; |
|||
text { |
|||
font-size: 28rpx; |
|||
} |
|||
font-size: 40rpx; |
|||
} |
|||
|
|||
.oldPrice { |
|||
color: #686B73; |
|||
text-decoration: line-through; |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.redTxt { |
|||
color: #E63633; |
|||
// margin-top: 8rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.rightBtn { |
|||
width: 216rpx; |
|||
height: 96rpx; |
|||
background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); |
|||
border-radius: 50rpx; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 96rpx; |
|||
} |
|||
} |
|||
|
|||
.carBox { |
|||
width: 100%; |
|||
.carh1 { |
|||
font-size: 26rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
padding: 30rpx 0 0 0; |
|||
} |
|||
.carLi { |
|||
width: 100%; |
|||
margin-bottom: 30rpx; |
|||
padding: 0 32rpx; |
|||
} |
|||
.carType { |
|||
font-size: 26rpx; |
|||
font-weight: 500; |
|||
line-height: 40rpx; |
|||
padding: 28rpx 12rpx 12rpx 0; |
|||
} |
|||
.carName_row { |
|||
display: flex; |
|||
.carName { |
|||
margin-right: 40rpx; |
|||
width: 88rpx; |
|||
height: 56rpx; |
|||
background: #F6F7F8; |
|||
border-radius: 28rpx; |
|||
line-height: 56rpx; |
|||
text-align: center; |
|||
color: #686B73; |
|||
&.active { |
|||
background: #ECF7FE; |
|||
border: 1px solid #3593FB; |
|||
color: #1989FA; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,363 @@ |
|||
<template> |
|||
<view class="payMoney pageBg"> |
|||
<view class="topCon"> |
|||
<view class="price"> |
|||
<text>￥</text> {{ $u.utils.priceTo(info.balance) }} |
|||
</view> |
|||
<view class="schoolName"> |
|||
{{ info.schoolName}} |
|||
</view> |
|||
</view> |
|||
<view class="cardInfoPadding"> |
|||
<view class="cardInfo"> |
|||
<view class="flex-box-s"> |
|||
<text>学车类型</text> |
|||
<text>{{ info.trainingModel}}</text> |
|||
</view> |
|||
<view class="flex-box-s"> |
|||
<text>学车班型</text> |
|||
<text>{{info.trainingClassName}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="payWay"> |
|||
<view class="zfb" @click="changePayWay(2)"> |
|||
<view class="leftCon"> |
|||
<view class="icon"> |
|||
<image src="@/static/images/jiaofei_zfbIphone@2x.png" mode=""></image> |
|||
</view> |
|||
<view class="text"> |
|||
支付宝支付 |
|||
</view> |
|||
<!-- <view class="recommendIcon"> |
|||
<image src="@/static/images/icon/third_img_tuijianIphone@2x.png" mode=""></image> |
|||
</view> --> |
|||
</view> |
|||
<view class="rightStatusIcon"> |
|||
<image src="@/static/images/jiaofei_zhifu_selectIphone@2x.png" mode="" v-if="payWay==2"> |
|||
</image> |
|||
<image src="@/static/images/jiaofei_zhifu_unselectIphone@2x.png" mode="" v-else></image> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="payBtnBox"> |
|||
<view class="payBtn bgLinear" @click="goPay">确认支付</view> |
|||
<!-- <oneBtn text="确认支付" @oneBtnClick="goPay"></oneBtn> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import indexApi from '@/api/index.js' |
|||
let polling = null |
|||
let timerNum = 0 |
|||
export default { |
|||
data() { |
|||
return { |
|||
info: { |
|||
schoolName: '翔力驾校', |
|||
balance: 120, |
|||
}, |
|||
payInfo: {}, |
|||
isPoll: false |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.getChangeModelDetailsFn() |
|||
|
|||
}, |
|||
|
|||
onShow() { |
|||
// 判断是否要轮询 |
|||
if(this.isPoll) this.isPoll() |
|||
}, |
|||
|
|||
methods: { |
|||
// 轮询 |
|||
async getPrepaidResultFn() { |
|||
const [err, res] = await learnDriveApi.getChangeModelPrepaidResult({outTradeNo: this.payInfo.outTradeNo}) |
|||
if(res.code==0) { |
|||
uni.switchTab({ |
|||
url: '/pages/tabbar/userCenter/userCenter' |
|||
}) |
|||
} |
|||
console.log(res) |
|||
}, |
|||
|
|||
|
|||
// 切换支付方式 |
|||
changePayWay(num) { |
|||
this.payWay = num |
|||
}, |
|||
// car://paymoney/carstep:8888 |
|||
// zlxcpay:// |
|||
// 创建培训费支付 |
|||
async createPrepaidFn() { |
|||
const latLng = await this.$u.utils.getLocation() |
|||
let obj = { |
|||
clientIp: '127.0.0.1', |
|||
deviceId: 'IMEI', |
|||
deviceType: '1', |
|||
ipType: '04', |
|||
riskType: '01', |
|||
verifyRt: '01', |
|||
verifyTp: '01', |
|||
latitude: latLng.lat, |
|||
longitude: latLng.lng, |
|||
payType: this.payWay, |
|||
fromAppurl: 'paymoney://car:8898/carstep', |
|||
trainingOrderId: this.info.trainingOrderId, |
|||
} |
|||
console.log(obj) |
|||
const [err, res] = await businessHanldApi.createChangeModelPrepaid(obj) |
|||
if(res.code==0) { |
|||
this.payInfo = res.data |
|||
}else { |
|||
uni.hideLoading() |
|||
this.$u.toast(res.message) |
|||
return false |
|||
} |
|||
console.log('this.payInfo支付信息') |
|||
console.log(res) |
|||
}, |
|||
// 点击去支付培训费 |
|||
async goPay() { |
|||
this.$goPage('/pages/application/success') |
|||
uni.showLoading({ |
|||
title: '创建订单...' |
|||
}) |
|||
await this.createPrepaidFn() |
|||
this.zfbPay() |
|||
// if(this.payInfo.appURL) { |
|||
// if (this.payWay == 1) { |
|||
// this.wxPay() |
|||
// } else { |
|||
// } |
|||
// } |
|||
|
|||
}, |
|||
// 轮询定时 |
|||
pollFn() { |
|||
polling = setInterval(async ()=>{ |
|||
timerNum ++ |
|||
if(timerNum>30) { |
|||
clearInterval(polling) |
|||
polling = null |
|||
} |
|||
await this.getPrepaidResultFn() |
|||
},1000) |
|||
|
|||
}, |
|||
zfbPay() { |
|||
uni.hideLoading() |
|||
let url = encodeURIComponent(this.payInfo.appURL) |
|||
this.isPoll = true |
|||
let urls = `alipays://platformapi/startapp?appId=10000007&qrcode=${url}` |
|||
console.log('支付宝路径') |
|||
console.log(this.payInfo.appURL) |
|||
console.log(urls) |
|||
|
|||
// #ifdef APP-PLUS |
|||
plus.runtime.openURL(urls) |
|||
// #endif |
|||
|
|||
// #ifdef H5 |
|||
window.open(urls) |
|||
// #endif |
|||
|
|||
|
|||
}, |
|||
wxPay() { |
|||
this.isPoll = true |
|||
// #ifdef APP-PLUS |
|||
this.sweixin ? this.sweixin.launchMiniProgram({ |
|||
// path: '/pages/payment/payment?paymoney='+this.info.price+'&ordersn='+this.payInfo.outTradeNo+'&tokenCode='+ this.payInfo.tokenCode, //跳转小程序页面路径 pages/index/index |
|||
path: '/pages/payment/payment?tokenCode=' + this.payInfo.tokenCode, //跳转小程序页面路径 pages/index/index |
|||
type: 0, //可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。 |
|||
id: 'gh_012fd4bda1c2' //小程序的原始id |
|||
}) : plus.nativeUI.alert('当前环境不支持微信操作!'); |
|||
// #endif |
|||
|
|||
|
|||
uni.hideLoading() |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.payMoney { |
|||
min-height: 100vh; |
|||
.topCon { |
|||
text-align: center; |
|||
padding: 116rpx 0 72rpx 0; |
|||
.price { |
|||
font-size: 56rpx; |
|||
color: #E63633; |
|||
|
|||
text { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.schoolName { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
.cardInfoPadding { |
|||
padding: 20rpx 32rpx; |
|||
} |
|||
.cardInfo { |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 0 16px; |
|||
.flex-box-s { |
|||
height: 120rpx; |
|||
line-height: 120rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
&:last-child { |
|||
border-top: 1px solid #f7f7f7; |
|||
} |
|||
text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
.payWay { |
|||
padding: 0 32rpx; |
|||
|
|||
.otherWay { |
|||
display: flex; |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 0 16px; |
|||
height: 120rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.txt { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
.icon { |
|||
width: 20rpx; |
|||
height: 12rpx; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
} |
|||
margin-left: 16rpx; |
|||
} |
|||
} |
|||
.zfb { |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 0 16px; |
|||
height: 120rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.leftCon { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.icon { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
|
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
margin: 0 10rpx 0 20rpx; |
|||
} |
|||
|
|||
.recommendIcon { |
|||
width: 64rpx; |
|||
height: 34rpx; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.rightStatusIcon { |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
|
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.payBtnBox { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100vw; |
|||
height: 128rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px -1px 0px 0px #E8E9EC; |
|||
|
|||
.payBtn { |
|||
width: 100%; |
|||
height: 96rpx; |
|||
background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); |
|||
border-radius: 50rpx; |
|||
line-height: 96rpx; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
|
|||
.footBox { |
|||
display: flex; |
|||
padding: 0 32rpx; |
|||
justify-content: space-between; |
|||
.btn { |
|||
width: 48%; |
|||
height: 98rpx; |
|||
background: #2168FC; |
|||
border-radius: 16rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 98rpx; |
|||
&.border { |
|||
background: none; |
|||
border: 1px solid #2168FC; |
|||
color: #2168FC; |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<view class="top_row"> |
|||
<view class="logo"> |
|||
<image src="@/static/images/logo.png" mode=""></image> |
|||
</view> |
|||
<view class="text">浙里学车APP</view> |
|||
<view class="btnSmall">立即下载</view> |
|||
</view> |
|||
<view class="slog"> |
|||
<view class="iconImg"> |
|||
<image src="@/static/images/third_icon_success@2x.png" mode=""></image> |
|||
</view> |
|||
<view class="h3">恭喜您，报名成功！</view> |
|||
<view class="tps">开启您的学车之旅吧</view> |
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="h1">下载【浙里学车】</view> |
|||
<view class="text"> |
|||
1.分配专属教练；<br/> |
|||
2.跟踪学车进度；<br/> |
|||
3.科目一理论学习；<br/> |
|||
4查看下载签约合同。 |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="payBtnBox"> |
|||
<view class="payBtn bgLinear" @click="goPay">确认支付</view> |
|||
<!-- <oneBtn text="确认支付" @oneBtnClick="goPay"></oneBtn> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import indexApi from '@/api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getLastVersionFn() |
|||
}, |
|||
methods: { |
|||
async getLastVersionFn() { |
|||
let platform = uni.getSystemInfoSync().platform; |
|||
let appType = platform == 'android'?1:2 |
|||
console.log(platform) |
|||
const [err, res] = await indexApi.getLastVersion({appType, version:'1.0.0'}) |
|||
console.log(res) |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
width: 100%; |
|||
padding-bottom: 128rpx; |
|||
.top_row { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 112rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 2rpx 0px 0px #E8E9EC, 0px 6px 12px 0px rgba(232,233,236,0.4); |
|||
align-items: center; |
|||
padding: 0 32rpx; |
|||
.logo { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 36rpx; |
|||
color: #333; |
|||
padding: 0 0 0 16rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.btnSmall { |
|||
width: 144rpx; |
|||
height: 56rpx; |
|||
border: 2rpx solid rgba(53, 147, 251, 1); |
|||
// border-image: linear-gradient(180deg, rgba(53, 147, 251, 1), rgba(83, 211, 229, 1)) 2 2; |
|||
border-radius: 36rpx; |
|||
font-size: 28rpx; |
|||
color: #1989FA; |
|||
line-height: 56rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.slog { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 90rpx 0 74rpx 0; |
|||
.iconImg { |
|||
width: 96rpx; |
|||
height: 96rpx; |
|||
} |
|||
|
|||
.h3 { |
|||
font-size: 36rpx; |
|||
color: #373A43; |
|||
margin: 32rpx 0 22rpx 0; |
|||
} |
|||
|
|||
.tps { |
|||
font-size: 28rpx; |
|||
color: #696B72; |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
width: 80%; |
|||
height: 374rpx; |
|||
background: #fff; |
|||
border-radius: 32rpx; |
|||
margin: 0 auto; |
|||
padding: 48rpx; |
|||
.h1 { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
padding: 16rpx 0; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.5em; |
|||
br { |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.payBtnBox { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100vw; |
|||
height: 128rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px -1px 0px 0px #E8E9EC; |
|||
|
|||
.payBtn { |
|||
width: 100%; |
|||
height: 96rpx; |
|||
background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); |
|||
border-radius: 50rpx; |
|||
line-height: 96rpx; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,43 +0,0 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<web-view :src="url"></web-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import userApi from '@/api/user.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
type: 1, |
|||
url: '' |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.type = options.type |
|||
if(this.type==1) { |
|||
uni.setNavigationBarTitle({ |
|||
title: '浙里学车隐私政策' |
|||
}) |
|||
}else { |
|||
uni.setNavigationBarTitle({ |
|||
title: '用户使用协议' |
|||
}) |
|||
} |
|||
this.getAgreementFn() |
|||
}, |
|||
methods: { |
|||
async getAgreementFn() { |
|||
const [nulls, res] = await userApi.getAgreement() |
|||
if(this.type==1) { |
|||
this.url = res.data.privacyAgreementUrl |
|||
}else { |
|||
this.url = res.data.useAgreementUrl |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
|
After Width: 522 | Height: 336 | Size: 64 KiB |
|
After Width: 522 | Height: 336 | Size: 56 KiB |
|
After Width: 48 | Height: 48 | Size: 2.1 KiB |
|
After Width: 42 | Height: 42 | Size: 2.1 KiB |
|
After Width: 43 | Height: 43 | Size: 4.4 KiB |
|
After Width: 96 | Height: 96 | Size: 4.7 KiB |
|
After Width: 400 | Height: 274 | Size: 112 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue