王明 / Food-Labeling-Management-Platform

  <template>
    <view class="loc-root">

      <view class="loc-trigger" @click.stop="openPicker">

        <text class="loc-text">{{ displayLocationName || '—' }}</text>

        <AppIcon name="chevronDown" size="sm" color="white" />
      </view>
  
      <view v-if="showPicker" class="picker-mask" @click="showPicker = false">
        <view class="picker-body" @click.stop>
          <view class="picker-header">
            <text class="picker-title">Switch Location</text>
            <view class="picker-close" @click="showPicker = false">
              <AppIcon name="plus" size="sm" color="gray" />
            </view>
          </view>
          <view class="picker-list">
            <view
              v-for="s in stores"
              :key="s.id"
              class="picker-item"
              :class="{ active: currentId === s.id }"
              @click="handleSelect(s)"
            >
              <view class="picker-icon" :class="{ active: currentId === s.id }">
                <AppIcon name="mapPin" size="sm" :color="currentId === s.id ? 'white' : 'gray'" />
              </view>
              <view class="picker-info">

                <text class="picker-name">{{ s.locationName }}</text>
                <text class="picker-addr">{{ s.fullAddress }}</text>

              </view>
              <view v-if="currentId === s.id" class="picker-check">
                <AppIcon name="check" size="sm" color="white" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">

  import { ref, computed, watch } from 'vue'

  import { useI18n } from 'vue-i18n'
  import AppIcon from './AppIcon.vue'

  import {
    getCurrentStoreId,
    switchStore,
    getBoundLocations,
    getCurrentLocationCode,
  } from '../utils/stores'

  import type { UsAppBoundLocationDto } from '../types/usAppBound'

  
  const { t } = useI18n()

  const stores = ref<UsAppBoundLocationDto[]>([])

  const currentId = ref(getCurrentStoreId())
  const showPicker = ref(false)
  

  function refreshList() {
    stores.value = getBoundLocations().filter((s) => s.state !== false)
  }
  

  /** 药丸展示门店名称（与弹窗内选中项一致）；无名称时再退回编码 */
  const displayLocationName = computed(() => {
    const fromStorage = uni.getStorageSync('storeName')
    if (typeof fromStorage === 'string' && fromStorage.trim()) return fromStorage.trim()

    if (currentId.value) {
      const row = stores.value.find((x) => x.id === currentId.value)

      if (row?.locationName?.trim()) return row.locationName.trim()

    }

    const id = getCurrentStoreId()
    if (id) {
      const row = getBoundLocations().find((x) => x.id === id)
      if (row?.locationName?.trim()) return row.locationName.trim()
    }
    const code = getCurrentLocationCode()
    return code || ''

  })
  
  function openPicker() {
    refreshList()
    currentId.value = getCurrentStoreId()
    showPicker.value = true
  }
  
  watch(showPicker, (v) => {
    if (v) refreshList()
  })
  
  const handleSelect = (s: UsAppBoundLocationDto) => {

    if (s.id === currentId.value) {
      showPicker.value = false
      return
    }

    switchStore(s.id, s.locationName, s.locationCode)

    currentId.value = s.id
    showPicker.value = false

    uni.showToast({ title: t('location.storeSwitched'), icon: 'success' })

    setTimeout(() => {
      const pages = getCurrentPages()

      const cur = pages[pages.length - 1] as { route?: string }
      if (cur?.route) {

        uni.redirectTo({ url: '/' + cur.route })
      }
    }, 800)
  }
  </script>
  
  <style scoped>
  .loc-trigger {
    display: flex;
    align-items: center;
    gap: 4rpx;
    padding: 4rpx 16rpx 4rpx 20rpx;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999rpx;
    margin-top: 6rpx;
  }
  
  .loc-text {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;

    max-width: 320rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
  
  .loc-trigger .icon-wrap {
    opacity: 0.7;
  }
  
  /* Picker modal */
  .picker-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  
  .picker-body {
    width: 100%;
    background: #fff;
    border-radius: 32rpx 32rpx 0 0;
    padding: 32rpx;
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
  }
  
  .picker-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #111827;
  }
  
  .picker-close {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
  }
  
  .picker-list {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
  }
  
  .picker-item {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 28rpx 24rpx;
    border-radius: 16rpx;
    border: 2rpx solid #e5e7eb;
    background: #fff;
  }
  
  .picker-item.active {
    border-color: var(--theme-primary);
    background: var(--theme-primary-light);
  }
  
  .picker-icon {
    width: 56rpx;
    height: 56rpx;
    border-radius: 14rpx;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .picker-icon.active {
    background: var(--theme-primary);
  }
  
  .picker-info {
    flex: 1;
    min-width: 0;
  }
  
  .picker-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #111827;
    display: block;
    margin-bottom: 4rpx;
  }
  
  .picker-addr {
    font-size: 24rpx;
    color: #6b7280;
    display: block;
  }
  
  .picker-check {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    background: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  </style>