191 lines
6.8 KiB
Vue
191 lines
6.8 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
|
||
<template>
|
||
<view class="pb-200rpx">
|
||
<!-- 消息弹窗 -->
|
||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||
|
||
<view>
|
||
<navbar title="地址簿" custom-class='!bg-[#F6F7F8]' :leftArrow="false"></navbar>
|
||
</view>
|
||
|
||
<view class="">
|
||
<!-- 地址为空显示 -->
|
||
<view class="text-center" v-if="addressList.length === 0">
|
||
<view class="mt-318rpx">
|
||
<wd-img width="260rpx" height='260rpx' :src="`${OSS}icon/icon_address_empty.png`"></wd-img>
|
||
</view>
|
||
<view class="text-28rpx leading-40rpx text-[#8A94A3] mt-18rpx">还没有地址，请尽快新建地址</view>
|
||
</view>
|
||
|
||
<view class="mx-30rpx mt-38rpx address-radio">
|
||
<wd-radio-group v-model="addressId" shape="dot" >
|
||
<view class="bg-white rounded-16rpx px-40rpx py-30rpx mb-20rpx" v-for="(item, index) in addressList" :key="item.id">
|
||
<view class="">
|
||
<wd-radio :value="item.id" checked-color="#4C9F44">
|
||
<view class="flex items-center">
|
||
<wd-img :src="`${OSS}icon/icon_location5.png`" width="40rpx" height="40rpx"></wd-img>
|
||
<view class="ml-16rpx text-30rpx leading-42rpx text-[#303133]">位置{{ index + 1 }}</view>
|
||
</view>
|
||
</wd-radio>
|
||
</view>
|
||
<view class="line-2 text-26rpx leading-34rpx text-[#606266] mt-16rpx">
|
||
{{ item.address }}
|
||
</view>
|
||
|
||
<view class="flex items-center justify-end mt-24rpx text-26rpx leading-34rpx text-[##303133]">
|
||
<view class="w-112rpx h-48rpx bg-[#F6F7F8] text-center leading-48rpx mr-12rpx" @click="List.handleDeleteAddress(item.id)">删除</view>
|
||
<view class="w-112rpx h-48rpx bg-[#F6F7F8] text-center leading-48rpx" @click="List.handleEditAddress(item.id)">修改</view>
|
||
</view>
|
||
</view>
|
||
</wd-radio-group>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view
|
||
v-if="addressList.length == 0"
|
||
class="fixed bottom-70rpx left-0 right-0 bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx"
|
||
@click="router.navigateTo('/bundle/address/add')">新建地址</view> -->
|
||
|
||
<view class="bg-white fixed left-0 right-0 bottom-0 h-152rpx flex items-center px-30rpx">
|
||
|
||
<view v-if="addressList.length == 0" class="w-630rpx bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx" @click="router.navigateTo('/bundle/address/add')">新建地址</view>
|
||
|
||
<view class="flex items-center justify-between w-full" v-if="addressList.length > 0">
|
||
<view class="w-330rpx bg-[#F6F7F8] text-[#303133] h-90rpx text-center leading-90rpx rounded-8rpx" @click="router.navigateTo('/bundle/address/add')">新建地址</view>
|
||
<view class="w-330rpx bg-[#4C9F44] text-[#FFFFFF] h-90rpx text-center leading-90rpx rounded-8rpx" @click="List.handleUpdateLocation">位置更新</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
// import { getUserAddress } from '@/api/user'
|
||
import type { IUserAddressListResult } from '@/api/types/user'
|
||
import { router } from '@/utils/tools'
|
||
import { useMessage } from 'wot-design-uni'
|
||
import { getUserAddressList, deleteUserAddress, updateUserAddressLocation } from '@/api/user'
|
||
import { useToast } from 'wot-design-uni'
|
||
|
||
const OSS = inject('OSS')
|
||
const from = ref<string>('')
|
||
const toast = useToast()
|
||
|
||
// 弹出框
|
||
const message = useMessage('wd-message-box-slot')
|
||
|
||
// 地址列表
|
||
// const addressList = ref<IUserAddressListResult[]>([])
|
||
|
||
// 选中的地址ID
|
||
const addressId = ref<number>(0)
|
||
const addressList = ref<Array<{id:number, address: string, status: number}>>([])
|
||
|
||
onLoad((args) => {
|
||
if (args.from) {
|
||
from.value = args.from as string
|
||
}
|
||
|
||
// 监听地址列表刷新
|
||
uni.$on('refreshAddressList', () => {
|
||
List.handleInit()
|
||
})
|
||
|
||
// 初始化地址列表
|
||
List.handleInit()
|
||
})
|
||
|
||
onUnload(() => {
|
||
uni.$off('refreshAddressList')
|
||
})
|
||
|
||
const List = {
|
||
/**
|
||
* 初始化地址列表
|
||
*/
|
||
handleInit: async () => {
|
||
const res = await getUserAddressList()
|
||
addressList.value = res
|
||
addressId.value = addressList.value.filter(item => item.status === 1)[0]?.id || 0
|
||
},
|
||
|
||
/**
|
||
* 编辑地址
|
||
* @param id 地址ID
|
||
*/
|
||
handleEditAddress: (id: number) => {
|
||
router.navigateTo(`/bundle/address/add?id=${id}`)
|
||
},
|
||
|
||
/**
|
||
* 选择地址
|
||
* @param item 地址内容
|
||
*/
|
||
handleChooseAddress(item: IUserAddressListResult) {
|
||
if (from.value === 'reserve') {
|
||
uni.$emit('chooseAddress', item)
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 删除地址
|
||
*/
|
||
handleDeleteAddress: (id: number) => {
|
||
message.confirm({
|
||
title: '删除地址',
|
||
msg: '确定要删除该地址吗？',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
cancelButtonProps: {
|
||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
},
|
||
confirmButtonProps: {
|
||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
}
|
||
}).then(async (res) => {
|
||
// 点击确认按钮回调事件
|
||
await deleteUserAddress(id)
|
||
toast.show('删除成功')
|
||
List.handleInit()
|
||
}).catch((res) => { })
|
||
},
|
||
|
||
/**
|
||
* 更新位置
|
||
*/
|
||
handleUpdateLocation: async () => {
|
||
if (addressId.value === 0) {
|
||
toast.show('请选择地址')
|
||
return
|
||
}
|
||
|
||
const res = await updateUserAddressLocation(addressId.value)
|
||
toast.show('更新成功')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.address-radio {
|
||
:deep() {
|
||
.wd-radio-group {
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|