feat: #update

src/assets/templates/e-commerce/cart.vue

@@ -0,0 +1,307 @@
+<template>
+    <div class="min-h-screen bg-gray-50">
+      <!-- 状态栏 -->
+      <div class="flex justify-between items-center px-4 py-2 bg-gradient-to-r from-blue-50 to-blue-100">
+        <div class="text-lg">14:38</div>
+        <div class="flex items-center gap-2">
+          <div class="text-sm">|||</div>
+          <WifiIcon class="w-4 h-4" />
+          <BatteryIcon class="w-4 h-4" />
+        </div>
+      </div>
+  
+      <!-- 位置和商店信息 -->
+      <div class="bg-white px-4 py-2">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center gap-1">
+            <MapPinIcon class="w-5 h-5" />
+            <span class="text-sm">解放路 2-1</span>
+            <ChevronDownIcon class="w-4 h-4" />
+          </div>
+          <div class="flex items-center gap-2">
+            <button class="text-sm">删除</button>
+            <MoreHorizontalIcon class="w-6 h-6" />
+            <CircleIcon class="w-6 h-6" />
+          </div>
+        </div>
+        
+        <!-- 商店信息 -->
+        <div class="mt-3">
+          <div class="flex items-center gap-2">
+            <img src="/placeholder.svg?height=24&width=24" alt="store" class="w-6 h-6 rounded-full" />
+            <span class="font-medium">德龙大连西岗商场(721)</span>
+          </div>
+          <div class="flex justify-between items-center mt-2 text-sm">
+            <div class="text-blue-500">18:00~20:30送达</div>
+            <div class="text-gray-500">已减9.0元运费</div>
+            <div class="text-blue-500">再逛逛 ></div>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 整单换购 -->
+      <div class="bg-white mt-2 px-4 py-3">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center">
+            <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded">整单换购</span>
+            <span class="text-sm ml-2">已购满29元，请参加换购</span>
+          </div>
+          <div class="text-blue-500 text-sm">去换购 ></div>
+        </div>
+        <!-- 换购商品列表 -->
+        <div class="flex gap-4 overflow-x-auto no-scrollbar mt-4">
+          <div v-for="item in exchangeItems" :key="item.id" class="flex-shrink-0 w-24">
+            <img :src="item.image" :alt="item.name" class="w-24 h-24 object-cover rounded-lg" />
+            <div class="mt-2">
+              <div class="text-red-500 text-sm">¥{{ item.price }}</div>
+              <div class="text-gray-400 text-xs line-through">¥{{ item.originalPrice }}</div>
+            </div>
+            <button class="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center absolute right-0 bottom-0">
+              <PlusIcon class="w-4 h-4 text-white" />
+            </button>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 购物车商品 -->
+      <div class="mt-2">
+        <div v-for="item in cartItems" :key="item.id" class="bg-white p-4 mb-2 flex">
+          <input 
+            type="checkbox" 
+            :checked="item.selected"
+            @change="toggleSelect(item.id)"
+            class="mr-3 w-5 h-5 rounded-full"
+          />
+          <div class="flex-1">
+            <div class="flex gap-4">
+              <img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded-lg" />
+              <div class="flex-1">
+                <h3 class="font-medium">{{ item.name }}</h3>
+                <div v-if="item.limit" class="inline-block bg-red-100 text-red-500 text-xs px-2 py-0.5 rounded mt-1">
+                  限购{{ item.limit }}件
+                </div>
+                <div class="flex justify-between items-center mt-2">
+                  <div class="text-red-500 text-lg font-bold">¥{{ item.price }}</div>
+                  <div class="flex items-center border rounded">
+                    <button 
+                      class="px-3 py-1 border-r"
+                      @click="updateQuantity(item.id, -1)"
+                    >-</button>
+                    <input 
+                      type="number" 
+                      v-model="item.quantity" 
+                      class="w-12 text-center py-1"
+                    />
+                    <button 
+                      class="px-3 py-1 border-l"
+                      @click="updateQuantity(item.id, 1)"
+                    >+</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 热门推荐 -->
+      <div class="mt-4 px-4">
+        <div class="text-center mb-4">
+          <span class="text-xl font-bold">热 门 推 荐</span>
+          <span class="text-gray-400 text-sm block">Top Picks</span>
+        </div>
+        
+        <!-- 72小时热销榜 -->
+        <div class="bg-white rounded-lg p-4">
+          <div class="flex justify-between items-center mb-4">
+            <div class="flex items-center gap-2">
+              <img src="/placeholder.svg?height=24&width=24&text=🔥" alt="hot" class="w-6 h-6" />
+              <span class="font-bold">72小时热销榜</span>
+            </div>
+            <div class="text-gray-500">邻里都爱买什么？ ></div>
+          </div>
+          
+          <!-- 热销商品列表 -->
+          <div class="grid grid-cols-2 gap-4">
+            <div v-for="item in hotItems" :key="item.id" class="bg-white rounded-lg">
+              <img :src="item.image" :alt="item.name" class="w-full aspect-square object-cover rounded-lg" />
+              <div class="mt-2">
+                <h4 class="font-medium">{{ item.name }}</h4>
+                <div class="flex justify-between items-center mt-1">
+                  <div class="text-red-500">¥{{ item.price }}</div>
+                  <button class="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
+                    <PlusIcon class="w-4 h-4 text-white" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 底部结算栏 -->
+      <div class="fixed bottom-16 left-0 right-0 bg-white border-t px-4 py-2 flex items-center justify-between">
+        <div class="flex items-center">
+          <input 
+            type="checkbox" 
+            :checked="allSelected"
+            @change="toggleSelectAll"
+            class="w-5 h-5 rounded-full mr-2"
+          />
+          <span>全选</span>
+        </div>
+        <div class="flex items-center gap-4">
+          <div>
+            <div class="flex items-baseline">
+              <span>合计:</span>
+              <span class="text-red-500 text-xl font-bold">¥{{ totalAmount }}</span>
+            </div>
+            <div class="text-xs text-gray-400">含包装费 ¥1</div>
+          </div>
+          <button class="bg-blue-600 text-white px-6 py-2 rounded-full">
+            结算({{ selectedCount }})
+          </button>
+        </div>
+      </div>
+  
+      <!-- 底部导航 -->
+      <div class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-2">
+        <div class="flex flex-col items-center text-gray-500">
+          <HomeIcon class="w-6 h-6" />
+          <span class="text-xs">首页</span>
+        </div>
+        <div class="flex flex-col items-center text-gray-500">
+          <LayoutGridIcon class="w-6 h-6" />
+          <span class="text-xs">分类</span>
+        </div>
+        <div class="flex flex-col items-center text-blue-600">
+          <div class="relative">
+            <ShoppingCartIcon class="w-6 h-6" />
+            <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">
+              2
+            </div>
+          </div>
+          <span class="text-xs">购物车</span>
+        </div>
+        <div class="flex flex-col items-center text-gray-500">
+          <UserIcon class="w-6 h-6" />
+          <span class="text-xs">我的</span>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed } from 'vue';
+  import { 
+    MapPin as MapPinIcon,
+    ChevronDown as ChevronDownIcon,
+    MoreHorizontal as MoreHorizontalIcon,
+    Circle as CircleIcon,
+    Plus as PlusIcon,
+    Wifi as WifiIcon,
+    Battery as BatteryIcon,
+    Home as HomeIcon,
+    LayoutGrid as LayoutGridIcon,
+    ShoppingCart as ShoppingCartIcon,
+    User as UserIcon
+  } from 'lucide-vue-next';
+  
+  // 换购商品数据
+  const exchangeItems = ref([
+    { id: 1, name: '黄金玉米', price: '9.90', originalPrice: '15.80', image: '/placeholder.svg?height=96&width=96' },
+    { id: 2, name: '薯片三连包', price: '26.90', originalPrice: '29.90', image: '/placeholder.svg?height=96&width=96' },
+    { id: 3, name: '水磨糯米', price: '39.90', originalPrice: '44.50', image: '/placeholder.svg?height=96&width=96' },
+    { id: 4, name: '红薯', price: '16.80', originalPrice: '19.80', image: '/placeholder.svg?height=96&width=96' }
+  ]);
+  
+  // 购物车商品数据
+  const cartItems = ref([
+    {
+      id: 1,
+      name: '臻选原味混合坚果 907g',
+      price: '113.00',
+      image: '/placeholder.svg?height=80&width=80',
+      quantity: 1,
+      selected: true
+    },
+    {
+      id: 2,
+      name: '臻选五常大米 5kg 季节限定',
+      price: '89.90',
+      image: '/placeholder.svg?height=80&width=80',
+      quantity: 1,
+      selected: true,
+      limit: 4
+    }
+  ]);
+  
+  // 热门商品数据
+  const hotItems = ref([
+    {
+      id: 1,
+      name: '臻选100%苹果汁 1L',
+      price: '11.90',
+      plusPrice: '10.90',
+      image: '/placeholder.svg?height=160&width=160',
+      tags: ['满399减40', '满149减15']
+    },
+    {
+      id: 2,
+      name: '宜客鸡蛋面 1kg',
+      price: '14.80',
+      image: '/placeholder.svg?height=160&width=160',
+      rank: 1
+    },
+    {
+      id: 3,
+      name: '臻选精选鲜鸡蛋30枚 1.5kg',
+      price: '23.90',
+      image: '/placeholder.svg?height=160&width=160',
+      rank: 2
+    }
+  ]);
+  
+  // 计算属性
+  const allSelected = computed(() => cartItems.value.every(item => item.selected));
+  const selectedCount = computed(() => cartItems.value.filter(item => item.selected).length);
+  const totalAmount = computed(() => {
+    const total = cartItems.value
+      .filter(item => item.selected)
+      .reduce((sum, item) => sum + parseFloat(item.price) * item.quantity, 0);
+    return total.toFixed(1);
+  });
+  
+  // 方法
+  const toggleSelect = (id) => {
+    const item = cartItems.value.find(item => item.id === id);
+    if (item) {
+      item.selected = !item.selected;
+    }
+  };
+  
+  const toggleSelectAll = () => {
+    const newValue = !allSelected.value;
+    cartItems.value.forEach(item => item.selected = newValue);
+  };
+  
+  const updateQuantity = (id, delta) => {
+    const item = cartItems.value.find(item => item.id === id);
+    if (item) {
+      const newQuantity = item.quantity + delta;
+      if (newQuantity > 0 && (!item.limit || newQuantity <= item.limit)) {
+        item.quantity = newQuantity;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  </style>

src/assets/templates/e-commerce/category.vue

@@ -0,0 +1,266 @@
+<template>
+    <div class="min-h-screen bg-gray-50">
+      <!-- 状态栏 -->
+      <div class="flex justify-between items-center px-4 py-2 bg-gradient-to-r from-blue-50 to-blue-100">
+        <div class="text-lg">14:23</div>
+        <div class="flex items-center gap-2">
+          <div class="text-sm">|||</div>
+          <WifiIcon class="w-4 h-4" />
+          <BatteryIcon class="w-4 h-4" />
+        </div>
+      </div>
+  
+      <!-- 搜索栏 -->
+      <div class="p-4 bg-white">
+        <div class="flex items-center bg-gray-100 rounded-full px-4 py-2">
+          <SearchIcon class="w-5 h-5 text-gray-400" />
+          <input 
+            type="text" 
+            placeholder="香水系列首发" 
+            class="ml-2 bg-transparent w-full outline-none text-sm"
+          />
+          <div class="flex items-center gap-2">
+            <button class="p-1">
+              <MoreHorizontalIcon class="w-6 h-6" />
+            </button>
+            <button class="p-1">
+              <CircleIcon class="w-6 h-6" />
+            </button>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 分类导航 -->
+      <div class="bg-white">
+        <div class="flex items-center justify-between px-4 py-2">
+          <div class="flex-1 overflow-x-auto whitespace-nowrap scrollbar-hide">
+            <div class="flex gap-6">
+              <div v-for="category in topCategories" :key="category.id" class="flex flex-col items-center">
+                <div class="w-14 h-14 rounded-lg overflow-hidden mb-1">
+                  <img :src="category.image" :alt="category.name" class="w-full h-full object-cover" />
+                </div>
+                <span class="text-xs" :class="{'text-blue-600 font-bold': category.id === 1}">
+                  {{ category.name }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <button 
+            @click="showDrawer = true"
+            class="ml-2 flex flex-col items-center justify-center px-2"
+          >
+            <MenuIcon class="w-5 h-5" />
+            <span class="text-xs">全部</span>
+          </button>
+        </div>
+      </div>
+  
+      <!-- 促销横幅 -->
+      <div class="p-4">
+        <div class="bg-blue-600 rounded-lg p-4 text-white flex justify-between items-center">
+          <div>
+            <div class="text-lg font-bold">先充值 再购物</div>
+            <div class="text-sm opacity-90">电子美通卡1000元值享98折</div>
+          </div>
+          <button class="bg-yellow-400 text-blue-900 px-4 py-1 rounded-full text-sm">
+            点击查看 &gt;
+          </button>
+        </div>
+      </div>
+  
+      <!-- 商品列表 -->
+      <div class="px-4 pb-20">
+        <div v-for="product in products" :key="product.id" class="bg-white rounded-lg p-4 mb-4 flex">
+          <img :src="product.image" :alt="product.name" class="w-24 h-24 object-cover rounded-lg" />
+          <div class="ml-4 flex-1">
+            <div class="flex items-start justify-between">
+              <div>
+                <h3 class="font-medium">{{ product.name }}</h3>
+                <p class="text-sm text-gray-500 mt-1">{{ product.description }}</p>
+              </div>
+              <button class="bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center">
+                <PlusIcon class="w-5 h-5" />
+              </button>
+            </div>
+            <div class="mt-2 flex items-center">
+              <span class="text-orange-500 text-lg font-bold">¥{{ product.price }}</span>
+              <div v-if="product.plusPrice" class="ml-2 px-2 py-0.5 bg-gray-900 text-xs text-white rounded">
+                PLUS ¥{{ product.plusPrice }}
+              </div>
+            </div>
+            <div class="text-xs text-gray-400 mt-1">月销{{ product.monthlySales }}件</div>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 分类抽屉 -->
+      <Transition name="fade">
+        <div 
+          v-if="isDrawerVisible" 
+          class="fixed inset-0 bg-black bg-opacity-50 z-50"
+          @click="showDrawer = false"
+        >
+          <Transition name="slide-down">
+            <div 
+              v-if="showDrawer"
+              class="absolute top-0 left-0 right-0 bg-white rounded-b-xl p-4"
+              @click.stop
+            >
+              <div class="grid grid-cols-5 gap-6">
+                <div 
+                  v-for="category in allCategories" 
+                  :key="category.id" 
+                  class="flex flex-col items-center"
+                >
+                  <div class="w-14 h-14 rounded-full overflow-hidden bg-gradient-to-br from-pink-100 to-pink-200 flex items-center justify-center">
+                    <img :src="category.image" :alt="category.name" class="w-10 h-10 object-cover" />
+                  </div>
+                  <span class="text-xs mt-2">{{ category.name }}</span>
+                </div>
+              </div>
+              <button 
+                @click="showDrawer = false"
+                class="mt-6 w-full text-center text-gray-500 text-sm"
+              >
+                点击收起
+              </button>
+            </div>
+          </Transition>
+        </div>
+      </Transition>
+  
+      <!-- 底部导航 -->
+      <div class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-2">
+        <div class="flex flex-col items-center text-gray-500">
+          <HomeIcon class="w-6 h-6" />
+          <span class="text-xs">首页</span>
+        </div>
+        <div class="flex flex-col items-center text-blue-600">
+          <LayoutGridIcon class="w-6 h-6" />
+          <span class="text-xs">分类</span>
+        </div>
+        <div class="flex flex-col items-center text-gray-500">
+          <ShoppingCartIcon class="w-6 h-6" />
+          <span class="text-xs">购物车</span>
+        </div>
+        <div class="flex flex-col items-center text-gray-500">
+          <UserIcon class="w-6 h-6" />
+          <span class="text-xs">我的</span>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, watch } from 'vue';
+  import { 
+    Search as SearchIcon,
+    Menu as MenuIcon,
+    MoreHorizontal as MoreHorizontalIcon,
+    Circle as CircleIcon,
+    Plus as PlusIcon,
+    Wifi as WifiIcon,
+    Battery as BatteryIcon,
+    Home as HomeIcon,
+    LayoutGrid as LayoutGridIcon,
+    ShoppingCart as ShoppingCartIcon,
+    User as UserIcon
+  } from 'lucide-vue-next';
+  
+  const showDrawer = ref(false);
+  const isDrawerVisible = ref(false);
+  
+  // 控制抽屉的显示和隐藏，添加过渡效果
+  watch(showDrawer, (newVal) => {
+    if (newVal) {
+      isDrawerVisible.value = true;
+    } else {
+      // 延迟移除DOM元素，等待过渡效果完成
+      setTimeout(() => {
+        isDrawerVisible.value = false;
+      }, 300);
+    }
+  });
+  
+  const topCategories = ref([
+    { id: 1, name: '家精选', image: '/placeholder.svg?height=56&width=56' },
+    { id: 2, name: '肉蛋水产', image: '/placeholder.svg?height=56&width=56' },
+    { id: 3, name: '乳品烘焙', image: '/placeholder.svg?height=56&width=56' },
+    { id: 4, name: '蔬菜水果', image: '/placeholder.svg?height=56&width=56' },
+    { id: 5, name: '休闲零食', image: '/placeholder.svg?height=56&width=56' }
+  ]);
+  
+  const allCategories = ref([
+    { id: 1, name: '家精选', image: '/placeholder.svg?height=56&width=56' },
+    { id: 2, name: '肉蛋水产', image: '/placeholder.svg?height=56&width=56' },
+    { id: 3, name: '乳品烘焙', image: '/placeholder.svg?height=56&width=56' },
+    { id: 4, name: '蔬菜水果', image: '/placeholder.svg?height=56&width=56' },
+    { id: 5, name: '休闲零食', image: '/placeholder.svg?height=56&width=56' },
+    { id: 6, name: '热食冷冻', image: '/placeholder.svg?height=56&width=56' },
+    { id: 7, name: '粮油调味', image: '/placeholder.svg?height=56&width=56' },
+    { id: 8, name: '水饮冲调', image: '/placeholder.svg?height=56&width=56' },
+    { id: 9, name: '中外名酒', image: '/placeholder.svg?height=56&width=56' },
+    { id: 10, name: '家清纸品', image: '/placeholder.svg?height=56&width=56' },
+    { id: 11, name: '个护美妆', image: '/placeholder.svg?height=56&width=56' },
+    { id: 12, name: '家电家居', image: '/placeholder.svg?height=56&width=56' },
+    { id: 13, name: '母婴玩具', image: '/placeholder.svg?height=56&width=56' }
+  ]);
+  
+  const products = ref([
+    {
+      id: 1,
+      name: '臻选进口100%NFC椰子水 1L*6',
+      description: '泰国原装进口 椰香浓郁 清甜爽口',
+      price: '69.90',
+      image: '/placeholder.svg?height=96&width=96',
+      monthlySales: '1.7万'
+    },
+    {
+      id: 2,
+      name: '臻选家庭装湿厕纸 40片*10包',
+      description: '除菌99.9%抑菌',
+      price: '42.90',
+      plusPrice: '39.90',
+      image: '/placeholder.svg?height=96&width=96',
+      monthlySales: '6783'
+    },
+    {
+      id: 3,
+      name: '宜客洗衣凝珠 120颗*12g',
+      description: '10倍洁净 7重酵素去污',
+      price: '55.90',
+      plusPrice: '49.90',
+      image: '/placeholder.svg?height=96&width=96',
+      monthlySales: '4366'
+    }
+  ]);
+  </script>
+  
+  <style scoped>
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+  
+  /* 过渡效果 */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  
+  .slide-down-enter-active,
+  .slide-down-leave-active {
+    transition: transform 0.3s ease;
+  }
+  .slide-down-enter-from,
+  .slide-down-leave-to {
+    transform: translateY(-100%);
+  }
+  </style>

src/assets/templates/e-commerce/home.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="max-w-md mx-auto h-screen overflow-y-auto bg-blue-600 text-gray-800 relative">
+      <!-- 状态栏 -->
+      <div class="flex justify-between items-center px-4 py-2 text-white">
+        <div class="text-lg font-bold">14:19</div>
+        <div class="flex items-center gap-2">
+          <div class="text-sm">|||</div>
+          <WifiIcon class="w-4 h-4" />
+          <BatteryIcon class="w-4 h-4" />
+        </div>
+      </div>
+  
+      <!-- 头部导航 -->
+      <div class="flex justify-between items-center px-4 py-2 text-white">
+        <div class="flex items-center gap-1">
+          <MapPinIcon class="w-5 h-5" />
+          <span class="text-sm">定位失败，请选择...</span>
+        </div>
+        <div class="flex items-center gap-4">
+          <ScanIcon class="w-6 h-6" />
+          <MaximizeIcon class="w-6 h-6" />
+          <MoreHorizontalIcon class="w-6 h-6" />
+          <div class="bg-black bg-opacity-20 rounded-full p-1">
+            <CircleIcon class="w-6 h-6" />
+          </div>
+        </div>
+      </div>
+  
+      <!-- 搜索栏 -->
+      <div class="flex px-4 pb-4 gap-2 items-center">
+        <div class="flex-1 flex items-center bg-white rounded-full px-3 py-2">
+          <SearchIcon class="w-4 h-4 text-gray-500" />
+          <input type="text" placeholder="香水系列首发" class="flex-1 ml-2 text-sm outline-none border-none" />
+          <div class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">搜索</div>
+        </div>
+        <div class="flex items-center bg-blue-700 text-white px-2 py-1 rounded-full text-sm">
+          <span>臻选</span>
+          <ChevronDownIcon class="w-4 h-4 ml-1" />
+        </div>
+      </div>
+  
+      <!-- 产品列表 -->
+      <div class="grid grid-cols-4 gap-2 p-4 bg-white rounded-xl mx-4">
+        <div v-for="(product, index) in products" :key="index" class="flex flex-col">
+          <div class="relative mb-2">
+            <img :src="product.image" :alt="product.title" class="w-full aspect-square object-cover rounded-lg" />
+            <div v-if="product.tag" class="absolute top-0 left-0 bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded">
+              {{ product.tag }}
+            </div>
+          </div>
+          <div class="text-xs leading-tight mb-2 h-8 overflow-hidden line-clamp-2">{{ product.title }}</div>
+          <div class="flex justify-between items-center">
+            <div class="text-orange-600 font-bold text-sm">¥{{ product.price }}</div>
+            <div class="bg-green-500 text-white w-6 h-6 flex items-center justify-center rounded text-xs">购</div>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 优惠券区域 -->
+      <div class="mx-4 my-4">
+        <h3 class="text-white text-base mb-3">新人领券更优惠</h3>
+        <div class="flex gap-2 mb-4">
+          <div class="bg-orange-500 text-white rounded-lg p-2 w-20 flex flex-col">
+            <div class="flex items-baseline">
+              ¥<span class="text-2xl font-bold">10</span>
+            </div>
+            <div class="flex items-center gap-1 mt-1 text-xs">
+              <div>本单可用</div>
+            </div>
+          </div>
+          <div class="flex flex-col justify-center text-xs text-white">
+            <div>限时有效</div>
+            <div>快去领取</div>
+          </div>
+          <div class="bg-white rounded-lg p-2 w-20 flex flex-col">
+            <div class="flex items-baseline">
+              ¥<span class="text-2xl font-bold">15</span>
+            </div>
+            <div class="flex items-center gap-1 mt-1 text-xs">
+              <LockIcon class="w-3.5 h-3.5" />
+              <div>第2单可用</div>
+            </div>
+          </div>
+          <div class="bg-white rounded-lg p-2 w-20 flex flex-col">
+            <div class="flex items-baseline">
+              ¥<span class="text-2xl font-bold">20</span>
+            </div>
+            <div class="flex items-center gap-1 mt-1 text-xs">
+              <LockIcon class="w-3.5 h-3.5" />
+              <div>第3单可用</div>
+            </div>
+          </div>
+        </div>
+        <button class="bg-yellow-400 text-gray-800 border-none rounded-full py-3 w-full text-base font-bold">
+          立即领取
+        </button>
+      </div>
+  
+      <!-- 分类区域 -->
+      <div class="grid grid-cols-5 gap-4 p-4 bg-white rounded-t-xl mt-4">
+        <div v-for="(category, index) in categories" :key="index" class="flex flex-col items-center gap-2">
+          <div class="w-12 h-12 bg-pink-200 rounded-full flex items-center justify-center text-white text-lg font-bold">
+            {{ category.icon }}
+          </div>
+          <div class="text-xs text-center">{{ category.name }}</div>
+        </div>
+      </div>
+  
+      <!-- 促销横幅 -->
+      <div class="bg-white py-3 text-center">
+        <div class="text-orange-500 text-sm">❤ 满199减120元 ❤</div>
+      </div>
+  
+      <!-- 底部导航 -->
+      <div class="flex justify-around bg-white py-2 sticky bottom-0 border-t border-gray-200">
+        <div class="flex flex-col items-center text-xs text-blue-600">
+          <HomeIcon class="w-6 h-6" />
+          <span>首页</span>
+        </div>
+        <div class="flex flex-col items-center text-xs text-gray-500">
+          <LayoutGridIcon class="w-6 h-6" />
+          <span>分类</span>
+        </div>
+        <div class="flex flex-col items-center text-xs text-gray-500">
+          <ShoppingCartIcon class="w-6 h-6" />
+          <span>购物车</span>
+        </div>
+        <div class="flex flex-col items-center text-xs text-gray-500">
+          <UserIcon class="w-6 h-6" />
+          <span>我的</span>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue';
+  import { 
+    MapPin as MapPinIcon, 
+    Search as SearchIcon, 
+    MoreHorizontal as MoreHorizontalIcon,
+    Circle as CircleIcon,
+    ChevronDown as ChevronDownIcon,
+    Wifi as WifiIcon,
+    Battery as BatteryIcon,
+    Maximize as MaximizeIcon,
+    Scan as ScanIcon,
+    Lock as LockIcon,
+    Home as HomeIcon,
+    LayoutGrid as LayoutGridIcon,
+    ShoppingCart as ShoppingCartIcon,
+    User as UserIcon
+  } from 'lucide-vue-next';
+  
+  const products = ref([
+    {
+      title: '臻选进口100%NFC椰子水',
+      price: '0.00',
+      image: '/placeholder.svg?height=120&width=120',
+      tag: '新'
+    },
+    {
+      title: '臻选半熟芝士蛋糕 720g',
+      price: '0.00',
+      image: '/placeholder.svg?height=120&width=120'
+    },
+    {
+      title: '臻选强效除菌洗衣凝珠 60颗',
+      price: '0.00',
+      image: '/placeholder.svg?height=120&width=120'
+    },
+    {
+      title: '臻选血桃糕 500g',
+      price: '0.00',
+      image: '/placeholder.svg?height=120&width=120'
+    }
+  ]);
+  
+  const categories = ref([
+    { name: '休闲零食', icon: '多' },
+    { name: '粮油调味', icon: '彩' },
+    { name: '中外名酒', icon: '女' },
+    { name: '个护美妆', icon: '神' },
+    { name: '母婴玩具', icon: '节' },
+    { name: '每周特价', icon: '满' },
+    { name: '新品体验', icon: '199' },
+    { name: '线上专享', icon: '减' },
+    { name: '积分商城', icon: '120' },
+    { name: '领券中心', icon: '元' }
+  ]);
+  </script>

src/assets/templates/e-commerce/profile.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="min-h-screen bg-gray-50">
+      <!-- 头部背景 -->
+      <div class="bg-blue-600 h-48 relative">
+        <!-- 状态栏 -->
+        <div class="flex justify-between items-center px-4 py-2">
+          <div class="text-lg text-white">14:44</div>
+          <div class="flex items-center gap-2 text-white">
+            <div class="text-sm">|||</div>
+            <WifiIcon class="w-4 h-4" />
+            <BatteryIcon class="w-4 h-4" />
+          </div>
+        </div>
+  
+        <!-- 用户信息 -->
+        <div class="flex items-center px-4 mt-4">
+          <div class="w-16 h-16 rounded-full bg-white overflow-hidden">
+            <UserIcon class="w-full h-full text-gray-300 p-2" />
+          </div>
+          <div class="ml-4 text-white">
+            <h2 class="text-xl font-medium">Hello,186****2669</h2>
+          </div>
+          <div class="ml-auto flex gap-2">
+            <MoreHorizontalIcon class="w-6 h-6 text-white" />
+            <CircleIcon class="w-6 h-6 text-white" />
+          </div>
+        </div>
+      </div>
+  
+      <!-- 用户数据 -->
+      <div class="bg-white rounded-lg mx-4 p-4 -mt-8 relative z-10 shadow-sm">
+        <div class="flex justify-between text-center">
+          <div>
+            <div class="text-lg font-bold">¥0.00</div>
+            <div class="text-sm text-gray-500">礼品卡充值</div>
+          </div>
+          <div>
+            <div class="text-lg font-bold">0</div>
+            <div class="text-sm text-gray-500">积分</div>
+          </div>
+          <div>
+            <div class="text-lg font-bold">0</div>
+            <div class="text-sm text-gray-500">优惠券</div>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 我的订单 -->
+      <div class="bg-white mt-4 p-4">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-lg font-bold">我的订单</h3>
+          <div class="text-gray-400 text-sm flex items-center">
+            更多
+            <ChevronRightIcon class="w-4 h-4" />
+          </div>
+        </div>
+        <div class="flex justify-between text-center">
+          <div class="flex flex-col items-center">
+            <div class="w-12 h-12 mb-1">
+              <CreditCardIcon class="w-full h-full text-blue-600" />
+            </div>
+            <span class="text-sm">待支付</span>
+          </div>
+          <div class="flex flex-col items-center">
+            <div class="w-12 h-12 mb-1">
+              <LayoutIcon class="w-full h-full text-blue-600" />
+            </div>
+            <span class="text-sm">待配送</span>
+          </div>
+          <div class="flex flex-col items-center">
+            <div class="w-12 h-12 mb-1">
+              <TruckIcon class="w-full h-full text-blue-600" />
+            </div>
+            <span class="text-sm">待收货</span>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 我的服务 -->
+      <div class="bg-white mt-4 p-4">
+        <h3 class="text-lg font-bold mb-4">我的服务</h3>
+        <div class="grid grid-cols-4 gap-4">
+          <div v-for="service in services" :key="service.id" class="flex flex-col items-center">
+            <img :src="service.icon" :alt="service.name" class="w-12 h-12 mb-1" />
+            <span class="text-sm">{{ service.name }}</span>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 常用工具 -->
+      <div class="bg-white mt-4 p-4 pb-20">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-lg font-bold">常用工具</h3>
+          <div class="text-gray-400 text-sm flex items-center">
+            更多
+            <ChevronRightIcon class="w-4 h-4" />
+          </div>
+        </div>
+        <div class="grid grid-cols-4 gap-y-6">
+          <div v-for="tool in tools" :key="tool.id" class="flex flex-col items-center relative">
+            <img :src="tool.icon" :alt="tool.name" class="w-12 h-12 mb-1" />
+            <span class="text-sm">{{ tool.name }}</span>
+            <span 
+              v-if="tool.badge" 
+              class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1 rounded"
+            >
+              {{ tool.badge }}
+            </span>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 底部导航 -->
+      <div class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-2">
+        <div class="flex flex-col items-center text-gray-500">
+          <HomeIcon class="w-6 h-6" />
+          <span class="text-xs">首页</span>
+        </div>
+        <div class="flex flex-col items-center text-gray-500">
+          <LayoutGridIcon class="w-6 h-6" />
+          <span class="text-xs">分类</span>
+        </div>
+        <div class="flex flex-col items-center text-gray-500">
+          <div class="relative">
+            <ShoppingCartIcon class="w-6 h-6" />
+            <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">
+              2
+            </div>
+          </div>
+          <span class="text-xs">购物车</span>
+        </div>
+        <div class="flex flex-col items-center text-blue-600">
+          <UserIcon class="w-6 h-6" />
+          <span class="text-xs">我的</span>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { 
+    User as UserIcon,
+    MoreHorizontal as MoreHorizontalIcon,
+    Circle as CircleIcon,
+    Wifi as WifiIcon,
+    Battery as BatteryIcon,
+    CreditCard as CreditCardIcon,
+    Layout as LayoutIcon,
+    Truck as TruckIcon,
+    ChevronRight as ChevronRightIcon,
+    Home as HomeIcon,
+    LayoutGrid as LayoutGridIcon,
+    ShoppingCart as ShoppingCartIcon
+  } from 'lucide-vue-next';
+  
+  const services = [
+    { id: 1, name: '开卡/续卡', icon: '/placeholder.svg?height=48&width=48&text=💳' },
+    { id: 2, name: '亲子时光', icon: '/placeholder.svg?height=48&width=48&text=🧸' },
+    { id: 3, name: '联名信用卡', icon: '/placeholder.svg?height=48&width=48&text=💰' },
+    { id: 4, name: '会员权益', icon: '/placeholder.svg?height=48&width=48&text=⭐' }
+  ];
+  
+  const tools = [
+    { id: 1, name: '绑定礼品卡', icon: '/placeholder.svg?height=48&width=48&text=🎁' },
+    { id: 2, name: '领券中心', icon: '/placeholder.svg?height=48&width=48&text=🎫' },
+    { id: 3, name: '收货地址', icon: '/placeholder.svg?height=48&width=48&text=📍' },
+    { id: 4, name: '会员一码付', icon: '/placeholder.svg?height=48&width=48&text=💳' },
+    { id: 5, name: '企微福利', icon: '/placeholder.svg?height=48&width=48&text=💝' },
+    { id: 6, name: '售后/退款', icon: '/placeholder.svg?height=48&width=48&text=💰' },
+    { id: 7, name: '发票中心', icon: '/placeholder.svg?height=48&width=48&text=📄' },
+    { id: 8, name: '附属卡', icon: '/placeholder.svg?height=48&width=48&text=💳' },
+    { id: 9, name: '兑换码', icon: '/placeholder.svg?height=48&width=48&text=🔄' },
+    { id: 10, name: '联系客服', icon: '/placeholder.svg?height=48&width=48&text=💬' },
+    { id: 11, name: '企业资质', icon: '/placeholder.svg?height=48&width=48&text=📋' },
+    { id: 12, name: '积分商城', icon: '/placeholder.svg?height=48&width=48&text=🏪', badge: 'NEW' }
+  ];
+  </script>
+  
+  <style scoped>
+  /* 如果需要自定义样式可以在这里添加 */
+  </style>