【Add】课程分享图片

pages/video/detail.vue

@@ -15,7 +15,7 @@
         @ended="_videoEnd"
         @fullscreenchange="screenChange"
       ></video>
-      <cover-view v-if="videoInfo.learn_status == 0" :class="bigsScreen ? 'bigScreen' : 'cover'"></cover-view>
+      <cover-view v-if="videoInfo.learn_status == 0" :class="bigsScreen ? 'bigScreen' : 'cover'" @touchmove="bigScreenTouch"></cover-view>
     </view>
     <view class="video_title">{{ videoInfo.name }}</view>
     <view class="rich_text">
@@ -92,6 +92,7 @@ export default {
       countdown: 0, // 新增变量用于存储倒计时时间
       bigsScreen: false,
       isVip: true,
+	  bigsScreenTouch:false,
     };
   },
   onLoad(param) {
@@ -174,9 +175,28 @@ export default {
   onReady: function (res) {},
   onShow() {},
   methods: {
+	bigScreenTouch(e){
+		if( this.bigsScreenTouch ) return;
+		this.bigsScreenTouch = true;
+		// 如果学习状态为0，表示未完成过学习
+		if( this.videoInfo.learn_status == 0 ){
+		  // 判断结果
+		  var is_alter 	= uni.getStorageSync("video_learn_status_alter_"+this.videoInfo.id);
+		  // 弹出结果
+		  if( !is_alter ){
+			uni.showModal({
+				content:"您未完成第一次学习，暂无法快进",
+				showCancel:false,
+				success: (res) => {
+					// 已经弹出过
+					uni.setStorageSync("video_learn_status_alter_"+this.videoInfo.id,1);
+				}
+			})
+		  }
+		}
+	},
     openCustomer() {
       // #ifdef MP-WEIXIN
-      console.log(1);
       wx.openCustomerServiceChat({
         extInfo: { url: this.videoInfo.service?.url },
         corpId: this.videoInfo.service?.corpid,

pages/video/record.vue

@@ -32,9 +32,24 @@
       </view>
     </view>
     <view class="bottom_btn">
-      <view class="submit_btn defult" @click="_backList">返回课程列表</view>
+      <view class="submit_btn defult" @click="showShareImage">生成分享图</view>
       <view class="submit_btn" @click="_continue">{{ type == "exam" ? "重新练习" : "继续课后评测" }}</view>
     </view>
+	<uni-popup ref="filePathPopup" type="center" class="center_popup" >
+		<view class="cover_black" :style="windowWidth">
+			<image v-if="filePath" :src="filePath" mode="heightFix" class="file_path_image"></image>
+			<view class="bottom_box">
+				<view class="info_title">
+					<view class="title_center">分享至</view>
+					<button class="close_popup" @click.stop="closePupop"> X </button>
+				</view>
+				<button class="save_image_btn" @click.stop="saveImage">
+					<image class="save_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/video/savepic.png" mode=""></image>
+					<view class="save_text">保存图片</view>
+				</button>
+			</view>
+		</view>
+	</uni-popup>
   </view>
 </template>
 
@@ -48,9 +63,11 @@ export default {
         answer_total: 0,
         get_score: 0,
       },
+	  filePath:"",
       queston_list: [],
       record_id: null,
       type: null, // 确保 type 在 data 中定义
+	  windowWidth:{},
     };
   },
   onLoad(params) {
@@ -66,14 +83,72 @@ export default {
   onShow() {
     this._getRecord(this.type);
     this._getAnswerList(this.type);
+	this.windowWidth = {height:uni.getWindowInfo().windowHeight+'px'};
   },
   onShareAppMessage(obj) {
     return {
       title: `999智控终端平台\n学习报告`,
       path: `/pages/video/record?type=${this.type}&record_id=${this.record_id}`,
+	  promise: new Promise((resolve, reject) => {
+	    this.$http.request(`api/${this.type}_report_share_image/get`, {course_id: this.reportInfo.course_id}).then((callback) => {
+	      let obj = {
+	        title: callback.data?.title,
+	        path: `/pages/video/record?type=${this.type}&record_id=${this.record_id}`,
+	      };
+		  if (callback.data?.image_url !== "") {
+		    obj.imageUrl = callback.data.image_url;
+		  }
+		  resolve(obj);
+	    });
+	  }),
     };
   },
   methods: {
+	showShareImage(){
+		this.$http.request(`api/${this.type}_report_share_image/get_after`, {course_id: this.reportInfo.course_id,scene:`type=${this.type}&record_id=${this.record_id}`}).then((callback) => {
+		  if( callback.code == 'success'){
+				// 分离base64中的数据部分
+			  const imgSrc = callback.data?.base64_image; // 假设这是你的base64字符串，例如："data:image/png;base64,iVBORw0K..."
+			  const imgFormat = imgSrc.split(',')[1]; // 获取base64编码的图片数据部分
+			  const fileExt = imgSrc.split(';')[0].split('/')[1]; // 获取图片格式，例如：jpeg, png等
+			  const filePath = `${uni.env.USER_DATA_PATH}/${Date.now()}.${fileExt}`; // 临时文件路径，使用用户数据路径确保有权限写入
+			  // 使用uni.getFileSystemManager()将base64转换为文件并保存到相册
+			  const fs = uni.getFileSystemManager();
+			  fs.writeFile({
+				filePath: filePath,
+				data: imgFormat, // 直接写入base64编码的数据部分，不需要转换ArrayBuffer
+				encoding: 'base64', // 指定编码为base64
+				success: () => {
+				  this.filePath = filePath
+				  // 显示
+				  this.$refs.filePathPopup.open("center");
+				},
+				fail: function (err) {
+				  console.log('文件写入失败', err);
+				  uni.showToast({ title: '文件写入失败', icon: 'none' });
+				}
+			  });
+		  }
+		});
+	},
+	saveImage(){
+		if( this.filePath ){
+			uni.saveImageToPhotosAlbum({
+			  filePath: this.filePath,
+			  success:()=>{
+				// 关闭结果
+				this.$refs.filePathPopup.close();
+			    uni.showToast({ title: '保存成功', icon: 'success' });
+			  },
+			  fail:(err)=> {
+			    uni.showToast({ title: '保存失败', icon: 'none' });
+			  }
+			});
+		}
+	},
+	closePupop(){
+		this.$refs.filePathPopup.close();
+	},
     _backList() {
       uni.redirectTo({
         url: `/pages/video/index`,
@@ -225,4 +300,93 @@ export default {
     }
   }
 }
+.center_popup{
+	.cover_black{
+		display: block;
+		width: 750rpx;
+		position: relative;
+		padding-top: 120rpx;
+		background-color: rgba(0, 0, 0, 0.9);
+		.file_path_image{
+			display: block;
+			height: 800rpx;
+			margin: 0rpx auto;
+		}
+		.bottom_box{
+			left: 0rpx;
+			bottom: 0rpx;
+			width: 750rpx;
+			height: 300rpx;
+			position: absolute;
+			background-color: #FFFFFF;
+			border-top-left-radius: 20rpx;
+			border-top-right-radius: 20rpx;
+			.info_title{
+				display: block;
+				border: none;
+				width: 750rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				font-size: 28rpx;
+				text-align: center;
+				position: relative;
+				.title_center{
+					display: block;
+					border: none;
+					width: 120rpx;
+					height: 60rpx;
+					line-height: 60rpx;
+					font-size: 28rpx;
+					margin: 0rpx auto;
+					text-align: center;
+				}
+				.close_popup{
+					top: 0rpx;
+					right: 0rpx;
+					border: none;
+					width: 60rpx;
+					height: 60rpx;
+					font-size: 32rpx;
+					padding: 0rpx 0rpx;
+					line-height: 60rpx;
+					position: absolute;
+					background-color: transparent;
+				}
+				.close_popup::after{
+					border: none;
+					background-color: transparent;
+				}
+			}
+			.save_image_btn{
+				display: block;
+				border: none;
+				width: 300rpx;
+				height: 120rpx;
+				margin: 0rpx auto;
+				overflow: hidden;
+				margin-top: 40rpx;
+				padding: 0rpx 0rpx;
+				text-align: center;
+				line-height: 80rpx;
+				vertical-align: middle;
+				background-color: transparent;
+				.save_icon{
+					float: left;
+					width: 80rpx;
+					height: 80rpx;
+				}
+				.save_text{
+					float: left;
+					width: 180rpx;
+					height: 80rpx;
+					font-size: 32rpx;
+				}
+			}
+			.save_image_btn::after{
+				border: none;
+				background-color: transparent;
+			}
+		}
+	}
+}
 </style>