wx-qhb/pageC/internationalAddress/internationalAddress.vue

<template>
	<view class="page">
		<view class="content">
			<view class="title">
				<text class="title-left">{{ i18n.contacts }}</text>
			</view>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" ref="uForm">
				<u-form-item labelWidth="150rpx" @click="showDialog = true" :label="i18n.country" borderBottom
					ref="item1">

					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff"
						:placeholder="i18n.selection" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" :placeholder="i18n.goods" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="150rpx" :label="i18n.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" :placeholder="i18n.pleasePhoneNumber"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.postalCode" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" :placeholder="i18n.PleacePostalCode"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.city" borderBottom @click="show = true" ref="item1">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff"
						:placeholder="i18n.township" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item labelWidth="150rpx" :label="i18n.detailed" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" :placeholder="i18n.sect" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="150rpx" :label="i18n.companyName" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" :placeholder="i18n.company" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.email" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" :placeholder="i18n.pleaseEmail" border="none"></u--input>
				</u-form-item>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="item-left">
						<image src="../../static/mine/330.png" class="address-icon" mode=""></image>
						<text>{{ i18n.addressBook }}</text>
					</view>
					<text style="font-size: 24rpx; color: #333;">{{i18n.empty}}</text>
				</view>
			</u--form>

		</view>
		<SelectCity :show="show" @close="close" />
		<view class="footer">
			<button class="save">{{i18n.preserve}}</button>
		</view>

		<u-picker :show="showDialog" :columns="columns" ></u-picker>
	</view>
</template>

<script>
	import SelectCity from '../addEditAddress/component/selectCity.vue';
	export default {
		components: {
			SelectCity
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		data() {
			return {
				show: false,
				showDialog: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			close() {
				this.show = false
				this.showDialog = false
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.i18n.newAddress
			})
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 24rpx;

		.content {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 0 24rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				border-bottom: 2rpx solid rgba(151, 151, 151, .1);

				.title-left {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}

				.title-icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}

				.title-right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(51, 51, 51, .6);
				}
			}

			.company {
				height: 102rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid rgba(151, 151, 151, .1);
			}
		}

		.item-left {
			font-size: 24rpx;
			color: #333;
			display: flex;
			align-items: center;
			height: 86rpx;

			.address-icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}

		.footer {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			height: 146rpx;
			width: 750rpx;
			left: 0;
			padding-top: 20rpx;

			.save {
				width: 702rpx;
				margin: 0 auto;
				background-color: #f83224;
				color: #fff;
				border-radius: 40rpx;
			}
		}
	}
</style>