index.vue

<template>
  <div>
    <!-- <div>{{withoutScene?"初始化完成":"初始化中"}}</div> -->
    <div style="width:100%;height:90vh;display:flex;justify-content: center;align-items: center;">
      <van-loading size="40px" type="spinner"></van-loading>
    </div>
    <web-view v-if="withoutScene" :src="pageUrl" @message="getMessage" @error="handleError" @load="handleLoad"></web-view>
  </div>
</template>

<script>
import spokesman from "@/api/spokesman.js";
import shop from "@/api/shop.js";
import indexApi from "@/api/index.js";
import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
import login from "@/api/login";
export default {
  data() {
    return {
      code: '',
      shopId: this.$store.state.mixid,
      options: {},
      session_key: "",
      baseUrl: process.env.BASE_URL,
      link: this.baseUrl,
      page: "/",
      params: "?mixid=" + this.shopId+'&native=1',

      userInfo: {
        nickName: "mpvue",
        avatarUrl: "http://mpvue.com/assets/logo.png"
      },
      shareUrl: "",

      //分享
      shopConfig: null,
      spokesmanGroupId: "", // 代言人的集团id
      spokesmanShopId: "", // 代言人的门店id
      spokesmanRelId: "", //代言人的id
      userId : '',
      hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
      newHref: "",
      shareShopName: "",
      shareLogoUrl: "",
      shareOrderSn: "",
      shareTid: "",
      newWindowHref : '',
      withoutScene: false,
      sharePageList: [
        "goods/",
        "receivingGift",
        "article/",
        "/personalCenter/spokesmanCenter"
      ] //分享白名单
    };
  },
  computed: {
    pageUrl() {
      return this.link+this.page+this.params;
    }
  },
  watch: {
    pageUrl(n,o) {
      //埋点未登录时进入文章
      // this.params+='&articleId=111'
      console.log(wx.getStorageSync("sessionid"),3333333,this.pageUrl)
      if(!wx.getStorageSync("sessionid")&&this.pageUrl.indexOf('articleId')!=-1) {
        // wx.setStorageSync('articleId',true)
        var vars = this.pageUrl.split("&");
        console.log(vars,2222)
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            console.log(pair,1111)
            if (pair[0] == 'articleId') {
              wx.setStorageSync(this.$store.state.mixid+'articleId',pair[1])
            }
        }
      }
    }
  },
  onLoad(options) {
    
    this.options = options;
    Object.assign(this.$data, this.$options.data());
    this.withoutScene = true;
    //获取openId
     wx.login({
      success: res => {
        this.code = res.code;
        login.miniLogin({ code: this.code}).then(res1 => {
            console.log(res1,555555)
            if (res1.data.code == 200) {
                wx.setStorage({
                    key: "openid",
                    data: res1.data.data.openid
                });
            }
            this.params += '&open_id='+wx.getStorageSync("openid");
            console.log(this.code,77777,this.params)
        })
      },
    }) 
    
    //检测登录态
    this.checkLogin();
    this.options = options;
    if (options.share) {
      //来自分享
      this.link = decodeURIComponent(options.share);
      this.spokesmanGroupId =
        getQueryVariable(this.link, "spokesmanGroupId") || "";
      this.spokesmanShopId =
        getQueryVariable(this.link, "spokesmanShopId") || "";
      this.spokesmanRelId = getQueryVariable(this.link, "spokesmanRelId") || "";
      this.userId = getQueryVariable(this.link, "userId") || "";
      if (this.spokesmanGroupId != "") {
        //上级分销员信息
        this.$store.commit("setSpokesman", {
          spokesmanGroupId: this.spokesmanGroupId,
          spokesmanShopId: this.spokesmanShopId,
          spokesmanRelId: this.spokesmanRelId
        });
      }
      this.page = "";
      this.params = "";
    } else if (options.from && options.from == "h5login") {
      //来自h5登录
      let params = JSON.parse(options.params);
      wx.setStorage({
        key: "sessionid",
        data: params.sessionid
      });
    } else if (options.from && (options.from == "home" || options.from == "livedToIndex")) {
      //来自直播详情
      this.page = decodeURIComponent(options.backpath);
      if(this.page.includes("?")){
        this.params="&mixid=" + this.shopId+'&native=1';
      }
      options.params && (this.params += "&" + serialize(decodeURIComponent(options.params)));
        console.log(this.page,this.params)
    } else if (options.from && options.from == "livedBackShop") {
      //直播页back到商城
      this.page = decodeURIComponent(options.backpath);
      this.params += "&" + serialize(options.params);
    } else if(options.from && options.from == "liveList"){
      //从主播端跳到商品
      this.page = decodeURIComponent(options.backpath);
      this.params += "&" + serialize(options.params);
    } else if (options.from && options.from == "livedToGoodsInfo") {
      //从直播详情商品列表到商城商品详情
      this.page = decodeURIComponent(options.backpath);
      this.params += "&" + serialize(options.params);
    } else if (options.from && options.from == "livedToOrderConfirm") {
      //从直播详情商品列表到商城确认订单
      this.page = decodeURIComponent(options.backpath);
      this.params += "&" + serialize(options.params);
    } else if (options.from && options.from == "login") {
      //来自小程序登录页面
      this.page = decodeURIComponent(options.backpath);
      this.params += "&" + decodeURIComponent(options.params);
    } else if (options.from && options.from == "logout") {
      //来自用户登出
      wx.removeStorage({
        key: "sessionid"
      });
      wx.removeStorage({
        key: "openid"
      });
    } else if (options.from && options.from == "address") {
      // 来自小程序地址页面
      this.link = decodeURIComponent(options.backpath);
      console.log("adress", options.backpath, this.link);
      this.page = "";
      this.params = "";
    } else if (options.from == "wxPay") {
      //来自支付页面
      this.page = options.backpath;
      this.params += "&" + serialize(options.params);
    } else if (options.scene) {
      console.log(options)
      console.log(222222)
      if(options.scene.indexOf('_') == -1){
        this.withoutScene = false;
        //新二维码扫码进入
        wx.nextTick(() => {
          indexApi.getShareSceneRecord(options.scene).then(res=>{
            this.withoutScene = true;
            if(res.data.code == '200'){
              this.page = res.data.data.pageUri;
              let paramsObj = JSON.parse(res.data.data.scene);
              wx.setStorageSync('attractingCustomerChannelId',paramsObj.attractingCustomerChannelId)
              console.log(res.data.data)
              console.log(wx.getStorageSync("openid"))
              console.log(333333)
              if(wx.getStorageSync("openid")) {
                indexApi.addRecord(
                  {
                    attractingCustomersChannelId: paramsObj.attractingCustomerChannelId,
                    miniOpenId: wx.getStorageSync("openid"),
                    registerFlag: 1,
                    newRegisterFlag: 0,
                  }
                ).then(ele=>{
                  //清空引客渠道id
                  wx.setStorageSync('attractingCustomerChannelId','')
                })
              }
              let params = '';
              for(let i in paramsObj){
                params += "&"+i+'='+paramsObj[i]
              }
              this.params += params
            }
          }).catch((err)=>{
            this.withoutScene = true;
          })    
        });
          
      }else {
        //来自扫码
        // options 中的scene需要使用decodeURIComponent才能获取到生成二维码时传入的scene
        var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
        let querys = scene.split("_");
        if (querys) {
          if (querys[0] == "pid") {
            //商品详情 pid_123
            this.page = `/goods/${querys[1]}`;
            this.params += this.paramsHander(querys,3)+`&discountMargin=${querys[querys.length-1]}`
            // if(querys.length > 3){
            //   if(querys[5]){
            //     this.params += `&spokesmanGroupId=${querys[2]}&spokesmanShopId=${querys[3]}&spokesmanRelId=${querys[4]}&userId=${querys[5]}`
            //   }else{
            //     this.params += `&spokesmanGroupId=${querys[2]}&spokesmanShopId=${querys[3]}&spokesmanRelId=${querys[4]}`
            //   }
              
            // }else if(querys.length == 3){
            //   this.params += `&userId=${querys[2]}`
            // }

            
          } else if (querys[0] == "activty") {
            //活动页面activty_turntable_123
            this.params += `&pageInfo=${scene}`;
          } else if (querys[0] == "spokesman") {
            //分销员 小程序码
            this.page = `/personalCenter/spokesmanCenter`;
            this.params += this.paramsHander(querys,2)
            // if(querys.length > 2){
            //   if(querys[4]){
            //     this.params += `&spokesmanGroupId=${querys[1]}&spokesmanShopId=${querys[2]}&spokesmanRelId=${querys[3]}&userId=${querys[4]}`
            //   }else{
            //     this.params += `&spokesmanGroupId=${querys[1]}&spokesmanShopId=${querys[2]}&spokesmanRelId=${querys[3]}`
            //   }
              
            // }else if(querys.length == 2){
            //   this.params += `&userId=${querys[1]}`
            // }
            
          }else if(querys[0] == "home"){
            this.page = `/`;
            this.params += this.paramsHander(querys,2)
            // if(querys.length > 2){
            //   if(querys[4]){
            //     this.params += `&spokesmanGroupId=${querys[1]}&spokesmanShopId=${querys[2]}&spokesmanRelId=${querys[3]}&userId=${querys[4]}`
            //   }else{
            //     this.params += `&spokesmanGroupId=${querys[1]}&spokesmanShopId=${querys[2]}&spokesmanRelId=${querys[3]}`
            //   }
              
            // }else if(querys.length == 2){
            //   this.params += `&userId=${querys[1]}`
            // }
          }else if(querys[0] == "coupon"){
            this.page = `/personalCenter/coupon/getCoupon`;
            this.params+=`&couponId=${querys[1]}`
          }else if(querys[0] == "a"){
            this.page = "/activty/receivingGift"
            this.params += `&orderId=${querys[1]}`
            this.params += this.paramsHander(querys,3)
            // if(querys.length > 3){
            //   if(querys[5]){
            //     this.params += `&orderSn=${querys[1]}&spokesmanGroupId=${querys[2]}&spokesmanShopId=${querys[3]}&spokesmanRelId=${querys[4]}&userId=${querys[5]}`
            //   }else{
            //     this.params += `&orderSn=${querys[1]}&spokesmanGroupId=${querys[2]}&spokesmanShopId=${querys[3]}&spokesmanRelId=${querys[4]}`
            //   }
              
            // }else if(querys.length == 3){
            //   this.params += `&orderSn=${querys[1]}&userId=${querys[2]}`
            // }
          }else if (querys[0] == 'redeemCode') {//兑换码
            this.page = `/personalCenter/CDkey/exchange`;
          }else if(querys[0] == 'card'){
            this.page = `/giftCards/linkReceive`;
            this.params+=`&id=${querys[1]}`
            this.params += this.paramsHander(querys,3)
          }else if(querys[0] == 'giftView'){
            this.page = `/giftCoupon/preview`;
            this.params+=`&id=${querys[1]}`
          }else if(querys[0] == 'form'){//问卷调查
            this.page = `/smartForm`;
            this.params+=`&formId=${querys[1]}`;
            this.params += this.paramsHander(querys,3)
          }
        }
        console.log(querys, "scene");
        console.log(this.page)
        console.log(this.params)
      }
      
      
      // var query = options.query.dentistId; // 参数二维码传递过来的场景参数
    }
    this.init();
  },
  onShow(){
    let ss=wx.getStorageSync("sessionid");
    if (ss && !this.params.includes("sessionid")) {
       this.params +=`&sessionid=${ss}`
    }
    console.log(this.getTabBar,'312')
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: this.index
      })
    }
  },
  methods: {
    init() {
      // 获取小程序开启的订阅消息配置
      shop.getWxMiniSubscribeMessageConfig().then(res => {
        if (res.data.code == 200) {
          const data = res.data.data;
          console.log("wx mini subscribe message data: ", data);
          if (data != null) {
            const subscribeMessageObj = {};
            for (var key in data) {
              if(data[key] && data[key].template_id) {
                subscribeMessageObj[key] = data[key].template_id;
              }
            }

            this.$store.commit("setSubscribeMessageObj", subscribeMessageObj);
          }
        }
      });
    },
    checkLogin() {
      let getOpenid = wx.getStorageSync("openid");
      let getSessionid = wx.getStorageSync("sessionid");

      console.log('244',getOpenid,getSessionid);
      if (getOpenid == "" || getSessionid == "") {
        // this.params += "&logOut=true";
      }
    },
    getLocationHandle() {
      wx.getLocation({
        type: "wgs84",
        success: res => {
          var latitude = res.latitude;
          var longitude = res.longitude;
          var speed = res.speed;
          var accuracy = res.accuracy;
          console.log("~~~~~~~~~1~~~~~~~", res);
        },
        fail: res => {
          console.log("++++++++++2++++++", res);
        }
      });
    },
    async getSpokesman() {
      await spokesman.getSpokesmanidByShare().then(res => {
        if (res.data.code == 200) {
          if (res.data.data.hasInvitationStatus == 1) {
            this.hasInvitationStatus = 1;
            this.spokesmanGroupId = res.data.data.groupId;
            this.spokesmanShopId = res.data.data.shopId;
            this.spokesmanRelId = res.data.data.spokesmanId;

            this.newHref = `&spokesmanGroupId=${
              this.spokesmanGroupId
            }&spokesmanShopId=${this.spokesmanShopId}&spokesmanRelId=${
              this.spokesmanRelId
            }`;
          }else{
            this.newHref="";
          }
          console.log(this.newHref, "this.newHrefthis.newHrefthis.newHref");
        }
      });
    },
    bindViewTap() {
      const url = "../logs/main";
      if (mpvuePlatform === "wx") {
        mpvue.switchTab({ url });
      } else {
        mpvue.navigateTo({ url });
      }
    },
    //右上角分享时触发
    getMessage(res) {
      let len = res.target.data.length - 1;
      console.log(res, "h5消息", res.target.data[len]);
      this.shareShopName = res.target.data[len].shareShopName || "";
      this.shareLogoUrl = DFSImg(res.target.data[len].shareLogoUrl, 500, 400);
      
      //分享内容中有订单信息为送礼活动
      this.shareOrderSn = res.target.data[len].orderSn;
      this.shareTid = res.target.data[len].shareTid;
      this.newWindowHref = res.target.data[len].shareImgUrl;// + '&fromVisitorOpenId=' + wx.getStorageSync("openid")
      console.log("分享信息：", this.shareLogoUrl, this.shareShopName,1111111,this.newWindowHref);
      //文章详情分享埋点
      if(this.newWindowHref.indexOf('articleId')!=-1) {
        var articleId = ''
        var vars = this.newWindowHref.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            console.log(pair,2222)
            if (pair[0] == 'articleId') {
              articleId = pair[1];
            }
        }
        indexApi.forward({articleId: articleId,}).then(res=>{
        
        })
      }
    },
    //加载成功
    handleLoad(){
      console.log('网页加载成功');
    },
    handleError(data){
      wx.showLoading({
        title: "网页加载失败 请右上角刷新"
      });
      this.$mpAnalytics.recordError({
      data,
      extendsInfo: {
        mixid: this.$store.state.mixid || null
      }
    });
    },
    checkPageUrl(val) {
      for (let i = 0; i < this.sharePageList.length; i++) {
        if (val.indexOf(this.sharePageList[i]) != -1) {
          return true;
        }
      }
      return false;
    },
    //增加params参数
    paramsHander(querys,midNum){

      let params = ''
      if(querys.length > midNum){
        if(querys[midNum + 2]){
          params += `&spokesmanGroupId=${querys[midNum - 1]}&spokesmanShopId=${querys[midNum]}&spokesmanRelId=${querys[midNum+1]}&userId=${querys[midNum+2]}`
        }else{
          params += `&spokesmanGroupId=${querys[midNum - 1]}&spokesmanShopId=${querys[midNum]}&spokesmanRelId=${querys[midNum+1]}`
        }
        
      }else if(querys.length == midNum){
        params += `&userId=${querys[midNum - 1]}`
      }

      return params;
    }
  },
  onUnload() {
    console.log("卸载----------------", this.options);
  },
  async onShareAppMessage(res) {
    await this.getSpokesman();
    let url = ''
    console.log(this.newWindowHref + 'this.newWindowHref')
    //分享路径
    if(this.newWindowHref){
      url = this.newWindowHref;
    }else{
      url = res.webViewUrl;
    }
    //分享页面去掉登录态
    if (url.indexOf("sessionid") > -1) {
      url = url.split("?")[0] + "?mixid=" + this.shopId;
    }
    //分销员推广页面 默认分享分销员中心页面
    if (url.indexOf("/personalCenter/spokesmanCenter/mine/popularize") > -1) {
      url = `${this.baseUrl}/personalCenter/spokesmanCenter?mixid=${
        this.shopId
      }`;
    }

    console.log('shareUrl---------------' + url)
    //增加分销员信息
    if(this.hasInvitationStatus == 1 && url.indexOf('spokesmanGroupId')==-1){
      this.shareUrl = url+ this.newHref
    }else{
      this.shareUrl = url ;
    }
    

    console.log(this.shareUrl, "index12");
    console.log(`/pages/index/main?share=${encodeURIComponent(this.shareUrl)}`, '测试直播分享相关')
    return {
      title: this.shareShopName, // 默认是小程序的名称
      path: `/pages/index/main?share=${encodeURIComponent(this.shareUrl)}`, // 默认是当前页面
      imageUrl: this.shareLogoUrl,
      success: function(res) {
        // 转发成功之后的回调
        if (res.errMsg == "shareAppMessage:ok") {
          console.log(res, "分享成功");
        }
      },
      fail: function() {
        // 转发失败之后的回调
        if (res.errMsg == "shareAppMessage:fail cancel") {
          // 用户取消转发
          console.log(res, "分享失败");
        } else if (res.errMsg == "shareAppMessage:fail") {
          // 转发失败，其中 detail message 为详细失败信息
        }
      },
      complete: function() {
        // 转发结束之后的回调（转发成不成功都会执行）
      }
    };
  }
};
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.all {
  width: 7.5rem;
  height: 1rem;
  background-color: blue;
}
.all:after {
  display: block;
  content: "";
  clear: both;
}
.left {
  float: left;
  width: 3rem;
  height: 1rem;
  background-color: red;
}

.right {
  float: left;
  width: 4.5rem;
  height: 1rem;
  background-color: green;
}
</style>