template:
<template>
<div class="sLocation">
<mt-cell-swipe :right="[{
content: '删除',
style: { background: '#f66', color: '#fff' },
handler: () => unfollow(item)
}]" v-for="item in 10" :key="item">
<div class="lists">
<div class="locationcontent">
<div>
<span>收货人:张三</span>
<span style="color: #777;">15700728284</span>
</div>
<div>
<span>收货地址:</span>
<span>asddddddddddddddddddd</span>
</div>
</div>
</div>
</mt-cell-swipe>
<div class="popup" @click="push()">
<span>新增收货地址</span>
</div>
</div>
</template>
script:
<script>
import {
Toast,
Indicator
} from 'mint-ui';
export default {
created() {
this.$store.dispatch("newTitle","新增收货地址")
},
data: () => ({}),
methods: {
push() {
this.$router.push({
path: "/sLocation/sLocationInfo"
})
},
// 取消关注 通过v-for循环
unfollow(id) {
Indicator.open();
// console.log(id);
this.$http.post(this.root + "FollowApp", {
gId: id
}, {
emulateJSON: true
}).then((res) => {
if (res.body.code === 0) {
Indicator.close();
Toast({
message: "您已取消关注",
position: 'center',
duration: 3000
});
this.getServersList()
} else {}
}, (err) => {})
},
}
}
</script>
style:
<style lang="less">
.mint-cell {
margin-left: 5px;
margin-bottom: 10px !important;
border-bottom-left-radius: 5px
}
.sLocation {
width: 100%;
height: 100%;
background: #eee;
padding-top: 15px;
position: relative;
.popup {
position: fixed;
bottom: 0;
width: 100%;
background: #39c;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
.mint-cell-value {
width: 100%;
color: #333;
}
.mint-cell-wrapper {
padding: 0;
}
.mint-cell {
margin-bottom: 6px;
background-size: 10% 0;
}
.lists {
position: relative;
width: 100%;
height: 100px;
padding: 0 9px;
background: #fff;
margin-bottom: 5px;
.locationcontent {
div {
&:first-child {
padding: 20px 0;
position: relative;
span {
display: inline-block;
&:first-child {
width: 120px;
}
&:last-child {
position: absolute;
right: 0;
}
}
}
}
}
.deal {
position: absolute;
bottom: 0;
right: 0;
width: 64px;
height: 65px;
}
h3 {
position: relative;
height: 40px;
line-height: 40px;
padding-left: 50px;
font-size: 16px;
font-weight: 400;
/* prettier-ignore */
border-bottom: #ccc 1PX solid;
.cai {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 25px;
height: 25px;
line-height: 25px;
font-size: 16px;
text-align: center;
color: #fff;
background: #3399cc;
}
.nmb,
.nmb1 {
position: absolute;
top: 50%;
right: 60px;
transform: translateY(-50%);
color: red;
}
.nmb1 {
right: 15px;
color: #000;
}
}
}
.mint-cell-swipe-buttongroup {
overflow: hidden;
.mint-cell-swipe-button {
box-sizing: border-box;
padding: 40px 20px 0 20px;
line-height: normal;
font-size: 15px;
}
}
}
</style>