uni-wechat-shop/pages/address/index.vue

<template>
  <view class="container" :style="appThemeStyle">
    <view class="addres-list">
      <view class="address-item" v-for="(item, index) in list" :key="index">
        <view class="contacts">
          <text class="name">{{ item.buyerName }}</text>
          <text class="phone">{{ item.buyerPhone }}</text>
        </view>
        <view class="address">
          <text class="region" v-for="(region, idx) in item.region" :key="idx">{{ region }}</text>
          <text class="detail">{{ item.detail }}</text>
        </view>
        <view class="line"></view>
        <view class="item-option">
          <view class="_left">
            <view class="item-radio">
              <u-radio-group v-model="defaultId" @change="handleSetDefault(item.id)">
                <u-radio :name="item.id" :active-color="appTheme.mainBg">默认</u-radio>
              </u-radio-group>
            </view>
          </view>
          <view class="_right">
            <view class="events">
              <view class="event-item" @click="handleUpdate(item)">
                <text class="iconfont icon-edit"></text>
                <text class="title">编辑</text>
              </view>
              <view class="event-item" @click="handleRemove(item.id)">
                <text class="iconfont icon-delete"></text>
                <text class="title">删除</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <empty v-if="!list.length" :isLoading="isLoading" tips="亲，暂无收货地址" />
    <!-- 底部操作按钮 -->
    <view class="footer-fixed">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" @click="handleCreate()">添加新地址</view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as AddressApi from '@/api/address'
  import * as OrderApi from '@/api/order'
  import Empty from '@/components/empty'

  export default {
    components: {
      Empty
    },
    data() {
      return {
        options: {},
        isLoading: true,
        list: [],
        defaultId: null
      }
    },
    onLoad(options) {
      // 当前页面参数
      this.options = options
    },
    onShow() {
      this.getPageData()
    },

    methods: {
      getPageData() {
        const app = this
        app.isLoading = true
        OrderApi.apiGetAddressList({}).then(res => {
            const rows = res.data.rows.map(item => {
              return {
                ...item,
                region: [item.province, item.city, item.district]
              }
            });
            const defaultItemIndex = rows.findIndex(item => item.status === 'default');
            if (defaultItemIndex !== -1) {
              const [defaultItem] = rows.splice(defaultItemIndex, 1);
              app.defaultId = defaultItem.id;
              app.list = [defaultItem, ...rows];
            } else {
              app.list = rows;
            }
        })
        .finally(() => app.isLoading = false)
      },
      // 添加新地址
      handleCreate() {
        this.$goPageByToken('pages/address/create')
      },
      // 编辑地址
      handleUpdate(item) {
        const data = encodeURIComponent(JSON.stringify(item))
        this.$goPageByToken('pages/address/update', { data })
      },
      // 删除收货地址
      handleRemove(addressId) {
        const app = this
        uni.showModal({
          title: "提示",
          content: "您确定要删除当前收货地址吗?",
          success({ confirm }) {
            confirm && app.onRemove(addressId)
          }
        });
      },
      // 确认删除收货地址
      onRemove(addressId) {
        const app = this
        OrderApi.apiInsertOrUpdateAddress({ id: addressId, status: 'deleted' })
          .then(result => {
            app.getPageData()
          })
      },
      // 设置为默认地址
      handleSetDefault(addressId) {
        const app = this
        OrderApi.apiInsertOrUpdateAddress({ id: addressId, status: 'default' })
          .then(() => {
            app.options.from === 'checkout' && uni.navigateBack()
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .addres-list {
    padding-top: 20rpx;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
  }

  // 项目内容
  .address-item {
    margin: 0 auto 20rpx auto;
    padding: 30rpx 40rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  .contacts {
    font-size: 30rpx;
    margin-bottom: 16rpx;

    .name {
      margin-right: 16rpx;
    }
  }

  .address {
    font-size: 28rpx;

    .region {
      margin-right: 10rpx;
    }
  }

  .line {
    margin: 20rpx 0;
    border-bottom: 1rpx solid #f3f3f3;
  }

  .item-option {
    display: flex;
    justify-content: space-between;
    height: 48rpx;

    // 单选框
    .item-radio {
      font-size: 28rpx;

      .radio {
        vertical-align: middle;
        transform: scale(0.76)
      }

      .text {
        vertical-align: middle;
      }
    }

    // 操作
    .events {
      display: flex;
      align-items: center;
      line-height: 48rpx;

      .event-item {
        font-size: 28rpx;
        margin-right: 26rpx;
        color: #4c4c4c;

        &:last-child {
          margin-right: 0;
        }

        .title {
          margin-left: 8rpx;
        }
      }
    }

  }


  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: var(--window-left);
    right: var(--window-right);
    z-index: 11;

    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .btn-wrapper {
      height: 120rpx;
      padding: 0 40rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 86rpx;
      color: #fff;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
    }

    .btn-item-main {
      background: linear-gradient(to right, $main-bg, $main-bg2);
      color: $main-text;
    }

  }
</style>