<template>
|
<view>
|
<view class="steps-container">
|
<view v-for="(item, index) in steps" :key="index" class="step-item">
|
<view class="step-line">
|
<view class="line" :class="index!=0?`line-v ${index<=active?'value-select':''}`:''"></view>
|
<view class="value" :class="index<=active?'value-select':''">{{ index + 1 }}</view>
|
<view class="line" :class="index!=2?`line-v ${index<active?'value-select':''}`:''"></view>
|
</view>
|
<view class="title" :class="index<=active?'select':''">{{ item.title }}</view>
|
</view>
|
</view>
|
<view class="form-conyainer">
|
<view class="message-item">
|
<view class="label">真实姓名</view>
|
<view class="message-value">
|
<uni-easyinput
|
:inputBorder="false"
|
v-model="authenticationForm.realName"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入真实姓名" />
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">手机号</view>
|
<view class="message-value" @click="selectSex">
|
<uni-easyinput
|
type="number"
|
:inputBorder="false"
|
v-model="authenticationForm.phone"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入手机号" />
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">验证码</view>
|
<view class="message-value">
|
<uni-easyinput
|
type="number"
|
:inputBorder="false"
|
v-model="authenticationForm.code"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入验证码" />
|
<view class="code" :class="!canSend?'sending':''" @click="sendCode">{{ canSend?'获取验证码':`重新发送(${time})` }}</view>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">邮箱</view>
|
<view class="message-value">
|
<uni-easyinput
|
:inputBorder="false"
|
v-model="authenticationForm.email"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入邮箱" />
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">证件号</view>
|
<view class="message-value">
|
<uni-easyinput
|
type="idcard"
|
:inputBorder="false"
|
v-model="authenticationForm.idCode"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入证件号" />
|
</view>
|
</view>
|
<view class="parting"></view>
|
<view class="upload-card">
|
<view class="introduce-title">上传身份证</view>
|
<view class="upload-container">
|
<view class="card-container">
|
<uni-file-picker limit="1" :image-styles="imageStyles">
|
<view class="model">
|
上传身份证人像面
|
</view>
|
</uni-file-picker>
|
</view>
|
<view class="card-container">
|
<uni-file-picker limit="1" :image-styles="imageStyles">
|
<view class="model">
|
上传身份证国徽面
|
</view>
|
</uni-file-picker>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="agreement">
|
<view class="protocl">
|
<view class="agree-btn"></view>
|
已详细阅读并同意
|
<view class="protocl-btn">《哇咖哇咖创作者协议》</view>
|
</view>
|
<view class="tips">
|
<view class="agree-btn"></view>
|
<view class="tips-message">
|
经审慎考虑，同意提供本人真实姓名、手机号及证件号码，以核实本人身份，保障账号安全；同意提供其他信息（包括邮箱、个人介绍）
|
</view>
|
</view>
|
</view>
|
<view class="actions">
|
<view class="last-step action-btn" @click="lastStep">上一步</view>
|
<view class="submit-not action-btn" :class="canSubmit&&'submit'" @click="submit">提交审核</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
active: 1,
|
steps: [
|
{ title: '基本信息' },
|
{ title: '实名认证' },
|
{ title: '提交审核' }
|
],
|
canSend: true,
|
time: 60,
|
authenticationForm: {
|
realName: '',
|
phone: '',
|
code: '',
|
email: '',
|
idCode: ''
|
},
|
imageStyles:{
|
width:312,
|
height:120,
|
},
|
canSubmit: false
|
}
|
},
|
methods: {
|
sendCode() {
|
if (!this.canSend) return
|
this.canSend = false
|
this.time = 60
|
let timer = setInterval(() => {
|
this.time -= 1
|
if (this.time==0) {
|
this.canSend = true
|
clearInterval(timer)
|
}
|
}, 1000)
|
},
|
lastStep() {
|
uni.navigateBack()
|
},
|
submit() {
|
uni.navigateTo({
|
url: '/pages/creationCenter/creationSubmit'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.steps-container {
|
display: flex;
|
background-color: #FFFFFF;
|
padding: 66rpx 0 26rpx;
|
.step-item {
|
width: 33.33%;
|
text-align: center;
|
.step-line {
|
display: flex;
|
.line {
|
flex: 1;
|
}
|
.line-v {
|
height: 4px;
|
background: #D9D9D9;
|
margin: auto 0;
|
}
|
.value {
|
width: 48rpx;
|
height: 48rpx;
|
background: #D9D9D9;
|
border-radius: 50%;
|
font-weight: 500;
|
color: #FFFFFF;
|
line-height: 48rpx;
|
font-size: 32rpx;
|
}
|
.value-select {
|
background: #D20A0A;
|
}
|
}
|
.title {
|
height: 28rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #CCCCCC;
|
line-height: 28rpx;
|
margin-top: 16rpx;
|
}
|
.select {
|
color: #D20A0A;
|
}
|
}
|
}
|
.form-conyainer {
|
background-color: #FFFFFF;
|
padding: 32rpx;
|
.message-item {
|
display: flex;
|
justify-content: space-between;
|
height: 96rpx;
|
border-bottom: 2rpx solid #F4F5F4;
|
.label {
|
line-height: 96rpx;
|
font-size: 28rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
&::after {
|
content: '*';
|
color: #D20A0A;
|
}
|
}
|
.message-value {
|
flex: 1;
|
display: flex;
|
text-align: right;
|
line-height: 96rpx;
|
margin: auto 0;
|
font-size: 28rpx;
|
.code {
|
width: 192rpx;
|
height: 56rpx;
|
line-height: 56rpx;
|
// margin-left: 20rpx;
|
text-align: center;
|
margin: auto 0 auto 20rpx;
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
color: #FFFFFF;
|
font-size: 28rpx;
|
}
|
.sending {
|
background: #CCCCCC;
|
}
|
}
|
}
|
}
|
.uni-easyinput__content-input {
|
text-align: right;
|
font-size: 28rpx !important;
|
}
|
|
.parting {
|
background: #f7f7f7;
|
height: 16rpx;
|
width: 120%;
|
margin-left:-33rpx;
|
}
|
.upload-card {
|
.introduce-title {
|
font-size: 32rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
padding-top: 28rpx;
|
}
|
.upload-container {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 28rpx;
|
|
.card-container {
|
width: 312rpx;
|
// height: 200rpx;
|
.uni-file-picker {
|
width: 100%;
|
height: 100%;
|
}
|
.model {
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.35);
|
color: #FFFFFF;
|
text-align: center;
|
line-height: 100px;
|
}
|
}
|
}
|
}
|
.agreement {
|
// margin-top: 28rpx;
|
padding: 32rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
line-height: 32rpx;
|
.agree-btn {
|
border: 2rpx solid #999999;
|
width: 28rpx;
|
height: 28rpx;
|
border-radius: 16rpx;
|
margin-right: 16rpx;
|
}
|
.protocl {
|
display: flex;
|
|
.protocl-btn {
|
color: #D20A0A;
|
}
|
}
|
.tips {
|
margin-top: 20rpx;
|
display: flex;
|
.tips-message {
|
flex: 1;
|
}
|
}
|
}
|
|
.actions {
|
display: flex;
|
padding: 0 58rpx env(safe-area-inset-bottom);
|
margin-top: 120rpx;
|
.action-btn {
|
flex: 1;
|
text-align: center;
|
box-sizing: border-box;
|
height: 72rpx;
|
line-height: 72rpx;
|
border-radius: 36rpx;
|
margin-bottom: 20rpx;
|
}
|
.last-step {
|
border: 2rpx solid #D20A0A;
|
color: #D20A0A;
|
font-size: 32rpx;
|
margin-right: 20rpx;
|
}
|
.submit-not {
|
color: #FFFFFF;
|
background: #D9D9D9;
|
}
|
.submit {
|
background: linear-gradient(90deg, #D95A5A 0%, #D20A0A 100%);
|
}
|
}
|
|
</style>
|
