//jweixin-1.4.0 一定要下载这个版本 踩过坑
<template> <view class="container"> <view class="content"> <!-- <view :style="styleobj1" class="topContent"> --> <view class="topContent"> <view class="couponBox hide"> <view class="tipsText"> 好友得新人礼，我得奖励 </view> <view class="quans"> <view class="quan1 Cfff"> <view class="fs28 tac lh70">无门槛</view> <view class="tac"> <text class="fs30">￥</text> <text class="fs50 fw400">5</text> </view> </view> <view class="quan2 Cfff"> <view class="fs28 tac lh70">满35可用</view> <view class="tac"> <text class="fs30">￥</text> <text class="fs50 fw400">10 </text> <text class="fs20"> (仅生鲜)</text> </view> </view> </view> </view> <image :src="topImg" style=" 100%;height: 510upx;" mode=""></image> </view> <view class="step"> <text>①发送邀请给好友</text> <text>②好友下单并收货</text> <text>③奖励到账</text> </view> <view style="100%;height:65upx;overflow: hidden;" class=""> <view class="page-section-spacing"> <swiper class="swiper1" vertical="true" :circular="circular" :indicator-dots="indicatorDots" autoplay="true" interval="4000" duration="400" > <swiper-item v-for="(item,index) in invite_log" :key="index"> <view class="tipsBox"> {{hiddenTel(item.p_member_name,3,3)}}成功邀请{{hiddenTel(item.member_name,3,3)}},获取{{item.value}}积分 <!-- {{item.p_member_name}}成功邀请{{item.member_name}},获取{{item.value}}积分 --> </view> </swiper-item> </swiper> </view> </view> <view class="buttonBox"> <!-- #ifdef H5 --> <view @click="H5Share" class="button"> <image src="../../static/images/personalCenter/y2_wechat.png" mode=""></image> <text>立即邀请微信好友</text> </view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <button class="button" data-name="shareBtn" open-type="share"> <image src="../../static/images/personalCenter/y2_wechat.png" mode=""></image> <text>立即邀请微信好友</text> </button> <!-- #endif --> </view> <view class="share"> <!-- #ifdef H5 --> <view @click="H5Share" class="friend"> <image src="../../static/images/personalCenter/y2_pyq.png" mode=""></image> <text>分享到朋友圈</text> </view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view @click="noOpen" class="friend"> <image src="../../static/images/personalCenter/y2_pyq.png" mode=""></image> <text>分享到朋友圈</text> </view> <!-- #endif --> <view @click="openCode" class="meet"> <image src="../../static/images/personalCenter/y2_code.png" mode=""></image> <text>面对面邀请</text> </view> </view> <view style="height:20upx;background-color: #f1f1f1;"></view> <view class="person"> <view class="tabBox"> <view class="tabBoxs" @click="tabClick(1)"> <text :class="{'active': index == 1}">我的邀请</text> </view> <view class="tabBoxs" @click="tabClick(2)"> <text :class="{'active': index == 2}">活动规则</text> </view> </view> <view v-if="index == 1" class="box1"> <view class="box2 box3 C7C7C7C fs26"> <text>成功邀请</text> <text>{{my_invite}}人</text> </view> <view class="box2 C7C7C7C fs26"> <text>获得积分</text> <text class="coupon">{{reward_num}}积分</text> </view> </view> <view v-if="index == 2"> <view v-html="invite_rule" class="plr20 pT20"> </view> </view> </view> <view class="C999 tac 2h100"> <!-- 没有更多了 --> </view> </view> <uni-popup ref="code" type="center"> <view class="code"> <image :src="code" mode=""></image> </view> </uni-popup> </view> </template> <script> // #ifdef H5 import WX from '@/node_modules/jweixin-wechat/jweixin-1.4.0'; // #endif import uniPopup from '@/components/uni-popup/uni-popup.vue' export default { components:{ uniPopup }, data(){ return { invite_rule:"", topImg:"", styleobj1:{}, bgImg:"", indicatorDots:false, circular:true, index:1, curpage:1, my_invite:0, reward_num:0, invite_log:[], code:"", member_id:0, } }, onShow() { // #ifdef H5 let that=this // let jweixin = require('jweixin-module') let surl = encodeURIComponent(window.location.href) // let surl = encodeURIComponent(window.location.href.split('?')[0]) || encodeURIComponent(window.location.href.split('#')[0]); // let surl = "https://qkg.aitecc.com/QKG/" console.log('surl') console.log(surl) this.$util.request({ url: '/mobile/index.php?act=index&op=getWxApiConfig', method: 'get', data: { url: surl }, }).then((res)=> { if(res.error_code == 0){ console.log(res.datas.signPackage.appId) console.log(res.datas.signPackage.timestamp) console.log(res.datas.signPackage.nonceStr) console.log(res.datas.signPackage.signature) // surl: surl+"/pages/home/home?scene="+that.member_id, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确 // jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] WX.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端console.log出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: res.datas.signPackage.appId, // 必填，公众号的唯一标识 timestamp: res.datas.signPackage.timestamp, // 必填，生成签名的时间戳 nonceStr: res.datas.signPackage.nonceStr, // 必填，生成签名的随机串 signature: res.datas.signPackage.signature, // 必填，签名，见附录1 jsApiList:['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的js接口列表 }); WX.ready(function() { console.log(1) //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） WX.onMenuShareTimeline({ title: '好友分享', // 分享标题 desc: "分享注册", // 分享描述 link: "https://qkg.aitecc.com/QKG/#/pages/home/home?member_id="+that.member_id, // 分享链接 imgUrl: that.topImg, // 分享图标 success: function() { // 用户确认分享后执行的回调函数 console.log(2) }, cancel: function() { console.log(6) // 用户取消分享后执行的回调函数 } }); //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） WX.onMenuShareAppMessage({ title: '好友分享', // 分享标题 desc: "分享注册", link: "https://qkg.aitecc.com/QKG/#/pages/home/home?member_id="+that.member_id, // 分享链接 imgUrl: that.topImg, // 分享图标 success: function() { console.log(3) // 用户确认分享后执行的回调函数 }, cancel: function() { console.log(5) // 用户取消分享后执行的回调函数 } }); console.log(4) }); }else{ uni.showToast({ title:res.message, icon:"none" }) } }) // #endif }, onLoad() { this.getData() this.getCode() this.member_id=uni.getStorageSync('api_member_id') let that=this // #ifdef H5 // #endif }, onShareTimeline(){ return { title: "邀请好友注册", path: '/pages/home/home?scene='+this.member_id, imageUrl:this.topImg } }, onShareAppMessage() { return { title: "邀请好友注册", path: '/pages/home/home?scene='+this.member_id, imageUrl:this.topImg } }, methods:{ //H5分享 H5Share(){ uni.showToast({ title:"点击右上角可以分享哟", icon:"none" }) }, noOpen(){ uni.showToast({ title:"该功能暂未开放", icon:"none" }) }, hiddenTel(str,frontLen,endLen) { // return false var len = str.length-frontLen-endLen; var xing = ''; for (var i=0;i<len;i++) { xing+='*'; } return str.substring(0,frontLen)+xing+str.substring(str.length-endLen); }, openCode(){ this.$refs.code.open() }, getCode(){ // 两个码 let that=this this.$util.request({ url: '/mobile/index.php?act=member_invite&op=faceToFace', method: 'post', data: {}, }).then((res)=> { if(res.error_code == 0){ // #ifdef H5 that.code=res.datas.public_url // #endif // #ifdef MP-WEIXIN that.code=res.datas.applet_url // #endif } }) }, getData(){ let that=this this.$util.request({ url: '/mobile/index.php?act=member_invite&op=inviteIndex', method: 'post', data: { "curpage":this.curpage }, }).then((res)=> { if(res.error_code == 0){ that.invite_rule=res.datas.invite_rule that.my_invite=res.datas.my_invite that.reward_num=res.datas.reward_num that.invite_log=res.datas.invite_log that.invite_top_img=res.datas.invite_top_img // that.code=res.datas.invite_qrcode_url that.styleobj1.backgroundImage='url(' + res.datas.invite_top_img + ')' that.topImg=res.datas.invite_top_img }else{ uni.showToast({ title:res.message, icon:"none" }) } }) }, tabClick(value){ if(value == 1){ this.index = 1 }else{ this.index = 2 } } } } </script> <style lang="scss"> @import url('../../../common/commonCss/dfcCommon.css'); page{ font-size: 24upx; } .flex{ display: flex; justify-content: center; align-items: center; } .container{ 100%; } .content{ 100%; } .topContent{ position: relative; 100%; height: 510upx; // background: url(../../static/images/personalCenter/y2_bg.png) no-repeat 100%/100%; background-repeat: none; background-size: cover; display: flex; justify-content: center; align-items: center; } .couponBox{ margin-top: 270upx; 537upx; height: 196upx; box-sizing: border-box; position: relative; background: url(../../static/images/personalCenter/y2_bg2.png) no-repeat 100%/100%; } .tipsText{ display:block; 353upx; padding: 20upx; text-align: center; box-sizing: border-box; background:rgba(251,78,51,1); box-shadow:3px -4px 10px 0px rgba(0, 0, 0, 0.08); border-radius:31upx; color:#fff; position: absolute; left: 50%; top: -50upx; transform: translateX(-50%); } .step{ display: flex; justify-content: space-around; background-color: #F6D372; padding: 20upx 0; box-sizing: border-box; color:#A5672C; font-size: 25upx; } .tipsBox{ padding: 20upx 0; box-sizing: border-box; background-color: #fae5e2; color: #fe7a0d; display: flex; align-items: center; justify-content: center; font-size: 24upx; } .buttonBox{ 100%; margin-top: 40upx; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding-bottom: 60upx; } .buttonBox .button{ display: flex; justify-content: center; align-items: center; font-size: 34upx; background-color: #f42221; padding: 0upx 120upx; box-sizing: border-box; color:#fff; border-radius: 92upx; image{ margin-top: 2upx; 54upx; height: 50upx; } } .share{ 100%; display: flex; font-size: 32upx; } .share .friend,.meet{ flex:1; display: flex; justify-content: center; align-items: center; align-content: center; padding: 20upx 0; box-sizing: border-box; image{ 38upx; height: 38upx; padding-right: 6upx; } } .person{ 100%; display: flex; flex-flow: column; } .person .tabBox{ 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 2upx solid #f4f4f4; } .person .tabBoxs{ 100%; display: flex; align-items: center; justify-content:center; } .tabBoxs>text{ font-size: 30upx; padding: 20upx 80upx; box-sizing: border-box; border-bottom: 2upx solid #fff; } .person .tabBoxs .active{ color: #f42223; border-bottom : 4upx solid #f42223; } .box1{ display: flex; border-bottom: 2upx solid #f4f4f4; } .box2{ flex: 1; display: flex; justify-content: center; align-items: center; flex-flow: column; } .box2>text{ margin-top: 20upx; } .box2>text:last-child{ margin-top: 20upx; margin-bottom: 20upx; } .box3{ border-right: 2upx solid #f4f4f4; } .swiper1{ height: 65upx; } .quans{ 537upx; height: 196upx; padding:35upx 45upx; box-sizing: border-box; display: flex; justify-content: space-between; align-content: center; } .quans view.quan1{ background:url(../../static/images/personalCenter/y2_quan2.png) no-repeat; background-size: cover; position: relative; } .quans view.quan2{ background:url(../../static/images/personalCenter/y2_quan1.png) no-repeat; position: relative; background-size: cover; } .quans>view{ 206upx; height: 140upx; } .code{ 360upx; height: 360upx; background-color: #fff; } .code image{ 100%; height: 100%; } </style>