question_uniapp/pages/about/help.vue

<template>
	<view class="page">
		<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back"  :border="false" :shadow="false" :fixed="true"
		:title="$t('help.title')" backgroundColor="#fff" :statusBar="true"></uni-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: 40rpx 30rpx; font-size: 32rpx; color: #3d3d3d;">
			{{$t('help.text2')}}
		</view>
		<view class="cell_list" v-for="(item, index) in aList" :key="index" @click="onPageJump('/pages/about/helpdetail?id='+item.id)">
			<view class="cell_left txt">
				{{item.title}}
			</view>
			<view class="cell_right arrow"></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: 40rpx; width: 100%;" v-for="(value, key) in list" :key="key">
					<view class="v1" style="margin-left: 20rpx;">{{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: '',
				aList: []
			};
		},
		computed: {},
		//第一次加载
		onLoad(e) {
			this.getlist();
			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');
			},
			getlist(){
				this.$http.get('/api/article/list?category_id=9&lang=' + this.$i18n.locale).then(res => {
					this.aList = res.data.data;
				});
			},
			goto(url, type) {
			    if (type == 2) {
			        return uni.switchTab({ url: url })
			    }
			    if (type == 1) {
			        return uni.navigateBack({ delta: url });
			    }
			    uni.navigateTo({
			        url: url
			    })
			},
			onPageJump(url) {
				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 = '') {
				// #ifdef APP-PLUS
				uni.setClipboardData({
				    data: val, // e是你要保存的内容
				    success: function () {
						uni.showToast({
							title:this.$t('copySuccess'),
							icon:'none'
						})
				    }
				})
				// #endif
				// #ifdef H5
			    this.$copyText(val).then(res => {
					uni.showToast({title: this.$t('copySuccess'), icon: 'none'});
			    });
				// #endif
			},
			// 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: 2rpx solid #ddd;
	}

	.txt {
		font-weight: 500;
		font-size: 32rpx;
		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: 32rpx;
		color: #1D61E7;
		float: left;
	}
</style>