pet_uni/pages/AddrDetail/index.vue

<template>
	<view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
	<HeaderNav title="新增地址" :is-back="true"></HeaderNav>
	<view class="app-wallpaper">
		<view class="container-background-group">
			<view class="container-background-content">
				<image />
				<u--form labelWidth="auto" labelPosition="left" :model="model1" :rules="rules" ref="form1">
					<u-form-item label="家长姓名" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.name" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="家长电话" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.name" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="省市区" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
						ref="item1">
						<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择"
							border="none" inputAlign="right"></u--input>
						<template #right>
							<u-icon name="arrow-right"></u-icon>
						</template>
					</u-form-item>
					
					<u-form-item labelPosition="top" label="详细地址" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
						ref="item1">
						<template v-slot:label>
							<view class="xq-label">详细地址</view>
							<u--textarea v-model="model1.userInfo.sex" placeholder="请填写详细地址信息,精确到门牌号" ></u--textarea>
						</template>
					</u-form-item>
					<u-form-item label="门锁密码" prop="userInfo.name" borderBottom ref="item1" inputAlign="right">
						<u-radio-group
						    v-model="radiovalue1"
						    placement="column"
						    @change="groupChange"
						  >
						    <u-radio
						      :customStyle="{marginBottom: '8px'}"
						      v-for="(item, index) in radiolist1"
						      :key="index"
						      :label="item.name"
						      :name="item.name"
						      @change="radioChange"
						    >
						    </u-radio>
						  </u-radio-group>
					</u-form-item>
					<u-form-item label="普通锁" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.name" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item>
						<MzButton class="col-12 row submit-button"
						button-width="317.2rpx"
						button-color="#4DC3B8"
						font-color="#FFFFFF"
						title="保存地址"
						></MzButton>
					</u-form-item>
				</u--form>
				<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
					@close="showSex = false" @select="sexSelect">
				</u-action-sheet>
			</view>
			<view class="container-background-box">
				<view class="container-background"></view>
			</view>
		</view>
	</view>

	<!-- <RightNav></RightNav> -->
</template>

<script>
	import {
		imghost
	} from '@/config/host.js';
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '@/components/MzButton/Index.vue';
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				staticImage: {
					orderCardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage: imghost + '/static/image/background.png',
				},
				radiolist1:[{
					name: '普通锁',
					disabled: true,
				  },
				  {
					name: '密码锁',
					disabled: false,
				  }],
				showSex: false,
				model1: {
					userInfo: {
						name: 'uview-plus UI',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		onLoad() {

		},
		methods: {

		},
		onPageScroll(res) {
			if (res.scrollTop <= 20) {
				uni.$emit('isTop', true);
			} else {
				uni.$emit('isTop', false);
			}
		},
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop +
			// api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		},

	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>