Skip to content

H
h5-base
Commit 5bbc20ff authored by liwei's avatar liwei
Browse files
Options

liwei

parent 2d6c0aa9
Hide whitespace changes
Inline Side-by-side
Showing with 492 additions and 469 deletions
src/components/buy/activity.vue
View file @ 5bbc20ff
<template> <template>
<div> <div>
<div class="activity"> <div class="activity">
<img class="headerImg" :src="header1"> <img class="headerImg" :src="header1" />
<img class="headerImg" :src="header2"> <img class="headerImg" :src="header2" />
<div class="inviteContainer"> <div class="inviteContainer">
<img class="invite-title" :src="inviteResultTitle"> <img class="invite-title" :src="inviteResultTitle" />
<img class="invite-icon" :src="header_icon"/> <img class="invite-icon" :src="header_icon" />
<div class="invite-list"> <div class="invite-list">
<div class="flex-center i-title"> <div class="flex-center i-title">
<span>受邀购买</span> <span>受邀购买</span>
...@@ -21,479 +21,529 @@ ...@@ -21,479 +21,529 @@
<ul class="p-list"> <ul class="p-list">
<li v-for="data in inviteList"> <li v-for="data in inviteList">
<div class="flex-start no-margin"> <div class="flex-start no-margin">
<img :src="data.avatar"/> <img :src="data.avatar" />
<span>{{data.nickname}}</span> <span>{{data.nickname}}</span>
</div> </div>
<span class="no-margin">{{data.pay_at | formatDate}}</span> <span class="no-margin">{{data.pay_at | formatDate}}</span>
</li> </li>
</ul> </ul>
<img v-if="total > 3" class="moreBtn" :src="moreResult" @click="goToInviteList"> <img v-if="total > 3" class="moreBtn" :src="moreResult" @click="goToInviteList" />
</template> </template>
</div> </div>
<img class="headerImg" :src="header4"> <img class="headerImg" :src="header4" />
<div class="invite-btn"> <div class="invite-btn">
<img :src="inviteBtn" @click="goToInvite"> <img :src="inviteBtn" @click="goToInvite" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import QRCode from 'qrcodejs2' import QRCode from "qrcodejs2";
import {getwechatParam,getGoodsDetailApi,getGroupDetailApi,getStatusWechatApi,getInviteResultApi,getInviteListApi} from "../../service/api"; import {
import refBg from '../../assets/refBg.png' getwechatParam,
import moreUrl from '../../assets/moreIcon.png' getGoodsDetailApi,
import refIcon from '../../assets/refIcon.png' getGroupDetailApi,
import weChatIcon from '../../assets/wechatIcon.png' getStatusWechatApi,
import weChatQrUrl from '../../assets/weChatCode.png' getInviteResultApi,
import closeUrl from '../../assets/closemy.png' getInviteListApi
import html2canvas from 'html2canvas' } from "../../service/api";
import refBg from "../../assets/refBg.png";
import moreUrl from "../../assets/moreIcon.png";
import refIcon from "../../assets/refIcon.png";
import weChatIcon from "../../assets/wechatIcon.png";
import weChatQrUrl from "../../assets/weChatCode.png";
import closeUrl from "../../assets/closemy.png";
import html2canvas from "html2canvas";
import header_1 from '../../assets/activity/title1.png' import header_1 from "../../assets/activity/title1.png";
import header_icon from '../../assets/activity/icon.png' import header_icon from "../../assets/activity/icon.png";
import header_2 from '../../assets/activity/21.png' import header_2 from "../../assets/activity/21.png";
import header_3 from '../../assets/activity/31.jpg' import header_3 from "../../assets/activity/31.jpg";
import header_4 from '../../assets/activity/4.png' import header_4 from "../../assets/activity/4.png";
import invite_result_title from '../../assets/activity/invite_result.png' import invite_result_title from "../../assets/activity/invite_result.png";
import more_result from '../../assets/activity/more.png' import more_result from "../../assets/activity/more.png";
import invite_poster from '../../assets/activity/btn.png' import invite_poster from "../../assets/activity/btn.png";
import noData from '../../assets/activity/no_data.png' import noData from "../../assets/activity/no_data.png";
export default { export default {
name: "index", name: "index",
data(){ data() {
return { return {
header1: header_1, header1: header_1,
header2: header_2, header2: header_2,
header3:header_3, header3: header_3,
header_icon:header_icon, header_icon: header_icon,
header4: header_4, header4: header_4,
inviteResultTitle: invite_result_title, inviteResultTitle: invite_result_title,
moreResult: more_result, moreResult: more_result,
inviteBtn: invite_poster, inviteBtn: invite_poster,
refBg:refBg, refBg: refBg,
join:false, join: false,
popType:false, popType: false,
popFill:false, popFill: false,
popupVisible:false, popupVisible: false,
refVisible:false, refVisible: false,
tabType:true, tabType: true,
popcontentW:`您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`, popcontentW: `您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`,
popcontentT:`为了更好地为您进行课程服务，<br>请扫码添加老师二维码`, popcontentT: `为了更好地为您进行课程服务，<br>请扫码添加老师二维码`,
qrCode:weChatQrUrl, qrCode: weChatQrUrl,
weChatIcon:weChatIcon, weChatIcon: weChatIcon,
closeUrl:closeUrl, closeUrl: closeUrl,
moreUrl:moreUrl, moreUrl: moreUrl,
refIcon:refIcon, refIcon: refIcon,
noData: noData, noData: noData,
QRCodeB:false, QRCodeB: false,
dataURL:null, dataURL: null,
user_id:null, user_id: null,
invite_code_f:true, invite_code_f: true,
invite_code:'', invite_code: "",
shopId:'', shopId: "",
groupId:null, groupId: null,
groupDetail:false, groupDetail: false,
groupData:null, groupData: null,
earnings: 0, earnings: 0,
userNum: 0, userNum: 0,
inviteList: [], inviteList: [],
total:0, total: 0,
shareTitle: '钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金', shareTitle: "钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金",
shareDesc: '21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！' shareDesc: "21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！"
};
},
filters: {
formatDate(value) {
if (value) {
return value.split(" ")[0];
} else {
return "";
}
}
},
mounted() {
this.getInviteResult();
this.getInviteList();
this.enableShare();
},
methods: {
goToInvite() {
let query = {};
if (window.location.href.indexOf("shopId") > -1) {
query.shopId = this.$route.query.shopId;
} }
if (window.location.href.indexOf("groupId") > -1) {
query.groupId = this.$route.query.groupId;
}
if (window.location.href.indexOf("invite_code") > -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({ name: "activityInvite", query: query });
}, },
filters: { goToInviteList() {
formatDate(value){ let query = {};
if(value) { if (window.location.href.indexOf("shopId") > -1) {
return value.split(' ')[0] query.shopId = this.$route.query.shopId;
} else { }
return '' if (window.location.href.indexOf("groupId") > -1) {
query.groupId = this.$route.query.groupId;
}
if (window.location.href.indexOf("invite_code") > -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({ name: "inviteList", query: query });
},
refshow() {
Toast.loading({
mask: true,
message: ""
});
if (document.body.scrollTop < 10) {
document.body.scrollTop = 20;
document.documentElement.scrollTop = 20;
}
if (
localStorage.getItem("cc_token") &&
localStorage.getItem("cc_token") !== ""
) {
setTimeout(() => {
Toast.clear();
if (!this.invite_code) {
this.invite_code = "CC-USER";
}
this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
let invite_code = this.invite_code.split("-");
if (
invite_code.length > 2 &&
(invite_code[1] === "TEACHER" || invite_code[1] === "XXMM")
) {
invite_code[1] = "USER";
} }
let code = `${invite_code[0]}-${invite_code[1]}`;
let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}`;
if (this.groupId && this.groupId !== "null") {
URL += `&groupId=${this.groupId}`;
}
this.qrcode(URL);
this.refVisible = true;
this.$nextTick(() => {
if (!this.dataURL) {
setTimeout(() => {
let { height, width } = document
.getElementById("capture")
.getClientRects()[0];
document.getElementById("capture").style.width = width + "px";
let o = this.getOffsetRect(this.$refs.imageWrapper);
let { height1, width1 } = document
.getElementById("capture")
.getClientRects()[0];
html2canvas(document.getElementById("capture"), {
async: true,
timeout: 500,
scrollX: 1,
scale: 3,
width: width1,
height: height1,
letterRendering: true
})
.then(canvas => {
let dataURL = canvas.toDataURL("image/jpg");
this.dataURL = dataURL;
})
.catch(res => {
alert(res);
console.log();
});
}, 500);
} else {
}
});
}, 500);
} else {
let query = { retUrl: this.$route.fullPath, is_new_user_url: "1" };
this.$router.push({ name: "author", query: query });
} }
}, },
mounted(){ getOffsetRect(ele) {
this.getInviteResult(); var box = ele.getBoundingClientRect();
this.getInviteList(); var body = document.body,
this.enableShare(); docElem = document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft =
window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop,
clientLeft = docElem.clientLeft || body.clientLeft;
var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top: Math.round(top),
left: Math.round(left)
};
}, },
methods:{ qrcode(data) {
goToInvite(){ if (this.QRCodeB) {
let query = {}; this.QRCodeB.makeCode(data);
if(window.location.href.indexOf('shopId')>-1){ } else {
query.shopId = this.$route.query.shopId; this.QRCodeB = new QRCode("qrcode", {
} width: 80,
if(window.location.href.indexOf('groupId')>-1){ height: 80, // 高度
query.groupId = this.$route.query.groupId; text: data, // 二维码内容
} image: ""
if(window.location.href.indexOf('invite_code')> -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({name:'activityInvite',query:query})
},
goToInviteList(){
let query = {};
if(window.location.href.indexOf('shopId')>-1){
query.shopId = this.$route.query.shopId;
}
if(window.location.href.indexOf('groupId')>-1){
query.groupId = this.$route.query.groupId;
}
if(window.location.href.indexOf('invite_code')> -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({name:'inviteList',query:query})
},
refshow(){
Toast.loading({
mask: true,
message: ''
}); });
if(document.body.scrollTop < 10){ }
document.body.scrollTop = 20; },
document.documentElement.scrollTop = 20; // 分享
} enableShare: function() {
if(localStorage.getItem('cc_token') && localStorage.getItem('cc_token') !== ''){ let that = this;
setTimeout(()=>{ getwechatParam({
Toast.clear() api_list: "onMenuShareAppMessage,onMenuShareTimeline",
if(!this.invite_code){ url: window.location.href.split("#")[0]
this.invite_code = 'CC-USER' }).then(wechatRes => {
wx.config({
debug: false,
appId: wechatRes.appId,
timestamp: parseInt(wechatRes.timestamp),
nonceStr: wechatRes.nonceStr,
signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
});
wx.ready(function() {
wx.onMenuShareTimeline({
title: that.shareTitle, // 分享标题
desc: that.shareDesc, // 分享描述
link: window.location.href, // 分享链接
imgUrl:
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
console.log("分享成功");
window._hmt.push([
"_trackEvent",
"分享",
"商品页好友分享",
`id${that.shopId}`
]); //百度统计
},
cancel: function() {
// alert("失败")
console.log("分享失败");
} }
this.user_id=JSON.parse(localStorage.getItem('userDesc')).user_id;
let invite_code = this.invite_code.split('-');
if(invite_code.length > 2 && (invite_code[1] === 'TEACHER' ||invite_code[1] === 'XXMM' )){
invite_code[1] = 'USER'
}
let code = `${invite_code[0]}-${invite_code[1]}`;
let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}`;
if(this.groupId && this.groupId !== 'null'){
URL += `&groupId=${this.groupId}`
}
this.qrcode(URL);
this.refVisible = true;
this.$nextTick(()=>{
if(!this.dataURL){
setTimeout(()=>{
let {
height,
width
} = document.getElementById('capture').getClientRects()[0]
document.getElementById('capture').style.width = width + 'px';
let o = this.getOffsetRect(this.$refs.imageWrapper);
let {
height1,
width1
} = document.getElementById('capture').getClientRects()[0];
html2canvas(document.getElementById('capture'),{
async: true,
timeout: 500,
scrollX:1,
scale: 3,
width: width1,
height: height1,
letterRendering: true,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/jpg");
this.dataURL = dataURL;
}).catch(res=>{alert(res);console.log()});
},500)
}else{
}
})
},500)
}else{
let query = {retUrl:this.$route.fullPath,is_new_user_url:'1'};
this.$router.push({name:'author',query:query})
}
},
getOffsetRect(ele){
var box=ele.getBoundingClientRect();
var body=document.body,
docElem=document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
var clientTop=docElem.clientTop||body.clientTop,
clientLeft=docElem.clientLeft||body.clientLeft;
var top=box.top+scrollTop-clientTop,
left=box.left+scrollLeft-clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top:Math.round(top),
left:Math.round(left)
}
},
qrcode(data){
if(this.QRCodeB){
this.QRCodeB.makeCode(data)
}else{
this.QRCodeB = new QRCode('qrcode', {
width: 80,
height: 80, // 高度
text: data, // 二维码内容
image: ''
}); });
} wx.onMenuShareAppMessage({
}, title: that.shareTitle, // 分享标题
// 分享 desc: that.shareDesc, // 分享描述
enableShare: function() { link: window.location.href, // 分享链接
let that = this; imgUrl:
getwechatParam({ "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
api_list: 'onMenuShareAppMessage,onMenuShareTimeline', success: function() {
url:window.location.href.split('#')[0] window._hmt.push([
}).then(wechatRes => { "_trackEvent",
wx.config({ "分享",
debug: false, "商品页朋友圈分享",
appId: wechatRes.appId, `id${that.shopId}`
timestamp: parseInt(wechatRes.timestamp), ]); //百度统计
nonceStr: wechatRes.nonceStr, },
signature: wechatRes.signature, cancel: function() {}
jsApiList: wechatRes.jsApiList
}); });
wx.ready(function() { });
wx.onMenuShareTimeline({ });
title: that.shareTitle, // 分享标题 },
desc: that.shareDesc,// 分享描述 onShare: function(type) {
link: window.location.href, // 分享链接 let URL = `${process.env.BUY_URL}?shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}`;
imgUrl: 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 if (type === 1) {
success: function() { URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}`;
console.log('分享成功'); }
window._hmt.push(['_trackEvent', '分享', "商品页好友分享",`id${that.shopId}`,that.invite_code]);//百度统计 // this.enableShare({
}, // product_title: this.groupDetail.share_desc.title,
cancel: function() { // desc: this.groupDetail.share_desc.content,
// alert("失败") // shareIcon:this.groupDetail.share_desc.img[0].url,
console.log('分享失败') // shareUrl:URL
} // })
}); },
wx.onMenuShareAppMessage({ toDataURLBase64(src, callback) {
title: that.shareTitle, // 分享标题 let xhttp = new XMLHttpRequest();
desc: that.shareDesc,// 分享描述 xhttp.onload = function() {
link: window.location.href, // 分享链接 let fileReader = new FileReader();
imgUrl: 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 fileReader.onloadend = function() {
success: function() { callback(fileReader.result);
window._hmt.push(['_trackEvent', '分享', "商品页朋友圈分享",`id${that.shopId}`,that.invite_code]);//百度统计
},
cancel: function() {
}
});
})
})
},
onShare: function(type) {
let URL = `${process.env.BUY_URL}?shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}`;
if(type === 1 ){
URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}`
}
// this.enableShare({
// product_title: this.groupDetail.share_desc.title,
// desc: this.groupDetail.share_desc.content,
// shareIcon:this.groupDetail.share_desc.img[0].url,
// shareUrl:URL
// })
},
toDataURLBase64 (src, callback) {
let xhttp = new XMLHttpRequest();
xhttp.onload = function () {
let fileReader = new FileReader();
fileReader.onloadend = function () {
callback(fileReader.result)
};
fileReader.readAsDataURL(xhttp.response)
}; };
xhttp.responseType = 'blob'; fileReader.readAsDataURL(xhttp.response);
xhttp.open('GET', src, true); };
xhttp.send() xhttp.responseType = "blob";
}, xhttp.open("GET", src, true);
// 初始化 xhttp.send();
getDetail(){ },
if(window.location.href.indexOf('invite_code')> -1){ // 初始化
this.invite_code = this.$route.query.invite_code; getDetail() {
let l = this.invite_code.split('-').length if (window.location.href.indexOf("invite_code") > -1) {
if(l < 3){ this.invite_code = this.$route.query.invite_code;
this.invite_code_f = false let l = this.invite_code.split("-").length;
} if (l < 3) {
this.invite_code_f = false;
} }
if(window.location.href.indexOf('shopId')>-1){ }
this.shopId = this.$route.query.shopId; if (window.location.href.indexOf("shopId") > -1) {
getGoodsDetailApi(this.shopId).then(res=>{ this.shopId = this.$route.query.shopId;
res.desc = JSON.parse(res.desc); getGoodsDetailApi(this.shopId).then(res => {
res.goods_desc = JSON.parse(res.goods_desc); res.desc = JSON.parse(res.desc);
res.share_desc = JSON.parse(res.share_desc); res.goods_desc = JSON.parse(res.goods_desc);
//商品下架跳转绑定商品 res.share_desc = JSON.parse(res.share_desc);
if(res.status === 2 && res.bind_goods_id){ //商品下架跳转绑定商品
this.$router.push({name:'buyDetail',query:{shopId:res.bind_goods_id}}); if (res.status === 2 && res.bind_goods_id) {
this.getDetail(); this.$router.push({
return name: "buyDetail",
} query: { shopId: res.bind_goods_id }
this.groupDetail = res; });
for (let i = 0;i<this.groupDetail.header_url.length;i++){ this.getDetail();
this.groupDetail.header_url[i]=this.groupDetail.header_url[i].replace('http://','https://') return;
} }
this.groupDetail.desc.detail = this.groupDetail.desc.detail.replace(/http:\/\//g,'https://'); this.groupDetail = res;
this.groupDetail.desc.qa = this.groupDetail.desc.qa.replace(/http:\/\//g,'https://'); for (let i = 0; i < this.groupDetail.header_url.length; i++) {
if(this.groupDetail.share_desc.refImg && this.groupDetail.share_desc.refImg.length === 1){ this.groupDetail.header_url[i] = this.groupDetail.header_url[
this.groupDetail.share_desc.refImg[0].url = this.groupDetail.share_desc.refImg[0].url.replace('http://','https://'); i
let _this = this; ].replace("http://", "https://");
this.toDataURLBase64(this.groupDetail.share_desc.refImg[0].url, function (avatarUrl) { }
this.groupDetail.desc.detail = this.groupDetail.desc.detail.replace(
/http:\/\//g,
"https://"
);
this.groupDetail.desc.qa = this.groupDetail.desc.qa.replace(
/http:\/\//g,
"https://"
);
if (
this.groupDetail.share_desc.refImg &&
this.groupDetail.share_desc.refImg.length === 1
) {
this.groupDetail.share_desc.refImg[0].url = this.groupDetail.share_desc.refImg[0].url.replace(
"http://",
"https://"
);
let _this = this;
this.toDataURLBase64(
this.groupDetail.share_desc.refImg[0].url,
function(avatarUrl) {
_this.groupDetail.share_desc.refImg[0].url = avatarUrl; _this.groupDetail.share_desc.refImg[0].url = avatarUrl;
}
);
}
if (this.groupDetail.goods_type === 2) {
if (localStorage.getItem("cc_token")) {
getStatusWechatApi({ goods_id: this.shopId }).then(res => {
if (res.out_trade_no) {
this.$router.push({
name: "success",
query: { out_trade_no: res.out_trade_no }
});
}
}); });
} }
if (window.location.href.indexOf("groupId") > -1) {
if(this.groupDetail.goods_type === 2){ this.groupId = this.$route.query.groupId;
if(localStorage.getItem('cc_token')){ getGroupDetailApi(this.groupId).then(res => {
getStatusWechatApi({goods_id:this.shopId}).then(res=>{ this.groupData = res;
if(res.out_trade_no){ });
this.$router.push({name:'success',query:{out_trade_no:res.out_trade_no}}); this.onShare(0);
} } else {
}); this.onShare(1);
}
if(window.location.href.indexOf('groupId')>-1){
this.groupId = this.$route.query.groupId;
getGroupDetailApi(this.groupId).then(res=>{
this.groupData = res
});
this.onShare(0)
}else{
this.onShare(1)
}
} }
}) }
}
},
getInviteResult(){
let id=this.$route.query.shopId;
getInviteResultApi({},id).then(res=>{
this.earnings = res.earnings;
this.userNum = res.user_num;
});
},
getInviteList(){
let json = {
page: 1,
limit: 3
};
let id=this.$route.query.shopId;
getInviteListApi(json,id).then(res=>{
this.inviteList = res.list;
this.total=res.total;
}); });
} }
},
getInviteResult() {
let id = this.$route.query.shopId;
getInviteResultApi({}, id).then(res => {
this.earnings = res.earnings;
this.userNum = res.user_num;
});
},
getInviteList() {
let json = {
page: 1,
limit: 3
};
let id = this.$route.query.shopId;
getInviteListApi(json, id).then(res => {
this.inviteList = res.list;
this.total = res.total;
});
} }
} }
};
</script> </script>
<style> <style>
img,video{ img,
max-width: 100%; video {
} max-width: 100%;
}
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
@red: #fc4a1b; @red: #fc4a1b;
@borderRadius: 8px; @borderRadius: 8px;
.activity { .activity {
padding-bottom: 50 * @toVh; padding-bottom: 50 * @toVh;
background-color: #FFd955; background-color: #ffd955;
img{ img {
display: block; display: block;
}
}
.headerImg {
width: 100%;
} }
.inviteContainer { }
position: relative; .headerImg {
margin: 128 / 2 * @toVh 29 / 2 * @toVw 30 * @toVw 29 / 2 * @toVw; width: 100%;
min-height: 100px; }
text-align: center; .inviteContainer {
background-color: #fff; position: relative;
border-radius: @borderRadius; margin: 128 / 2 * @toVh 29 / 2 * @toVw 30 * @toVw 29 / 2 * @toVw;
padding-top: 110 / 2 * @toVw; min-height: 100px;
padding-bottom: 38 / 2 * @toVh; text-align: center;
background-color: #fff;
border-radius: @borderRadius;
padding-top: 110 / 2 * @toVw;
padding-bottom: 38 / 2 * @toVh;
}
.invite-title {
position: absolute;
width: 450 / 2 * @toVw;
left: 50%;
margin-left: -450 / 4 * @toVw;
top: -50 / 2 * @toVw;
height: auto;
}
.invite-icon {
position: absolute;
bottom: -15 * @toVw;
width: 50 * @toVw;
right: -15 * @toVw;
}
.invite-list {
margin-left: 32 / 2 * @toVw;
margin-right: 32 / 2 * @toVw;
padding: 28 / 2 * @toVh;
border: 2 * @toVw solid #f6234e;
border-radius: @borderRadius;
.i-title {
font-size: 14px;
} }
.invite-title { .i-num {
position: absolute; font-size: 18px;
width: 450 / 2 * @toVw;
left: 50%;
margin-left: -450 / 4 * @toVw;
top: -50 / 2 * @toVw;
height: auto;
}
.invite-icon{
position: absolute;
bottom: -15*@toVw;
width: 50*@toVw;
right: -15*@toVw;
} }
.invite-list { }
margin-left: 32 / 2 * @toVw; .flex-center {
margin-right: 32 / 2 * @toVw; display: flex;
padding: 28 / 2 * @toVh; flex-flow: row nowrap;
border: 2*@toVw solid #f6234e; justify-content: center;
border-radius: @borderRadius; align-items: center;
.i-title { color: #888888;
font-size: 14px; }
} .flex-start {
.i-num { display: flex;
font-size: 18px; flex-flow: row nowrap;
} justify-content: flex-start;
} align-items: center;
.flex-center { }
.red {
color: #f6234e;
}
.p-list {
margin: 0 32 / 2 * @toVw;
padding: 0;
li {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
color: #888888;
}
.flex-start {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.red{
color: #f6234e;
}
.p-list {
margin: 0 32 / 2 * @toVw;
padding: 0;
li {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 8 * @toVw;
img {
width: 74 / 2 * @toVw;
height: 74 / 2 * @toVw;
margin-right: 5px;
border-radius: 50%;
}
}
}
.no-margin {
margin: 0; margin: 0;
} padding: 8 * @toVw;
.moreBtn {
width: 220 / 2 * @toVw;
height: auto;
}
.invite-btn {
position: fixed;
bottom: 0;
width: 100%;
padding-top: 10 * @toVw;
box-sizing: content-box;
text-align: center;
background-color: #fff;
img { img {
width: 504 / 2 * @toVw; width: 74 / 2 * @toVw;
height: auto; height: 74 / 2 * @toVw;
margin-right: 5px;
border-radius: 50%;
} }
} }
.noData { }
width: 80%; .no-margin {
margin-top: 15px; margin: 0;
}
.moreBtn {
width: 220 / 2 * @toVw;
height: auto;
}
.invite-btn {
position: fixed;
bottom: 0;
width: 100%;
padding-top: 10 * @toVw;
box-sizing: content-box;
text-align: center;
background-color: #fff;
img {
width: 504 / 2 * @toVw;
height: auto;
} }
}
.noData {
width: 80%;
margin-top: 15px;
}
</style> </style>
src/components/buy/inviteFriends.vue
View file @ 5bbc20ff
...@@ -74,23 +74,15 @@ export default { ...@@ -74,23 +74,15 @@ export default {
return { return {
earnings: 0, earnings: 0,
userNum: 0, userNum: 0,
records: [ shopId: "",
{ shareTitle: "钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金",
nickname: "test", shareDesc: "21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！",
pay_at: "2019.7.5" records: []
},
{
nickname: "test1111111",
pay_at: "2019.7.5"
},
{
nickname: "test222222222222",
pay_at: "2019.7.5"
}
]
}; };
}, },
mounted() { mounted() {
let shopId = this.$route.query.shopId;
this.shopId = shopId;
this.getInviteResult(); this.getInviteResult();
this.getInviteList(); this.getInviteList();
this.enableShare(); this.enableShare();
...@@ -124,8 +116,7 @@ export default { ...@@ -124,8 +116,7 @@ export default {
"_trackEvent", "_trackEvent",
"分享", "分享",
"商品页好友分享", "商品页好友分享",
`id${that.shopId}`, `id${that.shopId}`
that.invite_code
]); //百度统计 ]); //百度统计
}, },
cancel: function() { cancel: function() {
...@@ -144,8 +135,7 @@ export default { ...@@ -144,8 +135,7 @@ export default {
"_trackEvent", "_trackEvent",
"分享", "分享",
"商品页朋友圈分享", "商品页朋友圈分享",
`id${that.shopId}`, `id${that.shopId}`
that.invite_code
]); //百度统计 ]); //百度统计
}, },
cancel: function() {} cancel: function() {}
...@@ -153,25 +143,12 @@ export default { ...@@ -153,25 +143,12 @@ export default {
}); });
}); });
}, },
onShare: function(type) {
let URL = `${process.env.BUY_URL}?shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}`;
if (type === 1) {
URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}`;
}
// this.enableShare({
// product_title: this.groupDetail.share_desc.title,
// desc: this.groupDetail.share_desc.content,
// shareIcon:this.groupDetail.share_desc.img[0].url,
// shareUrl:URL
// })
},
lookMyInviteRecords() { lookMyInviteRecords() {
this.$refs.inviteRecord.scrollIntoView(); this.$refs.inviteRecord.scrollIntoView();
}, },
lookMoreRecord() {}, lookMoreRecord() {},
getInviteResult() { getInviteResult() {
let id = this.$route.query.shopId; getInviteResultApi({}, this.shopId).then(res => {
getInviteResultApi({}, id).then(res => {
this.earnings = res.earnings; this.earnings = res.earnings;
this.userNum = res.user_num; this.userNum = res.user_num;
}); });
...@@ -181,8 +158,9 @@ export default { ...@@ -181,8 +158,9 @@ export default {
page: 1, page: 1,
limit: 6 limit: 6
}; };
let id = this.$route.query.shopId; let shopId = this.$route.query.shopId;
getInviteListApi(json, id).then(res => { this.shopId = shopId;
getInviteListApi(json, shopId).then(res => {
if (res) { if (res) {
if (res.list && res.list.length > 0) { if (res.list && res.list.length > 0) {
this.records = res.list; this.records = res.list;
......
src/components/buy/inviteRecordList.vue
View file @ 5bbc20ff
...@@ -36,12 +36,7 @@ export default { ...@@ -36,12 +36,7 @@ export default {
page: 1, page: 1,
loading: true, loading: true,
finished: false, finished: false,
list: [ list: []
{
nickname: "test111111111111",
pay_at: "2019.7.5"
}
]
}; };
}, },
mounted() { mounted() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment