cheflinkuser/src/pages/address/index.vue

<script setup lang="ts">
import Search from "@/pages/home/components/tabbar-home/components/search.vue";
import {useUserStore} from "@/store";
import useEventEmit from "@/hooks/useEventEmit";
import {EventEnum, UserAddressType} from "@/constant/enums";
import {appAppointmentTimeUpdateAppointmentTimePost, appUserAddressListPost, appUserAddressRemovePost} from "@/service";
const { t } = useI18n();
const userStore = useUserStore();
import {useAddressStore} from "./store/address";
const addressStore = useAddressStore()
import {useMessage} from "wot-design-uni";
const message = useMessage();

function handleClickSearch() {
  uni.navigateTo({
    url: '/pages-user/pages/search-address/index',
    events: {
      chooseAddress: (data: any) => {
        console.log('搜索的地址信息', data)
        if (data) {
          addressStore.clearAddressInfo()
          addressStore.setAddressLocation({
            displayName: data.displayName,
            formattedAddress: data.formattedAddress,
            longitude: data.location.lng,
            latitude: data.location.lat
          })
          addressStore.pendingIntroBuildingType = true
          setTimeout(()=> {
            uni.navigateTo({
              url: '/pages/address/save-address/other'
            })
          }, 300)
        }
      }
    }
  });
}

function reservationTime() {
  uni.navigateTo({ url: '/pages/address/reservation-time' })
}

// 获取用户地址列表
const addressesList = ref([])
function getAddressList() {
  appUserAddressListPost({
    params: {
      pageNum: 1,
      pageSize: 100,
    }
  }).then(res => {
    console.log('appAddressListGet', res)
    addressesList.value = res.rows
  })
}

onShow(()=> {
  getAddressList()
})

function chooseType(item: any) {
  addressStore.addressInfo = item
  switch (item.type) {
    case UserAddressType.HOUSE:
      uni.navigateTo({
        url: '/pages/address/save-address/house',
      })
      break;
    case UserAddressType.APARTMENT:
      uni.navigateTo({
        url: '/pages/address/save-address/apartment',
      })
      break;
    case UserAddressType.OFFICE:
      uni.navigateTo({
        url: '/pages/address/save-address/office',
      })
      break;
    case UserAddressType.HOTEL:
      uni.navigateTo({
        url: '/pages/address/save-address/hotel',
      })
      break;
    case UserAddressType.OTHER:
      uni.navigateTo({
        url: '/pages/address/save-address/other',
      })
      break;
  }
}
function deleteAddress(item: any) {
  message
      .confirm({
        title: t("common.prompt.system-prompt"),
        msg: `${t("common.prompt.system-prompt-delete")}`,
        confirmButtonText: t("common.yes"),
        cancelButtonText: t("common.no"),
        cancelButtonProps: {
          customClass:
              "!h-88rpx !w-258rpx !min-w-auto !text-30rpx  !lh-42rpx !font-bold !border-#666666   !rounded-20rpx",
        },
        confirmButtonProps: {
          customClass:
              "!h-88rpx !w-258rpx !min-w-auto !text-30rpx !lh-42rpx !font-bold  !bg-primary  !rounded-20rpx",
        },
      })
      .then(async () => {
        appUserAddressRemovePost({
          body: [item.id]
        }).then((res) => {
          console.log('删除地址', res)
          uni.showToast({
            title: t('toast.deleteSuccess'),
            icon: 'none'
          })
          getAddressList()
        })
      })
      .catch(() => {
      });
}

useEventEmit(EventEnum.CHOOSE_APPOINTMENT_TIME, (data) => {
  console.log('CHOOSE_APPOINTMENT_TIME', data)
  if(data) {
    appAppointmentTimeUpdateAppointmentTimePost({
      body: {
        endTime: data.endTime,
        startTime: data.startTime,
      }
    }).then(res=> {
      userStore.getAppointmentTime()
    })
  }
})
</script>

<template>
  <view>
    <navbar :title="t('pages.address.title')" />
    <view class="mt-32rpx px-30rpx">
      <search :is-auto-jump="false" @clickSearch="handleClickSearch" />
    </view>
    <view class="mt-64rpx text-40rpx lh-40rpx text-#333 font-bold pl-30rpx pb-24rpx">
      {{ t('pages.address.savedAddresses') }}
    </view>
    <template v-for="item in addressesList">
      <wd-swipe-action>
        <!--:class="item === 1 ? 'bg-#F3F3F3' : ''" -->
        <view @click="chooseType(item)" class="w-full h-156rpx flex-center-sb px-30rpx">
          <view class="flex items-center">
            <!--           <image v-if="item === 1" src="@img/chef/143.png" class="w-44rpx h-44rpx shrink-0 mr-28rpx"></image>-->
            <image src="@img/chef/145.png" class="w-44rpx h-44rpx shrink-0 mr-28rpx"></image>
            <view class="flex-1 h-156rpx pt-40rpx">
              <view class="text-32rpx lh-32rpx text-#333 font-500 mb-16rpx line-clamp-1">{{ item.formattedAddress }}</view>
              <view class="text-28rpx lh-28rpx text-#6D6D6D">{{ item.displayName || '' }}</view>
            </view>
          </view>
          <image src="@img/chef/144.png" class="w-44rpx h-44rpx shrink-0 pl-30rpx"></image>
        </view>
        <template #right>
          <view class="action flex items-center text-30rpx lh-30rpx text-#fff">
            <view class="w-152rpx h-156rpx bg-#FF2828 center" @click="deleteAddress(item)">{{ t('common.delete') }}</view>
          </view>
        </template>
      </wd-swipe-action>
    </template>
    <template v-if="addressesList.length === 0">
      <view class="py-100rpx center">
        <image class="w-250rpx h-250rpx" src="@img/chef/100.png"></image>
      </view>
    </template>
    <view class="mt-44rpx text-40rpx lh-40rpx text-#333 font-bold pl-30rpx">
      {{ t('pages.address.appointmentTime') }}
    </view>
    <view @click="reservationTime" class="flex-center-sb px-30rpx mt-70rpx">
      <view class="flex items-center">
        <image src="@img/chef/146.png" class="w-44rpx h-44rpx shrink-0 mr-28rpx"></image>
        <text class="text-32rpx lh-32rpx text-#333 font-500">{{ t('pages.address.immediateDelivery') }}</text>
      </view>
      <view class="h-56rpx px-22rpx bg-#F2F2F2 rounded-56rpx center text-28rpx text-#333">
        {{ userStore.appointmentTimeShow || t('pages.address.reservation') }}
      </view>
    </view>
  </view>
</template>

<style>
page {
  background-color: #fff;
}
</style>