addressItem.vue 2.99 KB
<template>
    <li class="addressitem-div">
        <div class="address-top">
            <span class="name">{{item.buyerNickName}}</span>
            <span class="phone">{{item.buyerMobile}}</span>
        </div>
        <div class="address-mid">
            <p>{{item.buyerAddress}}</p>
        </div>
        <div class="address-bottom">
            <label class="mint-radiolist-label" @click.self="selectedlabel(index,item.buyerAddressId)"
                   :class="{'colorpurple':item.isDefault==1}">
                <span class="mint-radio">
                    <input class="mint-radio-input" type="radio" :value="item.buyerAddressId" checked="checked"
                           v-if="item.isDefault==1">
                    <input class="mint-radio-input" type="radio" :value="item.buyerAddressId" v-else>
                  <span class="mint-radio-core"></span>
                </span>
                <span class="mint-radio-label">默认地址</span>
            </label>
            <div class="address-btn">
                <router-link :to="{name:'addAddress',params: {Id: item.buyerAddressId,teype:'edit' }}" tag="span"><img
                        src="../../static/images/edit.svg"/></router-link>
                <span @click="openConfirm(item.buyerAddressId)" size="large"><img src="../../static/images/delete.svg"/></span>
            </div>
        </div>
    </li>
</template>
<script type="text/ecmascript-6">
    import {MessageBox, Toast} from 'mint-ui';
    import {setDefaultAddress, ClearAddresslist, getmyAddressList, deleteAddress} from '../../vuex/actions';

    export default {
        data() {
            return {}
        },
        props: {
            index: '',
            item: '',
            pageNum: ''
        },
        components: {},
        vuex: {
            getters: {},
            actions: {
                setDefaultAddress,
                ClearAddresslist,
                getmyAddressList,
                deleteAddress
            }
        },

        methods: {
            selectedlabel(index, id){
                $(".mint-radio-input").removeAttr("checked");
                $(".mint-radio-label").removeClass("colorpurple");
                $(".mint-radio-input").eq(index).attr("checked", "checked");
                $(".mint-radio-label").eq(index).addClass("colorpurple");
                this.setDefaultAddress(id);
            },
            openConfirm(id) {
                var self = this;
                MessageBox.confirm('确定删除该地址?', '提示').then(action => {
                    self.deleteAddress(id).then(function () {
                        Toast({
                            message: '删除成功',
                            position: 'bottom',
                            duration: 5000
                        });
                        self.ClearAddresslist().then(function () {
                            self.getmyAddressList(0, self.pageNum);
                        })
                    });
                });

            }
        }
    }
</script>