<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">注册手机号：18155114565</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 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">
|
<text class="driver-cert-card__selector-text">请选择</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">
|
<text class="driver-cert-card__selector-text">请选择省市区</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.address" 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.alipay" 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">
|
<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>
|
</view>
|
<view class="driver-cert-card__upload-item">
|
<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>
|
</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">
|
<text class="driver-cert-card__selector-text">请选择</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">
|
<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">
|
<text class="driver-cert-card__selector-text">请选择</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 class="driver-cert-card__upload-item driver-cert-card__upload-item--single">
|
<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__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 class="driver-cert-card__upload-item driver-cert-card__upload-item--single">
|
<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 class="driver-cert-card__upload-item driver-cert-card__upload-item--single">
|
<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">
|
<label v-if="currentStep === 2" class="driver-cert-page__agreement">
|
<radio class="driver-cert-page__agreement-radio" :checked="true" color="#2D7CFF" />
|
<text class="driver-cert-page__agreement-text">我已阅读并同意《风险声明》、《行李寄存员须知》及《服务协议》</text>
|
</label>
|
|
<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>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentStep: 1,
|
form: {
|
name: '',
|
idCard: '',
|
address: '',
|
alipay: ''
|
},
|
vehicleForm: {
|
plateNumber: '',
|
color: ''
|
}
|
}
|
},
|
methods: {
|
handlePrimaryAction() {
|
if (this.currentStep === 1) {
|
this.scrollToTop()
|
this.currentStep = 2
|
}
|
},
|
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-radio {
|
transform: scale(0.9);
|
transform-origin: left top;
|
margin-right: 6rpx;
|
}
|
|
&__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-top: 28rpx;
|
|
&--stacked {
|
border-top: 1rpx solid #eef1f5;
|
margin-top: 2rpx;
|
}
|
}
|
|
&__upload-list {
|
display: flex;
|
gap: 20rpx;
|
margin-top: 22rpx;
|
|
&--single {
|
gap: 0;
|
}
|
}
|
|
&__upload-item {
|
flex: 1;
|
height: 144rpx;
|
border-radius: 16rpx;
|
background: #f7f8fa;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
&--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-tip {
|
margin-left: 10rpx;
|
font-size: 22rpx;
|
color: #b7bdc7;
|
}
|
}
|
</style>
|
