shop_uniapp/bundle_b/pages/upload_idcard/index.vue

<template>
    <view class="submit-page">
		<view class="form-area">
			<view class="basic-info">
			    <view class="title-text"><text class="text-style">身份信息</text></view>
				
				<view>
					<u-field label="姓名" v-model="formData.real_name" label-width="200" :border-bottom="false" placeholder="请输入姓名" required />
				</view>
				
				<view>
					<u-field label="身份证号" v-model="formData.id_card" label-width="200" :border-bottom="false" placeholder="请输入身份证号码" required />
				</view>
			
				<view class="bottom-area">
				    <view class="submit-btn space-top">
				        <button class="btn-style" @click="submit()">提交</button>
				    </view>
				</view>
			</view>
        </view>
	</view>
</template>

<script>
import {updateRealUser} from '@/api/user'

export default {
    data() {
        return {
			formData: {
				real_name: '',
				id_card: ''
			}
        };
    },
    methods: {
        async submit(){
			if(!this.formData.real_name){
				this.$toast({
					title:'请输入姓名'
				})
				return
			}
			
			if(!this.$u.test.idCard(this.formData.id_card)){
				this.$toast({
					title:'请输入有效的身份证号'
				})
				return
			}
			
			const {
				data,
				code,
				msg
			} = await updateRealUser({
				real_name: this.formData.real_name,
				id_card: this.formData.id_card
			})
			
			if(code == 1) {
				this.$toast({
					title: '提交完成'
				})
				uni.$emit("refreshRealUser", {
					flag: true
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 500)
			}
        }
    }
};
</script>

<style scoped lang="scss">
.submit-page {
    width: 100%;
    height: 100%;
    background: #f8f8f8;
	
	.info-tab {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 68rpx;
		margin: 20rpx 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
		
		>view {
			text-align: center;
			flex: 2;
		}
	}
	
    .form-area {
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;

        .basic-info {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            background: #fff;
            border-radius: 10rpx;
            margin-bottom: 20rpx;
		   .uplader-upload {
				position: relative;
				width: 264rpx;
				height: 200rpx;
				padding-top: 40rpx;
				text-align: center;
				margin: 11rpx;
				border: 2px dashed #e5e5e5;
				background-color: #FFFFFF;

				>view {
					color: #BBB;
				}
			}
            .title-text {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 14rpx 0;
                .text-style {
                    font-size: 34rpx;
                    color: #000;
                    font-weight: 600;
                }
            }
        }
        
		.refuse {
			text-align: center;
			color: #9c9c9c;
			font-size: 24rpx;
			margin-top: 30rpx;
			text-decoration: underline;
		}
		
		.bottom-area {
            width: 100%;
            .note-text {
                width: 100%;
                padding: 10rpx 0;
                display: flex;
                justify-content: center;
                align-items: center;
                .text-style {
                    font-size: 28rpx;
                    color: #9c9c9c;
                }
            }
            .submit-btn {
                width: 90%;
				margin: 0 auto;
                .btn-style {
                    width: 100%;
                    border: none;
                    border-radius: 999rpx;
                    background: #fb2d2d;
                    color: #fdf8f4;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
				.disabled-style {
					background: #ccc;
					border-radius: 999rpx;
					color: #9c9c9c;
				}
				.btn-success-style {
					background: linear-gradient(#12c96e 0%, #0abd57 50.76%, #03b240 100%);
					color: #fff;
					border-radius: 999rpx;
					position: fixed;
					bottom: 40rpx;
					width: 90%;
					left: 50%;
					transform: translateX(-50%);
				} 
            }
        }
    }
	
	.wholesale-price-btn {
	    width: 90%;
		margin: 0 auto;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	    .wholesale-price-btn-style {
	        width: 100%;
	        border: none;
	        border-radius: 999rpx;
	        background: #fb2d2d;
	        color: #fdf8f4;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	    }
		.wholesale-price-disabled-style {
			background: #ccc;
			border-radius: 999rpx;
			color: #9c9c9c;
		}
		.wholesale-price-success-style {
			background: linear-gradient(#12c96e 0%, #0abd57 50.76%, #03b240 100%);
			color: #fff;
			border-radius: 999rpx;
		} 
	}
	
	.space-top {
		padding:30rpx 0 40rpx 0;
	}
}
</style>