vue实战记录（六）- vue实现购物车功能之地址列表选配

vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据

作者：狐狸家的鱼

本文链接：vue实战-实现购物车功能（六）

GitHub：sueRimn

 

主要实现地址页面的适配和设置地址默认与删除，以及更多显示的状态取反。

address.html

        <!-- address list -->
        <div class="checkout-title">
          <span>配送地址</span>
        </div>
        <div class="addr-list-wrap">
          <div class="addr-list">
            <ul>
              <li v-for="(item, index) in filterAddress" :key="index" :class="{'check':index==currentIndex}" @click="currentIndex=index">
                <dl>
                  <dt v-cloak>{{item.userName}}</dt>
                  <dd class="address" v-cloak>{{item.streetName}}</dd>
                  <dd class="tel" v-cloak>{{item.tel}}</dd>
                </dl>
                <div class="addr-opration addr-edit">
                  <a href="javascript:;" class="addr-edit-btn" @click="editAddress(item.addressId)">
                    <svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg>
                  </a>
                </div>
                <div class="addr-opration addr-del">
                  <a href="javascript:;" class="addr-del-btn" @click="delConfirm(item)">
                    <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                  </a>
                </div>
                <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>

              <li class="addr-new">
                <div class="add-new-inner">
                  <i class="icon-add">
                    <svg class="icon icon-add"><use xlink:href="#icon-add"></use></svg>
                  </i>
                  <p >添加新地址</p>
                </div>
              </li>
            </ul>
          </div>

          <div class="shipping-addr-more">
            <a class="addr-more-btn up-down-btn" href="javascript:" @click="loadMore">
              more
              <i class="i-up-down">
                <i class="i-up-down-l"></i>
                <i class="i-up-down-r"></i>
              </i>
            </a>
          </div>
        </div>

        <!-- shipping method-->
        <div class="checkout-title">
          <span>配送方式</span>
        </div>
        <div class="shipping-method-wrap">
          <div class="shipping-method">
            <ul>
              <li>
                <div class="name">标准配送</div>
                <div class="price">Free</div>
              </li>
              <li>
                <div class="name">高级配送</div>
                <div class="price">180</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="next-btn-wrap">
          <a href="javascript:;" class="btn btn--red">下一步</a>
        </div>
        <div class="md-modal modal-msg md-modal-transition" id="showModal" :class="{'md-show': delStatus}">
          <div class="md-modal-inner">
            <div class="md-top">
              <button class="md-close">关闭</button>
            </div>
            <div class="md-content">
              <div class="confirm-tips">
                <p id="cusLanInfo">你确认删除此配送地址信息吗?</p>
              </div>
              <div class="btn-wrap col-2">
                <button class="btn btn--m" id="btnModalConfirm" @click="delAddress">Yes</button>
                <button class="btn btn--m btn--red" id="btnModalCancel" @click="delStatus=false">No</button>
              </div>
            </div>
          </div>
        </div>
        <div class="md-modal modal-msg md-modal-transition" id="showModal" :class="{'md-show': insFlag}">
          <div class="md-modal-inner">
            <div class="md-top">
              <button class="md-close">关闭</button>
            </div>
            <div class="md-content">
              <div class="confirm-tips">
                <div class="md-form-item">
                  <label class="md-form-item__label" style="width: 80px;">
                    姓名
                  </label>
                  <div class="md-form-item__content" style="margin-left: 80px;">
                    <div  class="el-input">
                      <input type="text" autocomplete="off" class="md-input__inner">
                    </div>
                  </div>
                </div>
                <div class="md-form-item">
                  <label class="md-form-item__label" style="width: 80px;">
                    地址
                  </label>
                  <div class="md-form-item__content" style="margin-left: 80px;">
                    <div  class="el-input">
                      <input type="text" autocomplete="off" class="md-input__inner">
                    </div>
                  </div>
                </div>
                <div class="md-form-item">
                  <label class="md-form-item__label" style="width: 80px;">
                    电话号码
                  </label>
                  <div class="md-form-item__content" style="margin-left: 80px;">
                    <div  class="el-input">
                      <input type="text" autocomplete="off" class="md-input__inner">
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-wrap col-2">
                <button class="btn btn--s" id="btnModalConfirms" @click="saveFrom">保存</button>
                <button class="btn btn--s btn--red" id="btnModalCancels">取消</button>
              </div>
            </div>
          </div>
        </div>
        <div class="md-overlay" id="showOverLay" v-show="insFlag"></div>
      </div>
    </div>
  </div>

 

new Vue({
    el:'.container',
    data:{
        limitNum: 3,//限制显示的数量
        addressList: [],//地址列表
        currentIndex:'',//当前项
        delStatus: false,
        insFlag: false,
        curAddress:" ",
        name: '',
        streetName:'',
        phone:'',
        fromStatus: '' ,
        checkIndex: ''
    },
    mounted: function() {
        this.$nextTick(function() {
          this.getAddressList();
        });
      },
    computed: {//数据过滤
        filterAddress: function () {
            return  this.addressList.slice(0,this.limitNum);//截取0-3个地址显示 返回一个全新数组
        }
    },
    methods: {
        getAddressList: function () {
            this.$http.get("data/address.json").then(response => {//获取后台数据
                let res = response.data;
                if (res.status == '0') {//这里不能写成===
                    this.addressList = res.result;
                }
            })
        },
        loadMore: function () {//显示更多 控制显示的两种状态
            //this.limitNum = this.addressList.length;//展示地址数组全部数据
            let len = this.addressList.length;
            if (this.limitNum === len){
                this.limitNum = 3;
            }else{
                this.limitNum = len;
            }
        },
        setDefault: function (addressId) {
            this.addressList.forEach((address, index) => {
                if (address.addressId == addressId) {
                    address.isDefault = true;
                }else{
                    address.isDefault = false;
                }
            })
        },
        delConfirm: function(item) {
            this.delStatus = true;
            this.curAddress = item;
        },
        delAddress: function () {
        var index = this.addressList.indexOf(this.curAddress);
        this.addressList.splice(index, 1)
        this.delStatus = false;
        },
        insConfirm: function(item) {
        this.insFlag = true;
        this.curAddress = item;
        },
        addAddress: function (item) {
            this.fromStatus = 0;
            var a = this.addressList[this.addressList.length-1];
            // alert(a.addressId++)
           this.addressList.push({
             addressId: a.addressId++,
             userName: this.name,
             streetName: this.streetName,
             tel: this.phone
           });
           this.limitNum = this.addressList.length;
            this.insFlag = false;
        },
        editAddress: function (addressId) {
            this.fromStatus = 1;
            this.insFlag = true;
            var _this = this
            this.addressList.forEach(function (address,index) {
             if (address.addressId == addressId) {
               _this.name = address.userName;
               _this.phone = address.tel;
               _this.streetName = address.streetName;
               _this.checkIndex = index;
              }
            })
        },
        saveFrom: function () {
            if(this.fromStatus == 0){
              this.addAddress();
            }
            if(this.fromStatus == 1) {
              // alert(this.checkIndex);
              this.addressList.splice(this.checkIndex, 1, {
               addressId: this.addressId,
               userName: this.name,
               streetName: this.streetName,
               tel: this.phone
             });
              this.editAddress();
              this.insFlag = false;
              
            }
        }
    },
});