twong-h5/src/components/AddressWindow.vue

<template>
  <div>
    <div class="address-window" :class="value === true ? 'on' : ''">
      <div class="title">
        选择地址<span class="iconfont icon-guanbi" @click="closeAddress"></span>
      </div>
      <div class="list" v-if="addressList.length">
        <div
          class="item acea-row row-between-wrapper"
          :class="item.id === checked ? 'font-color-red' : ''"
          v-for="(item, index) in addressList"
          @click="tapAddress(index)"
          :key="index"
        >
          <span
            class="iconfont icon-ditu"
            :class="item.id === checked ? 'font-color-red' : ''"
          ></span>
          <div class="addressTxt">
            <div
              class="name"
              :class="item.id === checked ? 'font-color-red' : ''"
            >
              {{ item.real_name }}<span class="phone">{{ item.phone }}</span>
            </div>
            <div class="line1">
              {{ item.province }}{{ item.city }}{{ item.district
              }}{{ item.detail }}
            </div>
          </div>
          <span
            class="iconfont icon-complete"
            :class="item.id === checked ? 'font-color-red' : ''"
          ></span>
        </div>
      </div>
      <div class="pictrue" v-if="addressList.length < 1">
        <img src="@assets/images/noAddress.png" class="image" />
      </div>
      <div class="addressBnt bg-color-red" @click="goAddressPages">
        新加地址
      </div>
    </div>
    <div
      class="mask"
      @touchmove.prevent
      :hidden="value === false"
      @click="closeAddress"
    ></div>
  </div>
</template>
<script>
import { getAddressList } from "../api/user";
export default {
  name: "AddressWindow",
  props: {
    value: Boolean,
    checked: Number
  },
  data: function() {
    return {
      addressList: [],
      current: 0,
      cartId: 0,
      pinkId: 0,
      couponId: 0
    };
  },
  mounted: function() {},
  methods: {
    getAddressList: function() {
      let that = this;
      getAddressList().then(res => {
        that.addressList = res.data;
      });
    },
    closeAddress() {
      this.$emit("input", false);
    },
    goAddressPages: function() {
      this.$router.push({ path: "/user/add_address" });
      this.$emit("redirect");
    },
    tapAddress: function(index) {
      this.$emit("checked", this.addressList[index]);
      this.$emit("input", false);
    }
  }
};
</script>