lanan-repair/pages/my/register.vue

<template>
	<view class="container">
		<VNavigationBar title-color="#333" background-color="#fff" title="信息填写"></VNavigationBar>
		<view class="body">
			<view class="formItem">
				<view class="formLabel">姓名</view>
				<view class="formContainer">
					<input placeholder="请填写你的真实姓名" type="text" />
				</view>
			</view>
			<view class="formItem">
				<view class="formLabel">性别</view>
				<view class="formContainer">
					<radio-group class="radioGroup">
						<label class="radio">
							<radio activeBackgroundColor="#009EDA" value="r1" checked="true" />男
						</label>
						<label class="radio">
							<radio activeBackgroundColor="#009EDA" value="r2" />女
						</label>
					</radio-group>
				</view>
			</view>
			<view class="formItem">
				<view class="formLabel">省份</view>
				<view class="formContainer">
					<picker :range="addressRange" mode="multiSelector" @columnchange="addressColumnChangeFun">
						<view class="formPicker">
							<input class="formPickerInput" type="text" disabled="true" placeholder="请选择所在省份/城市/区" />
							<image class="formPickerBtn" src="../../static/icons/homeInfoMore.png" mode="aspectFit">
							</image>
						</view>
					</picker>
				</view>
			</view>
			<view class="formItem">
				<view class="formLabel">详细地址</view>
				<view class="formContainer">
					<picker :range="detailAddress" mode="multiSelector" @columnchange="detailColumnChangeFun">
						<view class="formPicker">
							<input class="formPickerInput" type="text" disabled="true" placeholder="请选择所在街道/小区" />
							<image class="formPickerBtn" src="../../static/icons/homeInfoMore.png" mode="aspectFit">
							</image>
						</view>
					</picker>
				</view>
			</view>
			<view class="formItem">
				<view class="formLabel">上传图片</view>
				<view class="formContainer">
					<view class="">
						<uni-file-picker :image-styles="{width: 80, height: 80}" v-model="imageValue"
							fileMediatype="image" limit="1" mode="grid" @select="select" @progress="progress"
							@success="success" @fail="fail">
							<image style="width: 160rpx;height: 160rpx;" src="../../static/icons/addImageIcon.png"
								mode="aspectFit"></image>
						</uni-file-picker>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'

	export default {
		components: {
			VNavigationBar
		},
		data() {
			return {
				detailAddress: [
					['a', 'b'],
					['b', 'a']
				],
				addressRange: [
					['山东'],
					['济南'],
					['历下区']
				]
			};
		},
		methods: {
			detailColumnChangeFun({
				detail
			}) {
				if (detail.column === 0) {
					// 动态配置第二列
					this.$set(this.detailAddress, 1, ['m', 'n'])
				}
			},
			addressColumnChangeFun({
				detail
			}) {
				if (detail.column === 0) {
					// 动态配置第二列
					this.$set(this.detailAddress, 1, ['济宁'])
					// 动态配置第三列
					this.$set(this.detailAddress, 2, ['任城'])
				} else if (detail.column === 1) {
					// 动态配置第三列
					this.$set(this.detailAddress, 2, ['任城'])
				}
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;

		.body {
			flex: 1;
			height: 0;
			overflow: auto;
			padding: 20rpx 0;
		}

		.formItem {
			padding: 40rpx 0;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #EEEEEE;
		}

		.formLabel {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding-bottom: 20rpx;
		}

		.radioGroup {
			display: flex;
			align-items: center;
			column-gap: 100rpx;
		}

		.radio {
			display: flex;
			align-items: center;
			column-gap: 20rpx;
		}

		/* #ifdef MP-WEIXIN */
		radio {
			filter: hue-rotate(90deg);
		}

		/* #endif */
		.formPicker {
			display: flex;
			align-items: center;
			column-gap: 20rpx;
		}

		.formPickerInput {
			flex: 1;
			width: 0;
		}

		.formPickerBtn {
			width: 28rpx;
			height: 28rpx;
		}
	}
</style>