【门店端】 提交
This commit is contained in:
Ghost
3
.gitignore
vendored
3
.gitignore
vendored
@@ -4,4 +4,5 @@
|
|||||||
vendor
|
vendor
|
||||||
Backend/dist
|
Backend/dist
|
||||||
Backend/node_modules
|
Backend/node_modules
|
||||||
vue_store/*
|
Store_vue/node_modules
|
||||||
|
Store_vue/unpackage
|
||||||
|
|||||||
58
Store_vue/App.vue
Normal file
58
Store_vue/App.vue
Normal file
@@ -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>
|
||||||
1920
Store_vue/components/CustomerManagement.vue
Normal file
1920
Store_vue/components/CustomerManagement.vue
Normal file
File diff suppressed because it is too large
Load Diff
1740
Store_vue/components/DataStatistics.vue
Normal file
1740
Store_vue/components/DataStatistics.vue
Normal file
File diff suppressed because it is too large
Load Diff
374
Store_vue/components/LoginRegister.vue
Normal file
374
Store_vue/components/LoginRegister.vue
Normal file
@@ -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>
|
||||||
386
Store_vue/components/PackageDetail.vue
Normal file
386
Store_vue/components/PackageDetail.vue
Normal file
@@ -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>
|
||||||
754
Store_vue/components/SideMenu.vue
Normal file
754
Store_vue/components/SideMenu.vue
Normal file
@@ -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>
|
||||||
424
Store_vue/components/SupplyChainPurchase.vue
Normal file
424
Store_vue/components/SupplyChainPurchase.vue
Normal file
@@ -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>
|
||||||
368
Store_vue/components/SupplyItemDetail.vue
Normal file
368
Store_vue/components/SupplyItemDetail.vue
Normal file
@@ -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>
|
||||||
189
Store_vue/components/SystemSettings.vue
Normal file
189
Store_vue/components/SystemSettings.vue
Normal file
@@ -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>
|
||||||
631
Store_vue/components/TrafficPurchase.vue
Normal file
631
Store_vue/components/TrafficPurchase.vue
Normal file
@@ -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>
|
||||||
20
Store_vue/index.html
Normal file
20
Store_vue/index.html
Normal file
@@ -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>
|
||||||
29
Store_vue/main.js
Normal file
29
Store_vue/main.js
Normal file
@@ -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
|
||||||
106
Store_vue/manifest.json
Normal file
106
Store_vue/manifest.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
1823
Store_vue/package-lock.json
generated
Normal file
1823
Store_vue/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
Store_vue/package.json
Normal file
19
Store_vue/package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
27
Store_vue/pages.json
Normal file
27
Store_vue/pages.json
Normal file
@@ -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": {}
|
||||||
|
}
|
||||||
854
Store_vue/pages/chat/index.vue
Normal file
854
Store_vue/pages/chat/index.vue
Normal file
@@ -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>
|
||||||
557
Store_vue/pages/login/index.vue
Normal file
557
Store_vue/pages/login/index.vue
Normal file
@@ -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>
|
||||||
163
Store_vue/static/iconfont/iconfont.css
Normal file
163
Store_vue/static/iconfont/iconfont.css
Normal file
@@ -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";
|
||||||
|
}
|
||||||
|
|
||||||
BIN
Store_vue/static/iconfont/iconfont.ttf
Normal file
BIN
Store_vue/static/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
Store_vue/static/iconfont/iconfont.woff
Normal file
BIN
Store_vue/static/iconfont/iconfont.woff
Normal file
Binary file not shown.
BIN
Store_vue/static/iconfont/iconfont.woff2
Normal file
BIN
Store_vue/static/iconfont/iconfont.woff2
Normal file
Binary file not shown.
BIN
Store_vue/static/logo.png
Normal file
BIN
Store_vue/static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
1
Store_vue/static/spa1.png
Normal file
1
Store_vue/static/spa1.png
Normal file
@@ -0,0 +1 @@
|
|||||||
|
这是一个头部护理SPA服务的图片占位符。实际应用中应替换为真实的图片资源。
|
||||||
1
Store_vue/static/spa2.png
Normal file
1
Store_vue/static/spa2.png
Normal file
@@ -0,0 +1 @@
|
|||||||
|
这是一个臂油/全身SPA服务的图片占位符。实际应用中应替换为真实的图片资源。
|
||||||
1
Store_vue/static/spa3.png
Normal file
1
Store_vue/static/spa3.png
Normal file
@@ -0,0 +1 @@
|
|||||||
|
这是一个LAWF型颜度护理服务的图片占位符。实际应用中应替换为真实的图片资源。
|
||||||
1
Store_vue/static/spa4.png
Normal file
1
Store_vue/static/spa4.png
Normal file
@@ -0,0 +1 @@
|
|||||||
|
这是一个肌肤管理服务的图片占位符。实际应用中应替换为真实的图片资源。
|
||||||
1
Store_vue/static/spa5.png
Normal file
1
Store_vue/static/spa5.png
Normal file
@@ -0,0 +1 @@
|
|||||||
|
这是一个私人定制美容方案服务的图片占位符。实际应用中应替换为真实的图片资源。
|
||||||
13
Store_vue/uni.promisify.adaptor.js
Normal file
13
Store_vue/uni.promisify.adaptor.js
Normal file
@@ -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])
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
79
Store_vue/uni.scss
Normal file
79
Store_vue/uni.scss
Normal file
@@ -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;
|
||||||
Reference in New Issue
Block a user