medical-mall/pages/mall/consumer/subscription/followed-shops.uvue

<template>
  <view class="followed-shops-page">
    <view class="header">
      <text class="header-title">我关注的店铺</text>
    </view>

    <view class="shop-list" v-if="shops.length > 0">
      <view class="shop-item" v-for="shop in shops" :key="shop.id" @click="goToShop(shop)">
        <image :src="shop.shop_logo != null ? shop.shop_logo : '/static/default-shop.png'" class="shop-logo" mode="aspectFill" />
        <view class="shop-info">
          <text class="shop-name">{{ shop.shop_name }}</text>
          <text class="shop-desc">{{ shop.description != null ? shop.description : '暂无介绍' }}</text>
          <view class="shop-meta">
             <text class="rating shop-meta-text">⭐ {{ shop.rating_avg }}</text>
             <text class="sales shop-meta-text">销量: {{ shop.total_sales }}</text>
          </view>
        </view>
        <button class="unfollow-btn" @click.stop="unfollow(shop)">已关注</button>
      </view>
    </view>
    
    <view v-else-if="!loading" class="empty-state">
      <text class="empty-text">暂无关注的店铺</text>
      <button class="go-shop-btn" @click="goHome">去逛逛</button>
    </view>
    
    <view v-if="loading" class="loading-state">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { supabaseService } from '@/utils/supabaseService.uts'

type FollowedShop = {
    id: string
    merchant_id: string
    shop_name: string
    shop_logo: string | null
    description: string | null
    rating_avg: number
    total_sales: number
}

const shops = ref<FollowedShop[]>([])
const loading = ref(true)

onMounted(() => {
    loadFollowedShops()
})

const loadFollowedShops = async () => {
    loading.value = true
    const userId = supabaseService.getCurrentUserId()
    if (!userId) {
        uni.navigateTo({ url: '/pages/auth/login' })
        return
    }

    const res = await supabaseService.getFollowedShops(userId)
    // res is array of { id, user_id, shop_id, ml_shops: {...} }
    
    const list: FollowedShop[] = []
    res.forEach((item: any) => {
        const shopData = item['ml_shops'] as any
        if (shopData != null) {
            list.push({
                id: shopData['id'] as string, // Shop ID
                merchant_id: shopData['merchant_id'] as string, 
                shop_name: shopData['shop_name'] as string,
                shop_logo: shopData['shop_logo'] as string | null,
                description: shopData['description'] as string | null,
                rating_avg: (shopData['rating_avg'] != null) ? (shopData['rating_avg'] as number) : 5.0,
                total_sales: (shopData['total_sales'] != null) ? (shopData['total_sales'] as number) : 0
            })
        }
    })
    
    shops.value = list
    loading.value = false
}

const unfollow = async (shop: FollowedShop) => {
    const userId = supabaseService.getCurrentUserId()
    if (!userId) return

    uni.showModal({
        title: '提示',
        content: '确定取消关注该店铺吗？',
        success: async (res) => {
            if (res.confirm) {
                const success = await supabaseService.unfollowShop(shop.id, userId)
                if (success) {
                    uni.showToast({ title: '已取消', icon: 'none' })
                    loadFollowedShops() // Reload list
                } else {
                    uni.showToast({ title: '操作失败', icon: 'none' })
                }
            }
        }
    })
}

const goToShop = (shop: FollowedShop) => {
    // Navigate using the Shop ID or Merchant ID?
    // shop-detail uses merchantId parameter but we patched it to handle ShopID too.
    // Let's prefer passing the raw ID we have.
    // If shop.id is UUID of shop, and shop.merchant_id is User UUID.
    // Since shop-detail handles both, passing shop.id (which is ml_shops.id) is fine?
    // Wait, shop-detail logic: 1. getShopByMerchantId(id) [tries merchant_id then id].
    // So passing shop.id is safer if merchant_id is not unique or confusing.
    const targetId = shop.merchant_id != '' ? shop.merchant_id : shop.id
    uni.navigateTo({
        url: `/pages/mall/consumer/shop-detail?merchantId=${targetId}`
    })
}

const goHome = () => {
    uni.switchTab({ url: '/pages/mall/consumer/index' })
}
</script>

<style>
.followed-shops-page {
  padding: 15px;
  background-color: #f5f5f5;
  flex: 1;
}
.header {
  margin-bottom: 15px;
}
.header-title {
  font-size: 18px;
  font-weight: bold;
}
.shop-list {
  display: flex;
  flex-direction: column;
}
.shop-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.shop-item:last-child {
  margin-bottom: 0;
}
.shop-logo {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background-color: #eee;
  margin-right: 12px;
}
.shop-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.shop-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.shop-desc {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-meta {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
  display: flex;
}
.shop-meta-text {
  margin-right: 8px;
}
.unfollow-btn {
  font-size: 12px;
  padding: 4px 12px;
  background-color: #eee;
  color: #666;
  border-radius: 20px;
  margin-left: 10px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}
.empty-text {
  color: #999;
  margin-bottom: 20px;
}
.go-shop-btn {
  background-color: #ff4444;
  color: white;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
}
.loading-state {
    text-align: center;
    padding-top: 50px;
    color: #999;
}
</style>