|
|
- <!-- 实名认证 -->
- <template>
- <view class="autonym">
- <!-- 实名认证顶部背景 -->
- <view class="autonym-top">
- <image class="bg" src="https://tennis-oss.xzaiyp.top/2024-10-22/b0182213-365c-482d-9218-e532df187fdc.png" mode="widthFix"></image>
- </view>
-
- <!-- 实名认证表单 -->
- <view class="autonum-form">
- <view class="autonum-form-title">请填写真实有效的身份信息</view>
- <view class="autonum-form-item">
- <view class="title">姓名</view>
- <input class="text" v-model="form.name" type="text" />
- </view>
- <view class="autonum-form-item">
- <view class="title">证件号码</view>
- <input class="text" v-model="form.cardNo" type="text" />
- </view>
- <div @click="submit" class="btn">
- 立即认证
- </div>
- </view>
-
- <!-- 说明 -->
- <view class="autonym-info">
- <image class="autonum-info-icon" src="https://tennis-oss.xzaiyp.top/2024-10-22/fb858755-ada3-49c3-87c7-c28a585dcbc0.png" mode="widthFix"></image>
- <view class="text">实名仅用于您是否为真人用户,不会对信息做任何采集与保留,请放心使用</view>
- </view>
-
- </view>
- </template>
-
- <script>
- export default {
- name: "Autonym",
- data() {
- return {
- form: {
- name: '',
- cardNo: ''
- }
- }
- },
- methods: {
- toCenter() {
- uni.navigateTo({
- url: "/pages/index/center"
- })
- },
- submit(){
- if (this.$utils.verificationAll(this.form, {
- name : '请输入姓名',
- cardNo : '请输入身份证号',
- })) {
- return
- }
-
- this.$api('authApply', this.form, res => {
- if(res.code == 200){
- uni.reLaunch({
- url: '/pages/index/index'
- })
- }
- })
- },
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .autonym {
-
- // 实名认证顶部背景
- .autonym-top {
- .bg {
- width: 750rpx;
- }
- }
-
- // 实名认证表单
- .autonum-form {
- position: relative;
- width: 95%;
- border-radius: 40rpx;
- background: white;
- margin: -180rpx auto 0rpx auto;
- z-index: 100;
- overflow: hidden;
- box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .1);
-
- .autonum-form-title {
- font-size: 34rpx;
- font-weight: bold;
- padding: 40rpx 0rpx;
- text-align: center;
- background-color: #E4E4E4;
- }
-
- .autonum-form-item {
- height: 90rpx;
- display: flex;
- align-items: center;
- margin: 50rpx auto;
- width: 80%;
- background: #E4E4E4;
- border-radius: 100rpx;
- box-sizing: border-box;
- padding: 0rpx 20rpx;
- color: #707070;
-
- &:nth-child(2){
- margin-top: 70rpx;
- }
-
- .title {
- font-size: 30rpx;
- width: 160rpx;
- }
-
- .text {
- display: block;
- height: 75rpx;
- width: calc(100% - 160rpx);
- }
- }
-
- .btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 80%;
- background: $main-color;
- color: white;
- height: 100rpx;
- border-radius: 50rpx;
- margin: 90rpx auto 60rpx auto;
- }
- }
-
- // 说明
- .autonym-info {
- display: flex;
- align-items: center;
- width: 90%;
- margin: 30rpx auto 0rpx auto;
- background: #F3F3F3;
-
- .autonum-info-icon {
- width: 30rpx;
- }
-
- .text {
- width: calc(100% - 20rpx);
- font-size: 24rpx;
- color: #707070;
- box-sizing: border-box;
- padding-left: 10rpx;
- }
- }
- }
- </style>
|