You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

500 lines
11 KiB

<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: '',
9 months ago
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 : ''
9 months ago
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({
7 months ago
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({
9 months ago
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>