3.12提交

pages_app/webview/webviewClass.vue

@@ -26,23 +26,34 @@
       </uni-nav-bar>
     </view>
   </view>
-  <view class="bottom-box" >
-     <view class="bottom-cell">
-      <image class="bottom-cell-img" :src="readImg"  />
+  <web-view
+    v-if="safeUrl"
+    :src="safeUrl"
+    :webview-styles="webviewStyles"
+  ></web-view>
+  <view class="bottom-box">
+    <view class="bottom-cell">
+      <image class="bottom-cell-img" :src="readImg" />
       <text class="bottom-cell-text">{{ readnum }}</text>
-     </view>
-     <view class="bottom-cell" @click="toggleAgree">
-      <image class="bottom-cell-img" :src="isAgree==1?likeImg:dislikeImg"  />
+    </view>
+    <view class="bottom-cell" @click="toggleAgree">
+      <image
+        class="bottom-cell-img"
+        :src="isAgree == 1 ? likeImg : dislikeImg"
+      />
       <text class="bottom-cell-text">{{ agreenum }}</text>
-     </view>
-     <view class="bottom-cell" @click="toggleCollect">
-      <image class="bottom-cell-img" :src="isCollection==1?collectImg:discollectImg"  />
+    </view>
+    <view class="bottom-cell" @click="toggleCollect">
+      <image
+        class="bottom-cell-img"
+        :src="isCollection == 1 ? collectImg : discollectImg"
+      />
       <text class="bottom-cell-text">收藏</text>
-     </view>
-     <view class="bottom-cell" @click="shareToggle">
-      <image class="bottom-cell-img" :src="shareImgBottom"  />
+    </view>
+    <view class="bottom-cell" @click="shareToggle">
+      <image class="bottom-cell-img" :src="shareImgBottom" />
       <text class="bottom-cell-text">分享</text>
-     </view>
+    </view>
   </view>
   <uni-popup ref="shareRef" type="bottom" safeArea backgroundColor="#fff">
     <view class="share-popup">
@@ -92,6 +103,7 @@ import dislikeImg from "@/static/argee_no.png";
 import shareImgBottom from "@/static/icon_share.png";
 
 const title = ref("新闻详情");
+const type = ref("");
 const safeUrl = ref("");
 const backgroundColor = ref("");
 const hasBg = ref(false);
@@ -106,93 +118,168 @@ const readnum = ref(0);
 const agreenum = ref(0);
 const isAgree = ref(0);
 const user_uuid = ref("");
-const bottomHeight=ref(65);
+const bottomHeight = ref(65);
+const NAV_BAR_HEIGHT_PX = 44;
+const WEBVIEW_BOTTOM_PX = 65;
+const webviewTopPx = ref(88);
+const webviewHeightPx = ref(600);
+
+const webviewStyles = ref({
+  width: "100%",
+  top: `${webviewTopPx.value}px`,
+  height: `${webviewHeightPx.value}px`,
+  bottom: `65px`,
+});
+const applyWebviewLayout = () => {
+ 
+ 
+};
+const initWebviewLayout = () => {
+  const resInfo = uni.getSystemInfoSync();
+  const statusBarHeight = Number(resInfo.statusBarHeight || 0);
+  const windowHeight = Number(resInfo.windowHeight || 0);
+  webviewTopPx.value = Math.round(statusBarHeight + NAV_BAR_HEIGHT_PX);
+  webviewHeightPx.value = Math.max(
+    200,
+    Math.round(windowHeight - webviewTopPx.value - WEBVIEW_BOTTOM_PX)
+  );
+  webviewStyles.value = {
+    width: "100%",
+    top: `${webviewTopPx.value}px`,
+    height: `${webviewHeightPx.value}px`,
+    bottom: `${WEBVIEW_BOTTOM_PX}px`,
+  };
+};
 
 const getCollect = () => {
-  api.getCollect({
-    other_uuid: uuid.value,
-    user_uuid: user_uuid.value,
-    type: 2,
-  }).then(res => {
-     if(res.code == 200) {
+  api
+    .getCollect({
+      other_uuid: uuid.value,
+      user_uuid: user_uuid.value,
+      type: type.value=='huanjiao_news'?1:2,
+    })
+    .then((res) => {
+      if (res.code == 200) {
         uni.showToast({
           title: "收藏成功",
           icon: "none",
         });
-        getKePuCollection();
-     }
-  });
+        if (type.value == "huanjiao_news") {
+          getNewsDetail();
+        } else {
+          getKePuCollection();
+        }
+      }
+    });
 };
 const getDiscollect = () => {
-  api.getDiscollect({
-    other_uuid: uuid.value,
-    user_uuid: user_uuid.value,
-    type: 2,
-  }).then(res => {
-    console.log(res);
-    if(res.code == 200) {
-      uni.showToast({
-        title: "取消收藏成功",
-        icon: "none",
-      });
-      getKePuCollection();
-    }
-  });
+  api
+    .getDiscollect({
+      other_uuid: uuid.value,
+      user_uuid: user_uuid.value,
+      type: type.value=='huanjiao_news'?1:2,
+    })
+    .then((res) => {
+      console.log(res);
+      if (res.code == 200) {
+        uni.showToast({
+          title: "取消收藏成功",
+          icon: "none",
+        });
+        if(type.value=='huanjiao_news'){
+    getNewsDetail();
+  }else{
+    getKePuCollection();
+  }
+      }
+    });
 };
 const toggleCollect = () => {
-  if(isCollection.value == 0) {
+  console.log("收藏状态" + isCollection.value);
+  if (isCollection.value == 0) {
     getCollect();
   } else {
     getDiscollect();
   }
 };
 const toggleAgree = () => {
-  if(isAgree.value == 0) {
+  if (isAgree.value == 0) {
     getAgree();
   } else {
     getDisagree();
   }
 };
 const getAgree = () => {
-  api.getAgree({
-    news_article_uuid: uuid.value,
-    user_uuid: user_uuid.value,
-    type: 2,
-  }).then(res => {
+  api
+    .getAgree({
+      news_article_uuid: uuid.value,
+      user_uuid: user_uuid.value,
+      type: type.value=='huanjiao_news'?1:2,
+    })
+    .then((res) => {
+      if(type.value=='huanjiao_news'){
+    getNewsDetail();
+  }else{
     getKePuCollection();
-  });
+  }
+    });
 };
 const getDisagree = () => {
-  api.getDisagree({
-    news_article_uuid: uuid.value,
-    user_uuid: user_uuid.value,
-    type: 2,
-  }).then(res => {
-    console.log(res);
+  api
+    .getDisagree({
+      news_article_uuid: uuid.value,
+      user_uuid: user_uuid.value,
+      type: type.value=='huanjiao_news'?1:2,
+    })
+    .then((res) => {
+      console.log(res);
+      if(type.value=='huanjiao_news'){
+    getNewsDetail();
+  }else{
     getKePuCollection();
-  });
+  }
+    });
 };
 const getOutRead = () => {
-  api.getOutRead({
-    uuid: uuid.value,
-   type: 2,
-  }).then(res => {
-    console.log(res);
-  });
+  api
+    .getOutRead({
+      uuid: uuid.value,
+      type: type.value == "huanjiao_news" ? 1 : 2,
+    })
+    .then((res) => {
+      console.log(res);
+    });
+};
+const getNewsDetail = () => {
+  api
+    .getNewsDetail({
+      uuid: uuid.value,
+    })
+    .then((res) => {
+      console.log(res);
+      if (res.code == 200) {
+        isCollection.value = res.data.isCollection;
+        readnum.value = res.data.readnum;
+        agreenum.value = res.data.agreenum;
+        isAgree.value = res.data.isAgree;
+      }
+    });
 };
 const getKePuCollection = () => {
-  api.getKePuCollection({
-    uuid: uuid.value,
-    user_uuid: user_uuid.value,
-  }).then(res => {
-    console.log(res.data);
-    if(res.code == 200) {
-      isCollection.value = res.data.isCollection;
-      readnum.value = res.data.readnum;
-      agreenum.value = res.data.agreenum;
-      isAgree.value = res.data.isAgree;
-    }
-  });
+  api
+    .getKePuCollection({
+      uuid: uuid.value,
+      user_uuid: user_uuid.value,
+    })
+    .then((res) => {
+      console.log(res.data);
+      if (res.code == 200) {
+        isCollection.value = res.data.isCollection;
+        readnum.value = res.data.readnum;
+        agreenum.value = res.data.agreenum;
+        isAgree.value = res.data.isAgree;
+      }
+    });
 };
 const goBack = () => {
   uni.navigateBack({
@@ -203,8 +290,12 @@ const goBack = () => {
     },
   });
 };
+const webviewRef = ref(null);
+
 onShow(() => {
+ setTimeout(() => {
   uni.hideLoading();
+ }, 2000);
   // console.log('show');
   // plus.screen.lockOrientation('portrait-primary');
 });
@@ -217,7 +308,15 @@ onHide(() => {
   // plus.screen.lockOrientation('landscape-primary');
 });
 onLoad((query) => {
+  uni.showLoading({
+    title: '加载中',
+    mask: true,
+  });
+  //initWebviewLayout();
   const userInfo = uni.getStorageSync("userInfo");
+  if (query.type) {
+      type.value = query.type;
+    }
   user_uuid.value = userInfo.uuid;
   if (query.title) {
     title.value = query.title;
@@ -233,21 +332,30 @@ onLoad((query) => {
 
     backgroundColor.value = "linear-gradient(to bottom,'#fff' , '#398775')";
   }
-  getKePuCollection();
+  if (type.value == "huanjiao_news") {
+    getNewsDetail();
+  } else {
+    getKePuCollection();
+  }
   getOutRead();
-  var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
-  uni.getSystemInfo({
-    success: (sysinfo) => {
-      height = sysinfo.windowHeight; //自行修改
-	  //bottomHeight.value=height-140
-    },
-    complete: () => {},
-  });
-  const raw = query && (query.url || "");
+  
+  const raw =
+    query && (query.url || query.href || query.link || query.src || "");
+  if (!raw) {
+    uni.showToast({
+      title: "未获取到网页链接",
+      icon: "none",
+    });
+  }
   try {
     safeUrl.value = decodeURIComponent(raw);
-    shareImg.value = query.imgPath?decodeURIComponent(query.imgPath):'https://doc.igandan.com/app/html/img/2016/20160714132557.png';
+    console.log( safeUrl.value);
+    // query.imgPath
+    //   ? decodeURIComponent(query.imgPath)
+    //   : "https://doc.igandan.com/app/html/img/2016/20160714132557.png";
+    shareImg.value ="https://doc.igandan.com/app/html/img/2016/20160714132557.png";
     console.log(shareImg.value);
+   
     if (query.type == "live_yugao") {
       shareTitle.value = query.sharetitle;
       summary.value = "分享一篇来自“肝胆相照”的会议预告：" + shareTitle.value;
@@ -257,79 +365,57 @@ onLoad((query) => {
     } else if (query.type == "live") {
       shareTitle.value = "肝胆相照直播：" + query.sharetitle;
       summary.value = shareTitle.value;
-    }else if(query.type=='news'){
+    } else if (query.type == "news") {
       shareTitle.value = query.sharetitle;
-      summary.value ='';
-    }else if(query.type=='huanjiao'){
-       console.log(query.sharetitle);
-       console.log(query.summary);
+      summary.value = "";
+    } else if (query.type == "huanjiao" || query.type == "huanjiao_news") {
+      console.log(query.sharetitle);
+      console.log(query.summary);
       shareTitle.value = query.sharetitle;
       summary.value = query.summary;
     }
     // #ifdef APP-PLUS
-    const resInfo = uni.getSystemInfoSync(); // 或者使用 uni.getSystemInfo({...}).then(res => {...})
-    let statusBarHeight = resInfo.statusBarHeight;
-    let wv = plus.webview.create("", "custom-webview", {
-      top: statusBarHeight + 44 + "px",
-      bottom: "65px",
-    });
-    wv.loadURL(safeUrl.value);
+    // let wv = plus.webview.create("", "custom-webview", {
+    //   top: statusBarHeight + navHeight + "px",
+    //   height: calcWebviewHeight(baseWindowHeight) + "px",
+    //   bottom: fixedBottomHeight + "px",
+    // });
+    // webviewRef.value = wv;
+    // wv.loadURL(safeUrl.value);
 
-    let pages = getCurrentPages();
-    let page = pages[pages.length - 1];
+    // let pages = getCurrentPages();
+    // let page = pages[pages.length - 1];
 
-    var currentWebview = page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
-    currentWebview.append(wv);
-    setTimeout(function () {
-      wv = currentWebview.children()[0];
-      wv.setStyle({
-        top: statusBarHeight + 44 + "px",
-        height: height - 140,
-        bottom: "65px",
-        scalable: true,
-        videoFullscreen: "landscape",
-        zIndex: -1,
-      });
-    }, 300); //如果是页面初始化调用时，需要延时一下
-    wv.onloaded = (e) => {
-      wv.show();
-    };
+    // var currentWebview = page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
+    // currentWebview.append(wv);
+    // const applyWebviewStyle = (windowH) => {
+    //   wv.setStyle({
+    //     top: statusBarHeight + navHeight + "px",
+    //     height: calcWebviewHeight(windowH) + "px",
+    //     bottom: fixedBottomHeight + "px",
+    //     scalable: true,
+    //     videoFullscreen: "landscape",
+    //     zIndex: -1,
+    //   });
+    // };
+    // setTimeout(function () {
+    //   wv = currentWebview.children()[0];
+    //   webviewRef.value = wv;
+    //   applyWebviewStyle(baseWindowHeight);
+    // }, 300); //如果是页面初始化调用时，需要延时一下
+    // wv.onloaded = (e) => {
+    //   wv.show();
+    // };
 
-    uni.onWindowResize((res) => {
-      if (res.size.windowHeight < height) {
-        console.log(res.size.windowHeight);
-
-        console.log(height);
-        console.log("键盘高度", res.height);
-        setTimeout(function () {
-          wv.setStyle({
-            //设置web-view距离顶部的距离以及自己的高度，单位为px
-            top: statusBarHeight + 44 + "px",
-            videoFullscreen: "landscape",
-            height: height - res.size.windowHeight + 100,
-            scalable: true, //webview的页面是否可以缩放，双指放大缩小
-            bottom: "65px",
-          });
-        }, 0);
-
-        //高度缩小
-        //如页面初始化调用需要写延迟
-      } else {
-        setTimeout(function () {
-          wv.setStyle({
-            //设置web-view距离顶部的距离以及自己的高度，单位为px
-            top: statusBarHeight + 44 + "px",
-            height: height - 80,
-            bottom: "65px",
-            videoFullscreen: "landscape",
-            scalable: true, //webview的页面是否可以缩放，双指放大缩小
-          });
-        }, 0);
-      }
-    });
+    // uni.onWindowResize((res) => {
+    //   const resizeH = Number((res && res.size && res.size.windowHeight) || baseWindowHeight);
+    //   setTimeout(function () {
+    //     applyWebviewStyle(resizeH);
+    //   }, 0);
+    // });
     // 创建并展示原生弹窗
     createNativePopup();
-
+   
     // #endif
   } catch (e) {
     safeUrl.value = raw;
@@ -1012,6 +1098,8 @@ const shareToWeibo = () => {
 </script>
 
 <style>
+
+
 .bottom-box {
   position: fixed;
   bottom: 0;
@@ -1020,20 +1108,17 @@ const shareToWeibo = () => {
   height: 60px;
   display: flex;
   align-items: center;
-  z-index:99;
+  z-index: 99;
   background-color: #fff;
-  
- 
 }
 .bottom-cell {
   flex: 1;
-  height:55px;
- border-right: 2rpx solid #ccc;
- border-top: 2rpx solid #ccc;
+  height: 55px;
+  border-right: 2rpx solid #ccc;
+  border-top: 2rpx solid #ccc;
   display: flex;
   align-items: center;
   justify-content: center;
- 
 }
 .bottom-cell:last-child {
   border-right: none;