TONASPACE/PartsInquiry
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2

Browse Source
This commit is contained in:
Wdp-ab
2025-09-27 22:57:59 +08:00
parent 8a458ff0a4
commit ed26244cdb
12585 changed files with 1914308 additions and 3474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
frontend/pages/my/index.vue
View File

@@ -1,21 +1,25 @@
<template>
<view class="me">
<view v-if="!isLoggedIn" class="card login">
<view class="login-title">登录/注册以同步数据</view>
<button class="login-btn" type="primary" @click="goLogin">登录</button>
<button class="login-btn minor" @click="goRegister">注册</button>
</view>
<view class="card user">
<image class="avatar" :src="avatarUrl" mode="aspectFill" @error="onAvatarError" />
<view class="card user" v-if="isLoggedIn">
<image class="avatar" :src="avatarDisplay" mode="aspectFill" @error="onAvatarError" />
<view class="meta">
<text class="name">{{ shopName }}</text>
<text class="phone">{{ mobileDisplay }}</text>
<text class="phone">{{ emailDisplay }}</text>
<text class="role">老板</text>
</view>
</view>
<view v-else class="card user guest">
<image class="avatar" src="/static/icons/icons8-login-50.png" mode="aspectFill" />
<view class="meta">
<text class="name">未登录</text>
<text class="phone">登录后同步数据</text>
<text class="role">访客</text>
</view>
<button class="login-entry" @click="goLogin">登录</button>
</view>
<!-- VIP 卡片（置于“会员与订单”分组上方） -->
<view class="card vip" :class="{ active: vipIsVip }">
<view v-if="isLoggedIn" class="card vip" :class="{ active: vipIsVip }">
<view class="vip-row">
<text class="vip-badge">{{ vipIsVip ? 'VIP' : '非VIP' }}</text>
<text class="vip-title">会员状态</text>
@@ -35,7 +39,11 @@
<view class="group">
<view class="group-title">会员与订单</view>
<view class="cell" @click="goVip">
<text>VIP会员</text>
<view class="cell-left">
<text>VIP会员</text>
<text v-if="vipIsVip" class="vip-tag">已开通</text>
<text v-else class="vip-tag pending">待开通</text>
</view>
<text class="arrow">›</text>
</view>
<view class="cell" @click="goMyOrders">
@@ -44,42 +52,16 @@
</view>
</view>
<view class="group">
<view class="group-title">基础管理</view>
<view class="cell" @click="goSupplier">
<text>供应商管理</text>
<text class="arrow">›</text>
</view>
<view class="cell" @click="goCustomer">
<text>客户管理</text>
<text class="arrow">›</text>
</view>
<view class="cell" @click="goCustomerQuote">
<text>客户报价</text>
<text class="arrow">›</text>
</view>
<view class="cell" @click="goShop">
<text>店铺管理</text>
<text class="arrow">›</text>
</view>
</view>
<view class="group">
<view class="group-title">设置中心</view>
<view class="cell" @click="editProfile">
<text>账号与安全</text>
<text class="desc">修改头像、姓名、密码</text>
<text class="arrow">›</text>
</view>
<view class="cell" @click="goProductSettings">
<text>商品设置</text>
<text class="arrow">›</text>
</view>
<view class="cell" @click="goSystemParams">
<text>系统参数</text>
<text class="desc">低价提示、默认收款、单行折扣等</text>
<text class="desc">修改头像、姓名、密码、电话</text>
<text class="arrow">›</text>
</view>
<view class="cell" @click="goAbout">
<text>关于与协议</text>
<text class="arrow">›</text>
@@ -93,79 +75,158 @@
<script>
import { get } from '../../common/http.js'
import { API_BASE_URL } from '../../common/config.js'
function normalizeAvatar(url) {
if (!url) return '/static/icons/icons8-mitt-24.png'
const s = String(url)
if (/^https?:\/\//i.test(s)) return s
if (!API_BASE_URL) return s
if (s.startsWith('/')) return `${API_BASE_URL}${s}`
return `${API_BASE_URL}/${s}`
}
export default {
data() {
return {
avatarUrl: '/static/logo.png',
shopName: '未登录',
mobile: '',
pendingJsCode: '',
logging: false,
vipIsVip: false,
vipStart: '',
vipEnd: ''
}
},
onShow() {
this.fetchProfile()
this.loadVipFromStorage()
try {
if (uni.getStorageSync('TOKEN')) {
// 已登录时刷新资料并隐藏登录卡片
this.$forceUpdate && this.$forceUpdate()
}
} catch(e) {}
},
computed: {
isLoggedIn() { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } },
mobileDisplay() {
const m = String(this.mobile || '')
return m.length === 11 ? m.slice(0,3) + '****' + m.slice(7) : (m || '未绑定手机号')
},
vipStartDisplay() { return this.formatDisplay(this.vipStart) },
vipEndDisplay() { return this.formatDisplay(this.vipEnd) }
},
methods: {
data() {
return {
avatarUrl: '/static/icons/icons8-mitt-24.png',
shopName: '未登录',
mobile: '',
pendingJsCode: '',
logging: false,
vipIsVip: false,
vipStart: '',
vipEnd: ''
}
},
onShow() {
this.fetchProfile()
this.loadVip()
try {
if (uni.getStorageSync('TOKEN')) {
// 已登录时刷新资料并隐藏登录卡片
this.$forceUpdate && this.$forceUpdate()
}
} catch(e) {}
},
computed: {
isLoggedIn() { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } },
avatarDisplay() { return normalizeAvatar(this.avatarUrl) },
emailDisplay() {
if (!this.isLoggedIn) return ''
const e = String(uni.getStorageSync('USER_EMAIL') || '')
if (!e) return '未绑定邮箱'
const at = e.indexOf('@')
if (at > 1) {
const name = e.slice(0, at)
const domain = e.slice(at)
return (name.length <= 2 ? name[0] + '*' : name.slice(0,2) + '***') + domain
}
return e
},
vipStartDisplay() { return this.formatDisplay(this.vipStart) },
vipEndDisplay() { return this.formatDisplay(this.vipEnd) }
},
methods: {
// 登录相关方法已移除
async fetchProfile() {
// 未登录则不触发任何用户/店铺接口，也不加载本地用户字段
const hasToken = (() => { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } })()
if (!hasToken) {
this.shopName = '未登录'
this.avatarUrl = '/static/logo.png'
this.mobile = ''
return
}
// 已登录：拉取概览以确认在线状态，并回填本地用户信息
try { await get('/api/dashboard/overview') } catch(e) {}
try {
const storeName = uni.getStorageSync('SHOP_NAME') || ''
const avatar = uni.getStorageSync('USER_AVATAR') || ''
const phone = uni.getStorageSync('USER_MOBILE') || ''
if (storeName) this.shopName = storeName
if (avatar) this.avatarUrl = avatar
this.mobile = phone
} catch(e) {}
},
loadVipFromStorage() {
try {
const isVip = String(uni.getStorageSync('USER_VIP_IS_VIP') || 'false').toLowerCase() === 'true'
const start = uni.getStorageSync('USER_VIP_START') || ''
const end = uni.getStorageSync('USER_VIP_END') || ''
this.vipIsVip = isVip
this.vipStart = start
this.vipEnd = end
} catch(e) {}
},
formatDisplay(value) {
if (!value) return '-'
const s = String(value)
// 简单规范化：只保留到分钟
const m = s.match(/^(\d{4}-\d{2}-\d{2})([ T](\d{2}:\d{2}))/)
if (m) return `${m[1]} ${m[3]}`
return s
},
async fetchProfile() {
const hasToken = (() => { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } })()
if (!hasToken) {
this.shopName = '未登录'
this.avatarUrl = '/static/icons/icons8-mitt-24.png'
this.mobile = ''
return
}
try {
const profile = await get('/api/user/me')
const latestAvatar = profile?.avatarUrl || ''
if (latestAvatar) {
const bust = `${latestAvatar}${latestAvatar.includes('?') ? '&' : '?'}t=${Date.now()}`
this.avatarUrl = bust
try {
uni.setStorageSync('USER_AVATAR_RAW', latestAvatar)
uni.setStorageSync('USER_AVATAR', latestAvatar)
} catch(_){}
} else {
const cached = uni.getStorageSync('USER_AVATAR') || ''
this.avatarUrl = cached || '/static/icons/icons8-mitt-24.png'
}
const storeName = profile?.name || uni.getStorageSync('SHOP_NAME') || '未命名店铺'
this.shopName = storeName
const phone = profile?.phone || uni.getStorageSync('USER_MOBILE') || ''
this.mobile = phone
} catch(e) {
try {
const storeName = uni.getStorageSync('SHOP_NAME') || ''
const avatar = uni.getStorageSync('USER_AVATAR') || ''
const phone = uni.getStorageSync('USER_MOBILE') || ''
if (storeName) this.shopName = storeName
if (avatar) this.avatarUrl = avatar
this.mobile = phone
} catch(_){}
}
},
async loadVip() {
try {
const hasToken = (() => { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } })()
if (!hasToken) {
// 未登录：不读取本地缓存，直接复位为默认值并隐藏卡片（由 v-if 控制）
this.vipIsVip = false
this.vipStart = ''
this.vipEnd = ''
return
}
const data = await get('/api/vip/status')
const active = !!data?.isVip
this.vipIsVip = active
this.vipEnd = data?.expireAt || ''
// 根据结束时间动态计算开始时间（固定退 1 个月）
let computedStart = ''
const exp = this.vipEnd
if (exp) {
const m = String(exp).match(/^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?/)
if (m) {
const y = Number(m[1])
const mo = Number(m[2]) - 1
const da = Number(m[3])
const hh = Number(m[4] || '0')
const mm = Number(m[5] || '0')
const ss = Number(m[6] || '0')
const startDate = new Date(y, mo - 1, da, hh, mm, ss)
const y2 = startDate.getFullYear()
const m2 = (startDate.getMonth() + 1).toString().padStart(2, '0')
const d2 = startDate.getDate().toString().padStart(2, '0')
const h2 = startDate.getHours().toString().padStart(2, '0')
const i2 = startDate.getMinutes().toString().padStart(2, '0')
computedStart = `${y2}-${m2}-${d2} ${h2}:${i2}`
}
}
// 写入到本地与内存
this.vipStart = computedStart
// 同步到本地，便于其他页面读取
try {
uni.setStorageSync('USER_VIP_IS_VIP', String(active))
uni.setStorageSync('USER_VIP_END', this.vipEnd)
if (this.vipStart) uni.setStorageSync('USER_VIP_START', this.vipStart); else uni.removeStorageSync('USER_VIP_START')
} catch(_) {}
} catch(e) {
// 网络异常回退到缓存
try {
const isVip = String(uni.getStorageSync('USER_VIP_IS_VIP') || 'false').toLowerCase() === 'true'
this.vipIsVip = isVip
this.vipStart = uni.getStorageSync('USER_VIP_START') || ''
this.vipEnd = uni.getStorageSync('USER_VIP_END') || ''
} catch(_) {}
}
},
formatDisplay(value) {
if (!value) return '-'
const s = String(value)
// 简单规范化：只保留到分钟
const m = s.match(/^(\d{4}-\d{2}-\d{2})([ T](\d{2}:\d{2}))/)
if (m) return `${m[1]} ${m[3]}`
return s
},
startLogin() {
if (this.logging) return
this.logging = true
@@ -194,7 +255,6 @@ export default {
}, fail: () => { this.logging = false; uni.showToast({ title: '微信登录失败', icon: 'none' }) } })
},
goLogin(){ uni.navigateTo({ url: '/pages/auth/login' }) },
goRegister(){ uni.navigateTo({ url: '/pages/auth/register' }) },
onGetPhoneNumber(e) {
if (this.logging) return
this.logging = true
@@ -208,17 +268,11 @@ export default {
},
goSmsLogin(){ uni.navigateTo({ url: '/pages/my/sms-login' }) },
onAvatarError() {
this.avatarUrl = '/static/logo.png'
this.avatarUrl = '/static/icons/icons8-mitt-24.png'
},
goVip() { uni.navigateTo({ url: '/pages/my/vip' }) },
goMyOrders() { uni.switchTab({ url: '/pages/detail/index' }) },
goSupplier() { uni.navigateTo({ url: '/pages/supplier/select' }) },
goCustomer() { uni.navigateTo({ url: '/pages/customer/select' }) },
goCustomerQuote() { uni.showToast({ title: '客户报价（开发中）', icon: 'none' }) },
goShop() { uni.showToast({ title: '店铺管理（开发中）', icon: 'none' }) },
editProfile() { uni.showToast({ title: '账号与安全（开发中）', icon: 'none' }) },
goProductSettings() { uni.navigateTo({ url: '/pages/product/settings' }) },
goSystemParams() { uni.showToast({ title: '系统参数（开发中）', icon: 'none' }) },
goMyOrders() { uni.navigateTo({ url: '/pages/my/orders' }) },
editProfile() { uni.navigateTo({ url: '/pages/my/security' }) },
goAbout() { uni.navigateTo({ url: '/pages/my/about' }) },
logout() {
try {
@@ -228,9 +282,14 @@ export default {
uni.removeStorageSync('DEFAULT_USER_ID')
uni.setStorageSync('ENABLE_DEFAULT_USER', 'false')
uni.removeStorageSync('USER_AVATAR')
uni.removeStorageSync('USER_AVATAR_RAW')
uni.removeStorageSync('USER_NAME')
uni.removeStorageSync('USER_MOBILE')
uni.removeStorageSync('USER_EMAIL')
uni.removeStorageSync('SHOP_NAME')
uni.removeStorageSync('USER_VIP_IS_VIP')
uni.removeStorageSync('USER_VIP_START')
uni.removeStorageSync('USER_VIP_END')
uni.showToast({ title: '已清理本地信息', icon: 'none' })
setTimeout(() => { uni.reLaunch({ url: '/pages/index/index' }) }, 300)
} catch(e) { uni.reLaunch({ url: '/pages/index/index' }) }
@@ -247,6 +306,9 @@ export default {
.login-btn.minor { background: $uni-bg-color-hover; color: $uni-text-color; }
.hint { font-size: 22rpx; color: $uni-text-color-grey; }
.card.user { display: flex; gap: 18rpx; padding: 22rpx; background: $uni-bg-color-grey; border-radius: 16rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.16); align-items: center; }
.card.user.guest { justify-content: space-between; }
.card.user.guest .meta { flex: 1; }
.card.user.guest .login-entry { padding: 12rpx 30rpx; border-radius: 999rpx; background: $uni-color-primary; color: #fff; font-size: 28rpx; font-weight: 600; }
.avatar { width: 120rpx; height: 120rpx; border-radius: 60rpx; background: $uni-bg-color-hover; }
.meta { display: flex; flex-direction: column; gap: 6rpx; }
.name { font-size: 34rpx; font-weight: 700; color: $uni-text-color; }
@@ -266,7 +328,10 @@ export default {
.group { margin-top: 24rpx; background: $uni-bg-color-grey; border-radius: 16rpx; overflow: hidden; }
.group-title { padding: 18rpx 22rpx; font-size: 26rpx; color: $uni-text-color-grey; background: $uni-bg-color-hover; }
.cell { display: flex; align-items: center; padding: 26rpx 22rpx; border-top: 1rpx solid $uni-border-color; color: $uni-text-color; }
.cell { display: flex; align-items: center; padding: 26rpx 22rpx; border-top: 1rpx solid $uni-border-color; color: $uni-text-color; gap: 18rpx; }
.cell-left { display:flex; align-items:center; gap: 14rpx; }
.vip-tag { padding: 4rpx 12rpx; border-radius: 999rpx; background: rgba(76,141,255,0.15); color: $uni-color-primary; font-size: 22rpx; }
.vip-tag.pending { background: rgba(76,141,255,0.06); color: #99a2b3; }
.cell .desc { margin-left: auto; margin-right: 8rpx; font-size: 22rpx; color: $uni-text-color-grey; }
.cell .arrow { margin-left: auto; color: #99a2b3; }
.cell.danger { color: #dd524d; justify-content: center; font-weight: 700; }

65
frontend/pages/my/orders.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<view class="orders">
<view class="hint" v-if="!isLoggedIn">请先登录后查看VIP支付记录</view>
<view v-else>
<view class="item" v-for="it in list" :key="it.id">
<view class="row1">
<text class="price">¥ {{ toMoney(it.price) }}</text>
<text class="channel">{{ it.channel || '支付' }}</text>
</view>
<view class="row2">
<text class="date">{{ fmt(it.createdAt) }}</text>
<text class="duration">{{ it.durationDays }} 天</text>
</view>
<view class="row3" v-if="it.expireTo">
<text class="expire">有效期至 {{ fmt(it.expireTo) }}</text>
</view>
</view>
<view class="empty" v-if="list.length===0">暂无支付记录</view>
</view>
</view>
</template>
<script>
import { get } from '../../common/http.js'
export default {
data(){
return { list: [], page: 1, size: 20, loading: false }
},
onShow(){ this.fetch(true) },
computed: {
isLoggedIn(){ try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } }
},
methods: {
async fetch(reset=false){
if (!this.isLoggedIn) return
if (this.loading) return
this.loading = true
try {
const p = reset ? 1 : this.page
const data = await get('/api/vip/recharges', { page: p, size: this.size })
const arr = Array.isArray(data?.list) ? data.list : []
this.list = reset ? arr : (this.list || []).concat(arr)
this.page = p + 1
} finally { this.loading = false }
},
fmt(v){ if (!v) return ''; const s = String(v); const m = s.match(/^(\d{4}-\d{2}-\d{2})([ T](\d{2}:\d{2}))/); return m ? `${m[1]} ${m[3]}` : s },
toMoney(v){ try { return Number(v).toFixed(2) } catch(_) { return v } }
}
}
</script>
<style lang="scss">
.orders { padding: 16rpx 16rpx calc(env(safe-area-inset-bottom) + 16rpx); }
.hint { color: $uni-text-color-grey; padding: 24rpx; text-align: center; }
.item { background:#fff; border:1rpx solid $uni-border-color; border-radius: 16rpx; padding: 18rpx; margin: 12rpx 0; }
.row1 { display:flex; justify-content: space-between; align-items:center; margin-bottom: 6rpx; }
.price { color:#111; font-weight: 800; font-size: 34rpx; }
.channel { color:#666; font-size: 24rpx; }
.row2 { display:flex; justify-content: space-between; color:#666; font-size: 24rpx; }
.row3 { margin-top: 6rpx; color:#4C8DFF; font-size: 24rpx; }
.empty { text-align:center; color:#999; padding: 40rpx 0; }
</style>

200
frontend/pages/my/security.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<view class="security">
<view class="card">
<view class="cell" @click="openAvatarDialog">
<text class="cell-label">头像</text>
<image class="avatar-preview" :src="avatarPreview" mode="aspectFill" />
<text class="arrow">›</text>
</view>
<view class="cell">
<text class="cell-label">姓名</text>
<input class="cell-input" type="text" v-model.trim="form.name" placeholder="请输入姓名" />
</view>
<button class="btn" type="primary" :loading="savingProfile" @click="saveProfile">保存资料</button>
</view>
<view class="card">
<view class="row">
<text class="label">旧密码</text>
<input class="input" password v-model.trim="pwd.oldPassword" placeholder="如从未设置可留空" />
</view>
<view class="row">
<text class="label">新密码</text>
<input class="input" password v-model.trim="pwd.newPassword" placeholder="至少6位" />
</view>
<button class="btn" :loading="savingPwd" @click="changePassword">修改密码</button>
</view>
<view class="card">
<view class="row">
<text class="label">手机号</text>
<input class="input" type="text" v-model.trim="phone.phone" placeholder="11位手机号" />
</view>
<button class="btn" :loading="savingPhone" @click="changePhoneDirect">保存手机号</button>
</view>
</view>
</template>
<script>
import { get, put, post, upload } from '../../common/http.js'
import { API_BASE_URL } from '../../common/config.js'
export default {
data() {
return {
form: { name: '', avatarUrl: '' },
pwd: { oldPassword: '', newPassword: '' },
phone: { phone: '' },
savingProfile: false,
savingPwd: false,
savingPhone: false,
sendingCode: false,
originalAvatarUrl: ''
}
},
onShow() { this.loadProfile() },
computed: {
avatarPreview() {
return this.normalizeAvatar(this.form.avatarUrl)
},
canSendPhone() {
const p = String(this.phone.phone || '').trim()
return /^1\d{10}$/.test(p)
}
},
methods: {
async loadProfile() {
try {
const data = await get('/api/user/me')
const rawAvatar = data?.avatarUrl || (uni.getStorageSync('USER_AVATAR_RAW') || '')
this.originalAvatarUrl = rawAvatar
this.form.name = data?.name || (uni.getStorageSync('USER_NAME') || '')
this.form.avatarUrl = rawAvatar
} catch (e) {}
},
normalizeAvatar(url) {
if (!url) return '/static/icons/icons8-mitt-24.png'
const s = String(url)
if (/^https?:\/\//i.test(s)) return s
const base = API_BASE_URL || ''
if (!base) return s
if (s.startsWith('/')) return `${base}${s}`
return `${base}/${s}`
},
openAvatarDialog() {
uni.showActionSheet({
itemList: ['粘贴图片URL', '从相册选择并上传'],
success: (res) => {
if (res.tapIndex === 0) {
uni.showModal({
title: '头像URL',
editable: true,
placeholderText: 'https://...',
success: async (m) => {
if (m.confirm && m.content) {
this.form.avatarUrl = m.content.trim()
await this.saveProfile({ auto: true })
}
}
})
} else if (res.tapIndex === 1) {
uni.chooseImage({ count: 1, sizeType: ['compressed'], success: (ci) => {
const filePath = (ci.tempFilePaths && ci.tempFilePaths[0]) || ''
if (!filePath) return
uni.showLoading({ title: '上传中...' })
upload('/api/attachments', filePath, { ownerType: 'user_avatar', ownerId: 0 }).then(async (data) => {
const url = data && (data.url || data.path)
if (url) {
this.form.avatarUrl = url
await this.saveProfile({ auto: true })
}
uni.showToast({ title: '已上传', icon: 'success' })
}).catch(e => {
uni.showToast({ title: (e && e.message) || '上传失败', icon: 'none' })
}).finally(() => { uni.hideLoading() })
} })
}
}
})
},
async saveProfile(opts = {}) {
const auto = opts && opts.auto
const payload = {}
if (this.form.name && this.form.name !== uni.getStorageSync('USER_NAME')) payload.name = this.form.name
if (this.form.avatarUrl && this.form.avatarUrl !== this.originalAvatarUrl) payload.avatarUrl = this.form.avatarUrl
if (Object.keys(payload).length === 0) {
if (!auto) uni.showToast({ title: '无需修改', icon: 'none' })
return
}
if (this.savingProfile) return
this.savingProfile = true
try {
await put('/api/user/me', payload)
try {
if (payload.name) uni.setStorageSync('USER_NAME', payload.name)
if (payload.avatarUrl) {
const rawUrl = payload.avatarUrl
const displayUrl = `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}t=${Date.now()}`
uni.setStorageSync('USER_AVATAR_RAW', rawUrl)
uni.setStorageSync('USER_AVATAR', rawUrl)
this.originalAvatarUrl = rawUrl
this.form.avatarUrl = rawUrl
}
} catch(_) {}
if (!payload.avatarUrl && this.form.avatarUrl) {
uni.setStorageSync('USER_AVATAR_RAW', this.form.avatarUrl)
uni.setStorageSync('USER_AVATAR', this.form.avatarUrl)
}
uni.showToast({ title: auto ? '头像已更新' : '已保存', icon: 'success' })
} catch (e) {
const msg = (e && e.message) || '保存失败'
uni.showToast({ title: msg, icon: 'none' })
} finally {
this.savingProfile = false
}
},
async changePassword() {
if (!this.pwd.newPassword || this.pwd.newPassword.length < 6) return uni.showToast({ title: '新密码至少6位', icon: 'none' })
this.savingPwd = true
try {
await put('/api/user/me/password', { oldPassword: this.pwd.oldPassword || undefined, newPassword: this.pwd.newPassword })
this.pwd.oldPassword = ''
this.pwd.newPassword = ''
uni.showToast({ title: '密码已修改', icon: 'success' })
} catch (e) {
uni.showToast({ title: (e && e.message) || '修改失败', icon: 'none' })
} finally { this.savingPwd = false }
},
async changePhoneDirect() {
if (!this.canSendPhone) return uni.showToast({ title: '请输入正确手机号', icon: 'none' })
this.savingPhone = true
try {
await put('/api/user/me/phone', { phone: this.phone.phone })
uni.setStorageSync('USER_MOBILE', this.phone.phone)
uni.showToast({ title: '手机号已保存', icon: 'success' })
} catch (e) {
uni.showToast({ title: (e && e.message) || '保存失败', icon: 'none' })
} finally { this.savingPhone = false }
}
}
}
</script>
<style lang="scss">
.security { padding: 24rpx; }
.card { background: $uni-bg-color-grey; border-radius: 16rpx; padding: 22rpx; margin-bottom: 24rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.08); }
.cell { display: flex; align-items: center; gap: 16rpx; padding: 20rpx 0; border-bottom: 1rpx solid $uni-border-color; }
.cell:last-of-type { border-bottom: none; }
.cell-label { flex: 1; font-size: 28rpx; color: $uni-text-color; }
.cell-input { flex: 2; height: 72rpx; padding: 0 16rpx; border: 1rpx solid $uni-border-color; border-radius: 10rpx; background: #fff; color: $uni-text-color; }
.avatar-preview { width: 100rpx; height: 100rpx; border-radius: 16rpx; background: $uni-bg-color-hover; }
.arrow { margin-left: 12rpx; color: #99a2b3; font-size: 32rpx; }
.row { display: flex; align-items: center; gap: 16rpx; margin-bottom: 16rpx; }
.label { width: 160rpx; color: $uni-text-color; font-size: 28rpx; }
.input { flex: 1; height: 72rpx; padding: 0 16rpx; border: 1rpx solid $uni-border-color; border-radius: 10rpx; background: #fff; color: $uni-text-color; }
.btn { margin-top: 8rpx; }
.btn.minor { background: $uni-bg-color-hover; color: $uni-text-color; }
</style>

52
frontend/pages/my/sms-login.vue
View File

@@ -1,27 +1,26 @@
<template>
<view class="page sms-login">
<view class="card">
<view class="title">短信验证码登录</view>
<view class="title">邮箱验证码登录</view>
<view class="form">
<input class="input" type="number" maxlength="11" placeholder="请输入手机号" v-model="phone"/>
<input class="input" type="text" placeholder="请输入邮箱地址" v-model="email"/>
<view class="row">
<input class="input code" type="number" maxlength="6" placeholder="请输入验证码" v-model="code"/>
<button class="send" :disabled="countdown>0 || sending" @click="sendCode">{{ btnText }}</button>
</view>
<button class="login" type="primary" :disabled="logging" @click="doLogin">登录/注册</button>
<button class="login" :disabled="logging" @click="quickRegister">注册为店主</button>
</view>
<view class="hint">首次登录将自动创建店铺与店主用户。</view>
<view class="debug">
<view class="debug-title" @click="toggleDebug">请求体示例（点击{{ showDebug? '收起':'展开' }}）</view>
<view v-if="showDebug" class="debug-body">
<view class="code-title">POST /api/auth/sms/send</view>
<view class="code-title">POST /api/auth/email/send</view>
<view class="code-wrap">
<text class="code">{{ sendBodyJson }}</text>
<button size="mini" class="copy" @click="copy(sendBodyJson)">复制</button>
</view>
<view class="code-title">POST /api/auth/sms/login</view>
<view class="code-title">POST /api/auth/email/login</view>
<view class="code-wrap">
<text class="code">{{ loginBodyJson }}</text>
<button size="mini" class="copy" @click="copy(loginBodyJson)">复制</button>
@@ -37,18 +36,18 @@ import { post } from '../../common/http.js'
export default {
data(){
return { phone: '', code: '', countdown: 0, timer: null, sending: false, logging: false, showDebug: true }
return { email: '', code: '', countdown: 0, timer: null, sending: false, logging: false, showDebug: true }
},
computed:{
btnText(){ return this.countdown>0 ? `${this.countdown}s` : (this.sending ? '发送中...' : '获取验证码') }
,
trimmedPhone(){ return String(this.phone||'').trim() },
sendBodyJson(){ return JSON.stringify({ phone: this.trimmedPhone, scene: 'login' }, null, 2) },
loginBodyJson(){ return JSON.stringify({ phone: this.trimmedPhone, code: String(this.code||'').trim() }, null, 2) }
trimmedEmail(){ return String(this.email||'').trim() },
sendBodyJson(){ return JSON.stringify({ email: this.trimmedEmail, scene: 'login' }, null, 2) },
loginBodyJson(){ return JSON.stringify({ email: this.trimmedEmail, code: String(this.code||'').trim() }, null, 2) }
},
onUnload(){ if (this.timer) clearInterval(this.timer) },
methods:{
validatePhone(p){ return /^1\d{10}$/.test(String(p||'').trim()) },
validateEmail(e){ return /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(String(e||'').trim()) },
startCountdown(sec){
this.countdown = sec
if (this.timer) clearInterval(this.timer)
@@ -59,11 +58,11 @@ export default {
},
async sendCode(){
if (this.sending || this.countdown>0) return
const p = String(this.phone||'').trim()
if (!this.validatePhone(p)) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
const e = String(this.email||'').trim()
if (!this.validateEmail(e)) return uni.showToast({ title: '请输入正确的邮箱地址', icon: 'none' })
this.sending = true
try {
const res = await post('/api/auth/sms/send', { phone: p, scene: 'login' })
const res = await post('/api/auth/email/send', { email: e, scene: 'login' })
const cd = Number(res && res.cooldownSec || 60)
this.startCountdown(cd)
uni.showToast({ title: '验证码已发送', icon: 'none' })
@@ -74,16 +73,16 @@ export default {
},
async doLogin(){
if (this.logging) return
const p = String(this.phone||'').trim()
const e = String(this.email||'').trim()
const c = String(this.code||'').trim()
if (!this.validatePhone(p)) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
if (!this.validateEmail(e)) return uni.showToast({ title: '请输入正确的邮箱地址', icon: 'none' })
if (!/^\d{6}$/.test(c)) return uni.showToast({ title: '验证码格式不正确', icon: 'none' })
this.logging = true
try {
const data = await post('/api/auth/sms/login', { phone: p, code: c })
const data = await post('/api/auth/email/login', { email: e, code: c })
if (data && data.token) {
uni.setStorageSync('TOKEN', data.token)
if (data.user && data.user.phone) uni.setStorageSync('USER_MOBILE', data.user.phone)
if (data.user && data.user.email) uni.setStorageSync('USER_EMAIL', data.user.email)
uni.showToast({ title: '登录成功', icon: 'none' })
setTimeout(() => { uni.reLaunch({ url: '/pages/index/index' }) }, 300)
}
@@ -93,25 +92,6 @@ export default {
} finally { this.logging=false }
}
,
async quickRegister(){
if (this.logging) return
const p = String(this.phone||'').trim()
if (!this.validatePhone(p)) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
this.logging = true
try {
const data = await post('/api/auth/register', { phone: p })
if (data && data.token) {
uni.setStorageSync('TOKEN', data.token)
if (data.user && data.user.phone) uni.setStorageSync('USER_MOBILE', data.user.phone)
uni.showToast({ title: '注册成功', icon: 'none' })
setTimeout(() => { uni.reLaunch({ url: '/pages/index/index' }) }, 300)
}
} catch(e) {
const msg = (e && e.message) || '注册失败'
uni.showToast({ title: msg, icon: 'none' })
} finally { this.logging=false }
}
,
copy(text){
try { uni.setClipboardData({ data: String(text||'') }); uni.showToast({ title: '已复制', icon: 'none' }) } catch(e) {}
}

598
frontend/pages/my/vip.vue
View File

@@ -1,94 +1,116 @@
<template>
<view class="vip-page" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh;">
<!-- 主要内容区域 -->
<view class="main-content">
<!-- VIP状态头部 -->
<view class="vip-header">
<view class="vip-crown">
<text class="crown-icon">👑</text>
</view>
<text class="vip-title">{{ isVip ? 'VIP会员' : '成为VIP会员' }}</text>
<text class="vip-subtitle">{{ isVip ? '尊享专属特权' : '解锁更多权益' }}</text>
<view class="vip-status" :class="{ active: isVip }">
<text class="status-text">{{ isVip ? 'VIP会员' : '普通用户' }}</text>
</view>
<view class="vip-page">
<view class="vip-hero">
<image class="hero-icon" src="/static/icons/icons8-vip-48 (1).png" mode="aspectFit" />
<view class="hero-text">
<text class="hero-title">{{ isVip ? 'VIP会员' : '升级 VIP 会员' }}</text>
<text class="hero-subtitle">{{ isVip ? '尊享完整数据与高效体验' : '开通后可查看全部历史数据并解锁高级功能' }}</text>
</view>
<!-- 会员功能 -->
<view class="features-section">
<text class="section-title">会员功能</text>
<view class="feature-card">
<view class="feature-icon">💾</view>
<text class="feature-text">永久存储数据</text>
</view>
</view>
<!-- VIP状态信息 -->
<view v-if="isVip" class="vip-info">
<view class="info-card">
<text class="info-label">会员状态</text>
<text class="info-value active">已激活</text>
</view>
<view class="info-card">
<text class="info-label">有效期至</text>
<text class="info-value">{{ expireDisplay }}</text>
</view>
</view>
<!-- 价格和购买 -->
<view v-if="!isVip" class="purchase-section">
<view class="price-card">
<text class="price-label">会员价格</text>
<view class="price-display">
<text class="price-symbol">¥</text>
<text class="price-amount">{{ price }}</text>
<text class="price-period">/月</text>
</view>
</view>
<button class="purchase-btn" @click="onPay">
<text class="btn-text">立即开通VIP</text>
</button>
<view class="status-pill" :class="{ active: isVip }">
<text>{{ isVip ? '已开通' : '普通用户' }}</text>
</view>
</view>
<!-- 背景装饰 -->
<view class="bg-decoration">
<view class="decoration-circle circle-1"></view>
<view class="decoration-circle circle-2"></view>
<view class="decoration-circle circle-3"></view>
<view class="vip-summary" v-if="isVip">
<view class="summary-item">
<text class="summary-label">会员状态</text>
<text class="summary-value success">已激活</text>
</view>
<view class="summary-item">
<text class="summary-label">有效期至</text>
<text class="summary-value">{{ expireDisplay }}</text>
</view>
</view>
<view class="vip-summary" v-else>
<view class="summary-item">
<text class="summary-label">当前身份</text>
<text class="summary-value">普通用户</text>
</view>
<view class="summary-item">
<text class="summary-label">会员价格</text>
<text class="summary-value highlight">¥{{ priceDisplay }}/月</text>
</view>
</view>
<view class="benefit-section">
<view class="section-header">
<text class="section-title">会员特权</text>
<text class="section-subtitle">聚焦数据留存与专业形象，让经营更有底气</text>
</view>
<view class="benefit-grid">
<view v-for="item in benefits" :key="item.key" class="benefit-card">
<image v-if="item.icon" :src="item.icon" class="benefit-icon" mode="aspectFit" />
<text class="benefit-title">{{ item.title }}</text>
<text class="benefit-desc">{{ item.desc }}</text>
</view>
</view>
</view>
<view v-if="!isVip" class="purchase-card">
<view class="purchase-text">
<text class="purchase-title">立即升级 VIP</text>
<text class="purchase-desc">不限历史数据、专属标识，助您高效管账</text>
</view>
<button class="purchase-btn" @click="onPay">
<text>立即开通</text>
</button>
</view>
</view>
</template>
<script>
import { VIP_PRICE_PER_MONTH } from '../../common/config.js'
import { get, post } from '../../common/http.js'
export default {
data(){
return {
isVip: false,
expire: '',
price: VIP_PRICE_PER_MONTH
isVip: false,
expire: '',
price: 0,
benefits: []
}
},
onShow(){
this.loadVip()
this.composeBenefits()
},
computed: {
expireDisplay(){
const s = String(this.expire || '')
return s || '11年11月11日'
},
priceDisplay(){
const n = Number(this.price)
return Number.isFinite(n) && n > 0 ? n.toFixed(2) : '0.00'
}
},
methods: {
loadVip(){
try {
this.isVip = String(uni.getStorageSync('USER_VIP_IS_VIP') || 'false').toLowerCase() === 'true'
this.expire = uni.getStorageSync('USER_VIP_END') || ''
} catch(e) {}
composeBenefits(){
this.benefits = [
{ key: 'history', title: '完整历史留存', desc: '无限期保留交易、库存与客户数据', icon: '/static/icons/icons8-graph-report-50.png' },
{ key: 'analysis', title: '高级统计面板', desc: '秒级汇总销售毛利，掌握生意节奏', icon: '/static/icons/icons8-profit-50.png' },
{ key: 'priority', title: '优先客服支持', desc: '遇到问题优先处理，响应更迅速', icon: '/static/icons/icons8-account-male-100.png' }
]
},
onPay(){
uni.showToast({ title: '静态页面演示：支付功能未接入', icon: 'none' })
async loadVip(){
try {
const data = await get('/api/vip/status')
this.isVip = !!data?.isVip
this.expire = data?.expireAt || ''
if (typeof data?.price === 'number') this.price = data.price
} catch(e) {
// 保底：不回退到硬编码价格，仅展示0并提示可开通
this.isVip = false
}
},
async onPay(){
try {
await post('/api/vip/pay', {})
uni.showToast({ title: '已开通VIP', icon: 'success' })
await this.loadVip()
} catch(e) {
uni.showToast({ title: String(e.message || '开通失败'), icon: 'none' })
}
}
}
}
@@ -96,272 +118,238 @@ export default {
<style lang="scss">
page {
background: #1a1a2e !important;
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 60%) !important;
}
.vip-page {
min-height: 100vh;
width: 100%;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
overflow: hidden;
padding: 32rpx 24rpx 120rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 28rpx;
}
.main-content {
.vip-hero {
display: flex;
align-items: center;
gap: 20rpx;
padding: 26rpx 28rpx;
border-radius: 24rpx;
background: rgba(255,255,255,0.98);
border: 2rpx solid #edf2f9;
box-shadow: 0 10rpx 30rpx rgba(76,141,255,0.12);
}
.hero-icon {
width: 88rpx;
height: 88rpx;
border-radius: 24rpx;
background: #f0f6ff;
padding: 12rpx;
}
.hero-text {
flex: 1;
padding: 60rpx 40rpx 40rpx;
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
gap: 8rpx;
}
/* VIP头部区域 */
.vip-header {
text-align: center;
margin-bottom: 80rpx;
.vip-crown {
margin-bottom: 30rpx;
.crown-icon {
font-size: 80rpx;
filter: drop-shadow(0 4rpx 12rpx rgba(255, 215, 0, 0.3));
}
}
.vip-title {
display: block;
font-size: 48rpx;
font-weight: 700;
color: #fff;
margin-bottom: 16rpx;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.vip-subtitle {
display: block;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40rpx;
}
.vip-status {
display: inline-block;
padding: 16rpx 32rpx;
border-radius: 50rpx;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10rpx);
border: 1rpx solid rgba(255, 215, 0, 0.4);
&.active {
background: linear-gradient(45deg, #ffd700, #ffed4e);
border: 1rpx solid rgba(255, 215, 0, 0.3);
.status-text {
color: #333;
}
}
.status-text {
font-size: 26rpx;
font-weight: 600;
color: #fff;
}
}
.hero-title {
font-size: 36rpx;
font-weight: 800;
color: $uni-color-primary;
letter-spacing: 1rpx;
}
/* 会员功能区域 */
.features-section {
margin-bottom: 60rpx;
.section-title {
display: block;
font-size: 36rpx;
font-weight: 600;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
}
.feature-card {
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(15rpx);
border-radius: 24rpx;
padding: 40rpx;
text-align: center;
border: 1rpx solid rgba(255, 215, 0, 0.3);
transition: all 0.3s ease;
&:hover {
transform: translateY(-4rpx);
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
}
.feature-icon {
font-size: 60rpx;
margin-bottom: 24rpx;
filter: drop-shadow(0 4rpx 12rpx rgba(255, 215, 0, 0.3));
}
.feature-text {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #fff;
letter-spacing: 1rpx;
}
}
.hero-subtitle {
font-size: 26rpx;
color: #5175b5;
line-height: 36rpx;
}
/* VIP信息卡片 */
.vip-info {
margin-bottom: 60rpx;
.info-card {
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(15rpx);
border-radius: 20rpx;
padding: 32rpx;
margin-bottom: 20rpx;
border: 1rpx solid rgba(255, 215, 0, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
.info-label {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
}
.info-value {
font-size: 30rpx;
font-weight: 600;
color: #fff;
&.active {
color: #ffd700;
}
}
}
.status-pill {
flex: 0 0 auto;
padding: 12rpx 20rpx;
border-radius: 999rpx;
background: #e6edfb;
color: #4463a6;
font-size: 24rpx;
font-weight: 700;
border: 2rpx solid rgba(76,141,255,0.2);
}
/* 购买区域 */
.purchase-section {
.price-card {
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(15rpx);
border-radius: 24rpx;
padding: 40rpx;
text-align: center;
margin-bottom: 40rpx;
border: 1rpx solid rgba(255, 215, 0, 0.3);
.price-label {
display: block;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 16rpx;
}
.price-display {
display: flex;
align-items: baseline;
justify-content: center;
gap: 8rpx;
.price-symbol {
font-size: 32rpx;
color: #ffd700;
font-weight: 600;
}
.price-amount {
font-size: 60rpx;
font-weight: 700;
color: #ffd700;
}
.price-period {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
}
}
}
.purchase-btn {
width: 100%;
height: 96rpx;
background: linear-gradient(45deg, #ffd700, #ffed4e);
border-radius: 50rpx;
border: none;
box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3);
transition: all 0.3s ease;
&:active {
transform: translateY(2rpx);
box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
}
.btn-text {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
.status-pill.active {
background: #4c8dff;
color: #fff;
border-color: #4c8dff;
}
/* 背景装饰 */
.bg-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
.decoration-circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
&.circle-1 {
width: 300rpx;
height: 300rpx;
top: -150rpx;
right: -100rpx;
}
&.circle-2 {
width: 200rpx;
height: 200rpx;
bottom: 200rpx;
left: -100rpx;
}
&.circle-3 {
width: 150rpx;
height: 150rpx;
top: 50%;
right: 50rpx;
transform: translateY(-50%);
}
}
.vip-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 16rpx;
background: rgba(255,255,255,0.98);
padding: 24rpx;
border-radius: 24rpx;
border: 2rpx solid #eef3fb;
box-shadow: 0 8rpx 24rpx rgba(99,132,191,0.10);
}
.summary-item {
background: #f6f9ff;
border-radius: 18rpx;
padding: 22rpx 24rpx;
display: flex;
flex-direction: column;
gap: 12rpx;
border: 2rpx solid rgba(76,141,255,0.12);
}
.summary-label {
font-size: 24rpx;
color: #5f7394;
}
.summary-value {
font-size: 30rpx;
font-weight: 700;
color: #1f2c3d;
}
.summary-value.success {
color: #1ead91;
}
.summary-value.highlight {
color: #2f58d1;
}
.benefit-section {
background: rgba(255,255,255,0.98);
border-radius: 24rpx;
padding: 28rpx;
border: 2rpx solid #edf2f9;
box-shadow: 0 12rpx 28rpx rgba(32,75,143,0.10);
display: flex;
flex-direction: column;
gap: 24rpx;
}
.section-header {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.section-title {
font-size: 34rpx;
font-weight: 800;
color: $uni-text-color;
}
.section-subtitle {
font-size: 24rpx;
color: #5f7394;
line-height: 34rpx;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20rpx;
}
.benefit-card {
background: #f7faff;
border-radius: 20rpx;
padding: 24rpx 20rpx;
border: 2rpx solid rgba(76,141,255,0.12);
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14rpx;
}
.benefit-icon {
width: 48rpx;
height: 48rpx;
}
.benefit-title {
font-size: 28rpx;
font-weight: 700;
color: $uni-text-color;
}
.benefit-desc {
font-size: 24rpx;
line-height: 34rpx;
color: #5f7394;
}
.purchase-card {
margin-top: auto;
background: linear-gradient(135deg, rgba(76,141,255,0.14) 0%, rgba(76,141,255,0.06) 100%);
border-radius: 28rpx;
padding: 30rpx 28rpx;
display: flex;
align-items: center;
gap: 24rpx;
border: 2rpx solid rgba(76,141,255,0.18);
box-shadow: 0 10rpx 24rpx rgba(76,141,255,0.15);
}
.purchase-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 10rpx;
}
.purchase-title {
font-size: 32rpx;
font-weight: 800;
color: $uni-color-primary;
}
.purchase-desc {
font-size: 24rpx;
color: #4463a6;
line-height: 34rpx;
}
.purchase-btn {
flex: 0 0 auto;
padding: 20rpx 36rpx;
border-radius: 999rpx;
border: none;
background: linear-gradient(135deg, #4788ff 0%, #2d6be6 100%);
color: #fff;
font-size: 28rpx;
font-weight: 700;
box-shadow: 0 10rpx 22rpx rgba(45,107,230,0.20);
}
.purchase-btn:active {
opacity: 0.88;
}
/* 响应式调整 */
@media (max-width: 375px) {
.benefits-grid {
.vip-summary {
grid-template-columns: 1fr;
}
.vip-header .vip-title {
font-size: 42rpx;
.benefit-grid {
grid-template-columns: 1fr;
}
.main-content {
padding: 40rpx 30rpx;
.purchase-card {
flex-direction: column;
align-items: stretch;
}
.status-pill {
display: none;
}
}
</style>