|
|
<template>
|
|
|
<view class="page safe-area-inset-bottom">
|
|
|
<!-- <image class="bkg" src="~@/package_sub/static/ServiceDetail/bkg.png" mode="aspectFill"></image> -->
|
|
|
<view class="bkg">
|
|
|
<u-swiper :height="316" img-mode="scaleToFill" mode="none" border-radius="0" :list="info.images" name="url"></u-swiper>
|
|
|
|
|
|
</view>
|
|
|
<view class="container">
|
|
|
<view class="card detail">
|
|
|
<view class="detail__text">
|
|
|
{{info.introduce || ' '}}
|
|
|
</view>
|
|
|
<view class="detail__price">
|
|
|
<text class="detail__price--number">{{info.price}}</text>
|
|
|
<text class="detail__price--text">元起</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="tab">
|
|
|
<view v-for="(item, index) in ['服务内容','预约须知']" :key="index" class="tab-item"
|
|
|
:class="{ 'is-active': index === currentTab }" @click="$u.throttle(() => currentTab = index)">
|
|
|
{{ item }}
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
<view v-show="currentTab === 0">
|
|
|
<!-- <view class="card for-people">
|
|
|
<view class="card__title">
|
|
|
适用人群
|
|
|
</view>
|
|
|
|
|
|
<view class="for-people__content block">
|
|
|
<view class="block-item">
|
|
|
|
|
|
<view class="block-item__text">
|
|
|
<u-parse :html="info.content"></u-parse>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
<view class="service-flow card">
|
|
|
<view class="card__title">
|
|
|
服务流程
|
|
|
</view>
|
|
|
|
|
|
<view class="service-flow__content">
|
|
|
<u-parse :html="info.flow_content"></u-parse>
|
|
|
<!-- <view class="dot-line" />
|
|
|
<view class="content-panel">
|
|
|
<image class="db-arrow-down" src="~@/package_sub/static/ServiceDetail/db-arrow-down.png" mode="aspectFit"></image>
|
|
|
<view class="content-panel__section">
|
|
|
请至少提前2小时预约，以便平台安排合适的陪诊师;
|
|
|
</view>
|
|
|
<view class="content-panel__section">
|
|
|
提交预约申请后，请添加客服专员，以便及时与您沟通服务进展;
|
|
|
</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="cost-description card">
|
|
|
<view class="card__title">
|
|
|
注意事项
|
|
|
</view>
|
|
|
|
|
|
<ul class="cost-description__content">
|
|
|
<u-parse :html="info.price_content"></u-parse>
|
|
|
<!-- <li v-for="i in 7" :key="i">
|
|
|
本服务含医院内半天(不超过4小时)陪诊服务，仅限单个医院不含治疗检查、饮食、交通等费用;
|
|
|
</li> -->
|
|
|
</ul>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-show="currentTab === 1">
|
|
|
<view class="card for-people">
|
|
|
<view class="for-people__content block">
|
|
|
<view class="block-item">
|
|
|
<!-- <image class="block-item__img" src="~@/static/index/honor-title.png" mode="aspectFit">
|
|
|
</image> -->
|
|
|
|
|
|
<view class="block-item__text">
|
|
|
<u-parse :html="info.appoint_content"></u-parse>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<u-button class="btn" shape="circle" ripple @click="toOrder(info)" :custom-style="orderBtnStyle">立即预约</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
id: '',
|
|
|
choose_site:'',
|
|
|
site_name:'',
|
|
|
currentTab: 0,
|
|
|
info: {},
|
|
|
orderBtnStyle: {
|
|
|
'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
|
|
|
'font-weight': '500',
|
|
|
'font-size': '28rpx',
|
|
|
'color': '#fff',
|
|
|
'width': '436rpx',
|
|
|
'margin-top': '32rpx'
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: option.title ?? "服务项目"
|
|
|
});
|
|
|
this.id = option.id ? option.id : ''
|
|
|
this.choose_site = option.choose_site?option.choose_site:''
|
|
|
this.site_name = option.site_name?option.site_name:''
|
|
|
this.getDetail(this.id)
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
token() {
|
|
|
return this.vuex_token || uni.getStorageSync('lifeData')?.vuex_token
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async getDetail(id) {
|
|
|
await this.$u.api.accompanyProductDetail({
|
|
|
id: id,
|
|
|
site_id:this.choose_site
|
|
|
}).then(res=>{
|
|
|
console.log("res", res)
|
|
|
this.info = res
|
|
|
})
|
|
|
|
|
|
},
|
|
|
toOrder(info) {
|
|
|
if (!this.token) {
|
|
|
uni.showModal({
|
|
|
title: "提示",
|
|
|
content: "请先登录再下单",
|
|
|
confirmText: "登录",
|
|
|
success: (status) => {
|
|
|
if (status.confirm) {
|
|
|
this.$u.route({
|
|
|
url: '/pages/login/login',
|
|
|
type: 'redirect'
|
|
|
})
|
|
|
} else {
|
|
|
|
|
|
}
|
|
|
},
|
|
|
fail: () => {},
|
|
|
});
|
|
|
return
|
|
|
}
|
|
|
this.$u.route({
|
|
|
url: '/package_sub/pages/AddOrder/AddOrder?id='+info.id+'&site_name='+this.site_name+'&site_id='+this.choose_site+'&type='+info.type+'&can_multi_num='+info.can_multi_num
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
page {
|
|
|
background: #f4efee;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
|
|
|
.bkg {
|
|
|
height: 316rpx;
|
|
|
width: 100vw;
|
|
|
z-index: 0;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
z-index: 1;
|
|
|
position: relative;
|
|
|
padding-top: 250rpx;
|
|
|
|
|
|
.card {
|
|
|
border-radius: 10rpx;
|
|
|
filter: drop-shadow(2.192px 4.494px 5px rgba(33, 32, 32, 0.15));
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
&__title {
|
|
|
display: inline-block;
|
|
|
font-size: 28rpx;
|
|
|
color: #ca2328;
|
|
|
font-weight: bold;
|
|
|
position: relative;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 139rpx;
|
|
|
height: 5rpx;
|
|
|
border-radius: 3px;
|
|
|
left: -28rpx;
|
|
|
top: 50%;
|
|
|
transform: translate(-100%, -50%);
|
|
|
background: linear-gradient(to left, #ca2328, #ffffff00);
|
|
|
}
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 139rpx;
|
|
|
height: 5rpx;
|
|
|
border-radius: 3px;
|
|
|
right: -28rpx;
|
|
|
top: 50%;
|
|
|
transform: translate(100%, -50%);
|
|
|
background: linear-gradient(to right, #ca2328, #ffffff00);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.detail {
|
|
|
margin: 0 24rpx;
|
|
|
padding: 26rpx 22rpx;
|
|
|
|
|
|
&__text {
|
|
|
text-indent: 48rpx;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 1.5;
|
|
|
color: #929196;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
&__price {
|
|
|
margin-top: 24rpx;
|
|
|
color: #c20d12;
|
|
|
padding-left: 16rpx;
|
|
|
|
|
|
&--number {
|
|
|
font-weight: 500;
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
|
|
|
&--text {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tab {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 60rpx;
|
|
|
margin-top: 38rpx;
|
|
|
|
|
|
&-item {
|
|
|
font-size: 28rpx;
|
|
|
color: #666;
|
|
|
transition: all .1s;
|
|
|
}
|
|
|
|
|
|
.tab-item+.tab-item {
|
|
|
margin-left: 60rpx;
|
|
|
}
|
|
|
|
|
|
.is-active {
|
|
|
color: #000;
|
|
|
font-weight: 600;
|
|
|
font-size: 32rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: -20rpx;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 58rpx;
|
|
|
height: 4rpx;
|
|
|
border-radius: 2rpx;
|
|
|
background-color: #ca2328;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.for-people {
|
|
|
margin: 54rpx 24rpx 0;
|
|
|
padding: 46rpx 30rpx;
|
|
|
|
|
|
|
|
|
&__content {
|
|
|
margin-top: 46rpx;
|
|
|
}
|
|
|
|
|
|
.block {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
&-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 60rpx;
|
|
|
flex-basis: calc((100% - 64rpx) / 2);
|
|
|
|
|
|
&__img {
|
|
|
width: 62rpx;
|
|
|
height: 70rpx;
|
|
|
}
|
|
|
|
|
|
&__text {
|
|
|
font-size: 24rpx;
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
margin-left: 16rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.block-item:nth-child(2n) {
|
|
|
margin-left: 64rpx;
|
|
|
}
|
|
|
|
|
|
.block-item:nth-last-child(1) {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.block-item:nth-last-child(2) {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-flow {
|
|
|
margin: 34rpx 24rpx 0;
|
|
|
padding: 45rpx 20rpx 34rpx 28rpx;
|
|
|
|
|
|
&__content {
|
|
|
margin-top: 18rpx;
|
|
|
|
|
|
$dot-bkgs: linear-gradient(0deg, #ebb6b6 0%, #f7d8ba 99%, #f7d8ba 100%),
|
|
|
linear-gradient(0deg, #edbd97 0%, #e4de9f 100%, #e4de9f 100%),
|
|
|
linear-gradient(0deg, #8fa9e3 0%, #a3d9fb 100%),
|
|
|
linear-gradient(0deg, #e3c2f7 0%, #e3c2f7 1%, #c7ccfb 100%),
|
|
|
linear-gradient(0deg, #f99ea2 0%, #f4d4fa 100%);
|
|
|
$dot-border: #f7d8ba,
|
|
|
#e4de9f,
|
|
|
#a3d9fb,
|
|
|
#c7ccfb,
|
|
|
#f4d4fa;
|
|
|
$panel-bkgs: linear-gradient(0deg, #fde5e5b3 0%, #fdf7f1b3 100%),
|
|
|
linear-gradient(0deg, #fdede1b3 0%, #fbfbefb3 100%),
|
|
|
linear-gradient(0deg, #e5e7f7b3 0%, #f3fbfdb3 100%),
|
|
|
linear-gradient(0deg, #f5e7fdb3 0%, #f0f1fcb3 100%),
|
|
|
linear-gradient(0deg, #fde5e5b3 0%, #f9f4fcb3 100%);
|
|
|
|
|
|
.dot-line {
|
|
|
float: left;
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-radius: 100%;
|
|
|
z-index: 2;
|
|
|
position: relative;
|
|
|
top: 8rpx;
|
|
|
left: 8rpx;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
width: 22rpx;
|
|
|
height: 22rpx;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 100%;
|
|
|
border: 2rpx solid;
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@for $index from 1 through length($dot-bkgs) {
|
|
|
&:nth-child(#{$index+1}n) .dot-line {
|
|
|
background: nth($dot-bkgs, $index);
|
|
|
|
|
|
&::after {
|
|
|
border-color: nth($dot-border, $index);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&:nth-child(#{$index+1}n) .content-panel {
|
|
|
background: nth($panel-bkgs, $index);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&:nth-child(2) .content-panel:before {
|
|
|
top: 10rpx !important;
|
|
|
}
|
|
|
|
|
|
.content-panel {
|
|
|
border-radius: 5px;
|
|
|
margin-left: 40rpx;
|
|
|
padding: 24rpx 8rpx 24rpx 32rpx;
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
width: 2rpx;
|
|
|
opacity: .2;
|
|
|
background-color: #666666;
|
|
|
|
|
|
z-index: 1;
|
|
|
position: absolute;
|
|
|
top: -18rpx;
|
|
|
left: calc(-40rpx + 15rpx);
|
|
|
bottom: 0;
|
|
|
}
|
|
|
|
|
|
.db-arrow-down {
|
|
|
width: 98rpx;
|
|
|
height: 103rpx;
|
|
|
position: absolute;
|
|
|
right: 20rpx;
|
|
|
bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
&__section {
|
|
|
font-size: 24rpx;
|
|
|
line-height: 40rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 8rpx;
|
|
|
height: 8rpx;
|
|
|
border-radius: 100%;
|
|
|
background-color: #7a7a7a;
|
|
|
top: 16rpx;
|
|
|
left: -16rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cost-description {
|
|
|
margin: 22rpx 24rpx 0;
|
|
|
padding: 45rpx 20rpx 34rpx 28rpx;
|
|
|
|
|
|
&__content {
|
|
|
margin-top: 50rpx;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 40rpx;
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
position: relative;
|
|
|
|
|
|
&>li {
|
|
|
margin-left: 36rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
width: 8rpx;
|
|
|
height: 8rpx;
|
|
|
border-radius: 100%;
|
|
|
background-color: #7a7a7a;
|
|
|
position: absolute;
|
|
|
left: -26rpx;
|
|
|
top: calc(20rpx - 4rpx);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&>li+li {
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
margin: 32rpx auto 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
