wangyifang
/
wx-yunyubang-miniprogram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2022-9-20

Browse Source
master
271556543@qq.com 3 years ago
parent 02529662ab
commit f7da6e3370
3 changed files with 282 additions and 222 deletions
Show Stats Download Patch File Download Diff File

25
packages/packageCarecenter/pages/careCenter/careCenter.vue
Unescape View File

@ -74,14 +74,15 @@
<view v-if="item.recommend == 1" class="i_intro">推荐</view>
</view>
<view class="columnInfo">
<view class="title">{{item.name}}</view>
<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>{{distanceComputed(item.distance)}}</text>
<text>{{addressComputed(item.address)}}</text><text
v-if="item.distance">{{distanceComputed(item.distance)}}</text>
</view>
<view class="price"><text class="smallIcon">￥</text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp;
<text class="smallIcon">￥</text><text>45000</text>
@ -110,13 +111,13 @@
<view v-if="item.recommend == 1" class="i_intro">推荐</view>
</view>
<view class="columnInfo">
<view class="title">{{item.name}}</view>
<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>{{item.service.name}}</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>
<!-- &nbsp;&nbsp;-&nbsp;&nbsp;
<text class="smallIcon">￥</text><text>{{item.price}}</text> -->
@ -240,9 +241,23 @@
}
},
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&&(address.length > 12)) {
if (!address) {
return '无'
}
if (address && (address.length > 12)) {
return address.slice(0, 11) + '..'
}
return address

140
packages/packageCarecenter/pages/careCenter/productDetail.vue
Unescape View File

@ -1,92 +1,98 @@
<template>
<view>
<view class="product-picture">
<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="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-price">
￥ <span style="font-size: 34rpx;">{{detail.price}}</span>
</view>
<view class="product-picture-num">
{{swiperIndex}} / {{detail.confinement_picture.length}}
</view>
</view>
<view class="product-info">
<view class="product-info-name">
{{detail.name}}
<view class="product-price u-skeleton-rect">
￥ <span style="font-size: 34rpx;">{{detail.price}}</span>
</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 class="product-info">
<view class="product-info-name u-skeleton-rect">
{{detail.name}}
</view>
</view>
<view class="product-info-shop">
<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 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-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 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-arrow" @click="toMap">
<u-icon name="arrow-right" size="25" color="#A0A0A0"></u-icon>
<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>
<view class="combo">
<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.name}}</view>
<view class="combo-content-item-content">{{item.content}}</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.name}}</view>
<view class="combo-content-item-content">{{item.content}}</view>
</view>
</view>
</view>
</view>
<view class="facility">
<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 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%;">
<u-parse :html="detail.content"></u-parse>
</view>
</view>
<view v-html="detail.content"></view>
<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
</view>
</template>
@ -97,6 +103,7 @@
export default {
data() {
return {
loading: true,
swiperIndex: 1,
detail: {},
}
@ -133,6 +140,7 @@
},
utilSuccess: (res) => {
this.detail = res
this.loading = false
console.log(res);
}
})

339
packages/packageCarecenter/pages/careCenter/serviceDetail.vue
Unescape View File

@ -1,192 +1,204 @@
<template>
<view>
<view class="service-show">
<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.throttle(init)">
</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-image :src="detail.cover_picture" height="122rpx" width="122rpx" shape="circle"
@load="$u.throttle(init)">
</u-image>
</view>
<view class="service-baseinfo-top-right">
<view class="service-baseinfo-top-right__name">{{detail.name}}</view>
<view class="service-baseinfo-top-right__sub">
{{detail.subheading}}
<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>
</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 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-center-address">
<view class="service-baseinfo-center-address__pic">
<u-image mode="asseptFit" src="/packages/packageCarecenter/static/position.png" height="26rpx"
width="26rpx">
<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-center-address__text">
{{detail.address}}
</view>
<view class="service-baseinfo-center-address__icon" @click="toMap">
<u-icon name="arrow-right" size="26" color="#9C9C9C"></u-icon>
<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-time">
<view class="service-baseinfo-center-time__pic">
<u-image src="/packages/packageCarecenter/static/clock.png" height="26rpx" width="26rpx">
</u-image>
</view>
<view class="service-baseinfo-center-time__text">
{{detail.work_time}}
<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>
<view class="service-baseinfo-center-service">
<view class="service-baseinfo-center-service__pic">
<u-image src="/packages/packageCarecenter/static/wechat.png" height="43rpx" width="50rpx">
</u-image>
<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-service__text">
人工客服
<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__icon">
<u-icon name="arrow-right" size="26" color="#fff" label="联系客服" label-pos="left"
label-color="#fff"></u-icon>
<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>
<view class="service-baseinfo-center-store">
<u-image :src="detail.cover_picture" mode="aspectFill" height="397" width="100%" border-radius="30"
@load="$u.throttle(init)">
</u-image>
<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 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>
<view class="service-bar" v-if="!barFixed">
<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 class="service-bar-item-icon" src="/packages/packageCarecenter/static/img_qiehuan.png"
width="68" height="24" v-show="index === barIndex"></u-image>
<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>
<view class="service-bar service-bar-fixed" v-else>
<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 class="service-bar-item-icon" src="/packages/packageCarecenter/static/img_qiehuan.png"
width="68" height="24" v-show="index === barIndex"></u-image>
<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>
<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 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>
<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.throttle(init)">
</u-image>
<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-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 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>
<view class="service-product-detail-item-price">
<span>￥</span>
<span>{{item.price}}</span>
<view class="service-product-detail-item-price">
<span>￥</span>
<span>{{item.price}}</span>
</view>
</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 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 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 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>
<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 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>
<view class="service-imageinfo" v-html="detail.content">
</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 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>
@ -197,6 +209,7 @@
export default {
data() {
return {
loading: true,
showFlag: 1,
barIndex: 0,
barTop: 667,
@ -231,13 +244,15 @@
},
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
this.bar[i].height = res.top - (barHeight - 20)
}).exec();
}
},
@ -281,29 +296,32 @@
},
utilSuccess: (res) => {
this.detail = res
this.loading = false
}
})
}
},
computed: {
},
onLoad(option) {
this.getServiceDetail(option.id)
},
mounted() {
this.$nextTick(() => {
this.init()
})
},
onLoad(option) {
this.getServiceDetail(option.id)
},
onPageScroll(e) {
console.log(e);
this.$u.throttle(() => {
if (e.scrollTop > this.barTop) {
this.barFixed = true
} else {
this.barFixed = false
}
}, 100)
}, 50)
}
}
</script>
@ -417,15 +435,17 @@
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-left: 10rpx;
margin-top: 9rpx;
}
}
@ -456,11 +476,18 @@
&-address {
display: flex;
align-items: center;
margin-top: 34rpx;
padding: 0 36rpx;
&__img {}
&__img {
display: flex;
align-items: center;
justify-content: center;
width: 26rpx;
height: 26rpx;
}
&__text {
flex: 1;
@ -473,11 +500,18 @@
&-time {
display: flex;
align-items: center;
margin-top: 15rpx;
padding: 0 36rpx;
&__img {}
&__img {
width: 26rpx;
height: 26rpx;
display: flex;
align-items: center;
justify-content: center;
}
&__text {
flex: 1;
@ -552,6 +586,8 @@
margin-top: -20rpx;
&-fixed {
border-bottom: 1rpx solid rgba(180, 180, 180, 0.4);
z-index: 4;
position: fixed;
top: 0;
@ -723,6 +759,7 @@
}
.service-imageinfo {
width: 100%;
padding-bottom: 100rpx;
}

Write Preview
Loading…
Cancel
Save