emis-sapp/pages/user/certification.vue
2024-01-29 18:48:55 +08:00

152 lines
3.4 KiB
Vue

<template>
<tpx-layout>
<template v-slot:body>
<view class="com-jianju pos-rlt pb-30" style="padding-top: 2rpx;">
<view class="blcok-white radius-20" style="padding-top: 40rpx;">
<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="0">
<uni-forms-item :required="false">
<tpx-input v-model:value="baseFormData.name" placeholder="真实姓名"></tpx-input>
</uni-forms-item>
<uni-forms-item :required="false">
<tpx-select placeholder="证件类型" v-model:value="baseFormData.type" :list="typeList" custom-style="border:0;"
mode="drop"
></tpx-select>
</uni-forms-item>
<uni-forms-item :required="false">
<tpx-input v-model:value="baseFormData.number" placeholder="证件号"></tpx-input>
</uni-forms-item>
<view class="mb-10">
<u-row justify="between">
<u-col span="5">
<tpx-upload v-model:value="baseFormData.pic1" :isSlot="true">
<view class="up-item">
<u-image :src="getCdnUrl(`mine/shen-zh.svg`)" height="150" width="200"></u-image>
<u-text :text="'身份证人像面'" size="28" align="center"></u-text>
</view>
</tpx-upload>
</u-col>
<u-col span="5">
<tpx-upload v-model:value="baseFormData.pic2" :isSlot="true">
<view class="up-item">
<u-image :src="getCdnUrl(`mine/shen-fan.svg`)" height="150" width="200"></u-image>
<u-text :text="'身份证国徽面'" size="28" align="center"></u-text>
</view>
</tpx-upload>
</u-col>
</u-row>
</view>
</uni-forms>
</view>
</view>
</template>
<template v-slot:footer>
<view class="blcok-white-noradius">
<u-button @click="handleSubmit()" type="primary" size="large" shape="circle"
custom-style="height:80rpx;font-size: 30rpx;">提交实名</u-button>
</view>
</template>
</tpx-layout>
</template>
<script>
import getCdnUrl from "@/common/getCdnUrl"
import {
goto,
goBack
} from "@/common/untool"
export default {
props: {
// hasLeftWin: {
// type: Boolean
// }
},
computed: {
},
data() {
return {
fileList1: [],
typeList: [
{ title: '身份证', val: 1 },
{ title: '护照', val: 2 },
{ title: '港台证', val: 3 }
],
// 基础表单数据
baseFormData: {
name: '',
},
// 校验规则
rules: {
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
}
}
}
},
onShareAppMessage() {
return {
// title: '',
// path: 'TODO'
}
},
onLoad() {
this.initData();
},
onUnload() {
},
methods: {
getCdnUrl,
initData() {
// uni.showLoading({
// title: '加载中'
// });
},
handleAnsText() {
},
handleFormChange() {
},
handleSubmit() {
this.$refs['baseForm'].validate().then(res => {
console.log('success', res);
uni.showToast({
title: `校验通过`
})
goBack()
}).catch(err => {
console.log('err', err);
})
},
}
}
</script>
<style lang="scss">
@import '@/common/uni-nvue.scss';
page {
background-color: #F6F6F6;
height: 100% !important;
}
</style>
<style scoped lang="scss">
.up-item{
width: 200rpx;
padding-bottom: 16rpx;
border: 2rpx solid #EFEFEF;
border-radius: 6rpx;
background: #F8F8F8;
}
</style>