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.
752 lines
23 KiB
752 lines
23 KiB
<template>
|
|
<view class="container" :style="{paddingTop: (statusBarHeight + 88) + 'rpx'}">
|
|
<!-- 顶部导航 -->
|
|
<view class="nav-bar" :style="{height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px'}">
|
|
<view class="back" @tap="goBack">
|
|
<uni-icons type="left" size="20"></uni-icons>
|
|
</view>
|
|
<text class="title">选择寄件地址</text>
|
|
</view>
|
|
|
|
<!-- 地址列表 -->
|
|
<view class="address-list">
|
|
<view
|
|
class="address-item"
|
|
@click="selectAddress(item)"
|
|
v-for="(item, index) in addressList"
|
|
:key="index"
|
|
>
|
|
<view class="address-header">
|
|
<text class="name">{{item.name}}</text>
|
|
<text class="phone">{{item.phone}}</text>
|
|
<text v-if="item.defaultFlag === 'Y'" class="default-tag">默认</text>
|
|
</view>
|
|
<view class="address-text">{{item.address}} {{item.addressDetails}}</view>
|
|
<view class="dashed-line"></view>
|
|
<view class="address-actions">
|
|
<view class="action" @tap="setDefault(item.id)">
|
|
<view class="circle" :class="{ active: item.defaultFlag === 'Y' }">
|
|
<text v-if="item.defaultFlag === 'Y'" class="check">✔</text>
|
|
</view>
|
|
<text :class="{ 'active-text': item.defaultFlag === 'Y' }">默认地址</text>
|
|
</view>
|
|
<view class="action" @tap="editAddress(item)">
|
|
<uni-icons type="compose" size="22" color="#bbb" />
|
|
<text>编辑</text>
|
|
</view>
|
|
<view class="action" @tap="deleteAddress(item.id)">
|
|
<uni-icons type="trash" size="22" color="#bbb" />
|
|
<text>删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 新建地址按钮 -->
|
|
<view class="bottom-bar">
|
|
<button class="main-btn" @tap="goToAddAddress">新建地址</button>
|
|
</view>
|
|
|
|
<!-- 遮罩 -->
|
|
<view v-if="showAddressModal" class="modal-mask" @tap="closeAddressModal"></view>
|
|
<!-- 新建地址弹窗 -->
|
|
<view v-if="showAddressModal" class="address-modal">
|
|
<view class="modal-header">
|
|
<text class="close-btn" @tap="closeAddressModal">关闭</text>
|
|
<text class="modal-title">{{form.id ? '编辑地址' : '新建地址'}}</text>
|
|
</view>
|
|
<view class="modal-form">
|
|
<view class="form-item">
|
|
<text class="label">联系人</text>
|
|
<input class="input" v-model="form.name" placeholder="请输入" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">手机号</text>
|
|
<input class="input" v-model="form.phone" placeholder="请输入" />
|
|
</view>
|
|
<view class="form-item" @tap="selectRegion">
|
|
<text class="label">所在地区</text>
|
|
<view class="input region-input">
|
|
<text :class="{placeholder: !form.address}">
|
|
{{ form.address || '选择省市区街道' }}
|
|
</text>
|
|
<text class="arrow">></text>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">详细地址</text>
|
|
<input class="input" v-model="form.addressDetails" placeholder="小区楼栋、门牌号、村等" />
|
|
</view>
|
|
</view>
|
|
<button class="main-btn" @tap="saveAddress">保存</button>
|
|
</view>
|
|
|
|
<!-- 地区选择器弹窗 -->
|
|
<view v-if="showRegionPicker" class="region-modal">
|
|
<view class="modal-header">
|
|
<text class="close-btn" @tap="showRegionPicker = false">关闭</text>
|
|
<text class="modal-title">手动选择地区</text>
|
|
</view>
|
|
<view class="region-tip">
|
|
<text>请手动选择准确的省市区信息</text>
|
|
</view>
|
|
<view class="region-picker">
|
|
<picker-view style="height:300px;" :value="regionIndex" @change="onRegionChange">
|
|
<picker-view-column >
|
|
<view v-for="(item,index) in provinces" :key="index" class="item">{{item.name}}</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view v-for="(item,index) in cities" :key="index" class="item">{{item.name}}</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view v-for="(item,index) in districts" :key="index" class="item">{{item.name}}</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
<button class="main-btn" @tap="confirmRegion">确认</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import regionData from '@/pages/subcomponent/region-data.js'
|
|
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
|
|
|
|
export default {
|
|
mixins: [pullRefreshMixin],
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
addressList: [
|
|
|
|
],
|
|
batchMode: false,
|
|
selectedIndexes: [],
|
|
showAddressModal: false,
|
|
showRegionPicker: false,
|
|
form: {
|
|
name: '',
|
|
phone: '',
|
|
region: [],
|
|
address: '',
|
|
addressDetails: '',
|
|
latitude: '',
|
|
longitude: ''
|
|
},
|
|
provinces: regionData,
|
|
cities: [],
|
|
districts: [],
|
|
regionIndex: [0, 0, 0],
|
|
mode: ''
|
|
}
|
|
},
|
|
watch: {
|
|
regionIndex: {
|
|
handler(val) {
|
|
let pIdx = val[0] < this.provinces.length ? val[0] : 0
|
|
let cIdx = val[1] < (this.provinces[pIdx]?.children?.length || 0) ? val[1] : 0
|
|
this.cities = this.provinces[pIdx]?.children || []
|
|
this.districts = this.cities[cIdx]?.children || []
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getAddressList(() => {
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
},
|
|
onLoad(options) {
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
this.cities = this.provinces[0]?.children || []
|
|
this.districts = this.cities[0]?.children || []
|
|
this.regionIndex = [0, 0, 0]
|
|
this.getAddressList();
|
|
this.mode = options.mode || ''
|
|
},
|
|
methods: {
|
|
async onRefresh() {
|
|
// 模拟刷新数据
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
uni.stopPullRefresh()
|
|
},
|
|
getAddressList(callback) {
|
|
this.$api('getAddressList', {}, res => {
|
|
if (res && res.result && res.result.records) {
|
|
this.addressList = res.result.records;
|
|
}
|
|
if (typeof callback === 'function') callback();
|
|
});
|
|
},
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
startBatchDelete() {
|
|
this.batchMode = true
|
|
this.selectedIndexes = []
|
|
},
|
|
cancelBatchDelete() {
|
|
this.batchMode = false
|
|
this.selectedIndexes = []
|
|
},
|
|
selectItem(index) {
|
|
if (!this.batchMode) return
|
|
|
|
const idx = this.selectedIndexes.indexOf(index)
|
|
if (idx > -1) {
|
|
this.selectedIndexes.splice(idx, 1)
|
|
} else {
|
|
this.selectedIndexes.push(index)
|
|
}
|
|
},
|
|
confirmDelete() {
|
|
if (this.selectedIndexes.length === 0) return
|
|
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要删除选中的地址吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 从后往前删除，避免索引变化的问题
|
|
this.selectedIndexes.sort((a, b) => b - a).forEach(index => {
|
|
this.addressList.splice(index, 1)
|
|
})
|
|
this.batchMode = false
|
|
this.selectedIndexes = []
|
|
}
|
|
}
|
|
})
|
|
},
|
|
editAddress(item) {
|
|
this.showAddressModal = true
|
|
this.form = {
|
|
id: item.id,
|
|
name: item.name,
|
|
phone: item.phone,
|
|
region: [],
|
|
address: item.address,
|
|
addressDetails: item.addressDetails,
|
|
defaultFlag: item.defaultFlag,
|
|
latitude: item.latitude || '',
|
|
longitude: item.longitude || ''
|
|
}
|
|
this.regionIndex = [0, 0, 0]
|
|
this.cities = this.provinces[0]?.children || []
|
|
this.districts = this.cities[0]?.children || []
|
|
},
|
|
goToAddAddress() {
|
|
this.showAddressModal = true
|
|
this.form = {
|
|
id: undefined,
|
|
name: '',
|
|
phone: '',
|
|
region: [],
|
|
address: '',
|
|
addressDetails: '',
|
|
latitude: '',
|
|
longitude: ''
|
|
}
|
|
this.regionIndex = [0, 0, 0]
|
|
this.cities = this.provinces[0]?.children || []
|
|
this.districts = this.cities[0]?.children || []
|
|
},
|
|
selectAddress(address) {
|
|
if (this.mode === 'select') {
|
|
uni.$emit('addressSelected', {
|
|
id: address.id,
|
|
name: address.name,
|
|
phone: address.phone,
|
|
address: address.address,
|
|
addressDetails: address.addressDetails
|
|
})
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
closeAddressModal() {
|
|
this.showAddressModal = false
|
|
},
|
|
saveAddress() {
|
|
if (!this.form.name) return uni.showToast({ title: '请输入联系人', icon: 'none' })
|
|
if (!this.form.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' })
|
|
if (!this.form.address) return uni.showToast({ title: '请选择地区', icon: 'none' })
|
|
if (!this.form.addressDetails) return uni.showToast({ title: '请输入详细地址', icon: 'none' })
|
|
// 判断手机号是否合法
|
|
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
|
const params = {
|
|
name: this.form.name,
|
|
phone: this.form.phone,
|
|
address: this.form.address,
|
|
addressDetails: this.form.addressDetails,
|
|
defaultFlag: this.form.defaultFlag,
|
|
latitude: this.form.latitude,
|
|
longitude: this.form.longitude
|
|
}
|
|
if (this.form.id) params.id = this.form.id
|
|
this.$api('saveOrUpdateAddress', params, (res) => {
|
|
if(res.code == 200){
|
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
|
this.closeAddressModal()
|
|
// 保存成功后刷新地址列表
|
|
this.getAddressList()
|
|
}
|
|
})
|
|
},
|
|
onRegionChange(e) {
|
|
let [pIdx, cIdx, dIdx] = e.detail.value
|
|
if (pIdx !== this.regionIndex[0]) {
|
|
cIdx = 0
|
|
dIdx = 0
|
|
} else if (cIdx !== this.regionIndex[1]) {
|
|
dIdx = 0
|
|
}
|
|
this.regionIndex = [pIdx, cIdx, dIdx]
|
|
},
|
|
// 选择地区
|
|
selectRegion() {
|
|
// 首先检查位置权限
|
|
uni.getSetting({
|
|
success: (res) => {
|
|
if (res.authSetting['scope.userLocation'] === false) {
|
|
// 用户之前拒绝了位置权限，引导用户去设置
|
|
uni.showModal({
|
|
title: '位置权限',
|
|
content: '需要获取您的位置信息来选择地址，请在设置中开启位置权限',
|
|
confirmText: '去设置',
|
|
success: (modalRes) => {
|
|
if (modalRes.confirm) {
|
|
uni.openSetting()
|
|
} else {
|
|
// 用户拒绝去设置，直接打开区域选择器
|
|
this.showRegionPicker = true
|
|
}
|
|
},
|
|
fail: () => {
|
|
this.showRegionPicker = true
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
// 调用位置选择
|
|
uni.chooseLocation({
|
|
success: res => {
|
|
console.log(res);
|
|
|
|
this.form.latitude = res.latitude
|
|
this.form.longitude = res.longitude
|
|
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|
|
|
let address = ''
|
|
|
|
if (!res.address && res.name) { //用户直接选择城市的逻辑
|
|
address = res.name
|
|
}
|
|
if (res.address || res.name) {
|
|
address = res.address + res.name
|
|
}
|
|
|
|
if(!address){
|
|
return
|
|
}
|
|
|
|
let arr = address.match(reg)
|
|
|
|
// 判断是否提取到了省市县信息
|
|
if (!arr || arr.length < 2) {
|
|
// 提取不到完整的省市县信息，打开区域选择器
|
|
uni.showToast({
|
|
title: '地址信息不完整，请手动选择',
|
|
icon: 'none'
|
|
})
|
|
this.showRegionPicker = true
|
|
return
|
|
}
|
|
|
|
const province = arr[0] || ''
|
|
const city = arr[1] || ''
|
|
const district = arr[2] || ''
|
|
|
|
let detail = district || city || province || ''
|
|
|
|
this.form.addressDetails = address.substring(address.indexOf(detail) + detail.length)
|
|
this.form.address = `${province}${city}${district}`
|
|
|
|
// 尝试匹配到region数据中对应的省市区
|
|
this.matchRegionData(province, city, district)
|
|
},
|
|
fail(e) {
|
|
console.log("获取位置信息失败!", e)
|
|
|
|
// 根据错误类型给出不同提示
|
|
if (e.errMsg && e.errMsg.includes('auth deny')) {
|
|
uni.showModal({
|
|
title: '位置权限',
|
|
content: '需要获取您的位置信息来选择地址，请允许位置权限',
|
|
confirmText: '重新授权',
|
|
success: (modalRes) => {
|
|
if (modalRes.confirm) {
|
|
uni.openSetting()
|
|
} else {
|
|
this.showRegionPicker = true
|
|
}
|
|
}
|
|
})
|
|
} else if (e.errMsg && e.errMsg.includes('cancel')) {
|
|
// 用户取消选择位置，直接打开区域选择器
|
|
this.showRegionPicker = true
|
|
} else {
|
|
// 其他错误，提示并打开区域选择器
|
|
uni.showToast({
|
|
title: '获取位置失败，请手动选择',
|
|
icon: 'none'
|
|
})
|
|
this.showRegionPicker = true
|
|
}
|
|
}
|
|
})
|
|
},
|
|
fail: () => {
|
|
// 获取设置失败，直接打开区域选择器
|
|
this.showRegionPicker = true
|
|
}
|
|
})
|
|
},
|
|
|
|
// 匹配region数据
|
|
matchRegionData(provinceName, cityName, districtName) {
|
|
// 查找省份
|
|
const provinceIndex = this.provinces.findIndex(p =>
|
|
provinceName.includes(p.name) || p.name.includes(provinceName.replace(/省|市|自治区|自治州/g, ''))
|
|
)
|
|
|
|
if (provinceIndex === -1) {
|
|
this.regionIndex = [0, 0, 0]
|
|
return
|
|
}
|
|
|
|
this.cities = this.provinces[provinceIndex]?.children || []
|
|
|
|
// 查找城市
|
|
const cityIndex = this.cities.findIndex(c =>
|
|
cityName.includes(c.name) || c.name.includes(cityName.replace(/市|县|区/g, ''))
|
|
)
|
|
|
|
if (cityIndex === -1) {
|
|
this.regionIndex = [provinceIndex, 0, 0]
|
|
this.districts = this.cities[0]?.children || []
|
|
return
|
|
}
|
|
|
|
this.districts = this.cities[cityIndex]?.children || []
|
|
|
|
// 查找区县
|
|
const districtIndex = this.districts.findIndex(d =>
|
|
districtName.includes(d.name) || d.name.includes(districtName.replace(/县|区/g, ''))
|
|
)
|
|
|
|
this.regionIndex = [
|
|
provinceIndex,
|
|
cityIndex,
|
|
districtIndex > -1 ? districtIndex : 0
|
|
]
|
|
|
|
// 更新form.region
|
|
this.form.region = [
|
|
this.provinces[provinceIndex]?.code || '',
|
|
this.cities[cityIndex]?.code || '',
|
|
this.districts[districtIndex > -1 ? districtIndex : 0]?.code || ''
|
|
]
|
|
},
|
|
|
|
confirmRegion() {
|
|
const province = this.provinces[this.regionIndex[0]]
|
|
const city = this.cities[this.regionIndex[1]]
|
|
const district = this.districts[this.regionIndex[2]]
|
|
|
|
this.form.region = [
|
|
province?.code || '',
|
|
city?.code || '',
|
|
district?.code || ''
|
|
]
|
|
|
|
this.form.address = [
|
|
province?.name || '',
|
|
city?.name || '',
|
|
district?.name || ''
|
|
].filter(Boolean).join(' ')
|
|
|
|
this.showRegionPicker = false
|
|
},
|
|
setDefault(id) {
|
|
// 找到当前地址项
|
|
const address = this.addressList.find(item => item.id === id)
|
|
// 如果已经是默认地址，则取消默认
|
|
const defaultFlag = address.defaultFlag === 'Y' ? 'N' : 'Y'
|
|
|
|
this.$api('updateDefaultAddress', {
|
|
id: id
|
|
}, (res) => {
|
|
if(res.code == 200) {
|
|
uni.showToast({
|
|
title: defaultFlag === 'Y' ? '设置成功' : '已取消默认',
|
|
icon: 'success'
|
|
})
|
|
// 设置成功后刷新地址列表
|
|
this.getAddressList()
|
|
}
|
|
})
|
|
},
|
|
deleteAddress(id) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要删除该地址吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.$api('deleteAddress', {id:id}, res => {
|
|
if(res.code == 200) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success'
|
|
})
|
|
// 删除成功后刷新地址列表
|
|
this.getAddressList()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
initRegionPicker() {
|
|
if (this.form.region.length > 0) {
|
|
const [provinceCode, cityCode, districtCode] = this.form.region
|
|
const provinceIndex = this.provinces.findIndex(p => p.code === provinceCode)
|
|
if (provinceIndex > -1) {
|
|
this.cities = this.provinces[provinceIndex].children || []
|
|
if (this.cities.length === 0) {
|
|
this.cities = [{ code: '', name: '请选择' }]
|
|
}
|
|
const cityIndex = this.cities.findIndex(c => c.code === cityCode)
|
|
if (cityIndex > -1) {
|
|
this.districts = this.cities[cityIndex].children || []
|
|
if (this.districts.length === 0) {
|
|
this.districts = [{ code: '', name: '请选择' }]
|
|
}
|
|
const districtIndex = this.districts.findIndex(d => d.code === districtCode)
|
|
this.regionIndex = [
|
|
provinceIndex,
|
|
cityIndex,
|
|
districtIndex > -1 ? districtIndex : 0
|
|
]
|
|
return
|
|
}
|
|
}
|
|
}
|
|
this.cities = this.provinces[0]?.children || []
|
|
if (this.cities.length === 0) {
|
|
this.cities = [{ code: '', name: '请选择' }]
|
|
}
|
|
this.districts = this.cities[0]?.children || []
|
|
if (this.districts.length === 0) {
|
|
this.districts = [{ code: '', name: '请选择' }]
|
|
}
|
|
this.regionIndex = [0, 0, 0]
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
background: #f8f8f8;
|
|
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
padding: 0 30rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
.back {
|
|
padding: 20rpx;
|
|
margin-left: -20rpx;
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
color: #222;
|
|
}
|
|
|
|
.right-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
|
|
.more, .target {
|
|
font-size: 40rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-list {
|
|
padding: 32rpx;
|
|
margin-top: calc(38rpx + var(--status-bar-height));
|
|
height: calc(100vh - 88rpx - var(--status-bar-height) - 140rpx - env(safe-area-inset-bottom));
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
.address-item {
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
padding: 32rpx 28rpx 0 28rpx;
|
|
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.04);
|
|
|
|
.address-header {
|
|
display: flex;
|
|
align-items: center;
|
|
.name { font-size: 32rpx; color: #222; font-weight: 500; margin-right: 20rpx; }
|
|
.phone { font-size: 32rpx; color: #222; }
|
|
.default-tag {
|
|
margin-left: 18rpx;
|
|
font-size: 24rpx;
|
|
color: #FF9500;
|
|
border: 1rpx solid #FF9500;
|
|
border-radius: 8rpx;
|
|
padding: 2rpx 12rpx;
|
|
background: #FFF7E6;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.address-text {
|
|
font-size: 28rpx;
|
|
color: #888;
|
|
margin: 16rpx 0 0 0;
|
|
line-height: 1.5;
|
|
}
|
|
.dashed-line {
|
|
border-bottom: 1rpx dashed #eee;
|
|
margin: 24rpx 0 0 0;
|
|
}
|
|
.address-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 0 0 18rpx 0;
|
|
.action {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 48rpx;
|
|
.circle {
|
|
width: 36rpx; height: 36rpx; border-radius: 50%;
|
|
border: 2rpx solid #FF9500; margin-right: 8rpx;
|
|
display: flex; align-items: center; justify-content: center;
|
|
&.active {
|
|
background: #FF9500; border: none;
|
|
.check { color: #fff; font-size: 24rpx; }
|
|
}
|
|
}
|
|
text { font-size: 26rpx; color: #bbb; }
|
|
.active-text { color: #FF9500; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
left: 0; right: 0; bottom: 0;
|
|
background: #fff;
|
|
padding: 24rpx 32rpx env(safe-area-inset-bottom);
|
|
z-index: 10;
|
|
margin-bottom: calc(40rpx );
|
|
}
|
|
|
|
.main-btn {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background: linear-gradient(90deg, #FFB74D 0%, #FF9500 100%);
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
border-radius: 45rpx;
|
|
font-weight: bold;
|
|
margin: 0 auto;
|
|
margin: calc(40rpx) 0 40rpx 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.08);
|
|
}
|
|
|
|
.modal-mask {
|
|
position: fixed; left: 0; right: 0; top: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.5); z-index: 1000;
|
|
}
|
|
.address-modal, .region-modal {
|
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
|
|
background: #fff; border-radius: 32rpx 32rpx 0 0;
|
|
box-shadow: 0 -4rpx 32rpx rgba(0,0,0,0.08);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
animation: slideUp 0.2s;
|
|
}
|
|
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
|
|
.modal-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 32rpx 32rpx 0 32rpx;
|
|
.close-btn { color: #bbb; font-size: 30rpx; }
|
|
.modal-title { flex: 1; text-align: center; font-size: 34rpx; font-weight: bold; color: #222; }
|
|
}
|
|
.modal-form {
|
|
padding: 0 32rpx;
|
|
.form-item {
|
|
border-bottom: 1rpx solid #f2f2f2;
|
|
padding: 28rpx 0 10rpx 0;
|
|
.label { color: #222; font-size: 28rpx; margin-bottom: 8rpx; }
|
|
.input, .region-input {
|
|
width: 100%; font-size: 28rpx; color: #222; background: none; border: none; outline: none;
|
|
&.placeholder { color: #ccc; }
|
|
}
|
|
.region-input { display: flex; align-items: center; justify-content: space-between; }
|
|
.arrow { color: #ccc; font-size: 28rpx; margin-left: 10rpx; }
|
|
}
|
|
}
|
|
.region-tip {
|
|
padding: 0 32rpx 16rpx 32rpx;
|
|
text-align: center;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.region-picker {
|
|
padding: 16rpx 0 0 0;
|
|
.picker-view {
|
|
width: 100%; height: 300rpx; display: flex; justify-content: center; align-items: center;
|
|
.active { color: #222; font-weight: bold; }
|
|
view { color: #ccc; font-size: 28rpx; text-align: center; }
|
|
}
|
|
|
|
.item {
|
|
// line-height: 100upx;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// height: 100upx;
|
|
font-size: 30rpx;
|
|
color: #222;
|
|
}
|
|
}
|
|
|
|
</style>
|