完善页面
This commit is contained in:
wangxiaowei
223
src/bundle/address/list.vue
Normal file
223
src/bundle/address/list.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 消息弹窗 -->
|
||||
<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>
|
||||
|
||||
<!-- <wd-radio-group v-model="addressId" shape="button" >
|
||||
<wd-radio :value="1">沃特</wd-radio>
|
||||
<wd-radio :value="2">商家后台</wd-radio>
|
||||
</wd-radio-group> -->
|
||||
|
||||
<!-- 地址列表 -->
|
||||
<!-- <view class="mx-30rpx mt-20rpx" v-if="addressList.length > 0">
|
||||
<view class="bg-#fff rounded-16rpx px-30rpx py-36rpx flex items-center mb-20rpx" v-for="(item, index) in addressList" :key="index">
|
||||
<view @click="List.handleChooseAddress(item)">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-10rpx">
|
||||
<wd-tag color="#4C9F44" bg-color="#F3F3F3" custom-class="!rounded-4rpx !px-10rpx" v-if="item.is_default">默认</wd-tag>
|
||||
</view>
|
||||
<view class="text-30rpx leading-42rpx text-#303133">
|
||||
<text class="mr-16rpx">{{ item.contact}}</text>
|
||||
<text>{{ item.telephone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-562rpx line-1 text-26rpx leading-34rpx text-#909399 mt-10rpx">{{ item.address }}</view>
|
||||
</view>
|
||||
<view class="flex-1 ml-30rpx" @click="List.handleEditAddress(item.id)">
|
||||
<wd-icon name="edit-outline" size="32rpx" color="#666666"></wd-icon>
|
||||
</view>
|
||||
</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 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]">位置1</view>
|
||||
</view>
|
||||
</wd-radio>
|
||||
</view>
|
||||
<view class="line-2 text-26rpx leading-34rpx text-[#606266] mt-16rpx">
|
||||
北京市海淀区恒大新宏福苑西区20号楼2单元301
|
||||
</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"
|
||||
@click="router.navigateTo('/bundle/address/add')">
|
||||
|
||||
<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">新建地址</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'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const from = ref<string>('')
|
||||
|
||||
// 弹出框
|
||||
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}>>([
|
||||
{
|
||||
id: 1,
|
||||
address: '浙江省杭州市西湖区文三路138号',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
address: '浙江省杭州市西湖区文三路138号',
|
||||
}
|
||||
])
|
||||
|
||||
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 getUserAddress()
|
||||
addressList.value = Array.isArray(res) ? res : []
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑地址
|
||||
* @param id 地址ID
|
||||
*/
|
||||
handleEditAddress: (id: number) => {
|
||||
router.navigateTo(`/bundle_b/pages/tea-specialist/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: addressId.value
|
||||
// })
|
||||
// toast.info('删除成功')
|
||||
// uni.$emit('refreshAddressList')
|
||||
// router.navigateBack(500)
|
||||
}).catch((res) => {
|
||||
console.log("🚀 ~ res2:", res)
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新位置
|
||||
*/
|
||||
handleUpdateLocation: () => {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.address-radio {
|
||||
:deep() {
|
||||
.wd-radio-group {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user