aluminium-trading-uniapp-240925/pages_order/components/address/addressList.vue

<template>
  <scroll-view
      scroll-y="true"
      :style="{height: height}"
      @scrolltolower="moreAddress">
    <uv-radio-group v-model="selectAddress"
                    @change="editDefault"
                    v-if="addressList.length > 0">
      <view v-for="item in addressList" :key="item.id" class="address-item">

        <view class="address-item-top"
              @click="select(item)">
          <view class="img-box">
            <image src="/static/image/address/icon.png" mode="aspectFill"></image>
          </view>

          <view class="address-info">
            <view class="user-info">
              <text class="user-name">{{ item.name }}</text>
              <text class="user-phone">{{ item.phone }}</text>
              <text v-if="item.id == selectAddress" class="is-default">默认</text>
            </view>

            <view class="address-detail">
              {{ item.address + " " + item.addressDetail }}
            </view>
          </view>
        </view>

        <view class="controls"
              v-if="controls">

          <view class="default-checkbox">
            <uv-radio
                :name="item.id"
                label-disabled
                size="30rpx"
                icon-size="30rpx">
              默认地址
            </uv-radio>
          </view>

          <view class="edit-btn">
            <uv-icon name="edit-pen"></uv-icon>
            <text @click="editAddress(item)" class="control-title">编辑</text>
          </view>

          <view class="del-btn" @click="deleteAddress(item.id)">
            <uv-icon name="trash"></uv-icon>
            <text class="control-title" >删除</text>
          </view>

        </view>
      </view>
    </uv-radio-group>
    <view
        style="padding: 100rpx 0;"
        v-else>
      <uv-empty
          mode="history"
          textSize="28rpx"
          iconSize="100rpx"/>
    </view>
  </scroll-view>
</template>

<script>
export default {
  props : {
    controls : {
      default : false,
      type : Boolean,
    },
    height : {
      default : 'calc(90vh - 180rpx)'
    }
  },
  data() {
    return {
      selectAddress : 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      addressList: [],
      total : 0,
    }
  },

  methods: {
    //获取地址列表
    getAddressList() {
      return new Promise((success, fail) => {
        this.$api('addressList', this.queryParams, res => {
          if (res.code == 200) {
            console.log("res.result.records", res.result.records)
            this.addressList = res.result.records || [];
            this.total = res.result.total || 0;
            this.addressList.forEach(n => { //筛选默认地址
              if (n.defaultFlag == 1) {
                this.selectAddress = n.id
              }
            })
            success(res.result)
          }
        })
      })
    },
    // 加载更多
    moreAddress(){
      if(this.queryParams.pageSize > this.total){
        return
      }
      this.queryParams.pageSize += 10
      this.getAddressList()
    },
    // 删除地址
    deleteAddress(e){

      this.$emit('deleteAddress', e)
    },
    // 修改地址
    editAddress(e){
      this.$emit('editAddress', e)
    },
    // 切换默认地址
    editDefault(e){
      this.$emit('editDefault', e)
    },
    // 选择了地址
    select(e){
      this.$emit('select', e)
    },
  }
}
</script>

<style scoped lang="scss">
.address-item {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  padding: 15rpx 15rpx 0rpx 15rpx;
  width: 680rpx;

  .address-item-top {
    border-bottom: 1px dashed #D3D1D1;
    display: flex;
    align-items: center;
    padding: 0rpx 0rpx 15rpx 0rpx;

    .img-box {
      width: 120rpx;
      height: 120rpx;

      image {
        width: 75%;
        height: 75%;
        display: block;
        margin: 12.5% auto;
      }
    }

    .address-info {
      width: calc(100% - 120rpx);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .user-info {
        display: flex;
        align-items: center;

        text {
          display: block;
          line-height: 40rpx;
          margin-right: 20rpx;
        }

        .user-name,
        .user-phone {
          font-size: 30rpx;
        }

        .is-default {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #FEB773;
          color: white;
          width: 80rpx;
          height: 35rpx;
          border-radius: 20rpx;
          font-size: 22rpx;
        }
      }

      .address-detail {
        color: #4a4a4a;
        font-size: 26rpx;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
    }
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    padding: 15rpx 15rpx 25rpx 15rpx;

    .default-checkbox {
      display: flex;

      text {
        margin-left: 8rpx;
      }
    }

    .control-title {
      height: 30rpx;
      line-height: 30rpx;
      color: #666666;
    }

    view {
      display: flex;
      align-items: center;
    }

    image {
      width: 23rpx;
      height: 23rpx;
      vertical-align: middle;
      margin-right: 8rpx;
    }
  }
}
</style>