online-order-h5/src/views/owner/shops.vue

<template>
  <div class="owner-shops">
    <van-nav-bar :title="$t('owner.shops.title')" left-arrow @click-left="goBack" fixed placeholder>
      <template #right>
        <van-icon name="add-o" size="20" @click="addShop" />
      </template>
    </van-nav-bar>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="shop-list">
        <div
          v-for="shop in shops"
          :key="shop.id"
          class="shop-card"
          :class="{ selected: shop.id === selectedShopId }"
          @click="selectShop(shop)"
        >
          <div class="shop-header">
            <div class="shop-logo">
              <van-image
                v-if="shop.logo"
                :src="shop.logo"
                width="50"
                height="50"
                round
                fit="cover"
              />
              <div v-else class="logo-placeholder">
                <van-icon name="shop-o" size="24" />
              </div>
            </div>
            <div class="shop-info">
              <div class="shop-name">
                {{ shop.name }}
                <van-tag :type="getStatusType(shop.status)">
                  {{ getStatusText(shop.status) }}
                </van-tag>
              </div>
              <div class="shop-address">{{ shop.address }}</div>
            </div>
            <van-icon name="arrow" class="arrow" />
          </div>

          <div class="shop-actions">
            <van-button size="small" plain type="primary" @click.stop="enterShop(shop)">
              {{ $t('owner.shops.actions.enter') }}
            </van-button>
            <van-button size="small" plain @click.stop="editShop(shop)">
              {{ $t('common.edit') }}
            </van-button>
            <van-button
              size="small"
              plain
              :type="shop.status === 'operating' ? 'warning' : 'success'"
              @click.stop="toggleStatus(shop)"
            >
              {{ shop.status === 'operating' ? $t('owner.shops.actions.stopOperating') : $t('owner.shops.actions.startOperating') }}
            </van-button>
          </div>
        </div>

        <van-empty v-if="shops.length === 0" :description="$t('owner.shops.empty')" />
      </div>
    </van-pull-refresh>

    <!-- 当前选中店铺指示 -->
    <div v-if="selectedShop" class="current-shop-bar">
      <span>{{ $t('owner.shops.currentShopLabel') }} <strong>{{ selectedShop.name }}</strong></span>
      <van-button size="small" type="primary" @click="enterSelectedShop">
        {{ $t('owner.shops.actions.enterManagement') }}
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showToast, showConfirmDialog } from 'vant'

const { t } = useI18n()
import { useCompanyStore, type Shop, type ShopStatus } from '@/store/modules/company'

const router = useRouter()
const companyStore = useCompanyStore()

const refreshing = ref(false)

const shops = computed(() => companyStore.shops)
const selectedShopId = computed(() => companyStore.selectedShopId)
const selectedShop = computed(() => companyStore.selectedShop)

const getStatusType = (status: ShopStatus): 'success' | 'warning' | 'default' => {
  const types: Record<ShopStatus, 'success' | 'warning' | 'default'> = {
    operating: 'success',
    closed: 'warning',
    preparing: 'default'
  }
  return types[status]
}

const getStatusText = (status: ShopStatus) => {
  const texts: Record<ShopStatus, string> = {
    operating: t('owner.shops.status.operating'),
    closed: t('owner.shops.status.resting'),
    preparing: t('owner.shops.status.preparing')
  }
  return texts[status]
}

const goBack = () => {
  router.back()
}

const onRefresh = async () => {
  await companyStore.loadCompanyData()
  refreshing.value = false
}

const selectShop = (shop: Shop) => {
  companyStore.selectShop(shop.id)
}

const enterShop = (shop: Shop) => {
  companyStore.selectShop(shop.id)
  router.push(`/shop/${shop.id}/dashboard`)
}

const enterSelectedShop = () => {
  if (selectedShop.value) {
    router.push(`/shop/${selectedShop.value.id}/dashboard`)
  }
}

const editShop = (shop: Shop) => {
  showToast(t('owner.shops.messages.editShop', { name: shop.name }))
}

const addShop = () => {
  showToast(t('owner.shops.messages.addShop'))
}

const toggleStatus = async (shop: Shop) => {
  const actionText = shop.status === 'operating' 
    ? t('owner.shops.actions.stopOperating') 
    : t('owner.shops.actions.startOperating')
  
  try {
    await showConfirmDialog({
      title: t('common.confirmAction'),
      message: t('owner.shops.messages.confirmStatusChange', { action: actionText, name: shop.name })
    })
    // TODO: 调用API更新状态
    showToast(t('owner.shops.messages.statusChanged', { action: actionText }))
  } catch {
    // 用户取消
  }
}

onMounted(() => {
  if (shops.value.length === 0) {
    companyStore.loadCompanyData()
  }
})
</script>

<style scoped>
.owner-shops {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 70px;
}

.shop-list {
  padding: 12px;
}

.shop-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.shop-card.selected {
  border-color: #1989fa;
}

.shop-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-placeholder {
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-address {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}

.arrow {
  color: #ccc;
}

.shop-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
}

.current-shop-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.current-shop-bar span {
  font-size: 14px;
  color: #666;
}

.current-shop-bar strong {
  color: #1989fa;
}
</style>