vue收货地址选择
vue收货地址选择
myaddress.vue组件中代码如下所示：
<template>
<div>
<h1>我的收货地址</h1>
<div class="the-address">
<div class="adr-tent" id="vue-address">
<table class="adr-table">
<thead class="table-thead">
<tr>
<th rowspan="1" class="thh">
<span class="tn">收货人</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">所在地区</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">详细地址</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">邮编</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">电话/手机</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">操作</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">设置</span>
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr
class="item"
v-for="(item, index) in addressList"
v-bind:key="index"
>
<td class="tdd">
<span class="ti">
<em class="tt">{{ item.name }}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{ item.address }}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{ item.detailAddress }}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{ item.zipCode }}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{ item.phone }}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<div class="handle">
<a href="javascript:;" class="a-chg">修改</a>
<i class="line">|</i>
<em class="i-del">删除</em>
</div>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="set-def cur" v-if="item.isDefault">默认地址</em>
<em class="set-def" v-else @click="setDefault(index)"
>设为默认</em
>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "myaddress",
data() {
return {
addressList: [], //地址列表
};
},
mounted() {
this.getaddressJson();
},
methods: {
setDefault(i) {
console.log(i);
// 1.遍历
this.addressList.forEach((item, index) => {
// 判断
// 如果 传递过来的 索引i 和 当前 这一项的索引index相对，我就设置 这一项中的isDefault 的值 为 true
item.isDefault = index == i;
});
// 2.把设置“默认地址”的 这一项 置顶 显示
// console.log(this.addressList.splice(i,1)); // 以 删除的 方式，将 这一项 ，先 拿到 “自己”手里面！！ 一会要用！
this.addressList.splice(0, 0, ...this.addressList.splice(i, 1)); //把 拿到的 这一项数据，添加到 数组的头部，也就是我们说的 实现了 置顶的功能！
},
// 获取地址列表数据
getaddressJson() {
// 接口地址
// vue-cli3以上版本的脚手架，规定你需要把 静态资源 存放放置到public目录
// 所以，我们创建的json格式的数据所在的目录data，要放置到public目录下。
let url = `./../../data/addressTest.json`;
// 发送异步请求
this.$axios
.get(url)
//then() 接收服务器返回成功的数据
// response 响应数据 （简写 res）
.then((response) => {
// console.log(response);
if (response.status == 200) {
this.addressList = response.data.list;
// console.log(this.addressList);
} else {
console.log("请求失败!");
}
})
// catch() 捕获错误信息
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style lang="scss" scoped>
body,
ol,
ul,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-weight: normal;
}
body {
font: 12px "Microsoft YaHei", "SimSun", "Arial Narrow", HELVETICA;
-webkit-text-size-adjust: 100%;
color: #666;
background-color: #fafafa;
}
textarea {
resize: none;
outline: none;
border: none;
}
textarea,
select {
font: 14px "Microsoft YaHei", "SimSun", "Arial Narrow", HELVETICA;
}
a {
color: #666;
text-decoration: none;
font-size: 12px;
}
a:hover {
text-decoration: none;
}
a:focus {
text-decoration: none;
}
em,
i {
font-style: normal;
}
li {
list-style: none;
}
img {
display: block;
_display: inline;
border: 0;
vertical-align: middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
p {
word-wrap: break-word;
}
input,
button,
select {
margin: 0;
padding: 0;
outline: none;
border: none;
font: 14px "Microsoft YaHei", "SimSun", "Arial Narrow", HELVETICA;
}
html {
min-width: 1100px;
}
.the-address,
.the-address .adr-tent,
.the-address .adr-tent .adr-table .table-thead .thh,
.the-address .adr-tent .adr-table .table-tbody,
.the-address .adr-tent .adr-table .table-tbody .item,
.the-address .adr-tent .adr-table .table-tbody .item .tdd {
overflow: hidden;
}
.the-address {
margin: 0 auto;
}
.select {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.setChe,
.setDefChe {
background-repeat: no-repeat;
background-size: cover;
margin-right: 0.1rem;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
background-color: transparent;
border-radius: 0;
background-size: contain;
cursor: pointer;
}
.setChe {
width: 18px;
height: 18px;
}
.setDefChe {
width: 14px;
height: 14px;
background-color: #fff;
box-sizing: border-box;
}
.select {
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 30px;
cursor: pointer;
}
[v-cloak] {
display: none !important;
}
.the-address {
width: 800px;
margin-top: 40px;
background-color: #fff;
}
.the-address .adr-tol {
width: 100%;
height: 42px;
background-color: #e3f2fd;
margin-bottom: 20px;
}
.the-address .adr-tol .tkk {
height: 42px;
line-height: 42px;
margin-left: 5px;
}
.the-address .adr-tol .ico {
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: cover;
margin-left: 15px;
margin-top: 13px;
float: left;
}
.the-address .adr-tent {
height: auto;
}
.the-address .adr-tent .adr-table {
width: 100%;
}
.the-address .adr-tent .adr-table .table-thead {
width: 100%;
height: 39px;
border-bottom: 1px solid #dcdee3;
background-color: #ebecf0;
}
.the-address .adr-tent .adr-table .table-thead .thh {
text-align: left;
border: 1px solid #dcdee3;
}
.the-address .adr-tent .adr-table .table-thead .thh .tn {
padding: 12px 15px;
display: inline-block;
}
.the-address .adr-tent .adr-table .table-tbody {
width: 100%;
height: auto;
}
.the-address .adr-tent .adr-table .table-tbody .item {
box-sizing: border-box;
text-align: left;
}
.the-address .adr-tent .adr-table .table-tbody .item:hover {
background-color: #ebecf0;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd {
box-sizing: border-box;
border: 1px solid #dcdee3;
border-top-color: transparent;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .ti {
padding: 12px 14px;
display: inline-block;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .tt {
min-width: 50px;
display: inline-block;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .handle {
width: 70px;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .handle > * {
display: inline-block;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .handle .line {
margin: 0 5px;
color: #dcdee3;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .handle .a-chg:hover {
color: #f56954;
text-decoration: underline;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .handle .i-del {
cursor: pointer;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .handle .i-del:hover {
color: #f56954;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .set-def{
cursor: pointer;
display: inline-block;
text-decoration: none;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .set-def:hover{
color: #f56954;
}
.the-address .adr-tent .adr-table .table-tbody .item .tdd .set-def.cur{
width: 80px;
height: 30px;
line-height: 30px;
border: 1px solid #f56954;
cursor: default;
border-radius: 3px;
background: #ffd6cc;
color: #e44135;
text-align: center;
}
</style>
还没有留言，还不快点抢沙发？