wx-yunyubang-miniprogram/packages/packageCarecenter/pages/careCenter/serviceDetail.vue

<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>