about.vue 4.7 KB
Newer Older
1 2 3 4 5 6 7 8
<template>
	<view class="about">
		<view class="box">
			<image class="logoImg" :src="about.logo"></image>
			<text class="tip appName">{{about.appName}}</text>
			<text class="tip">Version {{version}}</text>
			<!--Sansnn-uQRCode组件来源,插件市场:https://ext.dcloud.net.cn/plugin?id=1287 微调后-->
			<Sansnn-uQRCode :text="about.download" :makeOnLoad="true" class="qrcode"></Sansnn-uQRCode>
9
			<text class="tip">{{$t('about.sacnQR')}} {{about.appName}} {{$t('about.client')}}</text>
10 11 12 13
		</view>
		<view class="copyright">
			<view class="agreement-box" v-for="(agreement,index) in about.agreements" :key="index">
				<text class="agreement" @click="navigateTo(agreement)">{{agreement.title}}</text>
14
				<text class="hint" v-if="about.agreements.length-1>index">{{$t('about.and')}}</text>
15 16 17 18 19 20 21
			</view>
			<text class="hint">Copyright © {{year}}</text>
			<text class="hint">{{about.company}}</text>
		</view>
	</view>
</template>
<script>
22 23
	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	const uniShare = new UniShare()
24
	export default {
study夏羽's avatar
study夏羽 已提交
25
		// #ifdef APP-PLUS
26 27 28 29 30 31 32 33
		onBackPress({from}) {
			if(from=='backbutton'){
				this.$nextTick(function(){
					uniShare.hide()
				})
				return uniShare.isShow;
			}
		},
study夏羽's avatar
study夏羽 已提交
34
		// #endif
35 36 37 38 39 40 41 42 43
		onLoad() {
			// #ifdef APP-PLUS
			this.version = plus.runtime.version
			// #endif
		},
		computed: {
			uniStarterConfig() {
				console.log(getApp());
				return getApp().globalData.config
44
			}
45 46 47 48 49 50 51 52 53 54 55
		},
		data() {
			return {
				version: "V1.0.0",
				year: "2020",
				about: {}
			};
		},
		created() {
			this.about = this.uniStarterConfig.about
			uni.setNavigationBarTitle({
56
				title: this.$t('about.about')+ " " + this.about.appName
57 58 59 60 61 62 63 64 65 66
			})
			this.year = (new Date).getFullYear()
		},
		onNavigationBarButtonTap() {
			let {
				download,
				appName,
				slogan,
				logo
			} = this.about
67
			uniShare.show({
68 69 70 71 72 73 74 75 76
				content: { //公共的分享类型(type)、链接(herf)、标题(title)、summary(描述)、imageUrl(缩略图)
					type: 0,
					href: download,
					title: appName,
					summary: slogan,
					imageUrl: logo + '?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决,在ios端分享图过大导致的图片失效问题
				},
				menus: [{
						"img": "/static/app-plus/sharemenu/wechatfriend.png",
77
						"text": this.$t('common').wechatFriends,
78 79 80 81 82 83 84
						"share": {
							"provider": "weixin",
							"scene": "WXSceneSession"
						}
					},
					{
						"img": "/static/app-plus/sharemenu/wechatmoments.png",
85
						"text":  this.$t('common').wechatBbs,
86 87 88 89 90 91 92
						"share": {
							"provider": "weixin",
							"scene": "WXSenceTimeline"
						}
					},
					{
						"img": "/static/app-plus/sharemenu/weibo.png",
93
						"text":  this.$t('common').weibo,
94 95 96 97 98 99 100 101 102 103 104 105 106
						"share": {
							"provider": "sinaweibo"
						}
					},
					{
						"img": "/static/app-plus/sharemenu/qq.png",
						"text": "QQ",
						"share": {
							"provider": "qq"
						}
					},
					{
						"img": "/static/app-plus/sharemenu/copyurl.png",
107
						"text": this.$t('common').copy,
108 109 110 111
						"share": "copyurl"
					},
					{
						"img": "/static/app-plus/sharemenu/more.png",
112
						"text": this.$t('common').more,
113 114 115
						"share": "shareSystem"
					}
				],
116
				cancelText: this.$t('common').cancelShare,
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
			}, e => { //callback
				console.log(e);
			})
		},
		methods: {
			navigateTo({
				url,
				title
			}) {
				uni.navigateTo({
					url: '/pages/common/webview/webview?url=' + url + '&title=' + title,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	/* #endif */
	.about {
145
		width: 750rpx;
146 147 148 149
		flex-direction: column;
	}

	.box {
150
		margin-top: 60px;
151 152 153 154 155 156
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.logoImg {
157 158 159
		margin-bottom: 10rpx;
		width: 160rpx;
		height: 160rpx;
160 161 162
		border-radius: 15px;
	}

163
	.tip {
164
		text-align: center;
165
		font-size: 24rpx;
166
		margin-top: 10px;
167
		padding: 10rpx;
168 169 170 171 172 173 174 175 176
	}

	.appName {
		margin-top: 20px;
		font-size: 42rpx;
		font-weight: 500;
	}

	.qrcode {
177
		margin-top: 60rpx;
178 179 180
	}

	.copyright {
181
		width: 750rpx;
182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
		font-size: 32rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		bottom: 20px;
		left: 0;
		position: fixed;
	}

	.agreement-box {
		justify-content: center;
	}

	.agreement {
		color: #2285ff;
		font-size: 26rpx;
	}

	.hint {
		text-align: center;
		color: #999999;
		font-size: 26rpx;
	}
205
</style>