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};`">
					<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">
			<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">完成邀请，可获得￥{{dataInfo.registAmount}}/人</view>
			</view>
			<view class="invitationBtn">邀请好友</view>
		</view>
		
		<view class="homeBtn"
		:style="`position: fixed; z-index: 1000; right: 0; bottom: 25%; width: 96rpx; height: 110rpx; display: flex; flex-direction: column; align-items: center;border-radius: 20rpx 0rpx 0px 20rpx;box-shadow: 0rpx 10rpx 20rpx 0px rgba(119,55,12,0.20); background-color: ${color2};`"
		@click="backAction">
			<image class="icon" style="margin-top: 8rpx;width: 30rpx; height: 28rpx;" src="https://dm.static.elab-plus.com/yezhu/h5/icon_homeBtn.png" mode="aspectFit"></image>
			<view class="text" style="margin-top: 6rpx;font-size: 12rpx;font-family: PingFang SC, PingFang SC-Semibold;font-weight: 400;text-align: center;color: #ffffff;">返回</view>
			<view class="text" style="margin-top: -2rpx;;font-size: 12rpx;font-family: PingFang SC, PingFang SC-Semibold;font-weight: 400;text-align: center;color: #ffffff;">任务大厅</view>
		</view>
		
	</view>
</template>

<script>
	import moment from '../../static/moment.min.js'
	import {
		displayDateFormatChi
	} from '../../static/format.js'
	
	let app = getApp();
	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: []
			}
		},
		mounted() {
			this.color1 = app.globalData.color1;
			this.color2 = app.globalData.color2;
			this.color3 = app.globalData.color3;
			this.color6 = app.globalData.color6;
			this.projectId = uni.getStorageSync('projectId')
			if (this.projectId) {
				this.detailDatahandle()
			}
		},
		methods: {
			async detailDatahandle() {
				var parmas = {
					projectId: this.projectId
				}
				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()
				}
			},
			
			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) {
				return displayDateFormatChi(val)
			},
			priceReload(val) {
				return parseFloat(val / 10000).toFixed(2) + '万'
			},
			
			backAction() {
				uni.navigateBack({
					delta: 1
				})
			}
			
		},
		watch: {
			
		}
	}
</script>

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

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

		.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;
				}

				.tags {
					margin-left: 8rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					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;

			.item {
				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;
					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>