更新：增加“我的”相关功能
This commit is contained in:
239
pages/user/about/index.vue
Normal file
239
pages/user/about/index.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<view class="about-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<nav-bar :title="$t('user.about')"></nav-bar>
|
||||
|
||||
<view class="about-content">
|
||||
<!-- 应用信息 -->
|
||||
<view class="app-info">
|
||||
<image
|
||||
src="/static/icon/home_icon_logo.jpg"
|
||||
mode="aspectFit"
|
||||
class="app-logo"
|
||||
/>
|
||||
<text v-if="appVersion" class="app-version">
|
||||
{{ $t('user.version') }} {{ appVersion }}
|
||||
</text>
|
||||
<!-- 应用简介 -->
|
||||
<view class="app-description">
|
||||
<text>{{ $t('user.appDescription') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<!-- <view class="contact-info">
|
||||
<view class="contact-item">
|
||||
<text class="label">{{ $t('user.hotline') }}</text>
|
||||
<view class="value-wrapper">
|
||||
<text class="value">022-24142321</text>
|
||||
<image
|
||||
src="/static/icon/tel.png"
|
||||
mode="aspectFit"
|
||||
class="tel-icon"
|
||||
@click="makePhoneCall"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<wd-cell-group border class="contact-info">
|
||||
<wd-cell :title="$t('user.hotline')" clickable @click="handlePhoneCall">
|
||||
022-24142321
|
||||
<img src="/static/icon/tel.png" width="23" height="23" />
|
||||
</wd-cell>
|
||||
<!-- <wd-cell :title="$t('user.wechat')" value="yilujiankangkefu" clickable @click="handlePhoneCall" /> -->
|
||||
</wd-cell-group>
|
||||
|
||||
<!-- 隐私政策链接 -->
|
||||
<view class="privacy-link">
|
||||
<text class="link-text" @click="openPrivacyPolicy">
|
||||
{{ $t('user.privacyPolicy') }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { makePhoneCall } from '@/utils/index'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 导航栏高度
|
||||
const statusBarHeight = ref(0)
|
||||
const navbarHeight = ref('44px')
|
||||
|
||||
// 应用版本信息
|
||||
const appVersion = ref('')
|
||||
|
||||
/**
|
||||
* 获取应用版本信息
|
||||
*/
|
||||
const getAppVersion = () => {
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.getProperty(plus.runtime.appid, (info: any) => {
|
||||
appVersion.value = `${info.name} ${info.version}`
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
appVersion.value = '1.0.0'
|
||||
// #endif
|
||||
}
|
||||
|
||||
/**
|
||||
* 拨打电话
|
||||
*/
|
||||
const handlePhoneCall = () => {
|
||||
makePhoneCall('022-24142321', t('user.hotline'), t)
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开隐私政策
|
||||
*/
|
||||
const openPrivacyPolicy = () => {
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openURL('https://www.amazinglimited.com/privacy.html')
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
uni.showToast({
|
||||
title: '请在APP中查看',
|
||||
icon: 'none'
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getAppVersion()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$theme-color: #54a966;
|
||||
|
||||
.about-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7faf9;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
|
||||
.navbar-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
background: #fff;
|
||||
border-radius: 15rpx;
|
||||
padding: 60rpx 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.app-logo {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-version {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: #fff;
|
||||
border-radius: 15rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.tel-icon {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-description {
|
||||
padding: 30rpx 30rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 40rpx;
|
||||
text-indent: 2em;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.privacy-link {
|
||||
text-align: right;
|
||||
padding: 30rpx;
|
||||
|
||||
.link-text {
|
||||
font-size: 28rpx;
|
||||
color: $theme-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user