You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
8.8 KiB
280 lines
8.8 KiB
<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--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 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 + '/order-card-background.png', |
|
wallpaperBgImage: imghost + '/background.png', |
|
addrDetailTitle: imghost + '/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> |