uni-halo/pagesA/contact/contact.vue

<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>
				<text class="ml-12 halocoloricon halocoloricon-wechat"></text>
				<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>
</template>

<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.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: ''
				},

				{
					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 + ' 已复制！');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.app-page {
	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;
		}
	}
}
</style>