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; } } }, });