mudi-app/pages/user/user.vue

<template>
	<view class="user">
		<view class="top" v-if="userInfo">
			<view class="userBasic">
				<u-image width="120rpx" height="120rpx" :src="userInfo.headImgPath" @click="toUserEdit"
					v-if="userInfo.headImgPath" border-radius="50%"></u-image>
				<u-image width="120rpx" height="120rpx" src="../../static/mes3.png" @click="toUserEdit" v-else>
				</u-image>
				<view class="right">
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view class="credit">
						<view class="credit-icon">

						</view>
						<text class="code" @click="copy">
							邀请码：{{userInfo.inviteCode}}
						</text>
						<view class="right-icon">

						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="tabList">
				<view class="item" @click="toHistory">
					<view class="icon">
						<u-image width="48rpx" height="48rpx" src="../../static/tab_list_1.png" style="margin: 0 auto;">
						</u-image>
					</view>
					<view class="name">
						浏览历史
					</view>
				</view>
				<view class="item" @click="toCollect">
					<view class="icon">
						<u-image width="48rpx" height="48rpx" src="../../static/tab_list_2.png" style="margin: 0 auto;">
						</u-image>
					</view>
					<view class="name">
						我的收藏
					</view>
				</view>
				<view class="item" @click="toBFLease">
					<view class="icon">
						<u-image width="48rpx" height="48rpx" src="../../static/tab_list_3.png" style="margin: 0 auto;">
						</u-image>
					</view>
					<view class="name">
						我的租赁
					</view>
				</view>
				<view class="item" @click="toPurchase">
					<view class="icon">
						<u-image width="48rpx" height="48rpx" src="../../static/tab_list_4.png" style="margin: 0 auto;">
						</u-image>
					</view>
					<view class="name">
						我的购买
					</view>
				</view>
			</view>

			<view class="cell">
				<!-- 		<view class="cellContent">
				</view> -->
				<u-cell-group :border="false">
					<u-cell-item :title-style="{'font-weight': 500, 'color' : '#000000'}" title="链上查询">
					</u-cell-item>
					<u-cell-item :title-style="{'font-weight': 500, 'color' : '#000000'}" title="客服咨询">
					</u-cell-item>
					<u-cell-item @click="toFeedback" :title-style="{'font-weight': 500, 'color' : '#000000'}"
						title="意见反馈">
					</u-cell-item>
					<u-cell-item @click="toHlep" :title-style="{'font-weight': 500, 'color' : '#000000'}" title="帮助中心">
					</u-cell-item>
					<u-cell-item @click="toUpdatePSW" :title-style="{'font-weight': 500, 'color' : '#000000'}"
						:border-bottom="false" title="修改密码">
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>

		<u-tabbar v-model="vuex_current" :inactive-color="vuex_inactiveColor" :activeColor="vuex_activeColor"
			:list="vuex_tabBar"></u-tabbar>
	</view>
</template>

<script>
	import clipboard from "../../components/dc-clipboard/clipboard.js"
	export default {
		data() {
			return {
				userInfo: null
			}
		},
		methods: {

			copy() {
				// let __then = this
				// #ifdef APP-PLUS || MP-WEIXIN
				// uni.setClipboardData({ 
				// 	data: this.userInfo.inviteCode, //要被复制的内容
				// 	success: function() {
				// 		//在success中加入uni.hideToast()可以解决
				// 		__then.$u.toast('复制成功');
				// 		//以下就可自定义操作了~
				// 	},
				// 	fail: function(err) {
				// 		__then.$u.toast('复制失败');
				// 	}
				// });
				clipboard.setText(this.userInfo.inviteCode);
				this.$u.toast('复制成功');
				// #endif
			},
			async getUserInfo() {
				let res = await this.$u.api.user.getUserInfo()
				console.log(res, '888--------99')
				this.userInfo = res.data
				this.$u.vuex('user.userInfo', res.data)
			},
			toHistory() {
				uni.navigateTo({
					url: './history/history'
				})
			},
			toCollect() {
				uni.navigateTo({
					url: './collect/collect'
				})
			},
			toUserEdit() {
				uni.navigateTo({
					url: './userEdit/userEdit'
				})
			},
			toBFLease() {
				uni.navigateTo({
					url: './beforehand_lease/beforehand_lease'
				})
			},
			toPurchase() {
				uni.navigateTo({
					url: './purchase/purchase'
				})
			},
			toFeedback() {
				uni.navigateTo({
					url: './feedback/feedback'
				})
			},
			toUpdatePSW() {
				uni.navigateTo({
					url: './updatePSW/updatePSW'
				})
			},
			// 去帮助页
			toHlep() {
				uni.navigateTo({
					url: './help/help'
				})
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	.user {
		height: 100%;
		background-color: #f5f7fa;
	}

	.top {
		height: 388rpx;
		background: url(../../static/userBg.png);
		background-size: 100% 100%;
		width: 100%;
		padding: 0 36rpx;
		overflow: hidden;

		.userBasic {
			margin-top: 136rpx;
			display: flex;
			align-items: center;

			.right {
				margin-left: 36rpx;

				.name {
					font-size: 40rpx;
					font-family: SF Pro;
					font-weight: 500;
					line-height: 48rpx;
					color: #303133;
				}

				.credit {
					font-size: 28rpx;
					font-family: SF Pro;
					font-weight: 400;
					line-height: 32rpx;
					color: #909399;
					opacity: 1;
					margin-top: 5rpx;

					.credit-icon,
					.right-icon {
						display: inline-block;
						width: 32rpx;
						height: 32rpx;
						background-image: url(../../static/info_credit.png);
						background-size: 100%;
						background-position: center;
						transform: translateY(5rpx);
						margin-right: 14rpx;
					}

					.right-icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
						background-image: url(../../static/arrow_right.png);
					}
				}

			}
		}
	}


	.content {
		transform: translateY(-80rpx);
		padding: 0 36rpx;

		.tabList {
			padding: 48rpx 40rpx;
			border-radius: 12rpx;
			background-color: #FFFFFF;
			height: 198rpx;
			display: flex;

			.item {
				flex: 1;

				.name {
					text-align: center;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #303133;
				}
			}

		}



		.cell {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			border-radius: 12rpx;
			padding-left: 36rpx;
			box-sizing: content-box;
			background-color: #FFFFFF;

			// .cellContent {
			// 	width: 36rpx;
			// 	background-color: #FFFFFF;
			// 	overflow: hidden;
			// 	height: 508rpx;
			// 	border-top-left-radius: 12rpx;
			// 	border-bottom-left-radius: 12rpx;
			// }

			.u-cell {
				padding-left: 0rpx;
				border: 0rpx;

				/deep/ .u-icon__icon {
					color: #e1e3e7;
					font-size: 24rpx;
				}
			}

			.u-border-top:after {
				border: 0rpx;
			}
		}
	}
</style>