live-telecast-ui-h5/src/views/address/component/addrList.vue

<template>
  <div class="addrList" >
    <div
      class="addressList"
      v-for="(n, i) in cardData.length"
      :key="i"
      @click="handleSelect(cardData[i])"
    >
      <div class="addressDetai">
        <div class="addrTitle">
          <span>{{ cardData[i].name }}</span>
          <span>{{ cardData[i].mobile }}</span>
          <p>
            {{
              `${cardData[i].city_name} ${cardData[i].area_name} ${cardData[i].address}`
            }}
          </p>
        </div>
        <div class="handle">
          <div class="del" @click.stop="del(cardData[i].id)">
            <img
              src="@/assets/images/delete/del.png"
              v-show="!cardData[i].isShow"
            />
            <img
              src="@/assets/images/delete/del-active.png"
              v-show="cardData[i].isShow"
            />
            <span>删除</span>
          </div>
          <div class="edit" @click="selected">
            <img src="@/assets/images/delete/select.png" />

            <span>编辑</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/address/index";
import { Dialog, Toast } from "vant";

export default {
  name: "addrList",
  props: ["list", "disabledList", "newTime"],
  //    @add="onAdd"
  //       @select="onSelect"
  //       @edit="onEdit"
  data() {
    return {
      id: "",
      sum: 0,
      isShow: false,
      //   newTime: "",
      cardData: [],
      parmValue: {
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.searchList();
      }
    },
  },
  created() {
    // this.cardData = this.list;
    this.list.forEach((element) => {
      let obj = {
        name: element.name,
        mobile: element.mobile,
        city_name: element.city_name,
        area_name: element.area_name,
        address: element.address,
        id: element.id,
        isShow: false,
      };
      this.cardData.push(obj);
    });
  },
  methods: {
    handleSelect(e) {
      this.$emit("select", e);
    },
    // getNewTime() {
    //   this.newTime = new Date().valueOf();
    // },
    selected() {},
    async delAddr(id) {
      this.loading = true;
      let res = await asyncRequest.del({ id: id });
      this.loading = false;
      if (res && res.code == 0) {
        Toast.success("地址删除成功！");
        this.$emit("refresh");

        // await this.searchList();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        Toast.fail(res.msg);
      }
    },
    del(e) {
      let aDom = document.getElementsByClassName("del")[0];
      aDom.cancelBubble = true;
      this.cardData.map((ele) => {
        if (ele.id === e) {
          ele.isShow = true;
        } else {
          ele.isShow = false;
        }
      });
      Dialog.confirm({
        title: "温馨提示？",
        message: "确认删除该地址？",
      })
        .then(async () => {
          await this.delAddr(e);
        })
        .catch(() => {
          // on cancel
        });
    },
    async searchList() {
      if (this.parmValue.page === 1) {
        this.list = []; //如果没有在加载中且当前页数是1，清空list列表，防止造成上次的地址残留
      }
      let res = await asyncRequest.list(this.parmValue); //请求接口
      if (res && res.code == 0 && res.data) {
        this.cardData = [];
        let arr = res.data.list == [] ? [] : res.data.list;
        arr.forEach((element) => {
          let obj = {
            name: element.contector,
            mobile: element.mobile,
            city_name: element.city_name,
            area_name: element.area_name,
            address: element.addr,
            id: element.id,
            isShow: false,
          };
          this.cardData.push(obj);
        });
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
        if (this.parmValue.page !== 1) {
          this.parmValue.page--;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.addrList {
  width: 100vw;
  height: 50vh;
  //   border: 1px solid red;
  .addressList {
    width: 90vw;
    margin: 16.5px auto;
    background-color: #fcfcf0;
    background: #fcfcf0;
    border-radius: 8px;
    .addressDetai {
      padding: 25px 0 0 0;
      .addrTitle {
        width: 80vw;
        margin: 0 auto;
        span:first-child {
          padding-right: 15px;
        }
        span {
          height: 13px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #4d4d4d;
          line-height: 13px;
        }
        p {
          height: 12px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #999999;
          line-height: 12px;
          margin-top: 6px;
        }
      }
      .handle {
        z-index: 99999;
        width: 80vw;
        margin: 0 auto;
        height: 20px;
        padding: 0 0 10px 0;
        .edit,
        .del {
          margin: 2px 5px;
          float: right;
          display: inline-block;
          img {
            width: 12px;
            height: 14px;
            vertical-align: -2px;
          }
          span {
            display: inline-block;
            padding: 0 0 0 2px;
          }
        }
      }
    }
  }
}
</style>