BD-LDBD-UNI/pages/shop/shopDetail/index.vue

<template>
	<view class="shopDetail" :style="{marginTop:statusBarHeight}">
		<view class="header">
			<view class="hdbefore">
				<image :src="baseImagePath+shopData.logoUrl" alt="" style="width: 100%;height: 100%;">
			</view>
			<!-- 手机状态栏占位 -->
			<view class="statusBar" :style="{height:statusBarHeight+'rpx'}"></view>
			<!-- 导航栏 -->
			<view class="navigationBar" :style="{height:navigationBarHeight,paddingTop:statusBarHeight+'rpx'}">
				<view @click="goBack">
					<image class="back" :src="require('../../../static/back.png')" alt="">
				</view>

			</view>
			<!-- 顶部搜索 -->
			<view class="search">
				<view class="icon-search">
					<image :src="require('../../../static/search.png')" alt="">
				</view>
				<input class="input" type="text" confirm-type="search" @confirm="toSearch()" placeholder="输入关键字搜索"
					v-model="search" placeholder-class="co" />
			</view>
			<!-- 视频播放 -->
			<view class="video" v-if="shopData.video">
				<image :src="require('../../../static/video.png')" alt="">
					<view class="title">
						视频
					</view>

			</view>
			<!-- 查看图片 -->
			<view class="image" v-if="shopData.photo" @click="toShopPhotoAlbum">
				<image :src="require('../../../static/pic.png')" alt="">
					<view class="title">
						图片
					</view>
			</view>
		</view>
		<view class="body">
			<!-- 门店基本信息 -->
			<view class="header-view">
				<view class="headPortrait">
					<image :src="baseImagePath+shopData.logoUrl" alt="">
				</view>
				<view class="middle">
					<view class="">
						<view class="title">
							{{shopData.name}}
						</view>
						<view class="buttom">
							<view v-if="shopData.attribute==1" class="manage">
								自营
							</view>
							<view class="stars">
								<view class="unit">
									评分:
								</view>
								<view class="star" v-for="(item, index) in starList" :key="index">
									<image :src="(index+1)<=shopData.ealuationScore?item.stary:item.starsg" alt="">
								</view>
							</view>
							<view class="num">
								收藏数{{shopData.collectionNum}}
							</view>
						</view>
					</view>

					<view :class="shopData.isCollection==1?'collect':'uncollect'" @click="toSave(shopData.id)">
						<image v-if="shopData.isCollection==2" :src="require('../../../static/guanzhu.png')" alt="">
							{{shopData.isCollection==1?'已收藏':'收藏'}}
					</view>
				</view>
			</view>
			<!-- 营业时间地址等信息 -->
			<view class="introduce">
				<view class="businessHours">
					营业时间：{{shopData.satrtTime}}-{{shopData.overTime}}
				</view>
				<view class="content">
					<view class="locations">
						<view class="location">
							{{shopData.address}}
						</view>
						<view class="km">
							距您{{shopData.distance}}km
						</view>
					</view>
					<view class="btn">
						<view class="navigation" @click="toGps()">
							<image :src="require('../../../static/daohang.png')" alt="">
								<view class="unit">
									导航
								</view>
						</view>
						<view class="phone" @click="toCall(shopData.phone)">
							<image :src="require('../../../static/dianhua.png')" alt="">
								<view class="unit">
									电话
								</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 门店服务 门店评价 门店介绍 -->
			<view class="shopFunction">
				<view class="shopHeader">
					<view :class="shopType == 0?'action':'title'" @click="shopType = 0">
						门店服务
						<view class="border"></view>
					</view>
					<view :class="shopType == 1?'action':'title'" @click="shopType = 1">
						门店评价
						<view class="border"></view>
					</view>
					<view :class="shopType == 2?'action':'title'" @click="toInclude(2)">
						门店介绍
						<view class="border"></view>
					</view>
				</view>
				<shopGoods v-if="shopType == 0" :set-meal-list="setMealList"></shopGoods>
				<view v-if="shopType == 1" class="evaluateBody" v-for="(item, index) in pingjia" :key="index">
					<view class="evaluateHead">
						<view class="titleBody">
							<view class="titleImg">
								<image :src="baseImagePath+item.userImg" alt="">
							</view>
							<view class="classTitle">
								<view class="title">
									{{item.title}}
								</view>
								<view class="star">
									<image v-for="(subItem, indexs) in starList" :key="indexs"
										:src="(indexs+1)<=item.sumScore?subItem.stary:subItem.starsg" alt="">
								</view>
							</view>
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
					<view class="evaluateButtom">
						<view :style="item.imgContent?'width: 75%;':''" class="evaluateContent">
							{{item.content}}
						</view>
						<view style="position: relative;" @click="previewImage(item.imgContent.split(','))">
							<image v-if="item.imgContent" :src="baseImagePath+item.imgContent.split(',')[0]" alt="">
								<view v-if="item.imgContent" class="phoneNum">
									{{item.imgContent.split(',').length}}张
								</view>
						</view>

					</view>
				</view>
				<view class="webView" v-if="shopType == 2">
					<view v-html="shopData.introduce" style="padding: 0rpx 30rpx 30rpx ;"></view>
				</view>
			</view>

			<view style="height: 200rpx;">
			</view>
		</view>
		<view class="buttomBtn">
			<view class="preCarWash" @click="carWash">
				预约洗车
			</view>
			<view class="preMaintain" @click="routerTo">
				预约维修
			</view>
		</view>
	</view>
</template>

<script>
	import shopGoods from '@/components/SetMeal/shopGoods.vue'
	import {
		getShopGoods,
		shopDetail,
		orderEvaluate,
		getInclude
	} from "@/api/shop.js"
	import {
		saveShop
	} from "../../../api/myApi.js"
	const app = getApp();
	export default {
		components: {
			shopGoods,
		},
		data: function() {
			return {
				baseImagePath: this.baseImagePath,
				shopType: 0, //0:门店服务 1：门店评价 2：门店介绍
				pingjia: [],
				setMealList: [],
				starList: [{
						starsg: require('../../../static/star-s-g.png'),
						stary: require('../../../static/star-y.png'),
					},
					{
						starsg: require('../../../static/star-s-g.png'),
						stary: require('../../../static/star-y.png'),
					},
					{
						starsg: require('../../../static/star-s-g.png'),
						stary: require('../../../static/star-y.png'),
					},
					{
						starsg: require('../../../static/star-s-g.png'),
						stary: require('../../../static/star-y.png'),
					},
					{
						starsg: require('../../../static/star-s-g.png'),
						stary: require('../../../static/star-y.png'),
					}
				],
				shopData: {
					headerData: {
						url: require('../../../static/u1u5bg.png'),
						name: "优1优5华南广场快修店",
						manageType: 1,
						xingxing: 4,
						type: false,
						shoucangshu: "35678"
					}
				},
				longitude: app.globalData.longitude,
				latitude: app.globalData.latitude,
				statusBarHeight: "",
				navigationBarHeight: "",
				navHeight: "",
				id: "",
				search: "",
				pageNo: 1,
				pageSize: 10,
				url: ''
			}
		},
		onReachBottom() {
			switch (this.shopType) {
				case 0:
					this.pageNo += 1
					this.getGoods()
					break;
				case 1:
					this.pageNo += 1
					this.getEvaluate()
					break;
				case 2:
					break;
			}
		},
		onLoad(options) {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// console.log(custom)
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2

			// console.log("导航栏高度："+this.globalData.navigationBarHeight)

			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = (this.navigationBarHeight + this.statusBarHeight)
			this.navigationBarHeight = this.navigationBarHeight + 'px'
			this.statusBarHeight = this.statusBarHeight + 'px'
			this.navHeight = this.navHeight + 'px'

			// #endif
			this.id = options.id
			shopDetail({
				id: this.id,
				longitude: this.longitude,
				latitude: this.latitude
			}).then(res => {
				this.shopData = res.data;
				console.log('店铺详情=====》', this.shopData);
			})
			this.getGoods()
		},
		watch: {
			shopType(val) {
				console.log(val, '评价');
				this.pageNo = 1
				switch (val) {
					case 0:
						this.setMealList = []
						this.getGoods()
						break;
					case 1:
						this.pingjia = []
						this.getEvaluate()
						break;
					case 2:
						getInclude({
							id: this.id
						}).then(res => {
							for (let item in res.data) {
								if (res.data[item].type === "15") {
									// this.url = res.data[item].url+ '?id='+this.id+'&token=eyJ1c2VySWQiOjE1OTcxNTUzMDAwOTAwODUzNzgsImFjY291bnQiOiIxNTE0MTE1NTQ3NyIsInV1aWQiOiIyMGRiNGE3Ny00OTg5LTRmOWUtYWMxNi1mZDc3OGMyMjFmMWQiLCJyZW1lbWJlck1lIjp0cnVlLCJleHBpcmF0aW9uRGF0ZSI6MTY3MTk4NDU1MTUxOCwiY2FUb2tlbiI6bnVsbCwib3RoZXJzIjpudWxsLCJzdWIiOiIxNTk3MTU1MzAwMDkwMDg1Mzc4IiwiaWF0IjoxNjcwMjMxNTE4LCJleHAiOjE2NzE5ODQ1NTF9'
									this.url = res.data[item].url + '?id=' + this.id
									console.log(this.url, 'asdfasdfa');
								}
							}
						})
						break;
				}
			}
		},
		methods: {
			toSave(id) {
				let data = {
					detailId: id,
					type: 2
				}
				saveShop(data).then(res => {
					console.log(res);
					if (res.code === '00000') {
						shopDetail({
							id: this.id,
							longitude: this.longitude,
							latitude: this.latitude
						}).then(res => {
							this.shopData = res.data;
							console.log('店铺详情=====》', this.shopData);
						})
					}
				})
			},
			previewImage(item) {
				let imgArr = []
				item.forEach(data => {
					console.log(data, 'data');
					imgArr.push(this.baseImagePath + data)
				})
				uni.previewImage({
					urls: imgArr,
					fail: (res) => {
						console.log(res);
					}
				})
			},
			toGps() {
				console.log(this.shopData);
				uni.navigateTo({
					url: '/pages/shop/navigation/navigation?latitude=' + this.shopData.latitude + '&longitude=' +
						this.shopData.longitude + '&shopTitle=' + this.shopData.name + '&address=' + this.shopData
						.address + '&distance=' + this.shopData.distance + '&phone=' + this.shopData.phone,
					fail: (res) => {
						console.log(res);
					}
				})
			},
			toCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel,
					fail: (res) => {
						uni.showToast({
							icon: 'none',
							title: '呼叫拉起失败：' + res
						})
					}
				})
			},
			toInclude(item) {
				this.shopType = 2

			},
			toSearch() {
				this.pageNo = 1
				this.setMealList = []
				this.getGoods()
			},
			toShopPhotoAlbum() {
				// this.$yrouter.push({ path: "/pages/shop/shopDetail/shopPhotoAlbum/index" });
				uni.navigateTo({
					url: '/pages/shop/shopDetail/shopPhotoAlbum/index?photo=' + this.shopData.photo
				})
			},
			routerTo() {
				// uni.$emit('chooseShop', this.shopData)
				uni.setStorageSync('shopData', this.shopData)
				console.log('1', this.shopData);
				uni.navigateTo({
					url: "/pages/maintenance/onlineReservation/index?type=maintenance&page=index"
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			carWash() {
				// uni.$emit('chooseShop', this.shopData)
				uni.setStorageSync('shopData', this.shopData)
				uni.navigateTo({
					url: "/pages/preCarWash/index?type=washCar&token=" + uni.getStorageSync('token')
				})
			},
			getGoods() {
				let data = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					shopId: this.id,
					name: this.search
				}
				getShopGoods(data).then(res => {
					console.log('服务', res.data);
					this.setMealList = [...this.setMealList, ...res.data.rows]
				})
			},
			getEvaluate() {
				let data = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					shopId: this.id
				}
				orderEvaluate(data).then(res => {
					// console.log('评论',res.data.rows);
					this.pingjia = [...this.pingjia, ...res.data.rows]
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
		width: 96vw;
	}

	.buttomBtn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.preCarWash {
			width: 330rpx;
			height: 90rpx;
			background: linear-gradient(180deg, #F98324 0%, #FF5325 100%);
			border-radius: 45rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 90rpx;
		}

		.preMaintain {
			width: 330rpx;
			height: 90rpx;
			background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
			border-radius: 45rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 90rpx;
		}

	}

	.evaluateBody {
		padding: 20rpx 39rpx 20rpx 29rpx;

		.evaluateHead {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.titleBody {
				display: flex;

				.titleImg {
					image {
						width: 70rpx;
						height: 70rpx;
						border: 1px solid #EEEEEE;
						background: linear-gradient(135deg, #D10498 0%, #D21728 100%);
						border-radius: 50%;
					}
				}

				.classTitle {
					margin-left: 24rpx;

					.title {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 31rpx;
					}

					.star {
						display: flex;
						margin-top: 12rpx;

						image {
							width: 22rpx;
							height: 22rpx;
						}
					}
				}
			}

			.time {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 31rpx;
			}
		}

		.evaluateButtom {
			display: flex;

			.evaluateContent {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
			}

			image {
				width: 130rpx;
				height: 130rpx;
				background: #C97E7E;
				border-radius: 10rpx;
				margin-left: 33rpx;
			}

			.phoneNum {
				width: 66rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.3);
				border: 1px solid rgba(255, 255, 255, 0.3);
				border-radius: 16rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				position: absolute;
				right: 8rpx;
				top: 89rpx;
				z-index: 2;
			}
		}

	}

	.body {
		position: relative;
		top: -66rpx;
	}

	.shopFunction {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx;

		.shopHeader {
			display: flex;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
				padding: 32rpx;

				.border {
					display: none;
				}
			}

			.action {
				padding: 32rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;

				.border {
					width: 126rpx;
					height: 8rpx;
					background: linear-gradient(-90deg, #005BFF 0%, #00A8FF 100%);
					box-shadow: 0px 3rpx 10rpx 0px rgba(0, 94, 255, 0.24);
				}
			}
		}
	}

	.introduce {
		width: 710rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx;

		.businessHours {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			padding: 34rpx 0 0 32rpx;
		}

		.content {
			display: flex;
			padding: 24rpx 32rpx 0 32rpx;
			justify-content: space-between;

			.locations {
				margin-top: 20rpx;

				.location {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
				}

				.km {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #777777;
					line-height: 40rpx;
				}
			}

			.btn {
				display: flex;

				.navigation {
					text-align: center;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					.unit {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 20rpx;
					}
				}

				.phone {
					text-align: center;
					padding-left: 45rpx;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					.unit {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 20rpx;
					}
				}
			}
		}
	}

	.buttom {
		display: flex;
		align-items: center;
		margin-top: 22rpx;

		.manage {
			width: 70rpx;
			height: 32rpx;
			background: #FF7200;
			border-radius: 16rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.stars {
			display: flex;
			align-items: center;

			.unit {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 32rpx;
			}

			.star {
				image {
					width: 22rpx;
					height: 22rpx;
				}
			}
		}

		.num {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 40rpx;
			padding-left: 25rpx;
		}
	}

	.header {
		width: 100%;
		height: 605rpx;
		position: relative;

		.navigationBar {
			display: flex;
			align-items: center;
			max-width: 200rpx;
			padding-left: 29rpx;

			.back {
				width: 62rpx;
				height: 62rpx;
			}
		}

		.search {
			width: 690rpx;
			height: 64rpx;
			background: rgba(10, 10, 10, 0.3);
			border: 1px solid rgba(255, 255, 255, 0.3);
			border-radius: 31rpx;
			display: flex;
			margin: 30rpx;

			.icon-search {
				padding-left: 35rpx;
				display: flex;
				align-items: center;

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}

			.input {
				padding-left: 14rpx;
				height: 64rpx;
			}
		}

		.video {
			width: 110rpx;
			height: 50rpx;
			background: rgba(0, 0, 0, 0.3);
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 25rpx;
			position: absolute;
			bottom: 72rpx;
			right: 158rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.image {
			width: 110rpx;
			height: 50rpx;
			background: rgba(0, 0, 0, 0.3);
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 25rpx;
			position: absolute;
			bottom: 72rpx;
			right: 30rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.hdbefore {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		background-size: 100% 100%;
		-webkit-filter: blur(5rpx);
		filter: blur(5rpx) brightness(100%);
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	.header-view {
		width: 710rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx;
		position: relative;

		.headPortrait {
			position: absolute;
			bottom: 158rpx;
			left: 40rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				background: #FF542E;
				border: 1px solid #FFFFFF;
				border-radius: 60rpx;
			}
		}

		.middle {
			display: flex;
			align-items: baseline;
			justify-content: space-around;
			padding-top: 64rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
			}

			.collect {
				width: 144rpx;
				height: 58rpx;
				background: #E6E6E6;
				border-radius: 29rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 54rpx;
				text-align: center;
			}

			.uncollect {
				width: 144rpx;
				height: 58rpx;
				background: #005BFF;
				border-radius: 29rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 54rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 32rpx;
					height: 27rpx;
					padding-right: 12rpx;
				}
			}
		}
	}

	.co {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 64rpx;
		color: #C4C4C4;
	}

	.webView {
		width: 710rpx;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		background-color: #FFFFFF;
		margin: auto;
		position: relative;
	}
</style>