<template> <div> <web-view v-if="withoutScene" :src="newPageUrl" @message="getMessage" @error="handleError" @load="handleLoad"></web-view> </div> </template> <script> let forUrlAddKey = require("mayi-front-tools/forUrlAddKey").default; let getUrlKey = require("mayi-front-tools/getUrlKey").default; import spokesman from "@/api/spokesman.js"; import shop from "@/api/shop.js"; import indexApi from "@/api/index.js"; import { serialize, getQueryVariable, DFSImg, parseQueryString } from "@/utils/index"; import login from "@/api/login"; import { getStoreInfo, setStoreInfo } from "@/utils/mayi.js"; const app = getApp(); const { log } = app; export default { data() { return { newPageUrl: "", code: '', shopId: this.$store.state.mixid, options: {}, session_key: "", baseUrl: process.env.BASE_URL, link: this.baseUrl, page: "/", location_obj:encodeURIComponent(wx.getStorageSync("location")), params: "?mixid=" + this.shopId+`&native_test=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() { if(this.location_obj){ this.params += `&location_obj=${this.location_obj}`; } if(wx.getStorageSync("sessionid")){ this.params +=`&sessionid=${wx.getStorageSync("sessionid")}`; } if(wx.getStorageSync("enterpriseAccount")){ this.params +=`&enterpriseAccount=${wx.getStorageSync("enterpriseAccount")}`; } // url添加门店信息参数 let { offlineShopCode, offlineShopName } = getStoreInfo(); console.log(offlineShopCode,'----index-offlineShopCode') if (offlineShopCode) { this.params+=`&offlineShopCode=${offlineShopCode}&offlineShopName=${offlineShopName}` } // 定位信息 let locationObj = wx.getStorageSync("locationObj") ? JSON.parse(wx.getStorageSync("locationObj")) : ""; if (locationObj) { let { latitude, longitude } = locationObj; this.params+=`&latitude=${latitude}&longitude=${longitude}` } console.log(this.link,'=======',this.page,'++++++++++++++',this.params,'************') let pageUrl1 = (this.page.startsWith('http://') || this.page.startsWith('https://'))? (this.page + this.params) : this.link+this.page+this.params console.log(pageUrl1,'--------pageUrl1--') let pageUrl = forUrlAddKey(decodeURIComponent(pageUrl1)); console.log(pageUrl,'--------pageUrl') // let pageUrl = this.link+this.page+this.params; return pageUrl; }, }, watch: { pageUrl(n,o) { if(!this.withoutScene) { return; } this.newPageUrl = this.pageUrl; console.log('------------------index----2') // 进入直播页面调用不息屏api console.log(this.pageUrl,this.pageUrl.includes('/liveBroadcast/lived'),"this.pageUrl.includes('/liveBroadcast/lived')") if(this.pageUrl.includes('/liveBroadcast/lived')){ wx.setKeepScreenOn({ keepScreenOn: true, }) } //埋点未登录时进入文章 // this.params+='&articleId=111' log.info('watch-pageUrl-sessionid',wx.getStorageSync("sessionid")) log.info('watch-pageUrl-pageUrl',this.pageUrl) if(!wx.getStorageSync("sessionid")&&this.pageUrl.indexOf('articleId')!=-1) { // wx.setStorageSync('articleId',true) var vars = this.pageUrl.split("&"); log.info('watch-pageUrl.split("&")',vars) for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == 'articleId') { wx.setStorageSync(this.$store.state.mixid+'articleId',pair[1]) } } } // 小程序登录绑定手机号后回调页面记录客流渠道记录数据。 if (wx.getStorageSync('sessionid') && wx.getStorageSync('attractingCustomerChannelId') && this.pageUrl.indexOf('open_id') != -1) { log.info('绑定手机号后登陆回调页') let openId = this.pageUrl.split('open_id=')[1].split('&')[0] let unionId = null if (this.pageUrl.split('unionId=')[1]) { unionId = this.pageUrl.split('unionId=')[1].split('&')[0] } let addRecordQuery = { attractingCustomersChannelId: wx.getStorageSync('attractingCustomerChannelId'), miniOpenId: openId, unionId: unionId, registerFlag: 1, newRegisterFlag: 0, } indexApi.addRecord(addRecordQuery).then(ele=>{ log.info('watch-pageUrl-addRecord',addRecordQuery,ele) if (ele.data.data) { //清空引客渠道id wx.setStorageSync('attractingCustomerChannelId',''); } }) } } }, onLoad(options) { console.log(options,'---options') if(wx.getStorageSync("sessionid")) { //清空门店id wx.setStorageSync(this.$store.state.mixid+'storeId','') wx.setStorageSync(this.$store.state.mixid+'sellerId','') } this.options = options; log.info(this.options,'----------------index-----options') Object.assign(this.$data, this.$options.data()); try { const h5Params = options && options.params ? JSON.parse(decodeURIComponent(options.params)) : ""; if (h5Params && h5Params.offlineShopCode) { // 存储h5url门店信息 setStoreInfo({ offlineShopCode:h5Params.offlineShopCode, offlineShopName:h5Params.offlineShopName, }); } } catch (e) { console.log(e) } if(wx.getStorageSync("workBox")){ this.params += `&workBox=${wx.getStorageSync("workBox")}` } let op=wx.getStorageSync("openid") if (op) { this.params += '&open_id='+wx.getStorageSync("openid"); this.withoutScene = true; }else{ //获取openId wx.login({ success: res => { this.code = res.code; log.info(this.code,'-----------------------------110---code') login.get_open_id_by_code({ code: this.code}).then(res1 => { log.info('onLoad-api:get_open_id_by_code',this.code,res1) if (res1.data.code == 200) { wx.setStorage({ key: "openid", data: res1.data.data }); } this.params += '&open_id='+wx.getStorageSync("openid"); this.withoutScene = true; }) }, }) } // 移除重复参数 if (options.params) { let params=decodeURIComponent(options.params) let location_obj=getQueryVariable(params, "location_obj") location_obj && (options.params=params.split('&location_obj='+location_obj).join('')) } //检测登录态 this.checkLogin(); this.options = options; if (options.share) { log.info('options.share',options.share) //来自分享 this.link = decodeURIComponent(options.share); log.info('options.share-link',this.link) 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 != "") { //上级分销员信息 let spokesmanInfo = { spokesmanGroupId: this.spokesmanGroupId, spokesmanShopId: this.spokesmanShopId, spokesmanRelId: this.spokesmanRelId } log.info('options.share-上级分销员信息',spokesmanInfo) this.$store.commit("setSpokesman", spokesmanInfo); } if (getQueryVariable(this.link, "offlineShopCode")) { // 存储h5url门店信息 setStoreInfo({ offlineShopCode: getQueryVariable(this.link, "offlineShopCode"), offlineShopName: getQueryVariable(this.link, "offlineShopName"), }); } this.page = ""; this.params = ""; } else if (options.from && options.from == "h5login") { let params = JSON.parse(options.params); log.info(params.sessionid,'--------------h5login--params') //来自h5登录 wx.setStorage({ key: "sessionid", data: params.sessionid }); if(params.enterpriseAccount) { wx.setStorage({ key: "enterpriseAccount", data: params.enterpriseAccount }); } this.page = decodeURIComponent(options.backpath); log.info(this.page,'----------------------h5login--page') options.params && (this.params += "&" + serialize(params)); } 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_test=1&location_obj=${this.location_obj}`; } options.params && (this.params += "&" + serialize(decodeURIComponent(options.params))); } else if (options.from && options.from == "themeLink") { log.info('options.from == "themeLink') console.log('options.from == "themeLink') // 多主题link this.page = decodeURIComponent(options.backpath); this.params += "&" + decodeURIComponent(options.params); } else if(options.from && (options.from == "liveList" || options.from == "livedBackShop" || options.from == "livedToGoodsInfo" || options.from == "livedToOrderConfirm")){ //从主播端跳到商品 //直播页back到商城 //从直播详情商品列表到商城商品详情 //从直播详情商品列表到商城确认订单 this.page = decodeURIComponent(options.backpath); this.params += "&" + serialize(options.params); } else if (options.from && options.from == "login") { log.info('options.from == "login"') //来自小程序登录页面 this.page = decodeURIComponent(options.backpath); this.params += "&" + decodeURIComponent(options.params); console.log(this.page, this.params,'-----------index---221') log.info(this.page, this.params,'-----------index---221') } else if (options.from && options.from == "logout") { log.info('options.from == "logout"') //来自用户登出 wx.removeStorage({ key: "sessionid" }); wx.removeStorage({ key: "openid" }); wx.removeStorage({ key: "enterpriseAccount" }); } else if (options.from && options.from == "address") { log.info('options.from == "address"') // 来自小程序地址页面 this.link = decodeURIComponent(options.backpath); log.info("adress", options.backpath, this.link); this.page = ""; this.params = ""; } else if (options.from == "wxPay") { log.info('options.from == "wxPay"') //来自支付页面 this.page = options.backpath; this.params += "&" + serialize(options.params); } else if (options.scene) { log.info('options.scene',options) if(options.scene.indexOf('_') == -1){ log.info("新版本(scene参数)分享进入") this.withoutScene = false; //新二维码扫码进入 wx.nextTick(() => { indexApi.getShareSceneRecord(options.scene).then(res=>{ this.withoutScene = true; log.info('getShareSceneRecord',res) if(res.data.code == '200'){ this.page = decodeURIComponent(res.data.data.pageUri); let paramsObj = JSON.parse(res.data.data.scene); wx.setStorageSync('attractingCustomerChannelId',paramsObj.attractingCustomerChannelId); wx.setStorageSync(this.$store.state.mixid+'storeId',paramsObj.storeId); wx.setStorageSync(this.$store.state.mixid+'sellerId',paramsObj.sellerId); wx.login({ success: res => { login.get_open_id_by_code({ code: res.code}).then(res1 => { log.info('get_open_id_by_code',res1) if (res1.data.code == 200) { wx.setStorageSync({ key: "openid", data: res1.data.data }); log.info('判断是否登录过=登陆过直接调用..未登录过需要授权头像昵称信息。') if (wx.getStorageSync('sessionid')) { log.info('已登陆了') let addRecordQuery = { attractingCustomersChannelId: paramsObj.attractingCustomerChannelId, miniOpenId: res1.data.data, registerFlag: 1, newRegisterFlag: 0, }; indexApi.addRecord(addRecordQuery).then(ele=>{ log.info('addRecord',addRecordQuery,ele) if (ele.data.data) { //清空引客渠道id wx.setStorageSync('attractingCustomerChannelId',''); } }) } else { /** * 如果进入的是需要登录的webview页面 h5环境有接口300就会重定向到登录页面 * 这里也判断了是否登录就跳转到登录页面 * 这样就会重复跳转到登录页面 */ log.info('未登录过需要授权头像昵称信息。') console.log('未登录过需要授权头像昵称信息。') const url = `/pages/login/main?back=${encodeURIComponent(this.page)}¶ms=${ JSON.stringify(paramsObj) }`; log.info(url) // wx.navigateTo({url}); } } }) }, }) let params = ''; for(let i in paramsObj){ params += "&"+i+'='+paramsObj[i] } this.params += params } }).catch((err)=>{ this.withoutScene = true; }) }); }else { log.info('老版本分享(下划线拼接参数)') //来自扫码 // 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) } } log.info(querys, "scene"); log.info(this.page) log.info(this.params) } // var query = options.query.dentistId; // 参数二维码传递过来的场景参数 } this.newPageUrl = this.pageUrl; this.init(); }, onShow(){ this.withoutScene = true; console.log(this.withoutScene,this.newPageUrl,'index页面------onShow') log.info('index页面------onShow') }, methods: { init() { // 获取小程序开启的订阅消息配置 shop.getWxMiniSubscribeMessageConfig().then(res => { if (res.data.code == 200) { const data = res.data.data; log.info("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"); log.info('methods-checkLogin',getOpenid,getSessionid); if (getOpenid == "" || getSessionid == "") { // this.params += "&logOut=true"; } }, async getSpokesman() { await spokesman.getSpokesmanidByShare().then(res => { log.info('onShareAppMessage-getSpokesmanidByShare',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=""; } log.info('onShareAppMessage-getSpokesmanidByShare',this.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; log.info('右上角分享触发',res, res.target.data[len]); console.log('右上角分享触发',res, res.target.data[len]); this.shareShopName = res.target.data[len].shareShopName || ""; this.shareLogoUrl = res.target.data[len].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 + '&verifyShare=1';// + '&fromVisitorOpenId=' + wx.getStorageSync("openid") log.info("getMessage-分享信息:", this.shareLogoUrl, this.shareShopName,1111111,this.newWindowHref); console.log("getMessage-分享信息:", 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("="); log.info(pair,2222) if (pair[0] == 'articleId') { articleId = pair[1]; } } indexApi.forward({articleId: articleId,}).then(res=>{ }) } }, //加载成功 handleLoad(){ log.info('网页加载成功'); }, handleError(data){ log.info('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; }, delParam(oldUrl,paramKey) { var url = oldUrl; //页面url var urlParam = oldUrl.split("?")[1]; //页面参数 var beforeUrl = url.substr(0, url.indexOf("?")); //页面主地址(参数之前地址) var nextUrl = ""; var arr = new Array(); if (urlParam != "") { var urlParamArr = urlParam.split("&"); //将参数按照&符分成数组 for (var i = 0; i < urlParamArr.length; i++) { var paramArr = urlParamArr[i].split("="); //将参数键,值拆开 //如果键雨要删除的不一致,则加入到参数中 if (paramArr[0] != paramKey) { arr.push(urlParamArr[i]); } } } if (arr.length > 0) { nextUrl = "?" + arr.join("&"); } url = beforeUrl + nextUrl; return url; }, }, onUnload() { log.info("卸载----------------", this.options); }, async onShareAppMessage(res) { log.info('onShareAppMessage',res) await this.getSpokesman(); let url = '' log.info(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; url = this.delParam(this.newWindowHref,'sessionid') url = this.delParam(url,'open_id') } //分销员推广页面 默认分享分销员中心页面 if (url.indexOf("/personalCenter/spokesmanCenter/mine/popularize") > -1) { url = `${this.baseUrl}/personalCenter/spokesmanCenter?mixid=${ this.shopId }`; } log.info('shareUrl---------------' + url) //增加分销员信息 if(this.hasInvitationStatus == 1 && url.indexOf('spokesmanGroupId')==-1){ this.shareUrl = url+ this.newHref }else{ this.shareUrl = url ; } log.info('onShareAppMessage-shareUrl',this.shareUrl,); log.info(`/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") { log.info(res, "分享成功"); } }, fail: function() { // 转发失败之后的回调 if (res.errMsg == "shareAppMessage:fail cancel") { // 用户取消转发 log.info(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>