瑶都万能墙
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

252 lines
4.8 KiB

<template>
<!-- 实名认证 -->
<uv-popup ref="popup" :round="30">
<view class="page">
<!-- <view class="info-tips">
完成认证<text>您将获得实名认证平台特权</text>
</view> -->
<uv-tabs :list="tags" @click="tagsClick"
:activeStyle="{color : '#5baaff', fontWeight : 900}"
lineHeight="0"
lineWidth="50rpx"></uv-tabs>
<view class="form"
v-if="type == 0">
<view class="form-item">
<view class="label">
姓名
</view>
<input type="text" class="form-input"
placeholder="请输入姓名"
v-model="form.name"/>
</view>
<view class="form-item">
<view class="label">
身份证号码
</view>
<input type="text" class="form-input"
placeholder="请输入身份证号码"
v-model="form.card"/>
</view>
</view>
<view class="form"
v-if="type == 1">
<view class="form-item">
<view class="label">
店铺名称
</view>
<input type="text" class="form-input"
placeholder="请输入姓名"
v-model="form.name"/>
</view>
<view class="form-item">
<view class="label">
联系方式
</view>
<input type="text" class="form-input"
placeholder="请输入联系方式"
v-model="form.phone"/>
</view>
<view class="form-item">
<view class="title">
请上传营业执照
</view>
<view class="tips">
信息仅用身份核实,上传后可增加曝光机会
</view>
</view>
<view class="form-item">
<uv-upload
:fileList="fileList"
:maxCount="1"
width="600rpx"
height="280rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="/static/image/home/photo.png"
mode="aspectFit"
style="width: 390rpx;height: 280rpx;" />
<view class="btn-add">
点击上传
</view>
</view>
</uv-upload>
</view>
<view class="form-item">
<view class="tips"
style="text-align: center;padding: 20rpx 0;">
(确保文字清晰、可辨、避免遮挡、不全、反光)
</view>
</view>
</view>
<view class="uni-color-btn"
@click="submit">
认证
</view>
</view>
</uv-popup>
</template>
<script>
export default {
data() {
return {
checkboxValue : [],
form : {},
fileList: [],
type : 0,
tags : [
{
name : '个人认证',
},
{
name : '店铺认证',
},
],
}
},
methods: {
deleteImage(e){
this.fileList.splice(e.index, 1)
},
afterRead(e){
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.fileList.push({
url
})
})
})
},
open(){
this.$refs.popup.open()
},
tagsClick({index}){
this.type = index
},
submit(){
let data = {
...this.form,
image : this.fileList.map((item) => item.url).join(","),
}
if(this.type == 0){
if (this.$utils.verificationAll(data, {
name: '说点什么吧',
card : '请输入身份证号',
})) {
return
}
}else{
if (this.$utils.verificationAll(data, {
name: '请输入店铺名称',
phone: '请输入联系方式',
image: '请上传营业执照',
})) {
return
}
}
this.$api([
'personalAuthentication',
'companyAuthentication',
][this.type], data, res => {
if(res.code == 200){
uni.showToast({
title: '提交成功!',
icon: 'none'
})
this.$store.commit('getUserInfo')
this.$refs.popup.close()
}
})
},
}
}
</script>
<style scoped lang="scss">
.page{
width: 700rpx;
.info-tips{
width: 100%;
padding: 30rpx 0;
background-color: #f3f3f3;
text-align: center;
text{
color: $uni-color;
}
}
.form {
padding: 30rpx;
.form-item{
.label{
padding: 20rpx 0;
}
.form-input{
border: 1px solid $uni-color;
background: rgba($uni-color, 0.1);
padding: 10rpx 20rpx;
font-size: 28rpx;
}
.title{
font-weight: 900;
margin-top: 50rpx;
padding: 10rpx 0;
}
.tips{
font-size: 26rpx;
color: #777;
padding-bottom: 20rpx;
}
}
.upload{
display: flex;
justify-content: center;
align-items: center;
width: 690rpx;
background-color: #f3f3f3;
border-radius: 10rpx;
.btn-add{
margin: auto;
padding: 10rpx 20rpx;
background-color: $uni-color;
color: #fff;
border-radius: 10rpx;
}
}
}
.config{
font-size: 26rpx;
line-height: 40rpx;
width: 100%;
display: flex;
justify-content: center;
.content{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
text{
color: $uni-color;
}
}
}
</style>