shaogen1995
/
BJ-JTL


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title></title>
    <script src="./vue.min.js"></script>
    <style>
      body {
        margin: 0;
      }
      #app {
        min-width: 100vw;
        height: 100vh;
        background: #f7f1e6;
        box-sizing: border-box;
        overflow: hidden;
      }
      .top {
        width: 100%;
        height: 65%;
      }
      .top > iframe {
        width: 100%;
        height: 100%;
      }

      .bottom {
        position: absolute;
        top: calc(65% - 30px);
        width: 100%;
        min-height: 40vh;
        background: #f7f1e6;
        border-radius: 30px 30px 0px 0px;
        box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.2);
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
      }
      .title {
        font-weight: bold;
      }

      .content {
        white-space: pre-wrap;
        font-size: 14px !important;
        line-height: 25px !important;
      }

      .bottom > p {
        text-indent: 2em;
        font-size: 12px;
        overflow: auto;
      }
      .previewImg {
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background: #000000be;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
      }
      .previewImg > img {
        width: 100vw;
      }

      .levitated-box {
        background-color: #00000080;
        border-radius: 50px;
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        position: fixed;
        right: 10px;
        top: 50vh;
        z-index: 999;
        padding: 10px;
      }

      .levitated-box > img {
        width: 100%;
        height: 100%;
      }
    </style>
    <style></style>
  </head>
  <body>
    <div id="app" v-if="JSON.stringify(info) != '{}'">
      <div class="top">
        <!-- <iframe
          src="https://4dscene.4dage.com/culturalrelics/YFYCM2/Model2.html?m=yfyc204"
        ></iframe> -->
        <iframe :src="info.modelUrl"></iframe>
      </div>
      <div class="bottom">
        <span class="title">{{info.name}}</span>
        <!-- <rich-text :nodes="info.content"></rich-text> -->
        <div class="content" v-html="info.content" @click="showImg"></div>
      </div>
      <!-- 富文本中图片放大预览部分 -->
      <div class="previewImg" @click="imgShowHandler" v-show="imgShow">
        <img :src="previewImg" alt="" />
      </div>
      <div class="levitated-box">
        <img
          width="40px"
          height="40px"
          :src="`https://houseoss.4dkankan.com/project/bjfljtl/img/bottomInco/collectIcon${isCollectedInfo ? 'Ac' : ''}.png`"
          @click="collecttion"
        />
      </div>
    </div>

    <!-- 微信的SDK -->
    <script
      type="text/javascript"
      src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"
    ></script>
    <!-- uni 的 SDK -->
    <script
      type="text/javascript"
      src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
    ></script>

    <script src="./axios.min.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            info: {},
            isCollectedInfo: false,
            previewImg: "",
            imgShow: false,
          };
        },
        mounted() {},
        beforCreat() {},
        created() {
          let _this = this;
          const params = this.urlParameter(window.location.href);
          console.log(params, parseInt(params.isCollected) == "1");
          this.isCollectedInfo =
            parseInt(params.isCollected) == "1" ? true : false;
          console.log(this.isCollectedInfo);
          axios({
            method: "get",
            url: `https://wxfalangchang.4dage.com/api/wxShow/goods/detail/${params.id}`,
          }).then(function (resp) {
            _this.info = resp.data.data;
            _this.info.content = _this.formatRichText(_this.info.content);
          });
        },
        watch: {
          info: {
            handler(newValue, oldValue) {
              console.log("刷新", newValue, oldValue);
            },
            immediate: true,
            deep: true,
          },
        },
        methods: {
          // v-html模块点击
          showImg(e) {
            if (e.target.tagName == "IMG") {
              this.previewImg = e.target.src;
              this.imgShow = true;
            }
          },
          imgShowHandler() {
            this.imgShow = false;
          },
          urlParameter(data) {
            if (data) {
              const query = data.substring(data.indexOf("?") + 1);
              const arr = query.split("&");
              const params = {};
              arr.forEach((v) => {
                const key = v.substring(0, v.indexOf("="));
                const val = v.substring(v.indexOf("=") + 1);
                params[key] = val;
              });
              return params;
            } else return {};
          },
          // 富文本解析
          formatRichText(html) {
            let newContent = html.replace(
              /<img[^>]*>/gi,
              function (match, capture) {
                match = match
                  .replace(/style="[^"]+"/gi, "")
                  .replace(/style='[^']+'/gi, "");
                match = match
                  .replace(/width="[^"]+"/gi, "")
                  .replace(/width='[^']+'/gi, "");
                match = match
                  .replace(/height="[^"]+"/gi, "")
                  .replace(/height='[^']+'/gi, "");
                let isExist = match.includes("https://");
                if (!isExist) {
                  match = match.replace(
                    /(src=")/gi,
                    'src="https://wxfalangchang.4dage.com'
                  );
                }
                return match;
              }
            );
            newContent = newContent.replace(
              /style="[^"]+"/gi,
              function (match, capture) {
                match = match
                  .replace(/width:[^;]+;/gi, "max-width:100%;")
                  .replace(/width:[^;]+;/gi, "max-width:100%;");
                return match;
              }
            );
            newContent = newContent.replace(/<br[^>]*\/>/gi, "");
            newContent = newContent.replace(
              /\<img/gi,
              '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
            );
            return newContent;
          },
          // 收藏
          collecttion() {
            const params = this.urlParameter(window.location.href);
            console.log(params);

            console.log(params.isLogin);
            if (params.isLogin == "1") {
              this.isCollectedInfo = !this.isCollectedInfo;
              uni.postMessage({
                data: {
                  action: this.isCollectedInfo ? 1 : 0,
                },
              });
            } else {
              alert("身份过期，请重新登录");
              uni.reLaunch({
                url: "../../../mine/index",
              });
            }
          },
        },
      });
    </script>
  </body>
</html>