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

<template>
	<view class="content">
		<image class="topImg" :src="dataInfo.image" mode="aspectFill"></image>
		<view class="sectionA">
			<view class="topSection">
				<view class="title">{{dataInfo.name}}</view>
				<view class="tags">
					<view class="item" v-for="(item, idx) in dataInfo.categoryList" :key="idx"
						:style="`color: ${color2}; background-color: ${color6};`">{{item.categoryName}}</view>
				</view>
				<view class="shareBtn" :style="`background-color: ${color1};`" @click="toShareCard(2)">
					<image class="icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_share.png" mode="aspectFit">
					</image>
					<text>分享项目</text>
				</view>
			</view>
			<view class="bottomSection">
				<image class="icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_dingweiY.png" mode=""></image>
				<view class="name">{{dataInfo.province + dataInfo.city + dataInfo.district + dataInfo.address}}</view>
			</view>
		</view>
		<view class="sectionB">
			<view class="item" v-for="(item, idx) in categoryList" :key="idx">
				<view class="name">{{item.categoryName}}收益</view>
				<view class="value">{{item.value}}</view>
			</view>
		</view>
		<view class="sectionC">
			<view class="title">基本信息</view>
			<view class="line"></view>
			<view class="infos">
				<view class="item" v-for="(item, idx) in infos" :key="idx">
					<view class="name">{{item.title}}</view>
					<view class="value">{{item.value}}</view>
				</view>
			</view>
		</view>
		<view class="sectionD" v-if="registAmount">
			<image class="icon" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png" mode="aspectFit"></image>
			<view class="midSection">
				<view class="name">邀请好友注册</view>
				<view class="value">完成邀请，可获得￥{{registAmount}}/人</view>
			</view>
			<view class="invitationBtn" @click="toShareCard(1)">邀请好友</view>
		</view>

		<backHome></backHome>
		<login-notice></login-notice>
		<login></login>
	</view>
</template>

<script>
	import moment from '../../static/moment.min.js'
	import {
		displayDateFormatChi
	} from '../../static/format.js'

	let app = getApp();
	const config = require('@/static/config.js');
	import backHome from "@/components/backHome/backHome.vue";
	const wx = require('weixin-js-sdk');
	export default {
		data() {
			return {
				color1: '',
				color2: '',
				color3: '',
				color6: '',
				infos: [{
						title: '开盘时间',
						value: ''
					},
					{
						title: '项目业态',
						value: ''
					},
					{
						title: '均价',
						value: ''
					},
					{
						title: '总价',
						value: ''
					},
					{
						title: '主力户型',
						value: ''
					}
					// {
					// 	title: '目标人群',
					// 	value: ''
					// }
				],
				projectId: '',
				dataInfo: {
					"address": "",
					"availableIncome": "",
					"bizFormat": "",
					"categoryList": [],
					"city": "",
					"cusGroup": "",
					"district": "",
					"id": 0,
					"image": "",
					"mainHouseType": "",
					"maxPrice": 0,
					"maxTotalPrice": 0,
					"minPrice": 0,
					"minTotalPrice": 0,
					"name": "",
					"onlineStatus": 0,
					"openTime": 0,
					"otherPage": "",
					"projectFocusImage": "",
					"projectId": "",
					"province": "",
					"registAmount": "",
					"revision": "",
					"shareImg": "",
					"shareRemark": "",
					"xcxPage": ""
				},

				categoryList: [],
				registAmount: null,
				shareToken:"",
			}
		},
		onLoad(param) {
			this.projectId = param.projectId;
		},
		onShow() {
			
		},
		components: {
			backHome
		},
		mounted() {
			this.color1 = app.globalData.color1;
			this.color2 = app.globalData.color2;
			this.color3 = app.globalData.color3;
			this.color6 = app.globalData.color6;
			this.detailDatahandle()
			uni.$on("request", () => {
				this.detailDatahandle()
			})
		},
		methods: {
			async getSingle(){
				let params = {
					"projectId": this.projectId,
					"userId": getApp().globalData.userId
				}
				let res = await this.$myRequest({
					url: '/share_token/generate',
					data: parmas
				});
				if(res.data.success){
					this.shareToken = res.data.single;
				}
			},
			async signJsapiTicket(){
				let url =  location.href.split('#')[0]
				let parmas = {
					url: url,
				}
				let self = this;
				let res = await this.$myRequest({
					url: '/wechat/signJsapiTicket',
					data: parmas,
					method:"GET",
				});
				if(res.data.success){
				   let single =	res.data.single;
				   wx.config({
				   	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				   	appId: config.appid, // 必填，公众号的唯一标识
				   	timestamp: single.timestamp, // 必填，生成签名的时间戳
				   	nonceStr: single.nonceStr, // 必填，生成签名的随机串
				   	signature: single.signature, // 必填，签名
				       jsApiList: ["updateAppMessageShareData","updateTimelineShareData",'showMenuItems'] // 必填，需要使用的JS接口列表
				   });
				   wx.ready(function() {
				   	// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
				   	wx.updateAppMessageShareData({ //分享给朋友
				   		title: self.dataInfo.name, // 分享标题
				   		desc: self.dataInfo.shareRemark, // 分享描述
				   		link: location.origin+location.pathname + "?projectId="+self.projectId+"&shareToken="+self.shareToken, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				   		imgUrl: self.dataInfo.shareImg, // 分享图标
				   		success: function() {
				   			// 设置成功
				   		}
				   	});
				   	wx.updateTimelineShareData({ //分享到朋友圈
				   		title: self.dataInfo.name, // 分享标题
				   		link: location.origin+location.pathname + "?projectId="+self.projectId+"&shareToken="+self.shareToken, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				   		imgUrl: self.dataInfo.shareImg, // 分享图标
				   		success: function() {
				   			// 设置成功
				   		}
				   	});
					wx.showMenuItems({
						menuList: [ "menuItem:share:appMessage","menuItem:share:timeline"] // 要显示的菜单项，所有menu项见附录3
					});
				   });
				   wx.error(function(res) {
				   	// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				   });
				}
			},
			async detailDatahandle() {
				if (getApp().globalData.userId) {
					var parmas = {
						projectId: this.projectId,
						userId: getApp().globalData.userId
					}
					this.getSingle();
					this.createUserProjectRlat();
					this.getRegistTask();
					let res = await this.$myRequest({
						url: '/project/queryProjectByH5',
						data: parmas
					})
					if (res && res.data.success) {
						console.log('详情res：', res)
						this.dataInfo = res.data.single
						this.reloadCategoryList()
						this.reloadInfos();
						this.signJsapiTicket();
					}
				}
			},

			async getRegistTask() {
				if (app.globalData.userId) {
					let res = await this.$myRequest({
						url: "/task/registTask",
						method: "GET",
						data: {
							userId: getApp().globalData.userId
						}
					})
					if (res.data.success) {
						this.registAmount = res.data.single.amount || null
					} else {
						this.registAmount = null;
					}
				}
			},

			async createUserProjectRlat() {
				if (getApp().globalData.userId) {
					var parmas = {
						projectId: this.projectId,
						shareToken: getApp().globalData.shareToken
					}
					let res = await this.$myRequest({
						url: '/user/createUserProjectRlat',
						data: parmas
					})
					if (res && res.data.success) {

					}
				}
			},

			reloadCategoryList() {
				var tempList = JSON.parse(JSON.stringify(this.dataInfo.categoryList || []))
				tempList.forEach((item, idx) => {
					item.value = '￥' + (parseFloat(item.amount || 0.00).toFixed(2)) + '/个'
				})
				this.categoryList = tempList
				this.categoryList.push({
					categoryName: '可获收益',
					value: this.dataInfo.availableIncome + '元'
				})
			},

			reloadInfos() {
				this.infos[0].value = this.timeFilterAction(this.dataInfo.openTime)
				this.infos[1].value = this.dataInfo.bizFormat
				if (this.dataInfo.maxPrice > 0) {
					this.infos[2].value = this.priceReload(this.dataInfo.minPrice) + '~' + this.priceReload(this.dataInfo
						.maxPrice) + '/m²'
				} else {
					this.infos[2].value = this.priceReload(this.dataInfo.minPrice) + '/m²'
				}
				if (this.dataInfo.maxTotalPrice > 0) {
					this.infos[3].value = this.priceReload(this.dataInfo.minTotalPrice) + '~' + this.priceReload(this
						.dataInfo.maxTotalPrice) + '/套'
				} else {
					this.infos[3].value = this.priceReload(this.dataInfo.minTotalPrice) + '/套'
				}
				this.infos[4].value = this.dataInfo.mainHouseType
				// this.infos[5].value = this.dataInfo.cusGroup

				this.infos.forEach((item, idx) => {
					if (!item.value) {
						item.value = '暂无'
					}
				})
			},
			timeFilterAction(val) {
				if (val) {
					return displayDateFormatChi(val * 1000)
				} else {
					return ''
				}
			},
			priceReload(val) {
				return parseFloat(val / 10000).toFixed(2) + '万'
			},

			toShareCard(type) {
				if (getApp().globalData.userId) {
					let href = location.origin + location.pathname;
					uni.navigateTo({
						url: '../shareCardPage/shareCardPage?page=' + href + "&projectId=" + this.projectId +
							"&type=" + type
					})
				} else {
					uni.$emit('unLogin')
				}
			},

			backAction() {
				uni.navigateBack({
					delta: 1
				})
			}

		},
		watch: {

		},
		onPullDownRefresh() {
			this.detailDatahandle();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.content {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		position: relative;
		padding-bottom: 60rpx;
		box-sizing: border-box;

		.topImg {
			width: 100%;
			height: 480rpx;
			background-color: rgba($color: #000000, $alpha: 0.5);
			// 滤镜效果
			// -webkit-filter: grayscale(30%); /* Chrome, Safari, Opera */
			// filter: grayscale(30%);
		}

		.sectionA {
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			margin-top: 50rpx;

			.topSection {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 6rpx;
				box-sizing: border-box;

				.title {
					font-size: 44rpx;
					font-family: Verdana, Verdana-Bold;
					font-weight: 700;
					text-align: left;
					color: #262626;
					white-space: pre-wrap;
					max-width: 50%;
				}

				.tags {
					margin-left: 8rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					flex-grow: 1;

					.item {
						padding: 0 18rpx;
						box-sizing: border-box;
						line-height: 40rpx;
						height: 40rpx;
						text-align: center;

						font-size: 20rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						margin-left: 12rpx;
					}
				}

				.shareBtn {
					width: 140rpx;
					height: 52rpx;
					border-radius: 8px;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
					display: flex;
					align-items: center;

					font-size: 22rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					text-align: left;
					color: #ffffff;

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}
			}

			.bottomSection {
				margin-top: 16rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 80rpx;
				background: #f8f8f8;
				border-radius: 8rpx;

				.icon {
					width: 20rpx;
					height: 28rpx;
					margin-right: 14rpx;
					margin-left: 25rpx;
				}

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

		}

		.sectionB {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 40rpx 36rpx;
			box-sizing: border-box;
			flex-wrap: wrap;

			.item {
				width: calc((100% - 12rpx) / 3);
				min-width: calc((100% - 12rpx) / 3);
				max-width: calc((100% - 12rpx) / 3);

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

				.value {
					font-size: 32rpx;
					font-family: DIN Alternate, DIN Alternate-Bold;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					color: #fd8f3c;
				}
			}
		}

		.sectionC {
			width: 100%;
			padding: 0 36rpx 76rpx 36rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.title {
				font-size: 28rpx;
				font-family: Verdana, Verdana-Bold;
				font-weight: 700;
				text-align: left;
				color: #171717;
				width: 100%;
				margin-bottom: 26rpx;
			}

			.line {
				width: 6rpx;
				height: 268rpx;
				background: linear-gradient(180deg, #ffd7b9, rgba(255, 215, 185, 0.00));
				border-radius: 4rpx;
			}

			.infos {
				margin-left: 30rpx;
				width: calc(100% - 36rpx);
				margin-top: -20rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;

				.item {
					width: 50%;

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

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

		}

		.sectionD {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 30rpx;
			width: calc(100% - 60rpx);
			height: 140rpx;
			background: linear-gradient(108deg, #ffb55f 9%, #f87523 96%);
			border-radius: 16rpx;

			padding: 0 20rpx 0 26rpx;
			box-sizing: border-box;

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

			.midSection {
				flex-grow: 1;

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

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

			.invitationBtn {
				width: 140rpx;
				height: 56rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;

				font-size: 24rpx;
				font-family: Verdana, Verdana-Bold;
				font-weight: 700;
				text-align: center;
				color: #f07423;
				line-height: 56rpx;
			}

		}
	}
</style>