<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':''"></view>
|
<view class="value" :class="index==active?'value-select':''">{{ index + 1 }}</view>
|
<view class="line" :class="index!=2?'line-v':''"></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="baseForm.nickName" placeholderStyle="color:#ccc; font-size: 28rpx;" placeholder="请输入昵称" />
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">性别</view>
|
<view class="message-value" @click="selectSex">
|
<text :class="baseForm.sex?'':'un-select'">{{ baseForm.sex==1?'男':baseForm.sex==2?'女':'请选择' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">生日</view>
|
<view class="message-value" @click="$refs.datePicker.open()">
|
<text :class="baseForm.birthday?'':'un-select'">{{ baseForm.birthday||'请选择' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">地区</view>
|
<view class="message-value" @click="$refs.areaSelect.open()">
|
<text :class="baseForm.area?'':'un-select'">{{ baseForm.area||'请选择' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="parting"></view>
|
<view class="persnal-introduce">
|
<view class="introduce-title">个人介绍</view>
|
<uni-easyinput
|
:inputBorder="false"
|
v-model="baseForm.nickName"
|
:maxlength="500"
|
autoHeight
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="介绍一下自己吧..."
|
type="textarea"
|
/>
|
</view>
|
<view class="parting"></view>
|
<view v-for="(item, index) in platforms" :key="index" class="platform">
|
<view class="platform-item">
|
<view class="label">平台名称</view>
|
<view class="message-value">
|
<uni-easyinput
|
:inputBorder="false"
|
v-model="item.platformName"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入平台名称" />
|
</view>
|
</view>
|
<view class="platform-item">
|
<view class="label">ID或昵称</view>
|
<view class="message-value">
|
<uni-easyinput
|
:inputBorder="false"
|
v-model="item.id"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入ID或昵称" />
|
</view>
|
</view>
|
<view class="platform-item">
|
<view class="label">粉丝数</view>
|
<view class="message-value">
|
<uni-easyinput
|
type="number"
|
:inputBorder="false"
|
v-model="item.fans"
|
placeholderStyle="color:#ccc; font-size: 28rpx;"
|
placeholder="请输入粉丝数" />
|
</view>
|
</view>
|
<view class="add-platform" @click="platforms.splice(index, 1)">删除</view>
|
<view class="parting"></view>
|
</view>
|
<view class="add-platform" @click="addPlatform">
|
<uni-icons type="plusempty" size="22" color="#333"></uni-icons> 其他平台辅助认证
|
</view>
|
</view>
|
<view class="next-btn" @click="nextStep">下一步</view>
|
<view class="safe-area"></view>
|
<SexSelect ref="sex" @updata="updataSex"/>
|
<datePicker ref="datePicker" @updata="updateBirthday"/>
|
<areaSelect ref="areaSelect" @updata="updateArea"/>
|
</view>
|
</template>
|
|
<script>
|
import SexSelect from "@/components/common/sexSelect.vue"
|
import datePicker from "@/components/common/datePicker.vue"
|
import areaSelect from "@/components/common/areaSelect.vue"
|
export default {
|
components: { SexSelect, datePicker, areaSelect },
|
data() {
|
return {
|
active: 0,
|
steps: [
|
{ title: '基本信息' },
|
{ title: '实名认证' },
|
{ title: '提交审核' }
|
],
|
baseForm: {
|
nickName: '',
|
sex: '',
|
birthday: '',
|
area: ''
|
},
|
platforms: [],
|
rules: {
|
nickName: [
|
{ required: true, errorMessage: '请填写昵称' }
|
]
|
}
|
}
|
},
|
methods: {
|
selectSex() {
|
this.$refs.sex.open(this.baseForm.sex)
|
},
|
updataSex(v) {
|
this.baseForm.sex=v
|
},
|
updateBirthday(v) {
|
console.log(v);
|
this.baseForm.birthday = v.join('-')
|
},
|
updateArea(v) {
|
console.log(v);
|
},
|
addPlatform() {
|
this.platforms.push({
|
platformName: '',
|
id: '',
|
fans: ''
|
})
|
},
|
nextStep() {
|
uni.navigateTo({
|
url: '/pages/creationCenter/creationAuthentication'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.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;
|
text-align: right;
|
line-height: 96rpx;
|
margin: auto 0;
|
font-size: 28rpx;
|
.un-select {
|
font-size: 28rpx;
|
|
color: #CCCCCC;
|
}
|
}
|
}
|
}
|
/deep/ .uni-easyinput__content-input {
|
text-align: right;
|
font-size: 28rpx !important;
|
}
|
|
.parting {
|
background: #f7f7f7;
|
height: 16rpx;
|
width: 120%;
|
margin-left:-33rpx;
|
}
|
.persnal-introduce {
|
.introduce-title {
|
font-size: 32rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
padding-top: 28rpx;
|
}
|
/deep/ .uni-easyinput__content {
|
background: #f5f5f5;
|
padding: 26rpx;
|
margin: 28rpx 0;
|
}
|
}
|
.platform {
|
.platform-item {
|
display: flex;
|
justify-content: space-between;
|
height: 96rpx;
|
border-bottom: 2rpx solid #F4F5F4;
|
.label {
|
line-height: 96rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
}
|
.message-value {
|
flex: 1;
|
text-align: right;
|
line-height: 96rpx;
|
margin: auto 0;
|
font-size: 28rpx;
|
|
}
|
}
|
}
|
.add-platform {
|
height: 96rpx;
|
text-align: center;
|
font-size: 32rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
line-height: 96rpx;
|
display: flex;
|
justify-content: center;
|
// vertical-align: middle;
|
}
|
.next-btn {
|
height: 72rpx;
|
margin: 126rpx 56rpx 0;
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
color: #FFFFFF;
|
line-height: 72rpx;
|
text-align: center;
|
}
|
.safe-area {
|
height: env(safe-area-inset-bottom);
|
padding: 20rpx;
|
}
|
</style>
|
