wx-yunyubang-miniprogram/packages/packageCarecenter/pages/careCenter/serviceDetail.vue

<template>
	<view>
		<view class="u-skeleton">
			<view class="service-show u-skeleton-rect">

				<swiper class="service-show-swiper" :indicator-dots="true" v-if="showFlag === 0">
					<swiper-item v-for="(img,index) in detail.confinement_picture_video" :key="index">
						<video :src="img.picture" style="width: 100%;height: 100%;" play-btn-position="center"></video>
					</swiper-item>
				</swiper>


				<swiper class="service-show-swiper" :indicator-dots="true" v-if="showFlag === 1">
					<swiper-item v-for="(img,index) in detail.confinement_picture" :key="index">
						<u-image height="100%" width="100%" :src="img.picture" mode="aspectFit"
							@load="$u.debounce(init,100)">
						</u-image>
					</swiper-item>
				</swiper>

				<view class="service-show-btn">
					<view class="service-show-btn-img" @click="showFlag = 1">
						<image src="../../static/pic.png">
						</image>
						<view class="service-show-btn-img__num">{{detail.confinement_picture.length}}</view>
					</view>
					<view class="service-show-btn-video" v-if="detail.confinement_picture_video.length>0"
						@click="showFlag = 0">
						<image src="../../static/video.png">
						</image>
						<view class="service-show-btn-img__num">{{detail.confinement_picture_video.length}}</view>
					</view>
				</view>
			</view>

			<view class="service-baseinfo">
				<view class="service-baseinfo-top">
					<view class="service-baseinfo-top-left u-skeleton-circle">
						<u-image :src="detail.cover_picture" height="122rpx" width="122rpx" shape="circle"
							@load="$u.debounce(init,100)">
						</u-image>
					</view>
					<view class="service-baseinfo-top-right">
						<view class="service-baseinfo-top-right__name u-skeleton-fillet">{{detail.name}}</view>
						<view class="service-baseinfo-top-right__sub u-skeleton-fillet" v-if="detail.subheading">
							{{detail.subheading}}
						</view>
					</view>
				</view>

				<view class="service-baseinfo-center">
					<view class="service-baseinfo-center-label">
						<view class="service-baseinfo-center-label__item"
							v-for="(item1,index) in featuredLabelSplit(detail.featured_label)" :key="index">
							{{item1}}
						</view>
					</view>

					<view class="service-baseinfo-center-address" @click="toMap">
						<view class="service-baseinfo-center-address__img">
							<u-image src="/packages/packageCarecenter/static/position.png" height="26rpx" width="21rpx">
							</u-image>
						</view>
						<view class="service-baseinfo-center-address__text u-skeleton-rect">
							{{detail.address || '无'}}
						</view>
						<view class="service-baseinfo-center-address__icon">
							<u-icon name="arrow-right" size="26" color="#9C9C9C"></u-icon>
						</view>
					</view>

					<view class="service-baseinfo-center-time">
						<view class="service-baseinfo-center-time__img">
							<u-image src="/packages/packageCarecenter/static/clock.png" height="23rpx" width="23rpx">
							</u-image>
						</view>
						<view class="service-baseinfo-center-time__text u-skeleton-rect">
							{{detail.work_time || '无'}}
						</view>
					</view>

					<view class="service-baseinfo-center-service u-skeleton-fillet" @click="showqr"
						style="position: relative;">
						<view class="service-baseinfo-center-service__pic">
							<u-image src="/packages/packageCarecenter/static/wechat.png" height="43rpx" width="50rpx">
							</u-image>
						</view>
						<view class="service-baseinfo-center-service__text">
							1V1咨询帮忙砍价
						</view>
						<view class="service-baseinfo-center-service__icon">
							<u-icon name="arrow-right" size="26" color="#fff" label="联系优孕月子福利官" label-pos="left"
								label-color="#fff"></u-icon>
						</view>
					</view>

					<view class="service-baseinfo-center-store u-skeleton-fillet">

						<video :src="detail.video_file" v-if="detail.video_file" style="width: 100%;"
							play-btn-position="center"></video>
						<u-image :src="detail.cover_picture" v-else mode="aspectFill" height="397" width="100%"
							border-radius="30" @load="$u.debounce(init,100)">
						</u-image>

						<view class="service-baseinfo-center-store-tag">
							<image src="/packages/packageCarecenter/static/huangguan.png"></image>
							<view class="service-baseinfo-center-store-tag-text">
								孕育邦探店
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-show="!barFixed">
				<view class="service-bar">
					<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
						:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
						{{item.label}}
						<u-image :lazy-load="false" class="service-bar-item-icon"
							src="/packages/packageCarecenter/static/img_qiehuan.png" width="68" height="24"
							v-show="index === barIndex"></u-image>
					</view>
				</view>
			</view>
			<view v-show="barFixed">
				<view class="service-bar service-bar-fixed">
					<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
						:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
						{{item.label}}
						<u-image :lazy-load="false" class="service-bar-item-icon"
							src="/packages/packageCarecenter/static/img_qiehuan.png" width="68" height="24"
							v-show="index === barIndex"></u-image>
					</view>
				</view>
			</view>

			<view class="service-product">
				<view class="service-product-title">
					<text>本店商品</text>
					<view class="service-product-title-more">
						<text>更多</text>
						<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
					</view>
				</view>

				<view class="service-product-detail">
					<view v-for="(item,index) in detail.confinement_product" :key="index"
						class="service-product-detail-item" @click="toProduct(item.id)">
						<u-image :src="item.cover_picture" width="330" height="360" border-radius="20rpx 20rpx 0 0 "
							@load="$u.debounce(init,500)">
						</u-image>

						<view class="service-product-detail-item-name">
							{{item.name}}
						</view>

						<view class="service-product-detail-item-label">
							<view class="service-product-detail-item-label-item"
								v-for="(label,index1) in featuredLabelSplit(item.featured_label)" :key="index1">
								{{label}}
							</view>
						</view>

						<view class="service-product-detail-item-price">
							<span>￥</span>
							<span>{{item.price}}</span>
						</view>
					</view>
				</view>
			</view>

			<!-- 			<view class="service-activity">
				<view class="service-activity-title">
					<text>本店活动</text>
					<view class="service-activity-title-more">
						<text>更多</text>
						<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
					</view>
				</view>
				<view style="display: flex;justify-content: center;">
					<u-image src="/packages/packageCarecenter/static/banner.png" width="660" height="300"
						border-radius="30"></u-image>
				</view>
			</view> -->
			<view class="service-info">
				<view v-if="detail.online_customer" class="onlineService">
					<view style="font-size: 36rpx;padding: 20rpx 0;">长按识别二维码</view>


					<u-image width="100%" height="1300rpx" :src="detail.online_customer.wechat_code"
						v-if="detail.online_customer.wechat_code"></u-image>
				</view>
			</view>


			<u-popup v-model="showQR" mode="center" width="90%">
				<view style="padding: 10px;">
					<u-image width="100%" height="600rpx" :src="detail.online_customer.company_wechat_code"
						v-if="detail.online_customer.company_wechat_code"></u-image>
				</view>
			</u-popup>

			<view class="service-info">
				<view class="service-info-title">
					<text>商户简介</text>
					<view class="service-info-title-more">
						<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
					</view>
				</view>

				<view class="service-info-content">
					<view v-for="(item,index) in detail.confinement_services_merchant_item" :key="index"
						class="service-info-content-item">
						<view class="service-info-content-item-name">{{item.name}}</view>
						<view class="service-info-content-item-content">{{item.content}}</view>
					</view>
				</view>
			</view>

			<view class="service-imageinfo">
				<u-parse :html="detail.content"></u-parse>
			</view>

			<view class="bottom-btn">
				<u-button :custom-style="btnStyle" style="width: 90%;" @click="showqr" shape="circle">联系优孕月子福利官</u-button>
			</view>
			
			
			<view class="footer">
				<view class="menuLink">
					<navigator url="../../../../pages/home/home" open-type="switchTab">
						<view class="menuCol">
							<text class="iconfont icon-home"></text>
							<text>首页</text>
						</view>
					</navigator>
					<view class="menuCol" @click="shareOpen">
						<text class="iconfont icon-Share"></text>
						<text>分享</text>
					</view>
				</view>
				<view class="buyBtn"  @click="showqr" >联系优孕月子福利官</view>
			</view>
		</view>

		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		
		<uni-popup ref="shareCode" :mask-click="true" type="bottom" class="shareBox">
			<view class="codeOuter">
				<view class="shareCon" @click="shareClose">
					<canvas style="width:80%;margin-left:10%;position: absolute;"
						:style="{ height:(shareHeight*scare) + 'px', marginTop:(cropperH-(shareHeight*scare))/2+'rpx'}"
						canvas-id="firstCanvas" id="firstCanvas"></canvas>
					<!-- <image class="shareBg" mode="widthFix" src="../../static/bg_haibao@2x.png"></image> -->
					<!-- <image class="code" src="../../static/300_qr.png"></image> -->
				</view>
				<view class="shareBott" :style="{display: shareBtnDisplay}">
					<button class="shareCol" @click="shareClose" open-type="share"
						style="border-radius:0;flex:1;">发给朋友</button>
					<button class="shareCol" @click="save" style="border-radius:0;flex:1;">保存相册</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	let sysInfo = uni.getSystemInfoSync();
	let SCREEN_WIDTH = sysInfo.screenWidth
	let SCREEN_HEIGHT = sysInfo.screenHeight;
	let WindowHeight = sysInfo.windowHeight;
	let windowWidth = sysInfo.windowWidth;
	import {
		weixin
	} from '@/utils/weixin.js'
	export default {
		data() {
			return {
				promotion_id:"",
				// 分享的参数
				cropperW: SCREEN_WIDTH,
				cropperH: SCREEN_HEIGHT,
				packages: [],
				sharePath: "",
				scare: 1,
				shareHeight: 500,
				imgAvatar: "",
				poster: "",
				//分享的参数
				loading: true,
				showQR: false,
				showFlag: 1,
				barIndex: 0,
				barTop: 667,
				barFixed: false,
				bar: [{
						label: '本店商品',
						height: 0,
						class: '.service-product'
					},
					// {
					// 	label: '本店活动',
					// 	height: 0,
					// 	class: '.service-activity'
					// }, 
					{
						label: '商户简介',
						height: 0,
						class: '.service-info'
					}, {
						label: '图文详情',
						height: 0,
						class: '.service-imageinfo'
					}
				],
				barHeight: 0,
				detail: {},
				btnStyle: {


					color: '#fff',
					background: '#FF578A',
					width: "100%"
				},
				user_info: {}
			}
		},
		onShareAppMessage() {
			return {
				title: this.detail.name,
				path: "packages/packageCarecenter/pages/careCenter/serviceDetail?id=" + this.detail.id + "&promotion_id=" +
					this.user_info.id,
				imageUrl: this.detail.cover_picture
			}
		},
		methods: {
			init() {
				let barHeight;
				const query = uni.createSelectorQuery().in(this);
				query.select(".service-bar").boundingClientRect(res => {
					this.barTop = res.top
					barHeight = res.height
				}).exec();
				for (let i = 0; i < this.bar.length; i++) {
					query.select(this.bar[i].class).boundingClientRect(res => {
						this.bar[i].height = res.top - (barHeight - 20)
					}).exec();
				}
			},
			showqr(){
				this.showQR = true
			},
			toMap() {
				this.$u.throttle(() => {
					uni.openLocation({
						latitude: Number(this.detail.latitude),
						longitude: Number(this.detail.longitude),
						name: this.detail.name
					})
				})
			},
			toProduct(id) {
				this.$u.throttle(() => {
					uni.navigateTo({
						url: `/packages/packageCarecenter/pages/careCenter/productDetail?id=${id}`
					})
				})
			},
			barClick(item, index) {
				this.barIndex = index

				uni.pageScrollTo({
					scrollTop: item.height
				})
			},

			featuredLabelSplit(res) {
				if (res) {
					return res.split(",")
				}
				return []
			},

			getServiceDetail(id) {
				weixin.request({
					newUrl: true,
					api: '/api/member/get-confinement-service-item',
					data: {
						id
					},
					utilSuccess: (res) => {
						let confinement_picture_video = [];
						let confinement_picture = [];
						res.confinement_picture.map(item => {
							if (item.picture.indexOf("mp4") > -1) {
								confinement_picture_video.push(item)
							} else {
								confinement_picture.push(item)
							}
						})

						this.detail = res;
						this.detail.confinement_picture_video = confinement_picture_video;
						this.detail.confinement_picture = confinement_picture;
						this.loading = false;

					}
				})
			},
			getPoster: function() {
				var that = this;
				uni.getImageInfo({
					src: that.detail.cover_picture, // 头像
					success: res => {
						that.poster = res.path;
						that.getAvatar();
					}
				});
			},
			getAvatar: function() {
				let userProfile = uni.getStorageSync('user_profile');
			
				if (!weixin.isNull(userProfile)) {
					console.log(userProfile.avatarUrl)
					console.log(this.imgAvatar)
					uni.getImageInfo({
						src: userProfile.avatarUrl, // 头像
						success: rlogo => {
							this.imgAvatar = rlogo.path;
							console.log(this.imgAvatar)
							this.draw();
						}
					});
				} else {
					this.imgAvatar = "../../static/avatar.jpg";
					console.log(this.imgAvatar)
					this.draw();
				}
			},
			shareOpen() {
				uni.showLoading({
					title: '加载中'
				});
				var that = this;
				this.$refs.shareCode.open();
				this.getPoster();
			},
			draw: function() {
				var that = this;
				uni.request({
					url: this.baseUrl + '/api/member/get-wxa-qrcode',
					method: 'GET',
					data: {
						path: 'packages/packageCarecenter/pages/careCenter/serviceDetail',
						scene: 'id=' + this.detail.id + '&promotion_id=' + this.user_info.id
					},
					success: r => {
						if (r.data.status === 1) {
							uni.getImageInfo({
								src: this.baseUrl + r.data.data, // 二维码
								success: res => {
									var ctx = uni.createCanvasContext('firstCanvas')
			
			
									var w = SCREEN_WIDTH * 0.8;
									var h = this.shareHeight * this.scare;
									// ctx.fillStyle = '#fff';
									// ctx.fillRect(0, 0, 214, 342);
									console.log(1)
									ctx.drawImage('../../static/bg_haibao@2x.jpg', 0, 0,
										w, h
									); //(SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) /2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5);
			
									ctx.drawImage('../../static/bg_haibao1.png', 20, 30 + 40,
										w -
										40, h - 100);
									/* SCREEN_WIDTH *
									0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
									2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5); */
			
									ctx.drawImage(this.poster, 20, 30 + 40,
										w -
										40, (h - 60 - 60) * 0.5);
									/* SCREEN_WIDTH * 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH *
										0.6 * 1.65) /
									2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.695 / 1.6); */
			
									ctx.font = "22rpx bold";
									// 设置颜色
									ctx.fillStyle = "#fff";
									// 绘制文字（参数：要写的字，x坐标，y坐标）
									ctx.fillText("优孕课堂福利专享", 20, 50);
			
									ctx.font = "16rpx bold";
									// 设置颜色
									ctx.fillStyle = "#000";
									// 绘制文字（参数：要写的字，x坐标，y坐标）
									ctx.fillText("专享福利", 40, (h + 50) * 0.5 + 20);
			
									ctx.font = "14rpx bold";
									// 设置颜色
									ctx.fillStyle = "#3377b7";
									// 绘制文字（参数：要写的字，x坐标，y坐标）
			
									let detail = this.detail
									ctx.fillText(detail.name, 40, (h + 50) * 0.5 + 20 + 30);
			
			
									let user_info = uni.getStorageSync("user_info_yunyubang");
			
									let userProfile = uni.getStorageSync('user_profile');
									var img = this.imgAvatar;
									uni.getImageInfo({
										src: userProfile.avatarUrl, // 头像
										success: rlogo => {
											img = rlogo.path;
			
										}
									});
									that.circleImg(ctx,
										img,
										40, h - 60 - w * 0.15,
										w * 0.15 / 2);
			
									ctx.font = "12rpx normal";
									// 设置颜色
									ctx.fillStyle = "#000";
									// 绘制文字（参数：要写的字，x坐标，y坐标）
									if (!weixin.isNull(user_info.name))
										ctx.fillText(user_info.name,
											40, h - 40);
									else
										ctx.fillText("",
											40, h - 40);
			
			
									this.circleImg(ctx, res.path, w - 40 - w * 0.2, h - 40 -
										w *
										0.2, w * 0.2 / 2);
			
									console.log(2)
									ctx.draw(),
										// r: 半径
										setTimeout(() => {
											uni.canvasToTempFilePath({
												canvasId: 'firstCanvas',
												fileType: 'jpg',
												success: (res) => {
			
													console.log(3)
													this.shareBtnDisplay =
														'flex'
													uni.hideLoading();
													this.img = this.detail.cover_picture;
													this.sharePath = res
														.tempFilePath;
												},
											})
										}, 100)
								}
							})
						} else {
							uni.hideLoading()
							this.$refs.shareCode.close()
							this.alert(r.data.msg)
						}
					}
				})
			
			},
			circleImg: function(ctx, img, x, y, r) {
				ctx.save()
				var d = 2 * r;
				var cx = x + r;
				var cy = y + r;
				ctx.arc(cx, cy, r, 0, 2 * Math.PI);
			
				ctx.clip();
				ctx.drawImage(img, x, y, d, d);
				ctx.restore();
			},
			shareClose() {
				this.$refs.shareCode.close()
			},
			open() {
				this.$refs.popup.open('top')
			
			},
			close() {
				this.$refs.popup.close()
			},
			//保存图片时，h5端不能直接保存，只能通过预览长按保存
			save() {
			
				let _this = this;
				// #ifdef H5
				uni.previewImage({
					urls: [_this.sharePath]
				})
				// #endif
				// #ifdef APP-PLUS||MP-WEIXIN
				uni.saveImageToPhotosAlbum({
					filePath: _this.sharePath,
					success: function() {
						_this.$refs.shareCode.close()
						_this.alert('保存成功')
					}
				});
				// #endif
			},
			
		},
		computed: {

		},
		mounted() {
			this.$nextTick(() => {
				this.init()
			})
		},
		onShow() {

			var that = this;
			weixin.getOpenidInfo(info => {
				that.user_info = info.user_info;

			}, true);
		},
		onLoad(options) {
			let id = options.id;
			const scene = decodeURIComponent(options.scene);
			console.log(scene)
			if (!weixin.isNull(scene)) {
				id = weixin.getParam(scene, "id");
				this.promotion_id = weixin.getParam(scene, "promotion_id");
			}
			this.getServiceDetail(id)
		},
		onPageScroll(e) {
			this.$u.throttle(() => {
				if (e.scrollTop > this.barTop) {
					this.barFixed = true
				} else {
					this.barFixed = false
				}
			}, 50)
		}
	}
</script>

<style scoped lang="scss">
	
	
	.shareBox {
		background: rgba(0, 0, 0, 0.5);
	}
	
	.codeOuter {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		// padding-top: 13vh;
		box-sizing: border-box;
		position: relative;
	}
	
	.shareCon {
		// width: 500rpx;
		// margin: 0 auto;
		//position: absolute;
		//top: 45%;
		//left: 50%;
		// transform: translate(-50%, -50%);
	
		.code {
			width: 300rpx;
			height: 300rpx;
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -150rpx;
			top: 50%;
			margin-top: -150rpx;
		}
	}
	
	.shareBott {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: flex-start;
	
		.shareCol {
			width: 50%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			background: #FF578A;
			color: #fff;
		}
	
		.shareCol:first-child {
			background: #e8e8e8;
			color: #666;
		}
	}
	.userBoxBottom {
		.userBoxBottomCol {
			font-size: 28rpx;
		}
	
		.btnuserBoxBottomCol {
			background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
			border-radius: 36rpx;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			line-height: 72rpx;
			color: #fff;
		}
	}
	.footer {
		width: 100%;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 0px -1rpx 0px 0px #DEDEDE;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
	
		.menuLink {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #333;
	
			.menuCol {
				margin: 0 30rpx;
				font-size: 20rpx;
	
				text {
					display: block;
				}
	
				.iconfont {
					font-size: 36rpx;
					margin-bottom: 6rpx;
				}
			}
		}
	
		.buyBtn {
			//width: 220rpx;
			padding: 0px 40rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
			border-radius: 36rpx;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			line-height: 72rpx;
			color: #fff;
		}
	
	}
	
	
	.onlineService {
		display: flex;
		flex-direction: column;
		padding: 0 28rpx 10rpx 28rpx;

		&>image {
			width: 100%;
			height: 1300rpx;
		}
	}

	.service-show {
		width: 100%;
		height: 360rpx;

		position: relative;

		&>video {
			width: 100%;
			height: 100%;
		}

		&-swiper {
			width: 100%;
			height: 100%;
		}

		&-btn {
			display: flex;

			z-index: 3;
			position: absolute;
			bottom: 30rpx;
			right: 33rpx;

			&-img {
				color: #fff;
				height: 47rpx;
				background: #252526;
				border-radius: 16rpx;
				opacity: 0.3;
				display: flex;
				align-items: center;

				margin-right: 14rpx;

				&>image {
					width: 24rpx;
					height: 21rpx;

					padding-left: 20rpx;
					padding-right: 10rpx;
				}

				&__num {
					font-size: 24rpx;
					color: #FFFFF0;
					font-weight: 400;

					padding-right: 20rpx;
				}
			}

			&-video {
				color: #fff;
				height: 47rpx;
				background: #252526;
				border-radius: 16rpx;
				opacity: 0.3;
				display: flex;
				align-items: center;

				&>image {
					width: 24rpx;
					height: 21rpx;

					padding-left: 20rpx;
					padding-right: 10rpx;
				}

				&__num {
					font-size: 24rpx;
					color: #FFFFF0;
					font-weight: 400;

					padding-right: 20rpx;
				}
			}
		}
	}

	.service-baseinfo {
		width: 100%;
		background: linear-gradient(90deg, #555455 0%, #1F1D1D 100%);

		padding-bottom: 38rpx;

		&-top {
			display: flex;

			padding-top: 38rpx;

			&-left {
				width: 122rpx;
				height: 122rpx;
				border-radius: 100%;

				margin-left: 31rpx;
			}

			&-right {

				margin-left: 21rpx;

				&__name {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					padding-top: 17rpx;
				}

				&__sub {
					display: inline-block;
					background: #FF578A;
					border-radius: 12rpx;
					color: #fff;

					padding: 6rpx 11rpx;
					margin-top: 9rpx;
				}
			}
		}

		&-center {

			margin-top: 28rpx;

			&-label {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				align-content: center;

				margin-left: 22rpx;

				&__item {
					color: #fff;
					counter-reset: #fff;
					border-radius: 12rpx;
					border: 2rpx solid #FF578A;

					padding: 10rpx 20rpx;
					margin-left: 10rpx;
				}
			}

			&-address {
				display: flex;
				align-items: center;

				margin-top: 34rpx;
				padding: 0 36rpx;

				&__img {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 26rpx;
					height: 26rpx;
				}

				&__text {
					flex: 1;
					color: #fff;

					margin: 0 16rpx;
				}
			}


			&-time {
				display: flex;
				align-items: center;

				margin-top: 15rpx;
				padding: 0 36rpx;

				&__img {
					width: 26rpx;
					height: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&__text {
					flex: 1;
					color: #fff;

					margin: 0 16rpx;
				}
			}

			&-service {
				background: #FF578A;
				border-radius: 23rpx;
				display: flex;

				padding: 26rpx 15rpx 26rpx 30rpx;
				margin: 24rpx 33rpx 0 33rpx;

				&__text {
					font-weight: 400;
					color: #FFFFFF;
					flex: 1;

					margin-left: 10rpx;
				}

				&__icon {}
			}

			&-store {

				position: relative;
				margin-top: 30rpx;
				padding: 0 33rpx;

				&-tag {
					display: flex;
					align-items: center;
					background: linear-gradient(90deg, #FFFFFF 0%, #FFF0F0 100%);
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;

					padding: 9rpx 18rpx;
					position: absolute;
					top: 0;
					left: 76rpx;

					&>image {
						width: 25rpx;
						height: 25rpx;
					}

					&-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #FF578A;

						padding-left: 11rpx;
					}
				}
			}
		}
	}

	.service-bar {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background: #fff;

		margin-top: -20rpx;

		&-fixed {
			border-bottom: 1rpx solid rgba(180, 180, 180, 0.4);

			z-index: 4;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		}

		&-item {
			font-size: 30rpx;
			font-weight: 400;
			color: #999999;

			padding: 40rpx 0 23rpx 0;
			position: relative;

			&-active {

				color: #333333;
			}

			&-icon {

				transform: translateX(-50%);
				position: absolute;
				top: 72rpx;
				left: 50%;
			}
		}
	}

	.btnKefu {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #ffffff00;
	}

	.service-product {

		&-title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			padding-top: 37rpx;

			&>text {
				color: #333333;
				font-size: 34rpx;

				padding-left: 32rpx;
			}

			&-more {

				font-size: 24rpx;
				color: #333333;

				padding-right: 47rpx;
			}
		}

		&-detail {
			flex-shrink: 0;
			flex-basis: 330rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			margin-top: 36rpx;
			padding: 0 32rpx;

			&-item {
				border-radius: 20rpx;
				background: #FFFFFF;

				padding-bottom: 21rpx;
				margin-bottom:20rpx;
				width:330rpx;

				&-name {
					color: #333333;
					font-weight: 400;
					font-size: 24rpx;

					padding: 0 24rpx;
					padding-top: 21rpx;

				}

				&-label {
					display: flex;
					flex-wrap: wrap;

					padding: 0 24rpx;
					margin-top: 13rpx;
					
					&-item {
						background: rgba(255, 87, 138, 0.1);
						border-radius: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FF578A;

						margin-right: 10rpx;
						padding: 6rpx 15rpx;
						margin-bottom:5rpx;
					}
				}

				&-price {
					font-weight: 400;
					color: #FF578A;
					font-size: 24rpx;

					padding: 0 24rpx;
					padding-top: 13rpx;
				}
			}
		}
	}

	.service-activity {
		background: #fff;

		margin-top: 34rpx;
		padding-bottom: 83rpx;

		&-title {
			@extend .service-product-title;
			padding-bottom: 33rpx;

			&-more {
				@extend .service-product-title-more;
			}
		}
	}

	.service-info {
		background-color: #fff;

		margin-top: 30rpx;

		&-title {
			@extend .service-product-title;
			padding-bottom: 29rpx;

			&-more {
				@extend .service-product-title-more;
			}
		}

		&-content {

			padding: 0 34rpx 20rpx 40rpx;

			&-item {
				display: flex;

				margin-bottom: 20rpx;

				&-name {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					flex-basis: 120rpx;
				}

				&-content {
					flex: 1;
					font-weight: 400;
					color: #333333;
					font-size: 24rpx;

					margin-left: 18rpx;
				}
			}
		}
	}

	.service-imageinfo {
		width: 100%;
		background: #fff;

		padding: 0 28rpx 10rpx 28rpx;
	}

	.bottom-btn {
		height: 100rpx;
		background: #fff;
		border-top: 1rpx solid rgba(180, 180, 180, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	::v-deep .u-image__image {
		display: block !important;
	}
</style>