jp-railway/pages/mine/mine.vue

<template>
	<view>
		<!-- 个人信息 -->
		<view class="person-infos">
			<view class="main">
				<view class="photo">
					<img v-if="userInfo.headImg" :src="userInfo.headImg" alt="">
					
					<u-avatar  v-else  size="120" ></u-avatar>
				</view>
				<view class="infos">
					<view class="name">
						{{userInfo.name}}
					</view>
					<view class="department-position">
						<view class="department" v-if="userInfo.orgName">
							<view class="icon">
								
								<img src="../../assets/img/department.png" alt="">
							</view>
							<view class="text">
								{{userInfo.orgName}}
							</view>
						</view>
						<view class="position">
							<text class="icon">
								<img src="../../assets/img/position.png" alt="">
							</text>
							<text class="text">
								员工
							</text>
						</view>
					</view>
				</view>
				<view class="to-homepage"   >
					<text class="text" @click="gotoUrl('pages/mine/personalPage')"  >个人主页</text><text>
						<u-icon size="32" name="arrow-right"></u-icon>
					</text>
				</view>
			</view>
			<view class="grid"  >
				<view class="item"  @click="gotoUrl('pages/mine/personalPage')" >
					<view class="amout">
						{{plusInfo.userShare}}
					</view>
					<view class="text">
						<u>发布</u>
					</view>
				</view>
				<view class="item" @click="gotoUrl('pages/mine/myLike')" >
					<view class="amout">
						{{plusInfo.userNewsLike}}
					</view>
					<view class="text">
						<u>点赞</u>
					</view>
				</view>
				<view class="item" @click="gotoUrl('pages/mine/myComment')" >
					<view class="amout">
						{{plusInfo.userNewsComment}}
					</view>
					<view class="text">
						  <u>评论</u>
					</view>
				</view>
				<view class="item"  >
					<!-- // -->
					<view class="amout" @click="gotoUrl('pages/mine/points/points')" >
						{{plusInfo.userPoints}}
					</view>
					<view class="text">
						<u>积分</u>
					</view>
				</view>
			</view>

		</view>
		<!-- 饭票卡片信息 -->
		<view class="meal-ticket">
			<view class="head">
				<view class="balance">
					饭卡余额（元）
				</view>
				<view class="check" @click="gotoUrl('pages/mine/myMealCard')">
					<text><img src="../../assets/img/riLine-eye-line@1x.png" alt=""></text>查看消费记录
				</view>
			</view>
			<view class="content">
				<view class="number-time">
					<view class="number">
						330
					</view>
					<view class="time">
						<text class="icon"><img src="../../assets/img/riLine-information-line@1x.png" alt=""></text>
						<text>下次清零 2023月6月1日 0点</text>
					</view>
				</view>
				<view class="payment-code" @click="gotoUrl('pages/mine/paymentCode')">
					<view class="code">
						<img src="../../assets/img/iconPark-pay-code-one@1x.png" alt="">
					</view>
					<view class="text">
						付款码
					</view>
				</view>
			</view>
		</view>
		<!-- 功能 -->
		<view class="function-group group1"   @click="gotoUrl('pages/mine/myWinningRecord')"  >
			<view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../assets/img/riLine-gift-2-line@2x.png" alt="">
					</view>
					<view class="text">
						我的获奖记录
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>

			<view class="item" v-if="false" >
				<view class="title">
					<view class="icon">
						<img src="../../assets/img/riLine-coin-line@2x.png" alt="">
					</view>
					<view class="text">
						积分兑换
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>

		</view>

		<view class="function-group ">
			<view class="item" @click="gotoUrl('pages/mine/data')">
				<view class="title">
					<view class="icon">
						<img src="../../assets/img/riLine-account-box-line@2x.png" alt="">
					</view>
					<view class="text">
						个人资料
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>

			<view class="item"  @click="gotoUrl('pages/mine/phone')" >
				<view class="title">
					<view class="icon">
						<img src="../../assets/img/riLine-smartphone-line@2x.png" alt="">
					</view>
					<view class="text">
						绑定手机
					</view>
				</view>
				<view class="right">
					<text class="value">{{userPhone}}</text>
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
			<view class="item"   @click="gotoUrl('pages/mine/feedback')" >
				<view class="title">
					<view class="icon">
						<img src="../../assets/img/riLine-file-edit-line@2x.png" alt="">
					</view>
					<view class="text">
						意见反馈
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
			<view class="item" v-if="false">
				<view class="title">
					<view class="icon">
						<img src="../../assets/img/riLine-customer-service-2-line@2x.png" alt="">
					</view>
					<view class="text">
						联系我们
					</view>
				</view>
				<view class="right">
					<text class="value">0716-8888888</text>
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
			<view class="item"  @click="logout" >
				<view class="title">
					<view class="icon">
						<img src="../../assets/img/riLine-logout-box-r-line@2x.png" alt="">
					</view>
					<view class="text">
						退出账号
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
		</view>

		<tabbar current="2"></tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/user.js'
	
	import tabbar from "../../components/Tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				plusInfo:{},
				userInfo:{},
				userPhone:"",
			}
		},
		onLoad() {
			
			this.init()
		},
		onShow(){
			this.findByOpenId()
		},
		methods: {
			init(){
				this.plusInfo=this.carhelp.getPersonInfoPlus();
				this.userInfo=this.carhelp.getPersonInfo();
				
				
				if(this.userInfo&&this.userInfo.phone){
					var phone = this.userInfo.phone;
					var phone1 = phone.slice(0,3);
					var phone2 = phone.slice(-4);
					this.userPhone = phone1 + '****' + phone2;
				}
			},
			findByOpenId(){
				API.findByOpenId({
					noerror:true,
					openId: this.carhelp.getOpenId(),
					
				}).then((response) => {
					
					this.carhelp.setPersonInfo(response.data.regUser);
					this.carhelp.setPersonInfoPlus(response.data)
					this.init();
				}).catch(error => {
					uni.hideLoading();
					
				})
			},
			logoutApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					
				};
				 
				API.logout(data).then((res) => {
					this.carhelp.logoff();
				
					
					uni.reLaunch({
						url:"/"
					})
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			phone(){
				uni.makePhoneCall({
				    phoneNumber:this.tel //仅为示例
				});
			},
			logout(){
						uni.showModal({
							title: '提示',
							content: '确认是否退出？',
							success: res=> {
								if (res.confirm) {
								   //付钱  改为组件
								   this.logoutApi();
								   
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family: 'Regular';
	}
	// 个人信息
	.person-infos {
		background: linear-gradient(45.45deg, rgba(6, 50, 130, 1) -0.45%, rgba(0, 88, 209, 1) 23.41%, rgba(0, 53, 153, 1) 52.12%, rgba(0, 66, 178, 1) 77.4%, rgba(0, 20, 130, 1) 100.65%);
		color: rgba(255, 255, 255, 1);
		padding: 40rpx 32rpx 260rpx 32rpx;

		.main {
			display: flex;
			align-items: center;

			.photo {
				img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50px;
				}

			}

			.infos {
				margin-left: 24rpx;

				.name {
					line-height: 28px;
					font-size: 20px;
					font-family: 'Medium';
				}

				.department-position {
					display: flex;
					align-items: center;
					margin-top: 16rpx;


					.icon {
						margin-right: 8rpx;

						img {
							width: 28rpx;
							height: 28rpx;
							
						}
					}

					.department {
						display: flex;
						
						.text{
							line-height: 16px;
						}


					}

					.position {
						display: flex;
						
						margin-left: 24rpx;
                .text{
                	line-height: 16px;
                }


					}
				}
			}

			.to-homepage {
				margin-left: auto;

				.text {
					font-size: 16px;
					margin-right: 8rpx;

				}
			}
		}

		.grid {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 24rpx;

			.item {
				width: 25%;
				text-align: center;

				.amout {
					font-size: 48rpx;
					line-height: 64rpx;

				}

				.text {
					font-size: 32rpx;
					line-height: 44rpx;
				}
			}
		}

	}

	// 饭票信息
	.meal-ticket{
		border-radius: 8px 8px 0px 0px;
		background: linear-gradient(87.06deg, rgba(240,225,198,1) 5.57%,rgba(236,193,148,1) 96.45%);
		margin: -224rpx 32rpx 0;
		height: 224rpx;
		padding: 32rpx;
		.head{
			display: flex;
			justify-content: space-between;
			color: rgba(49, 54, 66, 1);
			font-weight: bold;
			.check{
				text{
					vertical-align: middle;
					margin-right: 8rpx;
				}
			}
		}
		.content{
			
			display: flex;
			justify-content: space-between;
			align-items:flex-end;
			.number-time{
				.number{
					color: rgba(16, 16, 16, 1);
					font-size: 72rpx;
					font-weight: bold;
				}
				.time{
					opacity: 0.7;
					color: rgba(49, 54, 66, 1);
					font-size: 24rpx;
					.icon{
						vertical-align: middle;
						margin-right: 4rpx;
					}
				}
			}
			.payment-code{
				
				width: 96rpx;
				height: 96rpx;
				border-radius: 4px;
				background-color: #F0CFAD;
				text-align: center;
				font-size: 20rpx;
				color: rgba(49, 54, 66, 1);
				padding: 8rpx 0;
				
			}
		}
	}
	
	
	// 功能
	.group1 {
		// margin-top: -72rpx !important;
	}

	.function-group {
		border-radius: 8px 8px 0px 0px;
		background-color: rgba(255, 255, 255, 1);
		padding: 0 0 0 24rpx;
		margin: 0 32rpx;
		margin-top: 24rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 96rpx;
			border-bottom: 1px solid #E6E6E6;

			.title {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 24rpx;

					img {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
					}
				}

				.text {
					color: rgba(51, 51, 51, 1);
					font-weight: bold;
				}
			}

			.right {
				margin-right: 16rpx;
				margin-left: 8rpx;
				display: flex;
			}
		}
	}
</style>