remember-word/pages/mine/realName/realName.vue

<template>
	<view class="main">
		<navBar navTitle="" :hasLogo="true" :backToUrl="'/pages/mine/setting/setting'" :backBackGroundColor="'#3D553D'" />
		<view class="input-box">
			<view class="text">{{ $t('realname.conduct') }}</view>
			<view class="formItem">
				<view style="color: #434343;font-size: 26upx;">{{ $t('buyVerfy.username') }}：</view>
				<u-input v-model="realName" shape="circle" border="none" class="login-input"></u-input>
			</view>
			<view class="formItem">
				<view style="color:#434343;font-size: 26upx;">{{ $t('buyVerfy.idNum') }}：</view>
				<u-input v-model="idNum" shape="circle" border="none" class="login-input"></u-input>
			</view>
		</view>
		<u-button :text="$t('buyVerfy.done')" color="#699A70" @click="save" class="btn"></u-button>
		<!-- <view @click="cancel" class="cancel">{{ $t('buyVerfy.cancel') }}</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			idNum: '',
			realName: ''
		};
	},
	methods: {
		cancel() {
			uni.navigateTo({
				url: '/pages/mine/setting/setting'
			})
		},
		async save() {
			if (!this.idNum || !this.realName) {
				return this.$refs.uToast.show({
					message: '姓名和身份证号码不能为空',
					type: 'error',
				})
			}
			let data = { idNum: this.idNum, realName: this.realName }
			let res = await this.$api.mine.update(data);
			if (res.status === 0) {
				this.$refs.uToast.show({
					message: this.$t('buyVerfy.done'),
					type: 'success',
				})
				this.cancel()
			} else {
				this.$refs.uToast.show({
					message: res.msg,
					type: 'error',
				})
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background: url('@/static/image/home/new_bg.png') no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: 100vh;
	box-sizing: border-box;
}

/deep/ .u-input__content__field-wrapper__field {
	font-size: 24upx !important;
	margin-left: 10upx;
}

.main {
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;

	.title {
		margin-top: 40upx;
		display: flex;
		justify-content: center;

		image {
			width: 201upx;
			height: 60upx;
		}
	}

	.btn {
		height: 56rpx;
		width: 600upx;
		border-radius: 40rpx;
		margin-top: 30rpx;
		position: absolute;
		bottom: 120upx;
		left: 10%;
	}

	.cancel {
		text-align: center;
		height: 56rpx;
		width: 600upx;
		border-radius: 40rpx;
		margin-top: 30rpx;
		position: absolute;
		bottom: 40upx;
		left: 10%;
	}

	.input-box {
		position: absolute;
		top: 258upx;
		width: 638upx;

		.text {
			display: flex;
			justify-content: center;
			font-size: 45upx;
			margin-bottom: 250upx;
			color: #434343;
		}

		.formItem {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40upx;
		}

		.login-input {
			height: 60upx;
			background-color: rgba(135, 135, 135, 0.5);
			margin-left: 10upx;
			width: 482upx;

			/deep/ .uni-input-input {
				color: #fff;
				padding: 0 20rpx;
			}
		}

		.close {
			width: 24upx;
			height: 24upx;
			margin-right: 20upx;
		}
	}
}
</style>