jiangchengfeiyi-xiaochengxu/pages/mine/addressList/addressList.vue

<template>
	<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
	  <view class="flex-col list">
	    <view class="flex-col list-item mt-10" v-for="(item, index) in addressArr" :key="index">
	      <view class="flex-row justify-between items-center">
	        <view class="flex-row items-center">
	          <text class="font">{{ item.name }}</text>
	          <text class="font_2 text">{{ item.phone }}</text>
	          <view class="flex-col justify-start items-center shrink-0 text-wrapper" v-if="item.isDefault === 1">
	            <text class="text_2">默认</text>
	          </view>
	        </view>
	        <view class="flex-row">
	          <image
	            class="image"
	            :src="mineUrl + '/addressList/edit.png'"
							@click="editAddress(item)"
	          />
	          <image
	            class="image ml-12"
	            :src="mineUrl + '/addressList/delete.png'"
							@click="confirmPop(item.id)"
	          />
	        </view>
	      </view>
	      <view class="flex-col items-start mt-13">
	        <text class="font_3">{{ item.region }} {{ item.detailAddress }}</text>
	        <!-- <text class="font_3">尔华德学院</text> -->
	      </view>
	    </view>
	  </view>
	  <view class="flex-col justify-start items-center section_2 mt-392" @click="jump_newAddress()">
	    <view class="flex-col justify-start items-center text-wrapper_2"><text class="font text_3">新增地址</text></view>
	  </view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { baseUrl } from '../../../api/request';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { getFonts } from '../../../common/globalFont';
import { mineUrl } from '../../../common/globalImagesUrl';
const addressArr = ref([])  //地址数组
const bkgUrl = ref(mineUrl + '/addressList/bkg.png')
onLoad(() => {
	getFonts()  
})
onShow(()=>{
	getAddress()
})
const getAddress = async ()=> {  //获取地址方法
	const res = await uni.request({
		url: baseUrl + '/address/list',
		method: 'POST',
		header: {
			cookie: wx.getStorageSync('cookie')
		}
	})
	if( res.data.code === 1 ) {
		addressArr.value = res.data.data
		console.log('获取的地址信息--->',res.data.data);
	}
}
//编辑地址方法
const editAddress =(value)=>{
	console.log('地址信息',value);
	uni.navigateTo({
		url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info?editInfo=' + JSON.stringify(value)
	})
}
const confirmPop = (id) => {
	uni.showModal({
		title: '提示',
		content: '是否删除地址?',
		success: (e) => {
			if(e.confirm) {
				deleteAddress(id)
			} else {
				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 ) {
		getAddress()
		// console.log("删除地址成功");
	}
}
const jump_newAddress =()=> {
	uni.navigateTo({
		url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info'
	})
}

</script>

<style lang="scss" scoped>
.mt-13 {
  margin-top: 24.38rpx;
}
.page {
  padding-top: 31.88rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.list {
  margin-left: 28.13rpx;
  margin-right: 26.27rpx;
}
.list-item {
  padding: 31.88rpx 18.75rpx 36.11rpx 24.62rpx;
  background-color: #ffffff;
  border-radius: 9.38rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.font {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 25.89rpx;
  color: #323232;
}
.font_2 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 20.04rpx;
  color: #323232;
}
.text {
  margin-left: 16.18rpx;
}
.text-wrapper {
  margin-left: 28.57rpx;
  padding: 5.1rpx 0 8.06rpx;
  background-color: #fbdedf;
  border-radius: 9.38rpx;
  width: 69.38rpx;
  height: 31.88rpx;
}
.text_2 {
  color: #c35c5d;
  font-size: 22.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  // line-height: 18.71rpx;
}
.image {
  border-radius: 9.38rpx;
  width: 39.38rpx;
  height: 39.38rpx;
}
.font_3 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 31.88rpx;
  color: #818181;
}
.section_2 {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
  padding: 16.88rpx 0;
  background-color: #ffffff;
}
.text-wrapper_2 {
  padding: 25.43rpx 0 24.51rpx;
  background-color: #fbdedf;
  border-radius: 46.88rpx;
  width: 629.77rpx;
}
.text_3 {
  color: #c35c5d;
  line-height: 28.84rpx;
}
	@import url(../../../common/css/global.css);
</style>