xdd-uniapp-new/pages/user/address/AddressManagement/index.vue

<template>
  <view
    ref="container"
    :class="addressList.length < 1 && page > 1 ? 'on' : ''"
    class="address-management"
  >
    <view style="margin-bottom: 12rpx;" class="line" v-if="addressList.length > 0">
      <!-- <image :src="webUrl+'/20230304135025917856.png'"/> -->
    </view>
    <view style="position: relative;" class="item" v-for="(item, addressListIndex) in addressList"
          :key="addressListIndex" @click="tapAddress(item)">
      <view v-if="item.isDefault||item.isDefault=='1' ? true : false" class=""
            style="position: absolute;top: 0;right: 0;">
        <image style="width: 72rpx;height: 36rpx;" :src="webUrl+'/20210807165228290910.png'" mode=""></image>
      </view>
      <view class="address">
        <view class="consignee">
          收货人：{{ item.realName }}
          <text class="phone">{{ item.phone }}</text>
        </view>
        <view style="color: #8B8F99;">
          收货地址：{{ item.province }}{{ item.city }}{{
            item.district
          }}{{ item.detail }}
        </view>
      </view>
      <view v-if="!choosMode" class="operation acea-row row-between-wrapper">
        <view class="select-btn">
          <view class="checkbox-wrapper">
            <checkbox-group @change.stop="radioChange(item.id)">
              <label class="well-check acea-row row-middle">
                <checkbox style="transform: scale(0.55);"
                          :checked="item.isDefault||item.isDefault=='1' ? true : false"></checkbox>
                <text class="default" style="margin-left: -10rpx;">设为默认</text>
              </label>
            </checkbox-group>
          </view>
        </view>
        <view class="acea-row row-middle">
          <view @click.stop="editAddress(addressListIndex)" style="color: #B3BCBF;">
            <text class="iconfont icon-bianji" style="color: #B3BCBF;"></text>
            <text>修改</text>
          </view>
          <view @click.stop="delAddress(addressListIndex)" style="color: #B3BCBF;">
            <text class="iconfont icon-shanchu" style="color: #B3BCBF;"></text>
            <text>删除</text>
          </view>
        </view>
      </view>
    </view>
    <Loading :loaded="loadend" :loading="loading"></Loading>
    <view class="noCommodity flex jc-center" v-if="addressList.length < 1 && page > 1">
      <view class="noPictrue">
        <image :src="webUrl+'/20240102232705995178.png'" class="image"/>
      </view>
    </view>
    <view style="height:100rpx;"></view>
    <view class="footer acea-row row-between-wrapper">
      <view class="addressBnt bg-color-lightred" v-if="isWechat" @click="addAddress">
        <text class="iconfont icon-tianjiadizhi"></text>
        添加新地址
      </view>
      <view class="addressBnt on bg-color-lightred" v-else @click="addAddress">
        <text class="iconfont icon-tianjiadizhi"></text>
        添加新地址
      </view>
    </view>
  </view>
</template>
<script type="text/babel">
import {getAddressDefaultSet, getAddressList, getAddressRemove} from "@/api/user"
import Loading from "@/components/Loading"
import {isWeixin} from "@/utils"
import { pageListenMixins } from '@/mixins/pageListenMixins'

export default {
  components: {
    Loading
  },
  mixins: [pageListenMixins],
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      page: 1,
      limit: 20,
      // 是否选择地址模式：0-不是，1-来源订单创建页面，2-来源购物车
      choosMode: 0,
      addressList: [],
      loadTitle: "",
      loading: false,
      loadend: false,
      isWechat: isWeixin(),
      pageKeyId: Object.freeze('userAddressIndex')
    }
  },
  mounted() {
    this.AddressList()
  },
  onReachBottom() {
    !this.loading && this.AddressList()
  },
  onLoad(e) {
    // 是否选择模式
    const choosMode = this.$yroute.query.choosMode || 0
    if (choosMode) {
      this.choosMode = parseInt(choosMode)
      uni.setNavigationBarTitle({
        title: '选择收货地址'
      })
    } else {
      this.choosMode = 0
    }
  },
  onShow() {
    this.refresh()
  },
  methods: {
    tapAddress(item) {
      // 来源订单创建页面
      if (this.choosMode === 1) {
        uni.setStorageSync('chooseAddress', item)
        this.$yrouter.back()
      }
      // 来源购物车
      if (this.choosMode === 2) {
        uni.setStorageSync('cartChooseAddress', item)
        this.$yrouter.back()
      }
    },
    refresh() {
      this.addressList = []
      this.page = 1
      this.loadend = false
      this.AddressList()
    },
    /**
     * 获取地址列表
     *
     */
    AddressList() {
      const that = this
      // 阻止下次请求（false可以进行请求）
      if (that.loading) return
      // 阻止结束当前请求（false可以进行请求）
      if (that.loadend) return
      that.loading = true
      getAddressList({page: that.page, limit: that.limit}).then(res => {
        that.loading = false
        // apply();js将一个数组插入另一个数组
        that.addressList.push.apply(that.addressList, res.data)
        // 判断所有数据是否加载完成
        that.loadend = res.data.length < that.limit
        that.page = that.page + 1
      })
    },
    /**
     * 编辑地址
     */
    editAddress(index) {
      this.$yrouter.push({
        path: "/pages/user/address/AddAddress/index",
        query: {id: this.addressList[index].id}
      })
    },
    /**
     * 删除地址
     */
    delAddress(index) {
      const that = this
      const address = this.addressList[index]
      const id = address.id
      uni.showModal({
        title: '确认删除此收货地址?',
        content: '',
        showCancel: true,
        cancelText: '取消',
        confirmText: '确认',
        success: res => {
          if (res.confirm) {
            getAddressRemove(id).then(function () {
              uni.showToast({
                title: "删除成功!",
                icon: "success",
                duration: 2000,
                complete: () => {
                  that.addressList.splice(index, 1)
                  that.$set(that, "addressList", that.addressList)
                }
              })
            })
          }
        }
      })
    },
    /**
     * 设置默认地址
     */
    radioChange(id) {
      getAddressDefaultSet(id).then(res => {
        this.refresh()
        uni.showToast({title: res.msg, icon: "none", duration: 2000})
      })
    },
    /**
     * 新增地址
     */
    addAddress() {
      this.$yrouter.push({
        path: "/pages/user/address/AddAddress/index"
      })
    }
  }
}
</script>
<style scoped lang="less">
.address-management.on {
  background-color: #fff;
  height: 100vh;
}
.address-management .item {
  box-shadow: 0px 6rpx 6rpx rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: 16rpx;
  margin-left: 32rpx;
  margin-right: 32rpx;
}
</style>