live-telecast-ui-h5/src/views/address/index.vue

<template>
  <div class="address" style="padding-top: 46px">
    <van-nav-bar
      title="我的地址"
      class="van-nav-bar-my-fixed"
      left-arrow
      @click-left="onClickLeft"
      :right-text="isRes === '1' ? '' : '删除'"
      @click-right="onClickRight"
      fixed
    />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="[]"
      @add="onAdd"
      @select="onSelect"
      @edit="onEdit"
    />
    <div class="addr-null"
    v-if="isShowAddrNull"
    >
      <img src="@/assets/images/home/addr-null.png" alt="">
      <div class="addr-null-title">暂无地址~</div>
    </div>
    <div
      class="addmore"
      v-if="total > 0 && list.length < total && list.length > 0"
      @click="pageData"
    >
      点击加载更多！
    </div>

    <!-- v-if="list && list.length > 0" -->
    <!-- <van-empty v-else description="暂无地址！" /> -->
  </div>
</template>

<script>
import { Dialog } from "vant";
import asyncRequest from "@/apis/address/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  data() {
    return {
      isShowAddrNull:true,
      delId: "",
      chosenAddressId: "",
      isRes: this.$route.query.id ? this.$route.query.id : "0",
      list: [],
      total: 0,
      parmValue: {
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      loading: false,
    };
  },
  async created() {
    if (this.$route && this.$route.query && this.$route.query.id) {
      this.isRes = "1";
    } else {
      this.isRes = "0";
    }
  },
  mounted() {
    this.searchList();
  },
  methods: {
    onClickLeft() {
      window.history.back(-1);
    },
    onClickRight() {
      if (!this.loading) {
        if (this.delId === "") {
          this.show_title("请选择地址！");
          return;
        }

        Dialog.confirm({
          title: "确认删除？",
          message: "确认删除该地址？",
        })
          .then(async () => {
            await this.delAddr(this.delId);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    customerService() {
      this.serviceShow = true;
    },
    gotoInfor() {
      this.$router.push({
        path: "/personalInfor",
      });
    },
    onAdd() {
      this.$router.push({
        path: "/addressView",
      });
    },

    onEdit(item) {
      if (!this.loading) {
        window.vm.$router.push({
          path: "/addressView",
          query: {
            id: item.id,
          },
        });
      }
    },

    onSelect(item) {
      if (this.isRes === "1") {
        this.$store.dispatch("user/set_ad", item).then((res) => {
          console.log(res);
          window.history.back(-1);
        });
      } else {
        this.delId = item.id;
      }
    },
    async pageData() {
      this.parmValue.page++;
      await this.searchList();
    },
    async delAddr(id) {
      this.loading = true;
      let res = await asyncRequest.del({ id: id });
      this.loading = false;
      if (res && res.code == 0) {
        this.show_title("地址删除成功！");
        await this.searchList();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
      }
    },
    async searchList() {
      if (!this.loading) {
        if (this.parmValue.page === 1) {
          this.list = [];//如果没有在加载中且当前页数是1，清空list列表，防止造成上次的地址残留
        }
        let res = await asyncRequest.list(this.parmValue);//请求接口
        if (res && res.code == 0 && res.data) {
          let arr = res.data.list;//正确请求到数据，保存到新增数组
          arr.map((v1) => {//遍历获取数据
            let codeName =//判断当前城市名是不是和数据中的城市名相等
              v1.city_name === v1.provice_name
                ? v1.provice_name
                : v1.provice_name + v1.city_name;
            v1.name = v1.contector;//
            v1.tel = v1.mobile;
            v1.address = codeName + v1.area_name + v1.addr;
            return v1;
          });
          this.list.push(...arr);//把arr数组解构放到list列表渲染
          if(this.list.length != 0){
            this.isShowAddrNull = false;
          }else{
            this.isShowAddrNull = true;
          }
          if (this.chosenAddressId === "" && this.list.length > 0) {
            this.chosenAddressId = this.list[0].id;
          }
          this.total = res.data.count;
          console.log(this.total);
        } 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>
.address {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 48px 0 0 0;
  box-sizing: border-box;
  .van-tag--danger {
    background: rgb(255, 131, 39);
  }
  
  .van-address-item .van-radio__icon--checked .van-icon {
    background-color: rgb(255, 131, 39);
    border-color: rgb(255, 131, 39);
  }
  .van-address-list__bottom {
    button.van-button--danger {
      background: linear-gradient(-180deg, #fcce56, rgb(255, 131, 39), #f9680f);
      border: 0;
    }
  }
  .addmore {
    text-align: center;
    color: #999;
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
}
//页面中 “我的地址”的样式
.van-nav-bar-my-fixed /deep/ .van-nav-bar__title.van-ellipsis{
    width: 72px;
    height: 17px;
    font-size: 18px;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 16px;
}

//收货人及手机号信息
.van-address-list /deep/ .van-address-item__name{
  width: 100%;
  height: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  line-height: 6px;
}
//地址栏字体样式
.van-address-list /deep/ .van-address-item__address{
  width: 247px;
  height: 13px;
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  line-height: 13px;
}
//地址栏收货人+手机号样式
.van-address-list /deep/ .van-address-item__name{
  width: 100%;
  height: 22px;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  line-height: 12px;
}
//修改地址的图标
.van-address-list /deep/ .van-icon.van-icon-edit.van-address-item__edit::before{
  width: 15px;
  height: 15px;
}
//每个地址栏选项之间的间隔
.van-address-item{
  margin: 10px 0;
}
//整体的地址栏选项框的位置
.van-radio-group{
  margin-top: 30px;
}
//默认提示
.van-tag.van-tag--round.van-tag--danger.van-address-item__tag{
  width: 32px;
  height: 15px;
  background: #F4D022;
  border-radius: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 400;
  color: #333333;
  line-height: 15px;
  padding: 2px 6px;
  display: block;
  text-align: center;
  margin-left: 20px;
}
//新增地址按钮
.van-button.van-button--danger.van-button--normal.van-button--block.van-button--round.van-address-list__add{
  width: 100%;
  background: #F4D022;
  border-radius: 30px;
}
//新建地址按钮
.van-nav-bar__title.van-ellipsis{
  width: 107px;
  height: 17px;
  font-size: 18px;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 26px;
}
//空地址时候的样式
.addr-null{
  width: 73px;
  height: 102px;
  box-sizing: border-box;
  position: fixed;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #959595;
  // line-height: 7px;
  img{
    width: 100%;
    padding-bottom:10px;
  }
}
</style>