menduner-mall-uniapp/pages/user/prize/receive.vue

<!-- 奖品领取 -->
<template>
  <s-layout title="奖品领取">
    <view class="ss-flex" style="justify-content: flex-end;">
      <button class="refresh-btn ss-reset-button" type="warn" plain="true" @tap.stop="getAddressList">
        <uni-icons type="reload" color="#ff3404" size="30"></uni-icons>
        刷 新
      </button>
    </view>
    <view v-if="state.addressList.length">
      <view class="address-item ss-flex ss-row-between ss-col-center border-bottom"
        v-for="(item, index) in state.addressList"
        :key="item.id"
        @tap.stop="state.selectedIndex = index"
      >
        <view class="item-left">
          <view class="area-text ss-flex ss-col-center">{{ item.areaName }}</view>
          <view class="address-text">{{ item.detailAddress }}</view>
          <view class="person-text"> {{ item.name }} {{ item.mobile }} </view>
        </view>
        <view>
          <uni-icons 
            :type="index === state.selectedIndex ? 'checkbox-filled' : 'circle'" 
            :color="index === state.selectedIndex ? '#ff3404' : '#000000'" 
            size="28"
          ></uni-icons>
        </view>
      </view>
    </view>

    <su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
      <view class="footer-box ss-flex-col ss-row-between">
        <view class="ss-m-b-20 ss-flex">
          <button
            class="save-btn ss-reset-button ui-Shadow-Main"
            @tap="sheep.$router.go('/pages/user/address/edit')"
            >
            新增收货地址
          </button>
          <button class="ss-reset-button save-btn ui-Shadow-Main" @tap.stop="onSave">领取</button>
        </view>
      </view>
    </su-fixed>
  </s-layout>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import sheep from '@/sheep';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import _ from 'lodash-es';
  import AddressApi from '@/sheep/api/member/address';
  import PrizeApi from '@/sheep/api/prizeDraw'

  const state = reactive({
    selectedIndex: 0,
		addressList: [],
  });

	// 获取收货地址
	const getAddressList = async () => {
		const list = (await AddressApi.getAddressList()).data;
    state.addressList = list.map(e => {
      return { text: e.areaName, value: e.id, ...e }
    })
	}

  // 保存收货地址
  const onSave = async () => {
    if (!state.addressList || !state.addressList.length) {
      uni.showToast({
        title: '请新增收货地址',
        icon: 'none',
        duration: 2000
      })
      return
    }
    const address = state.addressList[state.selectedIndex]
    if (!address || !Object.keys(address).length) {
      uni.showToast({
        title: '请选择收货地址',
        icon: 'none',
        duration: 2000
      })
      return
    }
    
    const { code } = await PrizeApi.luckyLotteryRecordReceive({ id: receiveId.value, receiveInfo: JSON.stringify(address) })
    if (code === 0) {
      sheep.$router.back();
    }
  }

	const receiveId = ref()
  onLoad(async (options) => {
		receiveId.value = options.id
  })

  onShow(async () => {
    // 获取收货地址列表
		await getAddressList()
  })
</script>

<style lang="scss">
  .address-item {
    padding: 24rpx 30rpx;

    .item-left {
      width: 600rpx;
    }

    .area-text {
      font-size: 26rpx;
      font-weight: 400;
      color: $dark-9;
    }

    .address-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      line-height: 48rpx;
    }

    .person-text {
      font-size: 28rpx;
      font-weight: 400;
      color: $dark-9;
    }
  }
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }

    .uni-data-checklist .checklist-group {
      display: block !important;
    }
  }

  .default-box {
    width: 100%;
    box-sizing: border-box;
    height: 100rpx;

    .default-box-title {
      font-size: 28rpx;
      color: #333333;
      line-height: normal;
    }
  }

  .refresh-btn {
    width: 200rpx;
    height: 80rpx;
    border-radius: 40rpx;
  }

  .footer-box {
	  width: 100vw;
    .save-btn {
		  width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
	    margin: 0 20rpx;
    }
  }
</style>