435 lines
8.4 KiB
Vue
435 lines
8.4 KiB
Vue
<template>
|
|
<view class="about-page" :class="`theme-${themeMode}`">
|
|
<view class="hero-card">
|
|
<view class="hero-logo">
|
|
<u-icon name="info-circle-fill" color="#ffffff" size="46" />
|
|
</view>
|
|
<view class="hero-content">
|
|
<text class="hero-tag">APP 原型</text>
|
|
<text class="hero-title">关于我们</text>
|
|
<text class="hero-subtitle">扫描、提报、维修与统计的一体化现场作业助手</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-card">
|
|
<text class="section-title">产品信息</text>
|
|
<view class="info-list">
|
|
<view class="info-row">
|
|
<text class="info-label">产品名称</text>
|
|
<text class="info-value">ScanApp</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">适用场景</text>
|
|
<text class="info-value">扫码录入 / 异常处理 / 维修协同</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">当前版本</text>
|
|
<text class="info-value">v{{ appVersion }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-card">
|
|
<text class="section-title">协议与资质</text>
|
|
<view class="nav-list">
|
|
<view v-for="item in policyItems" :key="item.title" class="nav-row" :class="{ tappable: item.readable }" @tap="item.readable && handlePolicyTap(item)">
|
|
<text class="nav-title">{{ item.title }}</text>
|
|
<view class="nav-right">
|
|
<text v-if="item.value" class="nav-value">{{ item.value }}</text>
|
|
<u-icon v-if="item.readable" class="nav-arrow" name="arrow-right" color="#c1c7d0" size="24" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-card">
|
|
<text class="section-title">联系与支持</text>
|
|
<view class="contact-stack">
|
|
<view v-for="item in contactItems" :key="item.label" class="contact-block">
|
|
<text class="contact-label">{{ item.label }}</text>
|
|
<view class="email-row">
|
|
<text class="email-value">{{ item.email || '未配置' }}</text>
|
|
<view v-if="item.email" class="copy-btn" @tap="copyEmail(item.email)">复制</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getCurrentAppVersion } from '@/api/app-update.js'
|
|
import { getConfigByCode } from '@/api/system-config.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
appVersion: getCurrentAppVersion(),
|
|
policyItems: [
|
|
{ title: '用户服务协议', value: '', content: '', readable: true },
|
|
{ title: '隐私政策', value: '', content: '', readable: true },
|
|
{ title: '备案号', value: '', content: '', readable: false }
|
|
],
|
|
contactItems: [
|
|
{ label: '违法和不良信息举报邮箱', email: '' },
|
|
{ label: '商务合作', email: '' }
|
|
],
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadAboutConfig()
|
|
},
|
|
onShow() {
|
|
uni.setNavigationBarColor({
|
|
frontColor: this.themeMode === 'dark' ? '#ffffff' : '#000000',
|
|
backgroundColor: this.themeMode === 'dark' ? '#151923' : '#eef6ff'
|
|
})
|
|
},
|
|
methods: {
|
|
async loadAboutConfig() {
|
|
try {
|
|
const config = await getConfigByCode('app_about_setting')
|
|
this.policyItems = [
|
|
{ title: '用户服务协议', value: config.user_service_agreement ? '查看' : '', content: config.user_service_agreement || '', readable: true },
|
|
{ title: '隐私政策', value: config.privacy_policy ? '查看' : '', content: config.privacy_policy || '', readable: true },
|
|
{ title: '备案号', value: config.icp_number || '', content: '', readable: false }
|
|
]
|
|
this.contactItems = [
|
|
{ label: '违法和不良信息举报邮箱', email: config.report_email || '' },
|
|
{ label: '商务合作', email: config.business_contact || '' }
|
|
]
|
|
} catch (error) {
|
|
console.error('[scanapp] 获取关于我们配置失败', error)
|
|
}
|
|
},
|
|
handlePolicyTap(item) {
|
|
if (!item.content) {
|
|
uni.showToast({ title: '暂未配置', icon: 'none' })
|
|
return
|
|
}
|
|
uni.setStorageSync('scanapp_policy_detail', {
|
|
title: item.title,
|
|
content: item.content
|
|
})
|
|
uni.navigateTo({ url: '/pages/settings/policy' })
|
|
},
|
|
copyEmail(email) {
|
|
uni.setClipboardData({
|
|
data: email,
|
|
success: () => {
|
|
uni.showToast({ title: '已复制', icon: 'success' })
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.about-page {
|
|
min-height: 100vh;
|
|
padding: 28rpx 24rpx 48rpx;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(180deg, #eef6ff 0%, #f4f6fb 36%, #f4f6fb 100%);
|
|
}
|
|
|
|
.hero-card,
|
|
.section-card {
|
|
padding: 34rpx;
|
|
border-radius: 28rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.75);
|
|
background: #ffffff;
|
|
box-shadow: 0 16rpx 40rpx rgba(23, 35, 61, 0.06);
|
|
}
|
|
|
|
.section-card {
|
|
margin-top: 28rpx;
|
|
}
|
|
|
|
.hero-card {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-content {
|
|
min-width: 0;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.hero-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 28rpx;
|
|
background: linear-gradient(135deg, #1677ff 0%, #35bfa3 100%);
|
|
flex: none;
|
|
}
|
|
|
|
.hero-tag,
|
|
.hero-subtitle,
|
|
.info-label,
|
|
.feature-desc,
|
|
.contact-label,
|
|
.contact-value,
|
|
.nav-title,
|
|
.nav-value,
|
|
.email-value {
|
|
display: block;
|
|
}
|
|
|
|
.hero-tag {
|
|
color: #1677ff;
|
|
font-size: 20rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero-title,
|
|
.section-title,
|
|
.feature-title {
|
|
display: block;
|
|
color: #17233d;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hero-title {
|
|
margin-top: 10rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
margin-top: 10rpx;
|
|
color: #7d8798;
|
|
font-size: 20rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 26rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.info-row,
|
|
.contact-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 18rpx 0;
|
|
border-bottom: 1rpx solid #edf1f6;
|
|
}
|
|
|
|
.info-value,
|
|
.contact-value {
|
|
min-width: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.info-row:last-child,
|
|
.contact-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.info-label,
|
|
.contact-label {
|
|
color: #7d8798;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.info-value,
|
|
.contact-value {
|
|
color: #17233d;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.feature-item {
|
|
padding: 22rpx;
|
|
border-radius: 20rpx;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.feature-desc {
|
|
margin-top: 8rpx;
|
|
color: #7d8798;
|
|
font-size: 20rpx;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.nav-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1rpx solid #edf1f6;
|
|
}
|
|
|
|
.nav-title {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.nav-title {
|
|
color: #17233d;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.nav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: none;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.nav-value {
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.nav-arrow {
|
|
flex: none;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.nav-value {
|
|
color: #5f6b7a;
|
|
font-size: 22rpx;
|
|
line-height: 1.45;
|
|
text-align: right;
|
|
}
|
|
|
|
.contact-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22rpx;
|
|
}
|
|
|
|
.contact-block + .contact-block {
|
|
padding-top: 6rpx;
|
|
}
|
|
|
|
.contact-label {
|
|
margin-bottom: 14rpx;
|
|
color: #17233d;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.email-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 22rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.email-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.copy-btn {
|
|
flex: none;
|
|
}
|
|
|
|
.email-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: #8f98a8;
|
|
font-size: 22rpx;
|
|
line-height: 1.45;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.copy-btn {
|
|
flex: none;
|
|
padding: 0 8rpx;
|
|
color: #7d8798;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.tappable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-dark.about-page {
|
|
background: #151923;
|
|
}
|
|
|
|
.theme-dark .policy-fullscreen {
|
|
background: #151923;
|
|
}
|
|
|
|
.theme-dark .policy-header {
|
|
border-color: #364152;
|
|
}
|
|
|
|
.theme-dark .policy-back,
|
|
.theme-dark .policy-header-title,
|
|
.theme-dark .policy-title {
|
|
color: #f2f5fa;
|
|
}
|
|
|
|
.theme-dark .policy-content {
|
|
color: #c4cede;
|
|
}
|
|
|
|
.theme-dark .hero-card,
|
|
.theme-dark .section-card {
|
|
border-color: #364152;
|
|
background: #222936;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.theme-dark .feature-item,
|
|
.theme-dark .email-row {
|
|
background: #1c2431;
|
|
}
|
|
|
|
.theme-dark .hero-title,
|
|
.theme-dark .section-title,
|
|
.theme-dark .feature-title,
|
|
.theme-dark .info-value,
|
|
.theme-dark .contact-value,
|
|
.theme-dark .nav-title,
|
|
.theme-dark .contact-label {
|
|
color: #f2f5fa;
|
|
}
|
|
|
|
.theme-dark .hero-subtitle,
|
|
.theme-dark .info-label,
|
|
.theme-dark .feature-desc,
|
|
.theme-dark .nav-value,
|
|
.theme-dark .email-value,
|
|
.theme-dark .copy-btn {
|
|
color: #aeb9ca;
|
|
}
|
|
|
|
.theme-dark .info-row,
|
|
.theme-dark .contact-item,
|
|
.theme-dark .nav-row {
|
|
border-color: #364152;
|
|
}
|
|
</style>
|