diff --git a/.DS_Store b/.DS_Store
index 1ea2692..3d5ec3d 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/config.js b/config.js
index 26c4b36..c818a9c 100644
--- a/config.js
+++ b/config.js
@@ -1,11 +1,11 @@
 export const appConfig = {
-	appId: 'wx9b4762770771d98a', //孕育帮
+	appId: 'wx9b4762770771d98a', //孕育邦
 	//appId:"wx3dc65ce9b588727a",//孕育咨询
 	//baseUrl: 'http://yunyubang.localhost.com',
-	baseUrl: 'https://yunyubang2021.langye.net', //孕育帮
+	baseUrl: 'https://yunyubang2021.langye.net', //孕育邦
 	//baseUrl: 'http://yybtest.ali251.langye.net',
 	newBaseUrl: 'https://yunyubang.ali251.langye.net',
 	//newBaseUrl: 'http://yybtest.ali251.langye.net',
 	//baseUrl:'https://yybtest2021.langye.net',//孕育咨询
 	openidInfoKey: 'openid_info_yunyubang'
-}
+}
diff --git a/packages/packageCarecenter/pages/careCenter/careCenter.vue b/packages/packageCarecenter/pages/careCenter/careCenter.vue
index db292e6..67cc847 100644
--- a/packages/packageCarecenter/pages/careCenter/careCenter.vue
+++ b/packages/packageCarecenter/pages/careCenter/careCenter.vue
@@ -1,653 +1,735 @@
-<template>
-	<view class="content">
-		<!-- <image class="careBanner" src="../../static/banner.png"></image> -->
-		<view class="strategyBox">
-			<view class="strate">
-				<view class="strTit flex_between">
-					<view class="strL flex_start">
-						<image src="../../static/icon_gonglve.png"></image><text>月子攻略</text>
-					</view>
-					<view class="more" @click="toStrategyCenter">更多</view>
-				</view>
-				<view class="strCol flex_start" v-for="(item,index) in strategies" :key="item.id"
-					@click="toStrategyDetail(item.id)">
-					<view class="strPic">
-						<image mode="aspectFill" :src="item.cover_picture || '../../static/banner.png'"></image>
-					</view>
-					<view class="strInfo">
-						<view class="h3">{{item.title}}</view>
-						<view class="p" v-if="item.subheading">
-							{{item.subheading}}
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="careBox">
-			<view class="careTabs flex_start">
-				<view class="tabCol" :class="{'cur':tabIndex === 1}" @click="tabIndex = 1,status = 'loadmore'">
-					<text>严选商家</text>
-					<view class="line">
-						<image src="../../static/img_qiehuan.png"></image>
-					</view>
-				</view>
-				<view class="tabCol" :class="{'cur':tabIndex === 2}" @click="tabIndex = 2,status = 'loadmore'">
-					<text>严选商品</text>
-					<view class="line">
-						<image src="../../static/img_qiehuan.png"></image>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="proBox" v-if="tabIndex === 1">
-			<!-- <view class="termBox">
-				<view class="termOuter">
-					<view class="termCol cur">综合排序<text class="iconfont icon-arrowbottom"></text></view>
-					<view class="termCol">全部地区<text class="iconfont icon-arrowbottom"></text></view>
-					<view class="termCol">筛选<text class="iconfont icon-filter"></text></view>
-				</view>
-			</view>
-			<view class="tagGroup flex_start">
-				<text>月子餐试吃</text>
-				<text>已探店</text>
-			</view> -->
-			<view class="introBox">
-				<view v-for="(item,index) in serviceList" :key="item.id" class="intro_column"
-					@tap="gotoDetail(item.id)">
-					<view class="imgOuter">
-						<image mode="aspectFill" :src="item.cover_picture"></image>
-						<view v-if="item.recommend == 1" class="i_intro">推荐</view>
-					</view>
-					<view class="columnInfo">
-						<view class="title">{{nameComputed(item.name)}}</view>
-						<view class="tags">
-							<text v-for="(tag,index1) in featureLabelSplit(item.featured_label)"
-								:key="index1">{{tag}}</text>
-							<!-- <text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text> -->
-						</view>
-						<view class="subInfo flex_between">
-							<text>{{addressComputed(item.address)}}</text><text
-								v-if="item.distance">{{distanceComputed(item.distance)}}</text>
-						</view>
-						<view class="price">
-							<text class="smallIcon" v-if="item.low_price">￥</text>
-							<text v-if="item.low_price">{{item.low_price}}&nbsp;&nbsp;-&nbsp;&nbsp;</text>
-							<text class="smallIcon" v-if="item.heigh_price">￥</text>
-							<text v-if="item.heigh_price">{{item.heigh_price}}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view v-else class="proBox">
-			<!-- 			<view class="termBox">
-				<view class="termOuter">
-					<view class="termCol cur">综合排序<text class="iconfont icon-arrowbottom"></text></view>
-					<view class="termCol">全部地区<text class="iconfont icon-arrowbottom"></text></view>
-					<view class="termCol">筛选<text class="iconfont icon-filter"></text></view>
-				</view>
-			</view>
-			<view class="tagGroup flex_start">
-				<text>月子餐试吃</text>
-				<text>已探店</text>
-			</view> -->
-			<view class="introBox">
-				<view v-for="(item,index) in productList" :key="item.id" class="intro_column"
-					@tap="gotoDetail(item.id)">
-					<view class="imgOuter">
-						<image mode="aspectFill" :src="item.cover_picture"></image>
-						<view v-if="item.recommend == 1" class="i_intro">推荐</view>
-					</view>
-					<view class="columnInfo">
-						<view class="title">{{nameComputed(item.name)}}</view>
-						<view class="tags">
-							<text v-for="(tag,index1) in featureLabelSplit(item.featured_label)"
-								:key="index1">{{tag}}</text>
-						</view>
-						<view class="subInfo flex_between"><text>{{addressComputed(item.service.name)}}</text></view>
-						<view class="price"><text class="smallIcon">￥</text><text>{{item.price}}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<u-loadmore :status="status" :load-text='loadText' @loadmore='loadmore' />
-	</view>
-</template>
-
-<script>
-	import {
-		weixin
-	} from '@/utils/weixin.js'
-	export default {
-		data() {
-			return {
-				tabIndex: 1, //1为严选商家，2为严选商品
-				serviceList: [],
-				serviceSelect: {
-					page_size: 10,
-					page: 1,
-					latitude: 0,
-					longitude: 0,
-				},
-				productList: [],
-				productSelect: {
-					page_size: 10,
-					page: 1
-				},
-				status: 'loadmore',
-				loadText: {
-					loadmore: '轻轻上拉或点击',
-					loading: '努力加载中',
-					nomore: '实在没有了'
-				},
-
-				strategies: [], //攻略
-			}
-		},
-		methods: {
-			toStrategyDetail(id) {
-				this.$u.throttle(() => {
-					uni.navigateTo({
-						url: `/packages/packageCarecenter/pages/careCenter/strategyDetail?id=${id}`
-					})
-				})
-			},
-			toStrategyCenter() {
-				this.$u.throttle(() => {
-					uni.navigateTo({
-						url: '/packages/packageCarecenter/pages/careCenter/strategyCenter'
-					})
-				})
-			},
-			init() {
-				this.tabSelect()
-				this.tabIndex = 2
-				this.tabSelect()
-				this.tabIndex = 1
-			},
-			featureLabelSplit(res) {
-				if (res) {
-					return res.split(',')
-				}
-				return []
-			},
-
-			tabSelect() {
-
-				if (this.tabIndex === 1) {
-					weixin.request({
-						newUrl: true,
-						api: '/api/member/get-confinement-service',
-						data: this.serviceSelect,
-						utilSuccess: (res) => {
-							if (res.rows.length > 0 && res.rows) {
-								this.serviceList.push(...res.rows)
-								this.status = 'loadmore'
-							} else {
-								this.status = 'nomore'
-								if (this.serviceSelect.page > 1) {
-									this.serviceSelect.page--
-								}
-							}
-
-						}
-					})
-				}
-				if (this.tabIndex === 2) {
-					weixin.request({
-						newUrl: true,
-						api: '/api/member/get-confinement-product',
-						data: this.productSelect,
-						utilSuccess: (res) => {
-							if (res.rows.length > 0 && res.rows) {
-								this.productList.push(...res.rows)
-								this.status = 'loadmore'
-							} else {
-								this.status = 'nomore'
-								if (this.productSelect.page > 1) {
-									this.productSelect.page--
-								}
-							}
-						}
-					})
-				}
-			},
-
-			loadmore() {
-				this.status = 'loading'
-				if (this.tabIndex === 1) {
-					this.serviceSelect.page++
-					this.tabSelect()
-				}
-				if (this.tabIndex === 2) {
-					this.productSelect.page++
-					this.tabSelect()
-				}
-			},
-
-			gotoDetail(id) {
-				this.$u.throttle(() => {
-					if (this.tabIndex === 1) {
-						uni.navigateTo({
-							url: `/packages/packageCarecenter/pages/careCenter/serviceDetail?id=${id}`
-						})
-					}
-					if (this.tabIndex === 2) {
-						uni.navigateTo({
-							url: `/packages/packageCarecenter/pages/careCenter/productDetail?id=${id}`
-						})
-					}
-				})
-			},
-
-			getStrategy() {
-				weixin.request({
-					newUrl: true,
-					api: '/api/member/get-strategy',
-					data: {
-						page: 1,
-						page_size: 5
-					},
-					utilSuccess: res => {
-						this.strategies = res.rows
-						console.log(this.strategies);
-					}
-				})
-			},
-		},
-		computed: {
-			nameComputed() {
-				return function(name) {
-					if (!name) {
-						return '未知'
-					}
-					if (name.length > 12) {
-						return name.slice(0, 11) + '...'
-					}
-					return name
-				}
-			},
-			addressComputed() {
-				return function(address) {
-					if (!address) {
-						return '无'
-					}
-					if (address && (address.length > 12)) {
-						return address.slice(0, 11) + '...'
-					}
-					return address
-				}
-			},
-			distanceComputed() {
-				return function(dis) {
-					if (dis) {
-						if (dis.indexOf('km') !== -1) {
-							return Number(dis.split('km')[0]).toFixed(1) + 'km'
-						}
-						if (dis.indexOf('m') !== -1) {
-							return Number(dis.split('m')[0]).toFixed(1) + 'm'
-						}
-					}
-				}
-			}
-		},
-		mounted() {
-			uni.getLocation().then(res => {
-				let {
-					latitude,
-					longitude
-				} = res[1]
-				this.serviceSelect.latitude = latitude
-				this.serviceSelect.longitude = longitude
-
-				this.init()
-			})
-
-			this.getStrategy()
-		},
-		onReachBottom() {
-
-			this.loadmore()
-		}
-	}
-</script>
-<style>
-	page {
-		background: #f5f5f5;
-	}
-</style>
-<style lang="scss" scoped>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.careBanner {
-		display: block;
-		width: 690rpx;
-		height: 220rpx;
-		margin: 20rpx auto;
-	}
-
-	.strategyBox {
-		width: 710rpx;
-		padding-bottom: 16rpx;
-		background-image: linear-gradient(180deg, #FFE4EC 0%, #FFFFFF 24%);
-		border: 4rpx solid #FFFFFF;
-		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.03);
-		border-radius: 16rpx;
-
-		.strTit {
-			padding: 30rpx 25rpx 15rpx 25rpx;
-
-			.strL {
-				font-size: 34rpx;
-				color: #333333;
-				letter-spacing: 1rpx;
-				font-weight: 500;
-
-				image {
-					display: block;
-					width: 30rpx;
-					height: 34rpx;
-					margin-right: 10rpx;
-				}
-			}
-
-			.more {
-				font-size: 28rpx;
-				color: #333333;
-				font-weight: 400;
-			}
-		}
-
-		.strCol {
-			padding: 16rpx 25rpx;
-
-			.strPic {
-				width: 140rpx;
-				height: 140rpx;
-				border-radius: 10rpx;
-
-				image {
-					display: block;
-					width: 140rpx;
-					height: 140rpx;
-					border-radius: 10rpx;
-				}
-			}
-
-			.strInfo {
-				flex: 1;
-				padding-left: 30rpx;
-
-				.h3 {
-					font-size: 30rpx;
-					color: #333333;
-					font-weight: 500;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					width: 460rpx;
-				}
-
-				.p {
-					margin-top: 10rpx;
-					font-size: 24rpx;
-					color: #999999;
-					font-weight: 400;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					width: 460rpx;
-				}
-			}
-		}
-	}
-
-	.careBox {
-		width: 750rpx;
-		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 70%, rgba(255, 255, 255, 0.00) 100%);
-		border-radius: 40rpx 40rpx 0 0;
-		margin-top: 20rpx;
-
-		.careTabs {
-			width: 100%;
-			height: 106rpx;
-
-			.tabCol {
-				width: 50%;
-				height: 106rpx;
-				line-height: 106rpx;
-				font-size: 36rpx;
-				color: #666666;
-				text-align: center;
-				font-weight: 400;
-				position: relative;
-
-				text {
-					position: relative;
-					z-index: 3;
-				}
-
-				.line {
-					display: none;
-					width: 94rpx;
-					height: 33rpx;
-					position: absolute;
-					left: 50%;
-					transform: translateX(-50%);
-					bottom: 20rpx;
-					z-index: 2;
-
-					image {
-						display: block;
-						width: 94rpx;
-						height: 33rpx;
-					}
-				}
-			}
-
-			.cur {
-				color: #333333;
-				font-weight: 600rpx;
-
-				.line {
-					display: block;
-				}
-			}
-		}
-	}
-
-	.termBox {
-		width: 100%;
-		background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0) 100%);
-		border-radius: 40rpx 40rpx 0px 0px;
-
-		.termOuter {
-			display: flex;
-			align-items: center;
-			align-content: center;
-			justify-content: flex-start;
-
-			.termCol {
-				width: 33.33%;
-				text-align: center;
-				font-size: 28rpx;
-				font-weight: 400;
-				color: #333333;
-				padding: 30rpx 0;
-
-				.iconfont {
-					font-size: 24rpx;
-					color: #666666;
-					line-height: 28rpx;
-					margin-left: 8rpx;
-				}
-
-			}
-
-			.termCol.cur {
-				color: #FF578A;
-
-				.iconfont {
-					color: #FF578A;
-				}
-			}
-
-		}
-	}
-
-	.proBox {
-		width: 710rpx;
-		background: #fff;
-		margin: 0 auto 30rpx auto;
-		border-radius: 12rpx;
-		box-sizing: border-box;
-
-		.tagGroup {
-			padding: 0 24rpx;
-
-			text {
-				display: inline-block;
-				height: 64rpx;
-				background: #F6F6F6;
-				border-radius: 32rpx;
-				padding: 0 30rpx;
-				font-size: 26rpx;
-				color: #666666;
-				text-align: center;
-				line-height: 64rpx;
-				font-weight: 400;
-				margin-right: 15rpx;
-			}
-		}
-	}
-
-	.introBox {
-		padding: 0 24rpx;
-	}
-
-	.intro_column:first-child {
-		border-top: none;
-	}
-
-	.intro_column {
-		display: flex;
-		justify-content: flex-start;
-		padding: 20rpx 0;
-		width: 100%;
-		border-top: 2rpx solid #EAEAEA;
-
-		.imgOuter {
-			width: 260rpx;
-			height: 210rpx;
-			position: relative;
-			border-radius: 10rpx;
-
-			image {
-				width: 260rpx;
-				height: 210rpx;
-				border-radius: 10rpx;
-			}
-
-			.i_intro {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 68rpx;
-				height: 32rpx;
-				background: #FF578A;
-				border-radius: 10rpx 0px 18rpx 0;
-				font-size: 22rpx;
-				font-weight: 400;
-				color: #FFFFFF;
-				line-height: 32rpx;
-				text-align: center;
-			}
-		}
-
-		.columnInfo {
-			flex: 1;
-			margin-left: 22rpx;
-			position: relative;
-
-			.title {
-				width: 100%;
-				font-size: 30rpx;
-				font-weight: 700;
-				color: #333;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-
-			.tags {
-				margin-top: 8rpx;
-			}
-
-			.tags text {
-				height: 28rpx;
-				background: rgba(255, 177, 62, 0.1);
-				border-radius: 4rpx;
-				line-height: 28rpx;
-				font-size: 20rpx;
-				padding: 0 10rpx;
-				margin-right: 10rpx;
-				color: #FF753E;
-			}
-
-			.grayBg {
-				background: #F6F6F6 !important;
-				color: #999999 !important;
-			}
-
-			.subInfo {
-				width: 100%;
-				font-size: 24rpx;
-				color: #999;
-				font-weight: 400;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				padding-top: 15rpx;
-
-				.font_red {
-					margin-left: 10rpx;
-				}
-			}
-
-			.price {
-				position: absolute;
-				width: 100%;
-				bottom: 0;
-				left: 0;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				align-content: center;
-				margin-top: 8rpx;
-
-				text {
-					margin-right: 10rpx;
-				}
-
-				font-size:36rpx;
-				color:#FF578A;
-
-				.smallIcon {
-					font-size: 24rpx;
-					margin-right: 3rpx;
-				}
-			}
-
-		}
-	}
-
-	::v-deep .u-load-more-wrap {
-		padding: 30rpx 0;
-	}
+<template>
+	<view class="content">
+		<!-- <image class="careBanner" src="../../static/banner.png"></image> -->
+		<view class="strategyBox">
+			<view class="strate">
+				<view class="strTit flex_between">
+					<view class="strL flex_start">
+						<image src="../../static/icon_gonglve.png"></image><text>月子攻略</text>
+					</view>
+					<view class="more" @click="toStrategyCenter">更多</view>
+				</view>
+				<view class="strCol flex_start" v-for="(item,index) in strategies" :key="item.id"
+					@click="toStrategyDetail(item.id)">
+					<view class="strPic">
+						<image mode="aspectFill" :src="item.cover_picture || '../../static/banner.png'"></image>
+					</view>
+					<view class="strInfo">
+						<view class="h3">{{item.title}}</view>
+						<view class="p" v-if="item.subheading">
+							{{item.subheading}}
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="careBox">
+			<view class="careTabs flex_start">
+				<view class="tabCol" :class="{'cur':tabIndex === 1}" @click="tabIndex = 1,status = 'loadmore'">
+					<text>严选商家</text>
+					<view class="line">
+						<image src="../../static/img_qiehuan.png"></image>
+					</view>
+				</view>
+				<view class="tabCol" :class="{'cur':tabIndex === 2}" @click="tabIndex = 2,status = 'loadmore'">
+					<text>严选商品</text>
+					<view class="line">
+						<image src="../../static/img_qiehuan.png"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="proBox" v-if="tabIndex === 1">
+			<view class="termBox">
+				<view class="termOuter">
+					<u-dropdown active-color="#FF578A">
+						<u-dropdown-item v-model="search.sortValue" @change="changeSearchSort" :title="search.sortName"
+							:options="parameter.sort">
+						</u-dropdown-item>
+						<u-dropdown-item v-model="search.area" @change="changeSearchArea" :title="search.areaName"
+							:options="parameter.area">
+						</u-dropdown-item>
+					</u-dropdown>
+				</view>
+			</view>
+			<!-- <view class="tagGroup flex_start">
+				<text>月子餐试吃</text>
+				<text>已探店</text>
+			</view> -->
+			<view class="introBox">
+				<view v-for="(item,index) in serviceList" :key="item.id" class="intro_column"
+					@tap="gotoDetail(item.id)">
+					<view class="imgOuter">
+						<image mode="aspectFill" :src="item.cover_picture"></image>
+						<view v-if="item.recommend == 1" class="i_intro">推荐</view>
+					</view>
+					<view class="columnInfo">
+						<view class="title">{{nameComputed(item.name)}}</view>
+						<view class="tags">
+							<text v-for="(tag,index1) in featureLabelSplit(item.featured_label)"
+								:key="index1">{{tag}}</text>
+							<!-- <text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text> -->
+						</view>
+						<view class="subInfo flex_between">
+							<text>{{addressComputed(item.address)}}</text><text
+								v-if="item.distance">{{distanceComputed(item.distance)}}</text>
+						</view>
+						<view class="price">
+							<text class="smallIcon" v-if="item.low_price">￥</text>
+							<text v-if="item.low_price">{{item.low_price}}&nbsp;&nbsp;-&nbsp;&nbsp;</text>
+							<text class="smallIcon" v-if="item.heigh_price">￥</text>
+							<text v-if="item.heigh_price">{{item.heigh_price}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-else class="proBox">
+			<!-- 			<view class="termBox">
+				<view class="termOuter">
+					<view class="termCol cur">综合排序<text class="iconfont icon-arrowbottom"></text></view>
+					<view class="termCol">全部地区<text class="iconfont icon-arrowbottom"></text></view>
+					<view class="termCol">筛选<text class="iconfont icon-filter"></text></view>
+				</view>
+			</view>
+			<view class="tagGroup flex_start">
+				<text>月子餐试吃</text>
+				<text>已探店</text>
+			</view> -->
+			<view class="introBox">
+				<view v-for="(item,index) in productList" :key="item.id" class="intro_column"
+					@tap="gotoDetail(item.id)">
+					<view class="imgOuter">
+						<image mode="aspectFill" :src="item.cover_picture"></image>
+						<view v-if="item.recommend == 1" class="i_intro">推荐</view>
+					</view>
+					<view class="columnInfo">
+						<view class="title">{{nameComputed(item.name)}}</view>
+						<view class="tags">
+							<text v-for="(tag,index1) in featureLabelSplit(item.featured_label)"
+								:key="index1">{{tag}}</text>
+						</view>
+						<view class="subInfo flex_between"><text>{{addressComputed(item.service.name)}}</text></view>
+						<view class="price"><text class="smallIcon">￥</text><text>{{item.price}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-loadmore :status="status" :load-text='loadText' @loadmore='loadmore' />
+	</view>
+</template>
+
+<script>
+	import {
+		weixin
+	} from '@/utils/weixin.js'
+	import {
+		data
+	} from 'uview-ui/libs/mixin/mixin';
+	export default {
+		data() {
+			return {
+				parameter: {
+					sort: [{
+						label: '综合排序',
+						value: "0",
+						name:"id",
+					}, {
+						label: '距离排序',
+						value: "1",
+						name:"id",
+					}, {
+						label: '价格排序',
+						value: "2",
+						name:"id",
+					}, {
+						label: '人气排序',
+						value: "3",
+						name:"id",
+					}],
+					area: []
+				},
+				search: {
+					sortValue: "",
+					sort: "",
+					sortName: "综合排序",
+					area: "",
+					areaName: "全部区域"
+				},
+				tabIndex: 1, //1为严选商家，2为严选商品
+				serviceList: [],
+				serviceSelect: {
+					page_size: 10,
+					page: 1,
+					latitude: 0,
+					longitude: 0,
+				},
+				productList: [],
+				productSelect: {
+					page_size: 10,
+					page: 1
+				},
+				status: 'loadmore',
+				loadText: {
+					loadmore: '轻轻上拉或点击',
+					loading: '努力加载中',
+					nomore: '实在没有了'
+				},
+
+				strategies: [], //攻略
+			}
+		},
+		methods: {
+			changeSearchArea(e) {
+				this.search.areaName = (e === "" ? "全部区域" : e);
+				if (this.tabIndex === 1) {
+
+					this.serviceSelect.page = 1;
+
+				} else {
+					this.productSelect.page = 1;
+				}
+				this.serviceList = [];
+				//this.productList = [];
+				this.tabSelect();
+			},
+			changeSearchSort(e) {
+				this.search.sortName = this.parameter.sort[e].label;
+				this.search.sort = this.parameter.sort[e].name;
+			},
+			toStrategyDetail(id) {
+				this.$u.throttle(() => {
+					uni.navigateTo({
+						url: `/packages/packageCarecenter/pages/careCenter/strategyDetail?id=${id}`
+					})
+				})
+			},
+			toStrategyCenter() {
+				this.$u.throttle(() => {
+					uni.navigateTo({
+						url: '/packages/packageCarecenter/pages/careCenter/strategyCenter'
+					})
+				})
+			},
+			init() {
+				this.tabSelect()
+				this.tabIndex = 2
+				this.tabSelect()
+				this.tabIndex = 1
+			},
+			featureLabelSplit(res) {
+				if (res) {
+					return res.split(',')
+				}
+				return []
+			},
+			async getParameter(code) {
+				await weixin.request({
+					newUrl: true,
+					api: '/api/member/parameter/show',
+					data: {
+						number: code
+					},
+					utilSuccess: (res) => {
+						this.parameter.area.push({
+							label: "全部区域",
+							value: ""
+						})
+						res.detail.map(item => {
+							this.parameter.area.push({
+								label: item.value,
+								value: item.value
+							})
+						})
+
+					}
+				})
+			},
+			tabSelect() {
+
+				if (this.tabIndex === 1) {
+					weixin.request({
+						newUrl: true,
+						api: '/api/member/get-confinement-service',
+						data: {
+							sort_name: this.search.sort,
+							area: this.search.area,
+							...this.serviceSelect
+						},
+						utilSuccess: (res) => {
+							if (res.rows.length > 0 && res.rows) {
+								this.serviceList.push(...res.rows)
+								this.status = 'loadmore'
+							} else {
+								this.status = 'nomore'
+								if (this.serviceSelect.page > 1) {
+									this.serviceSelect.page--
+								}
+							}
+
+						}
+					})
+				}
+				if (this.tabIndex === 2) {
+					weixin.request({
+						newUrl: true,
+						api: '/api/member/get-confinement-product',
+						data: {
+							sort_name: this.search.sort,
+							area: this.search.area,
+							...this.productSelect
+						},
+						utilSuccess: (res) => {
+							if (res.rows.length > 0 && res.rows) {
+								this.productList.push(...res.rows)
+								this.status = 'loadmore'
+							} else {
+								this.status = 'nomore'
+								if (this.productSelect.page > 1) {
+									this.productSelect.page--
+								}
+							}
+						}
+					})
+				}
+			},
+
+			loadmore() {
+				this.status = 'loading'
+				if (this.tabIndex === 1) {
+					this.serviceSelect.page++
+					this.tabSelect()
+				}
+				if (this.tabIndex === 2) {
+					this.productSelect.page++
+					this.tabSelect()
+				}
+			},
+
+			gotoDetail(id) {
+				this.$u.throttle(() => {
+					if (this.tabIndex === 1) {
+						uni.navigateTo({
+							url: `/packages/packageCarecenter/pages/careCenter/serviceDetail?id=${id}`
+						})
+					}
+					if (this.tabIndex === 2) {
+						uni.navigateTo({
+							url: `/packages/packageCarecenter/pages/careCenter/productDetail?id=${id}`
+						})
+					}
+				})
+			},
+
+			getStrategy() {
+				weixin.request({
+					newUrl: true,
+					api: '/api/member/get-strategy',
+					data: {
+						page: 1,
+						page_size: 5
+					},
+					utilSuccess: res => {
+						this.strategies = res.rows
+						console.log(this.strategies);
+					}
+				})
+			},
+		},
+		computed: {
+			nameComputed() {
+				return function(name) {
+					if (!name) {
+						return '未知'
+					}
+					if (name.length > 12) {
+						return name.slice(0, 11) + '...'
+					}
+					return name
+				}
+			},
+			addressComputed() {
+				return function(address) {
+					if (!address) {
+						return '无'
+					}
+					if (address && (address.length > 12)) {
+						return address.slice(0, 11) + '...'
+					}
+					return address
+				}
+			},
+			distanceComputed() {
+				return function(dis) {
+					if (dis) {
+						if (dis.indexOf('km') !== -1) {
+							return Number(dis.split('km')[0]).toFixed(1) + 'km'
+						}
+						if (dis.indexOf('m') !== -1) {
+							return Number(dis.split('m')[0]).toFixed(1) + 'm'
+						}
+					}
+				}
+			}
+		},
+		mounted() {
+			uni.getLocation().then(res => {
+				let {
+					latitude,
+					longitude
+				} = res[1]
+				this.serviceSelect.latitude = latitude
+				this.serviceSelect.longitude = longitude
+
+				this.init()
+			})
+
+			this.getStrategy();
+			this.getParameter("area");
+		},
+		onReachBottom() {
+
+			this.loadmore()
+		}
+	}
+</script>
+<style>
+	page {
+		background: #f5f5f5;
+	}
+</style>
+<style lang="scss" scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.careBanner {
+		display: block;
+		width: 690rpx;
+		height: 220rpx;
+		margin: 20rpx auto;
+	}
+
+	.strategyBox {
+		width: 710rpx;
+		padding-bottom: 16rpx;
+		background-image: linear-gradient(180deg, #FFE4EC 0%, #FFFFFF 24%);
+		border: 4rpx solid #FFFFFF;
+		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.03);
+		border-radius: 16rpx;
+
+		.strTit {
+			padding: 30rpx 25rpx 15rpx 25rpx;
+
+			.strL {
+				font-size: 34rpx;
+				color: #333333;
+				letter-spacing: 1rpx;
+				font-weight: 500;
+
+				image {
+					display: block;
+					width: 30rpx;
+					height: 34rpx;
+					margin-right: 10rpx;
+				}
+			}
+
+			.more {
+				font-size: 28rpx;
+				color: #333333;
+				font-weight: 400;
+			}
+		}
+
+		.strCol {
+			padding: 16rpx 25rpx;
+
+			.strPic {
+				width: 140rpx;
+				height: 140rpx;
+				border-radius: 10rpx;
+
+				image {
+					display: block;
+					width: 140rpx;
+					height: 140rpx;
+					border-radius: 10rpx;
+				}
+			}
+
+			.strInfo {
+				flex: 1;
+				padding-left: 30rpx;
+
+				.h3 {
+					font-size: 30rpx;
+					color: #333333;
+					font-weight: 500;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					width: 460rpx;
+				}
+
+				.p {
+					margin-top: 10rpx;
+					font-size: 24rpx;
+					color: #999999;
+					font-weight: 400;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					width: 460rpx;
+				}
+			}
+		}
+	}
+
+	.careBox {
+		width: 750rpx;
+		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 70%, rgba(255, 255, 255, 0.00) 100%);
+		border-radius: 40rpx 40rpx 0 0;
+		margin-top: 20rpx;
+
+		.careTabs {
+			width: 100%;
+			height: 106rpx;
+
+			.tabCol {
+				width: 50%;
+				height: 106rpx;
+				line-height: 106rpx;
+				font-size: 36rpx;
+				color: #666666;
+				text-align: center;
+				font-weight: 400;
+				position: relative;
+
+				text {
+					position: relative;
+					z-index: 3;
+				}
+
+				.line {
+					display: none;
+					width: 94rpx;
+					height: 33rpx;
+					position: absolute;
+					left: 50%;
+					transform: translateX(-50%);
+					bottom: 20rpx;
+					z-index: 2;
+
+					image {
+						display: block;
+						width: 94rpx;
+						height: 33rpx;
+					}
+				}
+			}
+
+			.cur {
+				color: #333333;
+				font-weight: 600rpx;
+
+				.line {
+					display: block;
+				}
+			}
+		}
+	}
+
+	.termBox {
+		width: 100%;
+		background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0) 100%);
+		border-radius: 40rpx 40rpx 0px 0px;
+
+		.termOuter {
+			display: flex;
+			align-items: center;
+			align-content: center;
+			justify-content: flex-start;
+
+			.termCol {
+				width: 33.33%;
+				text-align: center;
+				font-size: 28rpx;
+				font-weight: 400;
+				color: #333333;
+				padding: 30rpx 0;
+
+				.iconfont {
+					font-size: 24rpx;
+					color: #666666;
+					line-height: 28rpx;
+					margin-left: 8rpx;
+				}
+
+			}
+
+			.termCol.cur {
+				color: #FF578A;
+
+				.iconfont {
+					color: #FF578A;
+				}
+			}
+
+		}
+	}
+
+	.proBox {
+		width: 710rpx;
+		background: #fff;
+		margin: 0 auto 30rpx auto;
+		border-radius: 12rpx;
+		box-sizing: border-box;
+
+		.tagGroup {
+			padding: 0 24rpx;
+
+			text {
+				display: inline-block;
+				height: 64rpx;
+				background: #F6F6F6;
+				border-radius: 32rpx;
+				padding: 0 30rpx;
+				font-size: 26rpx;
+				color: #666666;
+				text-align: center;
+				line-height: 64rpx;
+				font-weight: 400;
+				margin-right: 15rpx;
+			}
+		}
+	}
+
+	.introBox {
+		padding: 0 24rpx;
+	}
+
+	.intro_column:first-child {
+		border-top: none;
+	}
+
+	.intro_column {
+		display: flex;
+		justify-content: flex-start;
+		padding: 20rpx 0;
+		width: 100%;
+		border-top: 2rpx solid #EAEAEA;
+
+		.imgOuter {
+			width: 260rpx;
+			height: 210rpx;
+			position: relative;
+			border-radius: 10rpx;
+
+			image {
+				width: 260rpx;
+				height: 210rpx;
+				border-radius: 10rpx;
+			}
+
+			.i_intro {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 68rpx;
+				height: 32rpx;
+				background: #FF578A;
+				border-radius: 10rpx 0px 18rpx 0;
+				font-size: 22rpx;
+				font-weight: 400;
+				color: #FFFFFF;
+				line-height: 32rpx;
+				text-align: center;
+			}
+		}
+
+		.columnInfo {
+			flex: 1;
+			margin-left: 22rpx;
+			position: relative;
+
+			.title {
+				width: 100%;
+				font-size: 30rpx;
+				font-weight: 700;
+				color: #333;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+
+			.tags {
+				margin-top: 8rpx;
+			}
+
+			.tags text {
+				height: 28rpx;
+				background: rgba(255, 177, 62, 0.1);
+				border-radius: 4rpx;
+				line-height: 28rpx;
+				font-size: 20rpx;
+				padding: 0 10rpx;
+				margin-right: 10rpx;
+				color: #FF753E;
+			}
+
+			.grayBg {
+				background: #F6F6F6 !important;
+				color: #999999 !important;
+			}
+
+			.subInfo {
+				width: 100%;
+				font-size: 24rpx;
+				color: #999;
+				font-weight: 400;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				padding-top: 15rpx;
+
+				.font_red {
+					margin-left: 10rpx;
+				}
+			}
+
+			.price {
+				position: absolute;
+				width: 100%;
+				bottom: 0;
+				left: 0;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				align-content: center;
+				margin-top: 8rpx;
+
+				text {
+					margin-right: 10rpx;
+				}
+
+				font-size:36rpx;
+				color:#FF578A;
+
+				.smallIcon {
+					font-size: 24rpx;
+					margin-right: 3rpx;
+				}
+			}
+
+		}
+	}
+
+	::v-deep .u-load-more-wrap {
+		padding: 30rpx 0;
+	}
 </style>
diff --git a/packages/packageCarecenter/pages/careCenter/productDetail.vue b/packages/packageCarecenter/pages/careCenter/productDetail.vue
index be69717..76c5308 100644
--- a/packages/packageCarecenter/pages/careCenter/productDetail.vue
+++ b/packages/packageCarecenter/pages/careCenter/productDetail.vue
@@ -1,401 +1,562 @@
-<template>
-	<view>
-		<view class="u-skeleton">
-			<view class="product-picture u-skeleton-rect">
-				<swiper class="product-picture-swiper" :indicator-dots="true"
-					@change="e => swiperIndex = e.detail.current + 1">
-					<swiper-item v-for="(img,index) in detail.confinement_picture" :key="index">
-						<u-image height="100%" width="100%" :src="img.picture" mode="aspectFit">
-						</u-image>
-					</swiper-item>
-				</swiper>
-
-				<view class="product-picture-num">
-					{{swiperIndex}} / {{detail.confinement_picture.length}}
-				</view>
-			</view>
-
-			<view class="product-price u-skeleton-rect">
-				￥ <span style="font-size: 34rpx;">{{detail.price}}</span>
-			</view>
-
-			<view class="product-info">
-				<view class="product-info-name u-skeleton-rect">
-					{{detail.name}}
-				</view>
-
-				<view class="product-info-label ">
-					<view class="product-info-label-item"
-						v-for="(item,index) in featuredLabelSplit(detail.featured_label)" :key="index">
-						{{item}}
-					</view>
-				</view>
-
-				<view class="product-info-shop u-skeleton-fillet">
-					<view class="product-info-shop-top">
-						<view class="product-info-shop-top-img">
-							<u-image :src="detail.service.cover_picture" width="100" height="100" border-radius="100%">
-							</u-image>
-						</view>
-						<view class="product-info-shop-top-name">
-							<view>{{detail.service.name}}</view>
-							<view>{{detail.service.subheading}}</view>
-						</view>
-						<view class="product-info-shop-top-more" @click="toService(detail.service.id)">
-							<text>更多</text>
-							<u-icon name="arrow-right" size="25" color="#A0A0A0"></u-icon>
-						</view>
-					</view>
-
-					<view class="product-info-shop-bottom">
-						<view class="product-info-shop-bottom-icon">
-							<u-image mode="asseptFit" src="/packages/packageCarecenter/static/position.png" height="26"
-								width="22">
-							</u-image>
-						</view>
-						<view class="product-info-shop-bottom-text">
-							{{detail.service.address}}
-						</view>
-						<view class="product-info-shop-bottom-arrow" @click="toMap">
-							<u-icon name="arrow-right" size="25" color="#A0A0A0"></u-icon>
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<view class="combo u-skeleton-rect">
-				<view class="combo-title">
-					套餐介绍
-				</view>
-				<view class="combo-content">
-					<view class="combo-content-item" v-for="(item,index) in detail.set" :key="index">
-						<view class="combo-content-item-name">{{item.content}}</view>
-						<view class="combo-content-item-content">{{item.name}}</view>
-					</view>
-				</view>
-			</view>
-
-			<view class="facility u-skeleton-rect">
-				<view class="facility-title">
-					设备详情
-				</view>
-				<view class="facility-content">
-					<view class="facility-content-item" v-for="(item,index) in detail.facility" :key="index">
-						<view class="facility-content-item-icon iconfont" :class="'icon-'+item.remark"></view>
-						<view class="facility-content-item-name">{{item.value}}</view>
-					</view>
-				</view>
-			</view>
-
-			<view style="width: 100%;background: #fff;padding: 20rpx 28rpx;">
-				<u-parse :html="detail.content"></u-parse>
-			</view>
-		</view>
-
-		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
-	</view>
-</template>
-
-<script>
-	import {
-		weixin
-	} from '@/utils/weixin.js'
-	export default {
-		data() {
-			return {
-				loading: true,
-				swiperIndex: 1,
-				detail: {},
-			}
-		},
-		methods: {
-			toMap() {
-				this.$u.throttle(() => {
-					uni.openLocation({
-						latitude: Number(this.detail.service.latitude),
-						longitude: Number(this.detail.service.longitude),
-						name: this.detail.name
-					})
-				})
-			},
-			toService(id) {
-				this.$u.throttle(() => {
-					uni.navigateTo({
-						url: `/packages/packageCarecenter/pages/careCenter/serviceDetail?id=${id}`
-					})
-				})
-			},
-			featuredLabelSplit(res) {
-				if (res) {
-					return res.split(",")
-				}
-				return []
-			},
-			getProductDetail(id) {
-				weixin.request({
-					newUrl: true,
-					api: '/api/member/get-confinement-product-item',
-					data: {
-						id
-					},
-					utilSuccess: (res) => {
-						this.detail = res
-						this.loading = false
-						console.log(res);
-					}
-				})
-			}
-		},
-		computed: {
-
-		},
-		onLoad(option) {
-			this.getProductDetail(option.id)
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.product-picture {
-		height: 417rpx;
-		width: 100%;
-
-		position: relative;
-
-		&-swiper {
-			width: 100%;
-			height: 100%;
-		}
-
-		&-num {
-			color: #fff;
-			background: #252526;
-			border-radius: 16rpx;
-			opacity: 0.3;
-
-			padding: 7rpx 20rpx;
-			position: absolute;
-			bottom: 20rpx;
-			right: 27rpx;
-		}
-	}
-
-	.product-price {
-		font-weight: 400;
-		color: #FF578A;
-		font-size: 24rpx;
-		background-color: #FFEFF4;
-
-		padding: 55rpx 21rpx;
-	}
-
-	.product-info {
-		background: #fff;
-
-		padding-bottom: 41rpx;
-
-		&-name {
-			font-weight: 400;
-			color: #333333;
-			font-size: 34rpx;
-
-			padding: 46rpx 34rpx 0 34rpx;
-		}
-
-		&-label {
-			display: flex;
-			flex-wrap: wrap;
-
-			margin-top: 21rpx;
-			padding: 0 32rpx;
-
-			&-item {
-				background: rgba(255, 87, 138, 0.1);
-				border-radius: 12rpx;
-				font-weight: 400;
-				color: #FF578A;
-				font-size: 24rpx;
-
-				padding: 10rpx 15rpx;
-				margin-right: 15rpx;
-			}
-		}
-
-		&-shop {
-			background: linear-gradient(180deg, #555455 0%, #1F1D1D 100%);
-			border-radius: 40rpx;
-
-			margin: 35rpx 30rpx 0 30rpx;
-			padding: 0 30rpx 0 36rpx;
-
-			&-top {
-				display: flex;
-				align-items: center;
-
-				padding-top: 23rpx;
-
-				&-img {}
-
-				&-name {
-					color: #fff;
-					flex: 1;
-
-					margin-left: 20rpx;
-
-					&>view:nth-child(1) {
-						font-weight: 400;
-						color: #FFFFFF;
-						font-size: 30rpx;
-					}
-
-					&>view:nth-child(2) {
-						display: inline-block;
-						text-align: center;
-						border-radius: 12rpx;
-						font-size: 24rpx;
-						font-weight: 400;
-						color: #FFFFFF;
-						background-color: #FF578A;
-
-						padding: 4rpx 11rpx;
-						margin-top: 10rpx;
-					}
-				}
-
-				&-more {
-					font-size: 24rpx;
-					color: #A0A0A0;
-					font-weight: 400;
-					align-self: flex-start;
-
-					padding-right: 26rpx;
-					padding-top: 6rpx;
-				}
-			}
-
-			&-bottom {
-				display: flex;
-				align-items: flex-start;
-
-				padding-right: 26rpx;
-				padding-left: 8rpx;
-				padding-bottom: 42rpx;
-				margin-top: 37rpx;
-
-				&-text {
-					flex: 1;
-					font-weight: 400;
-					color: #FFFFFF;
-					font-size: 24rpx;
-
-					padding: 0 23rpx 0 10rpx;
-				}
-			}
-		}
-	}
-
-	.combo {
-
-		background-color: #fff;
-
-		margin-top: 34rpx;
-		padding: 0 28rpx;
-
-		&-title {
-			font-size: 34rpx;
-			font-weight: 400;
-			color: #333333;
-
-			padding-top: 51rpx;
-			padding-left: 6rpx;
-			padding-bottom: 55rpx;
-		}
-
-		&-content {
-			display: flex;
-			flex-wrap: wrap;
-
-			&>view:nth-last-child(1) {
-				margin-right: 0;
-			}
-
-			&-item {
-				text-align: center;
-				border: 1px solid #191B1A;
-				border-radius: 24rpx;
-				flex: 0;
-				height: 135rpx;
-
-				margin-right: 14rpx;
-				margin-bottom: 12rpx;
-
-				&-name {
-					font-size: 30rpx;
-					font-weight: 400;
-					color: #333333;
-					white-space: nowrap;
-					word-wrap: keep-all;
-
-					padding: 27rpx 24rpx 18rpx 24rpx;
-				}
-
-				&-content {
-					background-color: #191B1A;
-					color: #fff;
-					border-radius: 0 0 24rpx 24rpx;
-					white-space: nowrap;
-					word-wrap: keep-all;
-
-					padding: 8rpx 24rpx;
-				}
-			}
-		}
-
-	}
-
-	.facility {
-		background-color: #fff;
-
-		&-title {
-			padding: 73rpx 0 44rpx 34rpx;
-			font-weight: 400;
-			color: #333333;
-			font-size: 34rpx;
-		}
-
-		&-content {
-			display: flex;
-			flex-wrap: wrap;
-
-			padding: 44rpx 64rpx 66rpx 64rpx;
-
-			&-item {
-				flex-basis: 25%;
-				font-size: 24rpx;
-				font-weight: 400;
-				color: #333333;
-				text-align: center;
-
-				margin-bottom: 24rpx;
-
-				&-icon {
-					width: 55rpx;
-					height: 55rpx;
-					font-size: 55rpx;
-
-					margin: auto;
-				}
-
-				&-name {
-
-					padding-top: 13rpx;
-				}
-			}
-		}
-
-	}
-
-	::v-deep .u-image__image {
-		display: block !important;
-	}
+<template>
+	<view>
+		<view class="u-skeleton">
+			<view class="product-picture u-skeleton-rect">
+				<video style="width: 100%;" v-if="showFlag === 0" :src="detail.video"
+					play-btn-position="center"></video>
+				<swiper class="product-picture-swiper" :indicator-dots="true"
+					@change="e => swiperIndex = e.detail.current + 1" 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">
+						</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.video" @click="showFlag = 0">
+						<image src="../../static/video.png">
+						</image>
+						<view class="service-show-btn-img__num">1</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="product-price u-skeleton-rect">
+				￥ <span style="font-size: 34rpx;">{{detail.price}}</span>
+			</view>
+
+
+			<view class="product-info">
+				<view class="product-info-name u-skeleton-rect">
+					{{detail.name}}
+				</view>
+
+				<view class="product-info-label ">
+					<view class="product-info-label-item"
+						v-for="(item,index) in featuredLabelSplit(detail.featured_label)" :key="index">
+						{{item}}
+					</view>
+				</view>
+
+				<view class="product-info-shop u-skeleton-fillet">
+					<view class="product-info-shop-top">
+						<view class="product-info-shop-top-img">
+							<u-image :src="detail.service.cover_picture" width="100" height="100" border-radius="100%">
+							</u-image>
+						</view>
+						<view class="product-info-shop-top-name">
+							<view>{{detail.service.name}}</view>
+							<view>{{detail.service.subheading}}</view>
+						</view>
+						<view class="product-info-shop-top-more" @click="toService(detail.service.id)">
+							<text>更多</text>
+							<u-icon name="arrow-right" size="25" color="#A0A0A0"></u-icon>
+						</view>
+					</view>
+
+					<view class="product-info-shop-bottom">
+						<view class="product-info-shop-bottom-icon">
+							<u-image mode="asseptFit" src="/packages/packageCarecenter/static/position.png" height="26"
+								width="22">
+							</u-image>
+						</view>
+						<view class="product-info-shop-bottom-text">
+							{{detail.service.address}}
+						</view>
+						<view class="product-info-shop-bottom-arrow" @click="toMap">
+							<u-icon name="arrow-right" size="25" color="#A0A0A0"></u-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="service-baseinfo-center-store u-skeleton-fillet">
+
+				<video :src="detail.video" v-if="detail.video" 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 class="combo u-skeleton-rect">
+				<view class="combo-title">
+					套餐介绍
+				</view>
+				<view class="combo-content">
+					<view class="combo-content-item" v-for="(item,index) in detail.set" :key="index">
+						<view class="combo-content-item-name">{{item.content}}</view>
+						<view class="combo-content-item-content">{{item.name}}</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="facility u-skeleton-rect">
+				<view class="facility-title">
+					设备详情
+				</view>
+				<view class="facility-content">
+					<view class="facility-content-item" v-for="(item,index) in detail.facility" :key="index">
+						<view class="facility-content-item-icon iconfont" :class="'icon-'+item.remark"></view>
+						<view class="facility-content-item-name">{{item.value}}</view>
+					</view>
+				</view>
+			</view>
+
+			<view style="width: 100%;background: #fff;padding: 20rpx 28rpx;">
+				<u-parse :html="detail.content"></u-parse>
+			</view>
+		</view>
+
+		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
+	</view>
+</template>
+
+<script>
+	import {
+		weixin
+	} from '@/utils/weixin.js'
+	export default {
+		data() {
+			return {
+				showFlag: 1,
+				loading: true,
+				swiperIndex: 1,
+				detail: {},
+			}
+		},
+		methods: {
+			toMap() {
+				this.$u.throttle(() => {
+					uni.openLocation({
+						latitude: Number(this.detail.service.latitude),
+						longitude: Number(this.detail.service.longitude),
+						name: this.detail.name
+					})
+				})
+			},
+			toService(id) {
+				this.$u.throttle(() => {
+					uni.navigateTo({
+						url: `/packages/packageCarecenter/pages/careCenter/serviceDetail?id=${id}`
+					})
+				})
+			},
+			featuredLabelSplit(res) {
+				if (res) {
+					return res.split(",")
+				}
+				return []
+			},
+			getProductDetail(id) {
+				weixin.request({
+					newUrl: true,
+					api: '/api/member/get-confinement-product-item',
+					data: {
+						id
+					},
+					utilSuccess: (res) => {
+						this.detail = res
+						this.loading = false
+						console.log(res);
+					}
+				})
+			}
+		},
+		computed: {
+
+		},
+		onLoad(option) {
+			this.getProductDetail(option.id)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.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;
+				}
+			}
+		}
+	}
+
+	.product-picture {
+		height: 417rpx;
+		width: 100%;
+
+		position: relative;
+
+		&-swiper {
+			width: 100%;
+			height: 100%;
+		}
+
+		&-num {
+			color: #fff;
+			background: #252526;
+			border-radius: 16rpx;
+			opacity: 0.3;
+
+			padding: 7rpx 20rpx;
+			position: absolute;
+			bottom: 20rpx;
+			right: 27rpx;
+		}
+	}
+
+	.product-price {
+		font-weight: 400;
+		color: #FF578A;
+		font-size: 24rpx;
+		background-color: #FFEFF4;
+
+		padding: 55rpx 21rpx;
+	}
+
+	.product-info {
+		background: #fff;
+
+		padding-bottom: 41rpx;
+
+		&-name {
+			font-weight: 400;
+			color: #333333;
+			font-size: 34rpx;
+
+			padding: 46rpx 34rpx 0 34rpx;
+		}
+
+		&-label {
+			display: flex;
+			flex-wrap: wrap;
+
+			margin-top: 21rpx;
+			padding: 0 32rpx;
+
+			&-item {
+				background: rgba(255, 87, 138, 0.1);
+				border-radius: 12rpx;
+				font-weight: 400;
+				color: #FF578A;
+				font-size: 24rpx;
+
+				padding: 10rpx 15rpx;
+				margin-right: 15rpx;
+			}
+		}
+
+		&-shop {
+			background: linear-gradient(180deg, #555455 0%, #1F1D1D 100%);
+			border-radius: 40rpx;
+
+			margin: 35rpx 30rpx 0 30rpx;
+			padding: 0 30rpx 0 36rpx;
+
+			&-top {
+				display: flex;
+				align-items: center;
+
+				padding-top: 23rpx;
+
+				&-img {}
+
+				&-name {
+					color: #fff;
+					flex: 1;
+
+					margin-left: 20rpx;
+
+					&>view:nth-child(1) {
+						font-weight: 400;
+						color: #FFFFFF;
+						font-size: 30rpx;
+					}
+
+					&>view:nth-child(2) {
+						display: inline-block;
+						text-align: center;
+						border-radius: 12rpx;
+						font-size: 24rpx;
+						font-weight: 400;
+						color: #FFFFFF;
+						background-color: #FF578A;
+
+						padding: 4rpx 11rpx;
+						margin-top: 10rpx;
+					}
+				}
+
+				&-more {
+					font-size: 24rpx;
+					color: #A0A0A0;
+					font-weight: 400;
+					align-self: flex-start;
+
+					padding-right: 26rpx;
+					padding-top: 6rpx;
+				}
+			}
+
+			&-bottom {
+				display: flex;
+				align-items: flex-start;
+
+				padding-right: 26rpx;
+				padding-left: 8rpx;
+				padding-bottom: 42rpx;
+				margin-top: 37rpx;
+
+				&-text {
+					flex: 1;
+					font-weight: 400;
+					color: #FFFFFF;
+					font-size: 24rpx;
+
+					padding: 0 23rpx 0 10rpx;
+				}
+			}
+		}
+	}
+
+	.combo {
+
+		background-color: #fff;
+
+		margin-top: 34rpx;
+		padding: 0 28rpx;
+
+		&-title {
+			font-size: 34rpx;
+			font-weight: 400;
+			color: #333333;
+
+			padding-top: 51rpx;
+			padding-left: 6rpx;
+			padding-bottom: 55rpx;
+		}
+
+		&-content {
+			display: flex;
+			flex-wrap: wrap;
+
+			&>view:nth-last-child(1) {
+				margin-right: 0;
+			}
+
+			&-item {
+				text-align: center;
+				border: 1px solid #191B1A;
+				border-radius: 24rpx;
+				flex: 0;
+				height: 135rpx;
+
+				margin-right: 14rpx;
+				margin-bottom: 12rpx;
+
+				&-name {
+					font-size: 30rpx;
+					font-weight: 400;
+					color: #333333;
+					white-space: nowrap;
+					word-wrap: keep-all;
+
+					padding: 27rpx 24rpx 18rpx 24rpx;
+				}
+
+				&-content {
+					background-color: #191B1A;
+					color: #fff;
+					border-radius: 0 0 24rpx 24rpx;
+					white-space: nowrap;
+					word-wrap: keep-all;
+
+					padding: 8rpx 24rpx;
+				}
+			}
+		}
+
+	}
+
+
+
+
+	.service-baseinfo {
+		width: 100%;
+		background: linear-gradient(90deg, #555455 0%, #1F1D1D 100%);
+
+		padding-bottom: 38rpx;
+
+		&-center {
+
+			margin-top: 28rpx;
+
+
+
+
+
+			&-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;
+					}
+				}
+			}
+		}
+	}
+
+	.facility {
+		background-color: #fff;
+
+		&-title {
+			padding: 73rpx 0 44rpx 34rpx;
+			font-weight: 400;
+			color: #333333;
+			font-size: 34rpx;
+		}
+
+		&-content {
+			display: flex;
+			flex-wrap: wrap;
+
+			padding: 44rpx 64rpx 66rpx 64rpx;
+
+			&-item {
+				flex-basis: 25%;
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #333333;
+				text-align: center;
+
+				margin-bottom: 24rpx;
+
+				&-icon {
+					width: 55rpx;
+					height: 55rpx;
+					font-size: 55rpx;
+
+					margin: auto;
+				}
+
+				&-name {
+
+					padding-top: 13rpx;
+				}
+			}
+		}
+
+	}
+
+	::v-deep .u-image__image {
+		display: block !important;
+	}
 </style>
diff --git a/packages/packageCarecenter/pages/careCenter/serviceDetail.vue b/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
index 07b3888..ca61bc0 100644
--- a/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
+++ b/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
@@ -1,787 +1,849 @@
-<template>
-	<view>
-		<view class="u-skeleton">
-			<view class="service-show u-skeleton-rect">
-				<video v-if="showFlag === 0" :src="detail.video_file" play-btn-position="center"></video>
-				<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" @click="showFlag = 0">
-						<image src="../../static/video.png">
-						</image>
-						<view class="service-show-btn-img__num">1</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">
-						<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" @click="toMap">
-							<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">
-						<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">
-							人工客服
-						</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">
-						<u-image :src="detail.cover_picture" 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 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" shape="circle">预约探店</u-button>
-			</view> -->
-		</view>
-
-		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
-	</view>
-</template>
-
-<script>
-	import {
-		weixin
-	} from '@/utils/weixin.js'
-	export default {
-		data() {
-			return {
-				loading: true,
-				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: {
-					marginRight: '46rpx',
-					height: '60rpx',
-					width: '180rpx',
-					color: '#fff',
-					background: '#FF578A',
-				}
-			}
-		},
-		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();
-				}
-			},
-			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) => {
-						this.detail = res
-						this.loading = false
-
-					}
-				})
-			}
-		},
-		computed: {
-
-		},
-		mounted() {
-			this.$nextTick(() => {
-				this.init()
-			})
-		},
-		onLoad(option) {
-			this.getServiceDetail(option.id)
-		},
-		onPageScroll(e) {
-			this.$u.throttle(() => {
-				if (e.scrollTop > this.barTop) {
-					this.barFixed = true
-				} else {
-					this.barFixed = false
-				}
-			}, 50)
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.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%;
-			}
-		}
-	}
-
-	.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;
-
-				&-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;
-					}
-				}
-
-				&-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: flex-end;
-
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		right: 0;
-	}
-
-	::v-deep .u-image__image {
-		display: block !important;
-	}
+<template>
+	<view>
+		<view class="u-skeleton">
+			<view class="service-show u-skeleton-rect">
+				<video v-if="showFlag === 0" :src="detail.video_file" play-btn-position="center"></video>
+				<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.video_file" @click="showFlag = 0">
+						<image src="../../static/video.png">
+						</image>
+						<view class="service-show-btn-img__num">1</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=true"
+						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" shape="circle">预约探店</u-button>
+			</view> -->
+		</view>
+
+		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
+	</view>
+</template>
+
+<script>
+	import {
+		weixin
+	} from '@/utils/weixin.js'
+	export default {
+		data() {
+			return {
+				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: {
+					marginRight: '46rpx',
+					height: '60rpx',
+					width: '180rpx',
+					color: '#fff',
+					background: '#FF578A',
+				},
+				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.img
+			}
+		},
+		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();
+				}
+			},
+			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) => {
+						this.detail = res
+						this.loading = false
+
+					}
+				})
+			}
+		},
+		computed: {
+
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.init()
+			})
+		},
+		onShow() {
+
+			var that = this;
+			weixin.getOpenidInfo(info => {
+				that.user_info = info.user_info;
+
+
+
+			}, true);
+		},
+		onLoad(option) {
+			this.getServiceDetail(option.id)
+		},
+		onPageScroll(e) {
+			this.$u.throttle(() => {
+				if (e.scrollTop > this.barTop) {
+					this.barFixed = true
+				} else {
+					this.barFixed = false
+				}
+			}, 50)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.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;
+
+				&-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;
+					}
+				}
+
+				&-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: flex-end;
+
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+
+	::v-deep .u-image__image {
+		display: block !important;
+	}
 </style>
diff --git a/pages/home/home.vue b/pages/home/home.vue
index ac08282..f2ef3c4 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -12,38 +12,12 @@
 			</view>
 		</view>
 		<view class="menuBox">
-			<view class="menuCol" @click="toAction" data-id="-1">
-				<image src="../../static/icon_home_youxuan@2x.png"></image>
-				<view>为您优选</view>
-			</view>
-			<view class="menuCol" @click="gotomember">
-				<image src="../../static/icon_home_women@2x.png"></image>
-				<view>福利包</view>
-			</view>
-			<view class="menuCol" @click="toAction" data-id="10">
-				<image src="../../static/icon_home_huodong@2x.png"></image>
-				<view>产后康复</view>
-			</view>
-			<view class="menuCol" @click="toAction" data-id="28">
-				<image src="../../static/icon_home_fuwu@2x.png"></image>
-				<view>摄影</view>
-			</view>
-			<view class="menuCol" @click="toAction" data-id="13">
-				<image src="../../static/icon_home_youhui@2x.png"></image>
-				<view>宝宝护理</view>
-			</view>
-			<view class="menuCol" @click="toAction" data-id="23">
-				<image src="../../static/icon_home_shanghu@2x.png"></image>
-				<view>胎教</view>
-			</view>
-			<view class="menuCol" @click="toAction" data-id="25">
-				<image src="../../static/icon_home_shangcheng@2x.png"></image>
-				<view>其他</view>
-			</view>
-			<view class="menuCol" @tap="goCarecenter">
-				<image src="../../static/icon_home_yuezizhongxin.png"></image>
-				<view>月子中心</view>
-			</view>
+			<block v-for="item in indexNav" :key="item.id">
+				<view class="menuCol" @click="toAction(item)" data-id="-1">
+					<image :src="item.icon"></image>
+					<view>{{item.name}}</view>
+				</view>
+			</block>
 		</view>
 		<!--为您精选活动-->
 		<view class="introBox">
@@ -116,11 +90,12 @@
 				keyword: "",
 				currentPage: 1,
 				dataList: [],
-				dataActiveList: []
+				dataActiveList: [],
+				indexNav: []
 			}
 		},
 		onLoad() {
-
+			this.getNav();
 		},
 		onShow() {
 			this.getAdS();
@@ -142,12 +117,26 @@
 			this.loadPage((this.currentPage + 1), '', 6, 1)
 		},
 		methods: {
-			toAction: function(e) {
-				var id = e.currentTarget.dataset.id;
-				if (!weixin.isNull(id) || id == "-1") {
-					id = (id == "-1" ? "" : id);
+			async getNav(code) {
+				await weixin.request({
+					newUrl: true,
+					api: '/api/member/applet-menu-first/index',
+					data: {
+						page: 1,
+						page_size: 8,
+						sort_name: "sort_number",
+						sort_type: "asc"
+					},
+					utilSuccess: (res) => {
+						this.indexNav = res.data;
+					}
+				})
+			},
+			toAction: function(item) {
+				console.log(item)
+				if (item.link) {
 					uni.redirectTo({
-						url: "../../packages/packageBuy/pages/shopList/shopList?product_type_id=" + id
+						url: item.link
 					})
 				} else {
 					uni.showToast({
@@ -155,7 +144,6 @@
 						title: "建设中"
 					})
 				}
-				console.log(e)
 			},
 			gotomember() {
 				uni.navigateTo({