259 lines
6.0 KiB
Vue
259 lines
6.0 KiB
Vue
<template>
|
|
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
|
|
<view class="flex-row justify-center items-center self-stretch relative section_2">
|
|
<text class="text">收货地址</text>
|
|
<image
|
|
@click="closeWindow"
|
|
class="image pos_2"
|
|
:src="orderUrl + '/component/cha.png'"
|
|
/>
|
|
</view>
|
|
<view class="flex-col self-stretch list">
|
|
<radio-group @change="radioChange">
|
|
<view class="flex-col list-item mt-10" v-for="(item, index) in addressList" :key="item.id">
|
|
<view class="flex-row justify-between items-center self-stretch">
|
|
<view class="flex-row items-center">
|
|
<radio color="#E79EA1" :value="index"></radio>
|
|
<text class="font ml-8">{{ item.name }}</text>
|
|
<text class="font_2 ml-8">{{ item.phone }}</text>
|
|
</view>
|
|
<view class="flex-row group">
|
|
<image
|
|
class="image_2"
|
|
:src="orderUrl + '/component/edit.png'"
|
|
@click="editAddress(item)"
|
|
/>
|
|
<image
|
|
class="image_2 ml-11"
|
|
:src="orderUrl + '/component/delete.png'"
|
|
@click="confirmDelete(item.id)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text class="self-center font_3 text_2 mt-14">{{ item.region }}{{ item.detailAddress }}</text>
|
|
</view>
|
|
</radio-group>
|
|
</view>
|
|
<view class="flex-col justify-start items-center self-center text-wrapper" @click="toNewAddress">
|
|
<text class="text_3">添加新地址</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {nextTick, onMounted , onUnmounted, ref } from 'vue'
|
|
import emitter from '../../../utils/emitter'
|
|
import { testUrl , baseUrl , suiUrl } from '../../../api/request';
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
import { getFonts } from '../../../common/globalFont';
|
|
const addressList = ref([])
|
|
const userInfo = wx.getStorageSync('userInfo')
|
|
import { orderUrl } from '../../../common/globalImagesUrl';
|
|
//页面跳转回来之后，刷新一次地址列表 onShow就是在页面显示后执行
|
|
const bkgUrl = ref(orderUrl + '/component/bkg.png')
|
|
const updateAddresssListHandler = () => {
|
|
getAddressList()
|
|
}
|
|
|
|
|
|
onLoad(() => {
|
|
getFonts()
|
|
})
|
|
|
|
onMounted(() => {
|
|
getAddressList()
|
|
emitter.on('updateAddressList', updateAddresssListHandler)
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
emitter.off('updateAddressList', updateAddresssListHandler)
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//根据登录用户获取地址列表
|
|
const getAddressList = async () =>{
|
|
const res = await uni.request({
|
|
url: baseUrl + '/address/list' ,
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
}
|
|
})
|
|
console.log('组件的地址信息---->',res.data);
|
|
addressList.value = res.data.data
|
|
}
|
|
//当选项发生改变时
|
|
const radioChange = ( event ) => {
|
|
const index = event.detail.value
|
|
console.log(index)
|
|
const temp = addressList.value[index] //通过emitter传入暂时的地址信息
|
|
emitter.emit('getAddressInfo', temp)
|
|
emitter.emit('addressInfo', temp)
|
|
emitter.emit('closeAddress')
|
|
}
|
|
//跳转到新建地址页面
|
|
const toNewAddress =()=>{
|
|
uni.navigateTo({
|
|
url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info'
|
|
})
|
|
}
|
|
//编辑地址方法
|
|
const editAddress =(value)=>{
|
|
console.log('地址信息',value);
|
|
uni.navigateTo({
|
|
url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info?editInfo=' + JSON.stringify(value)
|
|
})
|
|
}
|
|
const confirmDelete =(id)=> { //确定删除地址按钮
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否删除地址?',
|
|
success: (e) => {
|
|
if (e.confirm) {
|
|
deleteAddress(id)
|
|
} else if (e.cancel)
|
|
return;
|
|
}
|
|
})
|
|
}
|
|
//删除地址方法
|
|
const deleteAddress = async( id ) =>{
|
|
const res = await uni.request({
|
|
url: baseUrl + '/address/delete',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: { id: id }
|
|
})
|
|
// console.log(res.data);
|
|
if( res.data.code === 1 ) {
|
|
await getAddressList()
|
|
emitter.emit('delAddressById', id)
|
|
emitter.emit('delMyAddress', id)
|
|
}
|
|
}
|
|
//关闭按钮
|
|
const closeWindow =()=> {
|
|
emitter.emit('closeAddress')
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ml-11 {
|
|
margin-left: 20.57rpx;
|
|
}
|
|
.page {
|
|
background-color: #fff;
|
|
border-radius: 28.05rpx 28.05rpx 0rpx 0rpx;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
}
|
|
.section_2 {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 28.88rpx 26.18rpx 21.21rpx;
|
|
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.text {
|
|
color: #323232;
|
|
font-size: 37.41rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 35.95rpx;
|
|
}
|
|
.image {
|
|
width: 52.37rpx;
|
|
height: 52.37rpx;
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
right: 26.18rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.list {
|
|
margin: 100.96rpx 14.96rpx 0 16.83rpx;
|
|
height: 580rpx;
|
|
padding-bottom: 20rpx;
|
|
overflow-y: auto;
|
|
}
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.list-item {
|
|
padding: 26.18rpx 16.01rpx 30.41rpx 16.03rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 28.05rpx;
|
|
}
|
|
.list-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.image_3 {
|
|
width: 31.8rpx;
|
|
height: 33.67rpx;
|
|
}
|
|
.font {
|
|
font-size: 29.93rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 25.83rpx;
|
|
color: #323232;
|
|
}
|
|
.font_2 {
|
|
font-size: 29.93rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 19.99rpx;
|
|
color: #323232;
|
|
}
|
|
.group {
|
|
margin-right: 10.72rpx;
|
|
}
|
|
.image_2 {
|
|
width: 37.41rpx;
|
|
height: 39.28rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 26.18rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 31.8rpx;
|
|
color: #818181;
|
|
}
|
|
.text_2 {
|
|
width: 572.32rpx;
|
|
}
|
|
.text-wrapper {
|
|
padding: 26.75rpx 0 29.61rpx;
|
|
background-color: #ffb6b9;
|
|
border-radius: 74.81rpx;
|
|
width: 637.78rpx;
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
}
|
|
.text_3 {
|
|
color: #ffffff;
|
|
font-size: 33.67rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 31.57rpx;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style> |