question_uniapp/pages/about/help.vue

<template>
	<view class="page">
		<nav-bar :title="$t('help.title')" bgColor="#fff"></nav-bar>
		<view style="padding: 20px 15px; font-size: 16px; color: #3d3d3d;">
			{{$t('help.text1')}}
		</view>
		<!-- <view class="cell_list" @click="open('qq_group')">
			<view class="cell_left txt">
				<image src="/static/images/h1.png" mode="cover"
					style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				QQ group
			</view>
			<view class="cell_right arrow"></view>
		</view> -->
		<view class="cell_list" @click="open('telegram_group')">
			<view class="cell_left txt">
				<image src="/static/images/h2.png" mode="cover"
					style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Telegram
			</view>
			<view class="cell_right arrow"></view>
		</view>
		<!-- <view class="cell_list" @click="open('sigua_group')">
			<view class="cell_left txt">
				<image src="/static/images/h3.png" mode="cover"
					style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Loofah group
			</view>
			<view class="cell_right arrow"></view>
		</view> -->
		<view style="padding: 20px 15px; font-size: 16px; color: #3d3d3d;">
			{{$t('help.text2')}}
		</view>
		<view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h4.png" mode="cover"
					style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Binance Download
			</view>
			<view class="cell_right" @click="copy(init.wallet_download['Binance'])">Copy URL</view>
		</view>
		<view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h5.png" mode="cover"
					style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Okex Download
			</view>
			<view class="cell_right" @click="copy(init.wallet_download['Okex'])">Copy URL</view>
		</view>
		<view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h6.png" mode="cover"
					style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				TokenPocket Download
			</view>
			<view class="cell_right" @click="copy(init.wallet_download['TokenPocket'])">Copy URL</view>
		</view>
		<!-- <view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h3.png" mode="cover"
					style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Open Sesame Download
			</view>
			<view class="cell_right" @click="copy(init.wallet_download['Open Sesame'])">Copy URL</view>
		</view> -->

		<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
			<view class="dialog">
				<view class="title">{{dialogTitle}}</view>
				<view style="padding-bottom: 20px; width: 100%;" v-for="(value, key) in list" :key="key">
					<view class="v1" style="margin-left: 10px;">{{key}}:</view>
					<view class="v1" style="margin-left: 40rpx;">{{value}} </view>
					<image style="width: 36rpx; height: 30rpx; float: right; margin-left: 20rpx; margin-top: 10rpx;"
						src="/static/images/copy.png" @click="copy(value)" mode="cover"></image>
					<view style="clear: both;"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				init: {},
				dialogTitle: 'Select a network',
				list: {},
				type: '',
			};
		},
		computed: {},
		//第一次加载
		onLoad(e) {
			this.$http.get('/api/common/init?lang=' + this.$i18n.locale).then(res => {
				this.init = res.data;
			});
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			open(type) {
				this.type = type;
				switch (type) {
					case 'qq_group':
						this.list = this.init[type];
						this.dialogTitle = 'QQ Group';
						break;
					case 'telegram_group':
						this.list = this.init[type];
						this.dialogTitle = 'Telegram Group';
						break;
					case 'sigua_group':
						this.list = this.init[type];
						this.dialogTitle = 'Loofah Group';
						break;
				}
				this.$refs.popup.open('dialog');
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			handleClose(done) {
				this.dialogVisible = false;
			},
			openQQChat(number) {
				// #ifdef APP-PLUS
				if (plus.os.name === "Android") {
					var main = plus.android.runtimeMainActivity();
					var Intent = plus.android.importClass('android.content.Intent');
					var Uri = plus.android.importClass('android.net.Uri');
					var intent = new Intent(Intent.ACTION_VIEW, Uri.parse("mqqwpa://im/chat?chat_type=wpa&uin=" +
						qqNumber));
					main.startActivity(intent);
				} else if (plus.os.name === "iOS") {
					plus.runtime.launchApplication({
						action: "mqq://im/chat?chat_type=wpa&uin=" + qqNumber + "&version=1&src_type=web"
					}, function(e) {
						if (e.error) {
							plus.nativeUI.confirm("检查到您未安装qq，请先到App Store搜索下载？", function(i) {
								if (i.index === 0) {
									window.location.href = "https://itunes.apple.com/cn/app/mqq/";
								}
							});
						}
					});
				}
				// #endif
				// #ifdef H5
				location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=' + number + '&version=1&src_type=web';
				// #endif
			},
			copy(val = '') {
				const textArea = document.createElement('textarea');
				textArea.value = val;
				document.body.appendChild(textArea);
				textArea.select();
				try {
					document.execCommand('copy');
					uni.showToast({
						title: this.$t('copySuccess')
					});
				} catch (err) {
					console.error('Could not copy text: ', err);
				}
				document.body.removeChild(textArea);
			},
			// open1(v){
			// 	switch(this.type){
			// 		case 'qq_group':
			// 			openQQChat(v);
			// 			break;
			// 		case 'telegram_group':
			// 			location.href = 'https://t.me/v'
			// 			//（用户名）
			// 			break;
			// 		case 'sigua_group':
			// 			location.href = 'https://t.me/v'
			// 			break;
			// 	}
			// }
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	body {
		background-color: #F8F8F8;
	}

	.page {
		min-height: 100vh;
		position: relative;
		background-color: #F8F8F8;
	}

	.cell_list {
		padding: 30rpx 30rpx;
		margin: 0rpx 30rpx;
		border-bottom: 1px solid #ddd;
	}

	.txt {
		font-weight: 500;
		font-size: 16px;
		color: #3d3d3d
	}

	.cell_right image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.dialog {
		width: 80vw;
		padding: 20rpx 30rpx;
		border-radius: 40rpx;
		line-height: 50rpx;
	}

	.dialog .title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.dialog .v1 {
		font-weight: 600;
		font-size: 16px;
		color: #1D61E7;
		float: left;
	}
</style>