diff --git a/App.vue b/App.vue
index 8f0cb7e..ae008cb 100644
--- a/App.vue
+++ b/App.vue
@@ -1,12 +1,10 @@
-
diff --git a/packages/packageCarecenter/pages/careCenter/serviceDetail.vue b/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
index 860e14d..34a4ccd 100644
--- a/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
+++ b/packages/packageCarecenter/pages/careCenter/serviceDetail.vue
@@ -4,7 +4,7 @@
-
+
@@ -26,7 +26,8 @@
-
+
@@ -54,7 +55,7 @@
{{detail.address}}
-
+
@@ -82,8 +83,110 @@
label-color="#fff">
+
+
+
+
+
+
+
+
+ 孕育帮探店
+
+
+
+
+
+
+
+
+ {{item.label}}
+
+
+
+
+
+ {{item.label}}
+
+
+
+
+ 本店商品
+
+ 更多
+
+
+
+
+
+
+
+
+
+
+ {{item.name}}
+
+
+
+ {{label}}
+
+
+
+
+ ￥
+ {{item.price}}
+
+
+
+
+
+
+
+ 本店活动
+
+ 更多
+
+
+
+
+
+
+
+
+
+
+ 商户简介
+
+
+
+
+
+
+
+ {{item.name}}
+ {{item.content}}
+
+
+
+
+
+
+
+
+ 预约探店
+
@@ -95,10 +198,73 @@
data() {
return {
showFlag: 1,
- detail: {}
+ 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() {
+ const query = uni.createSelectorQuery().in(this);
+ query.select(".service-bar").boundingClientRect(res => {
+ this.barTop = res.top
+ }).exec();
+ for (let i = 0; i < this.bar.length; i++) {
+ query.select(this.bar[i].class).boundingClientRect(res => {
+ this.bar[i].height = res.top
+ }).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(",")
@@ -114,7 +280,6 @@
id
},
utilSuccess: (res) => {
- console.log(res);
this.detail = res
}
})
@@ -125,6 +290,20 @@
},
onLoad(option) {
this.getServiceDetail(option.id)
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.init()
+ })
+ },
+ onPageScroll(e) {
+ this.$u.throttle(() => {
+ if (e.scrollTop > this.barTop) {
+ this.barFixed = true
+ } else {
+ this.barFixed = false
+ }
+ }, 100)
}
}
@@ -158,7 +337,7 @@
color: #fff;
height: 47rpx;
background: #252526;
- border-radius: 16px;
+ border-radius: 16rpx;
opacity: 0.3;
display: flex;
align-items: center;
@@ -186,7 +365,7 @@
color: #fff;
height: 47rpx;
background: #252526;
- border-radius: 16px;
+ border-radius: 16rpx;
opacity: 0.3;
display: flex;
align-items: center;
@@ -211,10 +390,11 @@
}
.service-baseinfo {
- height: 917rpx;
width: 100%;
background: linear-gradient(90deg, #555455 0%, #1F1D1D 100%);
+ padding-bottom: 38rpx;
+
&-top {
display: flex;
@@ -266,8 +446,8 @@
&__item {
color: #fff;
counter-reset: #fff;
- border-radius: 12px;
- border: 2px solid #FF578A;
+ border-radius: 12rpx;
+ border: 2rpx solid #FF578A;
padding: 10rpx 20rpx;
margin-left: 10rpx;
@@ -325,6 +505,243 @@
&__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 {
+ 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 {
+
+ padding-bottom: 100rpx;
+ }
+
+ .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;
+ }
diff --git a/packages/packageCarecenter/static/huangguan.png b/packages/packageCarecenter/static/huangguan.png
new file mode 100644
index 0000000..9532a88
Binary files /dev/null and b/packages/packageCarecenter/static/huangguan.png differ
diff --git a/static/iconfont/iconfont.css b/static/iconfont/iconfont.css
new file mode 100644
index 0000000..f2dbf6d
--- /dev/null
+++ b/static/iconfont/iconfont.css
@@ -0,0 +1,71 @@
+@font-face {
+ font-family: "iconfont";
+ /* Project id 3656970 */
+ src: url('/static/iconfont/iconfont.woff2?t=1663572150648') format('woff2'),
+ url('/static/iconfont/iconfont.woff?t=1663572150648') format('woff'),
+ url('/static/iconfont/iconfont.ttf?t=1663572150648') format('truetype');
+}
+
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16rpx;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-lingdang:before {
+ content: "\e600";
+}
+
+.icon-weiyuyongpin:before {
+ content: "\e68b";
+}
+
+.icon-yinshuiji:before {
+ content: "\e69e";
+}
+
+.icon-dianshi:before {
+ content: "\e707";
+}
+
+.icon-bingxiang:before {
+ content: "\ec4f";
+}
+
+.icon-xiyiji:before {
+ content: "\ec78";
+}
+
+.icon-wifi:before {
+ content: "\e6a4";
+}
+
+.icon-jiashiqi:before {
+ content: "\e61e";
+}
+
+.icon-kongtiao:before {
+ content: "\e680";
+}
+
+.icon-chuifengji:before {
+ content: "\e6b6";
+}
+
+.icon-shuangluoxuanxinfengxitong:before {
+ content: "\e612";
+}
+
+.icon-shaoshuihu:before {
+ content: "\e7f2";
+}
+
+.icon-blood:before {
+ content: "\e918";
+}
+
+.icon-liangyijia:before {
+ content: "\e7a3";
+}
diff --git a/static/iconfont/iconfont.ttf b/static/iconfont/iconfont.ttf
new file mode 100644
index 0000000..fb77e33
Binary files /dev/null and b/static/iconfont/iconfont.ttf differ
diff --git a/static/iconfont/iconfont.woff b/static/iconfont/iconfont.woff
new file mode 100644
index 0000000..9f4729c
Binary files /dev/null and b/static/iconfont/iconfont.woff differ
diff --git a/static/iconfont/iconfont.woff2 b/static/iconfont/iconfont.woff2
new file mode 100644
index 0000000..37aa11d
Binary files /dev/null and b/static/iconfont/iconfont.woff2 differ