uniAppXCX/pages/addressManage/addressManage.vue

<template>
  <view class="container">
    <view class="list">
      <view class="card" v-for="(item, index) in list" :key="index" @click="selectAddress(item)">
        <view class="row">
          <view>
            {{ item.name }}
          </view>
          <view>
            {{ item.tel }}
          </view>
          <uni-icons color="#ff5a5a" type="trash" size="25" @click="clickDelete(item)"></uni-icons>
        </view>
        <view class="row" style="margin-top: 10rpx">
          <view style="font-size: 24rpx">
            {{ item.province }}{{ item.city }}{{ item.county }}{{ item.addressDetail }}
          </view>
          <uni-icons color="#00ce65" type="compose" size="25" @click="clickEdit(item)"></uni-icons>
        </view>
      </view>
      <noData v-if="list.length == 0" />
    </view>
    <view class="bottom">
      <button class="m_button" type="default" @click="toAdd">新建地址</button>
    </view>
  </view>
</template>

<script>
import noData from '@/component/noData.vue'
import { addressListApi, addressDeleteApi } from '@/api/address.js'
export default {
  components: {
    noData,
  },
  data() {
    return {
      list: [],
      select: false,
      url: '',
      ids: '',
    }
  },
  onLoad(query) {
    if (getApp().globalData.selectAddrss) {
      this.select = true
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    selectAddress(item) {
      if (this.select) {
        let params = {
          addressId: item.id,
        }
        this.$redirectTo('/pages/orderConfirm/orderConfirm', params)
        getApp().globalData.selectAddrss = false
      }
    },
    getList() {
      addressListApi().then(res => {
        console.log(res, 'addressListApi-res')
        this.list = res.data.list
      })
    },
    toAdd() {
      wx.navigateTo({ url: '/pages/addressEdit/addressEdit' })
    },
    clickEdit(data) {
      wx.navigateTo({
        url: `/pages/addressEdit/addressEdit?id=${data.id}`,
      })
    },
    clickDelete(data) {
      let _this = this
      wx.showModal({
        title: '提示',
        content: '删除该收货地址?',
        success: () => {
          let params = {
            id: data.id,
          }
          addressDeleteApi(params).then(res => {
            wx.showToast({
              title: '操作成功',
            })
            _this.getList()
          })
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #eaeaea;
  overflow: scroll;
}
.list {
  margin-bottom: 120rpx;
}
.card {
  margin-top: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  padding: 20rpx;
  background: white;
  border-radius: 10rpx;
  font-size: 28rpx;
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  padding: 40rpx;
  text-align: center;
  width: calc(100% - 80rpx);
  .m_button {
    height: 72rpx;
    width: 40vw;
    line-height: 72rpx;
    border-radius: 36rpx;
    font-size: 26rpx;
  }
}
</style>