bolinscreening-miniapp/pages/chart/index.vue

<template>
	<div>
		<div class="chart-1">
			<div class="chart-title">
				<span>眼轴</span>
				<i class="iconfont icon-wenhao" @click="onOpenPopup('眼轴')"></i>
			</div>
			<canvas
				canvas-id="canvasLineA"
				id="canvasLineA"
				class="charts"
				:width="cWidth"
				:height="cHeight"
				:style="{ width: cWidth + 'px', height: cHeight + 'px' }"
				@touchstart="touchLineA"
				@touchmove="moveLineA"
				@touchend="touchEndLineA"
			></canvas>
		</div>
		<div class="line"></div>
		<!-- 名词解释弹窗 -->
		<uni-popup ref="popupShow" type="bottom">
			<div class="popup-content">
				<span class="close-btn" @click="$refs.popupShow.close()"><i class="iconfont icon-quxiaoguanbi"></i></span>
				<div class="bl-describe-con">
					<div class="describe-title">名词解释</div>
					<div class="describe-box">
						<div class="describe-tag">
							<span>
								<i>{{ popupData.title }}</i>
							</span>
						</div>
						<img v-if="popupData.img" class="describe-img" :src="baseUrl + '/device/' + popupData.img" />
						<scroll-view scroll-y="true" class="describe-text">
							<div v-html="popupData.content"></div>
						</scroll-view>
					</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import methods from './methods.js';
import uniPopup from '@/components/uni-popup/uni-popup';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			imgUrl: '',
			baseUrl: '',
			cWidth: '',
			cHeight: '',
			patientId: '',
			data: '',
			popupData: {
				title: '',
				img: '',
				content: ''
			},
		};
	},
	onLoad(options) {
		let app = getApp();
		this.imgUrl = app.globalData.imgUrl;
		this.baseUrl = app.globalData.baseUrl;
		this.patientId = options.id;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(600);
		this.inData();
	},
	onShow() {},
	methods: {
		...methods
	}
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>