Client-Teapay/src/pagesB/address/list.vue

<template>
  <div class="addresslist">
    <uni-swipe-action class="swipeAction" v-if="addressList.length">
      <uni-swipe-action-item
        class="swipeAction_item"
        v-for="(i, s) in addressList"
        :key="s"
      >
        <view class="addressLi clearfix" @click="onSelect(i, s)">
          <view class="addressLi_l">
            <div class="a_icon iconfont" v-if="i.status == 1">&#xe62a;</div>
            <div class="a_icon" v-else>{{ i.name.slice(0,1) }}</div>
            <!-- <text v-if="i.id != presentId" class="iconfont">&#xe623;</text>
            <text v-else class="iconfont pitchOn">&#xe624;</text> -->
          </view>
          <view class="addressLi_r">
            <view class="user">
              <text class="name">{{ i.name }}</text>
              <text>{{ i.mobile }}</text>
              <text v-if="i.status == 1" class="defaultAddress">默认</text>
            </view>
            <view class="address">{{ i.province + ' ' + i.city + ' ' + i.area + ' ' + i.street + ' ' + i.address }}</view>
          </view>
        </view>
        <template v-slot:right>
          <view class="btns clearfix">
            <view class="btn edit" @click="onedit(i)"
              ><text class="iconfont">&#xe600;</text></view
            >
            <view class="btn del" @click="delAddress(i.id)"
              ><text class="iconfont">&#xe601;</text></view
            >
          </view>
        </template>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <div class="zanwu" v-else>
      <img src="@/static/img/zanwu.png" alt="" class="zanwuimg">
      <view class="zanwutxt">暂无地址信息</view>
    </div>
    <div class="footbtn" @click="goto('/pagesB/address/addaddress')">添加地址</div>
  </div>
</template>

<script>
import { post } from "@/request/api.js";
let app = getApp();
var appEv = app.$vm.$options;
export default {
  name: "addresslist",
  props: {},
  components: {},
  data() {
    return {
      addressList: [],
    };
  },
  methods: {
    // 获取用户地址
    loadAddress() {
      post("v1/user/addressList").then((res) => {
        if (res.code === 0) {
          this.addressList = res.data.data;
        }
      });
    },
    onedit(da) {
      uni.setStorageSync('address_form', da);
      this.goto('/pagesB/address/addaddress',{isedit:1})
      // let { id, name, mobile, address, province, city, area, street, status } = da;
      // this.userAddress = { id, name, mobile, address };
      // this.address = { province, city, area, street };
      // this.userAddress.region = province + " " + city + " " + area + " " + street;
      // this.is_default = status;
    },
    delAddress(id) {
      post("v1/user/delAddress", { id }).then((res) => {
        if (res.code === 0) {
          appEv.errTips(res.msg);
          this.loadAddress();
        }
      });
    },
  },
  onLoad(da) {},
  onShow() {
    this.loadAddress();
  },
  mounted() {},
};
</script>

<style scoped lang='scss'>
.swipeAction {
  font-size: 28rpx;

  .addressLi {
    .addressLi_l {
      width: 100rpx;
      height: 80rpx;
      display: flex;
      align-items: center;

      .a_icon{
        width: 60rpx;
        height: 60rpx;
        color: #f50;
        background: rgba($color: #f50, $alpha: 0.15);
        text-align: center;
        line-height: 60rpx;
        border-radius: 50%;
        font-size: 34rpx;
      }

      .iconfont {
        background: rgba($color: #f50, $alpha: 0.2);
        color: #fff;
      }
    }

    .addressLi_r {
      width: calc(100% - 100rpx);
      // padding-right: 20rpx;
    }

    .addressLi_l,
    .addressLi_r {
      float: left;
    }

    .user {
      margin-bottom: 10rpx;
    }

    .name {
      // font-size: 32rpx;
      margin-right: 10rpx;
    }

    .address {
      font-size: 24rpx;
      color: #999;
      padding: 0;
    }
  }

  // .swipeAction_item {
  // background: #fff;
  // margin-bottom: 20rpx;
  // }

  .btns {
    .btn {
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding: 0 30rpx;
      color: #fff;
      font-size: 36rpx;
    }

    .edit {
      background: rgba(25, 137, 250, 0.5);
    }

    .del {
      background: rgba(238, 10, 36, 0.5);
    }

    .iconfont {
      color: #fff;
    }
  }
}

::v-deep .uni-swipe_box {
  padding: 20rpx 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.defaultAddress {
  border: 1rpx solid #2db389;
  color: #2db389;
  border-radius: 6rpx;
  font-size: 18rpx;
  padding: 0 6rpx;
  margin-left: 20rpx;
}

.footbtn{
  width: calc(100% - 60rpx);
  height: 80rpx;
  background: #17bb87;
  border-radius: 45rpx;
  position: fixed;
  bottom: 50rpx;
  left: 30rpx;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  line-height: 80rpx;
}
</style>