aluminium-trading-uniapp-240925/pages_order/center/addressListManage.vue

<template>
  <view class="address">

    <navbar title="地址管理" leftClick @leftClick="leftClick" />

    <view class="address-list">
      <addressList
          controls
          ref="addressList"
          @deleteAddress="deleteAddress"
          @editAddress="editAddress"
          @editDefault="editDefault"/>
    </view>


    <redactAddress
        ref="addressPopup"
        :addressDetail="addressDetail"
        @saveOrUpdate="saveOrUpdate"
        :title="title"></redactAddress>


    <view class="add-btn">
      <view @click="addBtn" class="btn">
        新增地址
      </view>
    </view>
  </view>
</template>

<script>
import redactAddress from '../components/address/redactAddress.vue'
import addressList from '../components/address/addressList.vue'

export default {
  components: {
    redactAddress,
    addressList
  },
  data() {
    return {
      title: '新增地址',
      type : '',
    }
  },
  onLoad(args) {
    this.type = args.type

    if(this.type == 'back'){
      this.addBtn()
    }
  },
  mounted() {
    this.getAddressList()
  },
  methods: {

    //获取地址列表
    getAddressList() {
      this.$refs.addressList.getAddressList()
    },

    //获取地址详情
    editAddress(address) {
      this.$refs.addressPopup.open({...address})
    },

    //返回个人中心
    leftClick() {
      uni.navigateBack(-1)
    },

    //添加和修改地址
    saveOrUpdate(addressDetail) {

      let data = {
        name: addressDetail.name,
        phone: addressDetail.phone,
        address: addressDetail.address,
        addressDetail: addressDetail.addressDetail,
        // defaultId: addressDetail.defaultId || '0',
        latitude: addressDetail.latitude,
        longitude: addressDetail.longitude
      }

      console.log(addressDetail.id,"addressDetail.id")
      if (addressDetail.id) {
        data.id = addressDetail.id
      }

      this.$api(data.id ? 'editAddress' : 'addAddress', data, res => {
        if (res.code == 200) {
          this.$refs.addressPopup.close()
          this.getAddressList()

          if(this.type == 'back'){
            uni.navigateBack(-1)
          }

          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
        }
      })
    },

    //修改默认地址
    editDefault(id) {
      this.$api('addressDefault', {
        id: id,
      }, res => {
        if (res.code == 200) {
          this.$refs.addressPopup.close()
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          this.getAddressList()
        }
      })
    },

    //删除地址
    deleteAddress(id) {
      let self = this
      uni.showModal({
        title: this.$t('components.deleteAddress'),
        content: this.$t('components.confirmDeleteAddress'),
        success(e) {
          if(e.confirm){
            self.$api('deleteAddress', {
              id
            }, res => {
              if (res.code == 200) {
                uni.showToast({
                  title: this.$t('components.deleteSuccessful'),
                  icon: 'none'
                })
                self.getAddressList()
              }
            })
          }
        }
      })
    },

    //点击新增按钮
    addBtn() {
      this.title = '新增地址'
      this.$refs.addressPopup.open({ //初始化数据
        name: '',
        phone: '',
        address: '',
        addressDetail: '',
        defaultId: '',
        latitude: '',
        longitude: ''
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.address {
  width: 750rpx;
  margin: 0rpx auto;
  background: #F5F5F5;
  box-sizing: border-box;
  min-height: 100vh;

  .address-list {
    padding: 40rpx 20rpx 120rpx 20rpx;
  }

  .add-btn {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 750rpx;
    height: 100rpx;
    background: white;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 85%;
      height: 80rpx;
      border-radius: 40rpx;
      color: white;
      text-align: center;
      font-size: 28rpx;
      background: $uni-color;
    }
  }
}

@media all and (min-width: 961px) {
  .add-btn {
    left: 50% !important;
    transform: translateX(-50%);
  }
}

//选择位置地图样式
:deep(.uni-system-choose-location) {
  z-index: 99999 !important;
}
</style>