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