h5-elab-open-ownerUnion/pages/homePage/homePage.vue

<template>
	<view class="content">
		<view class="topSection">
			<image class="bg_top" src="https://dm.static.elab-plus.com/yezhu/h5/backgroundImg.png" mode=""></image>
			<view class="liveContent">
				<view class="backDiv"></view>
				<view class="title">分享好房 · 躺平赚钱</view>
				<view class="subTitle">新手赚钱帮助 ></view>
				<view class="levelDiv" v-if="userInfo.ownersUnion"
					style="background: url('https://dm.static.elab-plus.com/yezhu/h5/icon_line_back.png') center/100% 100% no-repeat;">
					<view class="level_top">
						<image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
						</image>
						<view class="level_text">{{userInfo.curlevel}}</view>
						<view class="level_des">/达到 {{userInfo.nextIncome}} 收益可升级</view>
						<view class="level_update">
							<text>升级攻略</text>
							<image class="level_right_icon"
								src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
						</view>
					</view>
					<view class="level_bottom">
						<levelView :currentLevel='userInfo.curIncome' :nextLevel='userInfo.nextIncome' :currentLevelTxt='userInfo.curlevel' nextLevelTxt='userInfo.nextLevel'>
						</levelView>
					</view>
				</view>
			</view>
		</view>
		<view class="content_body" :style="{background:color4}">
			<view class="content_beginner_guide">
				<view class="title">
					<text class="title_txt">- 新手引导 -</text>
					<view class="title_right">
						<text class="title_right_txt">收起</text>
						<image class="title_right_cion" src="https://dm.static.elab-plus.com/yezhu/icon_shouqi.png"
							mode=""></image>
					</view>

				</view>
				<view class="guide_content">
					<view class="item_guide">
						<image class="guide_img" src="https://dm.static.elab-plus.com/yezhu/icon_yezhu.png" mode="">
						</image>
						<text class="guide_title">注册业主</text>
						<text class="guide_desc">业主注册审核\n实时等级升级</text>
					</view>
					<image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
					</image>
					<view class="item_guide">
						<image class="guide_img" style="width: 72rpx;height: 72rpx;margin-top: 5rpx;"
							src="https://dm.static.elab-plus.com/yezhu/icon_pyq.png" mode=""></image>
						<text class="guide_title">分享项目</text>
						<text class="guide_desc">分享到朋友圈\n自动计算收益</text>
					</view>
					<image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
					</image>
					<view class="item_guide">
						<image class="guide_img" style="width: 58rpx;height: 68rpx;margin-top: 9rpx;"
							src="https://dm.static.elab-plus.com/yezhu/icon_yz_money.png" mode=""></image>
						<text class="guide_title">提现到微信</text>
						<text class="guide_desc">实时查看收益\n快速提现到账</text>
					</view>
				</view>

			</view>
			<view class="content_tab">
				<view class="tab_item">
					<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_zcyz.png" mode=""></image>
					<text class="txt_tab">注册业主</text>
				</view>
				<view class="tab_item" @click="toShouYiPage">
					<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_shouyi.png" mode=""></image>
					<text class="txt_tab">收益排行榜</text>
				</view>
				<view class="tab_item" @click="goReportPage">
					<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_report.png" mode=""></image>
					<text class="txt_tab">效果报表</text>
				</view>
				<view class="tab_item">
					<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_myinfo.png" mode=""></image>
					<text class="txt_tab">我的信息</text>
				</view>
			</view>
			<view class="content_tuiguang">
				<view class="content_tuiguang_city">
					<text class="city_num">{{userInfo.taskCount}}个</text>
					<text class="city_num_desc">推广任务</text>
					<view class="city_list">
						<text class="city_name">城市</text>
						<image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
							mode=""></image>
					</view>

				</view>
				<view class="content_tuiguang_money">
					<text class="money_num">￥{{userInfo.surplusTaskAmount}}</text>
					<text class="money_num_des">剩余任务金额</text>
					<view class="money_list">
						<text class="money_name">类型</text>
						<image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
							mode=""></image>
					</view>
					<image class="money_bg" src="https://dm.static.elab-plus.com/yezhu/icon_money_bg.png" mode="">
					</image>
				</view>
			</view>
			<view class="content_list">
				<view class="content_title">
					<view class="content_title_poi">
					</view>
					任务列表
				</view>
				<view class="content_hongbao">
					<view class="hongbao_left">
						<image class="icon_hongbao" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png"
							mode=""></image>
						<view class="hongbao_left_info">
							<text class="hongbao_title">邀请好友注册</text>
							<text class="hongbao_money">完成邀请，可获得 ¥1/人</text>
						</view>
					</view>
					<view class="hongbao_right">
						邀请好友
					</view>
				</view>

				<view class="list_item" v-for="(item,index) in  houseList" :key='index'>
					<image class="house_img" :src="item.image" mode=""></image>
					<view class="item_content" @click="goDetailAction(item)">
						<text class="house_name">{{item.name}}</text>
						<text class="house_hk" v-if="item.taskCategory">{{(item.taskCategory).join('、')}}</text>
						<text class="house_hk" v-else></text>
						<view class="house_address">
							<image src="https://dm.static.elab-plus.com/yezhu/icon_location.png" mode=""></image>
							<text>{{item.city}} · {{item.minPrice}}-{{item.maxPrice}}万/m² · {{item.bizFormat}}</text>
						</view>
						<view class="house_num">
							<image src="https://dm.static.elab-plus.com/yezhu/icon_family.png" mode=""></image>
							<text>{{item.cusGroup}}</text>
						</view>
						<text class="house_desc">{{item.shareRemark}}</text>
					</view>
					<view class="item_share">
						<image class="icon_share" src="https://dm.static.elab-plus.com/yezhu/icon_small_share.png"
							mode=""></image>
						<text class="icon_text">分享</text>
					</view>
					<view class="item_bg"></view>
				</view>
			</view>


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

<script>
	import levelView from '@/components/leve-view/leve-view.vue';
	let app = getApp();
	export default {
		data() {
			return {
				color4: '#F5F5F7',
				houseList: [],
				userId: "",
				token: "",
				userInfo: {
					"userId": "",
					"name": null,
					"head": null,
					"curlevel": null,
					"curIncome": null,
					"nextLevel": null,
					"nextIncome": null,
					"ownersUnion": false,
					"totalIncome": null,
					"taskCount": null,
					"surplusTaskAmount": null
				}
			}
		},
		mounted() {
			let token = this.$cache.get('_token_owner_union');
			if (!token) {
				this.regist();
			} else {
				app.globalData.token = token;
				this.getUserInfo();
			}
			this.color4 = app.globalData.color4;
			this.getHomePage();

		},
		methods: {
			async getHomePage() {
				let ret = await this.$myRequest({
					url: "/project/homePage",
					data: {
						"city": "",
						"pageNo": 1,
						"pageSize": 20,
						"taskCategoryId": ""
					}
				})
				if (ret.data.success) {
					let pageModel = ret.data.pageModel;
					this.houseList = pageModel.resultSet || [];
				}
			},
			async regist() {
				let ret = await this.$myRequest({
					url: "/regist",
					data: {
						"code": "o08gpwOfRgwnhh1WCBYGLbaszur8",
						"shareToken": ""
					}
				});
				if (ret.data.success) {
					this.userId = ret.data.single.userId;
					if (ret.data.single.authed == 1) {
						this.token = ret.data.single.token;
						this.$cache.set('_token_owner_union', this.token);
						app.globalData.token = this.token
						this.getUserInfo()
					} else {
						this.getToken()
					}
				}
			},
			async getToken() {
				let ret = await this.$myRequest({
					url: "/authorizedPhone",
					data: {
						"code": (new Date()).getTime(),
						"phone": "18721775127",
						"userId": this.userId
					}
				});
				if (ret.data.success) {
					this.token = ret.data.single;
					this.$cache.set('_token_owner_union', this.token);
					app.globalData.token = this.token
					this.getUserInfo()
				}
			},
			async getUserInfo() {
				let ret = await this.$myRequest({
					url: "/user/userInfo",
					data: {

					},
					method: "GET"
				});
				if (ret.data.success) {
					this.userInfo = ret.data.single || null
				}
			},
			// 调准项目详情
			goDetailAction(e) {
				uni.setStorageSync('projectId', e.projectId)
				uni.navigateTo({
					url: '../houseDetail/houseDetail'
				})
			},
			// 跳转至效果报表
			goReportPage() {
				uni.navigateTo({
					url: '../reportPage/reportPage'
				})
			},
			toShouYiPage() {
				uni.navigateTo({
					url: '../revenueRankingPage/revenueRankingPage'
				})
			}
		},
		components: {
			levelView
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100vw;
		height: 100vh;
	}

	.content {
		width: 100%;
		height: 100%;
		position: relative;

		.topSection {
			position: relative;
			z-index: 100;
		}

		.bg_top {
			width: 100%;
			height: 470rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
		}

		.liveContent {
			width: 100%;
			height: 470rpx;
			z-index: 100;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.backDiv {
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba($color: #000000, $alpha: 0.1);
				z-index: 1;
			}

			.title {
				margin-top: 96rpx;
				font-size: 44rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				z-index: 2;
			}

			.subTitle {
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #ffffff;
				margin-top: 20rpx;
				z-index: 2;
			}

			.levelDiv {
				margin-top: 82rpx;
				width: calc(100% - 60rpx);
				height: 152rpx;
				z-index: 2;
				display: flex;
				flex-direction: column;
				padding: 25rpx 30rpx;
				box-sizing: border-box;

				.level_top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: nowrap;
					align-items: center;
					margin-top: 5rpx;

					.level_icon {
						width: 37rpx;
						min-width: 37rpx;
						max-width: 37rpx;
						height: 35rpx;
						margin-right: 13rpx;
						margin-top: -5rpx;
					}

					.level_text {
						font-size: 48rpx;
						font-family: FontName, FontName-Regular;
						font-weight: 500;
						text-align: left;
						font-style: oblique;
						color: #f5c8a8;
						line-height: 40rpx;
						letter-spacing: 1.92rpx;
						margin-right: 8rpx;
						margin-top: -7rpx;
					}

					.level_des {
						font-size: 22rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: left;
						color: #f5c8a8;
						white-space: nowrap;
						flex-grow: 1;
					}

					.level_update {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Bold;
						font-weight: 700;
						text-align: right;
						color: #f5c8a8;
						letter-spacing: 0.96rpx;
						display: flex;
						align-items: center;

						.level_right_icon {
							margin-left: 8rpx;
							width: 6rpx;
							height: 7rpx;
						}
					}
				}

			}

		}

		.content_body {
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: calc(100% - 470rpx);
			margin-top: -24rpx;
			z-index: 102;
			position: relative;
			padding: 1rpx;

			.content_beginner_guide {
				height: 354rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 40rpx;
				background: #ffffff;
				border-radius: 16rpx;
				box-sizing: border-box;

				.title {
					width: 100%;
					position: relative;
					height: 110rpx;

					.title_txt {
						font-size: 32rpx;
						font-family: FontName, FontName-Regular;
						font-weight: 400;
						text-align: left;
						color: #b1b1b1;
						font-style: italic;
						position: absolute;
						left: 50%;
						top: 30rpx;
						transform: translateX(-50%);
					}

					.title_right {
						position: absolute;
						right: 20rpx;
						top: 40rpx;
						display: flex;
						align-items: center;

						.title_right_txt {
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: right;
							color: #b1b1b1;
						}

						.title_right_cion {
							width: 10rpx;
							height: 6rpx;
							margin-left: 10rpx;
						}
					}


				}

				.guide_content {
					display: flex;
					padding-left: 40rpx;
					padding-right: 40rpx;
					box-sizing: border-box;
					justify-content: space-between;

					.item_guide {
						display: flex;
						flex-direction: column;
						align-items: center;

						.guide_img {
							width: 58rpx;
							height: 74rpx;
							margin-bottom: 17rpx;
						}

						.guide_title {
							font-size: 26rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: center;
							color: #2c2c2c;
							margin-bottom: 8rpx;
						}

						.guide_desc {
							font-size: 22rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: center;
							color: #b1b1b1;
						}
					}

					.icon_guide {
						width: 48rpx;
						height: 32rpx;
						margin-top: 20rpx;
					}
				}

			}

			.content_tab {
				display: flex;
				box-sizing: border-box;
				height: 180rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-top: 14rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				justify-content: space-between;

				.tab_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.icon_tab {
						width: 96rpx;
						height: 96rpx;
					}

					.txt_tab {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #262626;
						margin-top: 2rpx;
					}
				}
			}

			.content_tuiguang {
				height: 220rpx;
				display: flex;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 16rpx;
				margin-top: 14rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				justify-content: space-between;
				position: relative;

				.content_tuiguang_city {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 50%;

					.city_num {
						font-size: 40rpx;
						font-family: DIN Alternate, DIN Alternate-Bold;
						font-weight: 700;
						text-align: center;
						color: #262626;

					}

					.city_num_desc {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #b1b1b1;
					}

					.city_list {
						display: flex;
						justify-content: center;
						margin-top: 52rpx;
						align-items: center;

						.city_name {
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #262626;
						}

						.city_more {
							width: 26rpx;
							height: 26rpx;
							margin-left: 8rpx;
						}
					}
				}

				.content_tuiguang_money {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 50%;

					.money_num {
						font-size: 40rpx;
						font-family: DIN Alternate, DIN Alternate-Bold;
						font-weight: 700;
						text-align: center;
						color: #fd8f3c;
					}

					.money_num_des {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #b1b1b1;
					}

					.money_list {
						display: flex;
						justify-content: center;
						margin-top: 52rpx;
						align-items: center;

						.money_name {
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #262626;
						}

						.money_more {
							width: 26rpx;
							height: 26rpx;
							margin-left: 8rpx;
						}
					}

					.money_bg {
						position: absolute;
						right: 0rpx;
						top: 0;
						width: 220rpx;
						height: 220rpx;
					}
				}
			}

			.content_list {
				margin-top: 60rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				padding-bottom: 50rpx;

				.content_title {
					display: flex;
					font-size: 32rpx;
					font-family: Verdana, Verdana-Bold;
					font-weight: 700;
					text-align: left;
					color: #262626;
					align-items: center;

					.content_title_poi {
						width: 8rpx;
						height: 12rpx;
						background: #f07423;
						border-radius: 2rpx;
						margin-right: 8rpx;
					}
				}

				.content_hongbao {
					margin-top: 20rpx;
					height: 140rpx;
					background: linear-gradient(108deg, #ffb55f 9%, #f87523 96%);
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.hongbao_left {
						display: flex;
						margin-left: 26rpx;

						.icon_hongbao {
							width: 60rpx;
							height: 80rpx;
							margin-right: 20rpx;
						}

						.hongbao_left_info {
							display: flex;
							flex-direction: column;

							.hongbao_title {
								font-size: 30rpx;
								font-family: Verdana, Verdana-Bold;
								font-weight: 700;
								text-align: left;
								color: #ffffff;
							}

							.hongbao_money {
								font-size: 24rpx;
								font-family: Verdana, Verdana-Regular;
								font-weight: 400;
								text-align: left;
								color: #ffead8;
							}
						}

					}

					.hongbao_right {
						width: 140rpx;
						height: 56rpx;
						line-height: 56rpx;
						background: #ffffff;
						border-radius: 12rpx;
						font-size: 24rpx;
						font-family: Verdana, Verdana-Bold;
						font-weight: 700;
						text-align: center;
						color: #f07423;
						margin-right: 20rpx;
					}
				}

				.list_item {
					width: 100%;
					height: 280rpx;
					border-radius: 16rpx;
					display: flex;
					position: relative;
					margin-top: 20rpx;

					.house_img {
						width: 200rpx;
						height: 240rpx;
						z-index: 11;
						margin-top: 20rpx;
						margin-left: 20rpx;
						border-radius: 10rpx;
					}

					.item_content {
						display: flex;
						flex-direction: column;
						margin-left: 50rpx;
						z-index: 11;

						.house_name {
							font-size: 30rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: left;
							color: #262626;
							margin-top: 20rpx;
						}

						.house_hk {
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #fd8f3c;
							margin-top: 8rpx;
						}

						.house_address {
							display: flex;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
							margin-top: 16rpx;

							image {
								width: 20rpx;
								height: 28rpx;
								margin-right: 8rpx;
								margin-top: 6rpx;
							}

							text {
								width: 80%;
							}
						}

						.house_num {
							display: flex;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
							margin-top: 12rpx;

							image {
								width: 24rpx;
								height: 26rpx;
								margin-right: 8rpx;
								margin-top: 6rpx;
							}

							text {
								width: 80%;
							}
						}

						.house_desc {
							margin-top: 24rpx;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
						}
					}

					.item_share {
						z-index: 11;
						display: flex;
						flex-direction: column;
						width: 70rpx;
						height: 100rpx;
						background: #f07423;
						border-radius: 12rpx;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						justify-content: center;
						align-items: center;

						.icon_share {
							width: 32rpx;
							height: 32rpx;
							margin-bottom: 6rpx;
						}

						.icon_text {
							font-size: 24rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: center;
							color: #ffffff;
						}
					}

					.item_bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 95%;
						height: 100%;
						background-color: #FFFFFF;
						border-radius: 16rpx;
						z-index: 10;
					}
				}
			}
		}
	}
</style>