siyu_app/pages/user/tongue/index.nvue

<template>
	<view class="live-pusher-box" :style="{width: width + 'px',height: height + 'px'}"> 
		<!-- <live-pusher id="livePusher" ref="livePusher" mode="FHD" beauty="0" whiteness="0"
			device-position="back" :auto-focus="true" :muted="true" :enable-camera="true" :enable-mic="true"
			:zoom="true" :style="{flex: 1 ,width: width + 'px',display:'none'}"  >
		</live-pusher> -->
		
		<Ba-CameraView ref="cameraView" :load="loadData" v-if="isShowCamera" :style="{flex: 1,width: width + 'px',display:'none'}" >
		
		</Ba-CameraView>
		
		<cover-view class="cover-view" :style="{width: width + 'px'}">
			<cover-view class="uni-nav-bar" :style="{width: width + 'px'}">
				<cover-view :style="{height: statusBarHeight,width: width + 'px'}"></cover-view>
				<cover-view class="uni-nav-barbox" :style="{width: width + 'px'}">
					<cover-image class="uni-nav-back" src="@/static/image/ai_right_icon.png" mode="aspectFill" @click="back"></cover-image>
					<cover-view class="flex-center">
						<cover-view class="uni-nav-title" @click="navTo()">
							<text class="uni-nav-title-t">使用教程</text>
							<cover-image class="ques" :src="baseUrl+'/images/ques.png'" mode="aspectFill"></cover-image>
						</cover-view>
						<!-- #ifdef APP-PLUS -->
						<cover-view class="uni-nav-title" style="margin-left: 20rpx;" @click="goShare">
							<text class="uni-nav-title-t">分享</text>
							<cover-image class="ques" src="@/static/images/white-share.png" mode="aspectFill"></cover-image>
						</cover-view>
						<!-- #endif -->
					</cover-view>
				</cover-view>
			</cover-view>
			
			<text class="title" :style="{marginTop: marginTop + 'px'}" @click="startPreview">请拍摄舌面</text>
			<text class="tips">舌尖放松，舌面平展，舌尖略向下，口张大不要太用力</text>
			<cover-view class="imagebox" :style="{width: width + 'px'}">
				<cover-image class="tongue" src="@/static/images/tongue.png"  mode="aspectFill"></cover-image>
			</cover-view>
		</cover-view>
	
		<!-- 分享弹窗 -->
		<view>
			<u-popup :show="showShare" @close="showShare = false" >
				<share-box :shareItem="shareItem" :operate="operate" @closeShare='showShare = false' ></share-box>
			</u-popup>
		</view>
		<view class="camera-footer" id="camera-footer" :style="{width: width + 'px'}">
			<view class="usenum">
				<text class="usenum-t">当前可免费试用</text>
				<text class="usenum-t" style="color: #F54D04;padding: 0;">{{counts || 0}}</text>
				<text class="usenum-t">次</text>
			</view>
			<view class="camera-options" :style="{width: width + 'px'}">
				<view class="camera-options-left camera-item" @click="handleAlbum">
					<image :src="baseUrl+'/images/album_icon.png'" mode="scaleToFill" style="width: 65rpx;height:60rpx;margin-bottom: 21rpx;"></image>
					<text class="camera-item-t">相册上传</text>
				</view>
				<view class="camera-options-center camera-item" @click="handleShutter">
					<view class="photograph-btn"></view>
				</view>
				<view class="camera-options-ritht camera-item" @click="handleReversal">
					<image :src="baseUrl+'/images/tongue_info.png'" mode="scaleToFill" style="width: 67rpx;height:60rpx;margin-bottom: 21rpx;"></image>
					<text class="camera-item-t">切换摄像头</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import shareBox from "@/components/share-box/share-boxN.vue"
	import {getCount} from '@/api/healthTongue.js'
	import { premissionCheck } from "@/js_sdk/wa-permission/permission.js"
	// 这个组件仅限APP使用！！！
	export default {
		components: {
			shareBox
		},
		data() {
			return {
				baseUrl:uni.getStorageSync('requestPath'),
				height: uni.getSystemInfoSync().screenHeight,
				width: uni.getSystemInfoSync().screenWidth,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				livePusher: null,
				ready: true,
				cameraHeight: '', //相机画面宽度
				coverImage: null,
				counts: 0,
				marginTop: uni.getSystemInfoSync().statusBarHeight + uni.upx2px(130),
				device: 'back',
				cameraContext: null,
				shutterShow: false,
				menuLeft: '100%',
				loadData: { //配置
				    isToast: false,
					isShowVibrate:false,
				},
				liveDisplay:"none",
				showShare:false,
				shareItem:{ imageUrl:"",title:"",path:"",isMini:true },
				operate: ['WXSceneSession','WXSceneTimeline'],
				isShowCamera:false,
			}
		},
		created(){
			let that=this;
			uni.$on('navigateBack', function(data) {
				that.handleReversal();
			});
		},
		onLoad() {
			this.getCount();
			if(!plus.runtime.isAgreePrivacy()) {
				 uni.showToast({title: "请同意隐私政策",icon: "none"});
				 return;
			}	
			this.requestPressmition();
		},
		onUnload() {
			uni.$off('navigateBack');
		},
		onReady() {
			
		},
		methods: {
			navTo() {
				uni.navigateTo({
					url: "/pages/user/tongue/ques"
				})
			},
			goShare() {
				// #ifdef APP-PLUS
				this.shareItem.title= "AI舌诊";
				this.shareItem.imageUrl="/static/image/home1/icon/aiTongue.png";
				this.shareItem.isMini=true;
				this.shareItem.path='/pages_user/tongue/index';
				let cdn=uni.getStorageSync('h5Path');
				this.shareItem.url=cdn+'/pages/user/tongue/index';
				this.showShare=true;
				// #endif
			},
			getCount(){
				getCount().then(
					res => {
						if(res.code==200){
							this.counts=res.data;
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			startPreview() {
				this.livePusher.startPreview({
					success: () => {
						switch (plus.os.name) {
							case 'Android':
								break;
							case 'iOS':
								this.livePusher.switchCamera()
								break
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			// 返回
			back(){
				uni.navigateBack();
			},
			// 快门
			handleShutter() {
				if (this.ready) {
					this.ready = false;
					let options={scaleW:403,scaleH:620,isCrop:false};
				    this.$refs.cameraView.takePicture((res) => {
						  this.ready = true;
						  const filePath=res.data.path;
						  plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
								 let url= entry.toLocalURL();
								 uni.navigateTo({
									url:"/pages/user/tongue/photoPreview?url="+url
								 });
						   }, (error) => {
								console.error('Failed to resolve file system URL:', error);
						   });
				    },options);
				}
			},
			// 相册
			async handleAlbum() {
				// #ifdef APP-PLUS
				  let result = await premissionCheck("EXTERNAL_STORAGE");
				  if(result == 1) {
						 uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: (res) => {
								uni.setStorageSync("tongueUrl",res.tempFilePaths[0])
								let url= res.tempFilePaths[0]
								uni.navigateTo({
									url:"/pages/user/tongue/photoPreview?url="+url
								})
							}
						 });
				   }	
				// #endif
			},
			// 反转摄像头
			handleReversal() {
				this.$refs.cameraView.switchCamera((res) => {
				    
			    });
			},
			// 舌诊记录
			handleReportlist() {
				uni.navigateTo({
					url: "/pages/user/tongue/tongueList"
				})
			},
			setListener() {
				this.$refs.cameraView.setListener((res) => {
					if (res.action == "error") {
						this.showToast(res.msg)
					}
				});
			},
			async requestPressmition(){
				let result = await premissionCheck("CAMERA_EXTERNAL_STORAGE");
				if(result == 1) {
				    setTimeout(()=>{
						this.isShowCamera=true;
					},500)	
					
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.flex-center {
		@include u-flex(row, center, center);
	}
	.live-pusher-box {
		@include u-flex(column, center, center);
	}
	.imagebox {
		margin-top: 60rpx;
		@include u-flex(column, center, center);
	}
	.tongue {
		width: 531rpx;
		height: 592rpx;
	}
	.cover-view {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		@include u-flex(column, center, center);
	}
	.title {
		// margin-top: calc(var(--status-bar-height) + 130rpx);
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		font-size: 43rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tips {
		margin-top: 38rpx;
		font-family: SourceHanSansSC-Regular;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.uni-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		.uni-nav-barbox {
			width: 100%;
			height: 88rpx;
			padding: 0 24rpx;
			// box-sizing: border-box;
			@include u-flex(row, center, space-between);
			position: relative;
			font-size: 24rpx;
		}
		.uni-nav-title-t {
			font-family: SourceHanSansSC;
			font-weight: 400;
			color: #FFFFFF;
			/* #ifdef APP-PLUS */
			font-size: 32rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 14px;
			/* #endif */
		}
		.uni-nav-title {
			// flex-shrink: 0;
			font-family: SourceHanSansSC;
			font-weight: 400;
			color: #FFFFFF;
			/* #ifdef APP-PLUS */
			font-size: 32rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 14px;
			/* #endif */
			@include u-flex(row, center, flex-start);
			.ques {
				// flex-shrink: 0;
				width: 33rpx;
				height: 33rpx;
				margin-left: 9rpx;
			}
		}
		.uni-nav-back {
			height: 32rpx;
			width: 32rpx;
		}
	}
	.camera-footer {
		background-color: #000;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.usenum {
		text-align: center;
		@include u-flex(row, center, center);
		.usenum-t {
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 19rpx;
			color: #FFFFFF;
			padding: 14rpx;
		}
	}
	.camera-options {
		width: 100%;
		padding-top: 13rpx;
		padding-bottom: 60rpx;
		// box-sizing: border-box;
		@include u-flex(row, center, space-around);
	}
	.camera-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.camera-item-t {
		font-family: SourceHanSansCN;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
	}
	.camera-options-center {
		width: 131rpx;
		height: 131rpx;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.photograph-btn {
		width: 109rpx;
		height: 109rpx;
		background: #F54D04;
		border-radius: 50%;
	}
</style>