realty/virgo.wzfrontend/workark/src/views/website/serveDetail.vue

<template>
	<div class="home-detail">
		<div class="container" v-loading="loading">
			<div class="container-box" v-if="detail.id">
				<div class="home-detail-content">
					<div class="home-detail-swiper">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div v-for="item in rotatingImages" :key="item.id" class="swiper-slide"
									:style="`background-image:url(${item.url})`" @click.stop="openImage(item)">
								</div>
							</div>
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
						</div>
					</div>
					<div class="home-detail-information">
						<div class="house-name">{{detail.name}}</div>
						<div class="sub-title">{{detail.subtitle}}</div>
						<div class="house-price">
							<div class="color-danger price">
								<span class="average alibaba">{{detail.price}}</span><span class="unit">元/次</span>
							</div>
							<div class="button-box">
								<el-button type="primary" size="small" @click="payItem"
									v-permission="`/work/serve/list/${$route.query.sign}/pay`">
									购买
								</el-button>
								<el-button type="primary" size="small" @click="chatItem">联系客服</el-button>
							</div>
						</div>
						<div class="contract" v-if="detail.contract">
							<span class="color-primary" @click="lookContract">查看合同</span>
						</div>
						<div class="content-detail" v-if="detail.intro">
							<div class="detail-item" v-for="(item,index) in JSON.parse(detail.intro)" :key="item.id">
								<i class="iconfont huifont-youjiantou"></i>
								<div class="detail-item-title">{{item.title}}</div>
								<div class="detail-item-content">{{item.content}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="detail-img-box">
					<div class="home-detail-img" v-for="(item,index) in detailedImage" :key="item.id">
						<img :src="item.url" :alt="item.name">
					</div>
				</div>
			</div>
			<div class="skeleton-box" v-else>
				<el-empty description="暂无服务"></el-empty>
			</div>
		</div>
		<el-dialog :close-on-click-modal="false" :title="dialogType === 1?'创建订单':'预览合同'" :visible.sync="dialogVisible"
			width="900px" :append-to-body="true">
			<create-order v-if="dialogVisible && dialogType === 1" :serveId="detail.id"
				@callback="dialogVisible = false">
			</create-order>
			<pdf-viewer v-if="dialogVisible && dialogType === 2"
				:list="detail.contract ? JSON.parse(detail.contract) : []" type="preview">
			</pdf-viewer>
		</el-dialog>
		<el-dialog :title="`与<${customerTitle}>的聊天`" :visible.sync="chatVisible" width="600px" :append-to-body="true">
			<chat-box v-if="chatVisible" :body="{
				conversationId: customerId
			}"></chat-box>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getServeListByQuery
	} from '@/api/serve'
	import {
		getCustomerServeDetail
	} from '@/api/organization'
	import Crypto from '@/uitls/crypto'
	const createOrder = () => import('@/components/website/createOrder');
	const pdfViewer = () => import('@/components/common/pdfViewer');
	const chatBox = () => import('@/layout/components/chat/customer/chatBox.vue');
	export default {
		data() {
			return {
				loading: false,
				type: '',
				detail: {},
				list: [],
				rotatingImages: [],
				detailedImage: [],
				dialogVisible: false,
				dialogType: '',
				chatVisible: false,
				customerId: '',
				customerTitle: ''
			};
		},
		mounted() {
			window.scrollTo(0, 0);
			this.init();
		},
		methods: {
			init() {
				this.loading = true;
				this.type = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.type), 'bosshand');
				if (!this.type) return this.loading = false;
				this.getDetail();
			},
			getDetail() {
				getServeListByQuery({
					productLevelId: this.type,
					state: 1
				}).then(res => {
					if (res.state) {
						if (res.data.length === 0) return this.loading = false;
						this.list = res.data;
						this.initDetail(this.list.length - 1);
					} else {
						this.loading = false;
					}
					this.loading = false;
				})
			},
			initDetail(val) {
				this.detail = this.list[val];
				if (this.detail.rotatingImages) {
					this.rotatingImages = JSON.parse(this.detail.rotatingImages);
					this.initSwiper();
				}
				if (this.detail.detailedImage) {
					this.detailedImage = JSON.parse(this.detail.detailedImage);
				}
			},
			initSwiper() {
				this.$nextTick(() => {
					this.swiper = new Swiper(".swiper-container", {
						loop: true,
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
					})
				})
			},
			payItem() {
				if (!this.$store.getters.user.userId) {
					let index = this.$store.getters.loginVisible;
					index++
					this.$store.dispatch('app/changeLoginVisible', index);
					return;
				}
				this.dialogType = 1;
				this.dialogVisible = true;
			},
			chatItem() {
				if (!this.$store.getters.user.userId) {
					let index = this.$store.getters.loginVisible;
					index++
					this.$store.dispatch('app/changeLoginVisible', index);
					return;
				}
				if (!this.detail.customerId) return this.$message.warning('该产品暂未设置客服');
				getCustomerServeDetail(this.detail.customerId).then(res => {
					if (res.state) {
						if (!res.data) return this.$message.warning('该产品暂未设置客服');
						this.customerId = res.data.customerId;
						this.customerTitle = res.data.nickName;
						this.chatVisible = true;
					}
				})

			},
			lookContract() {
				this.dialogType = 2;
				this.dialogVisible = true;
			}
		},
		components: {
			createOrder,
			pdfViewer,
			chatBox
		}
	};
</script>

<style lang="scss">
	.home-detail {
		padding: 10px 0;
		box-sizing: border-box;

		.home-detail-img {
			width: 100%;

			img {
				width: 100%;
			}
		}

		.detail-item {
			padding-top: 20px;
			position: relative;
			padding-left: 25px;

			.huifont-youjiantou {
				color: $--color-primary;
				font-size: 22px;
				position: absolute;
				left: 0;
				top: 22px;
			}

			.detail-item-title {
				font-size: 20px;
				font-weight: bold;
			}

			.detail-item-content {
				margin-top: 3px;
				color: $--color-text-secondary;
			}

		}

		.contract {
			text-align: right;
			padding-top: 10px;
			cursor: pointer;
		}

		.container {
			width: 1200px;
			margin: 0 auto;
			min-height: calc(100vh - 137px);
			position: relative;
		}

		.skeleton-box {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.home-detail-content {
			display: flex;
			padding-top: 30px;
		}

		.home-detail-swiper {
			width: 670px;
			height: 480px;
			background: $--background-color-base;

			.swiper-container,
			.swiper-wrapper,
			.swiper-slide {
				width: 100%;
				height: 100%;
			}

			.swiper-slide {
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				cursor: pointer;
				position: relative;
			}

			.swiper-button-next:after,
			.swiper-button-prev:after {
				color: #eee;
				font-size: 16px;
			}

			.swiper-button-prev,
			.swiper-container-rtl .swiper-button-next {
				left: 0;
				background: rgba(0, 0, 0, 0.1);
				height: 70px;
				margin-top: -35px;
			}

			.swiper-button-next,
			.swiper-container-rtl .swiper-button-prev {
				right: 0;
				background: rgba(0, 0, 0, 0.1);
				height: 70px;
				margin-top: -35px;
			}
		}

		.home-detail-information {
			width: 470px;
			height: 480px;
			margin-left: 60px;

			.house-name {
				font-size: 26px;
				font-weight: 500;
			}

			.sub-title {
				font-size: $--font-size-small;
				color: $--color-text-secondary;
				text-indent: 24px;
				margin-top: 10px;
			}

			.content-title {
				padding: 10px 0;
				font-size: 16px;
				font-weight: 500;
			}

			.house-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid $--border-color-light;
				padding: 10px 0;

				.price {
					display: flex;
					align-items: flex-end;
				}
			}

			.average {
				font-size: 30px;
				font-weight: 900;
				margin-right: 5px;
				line-height: 24px;
			}

			.unit {
				font-size: 12px;
			}

			.desc-text {
				margin-top: 10px;
			}
		}
	}
</style>