ZangShiQi/addon/pc/source/os/pages/member/delivery_address.vue

<template>
  <div class="box" v-loading="loading">
    <div class="null-page" v-show="yes"></div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>收货地址</span>
      </div>

      <div>
        <div class="ns-member-address-list">
          <div class="text item ns-add-address" @click="addAddress('add')">
            <span>+ 添加收货地址</span>
          </div>

          <div class="text item" v-for="(item, index) in addressList" :key="index">
            <div class="text-name">
              <span>{{ item.name }}</span>
              <span v-if="item.is_default == 1" class="text-default">默认</span>
            </div>

            <div class="text-content">
              <p>{{ item.mobile }}</p>
              <p :title="item.full_address + item.address" class="ns-address-detail">
                {{ item.full_address }}{{ item.address }}</p>
            </div>

            <div class="text-operation">
              <span v-if="item.is_default != 1" @click="setDefault(item.id)">设为默认</span>
              <span @click="addAddress('edit', item.id)">编辑</span>
              <span v-if="item.is_default != 1" @click="delAddress(item.id, item.is_default)">删除</span>
            </div>
          </div>
        </div>

        <div class="pager">
          <el-pagination background :pager-count="5" :total="total" prev-text="上一页" next-text="下一页"
                         :current-page.sync="currentPage" :page-size.sync="pageSize" @size-change="handlePageSizeChange"
                         @current-change="handleCurrentPageChange" hide-on-single-page></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    addressList,
    setDefault,
    deleteAddress
  } from "@/api/member/member"

  export default {
    name: "delivery_address",
    layout: "member",
    components: {},
    data: () => {
      return {
        addressList: [],
        total: 0,
        currentPage: 1,
        pageSize: 8,
        loading: true,
        yes: true
      }
    },
    created() {
      this.getListData()
    },
    mounted() {
      let self = this;
      setTimeout(function () {
        self.yes = false
      }, 300)
    },
    methods: {
      getListData() {
        addressList({
          page: this.currentPage,
          page_size: this.pageSize,
          type: 1
        })
          .then(res => {
            const {
              count,
              page_count,
              list
            } = res.data
            this.total = count
            this.addressList = list
            this.loading = false
          })
          .catch(err => {
            this.loading = false
            this.$message.error(err.message)
          })
      },
      handlePageSizeChange(size) {
        this.pageSize = size
        this.refresh()
      },
      handleCurrentPageChange(page) {
        this.currentPage = page
        this.refresh()
      },
      refresh() {
        this.loading = true
        this.getListData()
      },
      /**
       * 设为默认
       */
      setDefault(id) {
        setDefault({
          id: id
        }).then(res => {
          this.refresh()
          this.$message({
            message: "修改默认地址成功",
            type: "success"
          })
        }).catch(err => {
          this.$message.error(err.message)
        })
      },

      /**
       * 添加/编辑地址
       */
      addAddress(type, id) {
        if (type == "edit") {
          this.$router.push({
            path: "/member/address_edit",
            query: {
              id: id
            }
          })
        } else {
          this.$router.push({
            path: "/member/address_edit"
          })
        }
      },

      /**
       * 删除地址
       */
      delAddress(id, is_default) {
        this.$confirm("确定要删除该地址吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          if (is_default == 1) {
            this.$message({
              type: "warning",
              message: "默认地址，不能删除!"
            })
            return
          }

          deleteAddress({
            id: id
          }).then(res => {
            this.refresh()
            this.$message({
              message: res.message,
              type: "success"
            })
          }).catch(err => {
            this.$message.error(err.message)
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .box {
    width: 100%;
    position: relative;
  }

  .null-page {
    width: 100%;
    height: 730px;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus,
  .el-card.is-hover-shadow:hover {
    box-shadow: unset;
  }

  .el-card {
    border: 0;
  }

  .ns-member-address-list {
    display: flex;
    flex-wrap: wrap;

    .text {
      width: 32%;
      height: 140px;
      margin-right: 2%;
      border-radius: 5px;
      border: 1px solid #d8d8d8;
      margin-bottom: 20px;
      padding: 0 15px;
      box-sizing: border-box;

      .text-name {
        height: 37px;
        line-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #eeeeee;
      }

      .text-default {
        display: inline-block;
        margin-left: 10px;
        background: $base-color;
        color: #ffffff;
        width: 35px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 3px;
      }

      .text-content {
        padding: 10px;
      }

      .ns-address-detail {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .text-operation {
        // 操作
        text-align: right;

        span {
          margin: 0 5px;
          color: #999999;
          cursor: pointer;
        }

        span:hover {
          color: $base-color;
        }
      }
    }

    .text:nth-child(3n) {
      margin-right: 0;
    }

    .ns-add-address {
      border: 1px dashed #d8d8d8;
      text-align: center;
      color: #999999;
      line-height: 140px;
      cursor: pointer;
    }

    .ns-add-address:hover {
      border-color: $base-color;
      color: $base-color;
    }
  }
</style>