hire-wx-houxuanren/pagesD/change-name.vue

<template>
	<view class="change-name">
		<view class="name-box u-flex u-row-between">
			<input type="text" maxlength="12" placeholder="请输入姓名" v-model="name.virtual_name">
			<text>12</text>
		</view>
		<view class="name-tips u-flex">
			<u-checkbox v-model="value" size="26" active-color="#0C66C2" shape="circle">
				<text class="text">显示先生/女士</text>
			</u-checkbox>
		</view>
		<view class="user-down">
			<view class="down-btn u-flex">
				<text @click="save">保存</text>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: false,
				name: {
					name: '',
					virtual_name: ''
				}
			}
		},
		onLoad(option) {
			this.name = JSON.parse(option.name)
			if (this.name.name != this.name.virtual_name) {
				this.value = true
			} else {
				this.value = false
			}
		},
		methods: {
			save() {
				if (!this.name.virtual_name) {
					this.$u.toast("请输入姓名")
					return
				}
				if (this.value) {
					this.name.name = ''
				} else {
					this.name.name = this.name.virtual_name
				}
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('getname', this.name);
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.change-name {
		padding: 0 32rpx;

		.user-down {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			width: 750rpx;
			background-color: #fff;

			.down-btn {
				padding: 8rpx 32rpx;

				text {
					line-height: 88rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					width: 100%;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;

				}
			}
		}

		.name-tips {
			padding: 30rpx 0;

			.text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.name-box {
			height: 110rpx;
			border-bottom: 2rpx solid #F0F0F0;

			input {
				flex: 1;
				font-size: 32rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #ACACAC;
			}
		}
	}
</style>