//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="width: 100%;height: 510upx;" mode=""></image>
</view>
<view class="step">
<text>①发送邀请给好友</text>
<text>②好友下单并收货</text>
<text>③奖励到账</text>
</view>
<view style="width: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{
width: 100%;
}
.content{
width: 100%;
}
.topContent{
position: relative;
width: 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;
width: 537upx;
height: 196upx;
box-sizing: border-box;
position: relative;
background: url(../../static/images/personalCenter/y2_bg2.png) no-repeat 100%/100%;
}
.tipsText{
display:block;
width: 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{
width: 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;
width: 54upx;
height: 50upx;
}
}
.share{
width: 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{
width: 38upx;
height: 38upx;
padding-right: 6upx;
}
}
.person{
width: 100%;
display: flex;
flex-flow: column;
}
.person .tabBox{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2upx solid #f4f4f4;
}
.person .tabBoxs{
width: 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{
width: 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{
width: 206upx;
height: 140upx;
}
.code{
width: 360upx;
height: 360upx;
background-color: #fff;
}
.code image{
width: 100%;
height: 100%;
}
</style>
浙公网安备 33010602011771号