第一次上传

.svn/pristine/59/5975ddf68eb091f3710bfd595abda8aa43a6bfc4.svn-base

@@ -0,0 +1,216 @@
+# 🎨 图标下载和放置完整指南
+
+## 📌 重要说明
+
+我无法直接为您下载图标，但我提供了**最快的解决方案**：
+
+### ⚡ 5分钟快速方案
+
+1. **打开图标下载工具**
+   - 双击打开文件：`static/icons/icon-downloader.html`
+   - 这是一个网页工具，可以直接点击下载所有图标
+
+2. **批量下载图标**
+   - 在工具中点击每个"下载"按钮
+   - 会跳转到 RemixIcon 网站（免费、无需注册）
+   - 点击页面上的"Download"按钮
+   - 选择 PNG 格式
+   - 调整颜色（见下方颜色指南）
+   - 点击下载
+
+3. **重命名文件**
+   - 下载后按照下方清单重命名
+   - 移动到 `static/icons/` 目录
+
+---
+
+## 🎯 颜色配置指南
+
+### 在 RemixIcon 下载时设置颜色
+
+| 图标类型 | 颜色代码 | 颜色名称 |
+|---------|---------|---------|
+| 底部导航（未选中） | #94A3B8 | Slate Gray |
+| 底部导航（选中） | #6366F1 | Indigo |
+| 页面内图标 | #64748B | Cool Gray |
+| 白色图标 | #FFFFFF | White |
+| 渐变图标 | #6366F1 | Indigo |
+
+**设置步骤：**
+1. 在 RemixIcon 下载页面
+2. 找到 "Color" 输入框
+3. 输入对应颜色代码
+4. 点击 "Download PNG"
+
+---
+
+## 📋 完整图标清单（27个）
+
+### ✅ 必需图标（底部导航）
+
+| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
+|---|--------|---------|------|------|
+| 1 | home.png | [下载](https://remixicon.com/icon/home-4-line) | 48px | #94A3B8 |
+| 2 | home-active.png | [下载](https://remixicon.com/icon/home-4-fill) | 48px | #6366F1 |
+| 3 | profile.png | [下载](https://remixicon.com/icon/user-3-line) | 48px | #94A3B8 |
+| 4 | profile-active.png | [下载](https://remixicon.com/icon/user-3-fill) | 48px | #6366F1 |
+
+### ✅ 首页图标（7个）
+
+| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
+|---|--------|---------|------|------|
+| 5 | search.png | [下载](https://remixicon.com/icon/search-line) | 24px | #94A3B8 |
+| 6 | location.png | [下载](https://remixicon.com/icon/map-pin-2-line) | 24px | #94A3B8 |
+| 7 | all.png | [下载](https://remixicon.com/icon/apps-line) | 32px | #6366F1 |
+| 8 | restaurant.png | [下载](https://remixicon.com/icon/restaurant-2-line) | 32px | #6366F1 |
+| 9 | bar.png | [下载](https://remixicon.com/icon/goblet-line) | 32px | #6366F1 |
+| 10 | supermarket.png | [下载](https://remixicon.com/icon/store-3-line) | 32px | #6366F1 |
+| 11 | empty.png | [下载](https://remixicon.com/icon/inbox-line) | 80px | #CBD5E1 |
+
+### ✅ 个人中心图标（10个）
+
+| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
+|---|--------|---------|------|------|
+| 12 | edit.png | [下载](https://remixicon.com/icon/edit-line) | 24px | #FFFFFF |
+| 13 | vip.png | [下载](https://remixicon.com/icon/vip-crown-line) | 32px | #FFFFFF |
+| 14 | coupon.png | [下载](https://remixicon.com/icon/coupon-3-line) | 32px | #FFFFFF |
+| 15 | points.png | [下载](https://remixicon.com/icon/coin-line) | 32px | #FFFFFF |
+| 16 | order.png | [下载](https://remixicon.com/icon/file-list-3-line) | 32px | #FFFFFF |
+| 17 | favorite.png | [下载](https://remixicon.com/icon-star-line) | 24px | #64748B |
+| 18 | help.png | [下载](https://remixicon.com/icon/question-line) | 24px | #64748B |
+| 19 | settings.png | [下载](https://remixicon.com/icon/settings-3-line) | 24px | #64748B |
+| 20 | arrow-right.png | [下载](https://remixicon.com/icon/arrow-right-line) | 20px | #CBD5E1 |
+| 21 | location.png | [下载](https://remixicon.com/icon/map-pin-line) | 24px | #64748B |
+
+### ✅ 其他图标（6个）
+
+| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
+|---|--------|---------|------|------|
+| 22 | phone.png | [下载](https://remixicon.com/icon/phone-line) | 32px | #FFFFFF |
+| 23 | navigation.png | [下载](https://remixicon.com/icon/compass-3-line) | 32px | #FFFFFF |
+| 24 | clock.png | [下载](https://remixicon.com/icon/time-line) | 24px | #64748B |
+| 25 | check.png | [下载](https://remixicon.com/icon/check-line) | 24px | #10B981 |
+| 26 | close.png | [下载](https://remixicon.com/icon/close-line) | 24px | #94A3B8 |
+
+---
+
+## 🔧 放置位置
+
+所有图标下载后，请放置到：
+
+```
+d:/Program/vp/static/icons/
+```
+
+目录结构应该是这样的：
+
+```
+static/
+└── icons/
+    ├── home.png
+    ├── home-active.png
+    ├── profile.png
+    ├── profile-active.png
+    ├── search.png
+    ├── location.png
+    ├── all.png
+    ├── restaurant.png
+    ├── bar.png
+    ├── supermarket.png
+    ├── empty.png
+    ├── edit.png
+    ├── vip.png
+    ├── coupon.png
+    ├── points.png
+    ├── order.png
+    ├── favorite.png
+    ├── help.png
+    ├── settings.png
+    ├── arrow-right.png
+    ├── phone.png
+    ├── navigation.png
+    ├── clock.png
+    ├── check.png
+    └── close.png
+```
+
+---
+
+## ⚡ 最快速方法（5分钟）
+
+### 方法1：使用我提供的下载工具（推荐）
+
+1. **打开工具**
+   ```
+   双击打开：d:/Program/vp/static/icons/icon-downloader.html
+   ```
+
+2. **批量下载**
+   - 点击每个卡片的"下载"按钮
+   - 会自动跳转到对应的 RemixIcon 图标页
+   - 点击页面上的 Download 按钮
+   - 选择 PNG 格式
+   - 设置对应颜色（复制颜色代码）
+   - 下载并重命名
+
+3. **快速设置颜色技巧**
+   - 复制颜色代码（如 #94A3B8）
+   - 在 RemixIcon 下载页的 Color 框中粘贴
+   - 点击 Download PNG
+
+### 方法2：使用 command line 批量下载
+
+如果您会使用 curl，可以在项目根目录运行：
+
+```bash
+# 创建临时下载脚本
+cd static/icons
+
+# 下载底部导航图标（示例）
+curl -o home.png "https://cdn.jsdelivr.net/npm/remixicon@3.5.0/icons/HomeLine.svg"
+# 然后用在线工具转换为 PNG
+```
+
+---
+
+## 🎯 图标预览
+
+在下载前，您可以在 `icon-downloader.html` 中预览所有图标的效果。
+
+---
+
+## 💡 备选方案
+
+如果暂时不想下载图标，项目会使用：
+- Emoji 表情作为临时图标
+- 不影响项目运行
+- 后续可以随时替换
+
+---
+
+## ⏱️ 时间估算
+
+- **下载工具方案**：5-10 分钟
+- **手动下载**：15-20 分钟
+- **批量脚本**：3-5 分钟（需要技术背景）
+
+---
+
+## 📞 需要帮助？
+
+1. **查看下载工具**
+   - 打开 `static/icons/icon-downloader.html`
+   - 有详细的图标预览和下载链接
+
+2. **查看图标清单**
+   - 打开 `static/icons/ICON_CHECKLIST.md`
+   - 有完整的图标列表和规格
+
+3. **临时方案**
+   - 项目会自动使用 emoji 占位
+   - 不影响开发测试
+
+---
+
+**更新时间：** 2025-01-24
+**图标来源：** RemixIcon（免费开源）

.svn/pristine/59/599e1cc3726c6257c1b271a5ff7b212e944275f1.svn-base

@@ -0,0 +1,140 @@
+{
+	"easycom": {
+		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
+		"custom": {
+			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
+			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
+			"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
+		}
+	},
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+
+		{
+
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"navigationBarBackgroundColor": "#36394D",
+				"navigationStyle": "custom",
+				"backgroundColor": "#F8F8F8"
+			}
+		},
+		{
+			"path": "pages/index/community",
+			"style": {
+				"navigationBarTitleText": "社区",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/user",
+			"style": {
+				"navigationBarTitleText": "我的",
+				"navigationStyle": "custom"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "v派商家",
+		"navigationBarBackgroundColor": "#fff",
+		"backgroundColor": "#F8F8F8"
+	},
+	"subPackages": [{
+			"root": "pages/community",
+			"pages": [{
+					"path": "noticeList",
+					"style": {
+						"navigationBarTitleText": "社区公告"
+					}
+				},
+				{
+					"path": "merchantCom",
+					"style": {
+						"navigationBarTitleText": "社区商家"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/goods",
+			"pages": [{
+				"path": "merchant",
+				"style": {
+					"navigationBarTitleText": "热门商家"
+				}
+			}]
+		},
+		{
+			"root": "pages/article",
+			"pages": [{
+					"path": "articleCom",
+					"style": {
+						"navigationBarTitleText": "社区公告"
+					}
+				},
+				{
+					"path": "newsList",
+					"style": {
+						"navigationBarTitleText": "新闻公告"
+					}
+				},
+				{
+					"path": "news",
+					"style": {
+						"navigationBarTitleText": "新闻详情"
+					}
+				}
+
+			]
+		}, {
+			"root": "pages/userFunc",
+			"pages": [{
+				"path" : "setData",
+				"style" : 
+				{
+					"navigationBarTitleText" : "编辑资料"
+				}
+			},
+			{
+				"path" : "integration",
+				"style" : 
+				{
+					"navigationBarTitleText" : "积分明细"
+				}
+			},
+			{
+				"path" : "trade",
+				"style" : 
+				{
+					"navigationBarTitleText" : "交易记录"
+				}
+			}
+			]
+		}
+	],
+
+
+	"tabBar": {
+		"color": "#8a8a8a",
+		"selectedColor": "#EC754B",
+		"backgroundColor": "#ffffff",
+		"list": [{
+			"text": "首页",
+			"pagePath": "pages/index/index",
+			"iconPath": "/static/tabBar/home.png",
+			"selectedIconPath": "/static/tabBar/homed.png"
+		}, {
+			"text": "社区",
+			"pagePath": "pages/index/community",
+			"iconPath": "/static/tabBar/community.png",
+			"selectedIconPath": "/static/tabBar/communityed.png"
+		}, {
+			"text": "个人中心",
+			"pagePath": "pages/index/user",
+			"iconPath": "/static/tabBar/user.png",
+			"selectedIconPath": "/static/tabBar/usered.png"
+		}]
+	}
+
+}

.svn/pristine/59/59db67161d460fbd6c1e62a3a26989f1e8dfd8ce.svn-base

@@ -0,0 +1,450 @@
+<template>
+	<view class="member-code-page">
+		<!-- 沉浸式状态栏 -->
+		<view v-if="!isZFB" class="status-bar"></view>
+
+		<!-- 顶部导航 -->
+		<view v-if="!isZFB" class="nav-bar">
+			<image class="back-icon" src="/static/icons/back.svg" @click="Service.GoPageBack()" mode="aspectFit" />
+			<text class="nav-title">会员码</text>
+			<view class="nav-placeholder"></view>
+		</view>
+
+		<!-- 主要内容区域 -->
+		<view class="content">
+			<!-- 会员卡片 -->
+			<view class="member-card">
+				<!-- 用户信息 -->
+				<view class="user-section">
+					<image class="user-avatar" :src="Service.GetMateUrlByImg(userData.headImg)" mode="aspectFill" />
+					<view class="user-info">
+						<text class="user-name">{{ userData.nick }}</text>
+						<!-- ID和会员等级标签在一排 -->
+						<view class="tags-row">
+							<view class="user-id-tag" @click="copyMemberId">
+								<text class="ri-vip-crown-2-fill id-icon"></text>
+								<text class="id-text">ID: {{ userData.userNo }}</text>
+								<text class="ri-file-copy-line id-copy"></text>
+							</view>
+							<!-- <view class="user-member-tag">
+								<text class="ri-vip-crown-fill member-icon"></text>
+								<text class="member-text">黄金会员</text>
+							</view> -->
+						</view>
+					</view>
+				</view>
+
+				<!-- 分割线 -->
+				<view class="divider"></view>
+
+				<!-- 条形码区域 -->
+				<view class="barcode-section">
+					<u-barcode :value="code" :displayValue='false' :width="300" :height="40" />
+					<text class="barcode-number">{{ code }}</text>
+				</view>
+
+				<!-- 二维码区域 -->
+				<view  v-if="!isZfb" class="qrcode-section">
+					<view class="qrcode-wrapper" >
+						<view class="qrcode-placeholder" v-if="erCode!=''">
+							<up-qrcode cid="ex1" :size="180" :val="erCode"></up-qrcode>
+						</view>
+					</view>
+					<text class="code-tip">向商家出示会员码，扫码享受积分优惠</text>
+				</view>
+
+				<!-- 刷新提示 -->
+				<view class="refresh-section">
+					<text class="ri-time-line refresh-icon"></text>
+					<text class="refresh-text">{{ refreshCountdown }}秒后自动刷新</text>
+					<view class="refresh-btn" @click="refreshCode">
+						<text class="ri-refresh-line btn-icon"></text>
+						<text class="btn-text">刷新</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 温馨提示 -->
+			<view class="tips-section">
+				<view class="tips-title">
+					<text class="ri-lightbulb-line tips-icon"></text>
+					<text class="title-text">温馨提示</text>
+				</view>
+				<view class="tips-list">
+					<text class="tips-item">• 会员码每分钟自动更新，确保使用安全</text>
+					<text class="tips-item">• 结账时请向商家出示此码</text>
+					<text class="tips-item">• 消费可获得积分，积分可抵扣现金</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, computed, onMounted, onUnmounted } from 'vue'
+	import { vpUserService, Service } from '@/Service/vp/vpUserService'
+	import { onLoad } from '@dcloudio/uni-app'
+	import { inject } from 'vue';
+	const isZFB = inject('isZFB');
+	// 用户数据
+	const user = ref({
+		nickname: '美食达人',
+		avatar: 'https://picsum.photos/200/200?random=100',
+		points: 2580,
+		memberLevel: 'gold',
+		memberId: '8888888',
+		memberCode: 'VIP8888888888888'
+	})
+	let code = ref('')
+	let erCode = ref('')
+
+	let userData = ref<any>({})
+
+	// 刷新倒计时（秒）
+	const refreshCountdown = ref(60)
+	let refreshTimer = ref(0)
+	let countdownTimer = ref(0)
+	let isZfb=ref(false)
+	
+	onLoad(() => {
+		
+		uni.getProvider({
+			service: 'oauth',
+			success: function (res : any) {
+				isZfb.value=res.provider == 'weixin'?false:true
+			}
+		});
+		
+		fetchUserInfo()
+		getCode()
+		startAutoRefresh()
+	})
+
+	// 获取用户信息
+	const fetchUserInfo = () => {
+		vpUserService.GetUserInfo().then(res => {
+			if (res.code == 0) {
+				userData.value = res.data.userInfo
+			}
+		})
+	}
+	
+	
+	const getCode=()=>{
+		vpUserService.GetUserCode().then(res => {
+			if (res.code==0){
+				code.value=res.data.code
+				erCode.value=res.data.erCode
+			}
+		})
+	}
+
+	// 刷新会员码
+	const refreshCode = () => {
+		getCode()
+		// 重置倒计时
+		refreshCountdown.value = 60
+		Service.Msg('会员码已刷新')
+	}
+
+
+	// 复制会员ID
+	const copyMemberId = () => {
+		uni.setClipboardData({
+			data: userData.value.userNo,
+			success: () => {
+				Service.Msg('会员ID已复制')
+			}
+		})
+	}
+
+
+
+	// 开始自动刷新
+	const startAutoRefresh = () => {
+		// 清除之前的定时器
+		if (refreshTimer.value) {
+			clearInterval(refreshTimer.value)
+		}
+		if (countdownTimer.value) {
+			clearInterval(countdownTimer.value)
+		}
+
+		// 倒计时定时器（每秒更新）
+		countdownTimer.value = setInterval(() => {
+			refreshCountdown.value--
+			if (refreshCountdown.value <= 0) {
+				refreshCountdown.value = 60
+				getCode()
+			}
+		}, 1000)
+	}
+
+
+
+	// 清理定时器
+	onUnmounted(() => {
+		if (refreshTimer) {
+			clearInterval(refreshTimer.value)
+		}
+		if (countdownTimer) {
+			clearInterval(countdownTimer.value)
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	/* 引入全局标签样式 */
+	@import '@/styles/member-tags.scss';
+
+	/* 现代化会员码页面 */
+	.member-code-page {
+		min-height: 100vh;
+		background: linear-gradient(180deg, #FFF4E6 0%, #F5F5F5 100%);
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* 状态栏 */
+	.status-bar {
+		background: linear-gradient(135deg, #FF6B00, #FF9500);
+		height: var(--status-bar-height);
+		width: 100%;
+	}
+
+	/* 导航栏 */
+	.nav-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 60rpx 24rpx 20rpx 24rpx;
+		background: linear-gradient(135deg, #FF6B00, #FF9500);
+	}
+
+	.back-icon {
+		width: 48rpx;
+		height: 48rpx;
+		padding: 8rpx;
+	}
+
+	.nav-title {
+		font-size: 36rpx;
+		font-weight: 600;
+		color: #FFFFFF;
+	}
+
+	.nav-placeholder {
+		width: 40rpx;
+	}
+
+	/* 内容区域 */
+	.content {
+		flex: 1;
+		padding: 32rpx 24rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	/* 会员卡片 */
+	.member-card {
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 24rpx;
+		padding: 32rpx;
+		box-shadow: 0 4rpx 20rpx rgba(255, 107, 0, 0.12);
+		margin-bottom: 24rpx;
+	}
+
+	/* 用户信息区域 */
+	.user-section {
+		display: flex;
+		align-items: center;
+		margin-bottom: 32rpx;
+	}
+
+	.user-avatar {
+		width: 96rpx;
+		height: 96rpx;
+		border-radius: 48rpx;
+		margin-right: 20rpx;
+		border: 3rpx solid #FF6B00;
+	}
+
+	.user-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 8rpx;
+	}
+
+	.user-name {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #222222;
+		margin-bottom: 10rpx;
+	}
+
+	/* 分割线 */
+	.divider {
+		height: 1rpx;
+		background: linear-gradient(90deg, transparent, #E0E0E0, transparent);
+		margin-bottom: 32rpx;
+	}
+
+	/* 条形码区域 */
+	.barcode-section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 32rpx;
+	}
+
+	.barcode-wrapper {
+		width: 480rpx;
+		background: #F8F8F8;
+		border-radius: 12rpx;
+		padding: 20rpx 32rpx;
+		margin-bottom: 16rpx;
+	}
+
+	.barcode-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.barcode-lines {
+		font-size: 40rpx;
+		color: #000000;
+		letter-spacing: 2rpx;
+		font-weight: 900;
+		line-height: 1;
+	}
+
+	.barcode-number {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #222222;
+		letter-spacing: 4rpx;
+	}
+
+	/* 二维码区域 */
+	.qrcode-section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 32rpx;
+	}
+
+	.qrcode-wrapper {
+		width: 360rpx;
+		height: 360rpx;
+		background: #F8F8F8;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 20rpx;
+	}
+
+	.qrcode-placeholder {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8rpx;
+	}
+
+	.qrcode-icon {
+		font-size: 200rpx;
+		color: #FFFFFF;
+	}
+
+	.code-tip {
+		font-size: 22rpx;
+		color: #999999;
+		text-align: center;
+		margin-top: 10rpx;
+	}
+
+	/* 刷新区域 */
+	.refresh-section {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8rpx;
+	}
+
+	.refresh-icon {
+		font-size: 24rpx;
+		color: #FF6B00;
+	}
+
+	.refresh-text {
+		font-size: 24rpx;
+		color: #666666;
+		text-align: center;
+	}
+
+	.refresh-btn {
+		display: flex;
+		align-items: center;
+		gap: 4rpx;
+		background: linear-gradient(135deg, #FF6B00, #FF9500);
+		padding: 10rpx 20rpx;
+		border-radius: 24rpx;
+	}
+
+	.btn-icon {
+		font-size: 20rpx;
+		color: #FFFFFF;
+	}
+
+	.btn-text {
+		font-size: 24rpx;
+		color: #FFFFFF;
+		font-weight: 500;
+	}
+
+	/* 温馨提示 */
+	.tips-section {
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+	}
+
+	.tips-title {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+		margin-bottom: 16rpx;
+	}
+
+	.tips-icon {
+		font-size: 28rpx;
+		color: #FFA500;
+	}
+
+	.title-text {
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #222222;
+	}
+
+	.tips-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12rpx;
+	}
+
+	.tips-item {
+		font-size: 24rpx;
+		color: #666666;
+		line-height: 1.6;
+	}
+</style>