parent
155d3b4b0e
commit
f0f15a5822
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
weixin
|
||||
} from '@/utils/weixin.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getProductDetail(id) {
|
||||
weixin.request({
|
||||
newUrl: true,
|
||||
api: '/api/member/get-confinement-product-item',
|
||||
data: {
|
||||
id
|
||||
},
|
||||
utilSuccess: (res) => {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getProductDetail(option.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,330 @@
|
||||
<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">
|
||||
</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">
|
||||
</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>
|
||||
</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">
|
||||
<view class="service-baseinfo-center-address__pic">
|
||||
<u-image mode="asseptFit" src="/packages/packageCarecenter/static/position.png" height="26rpx"
|
||||
width="26rpx">
|
||||
</u-image>
|
||||
</view>
|
||||
<view class="service-baseinfo-center-address__text">
|
||||
{{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__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>
|
||||
</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>
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
weixin
|
||||
} from '@/utils/weixin.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showFlag: 1,
|
||||
detail: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
featuredLabelSplit(res) {
|
||||
if (res) {
|
||||
return res.split(",")
|
||||
}
|
||||
return []
|
||||
},
|
||||
|
||||
getServiceDetail(id) {
|
||||
weixin.request({
|
||||
newUrl: true,
|
||||
api: '/api/member/get-confinement-service-item',
|
||||
data: {
|
||||
id
|
||||
},
|
||||
utilSuccess: (res) => {
|
||||
console.log(res);
|
||||
this.detail = res
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getServiceDetail(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: 16px;
|
||||
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: 16px;
|
||||
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 {
|
||||
height: 917rpx;
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #555455 0%, #1F1D1D 100%);
|
||||
|
||||
&-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;
|
||||
}
|
||||
|
||||
&__sub {
|
||||
background: #FF578A;
|
||||
border-radius: 12rpx;
|
||||
color: #fff;
|
||||
|
||||
padding: 6rpx 11rpx;
|
||||
margin-left: 10rpx;
|
||||
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: 12px;
|
||||
border: 2px solid #FF578A;
|
||||
|
||||
padding: 10rpx 20rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&-address {
|
||||
display: flex;
|
||||
|
||||
margin-top: 34rpx;
|
||||
padding: 0 36rpx;
|
||||
|
||||
&__img {}
|
||||
|
||||
&__text {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-time {
|
||||
display: flex;
|
||||
|
||||
margin-top: 15rpx;
|
||||
padding: 0 36rpx;
|
||||
|
||||
&__img {}
|
||||
|
||||
&__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 {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 654 B |
|
After Width: | Height: | Size: 384 B |
|
After Width: | Height: | Size: 795 B |
|
After Width: | Height: | Size: 417 B |
|
After Width: | Height: | Size: 998 B |
Loading…
Reference in new issue