Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e0531f8d 1 parent 66bdb698

feat: 更新页面标题和优化多个页面功能 

refactor(PointsDetail): 替换按钮为视图组件并更新图标
refactor(Rewards): 添加搜索功能并优化兑换券列表样式
refactor(Feedback): 重构反馈页面布局和交互逻辑
refactor(RewardDetail): 重新设计优惠券详情页面结构
style: 删除未使用的图片资源
Inline Side-by-side
Showing 12 changed files with 353 additions and 246 deletions
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '意见反馈'
}
......
<template>
<view class="min-h-screen flex flex-col bg-white">
<AppHeader title="意见反馈" />
<view class="flex-1 px-4 py-6 pb-20">
<form @submit.prevent="handleSubmit" class="space-y-6">
<view>
<label for="feedback" class="block text-sm font-medium text-gray-700 mb-1">
您的反馈
</label>
<view class="min-h-screen bg-white flex flex-col">
<view class="flex-1 px-4 py-6 overflow-auto">
<!-- Feedback Section -->
<view class="mb-6">
<view class="text-lg font-medium mb-2">您的反馈</view>
<view class="bg-white rounded-lg border border-gray-200 p-4">
<textarea
id="feedback"
rows="5"
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
v-model="feedbackText"
class="w-full text-gray-600 focus:outline-none resize-none"
placeholder="请描述您遇到的问题或建议..."
v-model="feedback"
required
:rows="4"
/>
</view>
<view>
<label class="block text-sm font-medium text-gray-700 mb-1">
上传截图 (可选)
</label>
<view class="flex flex-wrap gap-2 mb-2">
<view v-for="(image, index) in images" :key="index" class="relative w-20 h-20">
<image :src="image" :alt="`上传图片 ${index + 1}`" class="w-full h-full object-cover rounded-lg" />
<button type="button" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1" @click="removeImage(index)">
<Failure size="16" />
</button>
</view>
</view>
<!-- Upload Screenshot Section -->
<view class="mb-6">
<view class="text-lg font-medium mb-2">上传截图 (可选)</view>
<view v-if="screenshot" class="mb-4">
<view class="relative inline-block">
<image
:src="screenshot"
class="w-24 h-24 rounded-lg object-cover"
mode="aspectFill"
@tap="previewImage"
/>
<view
class="w-20 h-20 flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"
@click="chooseImage"
@click="deleteImage"
class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center"
>
<Upload size="24" class="text-gray-400" />
<span class="text-xs text-gray-500 mt-1">添加图片</span>
<view class="text-white text-xs">×</view>
</view>
</view>
</view>
<view>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">
您的姓名
</label>
<view
v-if="!screenshot"
class="border border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center"
@click="chooseImage"
>
<view class="text-gray-400 mb-2">
<Photograph size="24" />
</view>
<view class="text-center text-gray-400">添加图片</view>
</view>
</view>
<!-- Name Section -->
<view class="mb-6">
<view class="text-lg font-medium mb-2">您的姓名</view>
<view class="bg-white rounded-lg border border-gray-200 p-4">
<input
type="text"
id="name"
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
placeholder="请输入您的姓名"
v-model="name"
class="w-full text-gray-600 focus:outline-none"
placeholder="请输入您的姓名"
/>
</view>
<view>
<label for="contact" class="block text-sm font-medium text-gray-700 mb-1">
联系方式
</label>
</view>
<!-- Contact Section -->
<view class="mb-10">
<view class="text-lg font-medium mb-2">联系方式</view>
<view class="bg-white rounded-lg border border-gray-200 p-4">
<input
type="text"
id="contact"
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
placeholder="请输入您的手机号或微信号"
v-model="contact"
class="w-full text-gray-600 focus:outline-none"
placeholder="请输入您的手机号或微信号"
/>
</view>
<button type="submit" class="w-full py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors">
提交反馈
</button>
</form>
</view>
<!-- Submit Button -->
<view
@click="submitFeedback"
class="w-full py-3 bg-blue-500 text-white text-lg font-medium rounded-lg flex items-center justify-center"
>
提交反馈
</view>
</view>
<BottomNav />
<!-- Image Preview -->
<nut-image-preview
v-model:show="previewVisible"
:images="previewImages"
:init-no="0"
@close="closePreview"
/>
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import BottomNav from '../../components/BottomNav.vue';
import { Upload, Failure } from '@nutui/icons-vue-taro';
import { Photograph } from '@nutui/icons-vue-taro';
const feedback = ref('');
const feedbackText = ref('');
const screenshot = ref('');
const name = ref('');
const contact = ref('');
const images = ref([]);
const previewVisible = ref(false);
const previewImages = ref([]);
/**
* 显示提示信息
*/
const showToast = (message, type = 'success') => {
const icon = type === 'error' ? 'error' : 'success';
Taro.showToast({
title: message,
icon: icon,
duration: 2000
});
};
/**
* 选择图片
*/
const chooseImage = () => {
Taro.chooseImage({
count: 9 - images.value.length,
sizeType: ['original', 'compressed'],
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
images.value = [...images.value, ...res.tempFilePaths];
success: function (res) {
const tempFilePath = res.tempFilePaths[0];
screenshot.value = tempFilePath;
},
fail: function () {
showToast('选择图片失败', 'error');
}
});
};
const removeImage = (index) => {
images.value = images.value.filter((_, i) => i !== index);
/**
* 预览图片
*/
const previewImage = () => {
previewImages.value = [{ src: screenshot.value }];
previewVisible.value = true;
};
const handleSubmit = () => {
// In a real app, we would send this data to a server
Taro.showToast({
title: '感谢您的反馈！我们会尽快处理。',
icon: 'success',
duration: 2000
});
/**
* 关闭预览
*/
const closePreview = () => {
previewVisible.value = false;
};
/**
* 删除图片
*/
const deleteImage = () => {
screenshot.value = '';
};
setTimeout(() => {
Taro.navigateBack();
}, 2000);
/**
* 提交反馈
*/
const submitFeedback = () => {
if (!feedbackText.value) {
showToast('请描述您遇到的问题或建议', 'error');
return;
}
if (!name.value) {
showToast('请输入您的姓名', 'error');
return;
}
if (!contact.value) {
showToast('请输入您的手机号或微信号', 'error');
return;
}
// 在实际应用中，这里会处理提交逻辑，例如上传图片和发送数据到服务器
showToast('提交成功');
// 提交成功后清空表单
feedbackText.value = '';
screenshot.value = '';
name.value = '';
contact.value = '';
};
</script>
<style lang="less">
// 你可以在这里添加自定义样式
</style>
......
/*
* @Date: 2025-08-27 18:25:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 00:26:01
* @FilePath: /lls_program/src/pages/PointsDetail/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '积分明细'
}
......
......@@ -2,7 +2,7 @@
<view class="min-h-screen flex flex-col bg-white">
<!-- Blue header background -->
<view class="bg-blue-500 h-52 absolute w-full top-0 left-0 z-0"></view>
<AppHeader title="积分明细" />
<!-- <AppHeader title="积分明细" /> -->
<!-- Content -->
<view class="relative z-10 flex-1 pb-20">
<!-- Points display -->
......@@ -14,10 +14,10 @@
<view class="bg-white rounded-t-3xl px-4 pt-5">
<view class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">积分攻略</h3>
<button class="text-blue-500 text-sm flex items-center">
<view class="text-blue-500 text-sm flex items-center">
查看全部
<Right size="16" />
</button>
</view>
</view>
<!-- Strategy cards -->
<view class="space-y-3 mb-6">
......@@ -34,7 +34,7 @@
</view>
<view class="bg-blue-50 p-4 rounded-lg flex items-start">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<Trophy size="20" class="text-blue-500" />
<My size="20" class="text-blue-500" />
</view>
<view>
<h4 class="font-medium">参与周末步数挑战</h4>
......@@ -45,7 +45,7 @@
</view>
<view class="bg-blue-50 p-4 rounded-lg flex items-start">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<People size="20" class="text-blue-500" />
<My size="20" class="text-blue-500" />
</view>
<view>
<h4 class="font-medium">邀请家人加入家庭</h4>
......@@ -58,15 +58,15 @@
<!-- Tabs -->
<view class="border-b border-gray-200">
<view class="flex space-x-8">
<button :class="['py-3 font-medium', activeTab === 'all' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'all'">
<view :class="['py-3 font-medium', activeTab === 'all' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'all'">
全部
</button>
<button :class="['py-3 font-medium', activeTab === 'earned' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'earned'">
</view>
<view :class="['py-3 font-medium', activeTab === 'earned' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'earned'">
已发放
</button>
<button :class="['py-3 font-medium', activeTab === 'spent' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'spent'">
</view>
<view :class="['py-3 font-medium', activeTab === 'spent' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'spent'">
已消耗
</button>
</view>
</view>
</view>
<!-- Points history list -->
......@@ -84,7 +84,7 @@
</view>
</view>
</view>
<BottomNav />
<!-- <BottomNav /> -->
</view>
</template>
......
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '隐私政策'
}
......
<!--
* @Date: 2025-08-27 17:49:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 00:30:58
* @FilePath: /lls_program/src/pages/PrivacyPolicy/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen flex flex-col bg-white">
<AppHeader title="隐私政策" />
<!-- <AppHeader title="隐私政策" /> -->
<view class="flex-1 px-4 py-6 pb-20">
<view class="prose prose-sm max-w-none">
<h2 class="text-xl font-bold mb-4">老来赛隐私政策</h2>
......@@ -108,7 +115,7 @@
<p class="text-gray-700 mt-8">最后更新日期：2023年5月1日</p>
</view>
</view>
<BottomNav />
<!-- <BottomNav /> -->
</view>
</template>
......
/*
* @Date: 2025-08-27 18:25:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 09:39:10
* @FilePath: /lls_program/src/pages/RewardDetail/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '兑换券详情'
}
......
<template>
<view class="min-h-screen flex flex-col bg-gradient-to-br from-blue-50 to-purple-50">
<AppHeader title="优惠券详情" />
<view class="flex-1 p-4">
<template v-if="!redeemed">
<view class="bg-white rounded-2xl shadow-sm overflow-hidden mb-4">
<view class="h-40 bg-blue-600 flex items-center justify-center p-6">
<image :src="reward.image" :alt="reward.merchant" class="max-h-full max-w-full object-contain" />
</view>
<view class="p-4">
<h1 class="text-xl font-medium mb-1">{{ reward.title }}</h1>
<p class="text-gray-600">{{ reward.description }}</p>
<view class="flex items-center mt-4 text-blue-600">
<Ticket size="20" class="mr-2" />
<span class="font-medium">{{ reward.points }} 积分</span>
</view>
</view>
<view class="min-h-screen bg-white pb-24">
<!-- <AppHeader title="优惠券详情" :showBack="true" /> -->
<!-- Top Image -->
<view class="w-full h-48">
<image :src="reward.image" class="w-full h-full object-cover" />
</view>
<GlassCard class="mb-4">
<h2 class="text-lg font-medium mb-4">使用须知</h2>
<view class="space-y-3">
<view class="flex">
<Calendar size="20" class="text-gray-500 mr-3 flex-shrink-0" />
<view>
<p class="font-medium">有效期</p>
<p class="text-gray-600">{{ reward.validUntil }}</p>
</view>
</view>
<view class="flex">
<Location2 size="20" class="text-gray-500 mr-3 flex-shrink-0" />
<view>
<p class="font-medium">适用门店</p>
<p class="text-gray-600">{{ reward.locations }}</p>
</view>
<!-- Main Content -->
<view class="p-6">
<!-- Points and Title -->
<view class="text-center mb-8">
<view class="text-4xl font-bold text-blue-500 mb-2">
<text class="text-2xl">{{ reward.points }} 积分</text>
</view>
<h1 class="text-xl font-bold">{{ reward.title }}</h1>
</view>
</view>
</GlassCard>
<GlassCard class="mb-6">
<h2 class="text-lg font-medium mb-4">使用条款</h2>
<view class="space-y-2">
<view v-for="(term, index) in reward.terms" :key="index" class="flex">
<Info size="16" class="text-gray-500 mr-2 flex-shrink-0 mt-0.5" />
<p class="text-gray-600">{{ term }}</p>
</view>
</view>
</GlassCard>
<!-- Details Sections -->
<view class="space-y-6">
<!-- Applicable Stores -->
<view>
<h2 class="text-lg font-medium mb-3">可用门店</h2>
<view class="space-y-2 text-gray-600">
<view v-for="store in reward.stores" :key="store" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ store }}</p>
</view>
</view>
</view>
<PrimaryButton @click="handleRedeem" :disabled="redeeming">
<template v-if="redeeming">
<view class="animate-spin mr-2">
<Loading class="w-5 h-5" />
</view>
兑换中...
</template>
<template v-else>
立即兑换
</template>
</PrimaryButton>
</template>
<!-- Redemption Rules -->
<view>
<h2 class="text-lg font-medium mb-3">兑换规则</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.redemption_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
</view>
</view>
</view>
<template v-else>
<view class="flex flex-col items-center justify-center h-full">
<GlassCard class="w-full max-w-md">
<view class="flex flex-col items-center">
<view class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-4">
<Check size="40" class="text-green-600" />
</view>
<h2 class="text-xl font-medium mb-2">兑换成功</h2>
<p class="text-gray-600 text-center mb-6">
您已成功兑换{{ reward.title }}
</p>
<view class="bg-gray-50 w-full rounded-lg p-4 mb-6 text-center">
<p class="text-gray-600 mb-2">兑换码</p>
<p class="text-2xl font-mono tracking-wider font-medium">
SB12345678
</p>
</view>
<image :src="reward.image" :alt="reward.merchant" class="w-24 h-24 object-contain mb-6" />
<view class="text-center mb-6">
<p class="font-medium">{{ reward.title }}</p>
<p class="text-gray-600">{{ reward.description }}</p>
<p class="text-gray-500 text-sm mt-2">
有效期至: {{ reward.validUntil }}
</p>
</view>
<PrimaryButton @click="goBack">
返回兑换页面
</PrimaryButton>
<!-- Usage Rules -->
<view>
<h2 class="text-lg font-medium mb-3">使用规则</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.usage_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
</view>
</view>
</view>
</view>
</GlassCard>
</view>
</template>
<!-- Bottom Button -->
<view class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
<nut-button type="primary" size="large" block color="#3B82F6" @click="handleRedeem">
立即兑换
</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import GlassCard from '../../components/GlassCard.vue';
import PrimaryButton from '../../components/PrimaryButton.vue';
import { Ticket, Calendar, Location2, Info, Check, Loading } from '@nutui/icons-vue-taro';
const redeeming = ref(false);
const redeemed = ref(false);
// Mock reward data
const reward = {
id: 1,
title: '星巴克咖啡券',
description: '任意中杯咖啡一杯',
points: 500,
merchant: '星巴克',
image: 'https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png',
validUntil: '2023年12月31日',
locations: '全国各星巴克门店',
terms: ['每人限兑换1次', '不与其他优惠同享', '使用时请出示兑换码', '最终解释权归商家所有']
};
// Mock reward data based on the image
const reward = ref({
id: 1,
title: '吴良材眼镜店85折券',
points: 10,
image: 'https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto', // Placeholder image
stores: [
'吴良材眼镜店 (南京东路店)',
'吴良材眼镜店 (淮海中路店)',
'吴良材眼镜店 (徐家汇店)'
],
redemption_rules: [
'每人每月限兑换1次',
'兑换后30天内有效',
'兑换成功后不可退回积分'
],
usage_rules: [
'仅限店内正价商品使用',
'不可与其他优惠同时使用',
'特价商品不可使用',
'最终解释权归商家所有'
]
});
/**
* @description Handles the redemption of the coupon.
*/
const handleRedeem = () => {
redeeming.value = true;
// Simulate API call
setTimeout(() => {
redeeming.value = false;
redeemed.value = true;
}, 1500);
// Show a confirmation modal
Taro.showModal({
title: '确认兑换',
content: `将消耗 ${reward.value.points} 积分兑换此优惠券，是否确认？`,
success: (res) => {
if (res.confirm) {
// Simulate API call for redemption
Taro.showLoading({ title: '兑换中...' });
setTimeout(() => {
Taro.hideLoading();
Taro.showToast({
title: '兑换成功',
icon: 'success',
duration: 2000
});
// After successful redemption, you might want to navigate the user to their coupons page
// For now, we'll just navigate back.
setTimeout(() => {
Taro.navigateBack();
}, 2000);
}, 1500);
}
}
});
};
const goBack = () => {
Taro.navigateTo({ url: '/pages/Rewards/index' });
};
</script>
......
<!--
* @Date: 2025-08-27 17:47:26
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 00:10:13
* @FilePath: /lls_program/src/pages/Rewards/index.vue
* @Description: 文件描述
-->
<!--
* @Date: 2025-08-27 17:47:26
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-27 23:57:38
* @LastEditTime: 2025-08-28 09:37:06
* @FilePath: /lls_program/src/pages/Rewards/index.vue
* @Description: 文件描述
-->
......@@ -20,25 +13,32 @@
<!-- Content -->
<view class="relative z-10 flex-1 pb-20">
<!-- Points display -->
<view class="pt-4 pb-8 flex flex-col items-center">
<view class="pt-8 pb-8 flex flex-col items-center">
<h2 class="text-4xl font-bold text-white mb-1">2580分</h2>
<p class="text-white text-opacity-80">我的积分</p>
</view>
<!-- Main content -->
<view class="bg-white rounded-t-3xl px-4 pt-5">
<!-- Quick exchange options -->
<!-- Search bar -->
<view class="mb-6">
<view class="relative">
<input type="text" v-model="searchQuery" placeholder="搜索商户名称"
class=" bg-gray-100 rounded-lg py-3 pl-10 pr-4 border border-transparent focus:bg-white focus:border-blue-500 focus:outline-none" />
<view class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<Search2 size="20" class="text-gray-400" />
</view>
</view>
</view>
<view class="flex gap-3 mb-6">
<view
v-for="option in quickExchangeOptions"
:key="option.points"
@click="selectedPoints = option.points"
<view v-for="option in quickExchangeOptions" :key="option.points" @click="selectedPoints = option.points"
:class="[
'flex-1 py-3 rounded-lg border text-center',
selectedPoints === option.points
? 'border-blue-500 bg-blue-50 text-blue-500'
: 'border-gray-200 text-gray-700'
]"
>
]">
{{ option.label }}
</view>
</view>
......@@ -51,37 +51,48 @@
</view>
<!-- Rewards list -->
<view class="space-y-4">
<view v-for="reward in sortedRewardItems" :key="reward.id" class="flex items-center border-b border-gray-100 pb-4">
<view class="w-12 h-12 mr-4 flex-shrink-0">
<image :src="reward.logo" :alt="reward.title" class="w-full h-full object-contain" />
</view>
<view class="flex-1">
<h4 class="font-medium">{{ reward.title }}</h4>
<p class="text-gray-500 text-sm">{{ reward.points }}积分</p>
<view v-for="reward in sortedRewardItems" :key="reward.id"
class="bg-white rounded-xl p-4 flex items-center shadow-[0_2px_8px_rgba(0,0,0,0.08)]">
<image :src="reward.logo" class="w-16 h-16 rounded-lg mr-4 flex-shrink-0" mode="aspectFill" />
<view class="flex-1 min-w-0">
<view class="font-medium text-base">{{ reward.title }}</view>
<view class="text-gray-500 text-sm mt-1">{{ reward.merchant }}</view>
</view>
<view class="px-4 py-1 bg-blue-500 text-white rounded-full text-sm" @click="goToRewardDetail(reward)">
兑换
<view class="ml-4 px-4 py-2 bg-blue-500 text-white rounded-lg text-sm flex-shrink-0"
@click="goToRewardDetail(reward)">
{{ reward.points }}分兑换
</view>
</view>
</view>
</view>
</view>
<BottomNav />
<!-- <BottomNav /> -->
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import Taro from '@tarojs/taro';
import { ScreenLittle } from '@nutui/icons-vue-taro';
import { ScreenLittle, Search2 } from '@nutui/icons-vue-taro';
import AppHeader from '../../components/AppHeader.vue';
import BottomNav from '../../components/BottomNav.vue';
const searchQuery = ref('');
const selectedPoints = ref(null);
const sortOrder = ref('desc'); // 'asc' or 'desc'
const sortedRewardItems = computed(() => {
return [...rewardItems.value].sort((a, b) => {
let items = [...rewardItems.value];
// Filter by search query
if (searchQuery.value) {
items = items.filter(item =>
item.merchant.toLowerCase().includes(searchQuery.value.toLowerCase())
);
}
// Sort items
return items.sort((a, b) => {
if (sortOrder.value === 'asc') {
return a.points - b.points;
} else {
......@@ -97,33 +108,38 @@ const toggleSortOrder = () => {
const rewardItems = ref([
{
id: 1,
title: '星巴克中杯咖啡兑换券',
points: 1000,
logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png'
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto',
title: '杏花楼集团85折券',
merchant: '杏花楼集团',
points: 10
},
{
id: 2,
title: '老凤祥20元抵用券',
points: 600,
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto'
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto',
title: '吴良材眼镜店85折券',
merchant: '吴良材眼镜店',
points: 10
},
{
id: 3,
title: '杏花楼集团8折券',
points: 500,
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=XHL&font=roboto'
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto',
title: '老凤祥银楼20元抵用券',
merchant: '老凤祥银楼',
points: 1000
},
{
id: 4,
title: '肯德基汉堡套餐券',
points: 1000,
logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/b/bf/KFC_logo.svg/1200px-KFC_logo.svg.png'
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto',
title: '沈大成双酿团2元抵用券',
merchant: '沈大成双酿团',
points: 100
},
{
id: 5,
title: '沈大成双黄团3元抵用券',
points: 300,
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=SDC&font=roboto'
logo: 'https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto',
title: '这是一个非常非常非常非常非常长的标题用于测试换行效果',
merchant: '一个名字很长的商家',
points: 500
}
]);
......
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '用户协议'
}
......
<!--
* @Date: 2025-08-27 17:50:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 00:31:28
* @FilePath: /lls_program/src/pages/UserAgreement/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen flex flex-col bg-white">
<AppHeader title="用户协议" />
<!-- <AppHeader title="用户协议" /> -->
<view class="flex-1 px-4 py-6 pb-20">
<view class="prose prose-sm max-w-none">
<h2 class="text-xl font-bold mb-4">老来赛用户协议</h2>
......@@ -87,7 +94,7 @@
<p class="text-gray-700 mt-8">本协议最终解释权归老来赛所有。</p>
</view>
</view>
<BottomNav />
<!-- <BottomNav /> -->
</view>
</template>
......