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>