131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<template>
|
|
<view class="box">
|
|
<view class="card" v-for="(item, index) in data" :key="index">
|
|
<view class="card-up">
|
|
<view class="card-up-icon">
|
|
<uni-icons style="padding: 0.2rem; background-color: #00ba26; border-radius: 50%" type="location-filled" size="20" color="#fff"></uni-icons>
|
|
<view style="margin-left: 0.3rem">
|
|
<text style="font-size: 1.1rem; font-weight: 700">{{ item.addressName }}</text>
|
|
<text style="font-size: 0.9rem">{{ item.addressPhone }}</text>
|
|
<view>{{ item.address }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-up-iconone">
|
|
<uni-icons @click="modification(item.id, item.addressName, item.addressPhone, item.address)" fontFamily="DownLoad" type="plusempty" size="20">{{ '\ue6b9' }}</uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="card-below">
|
|
<view class="card-below-icon">
|
|
<uni-icons v-if="iconIndex == 0" type="checkbox-filled" color="#00ba26" size="26"></uni-icons>
|
|
<uni-icons v-else type="circle" size="26"></uni-icons>
|
|
<view>默认地址</view>
|
|
</view>
|
|
<view @click="del(item.id)" class="card-below-text">删除</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 5rem"></view>
|
|
<view class="buttom" @click="addsies">新增地址</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { onShow } from '@dcloudio/uni-app';
|
|
import { APIGetinquireAddress, APIGetDeleteAddress } from '@/api/site/index.js';
|
|
// 用户地址
|
|
const data = ref([]);
|
|
const iconIndex = ref(0);
|
|
// 获取地址列表
|
|
const GetinquireAddress = async () => {
|
|
const res = await APIGetinquireAddress();
|
|
data.value = res.data;
|
|
};
|
|
// 新增地址
|
|
const addsies = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/my/components/addShippingAddress'
|
|
});
|
|
};
|
|
// 修改地址
|
|
const modification = (id, name, phone, address) => {
|
|
uni.navigateTo({
|
|
url: `/pages/my/components/addShippingAddress?id=${id}&name=${name}&phone=${phone}&address=${address}`
|
|
});
|
|
};
|
|
//删除地址
|
|
const del = (id) => {
|
|
APIGetDeleteAddress(id);
|
|
uni.showToast({
|
|
title: '删除成功'
|
|
});
|
|
GetinquireAddress();
|
|
};
|
|
onShow(() => {
|
|
GetinquireAddress();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@font-face {
|
|
font-family: DownLoad;
|
|
src: url('@/static/icon/iconfont.ttf');
|
|
}
|
|
.box {
|
|
height: 90vh;
|
|
}
|
|
.card {
|
|
width: 92%;
|
|
margin: 0.5rem auto;
|
|
background-color: #fff;
|
|
border-radius: 1.5rem;
|
|
display: flow-root;
|
|
.card-up {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 1rem;
|
|
border-bottom: 1px solid #b7b7b7;
|
|
padding-bottom: 1rem;
|
|
.card-up-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 0.8rem;
|
|
}
|
|
.card-up-iconone {
|
|
margin-right: 0.8rem;
|
|
}
|
|
}
|
|
.card-below {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-left: 0.8rem;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
.card-below-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.card-below-text {
|
|
margin-right: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
.buttom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
height: 3rem;
|
|
width: 92%;
|
|
margin-left: 4%;
|
|
margin-bottom: 2%;
|
|
border-radius: 1.5rem;
|
|
background: #00ba26;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
</style>
|