Skip to content

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

liwei

parent 70b49654
Hide whitespace changes
Inline Side-by-side
Showing with 765 additions and 691 deletions
src/components/buy/activityInvite.vue
View file @ a166e3b4
<template> <template>
<div class="group-index" ref="index" v-if="groupDetail" style="background-color: #F9DCCF;"> <div class="group-index" ref="index" v-if="groupDetail" style="background-color: #F9DCCF;">
<div> <div>
<div class="img-cvs" id="capture" ref="imageWrapper" v-if="groupDetail.share_desc.refImg && groupDetail.share_desc.refImg.length > 0"> <div
class="img-cvs"
id="capture"
ref="imageWrapper"
v-if="groupDetail.share_desc.refImg && groupDetail.share_desc.refImg.length > 0"
>
<div v-if="avatar && QRCodeB" id="avatarImg"> <div v-if="avatar && QRCodeB" id="avatarImg">
<img :src="groupDetail.share_desc.refImg[0].url" v-if="showLoad" id="showImg"> <img :src="groupDetail.share_desc.refImg[0].url" v-if="showLoad" id="showImg" />
<div class="avatar-container"><img :src="avatar" class="avatar"/> 我已加入，邀请你一起加入</div> <div class="avatar-container">
</div> <img :src="avatar" class="avatar" /> 我已加入，邀请你一起加入
<div id="qrcode" class="qrcode"> </div>
</div> </div>
<div id="qrcode" class="qrcode"></div>
</div> </div>
<img :src="dataURL" class="cvs-img" id="cvs-img"/> <img :src="dataURL" class="cvs-img" id="cvs-img" />
<div class="inviteBtn" id="inviteBtn"> <div class="inviteBtn" id="inviteBtn">
<div class="content-text"> <div class="content-text">
<h3>长按保存海报 或发送给好友</h3> <h3>长按保存海报 或发送给好友</h3>
<p>越多朋友购买，您可得越多奖励</p> <p>越多朋友购买，您可得越多奖励</p>
</div> </div>
<div class="i-btn flex-start" @click="show=true"> <div class="i-btn flex-start" @click="show=true">
<img class="i-env" :src="whiteEnvelopeUrl"/> <img class="i-env" :src="whiteEnvelopeUrl" />
<span class="i-env-title">邀请语：</span> <span class="i-env-title">邀请语：</span>
<div class="elips"><span class="marquee">{{comments[commentIndex]}}</span></div> <div class="elips">
<span class="marquee">{{comments[commentIndex]}}</span>
</div>
</div> </div>
<div class="line"></div>
</div> </div>
<mt-popup v-model="show" :closeOnClickModal="false"> <mt-popup v-model="show" :closeOnClickModal="false">
<div class="pop-fill"> <div class="pop-fill">
<div class="flex-bt"> <div class="flex-bt">
<div class="flex-start no-margin"> <div class="flex-start no-margin">
<img class="p-envelope" :src="envelopeUrl"/> <img class="p-envelope" :src="envelopeUrl" />
<span class="p-tips">贴心的邀请语提高成功率</span> <span class="p-tips">贴心的邀请语提高成功率</span>
</div> </div>
<img class="p-switch no-margin" :src="switchUrl" @click="onSwitch"/> <img class="p-switch no-margin" :src="switchUrl" @click="onSwitch" />
</div> </div>
<div class="p-comments"> <div class="p-comments">
<p v-html="comments[commentIndex].replace(/\n/g,'</br>')" ></p> <p v-html="comments[commentIndex].replace(/\n/g,'</br>')"></p>
</div> </div>
<div class="copyBtn" v-clipboard:copy="comments[commentIndex]" v-clipboard:success="onCopy">复制邀请语</div> <div
class="copyBtn"
v-clipboard:copy="comments[commentIndex]"
v-clipboard:success="onCopy"
>复制邀请语</div>
<div class="close"> <div class="close">
<img :src="closePopUrl" class="close-pop" @click="show=false"/> <img :src="closePopUrl" class="close-pop" @click="show=false" />
</div> </div>
</div> </div>
</mt-popup> </mt-popup>
...@@ -44,545 +57,606 @@ ...@@ -44,545 +57,606 @@
</template> </template>
<script> <script>
import 'swiper/dist/css/swiper.css' import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from "vue-awesome-swiper";
import QRCode from 'qrcodejs2' import QRCode from "qrcodejs2";
import {getwechatParam,getGoodsDetailApi,getGroupDetailApi,getStatusWechatApi} 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' } from "../../service/api";
import closeUrl from '../../assets/closemy.png' import refBg from "../../assets/refBg.png";
import redBtnUrl from '../../assets/activity/red-bg.png' import moreUrl from "../../assets/moreIcon.png";
import envelopeUrl from '../../assets/activity/envelope.png' import refIcon from "../../assets/refIcon.png";
import whiteEnvelopeUrl from '../../assets/activity/white-envelope.png' import weChatIcon from "../../assets/wechatIcon.png";
import closePopUrl from '../../assets/activity/close.png' import weChatQrUrl from "../../assets/weChatCode.png";
import switchUrl from '../../assets/activity/switch.png' import closeUrl from "../../assets/closemy.png";
import html2canvas from 'html2canvas' import redBtnUrl from "../../assets/activity/red-bg.png";
import { Toast } from 'vant'; import envelopeUrl from "../../assets/activity/envelope.png";
import {Popup} from 'mint-ui' import whiteEnvelopeUrl from "../../assets/activity/white-envelope.png";
export default { import closePopUrl from "../../assets/activity/close.png";
name: "index", import switchUrl from "../../assets/activity/switch.png";
components: { import html2canvas from "html2canvas";
swiper, import { Toast } from "vant";
swiperSlide, import { Popup } from "mint-ui";
[Popup.name]:Popup export default {
}, name: "index",
data(){ components: {
return { swiper,
showLoad:false, swiperSlide,
refBg:refBg, [Popup.name]: Popup
join:false, },
popType:false, data() {
popFill:false, return {
popupVisible:false, showLoad: false,
refVisible:false, refBg: refBg,
tabType:true, join: false,
popcontentW:`您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`, popType: false,
popcontentT:`为了更好地为您进行课程服务，<br>请扫码添加老师二维码`, popFill: false,
qrCode:weChatQrUrl, popupVisible: false,
weChatIcon:weChatIcon, refVisible: false,
closeUrl:closeUrl, tabType: true,
moreUrl:moreUrl, popcontentW: `您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`,
refIcon:refIcon, popcontentT: `为了更好地为您进行课程服务，<br>请扫码添加老师二维码`,
swiperOption: { qrCode: weChatQrUrl,
pagination: { weChatIcon: weChatIcon,
el: '.swiper-pagination' closeUrl: closeUrl,
} moreUrl: moreUrl,
}, refIcon: refIcon,
QRCodeB:false, swiperOption: {
dataURL:null, pagination: {
user_id:null, el: ".swiper-pagination"
avatar:'', }
invite_code_f:true, },
invite_code:'', QRCodeB: false,
shopId:'', dataURL: null,
groupId:null, user_id: null,
groupDetail:false, avatar: "",
groupData:null, invite_code_f: true,
redBtnUrl: redBtnUrl, invite_code: "",
envelopeUrl: envelopeUrl, shopId: "",
whiteEnvelopeUrl: whiteEnvelopeUrl, groupId: null,
closePopUrl: closePopUrl, groupDetail: false,
switchUrl: switchUrl, groupData: null,
show: false, redBtnUrl: redBtnUrl,
// comments: [ envelopeUrl: envelopeUrl,
// '英语这样启蒙效果太棒啦，唱唱这个90天启蒙课程做真不错，推荐给你们！坚持打卡全额返学费，报课即送价值498元教具礼盒。数量有限，抢完即止！', whiteEnvelopeUrl: whiteEnvelopeUrl,
// '发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个90天课程在做活动，坚持打卡全额返学费。我体验过了，真的很好！快带着宝宝一起唱玩英语吧~', closePopUrl: closePopUrl,
// '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~' switchUrl: switchUrl,
// ], show: false,
comments: [ // comments: [
'英语这样启蒙效果太棒啦，唱唱这个启蒙课程做得真不错，推荐给你们！现在限时优惠价129元，通过我这个老学员的推荐，可获得30元代金券，下单立减，到手价99元。全勤完课还返66元现金，报名立送实物教具礼盒，包邮送到家。数量有限，先到先得！', // '英语这样启蒙效果太棒啦，唱唱这个90天启蒙课程做真不错，推荐给你们！坚持打卡全额返学费，报课即送价值498元教具礼盒。数量有限，抢完即止！',
// '这家英语启蒙做的很不错\n再也不用花高价去外教班跟培训机构\n在家里就可以直接进行英语启蒙\n21天帮助宝宝树立英语学习兴趣，让宝宝爱上英语\n原价2980元，现在只需要99元\n全勤打卡18天赠送价值100元天猫同款3大精品礼盒\n限量200份，仅售3天！', // '发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个90天课程在做活动，坚持打卡全额返学费。我体验过了，真的很好！快带着宝宝一起唱玩英语吧~',
'发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个21天课程在做活动，我体验过了，真的很好！现限时限量优惠，速来报名~', // '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~'
'第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天在快乐中学习。现在他们这个21天课程在做活动，全勤学习还返66元现金，报名立送教具礼盒，快来和我一起参与吧！' // ],
], comments: [
commentIndex: 0, "英语这样启蒙效果太棒啦，唱唱这个启蒙课程做得真不错，推荐给你们！现在限时优惠价129元，通过我这个老学员的推荐，可获得30元代金券，下单立减，到手价99元。全勤完课还返66元现金，报名立送实物教具礼盒，包邮送到家。数量有限，先到先得！",
shareTitle: '钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金', // '这家英语启蒙做的很不错\n再也不用花高价去外教班跟培训机构\n在家里就可以直接进行英语启蒙\n21天帮助宝宝树立英语学习兴趣，让宝宝爱上英语\n原价2980元，现在只需要99元\n全勤打卡18天赠送价值100元天猫同款3大精品礼盒\n限量200份，仅售3天！',
shareDesc: '21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！' "发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个21天课程在做活动，我体验过了，真的很好！现限时限量优惠，速来报名~",
"第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天在快乐中学习。现在他们这个21天课程在做活动，全勤学习还返66元现金，报名立送教具礼盒，快来和我一起参与吧！"
],
commentIndex: 0,
shareTitle: "钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金",
shareDesc: "21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！"
};
},
mounted() {
this.getDetail();
},
methods: {
onSwitch() {
if (this.commentIndex === 0) {
this.commentIndex = 1;
} else if (this.commentIndex == 1) {
this.commentIndex = 2;
} else if (this.commentIndex == 2) {
this.commentIndex = 0;
} }
}, },
mounted(){ onCopy(e) {
this.getDetail(); console.log(e);
Toast({
message: "复制成功",
position: "middle",
className: "copyToast",
duration: 2000
});
this.show = false;
}, },
methods:{ refshow() {
onSwitch(){ Toast.loading({
if (this.commentIndex === 0) { mask: "true"
this.commentIndex = 1; });
} else if (this.commentIndex == 1) { if (document.body.scrollTop < 10) {
this.commentIndex = 2; document.body.scrollTop = 20;
} else if (this.commentIndex == 2) { document.documentElement.scrollTop = 20;
this.commentIndex = 0; }
} if (
}, localStorage.getItem("cc_token") &&
onCopy(e){ localStorage.getItem("cc_token") !== ""
console.log(e) ) {
Toast({ let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
message: '复制成功', if (!this.invite_code) {
position: 'middle', this.invite_code = "CC-USER";
className: 'copyToast',
duration: 2000
});
this.show = false;
},
refshow(){
Toast.loading({
mask:"true",
})
if(document.body.scrollTop < 10){
document.body.scrollTop = 20;
document.documentElement.scrollTop = 20;
} }
if(localStorage.getItem('cc_token') && localStorage.getItem('cc_token') !== ''){ this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
let ownDetail = JSON.parse(localStorage.getItem("userDesc")); let _that = this;
if(!this.invite_code){ let invite_code = this.invite_code.split("-");
this.invite_code = 'CC-USER' if (
} invite_code.length > 2 &&
this.user_id=JSON.parse(localStorage.getItem('userDesc')).user_id; (invite_code[1] === "TEACHER" || invite_code[1] === "XXMM")
let _that = this; ) {
let invite_code = this.invite_code.split('-'); invite_code[1] = "USER";
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}&nickname=${ownDetail.nickname}`;
let code = `${invite_code[0]}-${invite_code[1]}`;
let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}&nickname=${ownDetail.nickname}`;
if(this.groupId && this.groupId !== 'null'){ if (this.groupId && this.groupId !== "null") {
URL += `&groupId=${this.groupId}` URL += `&groupId=${this.groupId}`;
} }
this.onNewShare(URL); this.onNewShare(URL);
this.toDataURLBase64(JSON.parse(localStorage.getItem('userDesc')).avatar.replace('http://','https://'), function (avatar) { this.toDataURLBase64(
_that.avatar = avatar JSON.parse(localStorage.getItem("userDesc")).avatar.replace(
}); "http://",
this.refVisible = true; "https://"
this.$nextTick(()=>{ ),
_that.qrcode(URL); function(avatar) {
if(!this.dataURL){ _that.avatar = avatar;
setTimeout(()=>{ }
this.showLoad=true; );
this.$nextTick(()=>{ this.refVisible = true;
document.getElementById('showImg').onload=()=>{ this.$nextTick(() => {
let { _that.qrcode(URL);
height, if (!this.dataURL) {
width, setTimeout(() => {
top this.showLoad = true;
} = document.getElementById('capture').getClientRects()[0]; this.$nextTick(() => {
document.getElementById("showImg").onload = () => {
let { height, width, top } = document
.getElementById("capture")
.getClientRects()[0];
// document.getElementById('capture').style.width = width + 'px'; // document.getElementById('capture').style.width = width + 'px';
let o = this.getOffsetRect(this.$refs.imageWrapper); let o = this.getOffsetRect(this.$refs.imageWrapper);
console.log('document.getElementById', document.getElementById('capture').getClientRects()[0]); console.log(
document.getElementById('inviteBtn').style.top = height + top + 20 + 'px'; "document.getElementById",
document.getElementById('inviteBtn').style.opacity = 1; document.getElementById("capture").getClientRects()[0]
html2canvas(document.getElementById('capture'),{ );
async: true, document.getElementById("inviteBtn").style.top =
timeout: 500, height + top + 20 + "px";
useCORS:true, document.getElementById("inviteBtn").style.opacity = 1;
scrollX:1, html2canvas(document.getElementById("capture"), {
scale: 2, async: true,
width: width, timeout: 500,
height: height, useCORS: true,
letterRendering: true, scrollX: 1,
}).then((canvas) => { scale: 2,
let dataURL = canvas.toDataURL("image/png",0.9); width: width,
this.dataURL = dataURL; height: height,
Toast.clear() letterRendering: true
}).catch(res=>{alert(res);console.log()}); })
} .then(canvas => {
}) let dataURL = canvas.toDataURL("image/png", 0.9);
this.dataURL = dataURL;
},500) Toast.clear();
})
}else{ .catch(res => {
alert(res);
} console.log();
}) });
}else{ };
let query = {retUrl:this.$route.fullPath,is_new_user_url:'1'}; });
this.$router.push({name:'author',query:query}) }, 500);
} } else {
}, }
getOffsetRect(ele){ });
var box=ele.getBoundingClientRect(); } else {
var body=document.body, let query = { retUrl: this.$route.fullPath, is_new_user_url: "1" };
docElem=document.documentElement; this.$router.push({ name: "author", query: query });
//获取页面的scrollTop,scrollLeft(兼容性写法) }
var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop, },
scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft; getOffsetRect(ele) {
var clientTop=docElem.clientTop||body.clientTop, var box = ele.getBoundingClientRect();
clientLeft=docElem.clientLeft||body.clientLeft; var body = document.body,
var top=box.top+scrollTop-clientTop, docElem = document.documentElement;
left=box.left+scrollLeft-clientLeft; //获取页面的scrollTop,scrollLeft(兼容性写法)
return { var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
//Math.round 兼容火狐浏览器bug scrollLeft =
top:Math.round(top), window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
left:Math.round(left) var clientTop = docElem.clientTop || body.clientTop,
} clientLeft = docElem.clientLeft || body.clientLeft;
}, var top = box.top + scrollTop - clientTop,
qrcode(data){ left = box.left + scrollLeft - clientLeft;
if(this.QRCodeB){ return {
this.QRCodeB.makeCode(data) //Math.round 兼容火狐浏览器bug
}else{ top: Math.round(top),
this.QRCodeB = new QRCode('qrcode', { left: Math.round(left)
width: 180, };
height: 180, // 高度 },
text: data, // 二维码内容 qrcode(data) {
image: '' if (this.QRCodeB) {
this.QRCodeB.makeCode(data);
} else {
this.QRCodeB = new QRCode("qrcode", {
width: 180,
height: 180, // 高度
text: data, // 二维码内容
image: ""
});
}
},
// 分享
enableShare: function(option) {
let that = this;
getwechatParam({
api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url: window.location.href.split("#")[0]
}).then(wechatRes => {
console.log("enableShare", 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: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
console.log("分享成功");
window._hmt.push([
"_trackEvent",
"分享",
"商品页好友分享",
`id${that.shopId}`,
that.invite_code
]); //百度统计
},
cancel: function() {
// alert("失败")
console.log("分享失败");
}
}); });
} wx.onMenuShareAppMessage({
title: that.shareTitle, // 分享标题
}, desc: that.shareDesc, // 分享描述
// 分享 link: option.shareUrl, // 分享链接
enableShare: function(option) { imgUrl:
let that = this; option.shareIcon ||
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",
console.log('enableShare', wechatRes) "分享",
wx.config({ "商品页朋友圈分享",
debug: false, `id${that.shopId}`,
appId: wechatRes.appId, that.invite_code
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: option.shareUrl, // 分享链接 let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 let URL = `${process.env.BUY_URL}?shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}&nickname=${ownDetail.nickname}`;
success: function() { if (type === 1) {
console.log('分享成功'); URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}&nickname=${ownDetail.nickname}`;
window._hmt.push(['_trackEvent', '分享', "商品页好友分享",`id${that.shopId}`,that.invite_code]);//百度统计 }
}, this.enableShare({
cancel: function() { product_title: this.groupDetail.share_desc.title,
// alert("失败") desc: this.groupDetail.share_desc.content,
console.log('分享失败') shareIcon: this.groupDetail.share_desc.img[0].url,
} shareUrl: URL
}); });
wx.onMenuShareAppMessage({ },
title: that.shareTitle, // 分享标题 onNewShare(url) {
desc: that.shareDesc,// 分享描述 this.enableShare({
link: option.shareUrl, // 分享链接 product_title: this.groupDetail.share_desc.title,
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 desc: this.groupDetail.share_desc.content,
success: function() { shareIcon: this.groupDetail.share_desc.img[0].url,
window._hmt.push(['_trackEvent', '分享', "商品页朋友圈分享",`id${that.shopId}`,that.invite_code]);//百度统计 shareUrl: url
}, });
cancel: function() { },
} toDataURLBase64(src, callback) {
}); let xhttp = new XMLHttpRequest();
}) xhttp.onload = function() {
}) let fileReader = new FileReader();
}, fileReader.onloadend = function() {
onShare: function(type) { callback(fileReader.result);
let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
let URL = `${process.env.BUY_URL}?shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}&nickname=${ownDetail.nickname}`;
if(type === 1 ){
URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}&nickname=${ownDetail.nickname}`
}
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
})
},
onNewShare(url){
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}});
} else {
this.refshow()
}
});
} else {
this.refshow()
} }
);
}
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 }
});
} else {
this.refshow();
}
});
} else { } else {
this.refshow() this.refshow();
} }
}) } else {
} this.refshow();
}
});
} }
} }
} }
};
</script> </script>
<style> <style>
img,video{ img,
max-width: 100%; video {
} max-width: 100%;
.copyToast { }
z-index: 9999; .copyToast {
} z-index: 9999;
}
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
@keyframes marquee { @keyframes marquee {
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
100% { 100% {
transform: translateX(-1000px); transform: translateX(-1000px);
} }
} }
#app{background: rgb(89, 193, 241);} #app {
.marquee { background: rgb(89, 193, 241);
display: block; }
width: 100%; .marquee {
top: 12 * @toVw; display: block;
left: 0; width: 100%;
text-align: center; top: 12 * @toVw;
left: 0;
text-align: center;
position: absolute;
-webkit-animation: marquee 30s linear infinite;
animation: marquee 30s linear infinite;
}
.elips {
position: relative;
width: 170 * @toVw;
height: 100%;
overflow: hidden;
white-space: nowrap;
/*text-overflow: ellipsis;*/
margin: 0;
z-index: 1;
}
.tips {
width: 230 * @toVw;
margin-left: 163 / 2 * @toVw;
margin-top: 10 * @toVw;
}
.img-cvs {
position: absolute;
background: rgb(253, 168, 19);
width: 518 / 2 * @toVw;
top: 25 * @toVh;
left: 113 / 2 * @toVw;
.avatar-container {
position: absolute; position: absolute;
-webkit-animation: marquee 30s linear infinite; top: 8 * @toVh;
animation: marquee 30s linear infinite; left: 8 * @toVw;
} font-size: 12 * @toVw;
.elips { display: flex;
position: relative; justify-content: center;
width: 170* @toVw; align-items: center;
height: 100%; color: #fff;
overflow: hidden;
white-space: nowrap;
/*text-overflow: ellipsis;*/
margin: 0;
z-index: 1;
}
.tips {
width: 230 * @toVw;
margin-left: 163 / 2 * @toVw;
margin-top: 10 * @toVw;
}
.img-cvs{
position: absolute;
background: rgb(253, 168, 19);
width: 518 / 2 * @toVw;
top: 25 * @toVh;
left: 113 / 2 * @toVw;
.avatar-container {
position: absolute;
top: 8 * @toVh;
left: 8 * @toVw;
font-size: 12 * @toVw;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
img {
width: 30 * @toVw;
margin-right: 5px;
border-radius: 50%;
}
}
img { img {
/*border-radius: 10px;*/ width: 30 * @toVw;
margin-right: 5px;
border-radius: 50%;
} }
.qrcode{ }
img {
/*border-radius: 10px;*/
}
.qrcode {
position: absolute; position: absolute;
top: 690 / 2 * @toVw; top: 690 / 2 * @toVw;
left: 15 * @toVw; left: 15 * @toVw;
width: 60 * @toVw !important; width: 60 * @toVw !important;
/deep/ canvas{ /deep/ canvas {
width: 60 * @toVw !important; width: 60 * @toVw !important;
height: 60*@toVw !important; height: 60 * @toVw !important;
} }
/deep/ img{ /deep/ img {
width: 60 * @toVw !important; width: 60 * @toVw !important;
height: 60 * @toVw !important; height: 60 * @toVw !important;
} }
} }
} }
#avatarImg{ #avatarImg {
max-height: 415 * @toVw; max-height: 415 * @toVw;
} }
.cvs-img{ .cvs-img {
position: absolute; position: absolute;
width: 518 / 2 * @toVw; width: 518 / 2 * @toVw;
top: 25 * @toVh; top: 25 * @toVh;
left: 113 / 2 * @toVw; left: 113 / 2 * @toVw;
z-index: 10; z-index: 10;
} }
.inviteBtn { .inviteBtn {
position: absolute; position: absolute;
width: 100%; width: 100%;
opacity: 0; opacity: 0;
text-align: center; text-align: center;
.i-btn {
.i-btn { position: relative;
position: relative;
width: 642 / 2 * @toVw;
height: 92 / 2 * @toVw;
text-align: left;
font-size: 14 * @toVw;
color: #fff;
// background: url('../../assets/activity/red-bg.png') no-repeat center;
background: #FF7D77;
border-radius: 25 * @toVw;
box-shadow:0px 1px 8px 0px rgba(255,125,119,0.5);
background-size: cover;
box-sizing: border-box;
padding: 2px 58/2*@toVw;
overflow: hidden;
.i-env {
width: 36 / 2 * @toVw;;
height: auto;
margin-right: 5px;
margin-left: 0;
z-index: 2;
}
.i-env-title {
font-size: 16 * @toVw;
margin:0;
z-index: 2;
}
}
}
.flex-start {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.g-btns {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
width: 642 / 2 * @toVw; width: 642 / 2 * @toVw;
margin-top: 30 / 2 * @toVw; height: 92 / 2 * @toVw;
text-align: left;
font-size: 14 * @toVw; font-size: 14 * @toVw;
color: #fff; color: #fff;
img { // background: url('../../assets/activity/red-bg.png') no-repeat center;
width: 96 / 2 * @toVw; background: #ff7d77;
height: 96 / 2 * @toVw; border-radius: 25 * @toVw;
} box-shadow: 0px 1px 8px 0px rgba(255, 125, 119, 0.5);
}
.copyBtn {
// background: url('../../assets/activity/yellow-bg.png') no-repeat center;
background:rgba(255,125,119,1);
box-shadow:0px 1px 8px 0px rgba(255,125,119,1);
border-radius:27 * @toVw;
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
width: 196 * @toVw; padding: 2px 58/2 * @toVw;
height: 92 / 2 * @toVw; overflow: hidden;
text-align: center; .i-env {
line-height: 92 / 2 * @toVw; width: 36 / 2 * @toVw;
color: #fff; height: auto;
font-size: 20 * @toVw; margin-right: 5px;
} margin-left: 0;
.flex-bt { z-index: 2;
display: flex; }
flex-flow: row nowrap; .i-env-title {
justify-content: space-between; font-size: 16 * @toVw;
align-items: center; margin: 0;
} z-index: 2;
.p-tips {
color: #999;
font-size: 15 * @toVw;
}
.p-envelope {
width: 22 * @toVw;
height: 22 * @toVw;
margin-right: 12 * @toVw;
}
.p-switch {
width: 15 * @toVw;
height: 15 * @toVw;
}
.p-comments {
margin: 15px 0;
// height: 220 * @toVw;
overflow-y: scroll;
p {
line-height: 2;
} }
} }
.no-margin { }
margin: 0; .flex-start {
} display: flex;
.ref-content{ flex-flow: row nowrap;
width: 299 * @toVw; justify-content: flex-start;
height: 564 * @toVw; align-items: center;
background-size: 100% 100%; }
position: relative; .g-btns {
.tips{ display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
width: 642 / 2 * @toVw;
margin-top: 30 / 2 * @toVw;
font-size: 14 * @toVw;
color: #fff;
img {
width: 96 / 2 * @toVw;
height: 96 / 2 * @toVw;
}
}
.copyBtn {
// background: url('../../assets/activity/yellow-bg.png') no-repeat center;
background: rgba(255, 125, 119, 1);
box-shadow: 0px 1px 8px 0px rgba(255, 125, 119, 1);
border-radius: 27 * @toVw;
background-size: cover;
box-sizing: border-box;
width: 196 * @toVw;
height: 92 / 2 * @toVw;
text-align: center;
line-height: 92 / 2 * @toVw;
color: #fff;
font-size: 20 * @toVw;
}
.flex-bt {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.p-tips {
color: #999;
font-size: 15 * @toVw;
}
.p-envelope {
width: 22 * @toVw;
height: 22 * @toVw;
margin-right: 12 * @toVw;
}
.p-switch {
width: 15 * @toVw;
height: 15 * @toVw;
}
.p-comments {
margin: 15px 0;
// height: 220 * @toVw;
overflow-y: scroll;
p {
line-height: 2;
}
}
.no-margin {
margin: 0;
}
.ref-content {
width: 299 * @toVw;
height: 564 * @toVw;
background-size: 100% 100%;
position: relative;
.tips {
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
color: #666; color: #666;
...@@ -590,198 +664,199 @@ ...@@ -590,198 +664,199 @@
top: 250 * @toVw; top: 250 * @toVw;
width: 1em; width: 1em;
} }
} }
.group-index{ .group-index {
height: 100vh; // height: 100vh;
padding-bottom: toVw(150); padding-bottom: toVw(150);
background: #f0f0f0; background: #f0f0f0;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
.ref-icon{ .ref-icon {
position: fixed; position: fixed;
height: 100/375 * 90vw ; height: 100/375 * 90vw;
top: 70vw; top: 70vw;
z-index: 6; z-index: 6;
right: 10 * 100 /375vw; right: 10 * 100 /375vw;
border-radius: 100px; border-radius: 100px;
} }
.banner{ .banner {
background: white; background: white;
img{ img {
width: 100%; width: 100%;
} }
} }
.head{ .head {
background: white; background: white;
margin-bottom: 10px; margin-bottom: 10px;
padding: 20/7.5vw; padding: 20/7.5vw;
.title{ .title {
font-size: 20px; font-size: 20px;
color: #333333; color: #333333;
margin-bottom: 15/7.5vw; margin-bottom: 15/7.5vw;
} }
.detail{ .detail {
font-size: 12px; font-size: 12px;
line-height: 1.6em; line-height: 1.6em;
color: #333333; color: #333333;
display: block; display: block;
margin-bottom: 15/7.5vw; margin-bottom: 15/7.5vw;
} }
.price{ .price {
.price-content{ .price-content {
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-size: 20px; font-size: 20px;
color: #F83534; color: #f83534;
} }
} }
} }
.head-icon{ .head-icon {
padding: 20/7.5vw; padding: 20/7.5vw;
background: white; background: white;
margin-bottom: 2px; margin-bottom: 2px;
.icon{ .icon {
display: inline-block; display: inline-block;
width: 60/7.5vw; width: 60/7.5vw;
margin: 0 10/7.5vw; margin: 0 10/7.5vw;
border-radius: 1000px; border-radius: 1000px;
vertical-align: middle; vertical-align: middle;
} }
.more{ .more {
width: 50/7.5vw; width: 50/7.5vw;
vertical-align: middle; vertical-align: middle;
} }
.has{ .has {
font-size: 12px; font-size: 12px;
line-height: 60/7.5vw; line-height: 60/7.5vw;
color: #999999; color: #999999;
float: right; float: right;
} }
} }
.welfare{ .welfare {
background: white; background: white;
padding:10/7.5vw ; padding: 10/7.5vw;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
color: #999999; color: #999999;
margin-bottom: 20px; margin-bottom: 20px;
} }
.main-detail{ .main-detail {
padding: 20/7.5vw; padding: 20/7.5vw;
background: white; background: white;
.tab-content{ .tab-content {
border-radius: 9px ; border-radius: 9px;
border: 1px solid #F63539; border: 1px solid #f63539;
&:after{ &:after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.tab-btn{ .tab-btn {
width: 50%; width: 50%;
float: left; float: left;
height: 80/7.5vw; height: 80/7.5vw;
line-height: 80/7.5vw; line-height: 80/7.5vw;
text-align: center; text-align: center;
color: #F63539; color: #f63539;
border-radius:9px ; border-radius: 9px;
&.active{ &.active {
background: #F63539; background: #f63539;
color: white; color: white;
} }
} }
} }
.qa-block{ .qa-block {
padding: 20/7.5vw 0 toVw(150) 0; padding: 20/7.5vw 0 toVw(150) 0;
img,video{ img,
max-width: 100%; video {
} max-width: 100%;
.qa-content{ }
margin: toVw(10) 0; .qa-content {
.qa-q{ margin: toVw(10) 0;
font-size: 16px; .qa-q {
color: #666666; font-size: 16px;
} color: #666666;
.qa-a{ }
font-size: 16px; .qa-a {
color: #333333; font-size: 16px;
} color: #333333;
} }
} }
.detail{ }
padding: 20/7.5vw 0 150/7.5vw 0; .detail {
.detail-content{ padding: 20/7.5vw 0 150/7.5vw 0;
img,video{ .detail-content {
max-width: 100%; img,
} video {
} max-width: 100%;
}
} }
}
} }
footer{ footer {
position: absolute; position: absolute;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 120/7.5vw; height: 120/7.5vw;
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6 // display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6 //
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works) // display: -moz-box; // OLD - Firefox 19- (buggy but mostly works) //
display: -ms-flexbox; // TWEENER - IE 10 // display: -ms-flexbox; // TWEENER - IE 10 //
display: -webkit-flex; // NEW - Chrome // display: -webkit-flex; // NEW - Chrome //
display: flex; // NEW, Spec - Opera 12.1, Firefox 20+ // display: flex; // NEW, Spec - Opera 12.1, Firefox 20+ //
background: white; background: white;
padding: 10/7.5vw; padding: 10/7.5vw;
border-top: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8;
justify-content:space-around; justify-content: space-around;
.btn{ .btn {
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 8px; border-radius: 8px;
width:0; width: 0;
flex-grow:2; flex-grow: 2;
text-align: center; text-align: center;
padding: 15/7.5vw 0; padding: 15/7.5vw 0;
margin: 0 10/7.5vw; margin: 0 10/7.5vw;
line-height: 1.4em; line-height: 1.4em;
font-size: 16px; font-size: 16px;
color: #666666; color: #666666;
span{ span {
display: block; display: block;
font-size: 20px; font-size: 20px;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
} }
img{ img {
width: 50/7.5vw; width: 50/7.5vw;
} }
&.big{ &.big {
padding: 5/7.5vw 0; padding: 5/7.5vw 0;
flex-grow:5; flex-grow: 5;
&.price{ &.price {
background: #F83534; background: #f83534;
border-color: #F83534; border-color: #f83534;
color: white; color: white;
} }
} }
} }
} }
.pop-block{ .pop-block {
padding:40/7.5vw 10/7.5vw; padding: 40/7.5vw 10/7.5vw;
width: 600/7.5vw; width: 600/7.5vw;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
position: relative; position: relative;
img{ img {
width: 250/7.5vw; width: 250/7.5vw;
} }
.close{ .close {
width: 50/7.5vw; width: 50/7.5vw;
position: absolute; position: absolute;
top: 20/7.5vw; top: 20/7.5vw;
right: 20/7.5vw; right: 20/7.5vw;
} }
} }
.pop-fill{ .pop-fill {
width: 705 / 2 * @toVw; width: 705 / 2 * @toVw;
padding:30/7.5vw 30/7.5vw; padding: 30/7.5vw 30/7.5vw;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
...@@ -796,32 +871,31 @@ ...@@ -796,32 +871,31 @@
width: 75 / 2 * @toVw; width: 75 / 2 * @toVw;
height: 75 / 2 * @toVw; height: 75 / 2 * @toVw;
} }
.btn-block{ .btn-block {
margin-top: 30/7.5vw; margin-top: 30/7.5vw;
&:after{ &:after {
content:''; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.btn{ .btn {
float: right; float: right;
background: #F83534; background: #f83534;
font-size: 14px; font-size: 14px;
padding: 5/7.5vw 10/7.5vw; padding: 5/7.5vw 10/7.5vw;
border-radius: 8px; border-radius: 8px;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
}
.content-text {
margin-bottom: 15 * @toVw;
h3 {
margin-bottom: 5 * @toVw;
} }
.content-text{ p {
margin-bottom: 15 * @toVw; font-size: 16 * @toVw;
h3{
margin-bottom: 5 * @toVw;
};
p{
font-size: 16 * @toVw;
}
} }
}
</style> </style>
src/components/buy/inviteFriends.vue
View file @ a166e3b4
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<p>{{item.pay_at}}</p> <p>{{item.pay_at}}</p>
</li> </li>
</ul> </ul>
<div class="look-more-record" @click="lookMoreRecord" v-if="records.length > 0"> <div class="look-more-record" @click="lookMoreRecord" v-if="records.length > 6">
<p>查看更多</p> <p>查看更多</p>
<div class="img-container"> <div class="img-container">
<img src="../../assets/inviteFriends/icon_back.png" /> <img src="../../assets/inviteFriends/icon_back.png" />
...@@ -366,7 +366,7 @@ export default { ...@@ -366,7 +366,7 @@ export default {
background-color: #fff; background-color: #fff;
} }
&:nth-child(even) { &:nth-child(even) {
background-color: rgba(251, 235, 227, 0.8); background-color: rgba(251, 235, 227, 0.7);
} }
p { p {
text-align: center; text-align: center;
......
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