ucenter.vue 11.4 KB
Newer Older
DCloud_JSON's avatar
DCloud_JSON 已提交
1 2 3
<template>
	<view class="center">
		<uni-sign-in ref="signIn"></uni-sign-in>
4
		<view class="userInfo" @click.capture="toUserInfo">
study夏羽's avatar
study夏羽 已提交
5 6
			<cloud-image width="150rpx" height="150rpx" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url"
				:src="userInfo.avatar_file.url"></cloud-image>
7
			<image v-else class="logo-img" src="@/static/uni-center/defaultAvatarUrl.png"></image>
8
			<view class="logo-title">
DCloud_JSON's avatar
DCloud_JSON 已提交
9
				<text class="uer-name" v-if="hasLogin">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text>
10
				<text class="uer-name" v-else>{{$t('mine.notLogged')}}</text>
DCloud_JSON's avatar
DCloud_JSON 已提交
11 12 13 14 15 16 17
			</view>
		</view>
		<uni-grid class="grid" :column="4" :showBorder="false" :square="true">
			<uni-grid-item class="item" v-for="(item,index) in gridList" @click.native="tapGrid(index)" :key="index">
				<uni-icons class="icon" color="#007AFF" :type="item.icon" size="26"></uni-icons>
				<text class="text">{{item.text}}</text>
			</uni-grid-item>
18
		</uni-grid>
DCloud_JSON's avatar
DCloud_JSON 已提交
19 20 21 22
		<uni-list class="center-list" v-for="(sublist , index) in ucenterList" :key="index">
			<uni-list-item v-for="(item,i) in sublist" :title="item.title" link :rightText="item.rightText" :key="i"
				:clickable="true" :to="item.to" @click="ucenterListClick(item)" :show-extra-icon="true"
				:extraIcon="{type:item.icon,color:'#999'}">
23 24 25 26 27 28
				<template v-slot:footer>
					<view v-if="item.showBadge" class="item-footer">
						<text class="item-footer-text">{{item.rightText}}</text>
						<view class="item-footer-badge"></view>
					</view>
				</template>
DCloud_JSON's avatar
DCloud_JSON 已提交
29 30 31 32 33 34 35 36
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
	import callCheckVersion from '@/uni_modules/uni-upgrade-center-app/utils/call-check-version';
study夏羽's avatar
update  
study夏羽 已提交
37
	// #ifdef APP
38 39
	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	const uniShare = new UniShare()
40
	// #endif
DCloud_JSON's avatar
DCloud_JSON 已提交
41
	const db = uniCloud.database();
42 43 44 45
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
DCloud_JSON's avatar
DCloud_JSON 已提交
46
	export default {
study夏羽's avatar
update  
study夏羽 已提交
47
		// #ifdef APP
study夏羽's avatar
study夏羽 已提交
48 49 50 51 52
		onBackPress({
			from
		}) {
			if (from == 'backbutton') {
				this.$nextTick(function() {
53 54 55 56 57
					uniShare.hide()
				})
				return uniShare.isShow;
			}
		},
study夏羽's avatar
study夏羽 已提交
58
		// #endif
DCloud_JSON's avatar
DCloud_JSON 已提交
59 60
		data() {
			return {
study夏羽's avatar
study夏羽 已提交
61
				uniToken: '',
DCloud_JSON's avatar
DCloud_JSON 已提交
62
				gridList: [{
63
						"text": this.$t('mine.showText'),
DCloud_JSON's avatar
DCloud_JSON 已提交
64 65 66
						"icon": "chat"
					},
					{
67
						"text": this.$t('mine.showText'),
DCloud_JSON's avatar
DCloud_JSON 已提交
68 69 70
						"icon": "cloud-upload"
					},
					{
71
						"text": this.$t('mine.showText'),
DCloud_JSON's avatar
DCloud_JSON 已提交
72 73 74
						"icon": "contact"
					},
					{
75
						"text": this.$t('mine.showText'),
DCloud_JSON's avatar
DCloud_JSON 已提交
76 77 78 79
						"icon": "download"
					}
				],
				ucenterList: [
80 81 82 83 84 85 86 87 88
					[
						// #ifdef APP-PLUS
						{
							"title": this.$t('mine.signInByAd'),
							"event": 'signInByAd',
							"icon": "compose"
						},
						// #endif
						{
89
							"title": this.$t('mine.signIn'),
DCloud_JSON's avatar
DCloud_JSON 已提交
90 91 92 93 94
							"event": 'signIn',
							"icon": "compose"
						},
						// #ifdef APP-PLUS
						{
95
							"title": this.$t('mine.toEvaluate'),
DCloud_JSON's avatar
DCloud_JSON 已提交
96 97 98 99 100
							"event": 'gotoMarket',
							"icon": "hand-thumbsup"
						},
						//#endif
						{
study夏羽's avatar
study夏羽 已提交
101
							"title": this.$t('mine.readArticles'),
DCloud_JSON's avatar
DCloud_JSON 已提交
102 103 104 105
							"to": '/pages/ucenter/read-news-log/read-news-log',
							"icon": "flag"
						},
						{
106
							"title": this.$t('mine.myScore'),
DCloud_JSON's avatar
DCloud_JSON 已提交
107 108 109 110 111 112
							"to": '',
							"event": 'getScore',
							"icon": "paperplane"
						}
						// #ifdef APP-PLUS
						, {
113
							"title": this.$t('mine.invite'),
DCloud_JSON's avatar
DCloud_JSON 已提交
114 115 116 117 118 119
							"event": 'share',
							"icon": "redo"
						}
						// #endif
					],
					[{
120
						"title": this.$t('mine.feedback'),
121
						"to": '/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback',
DCloud_JSON's avatar
DCloud_JSON 已提交
122 123
						"icon": "help"
					}, {
124
						"title": this.$t('mine.settings'),
DCloud_JSON's avatar
DCloud_JSON 已提交
125 126 127 128
						"to": '/pages/ucenter/settings/settings',
						"icon": "gear"
					}],
					[{
129
						"title": this.$t('mine.about'),
DCloud_JSON's avatar
DCloud_JSON 已提交
130 131 132 133 134 135 136 137 138 139 140 141 142
						"to": '/pages/ucenter/about/about',
						"icon": "info"
					}]
				],
				listStyles: {
					"height": "150rpx", // 边框高度
					"width": "150rpx", // 边框宽度
					"border": { // 如果为 Boolean 值,可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "100%" // 边框圆角,支持百分比
					}
143
				}
DCloud_JSON's avatar
DCloud_JSON 已提交
144 145
			}
		},
study夏羽's avatar
update  
study夏羽 已提交
146
		onLoad() {
DCloud_JSON's avatar
DCloud_JSON 已提交
147 148
			//#ifdef APP-PLUS
			this.ucenterList[this.ucenterList.length - 2].unshift({
study夏羽's avatar
study夏羽 已提交
149
				title: this.$t('mine.checkUpdate'), // this.this.$t('mine.checkUpdate')"检查更新"
DCloud_JSON's avatar
DCloud_JSON 已提交
150 151 152 153 154
				rightText: this.appVersion.version + '-' + this.appVersion.versionCode,
				event: 'checkVersion',
				icon: 'loop',
				showBadge: this.appVersion.hasNew
			})
155
			//#endif
DCloud_JSON's avatar
DCloud_JSON 已提交
156
		},
study夏羽's avatar
study夏羽 已提交
157 158 159
		onReady() {
			this.uniToken = uni.getStorageSync('uni_id_token')
			console.log("uniToken: ", this.uniToken);
160
		},
study夏羽's avatar
study夏羽 已提交
161
		onShow() {},
DCloud_JSON's avatar
DCloud_JSON 已提交
162
		computed: {
163 164 165
			userInfo() {
				return store.userInfo
			},
study夏羽's avatar
study夏羽 已提交
166
			hasLogin() {
167
				return store.hasLogin
DCloud_JSON's avatar
DCloud_JSON 已提交
168
			},
DCloud_JSON's avatar
DCloud_JSON 已提交
169 170
			// #ifdef APP-PLUS
			appVersion() {
171
				return getApp().appVersion
172
			},
DCloud_JSON's avatar
DCloud_JSON 已提交
173 174
			// #endif
			appConfig() {
175
				return getApp().globalData.config
176
			}
DCloud_JSON's avatar
DCloud_JSON 已提交
177 178 179 180 181 182 183
		},
		methods: {
			toSettings() {
				uni.navigateTo({
					url: "/pages/ucenter/settings/settings"
				})
			},
184
			signIn() { //普通签到
DCloud_JSON's avatar
DCloud_JSON 已提交
185 186
				this.$refs.signIn.open()
			},
study夏羽's avatar
study夏羽 已提交
187
			signInByAd() { //看激励视频广告签到
188 189
				this.$refs.signIn.showRewardedVideoAd()
			},
DCloud_JSON's avatar
DCloud_JSON 已提交
190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211
			/**
			 * 个人中心项目列表点击事件
			 */
			ucenterListClick(item) {
				if (!item.to && item.event) {
					this[item.event]();
				}
			},
			async checkVersion() {
				let res = await callCheckVersion()
				console.log(res);
				if (res.result.code > 0) {
					checkUpdate()
				} else {
					uni.showToast({
						title: res.result.message,
						icon: 'none'
					});
				}
			},
			toUserInfo() {
				uni.navigateTo({
212
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
DCloud_JSON's avatar
DCloud_JSON 已提交
213 214 215 216
				})
			},
			tapGrid(index) {
				uni.showToast({
217
					// title: '你点击了,第' + (index + 1) + '个',
study夏羽's avatar
study夏羽 已提交
218
					title: this.$t('mine.clicked') + " " + (index + 1),
DCloud_JSON's avatar
DCloud_JSON 已提交
219 220 221 222 223 224 225 226 227 228 229
					icon: 'none'
				});
			},
			/**
			 * 去应用市场评分
			 */
			gotoMarket() {
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform == "ios") {
					// 这里填写appstore应用id
					let appstoreid = this.appConfig.marketId.ios; // 'id1417078253';
study夏羽's avatar
study夏羽 已提交
230 231 232 233 234
					console.log({
						appstoreid
					});
					plus.runtime.openURL("itms-apps://" + 'itunes.apple.com/cn/app/wechat/' + appstoreid + '?mt=8',
					err => {
235 236
						console.log('plus.runtime.openURL err:' + JSON.stringify(err));
					});
DCloud_JSON's avatar
DCloud_JSON 已提交
237 238 239 240 241 242 243 244 245 246 247 248 249 250
				}
				if (uni.getSystemInfoSync().platform == "android") {
					var Uri = plus.android.importClass("android.net.Uri");
					var uri = Uri.parse("market://details?id=" + this.appConfig.marketId.android);
					var Intent = plus.android.importClass('android.content.Intent');
					var intent = new Intent(Intent.ACTION_VIEW, uri);
					var main = plus.android.runtimeMainActivity();
					main.startActivity(intent);
				}
				// #endif
			},
			/**
			 * 获取积分信息
			 */
251
			getScore() {
DCloud_JSON's avatar
DCloud_JSON 已提交
252
				if (!this.userInfo) return uni.showToast({
253
					title: this.$t('mine.checkScore'),
DCloud_JSON's avatar
DCloud_JSON 已提交
254 255
					icon: 'none'
				});
study夏羽's avatar
update  
study夏羽 已提交
256 257 258
				uni.showLoading({
					mask: true
				})
259
				db.collection("uni-id-scores")
260 261 262 263 264 265
					.where('"user_id" == $env.uid')
					.field('score,balance')
					.orderBy("create_date", "desc")
					.limit(1)
					.get()
					.then((res) => {
study夏羽's avatar
update  
study夏羽 已提交
266
						console.log(res);
267 268
						const data = res.result.data[0];
						let msg = '';
study夏羽's avatar
study夏羽 已提交
269
						msg = data ? (this.$t('mine.currentScore') + data.balance) : this.$t('mine.noScore');
270 271 272
						uni.showToast({
							title: msg,
							icon: 'none'
273
						});
study夏羽's avatar
study夏羽 已提交
274
					}).finally(() => {
study夏羽's avatar
update  
study夏羽 已提交
275
						uni.hideLoading()
276
					})
DCloud_JSON's avatar
DCloud_JSON 已提交
277 278
			},
			async share() {
study夏羽's avatar
study夏羽 已提交
279 280 281
				let {
					result
				} = await db.collection('uni-id-users').where("'_id' == $cloudEnv_uid").field('my_invite_code').get()
282
				let myInviteCode = result.data[0].my_invite_code
study夏羽's avatar
study夏羽 已提交
283
				if (!myInviteCode) {
284 285 286 287 288
					return uni.showToast({
						title: '请检查uni-config-center中uni-id配置,是否已启用 autoSetInviteCode',
						icon: 'none'
					});
				}
study夏羽's avatar
study夏羽 已提交
289 290 291
				console.log({
					myInviteCode
				});
DCloud_JSON's avatar
DCloud_JSON 已提交
292 293 294 295 296 297 298
				let {
					appName,
					logo,
					company,
					slogan
				} = this.appConfig.about
				// #ifdef APP-PLUS
299
				uniShare.show({
DCloud_JSON's avatar
DCloud_JSON 已提交
300 301 302 303 304 305 306 307 308 309 310
					content: { //公共的分享类型(type)、链接(herf)、标题(title)、summary(描述)、imageUrl(缩略图)
						type: 0,
						href: this.appConfig.h5.url +
							`/#/pages/ucenter/invite/invite?code=uniInvitationCode:${myInviteCode}`,
						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",
study夏羽's avatar
update  
study夏羽 已提交
311
							"text": this.$t('common.wechatFriends'),
DCloud_JSON's avatar
DCloud_JSON 已提交
312 313 314 315 316 317 318
							"share": {
								"provider": "weixin",
								"scene": "WXSceneSession"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/wechatmoments.png",
study夏羽's avatar
update  
study夏羽 已提交
319
							"text": this.$t('common.wechatBbs'),
DCloud_JSON's avatar
DCloud_JSON 已提交
320 321
							"share": {
								"provider": "weixin",
study夏羽's avatar
study夏羽 已提交
322
								"scene": "WXSceneTimeline"
DCloud_JSON's avatar
DCloud_JSON 已提交
323 324 325 326
							}
						},
						{
							"img": "/static/app-plus/sharemenu/weibo.png",
study夏羽's avatar
update  
study夏羽 已提交
327
							"text": this.$t('common.weibo'),
DCloud_JSON's avatar
DCloud_JSON 已提交
328 329 330 331 332 333 334 335 336 337 338 339 340
							"share": {
								"provider": "sinaweibo"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/qq.png",
							"text": "QQ",
							"share": {
								"provider": "qq"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/copyurl.png",
study夏羽's avatar
update  
study夏羽 已提交
341
							"text": this.$t('common.copy'),
DCloud_JSON's avatar
DCloud_JSON 已提交
342 343 344 345
							"share": "copyurl"
						},
						{
							"img": "/static/app-plus/sharemenu/more.png",
study夏羽's avatar
update  
study夏羽 已提交
346
							"text": this.$t('common.more'),
DCloud_JSON's avatar
DCloud_JSON 已提交
347 348 349
							"share": "shareSystem"
						}
					],
study夏羽's avatar
update  
study夏羽 已提交
350
					cancelText: this.$t('common.cancelShare'),
DCloud_JSON's avatar
DCloud_JSON 已提交
351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370
				}, e => { //callback
					console.log(e);
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	page {
		background-color: #f8f8f8;
	}
study夏羽's avatar
study夏羽 已提交
371

DCloud_JSON's avatar
DCloud_JSON 已提交
372 373 374 375
	/* #endif*/

	.center {
		flex: 1;
376
		flex-direction: column;
DCloud_JSON's avatar
DCloud_JSON 已提交
377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424
		background-color: #f8f8f8;
	}

	.userInfo {
		padding: 20rpx;
		padding-top: 50px;
		background-image: url(../../static/uni-center/headers.png);
		flex-direction: column;
		align-items: center;
	}

	.logo-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
	}

	.logo-title {
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.uer-name {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 38rpx;
		color: #FFFFFF;
	}

	.center-list {
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
	}

	.center-list-cell {
		width: 750rpx;
		background-color: #007AFF;
		height: 40rpx;
	}

	.grid {
		background-color: #FFFFFF;
		margin-bottom: 6px;
	}

	.uni-grid .text {
study夏羽's avatar
update  
study夏羽 已提交
425
		font-size: 16px;
DCloud_JSON's avatar
DCloud_JSON 已提交
426 427 428 429 430 431 432 433 434 435 436 437
		height: 25px;
		line-height: 25px;
		color: #817f82;
	}

	.uni-grid .item ::v-deep .uni-grid-item__box {
		justify-content: center;
		align-items: center;
	}


	/*修改边线粗细示例*/
DCloud_JSON's avatar
DCloud_JSON 已提交
438
	/* #ifndef APP-NVUE */
DCloud_JSON's avatar
DCloud_JSON 已提交
439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466
	.center-list ::v-deep .uni-list--border:after {
		-webkit-transform: scaleY(0.2);
		transform: scaleY(0.2);
		margin-left: 80rpx;
	}

	.center-list ::v-deep .uni-list--border-top,
	.center-list ::v-deep .uni-list--border-bottom {
		display: none;
	}

	/* #endif */
	.item-footer {
		flex-direction: row;
		align-items: center;
	}

	.item-footer-text {
		color: #999;
		font-size: 24rpx;
		padding-right: 10rpx;
	}

	.item-footer-badge {
		width: 20rpx;
		height: 20rpx;
		/* #ifndef APP-NVUE */
		border-radius: 50%;
DCloud_JSON's avatar
DCloud_JSON 已提交
467
		/* #endif */
DCloud_JSON's avatar
DCloud_JSON 已提交
468 469
		/* #ifdef APP-NVUE */
		border-radius: 10rpx;
DCloud_JSON's avatar
DCloud_JSON 已提交
470
		/* #endif */
DCloud_JSON's avatar
DCloud_JSON 已提交
471 472
		background-color: #DD524D;
	}
study夏羽's avatar
update  
study夏羽 已提交
473
</style>