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 :src="staticImage.addrDetailTitle" class="img" mode="widthFix"/>
				<u-form labelWidth="auto" labelPosition="left" :model="address" ref="form1">
					<u-form-item label="家长姓名" prop="address.name" borderBottom ref="item1">
						<u-input v-model="address.name" border="none" inputAlign="right" placeholder="请填写家长姓名"></u-input>
					</u-form-item>
					<u-form-item label="家长电话" prop="address.phone" borderBottom ref="item1">
						<u-input v-model="address.phone" border="none" inputAlign="right" placeholder="请填写联系电话"></u-input>
					</u-form-item>
					<u-form-item label="所在位置" prop="address.position" borderBottom ref="item1">
<!--            <view class="" @click="selectAddress">{{ address.position||'请选择位置' }}</view>-->
              <u-text suffix-icon="arrow-right" icon-style="align-items:center;font-size:28rpx;" line-height="28" :text="address.position||'请选择位置'" size="28" :color="address.position?'#636363':'#636363'" align="right" @click="selectAddress"></u-text>
					</u-form-item>
<!--					<u-form-item label="省市区" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"-->
<!--						ref="item1">-->
<!--						<u&#45;&#45;input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择"-->
<!--							border="none" inputAlign="right"></u&#45;&#45;input>-->
<!--						<template #right>-->
<!--							<u-icon name="arrow-right"></u-icon>-->
<!--						</template>-->
<!--					</u-form-item>-->
					
					<u-form-item label="" prop="address.info" :borderBottom="false" ref="item1" class="row">
						<view class="xq-label">详细地址</view>
						<textarea class="xq-textarea" cols="30" rows="10" v-model="address.info" placeholder="请填写详细地址信息,精确到门牌号"></textarea>
					</u-form-item>
					<u-form-item label="锁类型" prop="address.lock_type" borderBottom ref="item1" inputAlign="right" style="border-bottom:none;">
						<view class="radio-group row">
							<view class="radio-option row " :class="{active:item.disabled}" v-for="(item,index) in radiolist1" @click="checkLock(index, item)">
								<view class="radio-circle">
									<view class="radio-circle-in"></view>
								</view>
								<view class="radio-label">
									{{item.name}}
								</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="是否默认" prop="address.is_init" borderBottom ref="item1" inputAlign="right" style="border-bottom:none;">
						<view class="radio-group row">
							<view class="radio-option row " :class="{active:item.disabled}" v-for="(item,index) in radiolist2" @click="checkDefault(index, item)">
								<view class="radio-circle">
									<view class="radio-circle-in"></view>
								</view>
								<view class="radio-label">
									{{item.name}}
								</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item :label="address.lock_type === 1 ? '开锁密码' : '钥匙位置'" prop="address.open_info" borderBottom ref="item1">
						<u--input v-model="address.open_info" border="none" inputAlign="right" :placeholder="'请填写' + (address.lock_type === 1 ? '开锁密码' : '钥匙位置')"></u--input>
					</u-form-item>
					<u-form-item>
						<view @click="submit()">
							<MzButton class="col-12 row submit-button"
												button-width="317.2rpx"
												button-color="#4DC3B8"
												font-color="#FFFFFF"
												title="保存地址"
							></MzButton>
						</view>
					</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';
	import log from "@/utils/log";
	import {getDetail, saveAddress} from "@/api/address";
	import functions from "@/utils/functions";
  import api from "@/utils/functions";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				staticImage: {
					orderCardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage: imghost + '/static/image/background.png',
					addrDetailTitle: imghost + '/static/image/addr-detail-title.png',
				},
				radiolist1:[{
					name: '普通锁',
					value: 2,
					disabled: true,
				  },
				  {
					name: '密码锁',
					value: 1,
					disabled: false,
				  }],
				radiolist2:[{
					name: '否',
					value: 0,
					disabled: true,
				  },
				  {
					name: '是',
					value: 1,
					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,
				address:{
					phone: "",
					name: "",
					province: "四川省",
					city: "成都市",
					district: "武侯区",
					info: "",
					is_init: 0,
					lock_type: 2,
					open_info: "",
					lng: "80",
					lat: "80"
				},
			}
		},
		onLoad(options) {
			log(options);
			if (options.hasOwnProperty('id')){
				this.getDetail(options.id);
			}
		},
		methods: {
			checkLock(index, item){
				this.address.lock_type = item.value;
				this.radiolist1.forEach((item,num) => {
					if(index === num){
						this.radiolist1[num].disabled = true;
					}else{
						this.radiolist1[num].disabled = false;
					}
				})
			},checkDefault(index, item){
				this.address.is_init = item.value;
				this.radiolist2.forEach((item,num) => {
					if(index === num){
						this.radiolist2[num].disabled = true;
					}else{
						this.radiolist2[num].disabled = false;
					}
				})
			},
			getDetail(id){
				getDetail(id).then(data => {
					this.address = data.data;
          this.address.position = data.data.province+data.data.city+data.data.district;
				})
			},
      selectAddress() {
        let that = this;
        uni.getLocation({
          type: 'gcj02',
          success: function (res1) {
            uni.chooseLocation({
              latitude:res1.latitude||'',
              longitude:res1.longitude||'',
              success: (res) => {
                // that.lat = res.latitude;
                // that.lng = res.longitude;
                // that.model.line.coordinate = res.latitude+','+res.longitude;
                // that.model.line.address  = res.name+res.address;

                // this.getRegionFn(res);
                api.getloction({activedeta:{
                    city:'',
                    address:res.address
                }}).then(data => {
                    let address = data.address_components;
                    console.log('address',address)
                    that.address.province = address.province;
                    that.address.city = address.city;
                    that.address.district = address.district;
                    that.address.position = address.province+address.city+address.district;
                    that.address.info = res.name;
                    that.address.lat = res.latitude;
                    that.address.lng = res.longitude;
                });

              },
              fail: (err) => {
                console.log(err)
              }
            });
          },
          fail: (err) => {
            console.log(err)
          }
        });

      },
			submit(){
				log(this.address);
				saveAddress(this.address).then(() => {
						functions.success("成功").then(() => {
							uni.navigateBack();
						})
				});
			}
		},
		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>