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.
536 lines
11 KiB
536 lines
11 KiB
<template>
|
|
<view class="view-main">
|
|
<map :latitude="latitude" :longitude="longitude" scale="16" show-location style="width: 100%; height: 38vh;">
|
|
<image class="map-marker" :src="markerIcon"></image>
|
|
</map>
|
|
<view class="page-con">
|
|
<view class="con-hd">
|
|
<view class="choose-address" v-if="!addressInfo || !addressInfo.address" @click="chooseAddressView">
|
|
选择收货地址 >
|
|
</view>
|
|
<view class="choose-address2" v-else>
|
|
<view class="address2-l">
|
|
<!-- <view class="address2-lhd">{{addressInfo.title}}</view> -->
|
|
<view class="address2-lhd">{{addressInfo.address}}</view>
|
|
</view>
|
|
<view class="address2-r" @click="chooseAddressView">修改地址</view>
|
|
</view>
|
|
</view>
|
|
<view class="con-bd">
|
|
<view class="con-bd-item">
|
|
<view class="con-bd-item-name">门牌号</view>
|
|
<view class="con-bd-item-con">
|
|
<input type="text" v-model="formData.detailAddress" placeholder="详细地址，例如1层101室"
|
|
placeholder-class="input-placeholder" />
|
|
</view>
|
|
</view>
|
|
<!-- <view class="con-bd-item">
|
|
<view class="con-bd-item-name">标签</view>
|
|
<view class="con-bd-item-con">
|
|
<view :class="formData.lableName == item ? 'lable-item lable-item-on':'lable-item'"
|
|
v-for="(item,index) in labelData" :key="index" @click="chooseLable(item)">{{item}}</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="con-bd-item">
|
|
<view class="con-bd-item-name">联系人</view>
|
|
<view class="con-bd-item-con">
|
|
<input type="text" v-model="formData.userName" placeholder="请填写收货人姓名"
|
|
placeholder-class="input-placeholder" />
|
|
<!-- <view class="con-bd-sex-box" @click="chooseSex(1)">
|
|
<image class="choose-sex-icon" :src="formData.sexType == 1 ? sele2Icon : noseleIcon"
|
|
mode=""></image>
|
|
先生
|
|
</view>
|
|
<view class="con-bd-sex-box" @click="chooseSex(2)">
|
|
<image class="choose-sex-icon" :src="formData.sexType == 2 ? sele2Icon : noseleIcon"
|
|
mode=""></image>
|
|
女士
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="con-bd-item">
|
|
<view class="con-bd-item-name">手机号</view>
|
|
<view class="con-bd-item-con">
|
|
<input type="number" maxlength="11" v-model="formData.userPhone" placeholder="请填写收货人手机号码"
|
|
placeholder-class="input-placeholder" />
|
|
</view>
|
|
</view>
|
|
<view class="con-bd-agree" @click="changeAgree">
|
|
<image class="agreeicon" :src="agreeState ? seleIcon : noseleIcon" mode=""></image>
|
|
<view class="agreetext">设为默认地址</view>
|
|
</view>
|
|
<view class="con-ft-btn"
|
|
:class="{'con-ft-btn1':addressInfo && addressInfo.address,'con-ft-btn3':!addressInfo || !addressInfo.address}"
|
|
@click="submitAddress">
|
|
保存地址</view>
|
|
<!-- <view class="con-ft-btn con-ft-btn2" @click="deleteAddress">删除地址</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
detailAddress: '',
|
|
userName: '',
|
|
userPhone: '',
|
|
lableName: '家',
|
|
sexType: 1, //1 先生 2 女士
|
|
},
|
|
labelData: ['家', '公司', '学校', '父母家'],
|
|
addressInfo: {}, //选中的地址信息
|
|
agreeState: false, //是否是默认地址
|
|
longitude: null,
|
|
latitude: null,
|
|
markerIcon: require('../../static/marker.png'),
|
|
seleIcon: require('../../static/sele.png'),
|
|
sele2Icon: require('../../static/sele2.png'),
|
|
noseleIcon: require('../../static/no-sele.png'),
|
|
oldObj: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLocation()
|
|
},
|
|
methods: {
|
|
//数据回显时使用此方法
|
|
setData(obj) {
|
|
this.oldObj = obj
|
|
this.formData.detailAddress = obj.detailAddress
|
|
this.formData.userName = obj.userName
|
|
this.formData.userPhone = obj.userPhone
|
|
this.formData.lableName = obj.lableName
|
|
this.formData.sexType = obj.sexType
|
|
this.addressInfo.title = obj.title
|
|
this.addressInfo.address = obj.address
|
|
this.addressInfo.latitude = obj.latitude
|
|
this.addressInfo.longitude = obj.longitude
|
|
this.agreeState = obj.agreeState
|
|
},
|
|
//获取当前的地理位置
|
|
getLocation() {
|
|
uni.showLoading({
|
|
title: '正在获取定位中...',
|
|
})
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
isHighAccuracy: true,
|
|
geocode: 'true',
|
|
highAccuracyExpireTime: 3500,
|
|
success: (res) => {
|
|
uni.hideLoading();
|
|
this.longitude = res.longitude;
|
|
this.latitude = res.latitude;
|
|
},
|
|
fail: (res) => {
|
|
if (res.errMsg == "getLocation:fail auth deny") {
|
|
uni.showModal({
|
|
content: '检测到您没打开获取信息功能权限，是否去设置打开？',
|
|
confirmText: "确认",
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.openSetting({
|
|
success: (res) => {}
|
|
})
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//保存地址
|
|
submitAddress() {
|
|
if (!this.addressInfo.latitude) {
|
|
uni.showToast({
|
|
title: '请选择收货地址',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.formData.detailAddress) {
|
|
uni.showToast({
|
|
title: '请输入门牌号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.formData.userName) {
|
|
uni.showToast({
|
|
title: '请输入联系人',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.formData.userPhone) {
|
|
uni.showToast({
|
|
title: '请输入手机号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
let obj = {
|
|
...this.formData,
|
|
...this.addressInfo
|
|
}
|
|
obj.agreeState = this.agreeState
|
|
this.$emit('submit', obj)
|
|
},
|
|
//删除地址
|
|
deleteAddress() {
|
|
this.$emit('detele', this.oldObj)
|
|
},
|
|
//选择地址、修改编辑地址
|
|
chooseAddressView() {
|
|
uni.chooseLocation({
|
|
success: res => {
|
|
console.log(res)
|
|
if (!res.name || !res.address || !res.latitude || !res.longitude) return
|
|
let addressObj = {
|
|
title: res.name,
|
|
address: res.address,
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
}
|
|
this.latitude = res.latitude
|
|
this.longitude = res.longitude
|
|
this.addressInfo = addressObj
|
|
},
|
|
fail: res => {
|
|
console.log(res)
|
|
}
|
|
});
|
|
},
|
|
//联系人性别选择
|
|
chooseSex(type) {
|
|
this.formData.sexType = type
|
|
},
|
|
//标签选择
|
|
chooseLable(item) {
|
|
this.formData.lableName = item
|
|
},
|
|
//点击隐私协议
|
|
changeAgree() {
|
|
this.agreeState = !this.agreeState
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.view-main {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
.map-marker {
|
|
width: 44rpx;
|
|
height: 62rpx;
|
|
position: absolute;
|
|
top: 15vh;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.map-tip {
|
|
font-size: 20rpx;
|
|
color: #b6b6b6;
|
|
line-height: 42rpx;
|
|
padding: 0 20rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 30rpx;
|
|
box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.poiss-box {
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
background-color: #FFFFFF;
|
|
font-size: 26rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.poiss-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: calc(100% - 48rpx);
|
|
height: 100rpx;
|
|
padding: 0 24rpx;
|
|
border-bottom: 1px solid #f9f9f9;
|
|
}
|
|
|
|
.poiss-item-l {
|
|
width: calc(100% - 184rpx);
|
|
}
|
|
|
|
.poiss-item-lhd {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
line-height: 48rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.poiss-item-lbd {
|
|
font-size: 28rpx;
|
|
color: #b6b6b6;
|
|
line-height: 42rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.poiss-item-r {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin: 0 30rpx;
|
|
}
|
|
|
|
.primary-btn {
|
|
width: 688rpx;
|
|
height: 88rpx;
|
|
margin: 0 auto;
|
|
margin-top: 28rpx;
|
|
background: #6A8A2D
|
|
;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-con {
|
|
width: 702rpx;
|
|
height: 60vh;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 24rpx;
|
|
}
|
|
|
|
.con-hd {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 702rpx;
|
|
height: 128rpx;
|
|
margin: 0 auto;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(88, 102, 123, 0.2);
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.choose-address {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 92%;
|
|
height: 64rpx;
|
|
margin: 0 auto;
|
|
border-radius: 12rpx;
|
|
border: 2rpx solid #6A8A2D
|
|
;
|
|
font-size: 32rpx;
|
|
color: #6A8A2D
|
|
;
|
|
}
|
|
|
|
.choose-address2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: calc(100% - 48rpx);
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.address2-l {
|
|
width: calc(100% - 184rpx);
|
|
}
|
|
|
|
.address2-lhd {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 48rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.address2-lbd {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
line-height: 42rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.address2-r {
|
|
width: 144rpx;
|
|
height: 60rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
border: 2rpx solid #6A8A2D
|
|
;
|
|
font-size: 28rpx;
|
|
color: #6A8A2D
|
|
;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.con-bd {
|
|
width: 100%;
|
|
height: calc(90vh - 160rpx);
|
|
padding: 8rpx 24rpx 0;
|
|
margin-top: 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.con-bd-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 110rpx;
|
|
}
|
|
|
|
.con-bd-item-name {
|
|
width: 120rpx;
|
|
height: 110rpx;
|
|
text-align: left;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 110rpx;
|
|
}
|
|
|
|
.con-bd-item-con {
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(100% - 120rpx);
|
|
height: 108rpx;
|
|
border-bottom: 2rpx solid #F7F7F7;
|
|
}
|
|
|
|
.con-bd-item-con input {
|
|
width: 100%;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.lable-item {
|
|
width: 88rpx;
|
|
height: 48rpx;
|
|
margin-right: 18rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 6rpx;
|
|
border: 2rpx solid #E3E3E3;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.lable-item-on {
|
|
background: #6A8A2D
|
|
!important;
|
|
border: 2rpx solid #6A8A2D
|
|
;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
.con-bd-item-con2 input {
|
|
width: 50%;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.con-bd-sex-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 16rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.choose-sex-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.con-bd-agree {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-top: 40rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.agreeicon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 20rpx;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.agreetext {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.con-ft-btn {
|
|
width: 644rpx;
|
|
height: 88rpx;
|
|
margin-top: 94rpx;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.con-ft-btn:last-child {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.con-ft-btn1 {
|
|
background: #6A8A2D
|
|
;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.con-ft-btn2 {
|
|
background: #FFFFFF;
|
|
border: 2rpx solid #DEDEDE;
|
|
color: #666666;
|
|
}
|
|
|
|
.con-ft-btn3 {
|
|
background: #DEDEDE;
|
|
border: 2rpx solid #DEDEDE;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.input-placeholder {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
</style>
|