<template>
|
<view class="driver-cert-page">
|
<view class="driver-cert-page__steps">
|
<view class="driver-cert-page__step"
|
:class="{ 'driver-cert-page__step--active': currentStep === 1, 'driver-cert-page__step--done': currentStep > 1 }">
|
<view class="driver-cert-page__step-circle">
|
<view class="driver-cert-page__step-circle-inner">
|
<u-icon v-if="currentStep > 1" name="checkbox-mark" color="#ffffff" size="10"></u-icon>
|
</view>
|
</view>
|
<text class="driver-cert-page__step-text"
|
:class="{ 'driver-cert-page__step-text--active': currentStep === 1, 'driver-cert-page__step-text--done': currentStep > 1 }">基本信息</text>
|
</view>
|
|
<view class="driver-cert-page__step-line"></view>
|
|
<view class="driver-cert-page__step" :class="{ 'driver-cert-page__step--active': currentStep === 2 }">
|
<view class="driver-cert-page__step-circle"
|
:class="{ 'driver-cert-page__step-circle--inactive': currentStep !== 2 }">
|
<view class="driver-cert-page__step-circle-inner">{{ currentStep === 2 ? '' : '2' }}</view>
|
</view>
|
<text class="driver-cert-page__step-text"
|
:class="{ 'driver-cert-page__step-text--active': currentStep === 2 }">车辆信息</text>
|
</view>
|
</view>
|
|
<view class="driver-cert-page__scroll">
|
<view v-if="currentStep === 1" class="driver-cert-card">
|
<text class="driver-cert-card__title">基本信息</text>
|
<text class="driver-cert-card__mobile">注册手机号：{{ userInfo.telephone || '' }}</text>
|
|
<view class="driver-cert-card__field">
|
<text class="driver-cert-card__label">司机姓名</text>
|
<text class="driver-cert-card__required">*</text>
|
<input v-model="form.name" class="driver-cert-card__input" placeholder="请输入司机姓名"
|
placeholder-style="color: #b9bfc8;" />
|
</view>
|
|
<view class="driver-cert-card__field">
|
<text class="driver-cert-card__label">身份证号</text>
|
<text class="driver-cert-card__required">*</text>
|
<input type="idcard" maxlength="18" v-model="form.idcard" class="driver-cert-card__input" placeholder="请输入司机身份证号码"
|
placeholder-style="color: #b9bfc8;" />
|
</view>
|
|
<view class="driver-cert-card__field driver-cert-card__field--select">
|
<view class="driver-cert-card__field-head">
|
<text class="driver-cert-card__label">婚姻状况</text>
|
<text class="driver-cert-card__required">*</text>
|
</view>
|
<view class="driver-cert-card__selector" @click="showMaritalPicker = true">
|
<text class="driver-cert-card__selector-text" :style="{ color: form.maritalStatus !== '' ? '#333333' : '#b9bfc8' }">{{ getMaritalStatusText(form.maritalStatus) }}</text>
|
<text class="driver-cert-card__arrow">›</text>
|
</view>
|
</view>
|
|
<view class="driver-cert-card__field driver-cert-card__field--select">
|
<view class="driver-cert-card__field-head">
|
<text class="driver-cert-card__label">居住城市</text>
|
<text class="driver-cert-card__required">*</text>
|
</view>
|
<view class="driver-cert-card__selector" @click="showAreaPicker = true">
|
<text class="driver-cert-card__selector-text" :style="{ color: form.areaName ? '#333333' : '#b9bfc8' }">{{ form.areaName || '请选择省市区' }}</text>
|
<text class="driver-cert-card__arrow">›</text>
|
</view>
|
</view>
|
|
<view class="driver-cert-card__field">
|
<text class="driver-cert-card__label">详细地址</text>
|
<text class="driver-cert-card__required">*</text>
|
<input v-model="form.livePlace" class="driver-cert-card__input" placeholder="请输入详细居住地址"
|
placeholder-style="color: #b9bfc8;" />
|
</view>
|
|
<view class="driver-cert-card__field">
|
<text class="driver-cert-card__label">支付宝账号</text>
|
<text class="driver-cert-card__required">*</text>
|
<input v-model="form.aliAccount" class="driver-cert-card__input" placeholder="请输入收款支付宝账号"
|
placeholder-style="color: #b9bfc8;" />
|
</view>
|
|
<view class="driver-cert-card__field">
|
<text class="driver-cert-card__label">支付宝姓名</text>
|
<text class="driver-cert-card__required">*</text>
|
<input v-model="form.aliName" class="driver-cert-card__input" placeholder="请输入支付宝姓名"
|
placeholder-style="color: #b9bfc8;" />
|
</view>
|
|
<view class="driver-cert-card__upload-block">
|
<view class="driver-cert-card__upload-title-row">
|
<text class="driver-cert-card__label">身份证正反面</text>
|
<text class="driver-cert-card__required">*</text>
|
</view>
|
|
<view class="driver-cert-card__upload-list">
|
<view class="driver-cert-card__upload-item" @click="handleUpload('idcardImg', 1)" style="height: 196rpx;">
|
<template v-if="previewImages.idcardImg">
|
<view class="driver-cert-card__upload-img">
|
<image style="height: 100%;" :src="previewImages.idcardImg" mode="heightFix"></image>
|
</view>
|
<view class="driver-cert-card__upload-remove" @click.stop="removeImage('idcardImg')">删除</view>
|
</template>
|
<template v-else>
|
<image class="driver-cert-card__upload-icon" src="/static/image/ic_camera@2x.png" mode="aspectFit"></image>
|
<text class="driver-cert-card__upload-text">上传人像面</text>
|
</template>
|
</view>
|
<view class="driver-cert-card__upload-item" @click="handleUpload('idcardImgBack', 1)" style="height: 196rpx;">
|
<template v-if="previewImages.idcardImgBack">
|
<view class="driver-cert-card__upload-img">
|
<image style="height: 100%;" :src="previewImages.idcardImgBack" mode="heightFix"></image>
|
</view>
|
<view class="driver-cert-card__upload-remove" @click.stop="removeImage('idcardImgBack')">删除</view>
|
</template>
|
<template v-else>
|
<image class="driver-cert-card__upload-icon" src="/static/image/ic_camera@2x.png" mode="aspectFit"></image>
|
<text class="driver-cert-card__upload-text">上传国徽面</text>
|
</template>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-else class="driver-cert-card driver-cert-card--vehicle">
|
<text class="driver-cert-card__title">车辆信息</text>
|
|
<view class="driver-cert-card__field">
|
<text class="driver-cert-card__label">车牌号</text>
|
<text class="driver-cert-card__required">*</text>
|
<input v-model="vehicleForm.plateNumber" class="driver-cert-card__input" placeholder="请输入车牌号"
|
placeholder-style="color: #b9bfc8;" />
|
</view>
|
|
<view class="driver-cert-card__field driver-cert-card__field--select">
|
<view class="driver-cert-card__field-head">
|
<text class="driver-cert-card__label">车辆类型</text>
|
<text class="driver-cert-card__required">*</text>
|
</view>
|
<view class="driver-cert-card__selector" @click="showCarTypePicker = true">
|
<text class="driver-cert-card__selector-text" :style="{ color: vehicleForm.carType ? '#333333' : '#b9bfc8' }">{{ getCarTypeText(vehicleForm.carType) }}</text>
|
<text class="driver-cert-card__arrow">›</text>
|
</view>
|
</view>
|
|
<view class="driver-cert-card__field">
|
<text class="driver-cert-card__label">车辆颜色</text>
|
<text class="driver-cert-card__required">*</text>
|
<input v-model="vehicleForm.color" class="driver-cert-card__input" placeholder="请输入车辆颜色"
|
placeholder-style="color: #b9bfc8;" />
|
</view>
|
|
<view class="driver-cert-card__field driver-cert-card__field--select" style="border: none !important;">
|
<view class="driver-cert-card__field-head">
|
<text class="driver-cert-card__label">驾驶证有效期起</text>
|
<text class="driver-cert-card__required">*</text>
|
</view>
|
<view class="driver-cert-card__selector" @click="openDatePicker('start')">
|
<text class="driver-cert-card__selector-text" :style="{ color: form.cardStartDate ? '#333333' : '#b9bfc8' }">{{ form.cardStartDate || '请选择' }}</text>
|
<text class="driver-cert-card__arrow">›</text>
|
</view>
|
</view>
|
|
<view class="driver-cert-card__field driver-cert-card__field--select" style="border: none !important;">
|
<view class="driver-cert-card__field-head">
|
<text class="driver-cert-card__label">驾驶证有效期止</text>
|
<text class="driver-cert-card__required">*</text>
|
</view>
|
<view class="driver-cert-card__selector" @click="openDatePicker('end')">
|
<text class="driver-cert-card__selector-text" :style="{ color: form.cardEndDate ? '#333333' : '#b9bfc8' }">{{ form.cardEndDate || '请选择' }}</text>
|
<text class="driver-cert-card__arrow">›</text>
|
</view>
|
</view>
|
|
<view class="driver-cert-card__upload-block driver-cert-card__upload-block--stacked">
|
<view class="driver-cert-card__upload-title-row">
|
<text class="driver-cert-card__label">车辆照片</text>
|
<text class="driver-cert-card__required">*</text>
|
<text class="driver-cert-card__upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="driver-cert-card__upload-list driver-cert-card__upload-list--single">
|
<view v-for="(img, index) in previewImages.carImgUrls" :key="index" class="driver-cert-card__upload-item driver-cert-card__upload-item--single" @click="previewImg('carImgUrls', index)">
|
<image class="driver-cert-card__upload-image" :src="img" mode="aspectFill"></image>
|
<view class="driver-cert-card__upload-remove" @click.stop="removeImg('carImgUrls', index)">删除</view>
|
</view>
|
<view v-if="previewImages.carImgUrls.length < 3" class="driver-cert-card__upload-item driver-cert-card__upload-item--single" @click="handleUpload('carImgUrls', 3)">
|
<image class="driver-cert-card__upload-image" src="/static/image/btn_upload2@2x.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="needLicense" class="driver-cert-card__upload-block driver-cert-card__upload-block--stacked">
|
<view class="driver-cert-card__upload-title-row">
|
<text class="driver-cert-card__label">驾驶证照片</text>
|
<text class="driver-cert-card__required">*</text>
|
<text class="driver-cert-card__upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="driver-cert-card__upload-list driver-cert-card__upload-list--single">
|
<view v-for="(img, index) in previewImages.licenseImgUrls" :key="index" class="driver-cert-card__upload-item driver-cert-card__upload-item--single" @click="previewImg('licenseImgUrls', index)">
|
<image class="driver-cert-card__upload-image" :src="img" mode="aspectFill"></image>
|
<view class="driver-cert-card__upload-remove" @click.stop="removeImg('licenseImgUrls', index)">删除</view>
|
</view>
|
<view v-if="previewImages.licenseImgUrls.length < 3" class="driver-cert-card__upload-item driver-cert-card__upload-item--single" @click="handleUpload('licenseImgUrls', 3)">
|
<image class="driver-cert-card__upload-image" src="/static/image/btn_upload2@2x.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
</view>
|
|
<view class="driver-cert-card__upload-block driver-cert-card__upload-block--stacked">
|
<view class="driver-cert-card__upload-title-row">
|
<text class="driver-cert-card__label">其他材料</text>
|
<text class="driver-cert-card__upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="driver-cert-card__upload-list driver-cert-card__upload-list--single">
|
<view v-for="(img, index) in previewImages.otherImgUrls" :key="index" class="driver-cert-card__upload-item driver-cert-card__upload-item--single" @click="previewImg('otherImgUrls', index)">
|
<image class="driver-cert-card__upload-image" :src="img" mode="aspectFill"></image>
|
<view class="driver-cert-card__upload-remove" @click.stop="removeImg('otherImgUrls', index)">删除</view>
|
</view>
|
<view v-if="previewImages.otherImgUrls.length < 3" class="driver-cert-card__upload-item driver-cert-card__upload-item--single" @click="handleUpload('otherImgUrls', 3)">
|
<image class="driver-cert-card__upload-image" src="/static/image/btn_upload2@2x.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
<view class="driver-cert-page__bottom-bar">
|
<view v-if="currentStep === 2" class="driver-cert-page__agreement" @click="isAgreed = !isAgreed">
|
<image class="driver-cert-page__agreement-icon" :src="isAgreed ? '/static/image/ic_accept_sel@2x.png' : '/static/image/ic_accept@2x.png'" mode="widthFix"></image>
|
<text class="driver-cert-page__agreement-text">我已阅读并同意《风险声明》、《行李寄存员须知》及《服务协议》</text>
|
</view>
|
|
<view class="driver-cert-page__actions" :class="{ 'driver-cert-page__actions--dual': currentStep === 2 }">
|
<button v-if="currentStep === 2" class="driver-cert-page__submit driver-cert-page__submit--ghost"
|
hover-class="driver-cert-page__submit--hover" @click="goPrevStep">上一步</button>
|
<button class="driver-cert-page__submit" hover-class="driver-cert-page__submit--hover"
|
@click="handlePrimaryAction">{{ currentStep === 1 ? '下一步' : '提交认证申请' }}</button>
|
</view>
|
</view>
|
|
<u-picker
|
:show="showAreaPicker"
|
v-if="areaList && areaList.length > 0"
|
ref="uPicker"
|
confirmColor="#10B2FA"
|
keyName="text"
|
:columns="areaColumns"
|
@confirm="confirmArea"
|
@change="changeAreaHandler"
|
@cancel="showAreaPicker = false" />
|
|
<u-picker
|
:show="showMaritalPicker"
|
confirmColor="#10B2FA"
|
keyName="text"
|
:columns="[maritalOptions]"
|
@confirm="confirmMarital"
|
@cancel="showMaritalPicker = false" />
|
|
<u-picker
|
:show="showCarTypePicker"
|
v-if="carTypeList && carTypeList.length > 0"
|
confirmColor="#10B2FA"
|
keyName="text"
|
:columns="carTypeColumns"
|
@confirm="confirmCarType"
|
@cancel="showCarTypePicker = false" />
|
|
<u-datetime-picker
|
:show="showDatePicker"
|
v-model="datePickerValue"
|
mode="date"
|
:minDate="datePickerMode === 'end' ? this.form.cardStartDate : 0"
|
@confirm="confirmDate"
|
@cancel="showDatePicker = false" />
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
showAreaPicker: false,
|
showMaritalPicker: false,
|
maritalOptions: [
|
{ value: '0', text: '未婚' },
|
{ value: '1', text: '已婚' },
|
{ value: '2', text: '离异' },
|
{ value: '3', text: '丧偶' }
|
],
|
areaList: [],
|
areaColumns: [],
|
currentStep: 1,
|
form: {
|
areaId: '',
|
areaName: '',
|
name: '',
|
idcard: '',
|
maritalStatus: '',
|
livePlace: '',
|
aliAccount: '',
|
aliName: '',
|
idcardImg: '',
|
idcardImgBack: '',
|
carCode: '',
|
carType: '',
|
carColor: '',
|
cardStartDate: '',
|
cardEndDate: '',
|
carImgUrls: [],
|
licenseImgUrls: [],
|
otherImgUrls: []
|
},
|
vehicleForm: {
|
plateNumber: '',
|
color: '',
|
carType: ''
|
},
|
needLicense: false,
|
showCarTypePicker: false,
|
carTypeList: [],
|
carTypeColumns: [],
|
showDatePicker: false,
|
datePickerMode: 'start',
|
datePickerValue: Number(new Date()),
|
uploadPaths: {
|
idcardImg: 'driver/idcard/front',
|
idcardImgBack: 'driver/idcard/back',
|
carImgUrls: 'driver/car',
|
licenseImgUrls: 'driver/license',
|
otherImgUrls: 'driver/other'
|
},
|
previewImages: {
|
idcardImg: '',
|
idcardImgBack: '',
|
carImgUrls: [],
|
licenseImgUrls: [],
|
otherImgUrls: []
|
},
|
isAgreed: false,
|
imgPrefix: ''
|
}
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
onLoad() {
|
this.getAreaList()
|
this.getCategoryList()
|
this.getVerifyDetail()
|
},
|
methods: {
|
getMaritalStatusText(value) {
|
if (!value && value !== 0) return '请选择'
|
const item = this.maritalOptions.find(option => option.value === String(value))
|
return item ? item.text : '请选择'
|
},
|
getVerifyDetail() {
|
this.$u.api.verifyDetail().then(res => {
|
if (res.code === 200 && res.data) {
|
if (res.data.auditStatus !== 99) {
|
this.imgPrefix = res.data.imgPrefix
|
this.form.areaId = res.data.areaId || ''
|
this.form.areaName = [res.data.provinceName, res.data.cityName, res.data.districtName].filter(Boolean).join('/')
|
this.form.name = res.data.name || ''
|
this.form.idcard = res.data.idcard || ''
|
this.form.maritalStatus = res.data.maritalStatus !== undefined ? String(res.data.maritalStatus) : ''
|
this.form.livePlace = res.data.livePlace || ''
|
this.form.aliAccount = res.data.aliAccount || ''
|
this.form.aliName = res.data.aliName || ''
|
this.form.idcardImg = res.data.idcardImg || ''
|
this.form.idcardImgBack = res.data.idcardImgBack || ''
|
this.form.cardStartDate = res.data.cardStartDate ? res.data.cardStartDate.split(' ')[0] : ''
|
this.form.cardEndDate = res.data.cardEndDate ? res.data.cardEndDate.split(' ')[0] : ''
|
this.vehicleForm.plateNumber = res.data.carCode || ''
|
this.vehicleForm.carType = res.data.carType || ''
|
this.vehicleForm.color = res.data.carColor || ''
|
if (this.carTypeList.length > 0) {
|
const selectedCarType = this.carTypeList.find(item => item.id === res.data.carType)
|
this.needLicense = selectedCarType && selectedCarType.otherField === 1
|
}
|
this.previewImages.idcardImg = res.data.idcardImg ? res.data.imgPrefix + res.data.idcardImg : ''
|
this.previewImages.idcardImgBack = res.data.idcardImgBack ? res.data.imgPrefix + res.data.idcardImgBack : ''
|
this.form.carImgUrls = (res.data.carImgList || []).map(item => item.fileurl)
|
this.form.licenseImgUrls = (res.data.licenseImgList || []).map(item => item.fileurl)
|
this.form.otherImgUrls = (res.data.otherImgList || []).map(item => item.fileurl)
|
this.previewImages.carImgUrls = (res.data.carImgList || []).map(item => res.data.imgPrefix + item.fileurl)
|
this.previewImages.licenseImgUrls = (res.data.licenseImgList || []).map(item => res.data.imgPrefix + item.fileurl)
|
this.previewImages.otherImgUrls = (res.data.otherImgList || []).map(item => res.data.imgPrefix + item.fileurl)
|
}
|
}
|
})
|
},
|
confirmMarital(e) {
|
const { value } = e.value[0]
|
this.form.maritalStatus = value
|
this.showMaritalPicker = false
|
},
|
handleUpload(field, maxCount = 1) {
|
const currentList = this.previewImages[field]
|
const currentCount = Array.isArray(currentList) ? currentList.length : (currentList ? 1 : 0)
|
if (currentCount >= maxCount) {
|
uni.showToast({ title: `最多上传${maxCount}张`, icon: 'none' })
|
return
|
}
|
uni.chooseImage({
|
count: maxCount,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: (res) => {
|
const allTempPaths = res.tempFilePaths
|
const remaining = maxCount - currentCount
|
const tempFilePaths = allTempPaths.slice(0, remaining)
|
this.uploadFiles(field, tempFilePaths, maxCount)
|
}
|
})
|
},
|
uploadFiles(field, tempFilePaths, maxCount) {
|
const uploadPath = this.uploadPaths[field]
|
let uploadedCount = 0
|
const isSingle = maxCount === 1
|
uni.showLoading({ title: '上传中...' })
|
tempFilePaths.forEach((tempPath, index) => {
|
uni.uploadFile({
|
url: this.$baseUrl + '/web/public/upload',
|
filePath: tempPath,
|
name: 'file',
|
formData: {
|
folder: 'driver'
|
},
|
success: (uploadRes) => {
|
const data = JSON.parse(uploadRes.data)
|
if (data.code === 200) {
|
const fullUrl = data.data
|
console.log(fullUrl)
|
if (isSingle) {
|
this.form[field] = fullUrl.imgaddr
|
this.previewImages[field] = fullUrl.url
|
} else {
|
this.form[field].push(fullUrl.imgaddr)
|
this.previewImages[field].push(fullUrl.url)
|
}
|
}
|
uploadedCount++
|
if (uploadedCount === tempFilePaths.length) {
|
uni.hideLoading()
|
}
|
},
|
fail: () => {
|
uploadedCount++
|
uni.showToast({ title: '上传失败', icon: 'none' })
|
if (uploadedCount === tempFilePaths.length) {
|
uni.hideLoading()
|
}
|
}
|
})
|
})
|
},
|
getFullPath(halfPath) {
|
if (!halfPath) return ''
|
if (halfPath.startsWith('http')) return halfPath
|
const baseUrl = this.$baseUrl || ''
|
return baseUrl + halfPath
|
},
|
previewImg(field, index) {
|
const urls = Array.isArray(this.previewImages[field]) ? this.previewImages[field] : [this.previewImages[field]]
|
uni.previewImage({
|
current: index,
|
urls: urls
|
})
|
},
|
removeImg(field, index) {
|
const isSingle = !Array.isArray(this.form[field])
|
if (isSingle) {
|
this.form[field] = ''
|
this.previewImages[field] = ''
|
} else {
|
this.form[field].splice(index, 1)
|
this.previewImages[field].splice(index, 1)
|
}
|
},
|
removeImage(field) {
|
this.form[field] = ''
|
this.previewImages[field] = ''
|
},
|
getCategoryList() {
|
this.$u.api.getCategoryList({ type: 1 }).then(res => {
|
if (res.code === 200) {
|
this.carTypeList = res.data
|
this.carTypeColumns = [this.carTypeList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})]
|
if (this.vehicleForm.carType) {
|
const selectedCarType = this.carTypeList.find(item => item.id === this.vehicleForm.carType)
|
this.needLicense = selectedCarType && selectedCarType.otherField === 1
|
}
|
}
|
})
|
},
|
getCarTypeText(value) {
|
if (!value) return '请选择'
|
const item = this.carTypeList.find(option => option.id === value)
|
return item ? item.name : '请选择'
|
},
|
confirmCarType(e) {
|
const { id, text } = e.value[0]
|
this.vehicleForm.carType = id
|
const selectedCarType = this.carTypeList.find(item => item.id === id)
|
this.needLicense = selectedCarType && selectedCarType.otherField === 1
|
this.showCarTypePicker = false
|
},
|
openDatePicker(mode) {
|
this.datePickerMode = mode
|
if (mode === 'end' && this.form.cardStartDate) {
|
this.datePickerValue = new Date(this.form.cardStartDate).getTime()
|
} else {
|
this.datePickerValue = Number(new Date())
|
}
|
this.showDatePicker = true
|
},
|
confirmDate(e) {
|
const date = this.formatDate(e.value)
|
if (this.datePickerMode === 'start') {
|
this.form.cardStartDate = date
|
} else {
|
this.form.cardEndDate = date
|
}
|
this.showDatePicker = false
|
},
|
formatDate(timestamp) {
|
const date = new Date(timestamp)
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
},
|
getAreaList() {
|
this.$u.api.treeList({
|
type: 0,
|
flag: 1
|
}).then(res => {
|
if (res.code === 200) {
|
this.areaList = res.data
|
this.areaColumns[0] = this.areaList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
this.areaColumns[1] = this.areaList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
this.areaColumns[2] = this.areaList[0].childList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
}
|
})
|
},
|
changeAreaHandler(e) {
|
const { columnIndex, indexs, picker = this.$refs.uPicker } = e
|
if (columnIndex === 0) {
|
let city = this.areaList[indexs[0]].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
let qu = this.areaList[indexs[0]].childList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
picker.setColumnValues(1, city)
|
picker.setColumnValues(2, qu)
|
} else if (columnIndex === 1) {
|
let qu = this.areaList[indexs[0]].childList[indexs[1]].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
picker.setColumnValues(2, qu)
|
}
|
},
|
confirmArea(e) {
|
this.form.areaId = e.value[e.value.length - 1].id
|
this.form.areaName = e.value[0].text + '/' + e.value[1].text + '/' + e.value[2].text
|
this.showAreaPicker = false
|
},
|
handlePrimaryAction() {
|
if (this.currentStep === 1) {
|
if (!this.validateStep1()) return
|
this.scrollToTop()
|
this.currentStep = 2
|
} else {
|
if (!this.isAgreed) {
|
uni.showToast({ title: '请先同意协议', icon: 'none' })
|
return
|
}
|
this.submitVerify()
|
}
|
},
|
validateStep1() {
|
if (!this.form.name) {
|
uni.showToast({ title: '请输入司机姓名', icon: 'none' })
|
return false
|
}
|
if (!this.form.idcard) {
|
uni.showToast({ title: '请输入身份证号', icon: 'none' })
|
return false
|
}
|
if (!this.form.maritalStatus && this.form.maritalStatus !== 0) {
|
uni.showToast({ title: '请选择婚姻状况', icon: 'none' })
|
return false
|
}
|
if (!this.form.areaId) {
|
uni.showToast({ title: '请选择居住城市', icon: 'none' })
|
return false
|
}
|
if (!this.form.livePlace) {
|
uni.showToast({ title: '请输入详细地址', icon: 'none' })
|
return false
|
}
|
if (!this.form.aliAccount) {
|
uni.showToast({ title: '请输入支付宝账号', icon: 'none' })
|
return false
|
}
|
if (!this.form.aliName) {
|
uni.showToast({ title: '请输入支付宝姓名', icon: 'none' })
|
return false
|
}
|
if (!this.form.idcardImg) {
|
uni.showToast({ title: '请上传身份证人像面', icon: 'none' })
|
return false
|
}
|
if (!this.form.idcardImgBack) {
|
uni.showToast({ title: '请上传身份证国徽面', icon: 'none' })
|
return false
|
}
|
return true
|
},
|
validateStep2() {
|
if (!this.vehicleForm.plateNumber) {
|
uni.showToast({ title: '请输入车牌号', icon: 'none' })
|
return false
|
}
|
if (!this.vehicleForm.carType) {
|
uni.showToast({ title: '请选择车辆类型', icon: 'none' })
|
return false
|
}
|
if (!this.vehicleForm.color) {
|
uni.showToast({ title: '请输入车辆颜色', icon: 'none' })
|
return false
|
}
|
if (this.form.carImgUrls.length === 0) {
|
uni.showToast({ title: '请上传车辆照片', icon: 'none' })
|
return false
|
}
|
if (this.needLicense && this.form.licenseImgUrls.length === 0) {
|
uni.showToast({ title: '请上传驾驶证照片', icon: 'none' })
|
return false
|
}
|
return true
|
},
|
submitVerify() {
|
if (!this.validateStep2()) return
|
uni.showLoading({ title: '提交中...' })
|
const submitData = {
|
...this.form,
|
carType: this.vehicleForm.carType,
|
carColor: this.vehicleForm.color,
|
carCode: this.vehicleForm.plateNumber,
|
carImgUrls: this.form.carImgUrls || [],
|
licenseImgUrls: this.form.licenseImgUrls || [],
|
otherImgUrls: this.form.otherImgUrls || []
|
}
|
console.log(submitData)
|
this.$u.api.submitVerify(submitData).then(res => {
|
uni.hideLoading()
|
if (res.code === 200) {
|
uni.showToast({ title: '提交成功', icon: 'success' })
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}
|
})
|
},
|
goPrevStep() {
|
this.scrollToTop()
|
this.currentStep = 1
|
},
|
scrollToTop() {
|
uni.pageScrollTo({
|
scrollTop: 0,
|
duration: 0
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.driver-cert-page {
|
min-height: 100vh;
|
padding: 18rpx 16rpx 32rpx;
|
background: linear-gradient(180deg, #d7f0ff 0%, #f6fbff 28%, #ffffff 100%);
|
box-sizing: border-box;
|
overflow: hidden;
|
|
&__scroll {
|
width: 100%;
|
}
|
|
&__steps {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 10rpx 20rpx 24rpx;
|
}
|
|
&__step {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
min-width: 150rpx;
|
|
&--active {
|
.driver-cert-page__step-circle {
|
background: #b9e9ff;
|
}
|
|
.driver-cert-page__step-circle-inner {
|
background: #106efa;
|
color: #ffffff;
|
box-shadow: 0 8rpx 18rpx rgba(16, 110, 250, 0.24);
|
}
|
}
|
|
&--done {
|
.driver-cert-page__step-circle {
|
background: #b9e9ff;
|
}
|
|
.driver-cert-page__step-circle-inner {
|
background: #106efa;
|
color: #ffffff;
|
}
|
}
|
}
|
|
&__step-circle {
|
width: 52rpx;
|
height: 52rpx;
|
border-radius: 50%;
|
background: #b9e9ff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
&--inactive {
|
background: #8c939f;
|
|
.driver-cert-page__step-circle-inner {
|
width: 100%;
|
height: 100%;
|
background: transparent;
|
box-shadow: none;
|
}
|
}
|
}
|
|
&__step-circle-inner {
|
width: 32rpx;
|
height: 32rpx;
|
border-radius: 50%;
|
background: #106efa;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 22rpx;
|
font-weight: 700;
|
color: #ffffff;
|
}
|
|
&__step-text {
|
margin-top: 12rpx;
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #7f8693;
|
|
&--active {
|
color: #2b3139;
|
font-weight: 700;
|
}
|
|
&--done {
|
color: #106efa;
|
font-weight: 700;
|
}
|
}
|
|
&__step-line {
|
width: 160rpx;
|
height: 2rpx;
|
margin: 0 12rpx 30rpx;
|
background: #b4c7ea;
|
}
|
|
&__bottom-bar {
|
margin-top: 30rpx;
|
padding: 18rpx 0 calc(env(safe-area-inset-bottom) + 18rpx);
|
background: #ffffff;
|
box-sizing: border-box;
|
}
|
|
&__actions {
|
display: flex;
|
justify-content: center;
|
|
&--dual {
|
gap: 18rpx;
|
}
|
}
|
|
&__submit {
|
width: 100%;
|
height: 78rpx;
|
line-height: 78rpx;
|
border-radius: 999rpx;
|
background: #2476f6;
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #ffffff;
|
border: 0;
|
padding: 0;
|
|
&::after {
|
border: 0;
|
}
|
|
&--hover {
|
opacity: 0.92;
|
}
|
|
&--ghost {
|
width: 220rpx;
|
background: #f3f8ff;
|
border: 1rpx solid #7db0ff;
|
color: #2d7cff;
|
}
|
}
|
|
&__agreement {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 18rpx;
|
}
|
|
&__agreement-icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 6rpx;
|
flex-shrink: 0;
|
}
|
|
&__agreement-text {
|
font-size: 22rpx;
|
line-height: 1.6;
|
color: #98a0ad;
|
}
|
}
|
|
.driver-cert-card {
|
padding: 24rpx 24rpx 22rpx;
|
border-radius: 22rpx;
|
background: #ffffff;
|
overflow: hidden;
|
box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
|
|
&__title {
|
display: block;
|
font-size: 40rpx;
|
font-weight: 700;
|
color: #2b3139;
|
}
|
|
&__mobile {
|
display: block;
|
margin-top: 14rpx;
|
font-size: 28rpx;
|
color: #9aa1ad;
|
}
|
|
&--vehicle {
|
margin-bottom: 30rpx;
|
}
|
|
&__field {
|
padding: 28rpx 0 24rpx;
|
border-bottom: 1rpx solid #eef1f5;
|
|
&--select {
|
padding-bottom: 20rpx;
|
}
|
}
|
|
&__field-head,
|
&__upload-title-row {
|
display: flex;
|
align-items: center;
|
}
|
|
&__label {
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #2b3139;
|
}
|
|
&__required {
|
margin-left: 4rpx;
|
font-size: 32rpx;
|
line-height: 1;
|
color: #ff4a3d;
|
}
|
|
&__input {
|
width: 100%;
|
height: 78rpx;
|
margin-top: 10rpx;
|
font-size: 30rpx;
|
color: #333333;
|
background: transparent;
|
}
|
|
&__selector {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 78rpx;
|
margin-top: 10rpx;
|
}
|
|
&__selector-text {
|
font-size: 30rpx;
|
color: #b9bfc8;
|
}
|
|
&__arrow {
|
font-size: 34rpx;
|
line-height: 1;
|
color: #9aa1ad;
|
}
|
|
&__upload-block {
|
padding: 30rpx 0;
|
|
&--stacked {
|
border-top: 1rpx solid #eef1f5;
|
margin-top: 2rpx;
|
}
|
}
|
|
&__upload-list {
|
display: flex;
|
gap: 20rpx;
|
margin-top: 30rpx;
|
|
&--single {
|
gap: 0;
|
}
|
}
|
|
&__upload-item {
|
position: relative;
|
flex: 1;
|
height: 144rpx;
|
border-radius: 16rpx;
|
background: #f7f8fa;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
overflow: visible;
|
|
&--single {
|
flex: none;
|
width: 144rpx;
|
}
|
}
|
|
&__upload-image {
|
width: 144rpx;
|
height: 144rpx;
|
}
|
|
&__upload-icon {
|
width: 52rpx;
|
height: 52rpx;
|
opacity: 0.5;
|
}
|
|
&__upload-text {
|
margin-top: 16rpx;
|
font-size: 28rpx;
|
color: #8f96a3;
|
}
|
|
&__upload-img {
|
width: 100%;
|
height: 100%;
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
}
|
|
&__upload-remove {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 40rpx;
|
line-height: 40rpx;
|
text-align: center;
|
background: rgba(0,0,0,0.5);
|
border-radius: 0rpx 0rpx 8rpx 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
z-index: 99;
|
}
|
|
&__upload-tip {
|
margin-left: 10rpx;
|
font-size: 22rpx;
|
color: #b7bdc7;
|
}
|
}
|
</style>
|
