【门店端】 提交

.gitignore

@@ -4,4 +4,5 @@
 vendor
 Backend/dist
 Backend/node_modules
-vue_store/*
+Store_vue/node_modules
+Store_vue/unpackage

Store_vue/App.vue

@@ -0,0 +1,58 @@
+<script>
+	import { hasValidToken, redirectToLogin } from './api/utils/auth';
+	
+	export default {
+		onLaunch: function() {
+			console.log('App Launch');
+			// 全局检查token
+			this.checkToken();
+		},
+		onShow: function() {
+			console.log('App Show');
+			// 应用恢复时再次检查token
+			this.checkToken();
+		},
+		onHide: function() {
+			console.log('App Hide');
+		},
+		methods: {
+			// 检查token是否有效并处理跳转
+			checkToken() {
+				// 获取当前页面
+				const pages = getCurrentPages();
+				const currentPage = pages.length ? pages[pages.length - 1] : null;
+				
+				// 如果token无效且不在登录页面，则跳转到登录页面
+				if (!hasValidToken() && currentPage && currentPage.route !== 'pages/login/index') {
+					redirectToLogin();
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/*每个页面公共css */
+	@import 'uview-ui/index.scss';
+	/* 引入阿里图标库 */
+	@import '/static/iconfont/iconfont.css';
+
+	/* 页面通用样式 */
+	page {
+		font-size: 28rpx;
+		color: #333;
+		background-color: #fff;
+	}
+
+	/* 安全区适配 */
+	.safe-area-inset-bottom {
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	
+	/* 字体图标支持 */
+	@font-face {
+		font-family: "SF Pro Display";
+		src: url("https://sf.abarba.me/SF-Pro-Display-Regular.otf");
+	}
+</style>

Store_vue/components/LoginRegister.vue

@@ -0,0 +1,374 @@
+<template>
+	<view class="login-container" v-if="show" style="margin-top: var(--status-bar-height);">
+		<view class="login-wrapper">
+			<!-- 标签切换 -->
+			<u-tabs
+				:list="tabList"
+				:current="currentTab === 'verification' ? 0 : 1"
+				@change="tabChange"
+				:is-scroll="false"
+				inactive-color="#666"
+				active-color="#333"
+				item-style="height: 45px;"
+				bg-color="#f5f7fa"
+			></u-tabs>
+			
+			<!-- 提示文本 -->
+			<view class="tip-text">
+				您所在地区仅支持 手机号 / 微信 / Apple 登录
+			</view>
+			
+			<!-- 手机号输入 -->
+			<u-input
+				v-model="phoneNumber"
+				:clearable="true"
+				type="number"
+				placeholder="手机号"
+				prefixIcon="phone"
+				:border="true"
+				maxlength="11"
+			>
+				<template slot="prefix">
+					<text style="margin-right: 10px; color: #333; padding-right: 10px; border-right: 1px solid #eee">+86</text>
+				</template>
+			</u-input>
+			
+			<!-- 验证码或密码输入 -->
+			<view v-if="currentTab === 'verification'" style="margin-top: 15px;">
+				<u-input
+					v-model="verificationCode"
+					:clearable="true"
+					type="number"
+					placeholder="验证码"
+					:border="true"
+					maxlength="6"
+				>
+					<template slot="suffix">
+						<u-button
+							size="mini"
+							:text="codeSending ? `${countDown}秒后重发` : '发送验证码'"
+							type="primary"
+							:disabled="codeSending || !phoneNumber || phoneNumber.length !== 11"
+							@click="sendVerificationCode"
+							style="margin-left: 5px; min-width: 100px;"
+						></u-button>
+					</template>
+				</u-input>
+			</view>
+			
+			<view v-if="currentTab === 'password'" style="margin-top: 15px;">
+				<u-input
+					v-model="password"
+					type="password"
+					:password="!showPassword"
+					placeholder="密码"
+					:border="true"
+				>
+					<template slot="suffix">
+						<u-icon
+							:name="showPassword ? 'eye-fill' : 'eye-off'"
+							size="22"
+							color="#c0c4cc"
+							@click="showPassword = !showPassword"
+						></u-icon>
+					</template>
+				</u-input>
+			</view>
+			
+			<!-- 用户协议 -->
+			<view class="agreement-container">
+				<u-checkbox
+					v-model="agreedTerms"
+					shape="circle"
+					active-color="#4080ff"
+				></u-checkbox>
+				<text class="agreement-text">已阅读并同意</text>
+				<text class="agreement-link" @tap="openProtocol">用户协议</text>
+				<text class="agreement-text">与</text>
+				<text class="agreement-link" @tap="openPrivacy">隐私政策</text>
+			</view>
+			
+			<!-- 登录按钮 -->
+			<u-button 
+				text="登录" 
+				type="primary" 
+				shape="circle"
+				:disabled="!isFormValid"
+				@click="handleLogin"
+				:custom-style="{marginTop: '20px', marginBottom: '25px'}"
+			></u-button>
+			
+			<!-- 分隔线 -->
+			<u-divider text="或" :hairline="true"></u-divider>
+			
+			<!-- 第三方登录 -->
+			<view class="third-party-login">
+				<u-button
+					text="使用微信登录"
+					shape="circle"
+					@click="handleWechatLogin"
+					:ripple="true"
+					:custom-style="{backgroundColor: '#07c160', color: '#ffffff', marginBottom: '15px'}"
+				>
+					<template slot="default">
+						<u-icon name="weixin-fill" color="#ffffff" size="18" style="margin-right: 5px;"></u-icon>
+						<text>使用微信登录</text>
+					</template>
+				</u-button>
+				
+				<u-button
+					text="使用 Apple 登录"
+					shape="circle"
+					@click="handleAppleLogin"
+					:ripple="true"
+					:custom-style="{backgroundColor: '#000000', color: '#ffffff'}"
+				>
+					<template slot="default">
+						<u-icon name="apple-fill" color="#ffffff" size="18" style="margin-right: 5px;"></u-icon>
+						<text>使用 Apple 登录</text>
+					</template>
+				</u-button>
+			</view>
+			
+			<!-- 联系我们 -->
+			<view class="contact-us" @tap="handleContact">
+				联系我们
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'LoginRegister',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				tabList: [{name: '验证码登录'}, {name: '密码登录'}],
+				currentTab: 'verification', // verification 或 password
+				phoneNumber: '',
+				verificationCode: '',
+				password: '',
+				showPassword: false,
+				agreedTerms: false,
+				codeSending: false,
+				countDown: 60
+			}
+		},
+		computed: {
+			isFormValid() {
+				const phoneValid = this.phoneNumber && this.phoneNumber.length === 11;
+				
+				if (this.currentTab === 'verification') {
+					return phoneValid && this.verificationCode && this.agreedTerms;
+				} else {
+					return phoneValid && this.password && this.agreedTerms;
+				}
+			}
+		},
+		methods: {
+			tabChange(index) {
+				this.currentTab = index === 0 ? 'verification' : 'password';
+			},
+			openProtocol() {
+				uni.showToast({
+					title: '打开用户协议',
+					icon: 'none'
+				});
+			},
+			openPrivacy() {
+				uni.showToast({
+					title: '打开隐私政策',
+					icon: 'none'
+				});
+			},
+			sendVerificationCode() {
+				if (this.codeSending) return;
+				if (!this.phoneNumber || this.phoneNumber.length !== 11) {
+					uni.showToast({
+						title: '请输入正确的手机号',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				this.codeSending = true;
+				this.countDown = 60;
+				
+				// 模拟发送验证码
+				uni.showToast({
+					title: '验证码已发送',
+					icon: 'success'
+				});
+				
+				// 倒计时
+				const timer = setInterval(() => {
+					this.countDown--;
+					if (this.countDown <= 0) {
+						clearInterval(timer);
+						this.codeSending = false;
+					}
+				}, 1000);
+			},
+			handleLogin() {
+				if (!this.isFormValid) return;
+				
+				// 验证手机号格式
+				if (!/^1\d{10}$/.test(this.phoneNumber)) {
+					uni.showToast({
+						title: '请输入正确的手机号',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				// 根据当前登录方式验证
+				if (this.currentTab === 'verification') {
+					if (!this.verificationCode || this.verificationCode.length !== 6) {
+						uni.showToast({
+							title: '请输入6位验证码',
+							icon: 'none'
+						});
+						return;
+					}
+				} else {
+					if (!this.password || this.password.length < 6) {
+						uni.showToast({
+							title: '密码不能少于6位',
+							icon: 'none'
+						});
+						return;
+					}
+				}
+				
+				// 模拟登录过程
+				uni.showLoading({
+					title: '登录中...'
+				});
+				
+				setTimeout(() => {
+					uni.hideLoading();
+					uni.showToast({
+						title: '登录成功',
+						icon: 'success',
+						duration: 1500,
+						success: () => {
+							// 登录成功后关闭登录页
+							setTimeout(() => {
+								this.$emit('close');
+								
+								// 模拟返回用户信息
+								const userInfo = {
+									id: '123456',
+									nickname: '用户_' + Math.floor(Math.random() * 10000),
+									phone: this.phoneNumber,
+									avatar: ''
+								};
+								
+								this.$emit('login-success', userInfo);
+							}, 1500);
+						}
+					});
+				}, 1500);
+			},
+			handleWechatLogin() {
+				uni.showToast({
+					title: '微信登录功能暂未实现',
+					icon: 'none'
+				});
+			},
+			handleAppleLogin() {
+				uni.showToast({
+					title: 'Apple登录功能暂未实现',
+					icon: 'none'
+				});
+			},
+			handleContact() {
+				uni.showToast({
+					title: '联系方式: support@example.com',
+					icon: 'none'
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.login-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 10001;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.login-wrapper {
+		width: 100%;
+		height: 100%;
+		background-color: #fff;
+		border-radius: 0;
+		padding: 20px;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		animation: slideInFromBottom 0.3s ease;
+	}
+	
+	@keyframes slideInFromBottom {
+		from {
+			transform: translateY(100%);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
+	
+	.tip-text {
+		font-size: 14px;
+		color: #666;
+		margin: 15px 0 20px;
+		line-height: 1.5;
+	}
+	
+	.agreement-container {
+		display: flex;
+		align-items: center;
+		margin-top: 15px;
+	}
+	
+	.agreement-text {
+		font-size: 12px;
+		color: #999;
+		margin-left: 5px;
+	}
+	
+	.agreement-link {
+		font-size: 12px;
+		color: #4080ff;
+		margin: 0 4px;
+	}
+	
+	.third-party-login {
+		display: flex;
+		flex-direction: column;
+		margin: 20px 0 30px;
+	}
+	
+	.contact-us {
+		text-align: center;
+		color: #666;
+		font-size: 14px;
+		margin-top: auto;
+		padding: 15px 0;
+	}
+</style> 

Store_vue/components/PackageDetail.vue

@@ -0,0 +1,386 @@
+<template>
+	<view v-if="show" class="package-detail-container" style="margin-top: var(--status-bar-height);">
+		<!-- 头部 -->
+		<view class="header">
+			<view class="back-icon" @tap="closePage">
+				<u-icon name="arrow-left" color="#333" size="26"></u-icon>
+			</view>
+			<view class="title">{{packageData.name}}</view>
+			<view class="close-icon" @tap="closePage">
+				<u-icon name="close" color="#333" size="24"></u-icon>
+			</view>
+		</view>
+		
+		<!-- 套餐价格 -->
+		<view class="price-card">
+			<view class="price-title">套餐价格</view>
+			<view class="price-content">
+				<view class="main-price">
+					<text class="price-symbol">¥</text>
+					<text class="price-value">{{packageData.price}}</text>
+				</view>
+				<view class="original-price-tag">原价</view>
+			</view>
+			<view class="original-price" v-if="packageData.originalPrice !== packageData.price">
+				<text class="crossed-price">¥{{packageData.originalPrice}}</text>
+			</view>
+		</view>
+		
+		<!-- 套餐详情 -->
+		<view class="detail-card">
+			<view class="detail-title">套餐详情</view>
+			<view class="detail-item" v-for="item in packageData.details" :key="item.label">
+				<text class="detail-label">{{item.label}}</text>
+				<text class="detail-value">{{item.value}}</text>
+			</view>
+		</view>
+		
+		<!-- 套餐特权 -->
+		<view class="privilege-card">
+			<view class="detail-title">套餐特权</view>
+			<view class="privilege-item" v-for="item in packageData.privileges" :key="item">
+				<view class="privilege-icon">
+					<u-icon name="checkmark" color="#0080ff" size="16"></u-icon>
+				</view>
+				<text class="privilege-text">{{item}}</text>
+			</view>
+		</view>
+		
+		<!-- 立即购买按钮 -->
+		<view class="buy-button">
+			<u-button 
+				type="primary" 
+				text="立即购买" 
+				shape="circle"
+				@click="handleBuy"
+				:custom-style="{
+					width: '90%',
+					height: '44px',
+					marginTop: '20px',
+					marginBottom: '30px'
+				}"
+			></u-button>
+		</view>
+		
+		<!-- 购买说明 -->
+		<view class="purchase-info">
+			<text class="info-text">流量将在购买后24小时内接入</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { trafficApi } from '../api/modules/traffic';
+	
+	export default {
+		name: 'PackageDetail',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			packageData: {
+				type: Object,
+				default: () => ({
+					id: 1,
+					name: '基础流量包',
+					price: 980,
+					originalPrice: 990,
+					specs: '20人/月·30天',
+					details: [
+						{ label: '每月流量', value: '20人/月' },
+						{ label: '套餐时长', value: '30天' },
+						{ label: '总流量', value: '600人' }
+					],
+					privileges: [
+						'引流到微信',
+						'每日流量报告',
+						'基础客户标签'
+					]
+				})
+			}
+		},
+		data() {
+			return {
+				// 订单信息
+				orderInfo: null,
+				// 购买状态
+				buying: false
+			}
+		},
+		methods: {
+			closePage() {
+				this.$emit('close');
+			},
+			async handleBuy() {
+				if (this.buying) return;
+				
+				this.buying = true;
+				
+				uni.showLoading({
+					title: '创建订单...',
+					mask: true
+				});
+				
+				try {
+					// 调用创建订单接口
+					const response = await trafficApi.createOrder(this.packageData.id);
+					
+					// 隐藏加载中
+					uni.hideLoading();
+					
+					if (response.code === 200) {
+						this.orderInfo = response.data;
+						
+						// 显示订单创建成功提示
+						uni.showToast({
+							title: '订单创建成功',
+							icon: 'success',
+							duration: 2000
+						});
+						
+						// 模拟跳转到支付页面
+						setTimeout(() => {
+							this.showPaymentModal();
+						}, 1000);
+					} else {
+						// 显示错误信息
+						uni.showToast({
+							title: response.msg || '创建订单失败',
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				} catch (err) {
+					// 隐藏加载中
+					uni.hideLoading();
+					
+					// 显示错误信息
+					uni.showToast({
+						title: '网络异常，请稍后重试',
+						icon: 'none',
+						duration: 2000
+					});
+					console.error('创建订单错误:', err);
+				} finally {
+					this.buying = false;
+				}
+			},
+			// 显示支付弹窗
+			showPaymentModal() {
+				if (!this.orderInfo) return;
+				
+				uni.showModal({
+					title: '订单支付',
+					content: `订单号: ${this.orderInfo.orderNo}\n金额: ¥${this.orderInfo.amount}\n支付方式: ${this.orderInfo.payType === 'wechat' ? '微信支付' : '其他支付方式'}`,
+					confirmText: '去支付',
+					cancelText: '取消',
+					success: (res) => {
+						if (res.confirm) {
+							// 模拟支付成功
+							uni.showLoading({
+								title: '支付处理中'
+							});
+							
+							setTimeout(() => {
+								uni.hideLoading();
+								uni.showToast({
+									title: '支付成功',
+									icon: 'success',
+									duration: 2000
+								});
+								
+								// 关闭页面
+								setTimeout(() => {
+									this.closePage();
+									
+									// 触发购买成功事件，通知父组件刷新数据
+									this.$emit('buy-success');
+								}, 1500);
+							}, 2000);
+						}
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.package-detail-container {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #f5f7fa;
+		z-index: 10000;
+		overflow-y: auto;
+		transform-origin: right;
+		animation: slideInFromRight 0.3s ease;
+	}
+	
+	@keyframes slideInFromRight {
+		from {
+			transform: translateX(100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 15px;
+		background-color: #fff;
+		border-bottom: 1px solid #eee;
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+	
+	.back-icon {
+		width: 60px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.title {
+		font-size: 17px;
+		font-weight: 500;
+		flex: 1;
+		text-align: center;
+	}
+	
+	.close-icon {
+		width: 60px;
+		display: flex;
+		justify-content: flex-end;
+	}
+	
+	.price-card {
+		margin: 15px;
+		padding: 15px;
+		background-color: #e6f4ff;
+		border-radius: 10px;
+	}
+	
+	.price-title {
+		font-size: 15px;
+		font-weight: 500;
+		color: #333;
+		margin-bottom: 10px;
+	}
+	
+	.price-content {
+		display: flex;
+		align-items: center;
+	}
+	
+	.main-price {
+		display: flex;
+		align-items: baseline;
+	}
+	
+	.price-symbol {
+		font-size: 18px;
+		font-weight: bold;
+		color: #0080ff;
+	}
+	
+	.price-value {
+		font-size: 28px;
+		font-weight: bold;
+		color: #0080ff;
+	}
+	
+	.original-price-tag {
+		margin-left: 15px;
+		padding: 2px 10px;
+		background-color: #fff;
+		border-radius: 4px;
+		font-size: 12px;
+		color: #666;
+	}
+	
+	.original-price {
+		margin-top: 5px;
+	}
+	
+	.crossed-price {
+		font-size: 14px;
+		color: #999;
+		text-decoration: line-through;
+	}
+	
+	.detail-card, .privilege-card {
+		margin: 15px;
+		padding: 15px;
+		background-color: #fff;
+		border-radius: 10px;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	}
+	
+	.detail-title {
+		font-size: 15px;
+		font-weight: 500;
+		color: #333;
+		margin-bottom: 15px;
+	}
+	
+	.detail-item {
+		display: flex;
+		justify-content: space-between;
+		padding: 10px 0;
+		border-bottom: 1px solid #f5f5f5;
+	}
+	
+	.detail-item:last-child {
+		border-bottom: none;
+	}
+	
+	.detail-label {
+		color: #333;
+		font-size: 14px;
+	}
+	
+	.detail-value {
+		color: #666;
+		font-size: 14px;
+	}
+	
+	.privilege-item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 12px;
+	}
+	
+	.privilege-icon {
+		margin-right: 8px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.privilege-text {
+		font-size: 14px;
+		color: #333;
+	}
+	
+	.buy-button {
+		display: flex;
+		justify-content: center;
+		margin-top: 20px;
+	}
+	
+	.purchase-info {
+		text-align: center;
+		margin-bottom: 30px;
+	}
+	
+	.info-text {
+		font-size: 12px;
+		color: #999;
+	}
+</style> 

Store_vue/components/SideMenu.vue

@@ -0,0 +1,754 @@
+<template>
+	<view v-if="show" class="side-menu-container" style="margin-top: var(--status-bar-height);">
+		<view class="side-menu-mask" @tap="closeSideMenu"></view>
+		<view class="side-menu">
+			<view class="side-menu-header">
+				<text class="side-menu-title">艺施赋能</text>
+				<text class="close-icon" @tap="closeSideMenu">
+					<u-icon name="close" color="#333" size="24"></u-icon>
+				</text>
+			</view>
+			
+		
+			
+			<!-- 功能模块 -->
+			<view class="function-module">
+				<view class="function-grid">
+					<!-- 第一行 -->
+					<view class="function-row">
+						<view class="function-item pink" :class="{'function-item-disabled': !functionStatus['autoLike']}" @tap="handleFunctionClick('autoLike')">
+							<text class="iconfont icon-dianzan function-icon" style="color: #ff6699; font-size: 26px;"></text>
+							<text class="function-name">自动点赞</text>
+							<text class="function-status" :style="functionStatus['autoLike'] ? 'color: #ff6699; font-size: 12px;' : 'color: #999; font-size: 12px;'">
+								{{ functionStatus['autoLike'] ? '已启用' : '已禁用' }}
+							</text>
+						</view>
+						<view class="function-item purple" :class="{'function-item-disabled': !functionStatus['momentsSync']}" @tap="handleFunctionClick('momentsSync')">
+							<text class="iconfont icon-tupian function-icon" style="color: #9966ff; font-size: 26px;"></text>
+							<text class="function-name">朋友圈同步</text>
+							<text class="function-status" :style="functionStatus['momentsSync'] ? 'color: #9966ff; font-size: 12px;' : 'color: #999; font-size: 12px;'">
+								{{ functionStatus['momentsSync'] ? '已启用' : '已禁用' }}
+							</text>
+						</view>
+						<view class="function-item green" :class="{'function-item-disabled': !functionStatus['autoCustomerDev']}" @tap="handleFunctionClick('autoCustomerDev')">
+							<text class="iconfont icon-yonghu function-icon" style="color: #33cc99; font-size: 26px;"></text>
+							<text class="function-name">自动开发客户</text>
+							<text class="function-status" :style="functionStatus['autoCustomerDev'] ? 'color: #33cc99; font-size: 12px;' : 'color: #999; font-size: 12px;'">
+								{{ functionStatus['autoCustomerDev'] ? '已启用' : '已禁用' }}
+							</text>
+						</view>
+					</view>
+					<!-- 第二行 -->
+					<view class="function-row">
+						<view class="function-item orange" :class="{'function-item-disabled': !functionStatus['groupMessageDeliver']}" @tap="handleFunctionClick('groupMessageDeliver')">
+							<text class="iconfont icon-xiaoxi function-icon" style="color: #ff9966; font-size: 26px;"></text>
+							<text class="function-name">群消息推送</text>
+							<text class="function-status" :style="functionStatus['groupMessageDeliver'] ? 'color: #ff9966; font-size: 12px;' : 'color: #999; font-size: 12px;'">
+								{{ functionStatus['groupMessageDeliver'] ? '已启用' : '已禁用' }}
+							</text>
+						</view>
+						<view class="function-item blue" :class="{'function-item-disabled': !functionStatus['autoGroup']}" @tap="handleFunctionClick('autoGroup')">
+							<text class="iconfont icon-yonghuqun function-icon" style="color: #6699ff; font-size: 26px;"></text>
+							<text class="function-name">自动建群</text>
+							<text class="function-status" :style="functionStatus['autoGroup'] ? 'color: #6699ff; font-size: 12px;' : 'color: #999; font-size: 12px;'">
+								{{ functionStatus['autoGroup'] ? '已启用' : '已禁用' }}
+							</text>
+						</view>
+						<view class="function-item" style="visibility: hidden;">
+							<!-- 空白占位 -->
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 采购中心 -->
+			<view class="module-section">
+				<view class="module-title">采购中心</view>
+				<view class="module-list">
+					<view class="module-item" @tap="showTrafficPurchase">
+						<view class="module-left">
+							<view class="module-icon blue">
+								<text class="iconfont icon-shangsheng" style="color: #5096ff; font-size: 24px;"></text>
+							</view>
+							<view class="module-info">
+								<text class="module-name">流量采购</text>
+								<text class="module-desc">自动导入流量到微信</text>
+							</view>
+						</view>
+					</view>
+					<view class="module-item" @tap="showSupplyChainPurchase">
+						<view class="module-left">
+							<view class="module-icon yellow">
+								<text class="iconfont icon-gouwuchekong" style="color: #ffc107; font-size: 24px;"></text>
+							</view>
+							<view class="module-info">
+								<text class="module-name">供应链采购</text>
+								<text class="module-desc">管理供应链业务</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 数据中心 -->
+			<view class="module-section">
+				<view class="module-title">数据中心</view>
+				<view class="module-list">
+					<view class="module-item" @tap="showDataStatistics">
+						<view class="module-left">
+							<view class="module-icon blue">
+								<text class="iconfont icon-shujutongji" style="color: #5096ff; font-size: 24px;"></text>
+							</view>
+							<view class="module-info">
+								<text class="module-name">数据统计</text>
+								<text class="module-desc">查看业务数据统计</text>
+							</view>
+						</view>
+					</view>
+					<view class="module-item" @tap="showCustomerManagement">
+						<view class="module-left">
+							<view class="module-icon blue">
+								<text class="iconfont icon-yonghuqun" style="color: #5096ff; font-size: 24px;"></text>
+							</view>
+							<view class="module-info">
+								<text class="module-name">客户管理</text>
+								<text class="module-desc">管理客户资料信息</text>
+							</view>
+						</view>
+					</view>
+					<view class="module-item" @tap="showSettings">
+						<view class="module-left">
+							<view class="module-icon gray">
+								<text class="iconfont icon-shezhi" style="color: #888; font-size: 24px;"></text>
+							</view>
+							<view class="module-info">
+								<text class="module-name">系统设置</text>
+								<text class="module-desc">配置系统参数</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 底部登录按钮 -->
+			<view class="bottom-button" @tap="isLoggedIn ? logout() : showLoginPage()">
+				<text class="iconfont" :class="isLoggedIn ? 'icon-tuichu' : 'icon-denglu'" :style="isLoggedIn ? 'color: #333; font-size: 18px;' : 'color: #333; font-size: 18px;'"></text>
+				<text class="login-text">{{ isLoggedIn ? '退出登录' : '登录/注册' }}</text>
+			</view>
+		</view>
+		
+		<!-- 流量采购页面 -->
+		<traffic-purchase :show="showTrafficPage" @close="closeTrafficPurchase"></traffic-purchase>
+		
+		<!-- 供应链采购页面 -->
+		<supply-chain-purchase :show="showSupplyChainPage" @close="closeSupplyChainPurchase"></supply-chain-purchase>
+		
+		<!-- 系统设置页面 -->
+		<system-settings :show="showSystemSettingsPage" @close="closeSystemSettings"></system-settings>
+		
+		<!-- 数据统计页面 -->
+		<data-statistics :show="showDataStatisticsPage" @close="closeDataStatistics"></data-statistics>
+		
+		<!-- 客户管理页面 -->
+		<customer-management :show="showCustomerManagementPage" @close="closeCustomerManagement"></customer-management>
+		
+		<!-- 登录注册页面 -->
+		<login-register 
+			:show="showLoginPageFlag" 
+			@close="closeLoginPage"
+			@login-success="handleLoginSuccess"
+		></login-register>
+	</view>
+</template>
+
+<script>
+	import TrafficPurchase from './TrafficPurchase.vue';
+	import SupplyChainPurchase from './SupplyChainPurchase.vue';
+	import SystemSettings from './SystemSettings.vue';
+	import LoginRegister from './LoginRegister.vue';
+	import DataStatistics from './DataStatistics.vue';
+	import CustomerManagement from './CustomerManagement.vue';
+	import { hasValidToken, clearToken, redirectToLogin } from '../api/utils/auth';
+	import { request } from '../api/config';
+	
+	export default {
+		name: "SideMenu",
+		components: {
+			TrafficPurchase,
+			SupplyChainPurchase,
+			SystemSettings,
+			LoginRegister,
+			DataStatistics,
+			CustomerManagement
+		},
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				functionStatus: {
+					'autoLike': false,
+					'momentsSync': false,
+					'autoCustomerDev': false,
+					'groupMessageDeliver': false,
+					'autoGroup': false
+				},
+				showTrafficPage: false,
+				showSupplyChainPage: false,
+				showSystemSettingsPage: false,
+				showDataStatisticsPage: false,
+				showCustomerManagementPage: false,
+				showLoginPageFlag: false,
+				isLoggedIn: false, // 用户登录状态
+				userInfo: null // 用户信息
+			}
+		},
+		watch: {
+			// 侧边栏显示时检查登录状态
+			show(newVal) {
+				if (newVal) {
+					this.checkLoginStatus();
+				}
+			}
+		},
+		onShow() {
+			// 获取用户登录状态
+			this.checkLoginStatus();
+			// 获取功能开关状态
+			this.getFunctionStatus();
+		},
+		created() {
+			// 获取用户登录状态
+			this.checkLoginStatus();
+			// 获取功能开关状态
+			this.getFunctionStatus();
+		},
+		methods: {
+			// 检查登录状态
+			checkLoginStatus() {
+				// 使用token判断登录状态
+				this.isLoggedIn = hasValidToken();
+				
+				// 如果已登录，尝试获取用户信息
+				if (this.isLoggedIn) {
+					try {
+						const memberStr = uni.getStorageSync('member');
+						if (memberStr) {
+							this.userInfo = JSON.parse(memberStr);
+						}
+					} catch (e) {
+						console.error('获取用户信息失败', e);
+						this.userInfo = null;
+					}
+				} else {
+					this.userInfo = null;
+				}
+
+				console.log(this.userInfo);
+			},
+			
+			// 退出登录
+			logout() {
+				// 清除token和用户信息
+				clearToken();
+				
+				// 清除旧的userInfo（兼容）
+				try {
+					uni.removeStorageSync('userInfo');
+				} catch(e) {
+					console.error('清除用户信息失败', e);
+				}
+				
+				// 重置登录状态
+				this.userInfo = null;
+				this.isLoggedIn = false;
+				
+				// 关闭侧边栏
+				this.closeSideMenu();
+				
+				// 提示退出成功
+				uni.showToast({
+					title: '已退出登录',
+					icon: 'success',
+					duration: 1500
+				});
+				
+				// 跳转到登录页
+				setTimeout(() => {
+					redirectToLogin();
+				}, 1000);
+			},
+			closeSideMenu() {
+				this.$emit('close');
+			},
+			// 获取功能开关状态
+			async getFunctionStatus() {
+				try {
+					const res = await request({
+						url: '/v1/store/system-config/switch-status',
+						method: 'GET'
+					});
+					
+					if (res.code === 200 && res.data) {
+						// 更新功能状态
+						this.functionStatus = {
+							'autoLike': res.data.autoLike || false,
+							'momentsSync': res.data.momentsSync || false,
+							'autoCustomerDev': res.data.autoCustomerDev || false,
+							'groupMessageDeliver': res.data.groupMessageDeliver || false,
+							'autoGroup': res.data.autoGroup || false
+						};
+						
+						console.log('功能状态已更新:', this.functionStatus);
+					} else {
+						console.error('获取功能状态失败:', res.msg);
+					}
+				} catch (err) {
+					console.error('获取功能状态异常:', err);
+				}
+			},
+			handleFunctionClick(name) {
+				// 切换功能状态
+				this.functionStatus[name] = !this.functionStatus[name];
+				
+				// 显示提示的中文名称映射
+				const nameMap = {
+					'autoLike': '自动点赞',
+					'momentsSync': '朋友圈同步',
+					'autoCustomerDev': '自动开发客户',
+					'groupMessageDeliver': '群消息推送',
+					'autoGroup': '自动建群'
+				};
+				
+			
+				
+				// 准备更新状态
+				const newStatus = this.functionStatus[name];
+				
+				// 调用接口更新状态
+				request({
+					url: '/v1/store/system-config/update-switch-status',
+					method: 'POST',
+					data: {
+						switchName: name,
+					}
+				}).then(res => {
+					if (res.code === 200) {
+						// 更新本地状态
+						this.functionStatus[name] = newStatus;
+						
+						// 显示提示
+						uni.showToast({
+							title: newStatus ? `${nameMap[name]}已启用` : `${nameMap[name]}已禁用`,
+							icon: 'none'
+						});
+						
+						// 重新获取所有功能状态
+						this.getFunctionStatus();
+					} else {
+						// 显示错误提示
+						uni.showToast({
+							title: res.msg || '操作失败',
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					console.error('更新功能状态失败:', err);
+					uni.showToast({
+						title: '网络异常，请稍后重试',
+						icon: 'none'
+					});
+				});
+			},
+			handleModuleClick(name) {
+				if (name === '供应链采购') {
+					this.showSupplyChainPage = true;
+				} else if (name === '数据统计') {
+					this.showDataStatistics();
+				} else if (name === '客户管理') {
+					this.showCustomerManagement();
+				} else {
+					uni.showToast({
+						title: `访问${name}`,
+						icon: 'none'
+					});
+				}
+			},
+			showTrafficPurchase() {
+				// 显示流量采购页面
+				this.showTrafficPage = true;
+			},
+			closeTrafficPurchase() {
+				// 只关闭流量采购页面，保持侧边菜单打开
+				this.showTrafficPage = false;
+			},
+			showSupplyChainPurchase() {
+				// 显示供应链采购页面
+				this.showSupplyChainPage = true;
+			},
+			closeSupplyChainPurchase() {
+				// 只关闭供应链采购页面，保持侧边菜单打开
+				this.showSupplyChainPage = false;
+			},
+			showSystemSettings() {
+				// 显示系统设置页面
+				this.showSystemSettingsPage = true;
+			},
+			closeSystemSettings() {
+				// 关闭系统设置页面
+				this.showSystemSettingsPage = false;
+			},
+			showDataStatistics() {
+				// 显示数据统计页面
+				this.showDataStatisticsPage = true;
+			},
+			closeDataStatistics() {
+				// 关闭数据统计页面
+				this.showDataStatisticsPage = false;
+			},
+			showCustomerManagement() {
+				// 显示客户管理页面
+				this.showCustomerManagementPage = true;
+			},
+			closeCustomerManagement() {
+				// 关闭客户管理页面
+				this.showCustomerManagementPage = false;
+			},
+			showLoginPage() {
+				// 关闭侧边菜单
+				this.closeSideMenu();
+				
+				// 跳转到登录页面
+				redirectToLogin();
+			},
+			closeLoginPage() {
+				// 关闭登录/注册页面
+				this.showLoginPageFlag = false;
+			},
+			handleLoginSuccess(userInfo) {
+				// 处理登录成功事件
+				this.isLoggedIn = true;
+				this.userInfo = userInfo;
+				uni.showToast({
+					title: '登录成功',
+					icon: 'success'
+				});
+			},
+			handleLogin() {
+				// 修改原有方法，调用显示登录页面
+				this.showLoginPage();
+			},
+			goToUserCenter() {
+				// 跳转到用户中心页面
+				uni.navigateTo({
+					url: '/pages/login/user'
+				});
+				
+				// 关闭侧边栏
+				this.closeSideMenu();
+			},
+			showSettings() {
+				// 显示系统设置页面
+				this.showSystemSettingsPage = true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.side-menu-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 9999;
+	}
+	
+	.side-menu-mask {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1;
+	}
+	
+	.side-menu {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #fff;
+		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		animation: slideIn 0.3s ease;
+		overflow-y: auto;
+		transition: transform 0.3s ease;
+	}
+	
+	@keyframes slideIn {
+		from {
+			transform: translateX(-100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	
+	.side-menu-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20px 15px;
+		border-bottom: 1px solid #f5f5f5;
+	}
+	
+	.side-menu-title {
+		font-size: 18px;
+		font-weight: 500;
+	}
+	
+	.close-icon {
+		font-size: 24px;
+		color: #666;
+		padding: 0 10px;
+	}
+	
+	.function-module {
+		padding: 15px;
+	}
+	
+	.function-grid {
+		display: flex;
+		flex-direction: column;
+		margin: 0 -5px;
+	}
+	
+	.function-row {
+		display: flex;
+		width: 100%;
+		margin-bottom: 10px;
+	}
+	
+	.function-item {
+		flex: 1;
+		margin: 0 5px;
+		border-radius: 10px;
+		padding: 15px 12px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		box-sizing: border-box;
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+		border: 1px solid rgba(0, 0, 0, 0.05);
+	}
+	
+	.function-icon {
+		font-size: 24px;
+		margin-bottom: 8px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.iconfont.function-icon {
+		font-size: 28px;
+		color: inherit;
+		height: 28px;
+		width: 28px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.function-name {
+		font-size: 12px;
+		color: #333;
+		margin-bottom: 5px;
+		font-weight: 500;
+	}
+	
+	.function-status {
+		font-size: 12px;
+		color: #666;
+		padding: 2px 0;
+	}
+	
+	.function-item-disabled {
+		opacity: 0.7;
+		background-color: #f5f5f5 !important;
+	}
+	
+	.pink {
+		background-color: #ffecf1;
+	}
+	
+	.purple {
+		background-color: #f5ecff;
+	}
+	
+	.green {
+		background-color: #e5fff2;
+	}
+	
+	.orange {
+		background-color: #fff7ec;
+	}
+	
+	.blue {
+		background-color: #ecf5ff;
+	}
+	
+	.yellow {
+		background-color: #fffcec;
+	}
+	
+	.gray {
+		background-color: #f5f5f5;
+	}
+	
+	.module-section {
+		padding: 10px 15px;
+	}
+	
+	.module-title {
+		font-size: 16px;
+		font-weight: 500;
+		margin-bottom: 10px;
+	}
+	
+	.module-list {
+		border-radius: 10px;
+		background-color: #fff;
+		overflow: hidden;
+		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+	}
+	
+	.module-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 15px;
+		border-bottom: 1px solid #f5f5f5;
+	}
+	
+	.module-item:last-child {
+		border-bottom: none;
+	}
+	
+	.module-left {
+		display: flex;
+		align-items: center;
+	}
+	
+	.module-icon {
+		width: 40px;
+		height: 40px;
+		border-radius: 8px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 10px;
+		font-size: 20px;
+	}
+	
+	.module-info {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.module-name {
+		font-size: 16px;
+		color: #333;
+		margin-bottom: 3px;
+	}
+	
+	.module-desc {
+		font-size: 12px;
+		color: #999;
+	}
+	
+	.bottom-button {
+		margin-top: auto;
+		margin: 20px 15px;
+		padding: 12px 0;
+		border-radius: 5px;
+		background-color: #fff;
+		border: 1px solid #e5e5e5;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.login-icon {
+		font-size: 16px;
+		margin-right: 5px;
+	}
+	
+	.login-text {
+		font-size: 15px;
+		color: #333;
+	}
+	
+	.user-info {
+		display: flex;
+		align-items: center;
+		padding: 15px;
+		border-bottom: 1px solid #f5f5f5;
+	}
+	
+	.avatar {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		margin-right: 10px;
+	}
+	
+	.user-details {
+		flex: 1;
+	}
+	
+	.nickname {
+		font-size: 16px;
+		color: #333;
+		margin-bottom: 5px;
+	}
+	
+	.member-info {
+		font-size: 12px;
+		color: #999;
+	}
+	
+	.level-tag {
+		padding: 2px 5px;
+		border-radius: 5px;
+		background-color: #e5e5e5;
+		margin-right: 5px;
+	}
+	
+	.vip {
+		background-color: #ffd700;
+	}
+	
+	.points {
+		font-size: 12px;
+		color: #999;
+	}
+	
+	.not-logged-in {
+		padding: 15px;
+		border-bottom: 1px solid #f5f5f5;
+	}
+	
+	.login-tip {
+		font-size: 12px;
+		color: #999;
+	}
+</style> 

Store_vue/components/SupplyChainPurchase.vue

@@ -0,0 +1,424 @@
+<template>
+	<view class="supply-chain-wrapper">
+		<view v-if="show" class="supply-chain-container" style="margin-top: var(--status-bar-height);">
+			<!-- 头部 -->
+			<view class="header">
+				<view class="back-icon" @tap="closePage">
+					<u-icon name="arrow-left" color="#333" size="26"></u-icon>
+				</view>
+				<view class="title">供应链采购</view>
+				<view class="close-icon" @tap="closePage">
+					<u-icon name="close" color="#333" size="24"></u-icon>
+				</view>
+			</view>
+			
+			<!-- 套餐卡片区域 -->
+			<view class="package-list">
+				<view 
+					v-for="item in packages" 
+					:key="item.id" 
+					class="package-card"
+					@tap="openPackageDetail(item)"
+				>
+					<view class="package-content">
+						<view class="cart-icon">
+							<text class="cart-text">
+                            <u-icon name="shopping-cart" size='35px' color='#CA8A04'></u-icon>
+                            </text>
+						</view>
+						<view class="package-info">
+							<view class="package-name">
+								{{item.name}}
+								<text v-if="item.specialTag" class="special-tag">{{item.specialTag}}</text>
+							</view>
+							<view class="package-price">
+								<text class="price-value">¥{{item.price}}</text>
+								<text class="original-price" v-if="item.originalPrice !== item.price">¥{{item.originalPrice}}</text>
+							</view>
+							<view class="advance-payment" v-if="item.advancePayment">预付款: ¥{{item.advancePayment}}</view>
+						</view>
+						<view class="discount-tag" v-if="item.discount">{{item.discount}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 套餐详情页面 -->
+		<supply-item-detail 
+			:show="showPackageDetail" 
+			:package-data="currentPackage" 
+			@close="closePackageDetail"
+		></supply-item-detail>
+	</view>
+</template>
+
+<script>
+	import SupplyItemDetail from './SupplyItemDetail.vue';
+	
+	export default {
+		name: 'SupplyChainPurchase',
+		components: {
+			'supply-item-detail': SupplyItemDetail
+		},
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				// 套餐数据
+				packages: [
+					{
+						id: 1,
+						name: '基础套餐',
+						price: '2980',
+						originalPrice: '3725',
+						discount: '8折',
+						specialTag: '',
+						advancePayment: '745',
+						services: [
+							{
+								name: '头部护理SPA',
+								price: '598',
+								originalPrice: '718',
+								duration: '60分钟',
+								image: '/static/spa1.png'
+							},
+							{
+								name: '臂油SPA',
+								price: '618',
+								originalPrice: '838',
+								duration: '90分钟',
+								image: '/static/spa2.png'
+							},
+							{
+								name: '法/LAWF型颜度护理',
+								price: '1580',
+								originalPrice: '1896',
+								duration: '120分钟',
+								image: '/static/spa3.png'
+							}
+						],
+						details: [
+							{ label: '采购额度', value: '3000元' },
+							{ label: '套餐时长', value: '30天' },
+							{ label: '采购种类', value: '标准品类' }
+						],
+						privileges: [
+							'标准采购价格',
+							'7天内发货',
+							'基础供应商渠道'
+						]
+					},
+					{
+						id: 2,
+						name: '进级套餐',
+						price: '6980',
+						originalPrice: '9971',
+						discount: '7折',
+						specialTag: '',
+						advancePayment: '',
+						services: [
+							{
+								name: '进阶头部护理SPA',
+								price: '898',
+								originalPrice: '1218',
+								duration: '90分钟',
+								image: '/static/spa1.png'
+							},
+							{
+								name: '全身SPA',
+								price: '1618',
+								originalPrice: '2138',
+								duration: '120分钟',
+								image: '/static/spa2.png'
+							},
+							{
+								name: '高级LAWF型颜度护理',
+								price: '2880',
+								originalPrice: '3596',
+								duration: '150分钟',
+								image: '/static/spa3.png'
+							},
+							{
+								name: '肌肤管理',
+								price: '1290',
+								originalPrice: '1590',
+								duration: '60分钟',
+								image: '/static/spa4.png'
+							}
+						],
+						details: [
+							{ label: '采购额度', value: '7000元' },
+							{ label: '套餐时长', value: '30天' },
+							{ label: '采购种类', value: '全部品类' }
+						],
+						privileges: [
+							'优惠采购价格',
+							'3天内发货',
+							'优质供应商渠道',
+							'专属采购顾问'
+						]
+					},
+					{
+						id: 3,
+						name: '尊享套餐',
+						price: '19800',
+						originalPrice: '33000',
+						discount: '6折',
+						specialTag: '品优惠',
+						advancePayment: '',
+						services: [
+							{
+								name: '尊享头部护理SPA',
+								price: '1298',
+								originalPrice: '1818',
+								duration: '120分钟',
+								image: '/static/spa1.png'
+							},
+							{
+								name: '尊享全身SPA',
+								price: '2618',
+								originalPrice: '3738',
+								duration: '180分钟',
+								image: '/static/spa2.png'
+							},
+							{
+								name: '奢华LAWF型颜度护理',
+								price: '4880',
+								originalPrice: '6996',
+								duration: '210分钟',
+								image: '/static/spa3.png'
+							},
+							{
+								name: '尊享肌肤管理',
+								price: '2490',
+								originalPrice: '3290',
+								duration: '90分钟',
+								image: '/static/spa4.png'
+							},
+							{
+								name: '私人定制美容方案',
+								price: '5990',
+								originalPrice: '8990',
+								duration: '全天候',
+								image: '/static/spa5.png'
+							}
+						],
+						details: [
+							{ label: '采购额度', value: '20000元' },
+							{ label: '套餐时长', value: '30天' },
+							{ label: '采购种类', value: '全部品类(含限定)' }
+						],
+						privileges: [
+							'最优采购价格',
+							'24小时内发货',
+							'顶级供应商渠道',
+							'一对一专属顾问',
+							'供应链优化方案',
+							'库存管理系统'
+						]
+					}
+				],
+				// 套餐详情页面
+				showPackageDetail: false,
+				// 当前选中的套餐
+				currentPackage: null
+			}
+		},
+		methods: {
+			closePage() {
+				this.$emit('close');
+			},
+			// 打开套餐详情
+			openPackageDetail(packageData) {
+				this.currentPackage = packageData;
+				this.showPackageDetail = true;
+			},
+			// 关闭套餐详情
+			closePackageDetail() {
+				this.showPackageDetail = false;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.supply-chain-container {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #fff;
+		z-index: 10000;
+		overflow-y: auto;
+		transform-origin: right;
+		animation: slideInFromRight 0.3s ease;
+	}
+	
+	@keyframes slideInFromRight {
+		from {
+			transform: translateX(100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 15px;
+		background-color: #fff;
+		border-bottom: 1px solid #eee;
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+	
+	.back-icon {
+		width: 60px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.title {
+		font-size: 17px;
+		font-weight: 500;
+		flex: 1;
+		text-align: center;
+	}
+	
+	.close-icon {
+		width: 60px;
+		display: flex;
+		justify-content: flex-end;
+	}
+	
+	.package-list {
+		padding: 15px;
+	}
+	
+	.package-card {
+		margin-bottom: 15px;
+		background-color: #fff;
+		border-radius: 12px;
+		overflow: hidden;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+		border: 1px solid #FFEDA0;
+	}
+
+	.package-card:hover {
+		background-color: #FFFEF0;
+	}
+
+	
+	.package-content {
+		padding: 18px 15px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		position: relative;
+	}
+
+
+	
+	.cart-icon {
+		position: relative;
+		left: 0;
+		top: 0;
+		width: 50px;
+		height: 50px;
+		background-color: #FFFDD0;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 15px;
+	}
+	
+	.cart-text {
+		font-size: 20px;
+		color: #E8A317;
+	}
+	
+	.package-info {
+		flex: 1;
+		padding-left: 0;
+		margin-right: 45px;
+	}
+	
+	.package-name {
+		font-size: 16px;
+		font-weight: 500;
+		color: #333;
+		margin-bottom: 5px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.package-price {
+		display: flex;
+		align-items: baseline;
+		margin-bottom: 5px;
+	}
+	
+	.price-value {
+		font-size: 22px;
+		font-weight: bold;
+		color: #E8A317;
+	}
+	
+	.original-price {
+		font-size: 15px;
+		color: #999;
+		text-decoration: line-through;
+		margin-left: 8px;
+	}
+	
+	.advance-payment {
+		font-size: 14px;
+		color: #666;
+		margin-top: 5px;
+	}
+	
+	.discount-tag {
+		position: absolute;
+		right: 15px;
+		top: 50%;
+		transform: translateY(-50%);
+		padding:0 20px;
+		height: 30px;
+		background-color: #FFE55A;
+		color: #c35300;
+		border-radius: 30px;
+		font-size: 16px;
+		font-weight: 500;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.special-tag {
+		position: relative;
+		display: inline-block;
+		margin-left: 8px;
+		padding: 2px 6px;
+		background-color: #FFDF32;
+		color: #333;
+		border-radius: 4px;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 1;
+	}
+	
+	.supply-chain-wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+</style> 

Store_vue/components/SupplyItemDetail.vue

@@ -0,0 +1,368 @@
+<template>
+	<view class="supply-detail-wrapper">
+		<view v-if="show" class="supply-detail-container" style="margin-top: var(--status-bar-height);">
+			<!-- 头部 -->
+			<view class="header">
+				<view class="back-icon" @tap="closePage">
+					<u-icon name="arrow-left" color="#333" size="26"></u-icon>
+				</view>
+				<view class="title">{{packageData.name}}</view>
+				<view class="close-icon" @tap="closePage">
+					<u-icon name="close" color="#333" size="24"></u-icon>
+				</view>
+			</view>
+			
+			<!-- 套餐价格信息 -->
+			<view class="price-card">
+				<view class="price-title">套餐价格</view>
+				<view class="price-info">
+					<view class="current-price">
+						<text class="price-symbol">¥</text>
+						<text class="price-value">{{packageData.price}}</text>
+					</view>
+					<view class="original-price" v-if="packageData.originalPrice !== packageData.price">¥{{packageData.originalPrice}}</view>
+				</view>
+				<view class="advance-info" v-if="packageData.advancePayment">
+					预付款: ¥{{packageData.advancePayment}}
+				</view>
+			</view>
+			
+			<!-- 套餐内容 -->
+			<view class="service-section">
+				<view class="section-title">套餐内容</view>
+				<view class="service-count">共{{packageData.services ? packageData.services.length : 0}}服务</view>
+				
+				<!-- 服务列表 -->
+				<view class="service-list">
+					<view 
+						v-for="(service, index) in packageData.services" 
+						:key="index"
+						class="service-item"
+					>
+						<view class="service-left">
+							<view class="service-icon">
+								<u-icon name="heart" color="#FF6600" size="24"></u-icon>
+							</view>
+						</view>
+						<view class="service-right">
+							<view class="service-name">{{service.name}}</view>
+							<view class="service-price">
+								<text class="price-symbol">¥</text>
+								<text class="service-price-value">{{service.price}}</text>
+								<text class="service-original-price" v-if="service.originalPrice">¥{{service.originalPrice}}</text>
+							</view>
+							<view class="service-duration">{{service.duration}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 购买按钮 -->
+			<view class="buy-button-container">
+				<button class="buy-button" @tap="handleBuy">立即购买</button>
+			</view>
+			
+			<!-- 购买说明 -->
+			<view class="buy-notice">
+				<text class="notice-text">订单将由操作人处理，详情请联系客服</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'SupplyItemDetail',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			packageData: {
+				type: Object,
+				default: () => ({
+					id: 1,
+					name: '基础套餐',
+					price: '2980',
+					originalPrice: '3725',
+					advancePayment: '745',
+					discount: '8折',
+					services: [
+						{
+							name: '头部护理SPA',
+							price: '598',
+							originalPrice: '718',
+							duration: '60分钟',
+							image: '/static/spa1.png'
+						},
+						{
+							name: '臂油SPA',
+							price: '618',
+							originalPrice: '838',
+							duration: '90分钟',
+							image: '/static/spa2.png'
+						},
+						{
+							name: '法/LAWF型颜度护理',
+							price: '1580',
+							originalPrice: '1896',
+							duration: '120分钟',
+							image: '/static/spa3.png'
+						}
+					]
+				})
+			}
+		},
+		methods: {
+			closePage() {
+				this.$emit('close');
+			},
+			handleBuy() {
+				uni.showLoading({
+					title: '处理中...'
+				});
+				
+				// 模拟购买流程
+				setTimeout(() => {
+					uni.hideLoading();
+					uni.showToast({
+						title: '购买成功',
+						icon: 'success'
+					});
+					
+					// 延迟关闭页面
+					setTimeout(() => {
+						this.closePage();
+					}, 1500);
+				}, 2000);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.supply-detail-container {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #f5f7fa;
+		z-index: 10000;
+		overflow-y: auto;
+		transform-origin: right;
+		animation: slideInFromRight 0.3s ease;
+	}
+	
+	@keyframes slideInFromRight {
+		from {
+			transform: translateX(100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 15px;
+		background-color: #fff;
+		border-bottom: 1px solid #eee;
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+	
+	.back-icon {
+		width: 60px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.title {
+		font-size: 17px;
+		font-weight: 500;
+		flex: 1;
+		text-align: center;
+	}
+	
+	.close-icon {
+		width: 60px;
+		display: flex;
+		justify-content: flex-end;
+	}
+	
+	.price-card {
+		margin: 15px;
+		padding: 15px;
+		background-color: #FFFBE6;
+		border-radius: 10px;
+	}
+	
+	.price-title {
+		font-size: 14px;
+		color: #333;
+		margin-bottom: 10px;
+	}
+	
+	.price-info {
+		display: flex;
+		align-items: baseline;
+	}
+	
+	.current-price {
+		display: flex;
+		align-items: baseline;
+	}
+	
+	.price-symbol {
+		font-size: 16px;
+		font-weight: bold;
+		color: #FF6600;
+	}
+	
+	.price-value {
+		font-size: 28px;
+		font-weight: bold;
+		color: #FF6600;
+	}
+	
+	.original-price {
+		margin-left: 10px;
+		font-size: 16px;
+		color: #999;
+		text-decoration: line-through;
+	}
+	
+	.advance-info {
+		margin-top: 8px;
+		font-size: 14px;
+		color: #666;
+	}
+	
+	.service-section {
+		margin: 15px;
+		background-color: #fff;
+		border-radius: 10px;
+		overflow: hidden;
+	}
+	
+	.section-title {
+		padding: 15px;
+		border-bottom: 1px solid #f5f5f5;
+		font-size: 16px;
+		font-weight: 500;
+	}
+	
+	.service-count {
+		position: absolute;
+		right: 30px;
+		top: 15px;
+		font-size: 12px;
+		color: #666;
+		background-color: #f5f5f5;
+		padding: 2px 8px;
+		border-radius: 10px;
+	}
+	
+	.service-list {
+		padding: 0 15px;
+	}
+	
+	.service-item {
+		display: flex;
+		padding: 15px 0;
+		border-bottom: 1px solid #f5f5f5;
+	}
+	
+	.service-item:last-child {
+		border-bottom: none;
+	}
+	
+	.service-left {
+		width: 60px;
+		height: 60px;
+		border-radius: 8px;
+		overflow: hidden;
+		margin-right: 15px;
+		background-color: #f5f5f5;
+	}
+	
+	.service-icon {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.service-right {
+		flex: 1;
+	}
+	
+	.service-name {
+		font-size: 15px;
+		font-weight: 500;
+		color: #333;
+		margin-bottom: 5px;
+	}
+	
+	.service-price {
+		display: flex;
+		align-items: baseline;
+		margin-bottom: 5px;
+	}
+	
+	.service-price-value {
+		font-size: 16px;
+		font-weight: bold;
+		color: #FF6600;
+	}
+	
+	.service-original-price {
+		font-size: 14px;
+		color: #999;
+		text-decoration: line-through;
+		margin-left: 5px;
+	}
+	
+	.service-duration {
+		font-size: 12px;
+		color: #999;
+	}
+	
+	.buy-button-container {
+		margin: 20px 15px;
+	}
+	
+	.buy-button {
+		width: 100%;
+		height: 45px;
+		line-height: 45px;
+		text-align: center;
+		background-color: #FFBE00;
+		color: #ffffff;
+		font-size: 16px;
+		font-weight: 500;
+		border-radius: 25px;
+		border: none;
+	}
+	
+	.buy-notice {
+		text-align: center;
+		margin-bottom: 30px;
+	}
+	
+	.notice-text {
+		font-size: 12px;
+		color: #999;
+	}
+	
+	.supply-detail-wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+</style> 

Store_vue/components/SystemSettings.vue

@@ -0,0 +1,189 @@
+<template>
+	<view class="system-settings-wrapper">
+		<view v-if="show" class="system-settings-container" style="margin-top: var(--status-bar-height);">
+			<!-- 头部 -->
+			<view class="header">
+				<view class="back-icon" @tap="closePage">
+					<u-icon name="arrow-left" color="#333" size="26"></u-icon>
+				</view>
+				<view class="title">系统设置</view>
+				<view class="close-icon" @tap="closePage">
+					<u-icon name="close" color="#333" size="24"></u-icon>
+				</view>
+			</view>
+			
+			<!-- 设置区域 -->
+			<view class="settings-section">
+				<view class="section-card">
+					<u-cell-group :border="false">
+						<u-cell title="通知设置" :border-bottom="true" is-link @click="handleSettingTap('通知设置')"></u-cell>
+						<u-cell title="消息提醒" :border-bottom="true" is-link @click="handleSettingTap('消息提醒')"></u-cell>
+						<u-cell title="声音设置" :border-bottom="true" is-link @click="handleSettingTap('声音设置')"></u-cell>
+						<u-cell title="勿扰模式" :border-bottom="false" is-link @click="handleSettingTap('勿扰模式')"></u-cell>
+					</u-cell-group>
+				</view>
+				
+				<view class="section-card">
+					<u-cell-group :border="false">
+						<u-cell title="账号安全" :border-bottom="true" is-link @click="handleSettingTap('账号安全')"></u-cell>
+						<u-cell title="修改密码" :border-bottom="true" is-link @click="handleSettingTap('修改密码')"></u-cell>
+						<u-cell title="隐私设置" :border-bottom="true" is-link @click="handleSettingTap('隐私设置')"></u-cell>
+						<u-cell title="账号绑定" :border-bottom="false" is-link @click="handleSettingTap('账号绑定')"></u-cell>
+					</u-cell-group>
+				</view>
+				
+				<view class="section-card">
+					<u-cell-group :border="false">
+						<u-cell title="通用" :border-bottom="true" is-link @click="handleSettingTap('通用')"></u-cell>
+						<u-cell title="清除缓存" :border-bottom="true" is-link @click="handleSettingTap('清除缓存')"></u-cell>
+						<u-cell title="检查更新" :border-bottom="true" is-link @click="handleSettingTap('检查更新')"></u-cell>
+						<u-cell title="关于我们" :border-bottom="false" is-link @click="handleSettingTap('关于我们')"></u-cell>
+					</u-cell-group>
+				</view>
+			</view>
+			
+			<!-- 退出登录按钮 -->
+			<view class="logout-button-wrapper">
+				<u-button type="error" shape="circle" @click="handleLogout">退出登录</u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'SystemSettings',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			closePage() {
+				this.$emit('close');
+			},
+			handleSettingTap(setting) {
+				// 处理各个设置项的点击事件
+				uni.showToast({
+					title: `点击了${setting}`,
+					icon: 'none'
+				});
+			},
+			handleLogout() {
+				// 直接执行退出登录操作，不再使用Modal确认
+				
+				// 清除用户信息
+				try {
+					uni.removeStorageSync('userInfo');
+					console.log('用户信息已清除');
+				} catch(e) {
+					console.error('清除用户信息失败', e);
+				}
+				
+				// 关闭设置页面
+				this.closePage();
+				
+				// 提示退出成功
+				uni.showToast({
+					title: '已退出登录',
+					icon: 'success',
+					duration: 1500
+				});
+				
+				// 跳转到登录页
+				setTimeout(() => {
+					uni.reLaunch({
+						url: '/pages/login/index'
+					});
+				}, 1000);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.system-settings-container {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #f5f7fa;
+		z-index: 10000;
+		overflow-y: auto;
+		transform-origin: right;
+		animation: slideInFromRight 0.3s ease;
+	}
+	
+	@keyframes slideInFromRight {
+		from {
+			transform: translateX(100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 15px;
+		background-color: #fff;
+		border-bottom: 1px solid #eee;
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+	
+	.back-icon {
+		width: 60px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.title {
+		font-size: 17px;
+		font-weight: 500;
+		flex: 1;
+		text-align: center;
+	}
+	
+	.close-icon {
+		width: 60px;
+		display: flex;
+		justify-content: flex-end;
+	}
+	
+	.placeholder-icon {
+		width: 60px;
+	}
+	
+	.settings-section {
+		padding: 15px;
+	}
+	
+	.section-card {
+		background-color: #fff;
+		border-radius: 10px;
+		overflow: hidden;
+		margin-bottom: 15px;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+	}
+	
+	.logout-button-wrapper {
+		padding: 20px 30px;
+	}
+	
+	.system-settings-wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+</style> 

Store_vue/components/TrafficPurchase.vue

@@ -0,0 +1,631 @@
+<template>
+	<view class="traffic-purchase-wrapper">
+		<view v-if="show" class="traffic-purchase-container" style="margin-top: var(--status-bar-height);">
+			<!-- 头部 -->
+			<view class="header">
+				<view class="back-icon" @tap="closePage">
+					<u-icon name="arrow-left" color="#333" size="26"></u-icon>
+				</view>
+				<view class="title">流量采购</view>
+				<view class="close-icon" @tap="closePage">
+					<u-icon name="close" color="#333" size="24"></u-icon>
+				</view>
+			</view>
+			
+			<!-- 本月使用情况 -->
+			<view class="usage-card">
+				<view class="usage-title">本月流量使用情况
+					<text v-if="usageData.packageName" class="package-type">({{usageData.packageName}})</text>
+				</view>
+				
+				<!-- 使用情况加载中 -->
+				<view v-if="usageLoading" class="usage-loading">
+					<text>加载使用情况...</text>
+				</view>
+				
+				<!-- 使用情况错误 -->
+				<view v-else-if="usageError" class="usage-error">
+					<text>{{usageError}}</text>
+					<button class="retry-button-small" @tap="fetchRemainingFlow">刷新</button>
+				</view>
+				
+				<!-- 使用情况数据 -->
+				<template v-else>
+					<view class="usage-row">
+						<text>流量使用</text>
+						<text>{{usageData.totalFlow - usageData.remainingFlow}}/{{usageData.totalFlow}}人</text>
+					</view>
+					<view class="usage-progress">
+						<view class="progress-bar" :style="{width: usageData.flowPercentage + '%'}"></view>
+					</view>
+					<view class="usage-row">
+						<text>剩余有效期</text>
+						<text>{{usageData.remainingDays}}天</text>
+					</view>
+					<view class="usage-date">
+						<text>有效期: {{usageData.startTime}} ~ {{usageData.expireTime}}</text>
+					</view>
+				</template>
+			</view>
+			
+			<!-- 使用警告 -->
+			<view v-if="usageData.flowPercentage > 70 && !usageLoading && !usageError" class="warning-box">
+				<view class="warning-icon">
+					<text class="iconfont icon-warning" style="color: #fff; font-size: 14px;"></text>
+				</view>
+				<view class="warning-content">
+					<view class="warning-title">流量即将用完</view>
+					<view class="warning-text">本月流量仅剩{{usageData.remainingFlow}}人，建议购买流量包以保证业务连续性</view>
+				</view>
+			</view>
+			
+			<!-- 套餐选择 -->
+			<view class="section-title">选择流量套餐</view>
+			
+			<!-- 加载状态 -->
+			<view v-if="loading" class="loading-container">
+				<image src="/static/loading.gif" mode="aspectFit" class="loading-image"></image>
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<!-- 错误提示 -->
+			<view v-else-if="error" class="error-container">
+				<image src="/static/error.png" mode="aspectFit" class="error-image"></image>
+				<text class="error-text">{{error}}</text>
+				<button class="retry-button" @tap="fetchFlowPackages">重试</button>
+			</view>
+			
+			<!-- 使用v-for循环渲染流量包 -->
+			<view 
+				v-else
+				v-for="item in packages" 
+				:key="item.id" 
+				class="package-card"
+				@tap="openPackageDetail(item)"
+			>
+				<view class="package-header">
+					<view class="package-left">
+						<view class="package-icon" :style="{backgroundColor: item.iconColor}">
+							<text class="iconfont" :class="item.iconClass" style="color: #0080ff; font-size: 24px;"></text>
+						</view>
+						<view class="package-info">
+							<view class="package-name">
+								{{item.name}}
+								<text v-if="item.specialTag" class="special-tag">{{item.specialTag}}</text>
+							</view>
+							<view class="package-price">
+								<text class="current-price">¥{{item.price}}</text>
+								<text class="original-price" v-if="item.originalPrice !== item.price">¥{{item.originalPrice}}</text>
+							</view>
+							<view class="package-specs">{{item.specs}}</view>
+						</view>
+					</view>
+					<view class="discount-tag">{{item.discount}}</view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 流量包详情页面 -->
+		<package-detail 
+			:show="showPackageDetail" 
+			:package-data="currentPackage" 
+			@close="closePackageDetail"
+			@buy-success="handleBuySuccess"
+		></package-detail>
+	</view>
+</template>
+
+<script>
+	import PackageDetail from './PackageDetail.vue';
+	import { trafficApi } from '../api/modules/traffic';
+	
+	export default {
+		name: 'TrafficPurchase',
+		components: {
+			'package-detail': PackageDetail
+		},
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				// 流量包数据
+				packages: [],
+				// 流量包详情页面
+				showPackageDetail: false,
+				// 当前选中的流量包
+				currentPackage: null,
+				// 加载状态
+				loading: false,
+				// 错误信息
+				error: null,
+				// 本月使用情况数据
+				usageData: {
+					packageName: '',
+					remainingFlow: 0,
+					totalFlow: 0,
+					flowPercentage: 0,
+					remainingDays: 0,
+					totalDays: 0,
+					timePercentage: 0,
+					expireTime: '',
+					startTime: ''
+				},
+				// 本月使用情况加载状态
+				usageLoading: false,
+				// 本月使用情况错误信息
+				usageError: null
+			}
+		},
+		watch: {
+			show(newVal) {
+				if (newVal) {
+					this.fetchFlowPackages();
+					this.fetchRemainingFlow();
+				}
+			}
+		},
+		methods: {
+			closePage() {
+				this.$emit('close');
+			},
+			// 打开流量包详情
+			openPackageDetail(packageData) {
+				this.currentPackage = packageData;
+				this.showPackageDetail = true;
+			},
+			// 关闭流量包详情
+			closePackageDetail() {
+				this.showPackageDetail = false;
+			},
+			// 获取流量包数据
+			async fetchFlowPackages() {
+				if (this.loading) return;
+				
+				this.loading = true;
+				this.error = null;
+				
+				uni.showLoading({
+					title: '加载中...',
+					mask: true
+				});
+				
+				try {
+					const response = await trafficApi.getFlowPackages();
+					
+					if (response.code === 200) {
+						// 处理返回的数据
+						this.packages = response.data.map(item => ({
+							id: item.id,
+							name: item.name,
+							price: parseFloat(item.price),
+							originalPrice: parseFloat(item.originalPrice),
+							specs: `${item.monthlyFlow}人/月·${item.duration}个月`,
+							iconClass: this.getIconClass(item.tag),
+							iconColor: '#ecf5ff',
+							discount: item.discount,
+							specialTag: item.tag,
+							details: [
+								{ label: '每月流量', value: `${item.monthlyFlow}人/月` },
+								{ label: '套餐时长', value: `${item.duration}个月` },
+								{ label: '总流量', value: `${item.totalFlow}人` }
+							],
+							privileges: item.privileges
+						}));
+					} else {
+						this.error = response.msg || '获取数据失败';
+					}
+				} catch (err) {
+					this.error = '获取流量包数据失败，请稍后重试';
+					console.error('获取流量包数据错误:', err);
+				} finally {
+					this.loading = false;
+					uni.hideLoading();
+				}
+			},
+			// 根据标签获取对应的图标类名
+			getIconClass(tag) {
+				const iconMap = {
+					'入门级': 'icon-shujutongji',
+					'热销': 'icon-shuju',
+					'尊享': 'icon-data'
+				};
+				return iconMap[tag] || 'icon-shujutongji';
+			},
+			// 获取本月流量使用情况
+			async fetchRemainingFlow() {
+				if (this.usageLoading) return;
+				
+				this.usageLoading = true;
+				this.usageError = null;
+				
+				try {
+					const response = await trafficApi.getRemainingFlow();
+					
+					if (response.code === 200) {
+						this.usageData = response.data;
+					} else {
+						this.usageError = response.msg || '获取使用情况失败';
+						console.error('获取使用情况失败:', response.msg);
+					}
+				} catch (err) {
+					this.usageError = '获取使用情况失败，请稍后重试';
+					console.error('获取使用情况错误:', err);
+				} finally {
+					this.usageLoading = false;
+				}
+			},
+			// 处理购买成功事件
+			handleBuySuccess() {
+				// 刷新流量使用情况和套餐列表
+				this.fetchRemainingFlow();
+				this.fetchFlowPackages();
+				
+				// 提示购买成功
+				uni.showToast({
+					title: '购买成功，流量已更新',
+					icon: 'success',
+					duration: 2000
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.traffic-purchase-container {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #f5f7fa;
+		z-index: 10000;
+		overflow-y: auto;
+		transform-origin: right;
+		animation: slideInFromRight 0.3s ease;
+	}
+	
+	@keyframes slideInFromRight {
+		from {
+			transform: translateX(100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 15px;
+		background-color: #fff;
+		border-bottom: 1px solid #eee;
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+	
+	.back-icon {
+		width: 60px;
+		font-size: 15px;
+		color: #333;
+	}
+	
+	.back-text {
+		font-weight: 500;
+	}
+	
+	.title {
+		font-size: 17px;
+		font-weight: 500;
+		flex: 1;
+		text-align: center;
+	}
+	
+	.close-icon {
+		width: 60px;
+		text-align: right;
+		display: flex;
+		justify-content: flex-end;
+		padding-right: 10px;
+	}
+	
+	.usage-card {
+		margin: 15px;
+		padding: 15px;
+		background-color: #ecf5ff;
+		border-radius: 10px;
+		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
+		border: 1px solid #d4e8ff;
+	}
+	
+	.usage-title {
+		font-size: 16px;
+		font-weight: 500;
+		margin-bottom: 15px;
+		
+		.package-type {
+			font-size: 14px;
+			color: #0080ff;
+			font-weight: normal;
+			margin-left: 5px;
+		}
+	}
+	
+	.usage-row {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 10px;
+		font-size: 14px;
+		color: #333;
+	}
+	
+	.usage-progress {
+		height: 10px;
+		background-color: #f0f0f0;
+		border-radius: 5px;
+		margin: 10px 0 15px;
+		overflow: hidden;
+	}
+	
+	.progress-bar {
+		height: 100%;
+		background-color: #0080ff;
+		border-radius: 5px;
+	}
+	
+	.warning-box {
+		margin: 15px;
+		padding: 12px 15px;
+		background-color: #fff9e6;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.warning-icon {
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background-color: #ff9900;
+		color: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 10px;
+		flex-shrink: 0;
+	}
+	
+	.warning-content {
+		flex: 1;
+	}
+	
+	.warning-title {
+		font-size: 14px;
+		font-weight: 500;
+		color: #ff9900;
+		margin-bottom: 5px;
+	}
+	
+	.warning-text {
+		font-size: 12px;
+		color: #666;
+		line-height: 1.5;
+	}
+	
+	.section-title {
+		margin: 20px 15px 10px;
+		font-size: 16px;
+		font-weight: 500;
+		color: #333;
+	}
+	
+	.package-card {
+		margin: 10px 15px;
+		background-color: #fff;
+		border-radius: 12px;
+		overflow: hidden;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+		border: 1px solid #e6f4ff;
+		position: relative;
+		transition: all 0.2s ease;
+	}
+	
+	.package-card:hover {
+		background-color: #f8faff;
+	}
+	
+	.package-header {
+		padding: 18px 15px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	
+	.package-left {
+		display: flex;
+		align-items: center;
+	}
+	
+	.package-icon {
+		width: 45px;
+		height: 45px;
+		background-color: #f0f7ff;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 12px;
+		font-size: 18px;
+	}
+	
+	.package-info {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.package-name {
+		font-size: 15px;
+		font-weight: 500;
+		color: #333;
+		margin-bottom: 4px;
+		display: flex;
+		align-items: center;
+	}
+	
+	.package-price {
+		display: flex;
+		align-items: baseline;
+		margin-bottom: 4px;
+	}
+	
+	.current-price {
+		font-size: 22px;
+		font-weight: bold;
+		color: #0080ff;
+	}
+	
+	.original-price {
+		font-size: 15px;
+		color: #999;
+		text-decoration: line-through;
+		margin-left: 8px;
+	}
+	
+	.package-specs {
+		font-size: 12px;
+		color: #666;
+	}
+	
+	.original-tag {
+		position: relative;
+		display: inline-block;
+		margin-left: 8px;
+		padding: 2px 6px;
+		background-color: #f5f5f5;
+		border-radius: 4px;
+		font-size: 14px;
+		color: #666;
+		font-weight: 500;
+	}
+	
+	.discount-tag {
+		position: absolute;
+		right: 15px;
+		top: 50%;
+		transform: translateY(-50%);
+		padding:0 20px;
+		height: 30px;
+		background-color: #e6f4ff;
+		color: #0080ff;
+		border-radius: 30px;
+		font-size: 16px;
+		font-weight: 500;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.special-tag {
+		background-color: #BFDBFE;
+		color: #3152B8;
+		padding: 2px 6px;
+		border-radius: 4px;
+		font-size: 12px;
+		font-weight: 500;
+		margin-left: 8px;
+	}
+	
+	.traffic-purchase-wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+	
+	.loading-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 40rpx 0;
+		
+		.loading-image {
+			width: 60rpx;
+			height: 60rpx;
+		}
+		
+		.loading-text {
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			color: #666;
+		}
+	}
+	
+	.error-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 40rpx 0;
+		
+		.error-image {
+			width: 80rpx;
+			height: 80rpx;
+		}
+		
+		.error-text {
+			margin: 20rpx 0;
+			font-size: 28rpx;
+			color: #ff4d4f;
+		}
+		
+		.retry-button {
+			margin-top: 20rpx;
+			padding: 10rpx 30rpx;
+			font-size: 28rpx;
+			color: #fff;
+			background-color: #2979ff;
+			border-radius: 8rpx;
+		}
+	}
+	
+	.usage-loading {
+		text-align: center;
+		color: #666;
+		font-size: 14px;
+		margin-bottom: 10px;
+	}
+	
+	.usage-error {
+		text-align: center;
+		color: #ff4d4f;
+		font-size: 14px;
+		margin-bottom: 10px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	
+	.retry-button-small {
+		margin-top: 10px;
+		padding: 4px 15px;
+		font-size: 14px;
+		color: #fff;
+		background-color: #2979ff;
+		border-radius: 4px;
+		display: inline-block;
+		line-height: 1.5;
+	}
+	
+	.usage-date {
+		font-size: 12px;
+		color: #666;
+		margin-top: 10px;
+		text-align: right;
+	}
+</style> 

Store_vue/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

Store_vue/main.js

@@ -0,0 +1,29 @@
+import App from './App'
+
+// #ifndef VUE3
+import Vue from 'vue'
+import './uni.promisify.adaptor'
+// 引入uView
+import uView from 'uview-ui'
+Vue.use(uView)
+Vue.config.productionTip = false
+App.mpType = 'app'
+const app = new Vue({
+  ...App
+})
+app.$mount()
+// #endif
+
+// #ifdef VUE3
+import { createSSRApp } from 'vue'
+export function createApp() {
+  const app = createSSRApp(App)
+  // 引入uView
+  import('uview-ui').then(module => {
+    app.use(module.default)
+  })
+  return {
+    app
+  }
+}
+// #endif

Store_vue/manifest.json

@@ -0,0 +1,106 @@
+{
+    "name" : "store",
+    "appid" : "__UNI__9421F6C",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {
+                "dSYMs" : false
+            },
+            /* SDK配置 */
+            "sdkConfigs" : {},
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                },
+                "ios" : {
+                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/76x76.png",
+                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                    },
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    }
+                }
+            }
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "2"
+}

Store_vue/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "store",
+  "version": "1.0.0",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "uview-ui": "^2.0.38"
+  },
+  "devDependencies": {
+    "sass": "^1.86.0",
+    "sass-loader": "^10.5.2"
+  }
+}

Store_vue/pages.json

@@ -0,0 +1,27 @@
+{
+	"easycom": {
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+	},
+	"pages": [
+		{
+			"path": "pages/chat/index",
+			"style": {
+				"navigationBarTitleText": "美业AI助理",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/login/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "美业AI助理",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"uniIdRouter": {}
+}

Store_vue/pages/chat/index.vue

@@ -0,0 +1,854 @@
+<template>
+	<view class="chat-container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="title">美业AI助理</view>
+			<view class="header-right">
+				<text style="font-size: 16px;" @click='showMenu'>
+                    <u-icon name="list" color="#333" size="28"></u-icon>
+                </text>
+			</view>
+		</view>
+		
+		<!-- 引入侧边菜单组件 -->
+		<side-menu :show="menuVisible" @close="closeMenu"></side-menu>
+		
+		<!-- 搜索栏 -->
+		<view class="search-container" v-if="false">
+			<view class="search-input-wrapper">
+				<text class="iconfont search-icon">
+                <u-icon name="search"></u-icon>
+                </text>
+				<input
+					type="text"
+					v-model="searchText"
+					placeholder="搜索消息"
+					class="search-input"
+					@focus="onSearchFocus"
+				/>
+			</view>
+		</view>
+		
+		<!-- 消息区域 -->
+		<scroll-view 
+			scroll-y 
+			class="message-list"
+			:scroll-into-view="scrollIntoView"
+			:scroll-with-animation="true"
+			:scroll-top="scrollTop"
+			@scroll="onScroll"
+			scroll-anchoring
+			ref="messageList"
+		>
+			<view 
+				v-for="(message, index) in messages" 
+				:key="message.id"
+				:id="message.id"
+				:class="['message-item', message.type, showContent ? 'fade-in' : '', message.isImage ? 'image-message' : '']"
+			>
+				<view class="message-content">
+					<!-- 图片消息 -->
+					<image v-if="message.isImage" :src="message.imagePath" mode="widthFix" @tap="previewImage(message.imagePath)"></image>
+					<!-- 文本消息 -->
+					<view v-else class="text-content">
+						<text v-if="message.isThinking">{{ message.content.replace('...', '') }}</text>
+						<text v-else>{{ message.content }}</text>
+						<text v-if="message.isThinking" class="thinking-dots">...</text>
+					</view>
+				</view>
+				<view class="message-time">{{ message.time }}</view>
+			</view>
+		</scroll-view>
+		
+		<!-- 底部操作区域 -->
+		<view class="bottom-area safe-area-inset-bottom" style="border-top: 1px solid #e5e5e5;">
+			<!-- 底部按钮区域 -->
+			<view class="footer">
+				<!-- 艺施内容库按钮 - 动态样式 -->
+				<u-button 
+					:type="contentLibEnabled ? 'primary' : 'default'"
+					class="footer-btn"
+					:class="contentLibEnabled ? 'content-btn' : 'content-btn-off'"
+					:custom-style="{
+						height: '40px', 
+						padding: '0 12px', 
+						fontSize: '14px',
+						backgroundColor: contentLibEnabled ? '#0080FF' : '#fff',
+						color: contentLibEnabled ? '#fff' : '#333',
+                        border: '1px solid #e5e5e5',
+						borderColor: contentLibEnabled ? '#0080FF' : '#e5e5e5'
+					}"
+					@click="toggleContentLib"
+				>
+					<view class="btn-content">
+						<text class="iconfont">
+                        	<u-icon name="file-text" size="24" color="{color: contentLibEnabled ? '#fff' : '#333'}"></u-icon>
+                        </text>
+						<text style="margin-left: 5px;">艺施内容库</text>
+					</view>
+				</u-button>
+				
+				<!-- 自动开发客户按钮 - 动态样式 -->
+				<u-button 
+					:type="autoCustomerEnabled ? 'primary' : 'default'"
+					class="footer-btn"
+					:class="autoCustomerEnabled ? 'auto-btn-on' : 'auto-btn'"
+					:custom-style="{
+						height: '40px', 
+						padding: '0 12px', 
+						fontSize: '14px',
+						backgroundColor: autoCustomerEnabled ? '#0080FF' : '#fff',
+						color: autoCustomerEnabled ? '#fff' : '#333',
+                        border: '1px solid #e5e5e5',
+						borderColor: autoCustomerEnabled ? '#0080FF' : '#e5e5e5'
+					}"
+					@click="toggleAutoCustomer"
+				>
+					<view class="btn-content">
+						<text class="iconfont" >
+                        	<u-icon name="account" size="24" :color="{color: autoCustomerEnabled ? '#fff' : '#333'}"></u-icon>
+                        </text>
+						<text style="margin-left: 5px;">自动开发客户</text>
+					</view>
+				</u-button>
+			</view>
+			
+			<!-- 输入框 -->
+			<view class="input-container">
+				<view class="input-wrapper" style="padding: 0;">
+					<!-- 输入框 -->
+					<u-input
+					style="padding: 0 15px;box-sizing: border-box;"
+						v-model="inputText"
+						type="text"
+						placeholder="发消息、输入@或/选择技能"
+						border="none"
+						:clearable="false"
+						@confirm="sendMessage"
+						height="44px"
+					>
+					</u-input>
+					
+					<!-- 发送按钮 -->
+					<view class="right-btn" style="padding: 0;">
+						<u-button style="width: 80px;height: 100%;" v-if="inputText.trim()" @click="sendMessage" text="发送" type="primary" size="larg" shape="circle"></u-button>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import SideMenu from '@/components/SideMenu.vue';
+	import { hasValidToken, redirectToLogin } from '@/api/utils/auth';
+	import { request } from '@/api/config';
+	
+	export default {
+		components: {
+			SideMenu
+		},
+		data() {
+			return {
+				searchText: '',
+				inputText: '',
+				scrollIntoView: '',
+				showContent: false,
+				contentLibEnabled: true,
+				autoCustomerEnabled: false,
+				scrollTop: 0,
+				menuVisible: false,
+				isRecording: false,
+				messages: [],
+				pageSize: 20,
+				currentPage: 1,
+				total: 0,
+				loading: false,
+				conversationId: '',
+				isLoadingMore: false,
+				hasMore: true,
+				lastScrollTime: 0,
+				scrollTimer: null
+			}
+		},
+		created() {
+			this.checkTokenStatus();
+			this.initMessages();
+		},
+		onShow() {
+			this.checkTokenStatus();
+			if (this.messages.length === 0) {
+				this.initMessages();
+			}
+		},
+		methods: {
+			checkTokenStatus() {
+				if (!hasValidToken()) {
+					console.log('Token无效，重定向到登录页面');
+					redirectToLogin();
+				}
+			},
+			async initMessages() {
+				try {
+					const res = await request({
+						url: '/v1/cozeai/message/list',
+						method: 'GET',
+						data: {
+							conversation_id: this.conversationId,
+							page: 1,
+							page_size: this.pageSize
+						}
+					});
+					
+					if (res.code === 200) {
+						this.messages = res.data.list || [];
+						this.total = res.data.total || 0;
+						this.conversationId = res.data.conversation_id;
+						this.hasMore = this.messages.length < this.total;
+						
+						this.$nextTick(() => {
+							this.scrollToBottom();
+						});
+					} else {
+						uni.showToast({
+							title: res.msg || '获取消息失败',
+							icon: 'none'
+						});
+					}
+				} catch (err) {
+					console.error('获取消息列表失败:', err);
+					uni.showToast({
+						title: '网络异常，请稍后重试',
+						icon: 'none'
+					});
+				}
+			},
+			async loadMoreMessages() {
+				if (this.isLoadingMore || !this.hasMore) return;
+				
+				this.isLoadingMore = true;
+				try {
+					const res = await request({
+						url: '/v1/cozeai/message/list',
+						method: 'GET',
+						data: {
+							conversation_id: this.conversationId,
+							page: this.currentPage + 1,
+							page_size: this.pageSize
+						}
+					});
+					
+					if (res.code === 200) {
+						const newMessages = res.data.list || [];
+						this.messages = [...newMessages, ...this.messages];
+						this.currentPage += 1;
+						this.hasMore = this.messages.length < this.total;
+						
+						this.$nextTick(() => {
+							const oldHeight = this.$refs.messageList.scrollHeight;
+							setTimeout(() => {
+								const newHeight = this.$refs.messageList.scrollHeight;
+								this.$refs.messageList.scrollTop = newHeight - oldHeight;
+							}, 0);
+						});
+					} else {
+						uni.showToast({
+							title: res.msg || '加载更多消息失败',
+							icon: 'none'
+						});
+					}
+				} catch (err) {
+					console.error('加载更多消息失败:', err);
+					uni.showToast({
+						title: '网络异常，请稍后重试',
+						icon: 'none'
+					});
+				} finally {
+					this.isLoadingMore = false;
+				}
+			},
+			onScroll(e) {
+				if (this.scrollTimer) {
+					clearTimeout(this.scrollTimer);
+				}
+				
+				this.scrollTimer = setTimeout(() => {
+					const currentTime = Date.now();
+					if (currentTime - this.lastScrollTime < 100) return;
+					
+					this.lastScrollTime = currentTime;
+					this.scrollTop = e.detail.scrollTop;
+					
+					if (this.scrollTop <= 50 && !this.isLoadingMore && this.hasMore) {
+						this.loadMoreMessages();
+					}
+				}, 100);
+			},
+			async sendMessage() {
+				if (!this.inputText.trim()) return;
+				
+				// 保存用户输入
+				const userInput = this.inputText;
+				
+				// 添加用户消息到列表
+				const userMsg = {
+					id: 'msg' + (this.messages.length + 1),
+					type: 'user',
+					content: userInput,
+					time: this.formatTime(new Date())
+				};
+				this.messages.push(userMsg);
+				
+				// 添加思考中的状态消息
+				const thinkingMsg = {
+					id: 'thinking_' + Date.now(),
+					type: 'assistant',
+					content: '正在思考中...',
+					time: this.formatTime(new Date()),
+					isThinking: true // 标记为思考状态
+				};
+				this.messages.push(thinkingMsg);
+				
+				// 清空输入框
+				this.inputText = '';
+				
+				// 立即滚动到底部
+				this.scrollToBottom();
+				
+				try {
+					// 调用发送消息接口
+					const res = await request({
+						url: '/v1/cozeai/conversation/createChat',
+						method: 'POST',
+						data: {
+							conversation_id: this.conversationId,
+							question: userInput
+						}
+					});
+					
+					if (res.code === 200) {
+						// 更新会话ID
+						if (res.data.conversation_id) {
+							this.conversationId = res.data.conversation_id;
+						}
+						
+						// 开始轮询获取结果
+						if (res.data.status === 'in_progress') {
+							this.pollMessageResult(res.data.id, thinkingMsg.id);
+						}
+					} else {
+						// 显示错误提示
+						uni.showToast({
+							title: res.msg || '发送失败',
+							icon: 'none'
+						});
+						// 移除思考中的消息
+						this.removeThinkingMessage(thinkingMsg.id);
+					}
+				} catch (err) {
+					console.error('发送消息失败:', err);
+					uni.showToast({
+						title: '网络异常，请稍后重试',
+						icon: 'none'
+					});
+					// 移除思考中的消息
+					this.removeThinkingMessage(thinkingMsg.id);
+				}
+			},
+			// 移除思考中的消息
+			removeThinkingMessage(thinkingId) {
+				const index = this.messages.findIndex(msg => msg.id === thinkingId);
+				if (index !== -1) {
+					this.messages.splice(index, 1);
+				}
+			},
+			// 更新轮询方法
+			async pollMessageResult(messageId, thinkingId) {
+				let retryCount = 0;
+				const maxRetries = 30;
+				const interval = 1000;
+				
+				const poll = async () => {
+					if (retryCount >= maxRetries) {
+						uni.showToast({
+							title: '响应超时，请重试',
+							icon: 'none'
+						});
+						this.removeThinkingMessage(thinkingId);
+						return;
+					}
+					
+					try {
+						const statusRes = await request({
+							url: '/v1/cozeai/conversation/chatretRieve',
+							method: 'GET',
+							data: {
+								conversation_id: this.conversationId,
+								chat_id: messageId
+							}
+						});
+						
+						if (statusRes.code === 200) {
+							if (statusRes.data.status === 'completed') {
+								const messageRes = await request({
+									url: '/v1/cozeai/conversation/chatMessage',
+									method: 'GET',
+									data: {
+										conversation_id: this.conversationId,
+										chat_id: messageId
+									}
+								});
+								
+								if (messageRes.code === 200 && messageRes.data) {
+									// 移除思考中的消息
+									this.removeThinkingMessage(thinkingId);
+									
+									// 添加AI回复
+									const aiMsg = {
+										id: 'msg' + (this.messages.length + 1),
+										type: 'assistant',
+										content: messageRes.data.content || '抱歉，我现在无法回答您的问题。',
+										time: messageRes.data.time || this.formatTime(new Date())
+									};
+									this.messages.push(aiMsg);
+									
+									// 滚动到底部
+									this.scrollToBottom();
+									return;
+								} else {
+									uni.showToast({
+										title: messageRes.msg || '获取消息内容失败',
+										icon: 'none'
+									});
+									this.removeThinkingMessage(thinkingId);
+								}
+							} else if (statusRes.data.status === 'failed') {
+								uni.showToast({
+									title: '消息处理失败',
+									icon: 'none'
+								});
+								this.removeThinkingMessage(thinkingId);
+								return;
+							}
+							
+							// 如果状态是处理中，继续轮询
+							retryCount++;
+							setTimeout(poll, interval);
+						} else {
+							uni.showToast({
+								title: statusRes.msg || '检查消息状态失败',
+								icon: 'none'
+							});
+							this.removeThinkingMessage(thinkingId);
+						}
+					} catch (err) {
+						console.error('轮询消息状态失败:', err);
+						retryCount++;
+						setTimeout(poll, interval);
+					}
+				};
+				
+				poll();
+			},
+			scrollToBottom() {
+				if (this.messages.length > 0) {
+					this.scrollIntoView = this.messages[this.messages.length - 1].id;
+				}
+				
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.scrollTop = 999999;
+					}, 50);
+				});
+			},
+			formatTime(date) {
+				const hours = date.getHours().toString().padStart(2, '0');
+				const minutes = date.getMinutes().toString().padStart(2, '0');
+				return hours + ':' + minutes;
+			},
+			goBack() {
+				uni.navigateBack();
+			},
+			onSearchFocus() {
+				uni.showToast({
+					title: '搜索功能开发中',
+					icon: 'none'
+				});
+			},
+			onSearch() {
+				if (!this.searchText.trim()) return;
+				uni.showToast({
+					title: '搜索"' + this.searchText + '"的结果开发中',
+					icon: 'none'
+				});
+			},
+			toggleContentLib() {
+				this.contentLibEnabled = !this.contentLibEnabled;
+				uni.showToast({
+					title: this.contentLibEnabled ? '艺施内容库已开启' : '艺施内容库已关闭',
+					icon: 'none'
+				});
+			},
+			toggleAutoCustomer() {
+				this.autoCustomerEnabled = !this.autoCustomerEnabled;
+				uni.showToast({
+					title: this.autoCustomerEnabled ? '自动开发客户已开启' : '自动开发客户已关闭',
+					icon: 'none'
+				});
+			},
+			showMenu() {
+				this.menuVisible = true;
+			},
+			closeMenu() {
+				this.menuVisible = false;
+			},
+			previewImage(url) {
+				uni.previewImage({
+					urls: [url],
+					current: url
+				});
+			},
+			beforeDestroy() {
+				if (this.scrollTimer) {
+					clearTimeout(this.scrollTimer);
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.chat-container {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background-color: #fff;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 15px 15px;
+		padding-top: calc(var(--status-bar-height) + 15px);
+		box-shadow: none;
+		background-color: #fff;
+		z-index: 1000;
+		border-bottom: 1px solid #f5f5f5;
+		
+		.title {
+			font-size: 20px;
+			font-weight: 500;
+		}
+		
+		.header-right {
+			display: flex;
+			align-items: center;
+		}
+	}
+	
+	.search-container {
+		padding: 10px 15px 15px;
+		background-color: #fff;
+	}
+	
+	.search-input-wrapper {
+		display: flex;
+		align-items: center;
+		background-color: #F5F5F5;
+		height: 36px;
+		border-radius: 18px;
+		padding: 0 12px;
+	}
+	
+	.search-icon {
+		color: #999;
+		font-size: 16px;
+		margin-right: 6px;
+	}
+	
+	.search-input {
+		flex: 1;
+		height: 100%;
+		font-size: 14px;
+		background-color: transparent;
+		border: none;
+	}
+	
+	.message-list {
+		flex: 1;
+		padding: 10px;
+		overflow-y: auto;
+		background-color: #fff;
+        box-sizing: border-box;
+	}
+	
+	.message-item {
+		margin-bottom: 20px;
+		
+		&.assistant {
+			.message-content {
+				background-color: #F5F5F5;
+				border-radius: 10px;
+				padding: 12px 15px;
+				font-size: 15px;
+				line-height: 1.5;
+				color: #333;
+				max-width: 85%;
+				box-shadow: none;
+				word-break: break-word;
+			}
+			
+			.message-time {
+				font-size: 12px;
+				color: #999;
+				margin-top: 5px;
+				padding-left: 5px;
+			}
+		}
+		
+		&.user {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			
+			.message-content {
+				background-color: #0080FF;
+				border-radius: 18px;
+				padding: 12px 15px;
+				font-size: 15px;
+				line-height: 1.5;
+				color: #fff;
+				max-width: 75%;
+				word-break: break-word;
+			}
+			
+			.message-time {
+				font-size: 12px;
+				color: #999;
+				margin-top: 5px;
+				padding-right: 5px;
+			}
+			
+			&.image-message {
+				.message-content {
+					padding: 0;
+					background-color: transparent;
+					overflow: hidden;
+					
+					image {
+						width: 100%;
+						max-width: 200px;
+						border-radius: 10px;
+					}
+				}
+			}
+		}
+	}
+	
+	.bottom-area {
+		background-color: #fff;
+		border-top: none;
+	}
+	
+	.footer {
+		padding: 10px 15px;
+		display: flex;
+		justify-content: space-between;
+		
+		.footer-btn {
+			flex: 1;
+			margin: 0 5px;
+			border-radius: 4px;
+			height: 40px;
+			line-height: 40px;
+		}
+		
+		.content-btn {
+			background-color: #0080FF;
+			color: #fff;
+			border-color: #0080FF;
+		}
+		
+		.content-btn-off {
+			background-color: #fff;
+			color: #333;
+			border-color: #e5e5e5;
+		}
+		
+		.auto-btn-on {
+			background-color: #0080FF;
+			color: #fff;
+			border-color: #0080FF;
+		}
+		
+		.auto-btn {
+			background-color: #fff;
+			color: #333;
+			border-color: #e5e5e5;
+		}
+	}
+	
+	.input-container {
+		padding: 10px 15px 15px;
+		
+		.input-wrapper {
+			border: 1px solid #e5e5e5;
+			border-radius: 40px;
+			padding: 0 5px;
+			background-color: #fff;
+			height: 44px;
+			display: flex;
+			align-items: center;
+		}
+		
+		.right-btn {
+			padding: 0 8px;
+			height: 100%;
+			display: flex;
+			align-items: center;
+		}
+		
+		:deep(.u-input) {
+			background-color: transparent;
+			flex: 1;
+			height: 42px;
+		}
+		
+		:deep(.u-input__content__field-wrapper__field) {
+			font-size: 15px;
+		}
+	}
+	
+	.fade-in {
+		animation: fadeIn 0.5s ease-in-out;
+	}
+	
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	
+	.btn-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.iconfont {
+		font-family: "SF Pro Display";
+		font-size: 16px;
+	}
+	
+	.icon-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 5px;
+	}
+	
+	.mic-icon {
+		color: #333;
+		font-size: 24px;
+	}
+	
+	.send-icon {
+		color: #0080FF;
+		font-size: 24px;
+		cursor: pointer;
+	}
+	
+	.recording {
+		color: #f00;
+		font-weight: bold;
+	}
+	
+	.recording-tip {
+		position: fixed;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 150px;
+		height: 150px;
+		background-color: rgba(0, 0, 0, 0.7);
+		border-radius: 10px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		z-index: 999;
+		
+		.recording-wave {
+			display: flex;
+			align-items: flex-end;
+			height: 50px;
+			margin-bottom: 10px;
+			
+			.wave {
+				width: 5px;
+				background-color: #0080FF;
+				margin: 0 3px;
+				border-radius: 3px;
+				animation: waveAnimation 0.5s infinite alternate;
+				
+				&:nth-child(1) {
+					height: 15px;
+					animation-delay: 0s;
+				}
+				
+				&:nth-child(2) {
+					height: 25px;
+					animation-delay: 0.2s;
+				}
+				
+				&:nth-child(3) {
+					height: 20px;
+					animation-delay: 0.4s;
+				}
+			}
+		}
+		
+		.recording-text {
+			color: #fff;
+			font-size: 14px;
+			margin-bottom: 10px;
+		}
+		
+		.recording-cancel {
+			color: #999;
+			font-size: 12px;
+		}
+	}
+	
+	@keyframes waveAnimation {
+		from {
+			transform: scaleY(1);
+		}
+		to {
+			transform: scaleY(1.5);
+		}
+	}
+	
+	.text-content {
+		display: flex;
+		align-items: center;
+		
+		.thinking-dots {
+			display: inline-block;
+			animation: thinkingDots 2s infinite;
+		}
+	}
+	
+	@keyframes thinkingDots {
+		0% { opacity: 0.2; }
+		20% { opacity: 1; }
+		100% { opacity: 0.2; }
+	}
+</style> 

Store_vue/pages/login/index.vue

@@ -0,0 +1,557 @@
+<template>
+	<view class="login-page">
+		<!-- 页面顶部导航 -->
+		<view class="page-header">
+			<view class="back-btn"></view>
+			<view class="page-title">登录/注册</view>
+		</view>
+		
+		<!-- 内容区域 -->
+		<view class="content-area">
+			<!-- 登录方式选项卡 -->
+			<view class="tab-container" v-if="false">
+				<view 
+					class="tab-item" 
+					:class="{ active: loginType === 'code' }" 
+					@tap="loginType = 'code'"
+				>
+					验证码登录
+				</view>
+				<view 
+					class="tab-item" 
+					:class="{ active: loginType === 'password' }" 
+					@tap="loginType = 'password'"
+				>
+					密码登录
+				</view>
+			</view>
+			
+			<!-- 地区提示 -->
+			<view class="tip-text u-line-1">
+				您所在地区仅支持 手机号 <!-- / 微信 / Apple 登录 -->
+			</view>
+			
+			<!-- 验证码登录 -->
+			<block v-if="loginType === 'code'">
+				<view class="form-item">
+					<view class="input-item">
+						<view class="input-prefix">+86</view>
+						<u-input 
+							type="number" 
+							v-model="phone" 
+							maxlength="11" 
+							placeholder="手机号"
+							class="input-field"
+							border="0"
+						/>
+					</view>
+				</view>
+				<view class="form-item">
+					<view class="input-item code-input-box">
+						<u-input 
+							type="number" 
+							v-model="code" 
+							maxlength="6" 
+							placeholder="验证码"
+							class="input-field"
+							border="0"
+						/>
+						<view 
+							class="send-code-btn" 
+							:class="{ disabled: codeSending || !isPhoneValid }"
+							@tap="sendCode"
+						>
+							{{ codeText }}
+						</view>
+					</view>
+				</view>
+			</block>
+			
+			<!-- 密码登录 -->
+			<block v-else>
+				<view class="form-item">
+					<view class="input-item">
+						<view class="input-prefix">+86</view>
+						<u-input
+							type="number" 
+							v-model="phone" 
+							maxlength="11" 
+							placeholder="手机号"
+							class="input-field"
+							border="0"
+						/>
+					</view>
+				</view>
+				<view class="form-item">
+					<view class="input-item">
+						<u-input
+							:type="passwordVisible ? 'text' : 'password'" 
+							v-model="password" 
+							placeholder="密码"
+							class="input-field"
+							border="0"
+						/>
+						<view class="password-icon" @tap="passwordVisible = !passwordVisible">
+							<u-icon :name="passwordVisible ? 'eye' : 'eye-off'" size="20" color="#999"></u-icon>
+						</view>
+					</view>
+				</view>
+			</block>
+			
+			<!-- 用户协议 -->
+			<view class="agreement-container">
+				<checkbox-group  @change="checkboxChange">
+					<checkbox :value="agreement" :checked="agreement" class="agreement-checkbox" color="#4080ff" />
+				</checkbox-group>
+				<text class="agreement-text">已阅读并同意</text>
+				<text class="agreement-link" @tap="openAgreement('user')">用户协议</text>
+				<text class="agreement-text">与</text>
+				<text class="agreement-link" @tap="openAgreement('privacy')">隐私政策</text>
+			</view>
+			
+			<!-- 登录按钮 -->
+			<view 
+				class="login-btn" 
+				:class="{ active: canLogin }" 
+				@tap="handleLogin"
+			>
+				登录
+			</view>
+			
+			<!-- 分隔线 -->
+			<view class="divider" v-if="false">
+				<view class="divider-line"></view>
+				<text class="divider-text">或</text>
+				<view class="divider-line"></view>
+			</view>
+			
+			<!-- 第三方登录 -->
+			<view class="third-party-login" v-if="false">
+				<u-button
+					text="使用微信登录"
+					:custom-style="{backgroundColor: '#07c160', color: '#ffffff', marginBottom: '15px'}"
+					shape="circle"
+					@click="handleThirdLogin('wechat')"
+					:ripple="true"
+				>
+					<template slot="icon">
+						<u-icon name="weixin-fill" color="#ffffff" size="18" style="margin-right: 5px;"></u-icon>
+					</template>
+				</u-button>
+				
+				<u-button
+					text="使用 Apple 登录"
+					:custom-style="{backgroundColor: '#000000', color: '#ffffff'}"
+					shape="circle"
+					@click="handleThirdLogin('apple')"
+					:ripple="true"
+				>
+					<template slot="icon">
+						<u-icon name="apple-fill" color="#ffffff" size="18" style="margin-right: 5px;"></u-icon>
+					</template>
+				</u-button>
+			</view>
+			
+			<!-- 联系我们 -->
+			<view class="contact-us" @tap="contactUs">
+				联系我们
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// 引入API
+	import { authApi } from '../../api/modules/auth';
+	import { hasValidToken, redirectToChat } from '../../api/utils/auth';
+	
+	export default {
+		data() {
+			return {
+				loginType: 'password',     // 默认密码登录
+				phone: '',                // 手机号
+				code: '',                 // 验证码
+				password: '',             // 密码
+				passwordVisible: false,   // 密码是否可见
+				agreement: true,         // 是否同意协议
+				codeSending: false,       // 是否正在发送验证码
+				countdown: 60,            // 倒计时
+				codeText: '发送验证码'      // 验证码按钮文本
+			}
+		},
+		// 页面加载时检查token
+		onLoad() {
+			this.checkTokenStatus();
+		},
+		// 页面显示时检查token
+		onShow() {
+			this.checkTokenStatus();
+		},
+		computed: {
+			// 验证手机号是否有效
+			isPhoneValid() {
+				return this.phone && this.phone.length === 11;
+			},
+			// 验证是否可以登录
+			canLogin() {
+				if (!this.phone || !this.agreement) {
+					return false;
+				}
+				
+				if (this.loginType === 'code') {
+					return this.isPhoneValid && this.code && this.code.length === 6;
+				} else {
+					return this.password && this.password.length >= 6;
+				}
+			}
+		},
+		methods: {
+			// 检查token状态
+			checkTokenStatus() {
+				// 如果token有效，则跳转到聊天页面
+				if (hasValidToken()) {
+					redirectToChat();
+				}
+			},
+			
+			// 返回上一页
+			goBack() {
+				uni.navigateBack();
+			},
+			
+			// 切换登录类型
+			switchLoginType(type) {
+				this.loginType = type;
+			},
+			
+			// 发送验证码
+			sendCode() {
+				if (this.codeSending || !this.isPhoneValid) return;
+				
+				this.codeSending = true;
+				this.countdown = 60;
+				this.codeText = `${this.countdown}秒后重发`;
+				
+				// 模拟发送验证码
+				uni.showToast({
+					title: '验证码已发送',
+					icon: 'success'
+				});
+				
+				const timer = setInterval(() => {
+					this.countdown--;
+					this.codeText = `${this.countdown}秒后重发`;
+					
+					if (this.countdown <= 0) {
+						clearInterval(timer);
+						this.codeSending = false;
+						this.codeText = '发送验证码';
+					}
+				}, 1000);
+			},
+			
+			checkboxChange(){
+				this.agreement = !this.agreement
+			},
+			
+			
+			// 处理登录
+			async handleLogin() {
+				// 检查是否同意协议
+				console.log(this.agreement)
+				if (!this.agreement) {
+					uni.showToast({
+						title: '请阅读并同意用户协议和隐私政策',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
+				
+				if (!this.canLogin) {
+					// 显示错误原因
+					if (!this.isPhoneValid) {
+						uni.showToast({
+							title: '请输入正确的手机号',
+							icon: 'none'
+						});
+					} else if (this.loginType === 'code' && (!this.code || this.code.length !== 6)) {
+						uni.showToast({
+							title: '请输入6位验证码',
+							icon: 'none'
+						});
+					} else if (this.loginType === 'password' && (!this.password || this.password.length < 6)) {
+						uni.showToast({
+							title: '密码不能少于6位',
+							icon: 'none'
+						});
+					}
+					return;
+				}
+				
+				uni.showLoading({
+					title: '登录中...',
+					mask: true
+				});
+				
+				try {
+					// 调用登录API
+					const loginPassword = this.loginType === 'password' ? this.password : this.code;
+					const response = await authApi.login(this.phone, loginPassword);
+				
+					console.log(response);
+
+					if (response.code === 200) { // 成功code是200
+						// 登录成功，缓存token信息
+						const { token, member, token_expired } = response.data;
+						
+						// 存储token信息
+						uni.setStorageSync('token', token);
+						uni.setStorageSync('member', JSON.stringify(member));
+						uni.setStorageSync('token_expired', token_expired);
+
+						uni.showToast({
+							title: '登录成功',
+							icon: 'success'
+						});
+						
+						// 登录成功后跳转到对话页面
+						setTimeout(() => {
+							redirectToChat();
+						}, 1500);
+					} else {
+						// 登录失败，显示错误信息
+						uni.showToast({
+							title: response.msg || '登录失败，请重试',
+							icon: 'none'
+						});
+					}
+				} catch (err) {
+					console.error('登录失败:', err);
+					uni.showToast({
+						title: '网络异常，请稍后重试',
+						icon: 'none'
+					});
+				} finally {
+					uni.hideLoading();
+				}
+			},
+			
+			// 第三方登录
+			handleThirdLogin(platform) {
+				uni.showToast({
+					title: `${platform === 'wechat' ? '微信' : 'Apple'}登录功能暂未实现`,
+					icon: 'none'
+				});
+			},
+			
+			// 打开协议
+			openAgreement(type) {
+				uni.showToast({
+					title: `打开${type === 'user' ? '用户协议' : '隐私政策'}`,
+					icon: 'none'
+				});
+			},
+			
+			// 联系我们
+			contactUs() {
+				uni.showToast({
+					title: '联系方式: support@example.com',
+					icon: 'none',
+					duration: 3000
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.login-page {
+		min-height: 100vh;
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+		padding-top: 40px; /* 为状态栏预留空间 */
+	}
+	
+	.page-header {
+		display: flex;
+		align-items: center;
+		position: relative;
+		padding: 10px 0;
+		margin-bottom: 10px;
+	}
+	
+	.back-btn {
+		position: absolute;
+		left: 15px;
+		width: 30px;
+		height: 30px;
+		display: flex;
+		align-items: center;
+		z-index: 2;
+	}
+	
+	.page-title {
+		text-align: center;
+		font-size: 18px;
+		font-weight: bold;
+		width: 100%;
+	}
+	
+	.content-area {
+		flex: 1;
+		padding: 0 30px;
+	}
+	
+	.tab-container {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 20px;
+		position: relative;
+	}
+	
+	.tab-item {
+		position: relative;
+		text-align: center;
+		padding: 10px 0;
+		font-size: 16px;
+		color: #666;
+		flex: 1;
+	}
+	
+	.tab-item.active {
+		color: #4080ff;
+		font-weight: bold;
+	}
+	
+	.tab-item.active::after {
+		content: '';
+		position: absolute;
+		bottom: -2px;
+		left: 25%;
+		width: 50%;
+		height: 3px;
+		background-color: #4080ff;
+		border-radius: 2px;
+	}
+	
+	.tip-text {
+		font-size: 14px;
+		color: #666;
+		margin-bottom: 20px;
+	}
+	
+	.input-item {
+		display: flex;
+		align-items: center;
+		border-bottom: 1px solid #eee;
+		padding: 12px 0;
+		height: 24px;
+	}
+	
+	.input-prefix {
+		color: #333;
+		margin-right: 10px;
+		padding-right: 10px;
+		border-right: 1px solid #eee;
+		font-size: 14px;
+	}
+	
+	.input-field {
+		flex: 1;
+		height: 24px;
+		font-size: 15px;
+	}
+	
+	.code-input-box {
+		position: relative;
+	}
+	
+	.send-code-btn {
+		position: absolute;
+		right: 0;
+		background-color: #4080ff;
+		color: #fff;
+		padding: 5px 10px;
+		border-radius: 4px;
+		font-size: 12px;
+	}
+	
+	.send-code-btn.disabled {
+		background-color: #ccc;
+	}
+	
+	.password-icon {
+		padding: 0 5px;
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+	
+	.agreement-container {
+		display: flex;
+		align-items: center;
+		margin: 15px 0;
+	}
+	
+	.agreement-checkbox {
+		transform: scale(0.8);
+		margin-right: 5px;
+	}
+	
+	.agreement-text {
+		font-size: 13px;
+		color: #666;
+	}
+	
+	.agreement-link {
+		font-size: 13px;
+		color: #4080ff;
+	}
+	
+	.login-btn {
+		height: 44px;
+		line-height: 44px;
+		text-align: center;
+		background-color: #dddddd;
+		color: #ffffff;
+		border-radius: 22px;
+		margin: 20px 0;
+		font-size: 16px;
+		transition: background-color 0.3s;
+	}
+	
+	.login-btn.active {
+		background-color: #4080ff;
+	}
+	
+	.divider {
+		display: flex;
+		align-items: center;
+		margin: 20px 0;
+	}
+	
+	.divider-line {
+		flex: 1;
+		height: 1px;
+		background-color: #eee;
+	}
+	
+	.divider-text {
+		color: #999;
+		padding: 0 15px;
+		font-size: 14px;
+	}
+	
+	.third-party-login {
+		margin: 20px 0;
+	}
+	
+	.contact-us {
+		text-align: center;
+		color: #999;
+		font-size: 14px;
+		margin-top: 40px;
+	}
+</style> 

Store_vue/static/iconfont/iconfont.css

@@ -0,0 +1,163 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4868191 */
+  src: url('/static/iconfont/iconfont.woff2?t=1742797944667') format('woff2'),
+       url('/static/iconfont/iconfont.woff?t=1742797944667') format('woff'),
+       url('/static/iconfont/iconfont.ttf?t=1742797944667') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shuju:before {
+  content: "\e62e";
+}
+
+.icon-data:before {
+  content: "\e673";
+}
+
+.icon-shuju1:before {
+  content: "\e884";
+}
+
+.icon-shujucanmou:before {
+  content: "\e87e";
+}
+
+.icon-gouwuchekong:before {
+  content: "\e600";
+}
+
+.icon-weixin:before {
+  content: "\e601";
+}
+
+.icon-shujutongji:before {
+  content: "\e609";
+}
+
+.icon-shu:before {
+  content: "\e645";
+}
+
+.icon-saoma:before {
+  content: "\e749";
+}
+
+.icon-shujutongji1:before {
+  content: "\e649";
+}
+
+.icon-pingguo:before {
+  content: "\e624";
+}
+
+.icon-pingguo1:before {
+  content: "\e610";
+}
+
+.icon-tupian:before {
+  content: "\e662";
+}
+
+.icon-tuichu:before {
+  content: "\e60d";
+}
+
+.icon-shu1:before {
+  content: "\e70e";
+}
+
+.icon-warning:before {
+  content: "\e605";
+}
+
+.icon-xiaoxi:before {
+  content: "\e6b6";
+}
+
+.icon-sousuo:before {
+  content: "\e637";
+}
+
+.icon-shaixuan:before {
+  content: "\e619";
+}
+
+.icon-shezhi:before {
+  content: "\e676";
+}
+
+.icon-tuichu1:before {
+  content: "\e62c";
+}
+
+.icon-yonghu:before {
+  content: "\e64e";
+}
+
+.icon-shangpin:before {
+  content: "\e634";
+}
+
+.icon-yonghuqun:before {
+  content: "\e62b";
+}
+
+.icon-shezhi1:before {
+  content: "\e684";
+}
+
+.icon-tuichu2:before {
+  content: "\e7ed";
+}
+
+.icon-shangsheng:before {
+  content: "\e61d";
+}
+
+.icon-gengduo:before {
+  content: "\e602";
+}
+
+.icon-shujutongji2:before {
+  content: "\e731";
+}
+
+.icon-dianhua:before {
+  content: "\e65f";
+}
+
+.icon-shejihuan:before {
+  content: "\e680";
+}
+
+.icon-shujutongji3:before {
+  content: "\e7c7";
+}
+
+.icon-maikefengkai:before {
+  content: "\e653";
+}
+
+.icon-shuju-xinzengyonghu:before {
+  content: "\e608";
+}
+
+.icon-bingtu:before {
+  content: "\e64f";
+}
+
+.icon-Gc_63_public-RiseOutlined:before {
+  content: "\e61e";
+}
+
+.icon-dianzan:before {
+  content: "\ec7f";
+}
+

Store_vue/static/spa1.png

@@ -0,0 +1 @@
+这是一个头部护理SPA服务的图片占位符。实际应用中应替换为真实的图片资源。 

Store_vue/static/spa2.png

@@ -0,0 +1 @@
+这是一个臂油/全身SPA服务的图片占位符。实际应用中应替换为真实的图片资源。 

Store_vue/static/spa3.png

@@ -0,0 +1 @@
+这是一个LAWF型颜度护理服务的图片占位符。实际应用中应替换为真实的图片资源。 

Store_vue/static/spa4.png

@@ -0,0 +1 @@
+这是一个肌肤管理服务的图片占位符。实际应用中应替换为真实的图片资源。 

Store_vue/static/spa5.png

@@ -0,0 +1 @@
+这是一个私人定制美容方案服务的图片占位符。实际应用中应替换为真实的图片资源。 

Store_vue/uni.promisify.adaptor.js

@@ -0,0 +1,13 @@
+uni.addInterceptor({
+  returnValue (res) {
+    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
+      return res;
+    }
+    return new Promise((resolve, reject) => {
+      res.then((res) => {
+        if (!res) return resolve(res) 
+        return res[0] ? reject(res[0]) : resolve(res[1])
+      });
+    });
+  },
+});

Store_vue/uni.scss

@@ -0,0 +1,79 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/* 引入uView主题文件 */
+@import 'uview-ui/theme.scss';
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:12px;
+$uni-font-size-base:14px;
+$uni-font-size-lg:16px;
+
+/* 图片尺寸 */
+$uni-img-size-sm:20px;
+$uni-img-size-base:26px;
+$uni-img-size-lg:40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:20px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:26px;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:15px;