dxh/pages/user/user.vue

<template>
	<view class="content">
		<view class="top"></view>
		<view class="top-box">
			<view class="user-box">
				<view class="avatar" @click="navTo('/pages/user/userinfo')">
					<image :src="userInfo.avatar" mode="" class="avatar-img"></image>
				</view>
				<view class="user-right">
					<view class="nickname">
						{{userInfo.nickname}}
					</view>
					<view class="xin-box" v-if="userInfo.level > 0">
						<image v-for="ls in userInfo.level" src="../../static/icon/xin.png" mode="" class="xin-img"></image>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="item-box">
					<view class="box-top">{{ userInfo.all_integral || '0' }}</view>
					<view class="box-foot">累计积分</view>
				</view>
				<view class="item-box">
					<view class="box-top">{{ userInfo.help_num || '0' }}</view>
					<view class="box-foot">帮助项目/个</view>
				</view>
			</view>
		</view>
		<view class="menu-box">
			<view class="menu" @click="tohelp">
				<view class="menu-top" style="width: 54rpx;height: 54rpx;">
					<image src="../../static/icon/user4.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">求救记录</view>
			</view>
			<view class="menu" @click="torreco">
				<view class="menu-top" style="width: 58rpx;height: 52rpx;">
					<image src="../../static/icon/user5.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">救援记录</view>
			</view>
			<view class="menu" @click="commonaddress">
				<view class="menu-top" style="width: 44rpx;height: 54rpx;">
					<image src="../../static/icon/user6.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">常用地址</view>
			</view>
			<view class="menu" @click="navTo('/pages/applyHelp/cation')">
				<view class="menu-top" style="width: 60rpx;height: 50rpx;">
					<image src="../../static/icon/user1.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">申请帮扶</view>
			</view>
			<view class="menu" @click="navTo('/pages/user/myFu')">
				<view class="menu-top" style="width: 54rpx;height: 54rpx;">
					<image src="../../static/icon/user2.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">我的帮扶</view>
			</view>
			<view class="menu" @click="navTo('/pages/user/integral')">
				<view class="menu-top" style="width: 66rpx;height: 58rpx;">
					<image src="../../static/icon/user3.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">积分记录</view>
			</view>
			<view class="menu" @click="navTo('/pages/fu/getPoints')">
				<view class="menu-top" style="width: 82rpx;height: 57rpx;">
					<image src="../../static/icon/user7.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">等级说明</view>
			</view>
			<view class="menu" @click="navTo('/pages/user/userinfo')">
				<view class="menu-top" style="width: 58rpx;height: 54rpx;">
					<image src="../../static/icon/user8.png" mode="" style="width: 100%;height: 100%;" class="user-img"></image>
				</view>
				<view class="menu-foot">设置</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import { mapState, mapMutations } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { detail_training } from '@/api/train.js';
import { userinfo } from '@/api/user.js';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			common_address: '',
			show: false,	// 弹窗开关
			// name:'',
			// signDate:'',
			// id:0,
			// is_over:0
		}
	},
	onShow() {
		console.log(this);
		//	判断是否已经登录
		if (this.hasLogin) {
			this.loadBaseData();
		} else {
			saveUrl();
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
		this.type = this.userInfo.type;
		this.common_address = this.userInfo.common_address
		console.log('点前保存的地址', this.common_address)
		// 保存当前页面
	},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations('user', ['setUserInfo']),
		open() {
			this.show = true;
		},
		navTo(url) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url,
				fail(e) {
					uni.switchTab({
						url
					})
				}
			});
		},
		loadBaseData() {
			userinfo({}).then(({
				data
			}) => {
				this.setUserInfo(data);
			});
			// #ifdef H5
			weixindata();
			// #endif
			detail_training({
				id: this.id,
			}).then(({
				data
			}) => {
				console.log(9, data)
				this.name = data.name
				this.signDate = data.add_time
				this.is_over = data.is_over
			})
		},

		torreco() {
			uni.navigateTo({
				url: '/pages/applic/rescuerecords'
			})
		},
		tohelp() {
			uni.navigateTo({
				url: '/pages/applic/helprecords'
			})
		},
		commonaddress() {
			uni.navigateTo({
				url: '/pages/applic/commonaddress?add=' + this.common_address
			})
		},
		tocertificates() {
			uni.navigateTo({
				url: '/pages/form/certificates?name=' + this.name + '&signDate=' + this.signDate
			})
		}
	}
}
</script>

<style lang="scss">
.content {
	line-height: 1;

	.top {
		width: 750rpx;
		height: 450rpx;
		background-color: #FF727E;
	}

	.top-box {
		width: 690rpx;
		height: 360rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 12rpx;
		margin: -240rpx auto 0;

		.user-box {
			display: flex;
			padding: 40rpx 40rpx 0;

			.avatar {
				width: 110rpx;
				height: 110rpx;
				margin-right: 30rpx;

				.avatar-img {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
			}

			.user-right {
				padding-top: 20rpx;

				.nickname {
					font-size: 32rpx;
					font-weight: 500;
					color: #030303;
					margin-bottom: 20rpx;
				}

				.xin-box {
					display: flex;
					align-items: center;
					.xin-img {
						width: 37rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}
				}
			}
		}

		.list-box {
			display: flex;
			padding-top: 70rpx;

			.item-box {
				width: 375rpx;
				text-align: center;

				.box-top {
					font-size: 56rpx;
					font-weight: 500;
					color: #222222;
					margin-bottom: 20rpx;
				}

				.box-foot {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}

	.menu-box {
		display: flex;
		flex-wrap: wrap;
		padding: 80rpx 0rpx 0;

		.menu {
			text-align: center;
			width: 250rpx;
			margin-bottom: 70rpx;

			.menu-top {
				margin: 0 auto;
			}

			.menu-foot {
				font-size: 24rpx;
				font-weight: 500;
				color: #222222;
				margin-top: 25rpx;
			}
		}
	}
	
}
.jifen-box {
	background: #FFFFFF;
	padding: 70rpx 50rpx 80rpx;
	border-radius: 12rpx;
	.now-vip {
		.top-vip {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $font-base;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 1;
		}
		.top-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 1;
			margin-top: 22rpx;
			.num-dj {
				visibility: hidden;
			}
		}
		.line-progress {
			padding: 30rpx 10rpx 24rpx;
		}
		.vip-icon {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $font-base;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

		}
	}
	.cztx-box {
		margin-top: 90rpx;
		.cztx-tit {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}
		.cztx-vip-box {
			.experience-box {
				display: flex;
				align-items: flex-end;
				justify-content: space-around;
				padding: 14rpx 0 0;
				.exper-text {
					font-size: $font-sm;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-bottom: 30rpx;
				}
				.exper1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper1 {
						width: 14rpx;
						height: 26rpx;
						background: #E62129;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper1-img {
						width: 30rpx;
						height: 26rpx;
					}
				}
				.exper2 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper2 {
						width: 14rpx;
						height: 104rpx;
						background: #EDEDED;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper2-img {
						width: 50rpx;
						height: 32rpx;
					}
				}
				.exper3 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper3 {
						width: 14rpx;
						height: 182rpx;
						background: #EDEDED;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper3-img {
						width: 68rpx;
						height: 32rpx;
					}
				}
				.exper4 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper4 {
						width: 14rpx;
						height: 260rpx;
						background: #EDEDED;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper4-img {
						width: 87rpx;
						height: 32rpx;
					}
				}
			}
			.cztx-experience {
				margin-top: 50rpx;
				text-align: center;
				font-size: $font-sm;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}
	}
}
</style>