Quellcode durchsuchen

使用微信自带图片预览功能

zjs_project vor 1 Jahr
Ursprung
Commit
043565ca24

+ 1 - 0
package.json

@@ -44,6 +44,7 @@
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "node-sass": "^4.14.1",
+    "px2rem-loader": "^0.1.9",
     "sass-loader": "^7.3.1",
     "vue-template-compiler": "^2.6.14"
   },

+ 1 - 1
public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
 	<meta http-equiv="Access-Control-Allow-Origin" content="*">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>

+ 3 - 2
src/components/newBottomCom/viewMask/viewMask.html

@@ -4,14 +4,15 @@
 	<el-carousel v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper" 
 	:autoplay="false" :loop="false" ref="carousel"
 	 @change="swiperChangeImg" :initial-index="currentIndex" :indicator-dots="false">
-		<el-carousel-item v-for="(item,index1) in aiImagesList" :key="index1">
+		<el-carousel-item v-for="(item,index1) in aiImagesList" :key="index1" >
 			<!-- <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;object-fit: cover;" mode="aspectFill" :src="item.image"></image> -->
 			<el-image 
 				@touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend"
+				@click="previewAction"
 			    style="width:100%;height:100%;cursor:none;"
 			    :src="item.image"
 				fit='cover'
-			    :preview-src-list="item.list">
+			    >
 			  </el-image>
 		</el-carousel-item>
 	</el-carousel>

+ 30 - 1
src/components/newBottomCom/viewMask/viewMask.vue

@@ -256,6 +256,19 @@
 			// if(this.seedItem){
 			// 	this.title = this.seedItem.seedText;
 			// }
+			wx.checkJsApi({
+				jsApiList: ['previewImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
+				success: function(res) {
+					// 以键值对的形式返回,可用的api值true,不可用为false
+					// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
+					console.warn("checkJsApi",res)
+					// alert('su'+ JSON.stringify(res))
+				},
+				fail:(err)=>{
+					console.warn("checkJsApi-err",err)
+					// alert('err'+ JSON.stringify(err) )
+				}
+			})
 			this.screenWidth = window.screen.width;
 			this.screenHeight = window.screen.height;
 			if(window.innerWidth && window.screen.width){
@@ -451,6 +464,22 @@
 				console.log("***leftScroll***",this.currentIndex,this.aiImagesList.length)
 				this.aiSubmit(2);//继续生成下一张
 			},
+			//预览图片-使用微信自带的预览功能,即H5中不可用
+			previewAction() {
+				if(window.__wxjs_environment === 'miniprogram'){
+					let imglist = this.aiImagesList.map(it=>it.image);
+					wx.previewImage({
+						current: this.currentIndex,
+						urls: imglist,
+						success: (res) => {
+							console.log('图片预览:', res);
+						},
+						fail:(err)=>{
+							console.warn('图片预览-err:', res);
+						}
+					})
+				}
+			},
 			//返回上一页
 			goback(){
 				this.$router.go(-1);
@@ -940,7 +969,7 @@
 				console.warn("***single***",single.status,single.progress,this.count,single);
 				let self = this;
 				if(single.status=='starting'){//启动中的逻辑
-					if(this.count>=1){
+					if(this.count>=20){
 						this.stopInterval();//停止轮询
 						// this.dialogAIVisible = true;
 						MessageBox.confirm('',{