ucenter.vue 6.9 KB
Newer Older
L
213  
linju 已提交
1 2
<template>
	<view class="center">
L
123  
linju 已提交
3
		<view class="userInfo" @click="toSettings">
L
213  
linju 已提交
4
			<image class="logo-img" :src="login ? (userInfo.avatar || avatarUrl) :avatarUrl"></image>
芊里 已提交
5
			<view class="logo-title">
L
123  
linju 已提交
6
				<text class="uer-name">{{login ? userInfo.nickname||userInfo.username||userInfo.mobile : '未登录'}}</text>
L
213  
linju 已提交
7 8
				<text class="go-login-navigat-arrow navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
L
123  
linju 已提交
9
		</view>
L
213  
linju 已提交
10 11 12 13 14 15 16
		<uni-grid class="grid" :column="5" :showBorder="false" :square="true">
			<uni-grid-item class="item" v-for="({text,icon},index) in gridList" @click.native="tapGrid(index)">
				<uni-icons class="icon" color="#5d5e64" :type="icon" size="28"></uni-icons>
				<text class="text">{{text}}</text>
			</uni-grid-item>
		</uni-grid>
		<uni-list class="center-list" v-for="(sublist , index) in ucenterList">
L
123  
linju 已提交
17 18 19 20 21 22
			<uni-list-item v-for="item in sublist" :title="item.title" link :rightText="item.rightText"
				:clickable="true" :to="item.to" @click="ucenterListClick(item)">
				<view v-if="item.showBadge" class="item-footer" slot="footer">
					<text class="item-footer-text">{{item.rightText}}</text>
					<view class="item-footer-badge"></view>
				</view>
芊里 已提交
23
			</uni-list-item>
24
		</uni-list>
L
213  
linju 已提交
25 26 27 28 29 30 31 32
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
L
123  
linju 已提交
33 34
	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';
L
213  
linju 已提交
35 36 37
	export default {
		data() {
			return {
芊里 已提交
38
				avatarUrl: '/static/uni-center/logo.png',
L
213  
linju 已提交
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
				gridList: [{
						"text": "文字1",
						"icon": "chat"
					},
					{
						"text": "文字2",
						"icon": "cloud-upload"
					},
					{
						"text": "文字3",
						"icon": "contact"
					},
					{
						"text": "文字4",
						"icon": "download"
					},
					{
						"text": "文字5",
						"icon": "paperplane"
					}
				],
				ucenterList: [
L
123  
linju 已提交
61 62 63 64 65 66 67 68 69 70 71 72 73 74
					[
						// #ifdef APP-PLUS
						{
							title: '去评分',
							event: 'gotoMarket'
						},
						// #endif
						{
							title: '阅读过的文章',
							to: ''
						}, {
							title: '我的积分',
							to: ''
						}],
L
213  
linju 已提交
75
					[{
L
123  
linju 已提交
76 77
						title: '问题与反馈',
						to: '/uni_modules/uni-feedback/pages/opendb-feedback/list' // /pages/ucenter/uni-feedback/uni-feedback uni_modules/uni-feedback/pages/opendb-feedback/list
L
213  
linju 已提交
78
					}, {
L
123  
linju 已提交
79 80 81
						title: '关于',
						to: '/pages/ucenter/about/about'
					}]
L
213  
linju 已提交
82 83 84
				]
			}
		},
L
123  
linju 已提交
85 86 87 88 89 90 91 92 93 94
		onLoad() {
			this.ucenterList[this.ucenterList.length - 1].unshift(
				{
					title: '检查更新',
					rightText: this.appVersion.version+'-'+this.appVersion.versionCode,
					event: 'checkVersion',
					showBadge: this.appVersion.hasNew
				}
			)
		},
L
213  
linju 已提交
95 96 97 98
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				login: 'user/hasLogin'
L
123  
linju 已提交
99 100 101 102
			}),
			appVersion() {
				return getApp().appVersion
			}
L
213  
linju 已提交
103 104 105 106
		},
		methods: {
			...mapMutations({
				logout: 'user/logout'
107
			}),
L
123  
linju 已提交
108
			toSettings() {
109
				uni.navigateTo({
L
123  
linju 已提交
110
					url: "/pages/ucenter/settings/settings"
111
				})
L
123  
linju 已提交
112
			},
L
213  
linju 已提交
113 114 115 116 117 118 119 120
			/**
			 * 个人中心项目列表点击事件
			 */
			ucenterListClick(item) {
				if (!item.to && item.event) {
					this[item.event]();
				}
			},
L
123  
linju 已提交
121 122 123
			async checkVersion() {
				console.log(await callCheckVersion());
				checkUpdate()
L
213  
linju 已提交
124
			},
芊里 已提交
125
			goLogin() {
L
213  
linju 已提交
126 127 128 129 130 131 132 133 134 135 136
				if (!this.login) {
					console.log('点击前往登录');
					uni.navigateTo({
						url: '/uni_modules/uni-login-page/pages/index/index'
					});
				} else {
					console.log('点击编辑信息');
					uni.navigateTo({
						url: './edit/edit'
					})
				}
137
			},
L
123  
linju 已提交
138
			tapGrid(index) {
139
				uni.showToast({
L
123  
linju 已提交
140
					title: '你点击了,第' + (index + 1) + '',
141 142
					icon: 'none'
				});
143 144 145 146
			},
			/**
			 * 去应用市场评分
			 */
147
			gotoMarket() {
148 149 150 151
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform == "ios") {
					// 这里填写appstore应用id
					let appstoreid = 'id1417078253';
L
123  
linju 已提交
152
					plus.runtime.openURL("itms-apps://" + 'itunes.apple.com/cn/app/wechat/' + appstoreid + '?mt=8');
153 154 155
				}
				if (uni.getSystemInfoSync().platform == "android") {
					var Uri = plus.android.importClass("android.net.Uri");
L
123  
linju 已提交
156 157 158 159 160
					var uri = Uri.parse("market://details?id=" + plus.runtime.appid);
					var Intent = plus.android.importClass('android.content.Intent');
					var intent = new Intent(Intent.ACTION_VIEW, uri);
					var main = plus.android.runtimeMainActivity();
					main.startActivity(intent);
161 162
				}
				// #endif
L
213  
linju 已提交
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196
			}
		}
	}
</script>

<style>
	/* #ifndef APP-PLUS-NVUE */
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/text-icon.ttf') format('truetype');
	}

	page {
		background-color: #f8f8f8;
	}

	/* #endif*/

	/* 解决头条小程序字体图标不显示问题,因为头条运行时自动插入了span标签,且有全局字体 */
	/* #ifdef MP-TOUTIAO */
	text :not(view) {
		font-family: texticons;
	}

	/* #endif */

	.center {
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
	}

L
213  
linju 已提交
197 198
	.userInfo {
		width: 750rpx;
199
		padding: 20rpx;
L
123  
linju 已提交
200
		padding-top: 50px;
L
213  
linju 已提交
201
		background-color: #2F85FC;
L
213  
linju 已提交
202
		flex-direction: column;
L
213  
linju 已提交
203 204 205
		align-items: center;
	}

L
123  
linju 已提交
206
	/* .logo-hover {
L
213  
linju 已提交
207
		opacity: 0.8;
L
123  
linju 已提交
208
	} */
L
213  
linju 已提交
209 210

	.logo-img {
L
213  
linju 已提交
211 212
		width: 150rpx;
		height: 150rpx;
213
		border-radius: 150rpx;
L
213  
linju 已提交
214
		border: solid 1px #FFFFFF;
L
213  
linju 已提交
215 216 217
	}

	.logo-title {
L
213  
linju 已提交
218
		height: 150rpx;
L
213  
linju 已提交
219 220 221 222
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
L
213  
linju 已提交
223
		margin-left: 20rpx;
L
213  
linju 已提交
224 225 226
	}

	.uer-name {
L
213  
linju 已提交
227 228 229
		height: 60rpx;
		line-height: 60rpx;
		font-size: 38rpx;
L
213  
linju 已提交
230 231 232 233
		color: #FFFFFF;
	}

	.go-login-navigat-arrow {
L
213  
linju 已提交
234
		font-size: 38rpx;
L
213  
linju 已提交
235 236 237 238
		color: #FFFFFF;
	}

	.navigat-arrow {
L
213  
linju 已提交
239 240 241 242 243
		height: 90rpx;
		width: 40rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		color: #FFFFFF;
L
213  
linju 已提交
244 245 246 247
		text-align: right;
		font-family: texticons;
	}

248
	.center-list {
L
213  
linju 已提交
249 250 251 252 253
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
	}

	.center-list-cell {
254
		width: 750rpx;
L
213  
linju 已提交
255 256 257
		background-color: #007AFF;
		height: 40rpx;
	}
L
123  
linju 已提交
258 259

	.grid {
260
		background-color: #FFFFFF;
L
123  
linju 已提交
261
		margin: 25rpx 0;
L
213  
linju 已提交
262
	}
L
123  
linju 已提交
263

L
213  
linju 已提交
264 265 266 267 268 269 270 271
	.uni-grid .text {
		font-size: 26rpx;
		color: #817f82;
	}

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

L
123  
linju 已提交
274 275 276

	/*修改边线粗细示例*/
	/* #ifndef APP-NVUE */
277
	.center-list /deep/ .uni-list--border:after,
L
123  
linju 已提交
278 279
	.center-list /deep/ .uni-list--border-top,
	.center-list /deep/ .uni-list--border-bottom {
280 281 282
		-webkit-transform: scaleY(0.2);
		transform: scaleY(0.2);
	}
L
123  
linju 已提交
283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306

	/* #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%;
		/* #endif */
		/* #ifdef APP-NVUE */
		border-radius: 10rpx;
		/* #endif */
		background-color: #DD524D;
	}
L
123  
linju 已提交
307
</style>