From 17d5bd785dbab63138dbfa3af0a258ac6c33935d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Tue, 1 Nov 2022 18:50:38 +0800
Subject: [PATCH] up

---
 .../pages/careCenter/careCenter.vue           |  21 +-
 .../pages/careCenter/serviceDetail.vue        |   7 +-
 .../pages/careCenter/strategyCenter.vue       | 416 ++++-----
 .../pages/commonService/commonCenter.vue      | 751 ++++++++++++++++
 .../pages/commonService/productDetail.vue     | 562 ++++++++++++
 .../pages/commonService/serviceDetail.vue     | 847 ++++++++++++++++++
 pages.json                                    |  24 +
 7 files changed, 2414 insertions(+), 214 deletions(-)
 create mode 100644 packages/packageCarecenter/pages/commonService/commonCenter.vue
 create mode 100644 packages/packageCarecenter/pages/commonService/productDetail.vue
 create mode 100644 packages/packageCarecenter/pages/commonService/serviceDetail.vue

diff --git a/packages/packageCarecenter/pages/careCenter/careCenter.vue b/packages/packageCarecenter/pages/careCenter/careCenter.vue
index 67cc847..72fdb6a 100644
--- a/packages/packageCarecenter/pages/careCenter/careCenter.vue
+++ b/packages/packageCarecenter/pages/careCenter/careCenter.vue
@@ -133,20 +133,20 @@
 				parameter: {
 					sort: [{
 						label: '综合排序',
-						value: "0",
-						name:"id",
+						value: "0",
+						name: "id",
 					}, {
 						label: '距离排序',
-						value: "1",
-						name:"id",
+						value: "1",
+						name: "id",
 					}, {
 						label: '价格排序',
-						value: "2",
-						name:"id",
+						value: "2",
+						name: "id",
 					}, {
 						label: '人气排序',
-						value: "3",
-						name:"id",
+						value: "3",
+						name: "id",
 					}],
 					area: []
 				},
@@ -208,7 +208,7 @@
 			toStrategyCenter() {
 				this.$u.throttle(() => {
 					uni.navigateTo({
-						url: '/packages/packageCarecenter/pages/careCenter/strategyCenter'
+						url: '/packages/packageCarecenter/pages/careCenter/strategyCenter?type=confinement'
 					})
 				})
 			},
@@ -328,7 +328,8 @@
 					api: '/api/member/get-strategy',
 					data: {
 						page: 1,
-						page_size: 5
+						page_size: 5,
+						call_logo: "confinement"
 					},
 					utilSuccess: res => {
 						this.strategies = res.rows
diff --git a/packages/packageCarecenter/pages/careCenter/serviceDetail.vue b/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
index 4f304da..8cd0842 100644
--- a/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
+++ b/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
@@ -259,10 +259,11 @@
 				barHeight: 0,
 				detail: {},
 				btnStyle: {
-					marginRight: '46rpx',
-					height: '60rpx',
+					
+					
 					color: '#fff',
-					background: '#FF578A',
+					background: '#FF578A',
+					width:"100%"
 				},
 				user_info: {}
 			}
diff --git a/packages/packageCarecenter/pages/careCenter/strategyCenter.vue b/packages/packageCarecenter/pages/careCenter/strategyCenter.vue
index 5671c3d..baf027f 100644
--- a/packages/packageCarecenter/pages/careCenter/strategyCenter.vue
+++ b/packages/packageCarecenter/pages/careCenter/strategyCenter.vue
@@ -1,202 +1,216 @@
-<template>
-	<view>
-		<view class="strategy">
-			<view class="strategy-title">
-				<view class="strategy-title-icon">
-					<u-image src="/packages/packageCarecenter/static/icon_gonglve.png" width="30" height="34"></u-image>
-				</view>
-				<view class="strategy-title-text">
-					月子攻略
-				</view>
-			</view>
-
-			<view class="strategy-content">
-				<scroll-view scroll-y="true" style="height: 1000rpx;" @scrolltolower="loadmore">
-					<view class="strategy-content-item" v-for="(item,index) in strategies" :key="item.id"
-						@click="toDetail(item.id)">
-						<view class="strategy-content-item-left">
-							<u-image :src="item.cover_picture" width="160" height="150" border-radius="18"></u-image>
-						</view>
-						<view class="strategy-content-item-right">
-							<view class="strategy-content-item-right-title">{{item.title}}</view>
-							<view class="strategy-content-item-right-hubheading" v-if="item.subheading">
-								{{item.subheading}}
-							</view>
-						</view>
-					</view>
-
-					<u-loadmore :status="status" :load-text='loadText' @loadmore='loadmore' />
-				</scroll-view>
-			</view>
-		</view>
-
-		<view class="bottom-btn">
-			<view class="bottom-btn-boder">
-				<u-image src="/packages/packageCarecenter/static/msg.png" width="39" height="39"></u-image>
-				<u-button :custom-style="btnStyle" :hair-line="false" hover-class="none" open-type="contact">询问客服
-				</u-button>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		weixin
-	} from '@/utils/weixin.js'
-	export default {
-		data() {
-			return {
-				strategies: [],
-				select: {
-					page: 1,
-					page_size: 10
-				},
-				status: 'loadmore',
-				loadText: {
-					loadmore: '轻轻上拉或点击',
-					loading: '努力加载中',
-					nomore: '实在没有了'
-				},
-				btnStyle: {
-					border: 'none',
-					background: 'transparent',
-					color: '#fff',
-					width: '136rpx',
-					height: '48rpx',
-					fontSize: '34rpx',
-					fontWeight: 400,
-					marginLeft: '20rpx'
-				}
-			}
-		},
-		methods: {
-			toDetail(id) {
-				this.$u.throttle(() => {
-					uni.navigateTo({
-						url: `/packages/packageCarecenter/pages/careCenter/strategyDetail?id=${id}`
-					})
-				})
-			},
-			getStrategy() {
-				weixin.request({
-					newUrl: true,
-					api: '/api/member/get-strategy',
-					data: this.select,
-					utilSuccess: res => {
-						if (res.rows.length === 0) {
-							if (this.select.page > 1) {
-								this.select.page--
-								this.status = 'nomore'
-							}
-							return
-						}
-						this.strategies.push(...res.rows)
-						this.status = 'loadmore'
-						console.log(this.strategies);
-					}
-				})
-			},
-
-			loadmore(e) {
-				if (this.status === 'loadmore') {
-					this.select.page++
-					this.status = 'loading'
-					this.getStrategy()
-				}
-			}
-		},
-		computed: {
-
-		},
-		mounted() {
-			this.getStrategy()
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.strategy {
-		background: linear-gradient(180deg, #FFEFF4 0%, #FFFFFF 100%);
-		border-radius: 40rpx;
-
-		margin: 37rpx 20rpx;
-
-		&-title {
-			display: flex;
-			align-items: center;
-
-			padding-top: 29rpx;
-			padding-left: 50rpx;
-
-			&-text {
-				font-weight: 400;
-				color: #333333;
-				font-size: 34rpx;
-
-				padding-left: 21rpx;
-			}
-		}
-
-		&-content {
-
-			margin-top: 44rpx;
-			padding: 0 50rpx;
-
-			&-item {
-				display: flex;
-				align-items: center;
-
-				margin-bottom: 30rpx;
-
-				&-right {
-					padding-left: 37rpx;
-
-					&-title {
-						font-weight: 400;
-						color: #333333;
-						font-size: 30rpx;
-						text-overflow: ellipsis;
-
-						padding: 11rpx 0;
-					}
-
-					&-subheading {
-						font-weight: 400;
-						color: #999999;
-						font-size: 24rpx;
-					}
-				}
-			}
-		}
-	}
-
-	.bottom-btn {
-		height: 136rpx;
-		background: #fff;
-		border-top: 1rpx solid rgba(180, 180, 180, 0.6);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		right: 0;
-
-		&-boder {
-			width: 480rpx;
-			height: 89rpx;
-			border-radius: 45rpx;
-			background: #FF578A;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-		}
-	}
-
-	::v-deep .u-load-more-wrap {
-		padding: 10rpx 0;
-	}
+<template>
+	<view>
+		<view class="strategy">
+			<view class="strategy-title">
+				<view class="strategy-title-icon">
+					<u-image src="/packages/packageCarecenter/static/icon_gonglve.png" width="30" height="34"></u-image>
+				</view>
+				<view class="strategy-title-text">
+					{{paraType[type]}}攻略
+				</view>
+			</view>
+
+			<view class="strategy-content">
+				<scroll-view scroll-y="true" style="height: 1000rpx;" @scrolltolower="loadmore">
+					<view class="strategy-content-item" v-for="(item,index) in strategies" :key="item.id"
+						@click="toDetail(item.id)">
+						<view class="strategy-content-item-left">
+							<u-image :src="item.cover_picture" width="160" height="150" border-radius="18"></u-image>
+						</view>
+						<view class="strategy-content-item-right">
+							<view class="strategy-content-item-right-title">{{item.title}}</view>
+							<view class="strategy-content-item-right-hubheading" v-if="item.subheading">
+								{{item.subheading}}
+							</view>
+						</view>
+					</view>
+
+					<u-loadmore :status="status" :load-text='loadText' @loadmore='loadmore' />
+				</scroll-view>
+			</view>
+		</view>
+
+		<view class="bottom-btn">
+			<view class="bottom-btn-boder">
+				<u-image src="/packages/packageCarecenter/static/msg.png" width="39" height="39"></u-image>
+				<u-button :custom-style="btnStyle" :hair-line="false" hover-class="none" open-type="contact">询问客服
+				</u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		weixin
+	} from '@/utils/weixin.js'
+	export default {
+		data() {
+			return {
+				paraType: {
+					"maternity": "月嫂",
+					"hospital": "医院",
+					"postpartumCare": "产后护理",
+					"confinement": "月子中心"
+				},
+				type: "confinement",
+				strategies: [],
+				select: {
+					page: 1,
+					page_size: 10,
+					call_logo: "confinement"
+				},
+				status: 'loadmore',
+				loadText: {
+					loadmore: '轻轻上拉或点击',
+					loading: '努力加载中',
+					nomore: '实在没有了'
+				},
+				btnStyle: {
+					border: 'none',
+					background: 'transparent',
+					color: '#fff',
+					width: '136rpx',
+					height: '48rpx',
+					fontSize: '34rpx',
+					fontWeight: 400,
+					marginLeft: '20rpx'
+				}
+			}
+		},
+		methods: {
+			toDetail(id) {
+				this.$u.throttle(() => {
+					uni.navigateTo({
+						url: `/packages/packageCarecenter/pages/careCenter/strategyDetail?id=${id}`
+					})
+				})
+			},
+			getStrategy() {
+				weixin.request({
+					newUrl: true,
+					api: '/api/member/get-strategy',
+					data: this.select,
+					utilSuccess: res => {
+						if (res.rows.length === 0) {
+							if (this.select.page > 1) {
+								this.select.page--
+								this.status = 'nomore'
+							}
+							return
+						}
+						this.strategies.push(...res.rows)
+						this.status = 'loadmore'
+						console.log(this.strategies);
+					}
+				})
+			},
+
+			loadmore(e) {
+				if (this.status === 'loadmore') {
+					this.select.page++
+					this.status = 'loading'
+					this.getStrategy()
+				}
+			}
+		},
+		computed: {
+
+		},
+		mounted() {},
+		onLoad(options) {
+			this.type = options.type;
+			this.select.call_logo = options.type;
+			uni.setNavigationBarTitle({
+				title: this.paraType[options.type] + '攻略'
+			});
+			this.getStrategy();
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.strategy {
+		background: linear-gradient(180deg, #FFEFF4 0%, #FFFFFF 100%);
+		border-radius: 40rpx;
+
+		margin: 37rpx 20rpx;
+
+		&-title {
+			display: flex;
+			align-items: center;
+
+			padding-top: 29rpx;
+			padding-left: 50rpx;
+
+			&-text {
+				font-weight: 400;
+				color: #333333;
+				font-size: 34rpx;
+
+				padding-left: 21rpx;
+			}
+		}
+
+		&-content {
+
+			margin-top: 44rpx;
+			padding: 0 50rpx;
+
+			&-item {
+				display: flex;
+				align-items: center;
+
+				margin-bottom: 30rpx;
+
+				&-right {
+					padding-left: 37rpx;
+
+					&-title {
+						font-weight: 400;
+						color: #333333;
+						font-size: 30rpx;
+						text-overflow: ellipsis;
+
+						padding: 11rpx 0;
+					}
+
+					&-subheading {
+						font-weight: 400;
+						color: #999999;
+						font-size: 24rpx;
+					}
+				}
+			}
+		}
+	}
+
+	.bottom-btn {
+		height: 136rpx;
+		background: #fff;
+		border-top: 1rpx solid rgba(180, 180, 180, 0.6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		&-boder {
+			width: 480rpx;
+			height: 89rpx;
+			border-radius: 45rpx;
+			background: #FF578A;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+		}
+	}
+
+	::v-deep .u-load-more-wrap {
+		padding: 10rpx 0;
+	}
 </style>
diff --git a/packages/packageCarecenter/pages/commonService/commonCenter.vue b/packages/packageCarecenter/pages/commonService/commonCenter.vue
new file mode 100644
index 0000000..861bff8
--- /dev/null
+++ b/packages/packageCarecenter/pages/commonService/commonCenter.vue
@@ -0,0 +1,751 @@
+<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>{{paraType[serviceSelect.type]}}攻略</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 {
+				paraType: {
+					"maternity": "月嫂",
+					"hospital": "医院",
+					"postpartumCare": "产后护理",
+					"confinement": "月子中心"
+				},
+				pageTitle: "月嫂",
+				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,
+					type: "maternity"
+				},
+				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?type='+this.serviceSelect.type
+					})
+				})
+			},
+			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-common-service',
+						data: {
+							sort_name: this.search.sort,
+							area: this.search.area,
+							...this.serviceSelect
+						},
+						utilSuccess: (res) => {
+							if (res.data.length > 0 && res.data) {
+								this.serviceList.push(...res.data)
+								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-common-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/commonService/serviceDetail?id=${id}`
+						})
+					}
+					if (this.tabIndex === 2) {
+						uni.navigateTo({
+							url: `/packages/packageCarecenter/pages/commonService/productDetail?id=${id}`
+						})
+					}
+				})
+			},
+
+			getStrategy() {
+				weixin.request({
+					newUrl: true,
+					api: '/api/member/get-strategy',
+					data: {
+						page: 1,
+						page_size: 5,
+						call_logo: this.serviceSelect.type
+					},
+					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() {
+
+		},
+		onLoad(options) {
+			this.serviceSelect.type = options.type;
+			uni.setNavigationBarTitle({
+				title: this.paraType[options.type]
+			});
+			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/commonService/productDetail.vue b/packages/packageCarecenter/pages/commonService/productDetail.vue
new file mode 100644
index 0000000..ff74f23
--- /dev/null
+++ b/packages/packageCarecenter/pages/commonService/productDetail.vue
@@ -0,0 +1,562 @@
+<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-common-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/commonService/serviceDetail.vue b/packages/packageCarecenter/pages/commonService/serviceDetail.vue
new file mode 100644
index 0000000..e29cfd4
--- /dev/null
+++ b/packages/packageCarecenter/pages/commonService/serviceDetail.vue
@@ -0,0 +1,847 @@
+<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" @click="showQR=true" 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: {
+					width: '100%',
+					color: '#fff',
+					background: '#FF578A',
+				},
+				user_info: {}
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: this.detail.name,
+				path: "packages/packageCarecenter/pages/commonService/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/commonService/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-common-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: center;
+
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+
+	::v-deep .u-image__image {
+		display: block !important;
+	}
+</style>
diff --git a/pages.json b/pages.json
index b930666..d00c33c 100644
--- a/pages.json
+++ b/pages.json
@@ -303,6 +303,30 @@
 		{
 			"root": "packages/packageCarecenter",
 			"pages": [
+				{
+					"path": "pages/commonService/commonCenter",
+					"style": {
+						"navigationBarTitleText": "服务列表",
+						"navigationBarBackgroundColor": "#FFFFFF"
+
+					}
+				},
+				{
+					"path": "pages/commonService/serviceDetail",
+					"style": {
+						"navigationBarTitleText": "商铺详情",
+						"navigationBarBackgroundColor": "#FFFFFF"
+
+					}
+				},
+				{
+					"path": "pages/commonService/productDetail",
+					"style": {
+						"navigationBarTitleText": "产品详情",
+						"navigationBarBackgroundColor": "#FFFFFF"
+
+					}
+				},
 
 				{
 					"path": "pages/careCenter/careCenter",