productintro.vue 10.0 KB
<template>
  <div class="containerbox">
    <div class="companytopimg">
      <img src="../../../assets/companytop.png" alt />
      <div class="intro">
        <div class="flextwo fanbanck" @click="back">
          <div class="leftrow leftrowkimg">
            <img src="../../../assets/leftrowk.png" alt />
          </div>
          <div class="sharemiddle topk">公司介绍及产品介绍</div>
          <div class="sharebtn"></div>
        </div>

        <div class="introtextbox">
          <div class="introtext flex">
            <img src="../../../assets/xiaolian.png" alt class="xiaoimg" />
            <div class="introtitlename" style="font-size: 0.28rem">
              亲爱的
              <span style="font-size: 0.28rem; font-weight: bold"
                >{{ result.name }},</span
              >
              <span style="font-size: 0.28rem; font-weight: bold">{{
                result.agent_name
              }}</span>
              邀您深度了解唐元集!
            </div>
          </div>
        </div>
      </div>
      <div class="companytext">
        <div class="comtexttop flexthree">
          <div class="textleft flexone">
            <div class="textleftheng"></div>
            <div class="textyuan"></div>
          </div>
          <div class="textname">{{ intended.company_title }}</div>
          <div class="textleft flexone">
            <div class="textkyuan"></div>
            <div class="textrightheng"></div>
          </div>
        </div>
        <div class="companyintrotext" v-html="intended.company"></div>
      </div>
    </div>
    <div class="productimg">
      <div class="zizhibox">
        <div class="comtexttop flexthree">
          <div class="textleft flexone">
            <div class="textleftheng"></div>
            <div class="textyuan"></div>
          </div>
          <div class="textname">{{ intended.product_intro_title }}</div>
          <div class="textleft flexone">
            <div class="textkyuan"></div>
            <div class="textrightheng"></div>
          </div>
        </div>
        <div class="taozucontent" v-html="intended.product_intro"></div>
      </div>
    </div>

    <div class="nextpage" @click="next">下一页</div>
    <!-- 弹层 -->
    <div class="register" v-if="showshare">
      <div class="fenwrap">
        <img
          src="../../../assets/chahao.png"
          alt
          class="chahao"
          @click="hideshare"
        />
        <div class="fenimg">
          <img src="../../../assets/fenimg.png" alt />
          <div class="fenname">结果已出,立即分享给朋友</div>
          <div class="fenbtn" @click="sueshare">立即分享</div>
        </div>
      </div>
    </div>
    <!-- 分享弹层 -->
    <div class="sharewrap" v-if="shareshow" @click="hidesharek">
      <img src="../../../assets/share.png" alt />
    </div>
  </div>
</template>

<script>
import wx from "jweixin-1.6.0";
export default {
  data() {
    return {
      subid: "",
      company: "",
      product: "",
      result: "",
      intended: "",
      showshare: false,
      shareshow: false,
      baseurl: ""
    };
  },
  beforeRouteEnter(to, from, next) {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.assign(to.fullPath);
    } else {
      next();
    }
  },
  created() {
    this.baseurl = "http://" + location.host;
    let type = localStorage.getItem("type");
    if (type == 1) {
      this.showshare = true;
    }
    document.title = "唐元集";
    this.subid = this.$route.query.subid;
    this.getcompanyintro();
    this.getresult();
    this.getappid();
    this.getintence();
  },
  mounted() {
    window.scrollTo(0, 0);
  },
  methods: {
    hidesharek() {
      this.shareshow = false;
    },
    getintence() {
      let that = this;
      console.log(99999);
      var result = "";

      var url = "/api/user/intended";
      let param = {};
      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          result = res.data;
          localStorage.setItem("intended", JSON.stringify(res.data.intended));
          that.intended = JSON.parse(localStorage.getItem("intended"));
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取appid
    getappid() {
      let that = this;
      let urlk = window.location.href;
      var url = "/api/user/wechat_jssdk";
      let param = {
        url: urlk
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res, "hahahahaiaioaioaio4");
          wx.config({
            debug: false,
            appId: res.data.jssdk.appId, // 和获取Ticke的必须一样------必填,公众号的唯一标识
            timestamp: res.data.jssdk.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.data.jssdk.nonceStr, // 必填,生成签名的随机串
            signature: res.data.jssdk.signature, // 必填,签名,见附录1
            //需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
            jsApiList: [
              "showOptionMenu",
              "updateAppMessageShareData",
              "updateTimelineShareData"
            ]
          });
          wx.ready(function () {
            wx.showOptionMenu();
          });
          that.sharetofriend();
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 分享给朋友
    sharetofriend() {
      var that = this;
      localStorage.setItem("type", "");
      // 处理验证失败的信息
      wx.error(function (res) {
        logUtil.printLog("验证失败返回的信息:", res);
      });
      // 处理验证成功的信息
      wx.ready(function () {
        // 分享到朋友圈
        wx.updateTimelineShareData({
          title: "唐元集邀请函", // 分享标题
          link:
            that.baseurl +
            "/redirect.html?shareRedirect=" +
            encodeURIComponent(window.location.href), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:
            "http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png",

          // imgUrl: that.details.details.img
          //   ? that.details.details.img
          //   : that.sharemsg.img,

          // 分享图标
          //  desc: that.sharemsg.content,
          success: function (res) {
            // 用户确认分享后执行的回调函数
            console.log("suss");
            logUtil.printLog("分享到朋友圈成功返回的信息为:", res);
            that.showMsg("分享成功!");
          },
          cancel: function (res) {
            // 用户取消分享后执行的回调函数
            console.log("err");
            logUtil.printLog("取消分享到朋友圈返回的信息为:", res);
          }
        }),
          // 分享给朋友
          wx.updateAppMessageShareData({
            title: "唐元集邀请函", // 分享标题
            desc: "", // 分享描述
            link:
              that.baseurl +
              "/redirect.html?shareRedirect=" +
              encodeURIComponent(window.location.href), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:
              "http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png",

            // imgUrl: that.details.details.img
            //   ? that.details.details.img
            //   : that.sharemsg.img,
            // 分享图标
            type: "", // 分享类型,music、video或link,不填默认为link
            dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
            success: function (res) {
              // 用户确认分享后执行的回调函数
              logUtil.printLog("分享给朋友成功返回的信息为:", res);
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              logUtil.printLog("取消分享给朋友返回的信息为:", res);
            }
          });
      });
    },

    hideshare() {
      this.showshare = false;
    },
    // 立即分享
    sueshare() {
      this.showshare = false;
      this.shareshow = true;
    },
    back() {
      this.$router.go(-1);
    },
    getresult() {
      let that = this;
      var url = "/api/user/assistance_result";
      let param = {
        assistance_id: that.subid
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          that.result = res.data.result;
          console.log(that.result);
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 下一页
    next() {
      console.log(44);
      this.$router.push({
        path: "/productvideo",
        query: {
          subid: this.subid
        }
      });
    },
    getcompanyintro() {
      let that = this;
      var url = "/api/common/company";
      let param = {};

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.company = res.data.company;
          that.product = res.data.product;
        })
        .catch(function (err) {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
@import "../../../style/usercenter.css";
.zizhibox{
  overflow-x: hidden!important;
  font-size: 0.28rem!important;
}
.taozucontent {
  width: 100%;
  padding: 0 0.32rem;
  box-sizing: border-box;
  overflow-x: hidden!important;
  font-size: 0.28rem!important;
  /* height: 17.5rem; */
  overflow-y: scroll;
}
.sharewrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

</style>