<template> <div class="spr"> <img src="../../assets/images/activity/shier/shier1.jpg" alt="" srcset=""> <img src="../../assets/images/activity/shier/shier2.jpg" alt="" srcset=""> <img src="../../assets/images/activity/shier/shier3.jpg" alt="" srcset=""> <img src="../../assets/images/activity/shier/shier4.jpg" @click="goProduct('49a586a43d6a4768ac2dbb64052b72b0')" alt="" srcset=""> <img src="../../assets/images/activity/shier/shier5.jpg" alt="" srcset=""> <img src="../../assets/images/activity/shier/shier6.jpg" alt="" srcset=""> <div class="btm" @click="goProduct('49a586a43d6a4768ac2dbb64052b72b0')"> 立即购买 </div> </div> </template> <script> import config from '../../config.js' import jumpNative from '../../utils/JumpNative.js' import ShareService from '../../services/ShareService' export default { data() { return { } }, mounted() { }, created() { this.init(); }, mounted() { this.fontSize = document.body.clientWidth / 11.25 window.addEventListener('scroll', this.scrollBar, true); }, destroyed () { window.removeEventListener('scroll', this.scrollBar, true); }, methods: { init(){ if(!jumpNative.isAppH5()){ ShareService.shareProduct({ name: '国粹洗沐原浆 唤活秀发之美', desc: '秘方配制 十二味植物熬制原浆 无硅油 无化学成分 呵护您的秀发 体验猛戳', shareUrl: window.location.href, thumbUrl: config.app.shier, }); }else{ jumpNative.topRightShare(1,config.app.shier,'国粹洗沐原浆 唤活秀发之美','秘方配制 十二味植物熬制原浆 无硅油 无化学成分 呵护您的秀发 体验猛戳') } }, //跳转商品详情 goProduct(skuId){ if(!jumpNative.isAppH5()){ console.log(config.baseUrl+'p/'+skuId+'/'+this.$route.query.inviteCode); location.href=config.baseUrl+'p/'+skuId+'/'+this.$route.query.inviteCode }else{ jumpNative.jumpProduct(skuId) } }, }, beforeCreate: function() { document.getElementsByTagName("body")[0].className="body-sp01"; }, beforeDestroy: function() { document.body.removeAttribute("class","body-sp01"); } } </script> <style lang="less"> .body-sp01{ background: #fff; } </style> <style scoped> .spr { padding-bottom: 1.45rem; } .spr img { margin: 0px; padding: 0px; vertical-align: middle; width: 100%; } .spr .btm { position: fixed; bottom: 0; left: 0; right: 0; height: 1.45rem; line-height: 1.45rem; text-align: center; background: #ff4646; color: #fff; font-size: 0.48rem; } </style>
jumpNative
/** *JavaScript调用协议 */ //判断iOS还是Android const u = navigator.userAgent; const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 //判断是否是微信浏览器的函数 function isWeiXin() { //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型 var ua = window.navigator.userAgent.toLowerCase(); //通过正则表达式匹配ua中是否含有MicroMessenger字符串 if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } function GetUrlParam(paraName) { var url = document.location.toString(); var arrObj = url.split("?"); if (arrObj.length > 1) { var arrPara = arrObj[1].split("&"); var arr; for (var i = 0; i < arrPara.length; i++) { arr = arrPara[i].split("="); if (arr != null && arr[0] == paraName) { return arr[1]; } } return ""; } else { return ""; } } export default { //判断是否是APP内嵌H5页 isAppH5() { let ddm_from = parseInt(GetUrlParam("ddm_from")) let isApp = (ddm_from === 1 || ddm_from === 0) ? true : false return isApp && !isWeiXin() }, //判断是否Android checkAppType() { if (isAndroid) { return 'android' } else if (isiOS) { return 'ios' } }, //跳转到产品详情 jumpProduct(skuId) { if (isAndroid) { DDMallBridge.openProduct(skuId); } else if (isiOS) { window.webkit.messageHandlers.openProduct.postMessage(skuId) } else { console.log("非iOS,Android") } }, //跳转到新的H5页面 jumpH5(url) { if (isAndroid) { DDMallBridge.openHtml(url); } else if (isiOS) { window.webkit.messageHandlers.openHtml.postMessage(url); } else { console.log("非iOS,Android") } }, /* * 跳转到新的H5页面 * whiteStyle 白色样式,0:不启用;1:启用 * titleBarColor 标题栏背景颜色 * url 要打开的url * */ openColorHtml(whiteStyle, titleBarColor, url) { if (isAndroid) { DDMallBridge.openColorHtml(whiteStyle, titleBarColor, url); } else if (isiOS) { window.webkit.messageHandlers.openColorHtml.postMessage({ "whiteStyle": whiteStyle, "titleBarColor": titleBarColor, "url": url }); } }, /* * 设置分享类型 * shareType 0 不显示 1 分享当前页面URL,带默认分享元素 2 每日上新,App使用常量三要素+URL分享 * */ setTitleBarShareType(shareType, imgUrl, title, desc) { if (isAndroid) { DDMallBridge.setTitleBarShareType(shareType, imgUrl, title, desc); } else if (isiOS) { window.webkit.messageHandlers.setTitleBarShareType.postMessage({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc, }); } }, //弹出提示 toast(status, message) { if (isAndroid) { DDMallBridge.toast(status, message); } else if (isiOS) { window.webkit.messageHandlers.toast.postMessage({ status: status, message: message }); } else { console.log("非iOS,Android") } }, getOAuth() { if (isAndroid) { DDMallBridge.getOAuth() } else if (isiOS) { //window.webkit.messageHandlers.toast.postMessage({status:0,message:'asd'}); window.webkit.messageHandlers.getOAuth.postMessage('1') } else { console.log("非iOS,Android") } }, //调用分享 shareProduct(skuId) { if (isAndroid) { DDMallBridge.shareProductWithProfit(skuId); } else if (isiOS) { window.webkit.messageHandlers.shareProductWithProfit.postMessage(skuId); } else { console.log("非iOS,Android") } }, //控制标题栏透明度 setTitleBarAlpha(alpha) { if (isAndroid) { DDMallBridge.setTitleBarAlpha(alpha); } else if (isiOS) { window.webkit.messageHandlers.setTitleBarAlpha.postMessage(alpha); } else { console.log("非iOS,Android") } }, //控制标题栏资源样式 setTitleBarDarkRes(isDark) { if (isAndroid) { DDMallBridge.setTitleBarDarkRes(isDark); } else if (isiOS) { window.webkit.messageHandlers.setTitleBarDarkRes.postMessage(isDark); } else { console.log("非iOS,Android") } }, //跳转活动 1: 0元领面膜。 jumpActivity(type) { if (isAndroid) { DDMallBridge.jumpActivity(type); } else if (isiOS) { window.webkit.messageHandlers.jumpActivity.postMessage(type); } }, //跳转到我的粉丝 mode 模式(0:全部粉丝;1:直属粉丝;2:团队粉丝) jumpMyFans(mode) { console.log(mode) if (isAndroid) { console.log('跳转到我的粉丝:isAndroid,mode '+mode) DDMallBridge.jumpMyFans(mode); } else if (isiOS) { console.log('跳转到我的粉丝:isiOS,mode '+mode) window.webkit.messageHandlers.jumpMyFans.postMessage(mode); } }, //1. 分享当前页面URL,带默认分享元素 2. 0元领面膜,App使用常量4要素,URL为0元领面膜的着陆页 zeroShare(shareType, imgUrl, title, desc) { if (isAndroid) { console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc }); DDMallBridge.shareToWX(shareType, imgUrl, title, desc); } else if (isiOS) { console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc }); window.webkit.messageHandlers.shareToWX.postMessage({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc }); } else { console.log("非iOS,Android" + shareType, imgUrl, title, desc); } }, shareDownload(shareType, imgUrl, title, desc, link) { if (isAndroid) { DDMallBridge.shareToWX(shareType, imgUrl, title, desc, link); } else if (isiOS) { console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc }); window.webkit.messageHandlers.shareToWX.postMessage({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc, "shareUrl": link }); } else { console.log("非iOS,Android" + shareType, imgUrl, title, desc); } }, //右上角分享 topRightShare(shareType, imgUrl, title, desc) { if (isAndroid) { DDMallBridge.setTitleBarShareType(shareType, imgUrl, title, desc); } else if (isiOS) { console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc }); window.webkit.messageHandlers.setTitleBarShareType.postMessage({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc }); } else { console.log("非iOS,Android" + shareType, imgUrl, title, desc); } }, //结束上拉更多 hasMore 是否有更多(1:存在更多数据;0:没有更多数据) finishLoadMore(hasMore) { if (isAndroid) { DDMallBridge.finishLoadMore(hasMore); } else if (isiOS) { window.webkit.messageHandlers.finishLoadMore.postMessage(hasMore); } }, //设置首页快捷导航数据 setHomeShortcut(jsonArray) { if (isAndroid) { DDMallBridge.setHomeShortcut(jsonArray); } else if (isiOS) { window.webkit.messageHandlers.setHomeShortcut.postMessage(jsonArray); } }, //分享页面截图:0. 保存到本地1. 分享到微信2. 传递给H5,H5需要接收Base64、 URL encoded后的图片数据,JS方法vue.onScreenShot(int status,String base64) screenShotApp(type){ console.log('分享页面截图 type: '+type); if (isAndroid) { DDMallBridge.screenshot(type); } else if (isiOS) { window.webkit.messageHandlers.screenshot.postMessage(type); } } }
ShareService
import Config from '../config.js'; export default { initShare() { if (window.wx === undefined) return; let title = Config.app.name; let desc = Config.app.desc; let imgUrl = Config.app.Logo; let link = Config.app.shareUrl; this.doShare(title, desc, link, imgUrl); }, shareProduct(product) { if (window.wx === undefined) return; let title = product.name; let desc = product.desc||Config.app.desc; let imgUrl = product.thumbUrl || Config.app.Logo; let link = product.shareUrl; this.doShare(title, desc, link, imgUrl); }, shareCoupon(title, desc, link, imgUrl) { if (window.wx === undefined) return; imgUrl = imgUrl || Config.app.icon; this.doShare(title, desc, link, imgUrl); }, doShare(title, desc, link, imgUrl) { // WeChatService.initConfig(['onMenuShareTimeline', 'onMenuShareAppMessage', 'showMenuItems']); wx.ready(() => { wx.showMenuItems({ menuList: [ 'menuItem:share:appMessage', // 发送给朋友 'menuItem:share:timeline', // 分享到朋友圈 'onMenuShareTimeline', 'onMenuShareAppMessage', ] }); setTimeout(() => { //分享到朋友圈 wx.onMenuShareTimeline({ title, desc, link, imgUrl, success: function () { console.log('分享成功 title: '+title+' desc:'+desc); }, fail: (err) => { console.log(err); error && error(err); } }); //分享给朋友 wx.onMenuShareAppMessage({ title, desc, link, imgUrl , success: function () { console.log('分享成功 title: '+title+' desc:'+desc); }, fail: (err) => { console.log(err); error && error(err); }, complete:(complete)=>{ console.log(JSON.stringify(complete)); } }) }, 60) }); wx.error(function(res){ console.log('wx.error:'); console.log(JSON.stringify(res)); // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); } }
config.js
var dev_env = require('../config/dev.env'); var test_env = require('../config/test.env'); var pro_env = require('../config/prod.env'); var baseUrl = process.env.BASE_API;//研发后台接口 var h5Url = process.env.H5_URL;//静态H5地址的主站 var wechatUrl = process.env.WECHAT_URL;//微商城URL 用作APP里跳转用 var Logo = process.env.BASE_LOGO;//logo var Zero = process.env._zero;//0元购商品 export default { h5Url:h5Url, wechatUrl:wechatUrl, baseUrl: baseUrl, apiPrefix: baseUrl + 'ddmallapi', Logo:Logo, Zero:Zero, app: { name: '', desc: '', company: '', Logo: 'https://oss.dodomall.com/logo/logo.png', url: baseUrl, version: 'v1.0', csphone: '4000063037', //普通用户的邀请有奖 normalInviteUrl: wechatUrl + 'tobeowener', //店主用户的邀请有奖 vipInviteUrl: wechatUrl + 'beowener', //关注我们 followUrl: wechatUrl + 'share-qrcode', //注册协议 agreementUrl: wechatUrl + 'register-protocol', //隐私协议 privacyUrl: wechatUrl + 'privacy-protocol', //常见问题 commonIssues: wechatUrl + 'mine/common-issues', //常见问题 newComerGuideUrl: wechatUrl + 'mine/newcomer-guide', //logo //新手指引 newcomerGuide: 'https://oss.dodomall.com/app/newcomerLogo.png', //关于我们 aboutUs: 'https://oss.dodomall.com/app/newcomerLogo.png', //成为店主 joinUrl:'https://oss.dodomall.com/app/giftLogo.png', //邀请有奖 inviteLogo: 'https://oss.dodomall.com/app/inviteLogo.png', //每日上新 dailyNew:'https://oss.dodomall.com/wap/meirishangxin.png', //新人专享 newComer:'https://oss.dodomall.com/wap/xinrenzhuanxiang.png', //佣金翻倍 commssion:'https://oss.dodomall.com/wap/yongjinfanbei.png', //母婴活动 mom:'https://oss.dodomall.com/app/2019-01/mom-body.jpg', qingrenjie:'http://oss.dianduoduo.store/product/2019-02/20190213063815268WQ.png', spring: 'https://oss.dodomall.com/app/2019-01/activity-beauty.jpg', spr: 'https://oss.dodomall.com/app/2019-01/activity-buy.jpg', //0元领 fansActivity:'https://oss.dodomall.com/activity/activity1/activity1_1.png' }, enableAlipay: true, enableWepay: true, offlinePayMinMoney: 9900, withdrawMin: 1, withdrawMax: 1000000, agreementName: '店多多用户服务协议', refundReasons: ['拍错了 / 信息填写错误', '不想要了', '其它'], refundGoodsReasons: ['拍错了 / 信息填写错误', '不想要了', '其它'], expressNames: ['圆通快递', '申通快递', '顺丰快递', '韵达快递', '德邦物流', '中通快递', '百世快递', '邮政包裹', 'EMS', '邮政国际'], toast: [{ id: 'noLogin', title: '你还未设置密码', message: '密码可用于登录、转帐、提现等,为保证帐户安全,请设置密码' }] }