nurseWeChatAppletUI/pages/ProjectDetails/ProjectDetails.vue

<template>
	<view class="app">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" indicator-color='#fff' indicator-active-color='#0086d6' :autoplay="autoplay"
			:interval="3000" :duration="1500" class="swiper-box" :circular='true' @change="swiperChange">
			<swiper-item v-for="(item ,index) in lbinfo" :key="index">
				<view class="swiper-item" v-show="!splits(item)" wx-if="{item}">
					<image v-if="item" :src="item" mode="widthFix"></image>
				</view>
				<view class="swiper-item" v-show="splits(item)" v-if="item">
					<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
						object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
						show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true' enable-play-gesture
						auto-pause-if-open-native show-mute-btn></video>
				</view>
			</swiper-item>
		</swiper>
		<!-- <u-swiper v-if="lbinfo" :list="lbinfo" height="350" style='background-size: 100%;' mode='none'></u-swiper> -->
		<view class="item">
			<view class="text" v-if='list.nurseItemName'>{{list.nurseItemName}}
			</view>
			<view class="text" v-else>暂无
			</view>
			<view class="classtype">
			</view>
			<!-- <view class="pingfen">
			<u-rate :count="5" value="2"></u-rate>
		</view> -->
		</view>
		<!-- 		<view class="Consumablespackage" v-if='list.itemConsumableList'>耗材包详情:
			<span>￥{{list.consumableTotalPrice==null?'0':list.consumableTotalPrice}}</span>
			<view class="detail" v-for='(item,index) in list.itemConsumableList' :key="index">
				·{{item.consumableDetail}}
				<span>{{item.consumableCount}}{{item.consumableUnit}}/￥{{item.consumablePrice}}</span>
			</view>
		</view> -->
		<view class="detailtitle">
			<view class="Introduction">服务详情:</view>
			<!-- <u-parse :html="list.nurseItemContent"></u-parse> -->
			<view class="textInfo" v-if="list.nurseItemContent" v-html="list.nurseItemContent">
			</view>
		</view>
		<view class="bottomcontent">
			<view class="appoinprice" v-if="list.totalPrice">
				￥{{list.totalPrice}}
			</view>
			<view class="appointment" @tap.stop='goappointments(item)'>立即预约</view>
		</view>
		<u-toast ref="uToast" />
		<u-mask :show="usershow" class='mask'>
			<view class="information">
				<image src="../../static/information.png" mode=""></image>
				<view class="title">
					请完善个人信息
				</view>
				<view class="cancel" @tap='usershow=false'>
					取消
				</view>
				<view class="determine" @tap='goinformation'>
					去完善
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	import {
		AppIdentification
	} from '@/api/AppIdentification/index.js'
	import baseurl from '@/api/baseurl.js'
	import {
		getAppStationItemInfo
	} from '@/api/ProjectDetails/index.js'
	export default {
		data() {
			return {
				lbinfo: [], //轮播
				autoplay: true, //自动切换轮播图
				videoContext: '',
				baseurl: '',
				orderNo: '',
				usershow: false, //完善信息开关
				list: {}, //护理站list
				timer: null,
				stationId: null,
				stationItemId: null,
				stationItemPriceId: null,
			}
		},
		onLoad(options) {
			this.stationId = options.stationId
			this.stationItemId = options.stationItemId
			this.stationItemPriceId = options.stationItemPriceId
		},
		onShow() {
			this.baseurl = baseurl
			this.usershow = false
			// 耗材包详情方法调用
			this.getlist(this.stationId, this.stationItemId, this.stationItemPriceId)
		},
		methods: {
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail
				this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
				//只有手动切换时开始轮播，并且上一页视频暂停
				if (source === 'touch') {
					this.videoContext.pause(); //暂停
					this.autoplay = true
				}
			},
			// 获取数据
			GetBanner() {},
			// 处理banner返回的是是视频还是图片
			splits(url) {
				if (url.indexOf('.') != -1) {
					var ext = url.substring(url.lastIndexOf('.') + 1);
					return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
				}
			},
			// 点击开始/继续播放
			play() {
				this.autoplay = false
				// this.videoContext.requestFullScreen()
			},
			// 视频暂停
			pause() {
				this.autoplay = true
			},
			// 视频结束
			ended() {
				this.autoplay = true
			},
			//预约
			goappointments() {
				let that = this
				const value = uni.getStorageSync('openid');
				const value2 = uni.getStorageSync('patientId');
				if (value && value2) {
					AppIdentification(value2).then(res => {
						if (res.code == 200) {
							if (res.data.loginFlag) {
								that.usershow = false
								uni.navigateTo({
									url: `/pages/appointmenttime/appointmenttime?stationId=${this.stationId}&stationItemId=${this.stationItemId}&stationItemPriceId=${this.stationItemPriceId}`,
								})
							} else {
								that.usershow = true
							}
						} else if (res.code == 9999) {} else {
							that.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								url: '/pages/login/login'
							})
						}
					})
				} else {
					that.$refs.uToast.show({
						title: '未登录,请先登录',
						type: 'error',
						url: '/pages/login/login'
					})
				}
			},
			//跳转完善页面
			goinformation() {
				this.usershow = false
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			// 信息
			getlist(stationId, stationItemId, stationItemPriceId) {
				this.lbinfo = []
				getAppStationItemInfo(stationId, stationItemId, stationItemPriceId).then(res => {
					if (res.data.nurseItemContent) {
						res.data.nurseItemContent = res.data.nurseItemContent.replace(/\<img/gi,
							"<br/> <img class='richPic'")
					}
					if (res.data.poserInfoList.length >= 1) {
						res.data.poserInfoList.forEach(e => {
							e.image = baseurl + e.posterPictureUrl
							this.lbinfo.push(e.image)
						})
						if (res.data.poserInfoList[0].video) {
							res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0].posterVideoUrl
							this.lbinfo.push(res.data.poserInfoList[0].video)
						}
					} else {
						this.lbinfo.push(this.baseurl + res.data.itemPictureUrl)
					}
					this.list = res.data
				})
			},
		},
		//1.分享给朋友
		onShareAppMessage(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '泉医到家',
				path: url,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '泉医到家',
				path: url,
			}
		},
	}
</script>

<style lang="scss">
	@import './ProjectDetails.scss';
</style>