首页 > 代码库 > vue设置默认地址和配送方式

vue设置默认地址和配送方式

2024-09-16 09:55:41   218人阅读

1、截图

技术分享

2、address.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Checkout - Confirm Address</title>
    <link href="css/base2.css" rel="stylesheet" >
    <link href="css/checkout.css" rel="stylesheet" >
</head>
<body class="checkout">
   

    <div class="container">
        
            <div class="addr-list-wrap">
                <div class="addr-list">
                    <ul>
                        <li v-for="(item,index) in filterAddress" v-bind:class="{‘check‘:index==currentIndex}" @click="currentIndex=index">
                           
                            <div class="addr-opration addr-set-default">
                                <a href="javascript:;" class="addr-set-default-btn"  v-if="!item.isDefault" @click="setDefault(item.addressId);"><i>设为默认</i></a>
                            </div>
                            <div class="addr-opration addr-default" v-if="item.isDefault">默认地址</div>
                        </li>

                      

            <!-- shipping method-->
            <div class="checkout-title">
                <span>配送方式</span>
            </div>
            <div class="shipping-method-wrap">
                <div class="shipping-method">
                    <ul>
                        <li  :class="{‘check‘:shippingMethod==1}" @click="shippingMethod=1">
                            <!--注意绑定是{}和‘’-->
                            <div class="name" >标准配送</div>
                            <div class="price">Free</div>
                        </li>
                        <li :class="{‘check‘:shippingMethod==2}"  @click="shippingMethod=2">
                            <div class="name" >高级配送</div>
                            <div class="price">180</div>
                        </li>
                    </ul>
                </div>
            </div>

           
        </div>
    </div>
    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/vue-resource.min.js"></script>
<script src="js/address.js"></script>
</body>
</html>

3、address.js

/**
 * Created by kk on 2017/4/20.
 */
new Vue({
    el:".container",
    data:{
        limitNum:3,
        addressList:[],
        currentIndex:0,
        shippingMethod:1
},
mounted:function () {
    this.$nextTick(function(){
       // alter();

        this.getAddressList();
    });
},
    computed:{
        filterAddress:function () {
            return this.addressList.slice(0,this.limitNum);
        //    方法和属性需要加this，不然会找不到
        }
    },
    methods:{

        setDefault:function (addressId) {
            this.addressList.forEach(function (address,index) {
                if(address.addressId==addressId)
                {
                    address.isDefault=true;
                }
                else{
                    address.isDefault=false;
                }
            })

        }

}
});

 

vue设置默认地址和配送方式


联系
我们