다음의 미러
https://github.com/ialley-workshop-open/uni-halo.git
동기화됨 2026-06-10 11:59:28 +08:00
refactor: 将页面配置通过插件动态化配置（plugin-uni-halo）
이 커밋은 다음에 포함됨:
小莫唐尼
+251
-238
@@ -1,256 +1,269 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col felx-center bg-white">
|
||||
<!-- 信息 -->
|
||||
<view class="profile flex flex-col flex-center pa-36">
|
||||
<view class="avatar"><image class="avatar-img" :src="bloggerInfo.avatar" mode="aspectFill"></image></view>
|
||||
<view class="nickname mt-24 text-weight-b text-size-g">{{ bloggerInfo.nickname }}</view>
|
||||
<view class="desc mt-24 text-size-m text-grey-darken-3">
|
||||
{{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}
|
||||
</view>
|
||||
<!-- 联系图标 -->
|
||||
<view class="mt-24 contact-icons">
|
||||
<!-- 放全部：似乎显得有点拥挤 -->
|
||||
<!-- <block v-for="(item, index) in result" :key="index"><text v-if="item.value" class="halocoloricon" :class="[item.icon, { 'ml-12': index != 0 }]"></text></block> -->
|
||||
<!-- 考虑放几个常用的就行 -->
|
||||
<text class="halocoloricon halocoloricon-qq"></text>
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<text class="ml-12 halocoloricon halocoloricon-wechat"></text>
|
||||
<!-- #endif -->
|
||||
<text class="ml-12 halocoloricon halocoloricon-GitHub"></text>
|
||||
<text class="ml-12 halocoloricon halocoloricon-gitee"></text>
|
||||
<text class="ml-12 halocoloricon halocoloricon-ic_email_round"></text>
|
||||
</view>
|
||||
<view v-if="false" class="mt-24 ">
|
||||
<tm-button theme="bg-gradient-light-blue-accent" size="m" openType="contact">在线客服联系</tm-button>
|
||||
<tm-button theme="bg-gradient-orange-accent" size="m" @click="fnOnToWeb">访问PC端博客</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 社交联系方式列表 -->
|
||||
<view class="contact ma-50 mt-0 pt-12">
|
||||
<block v-for="(item, index) in result" :key="index">
|
||||
<view v-if="item.value" class="item mt-24 flex" @click="fnOnClick(item)">
|
||||
<view class="left">
|
||||
<text class="icon halocoloricon" :class="[item.icon]"></text>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="right flex-1">{{ item.value }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="app-page flex flex-col felx-center bg-white">
|
||||
<!-- 信息 -->
|
||||
<view class="profile flex flex-col flex-center pa-36">
|
||||
<view class="avatar">
|
||||
<image class="avatar-img" :src="bloggerInfo.avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="nickname mt-24 text-weight-b text-size-g">{{ bloggerInfo.nickname }}</view>
|
||||
<view class="desc mt-24 text-size-m text-grey-darken-3">
|
||||
{{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}
|
||||
</view>
|
||||
<!-- 联系图标 -->
|
||||
<view class="mt-24 contact-icons">
|
||||
<!-- 放全部：似乎显得有点拥挤 -->
|
||||
<!-- <block v-for="(item, index) in result" :key="index"><text v-if="item.value" class="halocoloricon" :class="[item.icon, { 'ml-12': index != 0 }]"></text></block> -->
|
||||
<!-- 考虑放几个常用的就行 -->
|
||||
<text class="halocoloricon halocoloricon-qq"></text>
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<text class="ml-12 halocoloricon halocoloricon-wechat"></text>
|
||||
<!-- #endif -->
|
||||
<text class="ml-12 halocoloricon halocoloricon-GitHub"></text>
|
||||
<text class="ml-12 halocoloricon halocoloricon-gitee"></text>
|
||||
<text class="ml-12 halocoloricon halocoloricon-ic_email_round"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 社交联系方式列表 -->
|
||||
<view class="contact ma-50 mt-0 pt-12">
|
||||
<block v-if="calcIsNotEmpty">
|
||||
|
||||
<block v-for="(item, index) in result" :key="index">
|
||||
<view v-if="item.value" class="item mt-24 flex" @click="fnOnClick(item)">
|
||||
<view class="left">
|
||||
<text class="icon halocoloricon" :class="[item.icon]"></text>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="right flex-1">{{ item.value }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<view v-else class="mt-12 pt-12">
|
||||
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无联系方式"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0
|
||||
},
|
||||
result: [
|
||||
{
|
||||
key: 'qq',
|
||||
icon: 'halocoloricon-qq',
|
||||
name: '企鹅号',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'wechat',
|
||||
icon: 'halocoloricon-wechat',
|
||||
name: '微信号',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'github',
|
||||
icon: 'halocoloricon-GitHub',
|
||||
name: 'Github',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'gitee',
|
||||
icon: 'halocoloricon-gitee',
|
||||
name: 'Gitee',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'bilibili',
|
||||
icon: 'halocoloricon-bilibili',
|
||||
name: 'Bilibili',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'csdn',
|
||||
icon: 'halocoloricon-csdn1',
|
||||
name: 'CSDN',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'blog',
|
||||
icon: 'halocoloricon-url-monitor',
|
||||
name: '博客地址',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'juejin',
|
||||
icon: 'halocoloricon-juejin',
|
||||
name: '掘金地址',
|
||||
value: ''
|
||||
},
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmButton,
|
||||
tmEmpty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0
|
||||
},
|
||||
result: [
|
||||
{
|
||||
key: 'qq',
|
||||
icon: 'halocoloricon-qq',
|
||||
name: '企鹅号',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'wechat',
|
||||
icon: 'halocoloricon-wechat',
|
||||
name: '微信号',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'github',
|
||||
icon: 'halocoloricon-GitHub',
|
||||
name: 'Github',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'gitee',
|
||||
icon: 'halocoloricon-gitee',
|
||||
name: 'Gitee',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'bilibili',
|
||||
icon: 'halocoloricon-bilibili',
|
||||
name: 'Bilibili',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'csdn',
|
||||
icon: 'halocoloricon-csdn1',
|
||||
name: 'CSDN',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'blog',
|
||||
icon: 'halocoloricon-url-monitor',
|
||||
name: '博客地址',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'juejin',
|
||||
icon: 'halocoloricon-juejin',
|
||||
name: '掘金地址',
|
||||
value: ''
|
||||
},
|
||||
|
||||
{
|
||||
key: 'weibo',
|
||||
icon: 'halocoloricon-social-weibo',
|
||||
name: '微博地址',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
icon: 'halocoloricon-ic_email_round',
|
||||
name: '邮箱地址',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 获取博主信息
|
||||
bloggerInfo() {
|
||||
let blogger = this.$tm.vx.getters().getBlogger;
|
||||
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
|
||||
return blogger;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('联系博主');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
for (let key in this.$haloConfig.social) {
|
||||
this.result.find(x => x.key == key).value = this.$haloConfig.social[key];
|
||||
}
|
||||
},
|
||||
fnOnToWeb() {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pagesC/website/website?data=' +
|
||||
JSON.stringify({
|
||||
title: this.$haloConfig.title,
|
||||
url: this.$haloConfig.social.blog
|
||||
})
|
||||
});
|
||||
},
|
||||
fnOnClick(item) {
|
||||
if (this.globalAppSettings.contact.isLinkCopy && this.$utils.checkIsUrl(item.value)) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pagesC/website/website?data=' +
|
||||
JSON.stringify({
|
||||
title: item.name,
|
||||
url: item.value
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.$utils.copyText(item.value, item.name + ' 已复制！');
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
key: 'weibo',
|
||||
icon: 'halocoloricon-social-weibo',
|
||||
name: '微博地址',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
icon: 'halocoloricon-ic_email_round',
|
||||
name: '邮箱地址',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
authorConfig() {
|
||||
return this.$tm.vx.getters().getConfigs.authorConfig;
|
||||
},
|
||||
bloggerInfo() {
|
||||
let blogger = this.authorConfig.blogger;
|
||||
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
|
||||
return blogger;
|
||||
},
|
||||
socialConfig() {
|
||||
return this.authorConfig.social
|
||||
},
|
||||
calcIsNotEmpty() {
|
||||
return this.result.some((item) => item.value !== "");
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('联系博主');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
for (let key in this.socialConfig) {
|
||||
this.result.find(x => x.key === key).value = this.socialConfig[key];
|
||||
}
|
||||
},
|
||||
fnOnClick(item) {
|
||||
if (this.globalAppSettings.contact.isLinkCopy && this.$utils.checkIsUrl(item.value)) {
|
||||
uni.navigateTo({
|
||||
url: '/pagesC/website/website?data=' +
|
||||
JSON.stringify({
|
||||
title: item.name,
|
||||
url: item.value
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.$utils.copyText(item.value, item.name + ' 已复制！');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 160rpx;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 160rpx;
|
||||
}
|
||||
.profile {
|
||||
.avatar {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid #fff;
|
||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.07);
|
||||
overflow: hidden;
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.nickname {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.contact-icons {
|
||||
.halocoloricon {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #f2f2f2;
|
||||
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fafafa;
|
||||
// background-color: rgba(0, 0, 0, 0.05);
|
||||
// padding-bottom: 12rpx;
|
||||
// border-bottom: 2rpx solid #eee;
|
||||
padding: 16rpx;
|
||||
.left {
|
||||
position: relative;
|
||||
width: 140rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
// background-color: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 12rpx 0 0 12rpx;
|
||||
&::after {
|
||||
display: none;
|
||||
content: ':';
|
||||
position: absolute;
|
||||
right: 18rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.icon {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.name {
|
||||
margin-left: 10rpx;
|
||||
color: #555;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
font-size: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
.avatar {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid #fff;
|
||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.07);
|
||||
overflow: hidden;
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-icons {
|
||||
.halocoloricon {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #f2f2f2;
|
||||
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fafafa;
|
||||
// background-color: rgba(0, 0, 0, 0.05);
|
||||
// padding-bottom: 12rpx;
|
||||
// border-bottom: 2rpx solid #eee;
|
||||
padding: 16rpx;
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
width: 140rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
// background-color: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 12rpx 0 0 12rpx;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
content: ':';
|
||||
position: absolute;
|
||||
right: 18rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 10rpx;
|
||||
color: #555;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
font-size: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
새 이슈에서 참조
사용자 차단