goufangtong3/pagesA/index/rizhao.vue

<template>
	<view class="rizhao">
		<u-navbar :title="title" back-icon-color="#fff" title-color="#fff" :background="{background:'rgba(0,0,0,0)'}" :border-bottom="false" :immersive="true"></u-navbar>
		<view class="header-3d" id="objContaier" @click="to3D">
			<image v-if="detail.sunlight_image" :src="detail.sunlight_image" class="bg-3d" mode="aspectFill"></image>
			<image v-else src="../static/3d-bg.png" class="bg-3d" mode="aspectFill"></image>
			<view class="btn-3d u-flex u-row-center">
				<image src="../static/3d-btn.png" mode=""></image>
			</view>
		</view>
		<view class="time-box u-flex u-flex-wrap u-row-center">
			<view class="u-flex time-item u-row-center" v-for="(a,b) in timelist" :key="b">
				<text :style="{background:a.color}"></text>
				<text>{{a.name}}</text>
			</view>
		</view>
		<view class="louceng-fangxiang u-flex u-row-between u-flex-wrap">
			<text :class="{text:fangxiang == index}" v-for="(item,index) in fangxianglist" :key="index" @click="changefangxiang(index)">{{item.orientation}}</text>
		</view>
		<view class="louceng-jieqi">
			<view class="jieqi-box u-flex u-row-between u-flex-wrap">
				<text v-for="(a,b) in jieqilist" :class="b == jieqi ? 'text' : ''" :key="b" @click="changejieqi(b)">{{a.solar_terms}}</text>
			</view>
		</view>
		<view class="rizhao-louhao u-flex u-flex-wrap">
			<view class="u-flex u-col-center u-row-center louhao-active" :style="{borderColor:louhao == index ? '#1F7EFF' : '#999999'}" v-for="(item,index) in louhaoList" :key="index" @click="changelou(index)">
				<text class="text1" :style="{color:louhao == index ? '#1F7EFF' : '#999999'}">{{item.build_num}}#</text>
				<text class="text2" v-if="louhao == index">✓</text>
			</view>
		</view>
		<scroll-view class="louceng-time-table" scroll-x="true" v-if="list.length > 0">
			<view class="u-flex-col" :style="{width:getwidth() + 'rpx'}">
				<view class="table-header">
					{{louhaoList[louhao].build_num}}#{{fangxianglist[fangxiang] ? fangxianglist[fangxiang].orientation : ''}}{{jieqilist[jieqi] ? jieqilist[jieqi].solar_terms : ''}}
				</view>
				<view class="body-header u-flex">
					<view class="header-title u-flex-col u-row-between">
						<text class="text1">单元</text>
						<text class="text2">楼层</text>
						<image src="../../static/images/xiegang.png" mode=""></image>
					</view>
					<view class="danyuan-header" v-for="(a,b) in list[0].unit_info" :key="b">
						<view class="danyuan-title">
							第{{a.unit}}单元
						</view>
						<view class="u-flex">
							<view class="house-title" v-for="(c,d) in a.house_info" :key="d">
								{{a.house_info.length - d}}室
							</view>
						</view>
					</view>
				</view>
				<view class="body-item" v-for="(item,index) in list" :key="index">
					<view class="item-title">
						<text>{{item.floor}}F</text>
					</view>
					<view class="danyuan-item" v-for="(a,b) in item.unit_info" :key="b">
						<view class="house-item" v-for="(c,d) in a.house_info" :key="d" :style="{background:getcolor(c)}">
							<view class="house-room u-flex">
								<text>{{c.room_num}}</text>
								<text>室</text>
							</view>
							<view class="house-allprice">
								<text>{{c.sunlight_duration}}</text>
								<text></text>
							</view>
							<view class="house-price">
								<text></text>
								<text>{{c.sunlight_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="" style="padding: 24rpx;">
			<view v-html="sunshine"></view>
		</view>
		<view class="u-flex-col" style="font-size: 28rpx;color: #9DA3AB;padding: 0 24rpx;">
			<view class="u-flex" style="margin-bottom: 10rpx;" @click="showmianze2 = true">
				<text style="margin-right: 10rpx;">免责声明</text>
				<u-icon name="info-circle-fill"></u-icon>
			</view>
		</view>
		<view class="" style="height:170rpx"></view>
		<view class="rizhao-btn u-flex u-row-between">
			<text @click="opentel">隐私电话</text>
			<text @click="tochat">在线咨询</text>
		</view>
		<u-popup v-model="showtocall" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">您是否进行呼叫？</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showtocall = false">取消</text>
					<text @click="tocell">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showlogin" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">你目前处于未登录状态请前往登录</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showlogin = false">取消</text>
					<text @click="tologin">确定</text>
				</view>
			</view>
		</u-popup>
		<!-- <u-popup v-model="showmianze1" mode="bottom" height="900rpx">
			<view class="" style="padding: 24rpx;">
				<view v-html="sunshine"></view>
			</view>
		</u-popup> -->
		<u-popup v-model="showmianze2" mode="bottom" height="900rpx">
			<view class="" style="padding: 24rpx;">
				<view v-html="disclaimer"></view>
			</view>
		</u-popup>
		<gf-chat ref="chatlist" @over="getuser"></gf-chat>
		<gf-tel ref="tellist" @over="getuser"></gf-tel>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showmianze2: false,
				showtocall: false,
				showlogin: false,
				id: '',
				louhaoList: [],
				louhao: 0,
				jieqilist: [],
				jieqi: 0,
				fangxianglist: [],
				fangxiang: 0,
				detail: {},
				list: [],
				timelist: [{
					name: '8h=日照',
					color: '#61C86A',
					value: ['08:00']
				}, {
					name: '8h>日照>=6h',
					color: '#9BD56D',
					value: ['08:00', '06:00']
				}, {
					name: '6h>日照>=4h',
					color: '#E7E2A6',
					value: ['06:00', '04:00']
				}, {
					name: '4h>日照>=2h',
					color: '#F4CE9E',
					value: ['04:00', '02:00']
				}, {
					name: '2h>日照>=0h',
					color: '#F5BBB1',
					value: ['02:00', '00:00']
				}],
				sunshine: '',
				disclaimer: '',
				title: '',
				worker_id: 0,
				worker_phone: '',
				worker_hx_username: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
			this.getlist()
			this.getconfig()
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.getuser()
			}
		},
		mounted() {

		},
		methods: {
			to3D() {
				if (this.detail.abbr_url) {
					uni.navigateTo({
						url: '/pagesA/index/webview?url=' + this.detail.abbr_url + "&id=" + this.id + "&type=1"
					})
				} else {
					this.$u.toast("暂无数据")
				}
			},
			opentel() {
				if (uni.getStorageSync("token")) {
					this.showtocall = true
				} else {
					this.showlogin = true
				}
			},
			getuser() {
				this.$u.post('/api/Member/member_info').then(res => {
					this.worker_id = res.data.worker_id
					this.worker_phone = res.data.worker_phone
					this.worker_hx_username = res.data.worker_hx_username
				})
			},
			getconfig() {
				this.$u.post('/api/Index/platform_config').then(res => {
					const regex = new RegExp('<img', 'gi')
					this.sunshine = res.data.sunshine.replace(regex, `<img style="max-width: 100%; height: auto"`)
					this.disclaimer = res.data.disclaimer.replace(regex, `<img style="max-width: 100%; height: auto"`)
				})
			},
			changejieqi(index) {
				this.jieqi = index
				this.getdetail()
			},
			changefangxiang(index) {
				this.fangxiang = index
				this.getdetail()
			},
			getcolor(item) {
				for (let i = 0; i < this.timelist.length; i++) {
					var sunlight_duration = item.sunlight_duration.length == 4 ? ('0' + item.sunlight_duration) : item.sunlight_duration
					if (this.timelist[i].value[0] == sunlight_duration) {
						return this.timelist[i].color
					}
					if (this.timelist[i].value[1]) {
						if (this.timelist[i].value[0] > sunlight_duration && this.timelist[i].value[1] <= sunlight_duration) {
							return this.timelist[i].color
						}
					}
				}
			},
			getwidth() {
				var width = 0
				this.list.forEach((item, index) => {
					if (index == 0) {
						width = width + 104
						item.unit_info.forEach(val => {
							width = width + val.house_info.length * 160
						})
					}
				})
				return width
			},
			getlist() {
				this.$u.get('/api/Property/sunshine_info', {
					id: this.id
				}).then(res => {
					this.louhaoList = res.data.build_info
					this.jieqilist = res.data.solar_terms_info
					this.fangxianglist = res.data.orientation_info
					this.getdetail()
				})
			},
			getdetail() {
				this.$u.get('/api/Property/sunshine_detail', {
					id: this.id,
					build_num: this.louhaoList[this.louhao] ? this.louhaoList[this.louhao].build_num : '',
					orientation: this.fangxianglist[this.fangxiang] ? this.fangxianglist[this.fangxiang].orientation : '',
					solar_terms: this.jieqilist[this.jieqi] ? this.jieqilist[this.jieqi].solar_terms : ''
				}).then(res => {
					this.list = res.data.sort((a, b) => b.floor - a.floor)
					this.list.forEach(item => {
						item.unit_info = item.unit_info.sort((a, b) => b.unit - a.unit)
						item.unit_info.forEach(val => {
							val.house_info = val.house_info.sort((a, b) => b.room_num - a.room_num)
						})
					})
				})
			},
			getdata() {
				this.$u.post('/api/Property/property_detail', {
					id: this.id
				}).then(res => {
					this.detail = res.data
					this.title = res.data.name
				})
			},
			tologin() {
				this.showlogin = false
				uni.navigateTo({
					url: "/pages/mine/login"
				})
			},
			tochat() {
				if (uni.getStorageSync("token")) {
					if (this.worker_id == 0) {
						this.$refs.chatlist.open(this.id)
					} else {
						this.$u.post('/api/Member/consult_record', {
							type: 2
						})
						uni.navigateTo({
							url: "/pages/index/chat?hx_username=" + this.worker_hx_username + "&worker_id=" + this.worker_id
						})
					}
				} else {
					this.showlogin = true
				}
			},
			tocell() {
				if (uni.getStorageSync("token")) {
					this.showtocall = false
					if (this.worker_id == 0) {
						this.$refs.tellist.open(this.id)
					} else {
						this.$u.post('/api/Member/consult_record', {
							type: 1
						})
						uni.makePhoneCall({
							phoneNumber: this.worker_phone
						})
					}
				} else {
					this.showlogin = true
				}
			},
			changelou(index) {
				this.louhao = index
				this.getdetail()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.rizhao {
		.header-3d {
			height: 648rpx;
			width: 750rpx;
			position: relative;

			.bg-3d {
				height: 648rpx;
				width: 750rpx;
			}

			.btn-3d {
				width: 128rpx;
				height: 128rpx;
				background: rgba(0, 0, 0, 0.5);
				border: 4rpx solid rgba(255, 255, 255, 0.5);
				border-radius: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				image {
					width: 50rpx;
					height: 70rpx;
				}
			}
		}

		.tocall-box {
			position: relative;

			.tocall-img {
				width: 650rpx;
				height: 476rpx;
			}

			.tocall-btn {
				position: absolute;
				bottom: 70rpx;
				left: 0;
				width: 100%;
				padding: 0 48rpx;

				text:first-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #FFA120;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-decoration: none;
				}
			}

			.tocall-text {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				position: absolute;
				top: 244rpx;
				left: 0;
				z-index: 10;
				width: 100%;
			}
		}

		.rizhao-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 10;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 0 24rpx 54rpx 24rpx;

			text:first-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-decoration: none;
			}

			text:last-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #1F7EFF;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.louceng-time-table {
			width: 702rpx;
			margin: 20rpx auto;
			background-color: #fff;

			.body-header {
				height: 124rpx;
				white-space: nowrap;
				border-bottom: 1rpx solid #CCCCCC;

				.danyuan-header {

					.danyuan-title {
						height: 58rpx;
						line-height: 58rpx;
						text-align: center;
						border-bottom: 1rpx solid #CCCCCC;
						border-right: 1rpx solid #CCCCCC;
					}

					.house-title {
						width: 160rpx;
						height: 64rpx;
						line-height: 64rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
						border-right: 1rpx solid #CCCCCC;
					}
				}

				.header-title {
					width: 104rpx;
					height: 124rpx;
					border-right: 1rpx solid #CCCCCC;
					padding: 8rpx 12rpx;
					position: relative;

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.text1 {
						width: 100%;
						text-align: right;
					}

					.text2 {
						width: 100%;
					}
				}
			}

			.body-item {
				// height: 160rpx;
				display: inline-flex;
				align-items: stretch;
				white-space: nowrap;
				border-bottom: 1rpx solid #CCCCCC;

				.danyuan-item {
					display: inline-flex;
					align-items: stretch;
					white-space: nowrap;
					vertical-align: top;

					.house-item {
						display: inline-flex;
						flex-direction: column;
						justify-content: flex-start;
						width: 160rpx;
						padding-left: 16rpx;
						border-right: 1rpx solid #CCCCCC;
						min-height: 160rpx;

						.house-mianji {
							text:first-child {
								font-size: 24rpx;
								color: #333333;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}

						.house-price {
							text:first-child {
								font-size: 24rpx;
								color: #1F7EFF;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}

						.house-allprice {
							text:first-child {
								font-size: 28rpx;
								color: #333333;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}

						.house-room {
							padding-top: 10rpx;

							text:first-child {
								font-size: 24rpx;
								color: #333333;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}
					}
				}

				.item-title {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					vertical-align: top;
					width: 104rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					border-right: 1rpx solid #CCCCCC;
					min-width: 1rpx;
				}
			}


			.table-header {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				border-bottom: 1rpx solid #CCCCCC;

			}
		}

		.time-box {
			width: 750rpx;
			height: 138rpx;
			background: #FFFFFF;
			margin: 0 auto;
			padding: 24rpx 24rpx 4rpx 24rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.time-item {
				width: 33%;
				margin-bottom: 20rpx;

				text:first-child {
					width: 32rpx;
					height: 32rpx;
					background: #61C86A;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					// margin-right: 40rpx;
				}
			}
		}

		.louceng-jieqi {
			background-color: #fff;
			padding-bottom: 24rpx;

			.jieqi-box {
				width: 662rpx;
				// height: 164rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				margin: 0 auto;
				padding: 24rpx 20rpx 4rpx 20rpx;

				text {
					margin-bottom: 20rpx;
					width: 194rpx;
					line-height: 48rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #999999;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.text {
					color: #1F7EFF;
					border-color: #1F7EFF;
				}
			}
		}

		.louceng-fangxiang {
			padding: 24rpx 44rpx;
			background-color: #FFFFFF;

			text {
				flex: 1;
				min-width: 318rpx;
				line-height: 84rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #999999;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.text {
				color: #1F7EFF;
				border-color: #1F7EFF;
			}
		}

		.rizhao-louhao {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 0 24rpx 0;
			margin: 20rpx auto;

			.louhao-active {
				margin: 0 20rpx;
				width: 92rpx;
				height: 40rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 1rpx solid #999999;
				position: relative;
				margin-top: 24rpx;

				.text1 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.text2 {
					width: 20rpx;
					line-height: 20rpx;
					background: #1F7EFF;
					border-radius: 8rpx 0px 8rpx 0px;
					text-align: center;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 1;
					color: #fff;
					font-size: 18rpx;
				}
			}
		}
	}
</style>