2025-10-17
收货地址添加修改
This commit is contained in:
@@ -10,18 +10,18 @@
|
||||
<view v-if="isManage" class="u-m-l-10 del-text" @click="showDelModel">
|
||||
删除
|
||||
</view>
|
||||
<view class="u-m-l-10 add-text">
|
||||
<view class="u-m-l-10 add-text" @click="handleAdd">
|
||||
新增地址
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
|
||||
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
|
||||
<view class="data-list">
|
||||
<view class="data-item" v-for="item in dataList" @click="handleClick(item)">
|
||||
<view class="item-text">
|
||||
<view class="address u-m-b-18">
|
||||
{{item.province + item.city + item.district}}
|
||||
{{item.province_name + " " + item.city_name + " " + item.district_name}}
|
||||
</view>
|
||||
<view class="specific-address u-m-b-18">
|
||||
{{item.detailed_address}}
|
||||
@@ -44,18 +44,83 @@
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="status" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 新增/修改 -->
|
||||
<u-popup v-model="showForm" mode="bottom" length="60%" class="form-popup" @close="form={}">
|
||||
<view class="form">
|
||||
<view class="form-item u-m-b-30">
|
||||
<view class="item-title">
|
||||
<image class="must-icon" src="/static/my/must.png" mode=""></image>
|
||||
<u-input v-model="form.regionLabel" type="select" placeholder="请选择省市区" @click="openProvince" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
<image class="must-icon" src="/static/my/must.png" mode=""></image>详细地址与门牌号
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<u-input v-model="form.detailed_address" placeholder="请输入详细地址与门牌号" type="text" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
<image class="must-icon" src="/static/my/must.png" mode=""></image>收货人名字
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<u-input v-model="form.receiver_name" placeholder="请输入收货人名字" type="text" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
<image class="must-icon" src="/static/my/must.png" mode=""></image>手机号
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<u-input v-model="form.receiver_phone" placeholder="请输入收货人名字" type="text" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
标签
|
||||
</view>
|
||||
<view class="item-tag u-m-t-10">
|
||||
<span class="active">家</span>
|
||||
<span>公司</span>
|
||||
<span>学校</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
<span class="u-m-r-10">是否设置为默认</span><u-checkbox v-model="form.is_default"
|
||||
:disabled="false"></u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-button class="submit" hover-class="none" @click="handleSubmit">确定</u-button>
|
||||
</u-popup>
|
||||
|
||||
<!-- 省市区 -->
|
||||
<u-select v-model="showRegitionPicker" :list="regionOptions" mode="mutil-column-auto" label-name="label"
|
||||
value-name="code" child-name="children" @confirm="handleRegion"></u-select>
|
||||
<!-- 确认是否删除 -->
|
||||
<u-modal v-model="showDel" content="是否删除选中的地址" :show-cancel-button="true" @confirm="handleDel"></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, getCurrentInstance, onMounted, ref } from 'vue'
|
||||
import { addressAPI } from '../../api/address'
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
getCurrentInstance,
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue'
|
||||
import {
|
||||
addressAPI
|
||||
} from '../../api/address'
|
||||
import {
|
||||
commonAPI
|
||||
} from '../../api/common'
|
||||
|
||||
const navBarTitle = {
|
||||
fontWeight: '510',
|
||||
@@ -66,7 +131,13 @@ import { addressAPI } from '../../api/address'
|
||||
|
||||
const isManage = ref(false)
|
||||
const showDel = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showRegitionPicker = ref(false)
|
||||
const form = ref({})
|
||||
|
||||
const handleAdd = () => {
|
||||
showForm.value = true
|
||||
}
|
||||
const handleManage = () => {
|
||||
if (isManage.value) {
|
||||
ids.value = []
|
||||
@@ -79,6 +150,22 @@ import { addressAPI } from '../../api/address'
|
||||
const handleDel = () => {
|
||||
// TODO 删除
|
||||
}
|
||||
// 打开省市区选择
|
||||
const openProvince = () => {
|
||||
showRegitionPicker.value = true
|
||||
}
|
||||
// 选择省市区
|
||||
const handleRegion = (e) => {
|
||||
form.value.regionLabel = e[0].label + "/" + e[1].label + "/" + e[2].label
|
||||
form.value.province = e[0].value
|
||||
form.value.city = e[1].value
|
||||
form.value.district = e[2].value
|
||||
form.value.district_id = e[2].value
|
||||
}
|
||||
// 确认提交
|
||||
const handleSubmit = () => {
|
||||
|
||||
}
|
||||
|
||||
const scrollHeight = ref(0)
|
||||
const instance = getCurrentInstance();
|
||||
@@ -86,39 +173,33 @@ import { addressAPI } from '../../api/address'
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
let screenHeight = res.screenHeight
|
||||
uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((data : any) => {
|
||||
uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((
|
||||
data) => {
|
||||
scrollHeight.value = screenHeight - data.height
|
||||
}).exec()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const defaultSize = 10
|
||||
const params = ref({
|
||||
page: 1,
|
||||
size: defaultSize,
|
||||
keyword: ''
|
||||
})
|
||||
const status = ref('loadmore')
|
||||
const maxPage = ref()
|
||||
const dataList = ref([])
|
||||
const regionOptions = ref([])
|
||||
const loadData = () => {
|
||||
if (status.value == 'nomore') return
|
||||
addressAPI.getList(params.value).then(res => {
|
||||
console.log(res);
|
||||
}).finally(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
addressAPI.getList().then((res) => {
|
||||
dataList.value = res.data
|
||||
})
|
||||
commonAPI.getRegion().then(res => {
|
||||
regionOptions.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const ids = ref([])
|
||||
const handleClick = (item : any) => {
|
||||
const handleClick = (item) => {
|
||||
if (isManage.value) { // 开始管理
|
||||
ids.value.push(item.id)
|
||||
}
|
||||
}
|
||||
|
||||
const isIncludeId = (id : any) => {
|
||||
const isIncludeId = (id) => {
|
||||
return ids.value.includes(id);
|
||||
}
|
||||
|
||||
@@ -199,5 +280,62 @@ import { addressAPI } from '../../api/address'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-popup {
|
||||
.form {
|
||||
padding: 30rpx 28rpx;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 100%;
|
||||
|
||||
.item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
|
||||
.must-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-value {}
|
||||
|
||||
.item-tag {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
line-height: 100%;
|
||||
letter-spacing: -2%;
|
||||
|
||||
span {
|
||||
padding: 0 20rpx;
|
||||
background: #D9D9D9;
|
||||
border-radius: 12rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #BFCEFF;
|
||||
color: #305DEF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
width: 248rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
background: #7B99FF;
|
||||
border: none;
|
||||
border-radius: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user