hookehuyr

style(PointsDetail): 更新积分详情页卡片样式为白色背景和阴影

refactor(RewardCategories): 移除商户列表模板并简化分类显示逻辑
......@@ -21,7 +21,7 @@
</view>
<!-- Strategy cards -->
<view class="space-y-3 mb-6">
<view class="bg-blue-50 p-4 rounded-lg flex items-start">
<view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<My size="20" class="text-blue-500" />
</view>
......@@ -32,7 +32,7 @@
</p>
</view>
</view>
<view class="bg-blue-50 p-4 rounded-lg flex items-start">
<view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<My size="20" class="text-blue-500" />
</view>
......@@ -43,7 +43,7 @@
</p>
</view>
</view>
<view class="bg-blue-50 p-4 rounded-lg flex items-start">
<view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<My size="20" class="text-blue-500" />
</view>
......
<!--
* @Date: 2025-08-27 17:47:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 16:35:59
* @FilePath: /lls_program/src/pages/RewardCategories/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen flex flex-col bg-white">
<!-- <AppHeader title="积分兑换" :showBack="false" /> -->
<view class="flex-1 pb-20">
<view class="p-4 space-y-4">
<view v-for="(category, index) in categories" :key="category.id" class="rounded-lg overflow-hidden shadow-sm" @click="goToRewards(index)">
<template v-if="category.id !== 'merchants'">
<view class="relative h-40">
<view class="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-4 text-white" :style="{ background: category.bgColor || 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6))' }">
<h3 class="text-xl font-bold mb-1">{{ category.title }}</h3>
......@@ -17,28 +23,6 @@
<image :src="category.iconUrl" alt="" class="w-8 h-8" />
</view>
</view>
</template>
<template v-else>
<view class="bg-white border border-gray-100 rounded-lg p-4">
<view class="flex justify-between items-center mb-3">
<view>
<h3 class="text-lg font-bold">{{ category.title }}</h3>
<p class="text-sm text-gray-600">
{{ category.description }}
</p>
</view>
<Right size="20" class="text-gray-400" />
</view>
<view class="grid grid-cols-5 gap-2">
<view v-for="(merchant, index) in category.merchants.slice(0, 10)" :key="index" class="flex flex-col items-center">
<image :src="merchant.logo" :alt="merchant.name" class="w-12 h-12 object-contain rounded-md" />
<span class="text-xs text-gray-600 mt-1 text-center truncate w-full">
{{ merchant.name }}
</span>
</view>
</view>
</view>
</template>
</view>
</view>
</view>
......@@ -68,7 +52,6 @@ const categories = ref([
image: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
bgPosition: 'center',
bgColor: 'linear-gradient(135deg, #0ea5e9, #2563eb)',
iconUrl: 'https://cdn-icons-png.flaticon.com/512/3144/3144456.png'
},
{
id: 'merchants',
......@@ -76,18 +59,7 @@ const categories = ref([
description: '丰富商户积分兑换',
image: 'https://images.unsplash.com/photo-1607082349566-187342175e2f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
bgPosition: 'center',
merchants: [
{ name: '上海老饭店', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=上海老饭店&font=roboto' },
{ name: '功德林', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=功德林&font=roboto' },
{ name: '一茶一坐', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=一茶一坐&font=roboto' },
{ name: '杏花楼', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=杏花楼&font=roboto' },
{ name: '新雅', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=新雅&font=roboto' },
{ name: '五芳斋', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=五芳斋&font=roboto' },
{ name: '沈大成', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=沈大成&font=roboto' },
{ name: '老凤祥', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=老凤祥&font=roboto' },
{ name: '御宝轩', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=御宝轩&font=roboto' },
{ name: '恒源祥', logo: 'https://placehold.co/100x100/e2f3ff/0369a1?text=恒源祥&font=roboto' }
]
bgColor: 'linear-gradient(135deg, #007bff, #0056b3)',
}
]);
......