Skip to content

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

liwei

parent 70b49654
Show 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">
<img :src="avatar" class="avatar" /> 我已加入，邀请你一起加入
</div> </div>
<div id="qrcode" class="qrcode">
</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>
<div class="line"></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,63 +57,68 @@ ...@@ -44,63 +57,68 @@
</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";
import switchUrl from "../../assets/activity/switch.png";
import html2canvas from "html2canvas";
import { Toast } from "vant";
import { Popup } from "mint-ui";
export default {
name: "index", name: "index",
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
[Popup.name]:Popup [Popup.name]: Popup
}, },
data(){ data() {
return { return {
showLoad:false, showLoad: false,
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,
swiperOption: { swiperOption: {
pagination: { pagination: {
el: '.swiper-pagination' el: ".swiper-pagination"
} }
}, },
QRCodeB:false, QRCodeB: false,
dataURL:null, dataURL: null,
user_id:null, user_id: null,
avatar:'', avatar: "",
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,
redBtnUrl: redBtnUrl, redBtnUrl: redBtnUrl,
envelopeUrl: envelopeUrl, envelopeUrl: envelopeUrl,
whiteEnvelopeUrl: whiteEnvelopeUrl, whiteEnvelopeUrl: whiteEnvelopeUrl,
...@@ -113,21 +131,21 @@ ...@@ -113,21 +131,21 @@
// '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~' // '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~'
// ], // ],
comments: [ comments: [
'英语这样启蒙效果太棒啦，唱唱这个启蒙课程做得真不错，推荐给你们！现在限时优惠价129元，通过我这个老学员的推荐，可获得30元代金券，下单立减，到手价99元。全勤完课还返66元现金，报名立送实物教具礼盒，包邮送到家。数量有限，先到先得！', "英语这样启蒙效果太棒啦，唱唱这个启蒙课程做得真不错，推荐给你们！现在限时优惠价129元，通过我这个老学员的推荐，可获得30元代金券，下单立减，到手价99元。全勤完课还返66元现金，报名立送实物教具礼盒，包邮送到家。数量有限，先到先得！",
// '这家英语启蒙做的很不错\n再也不用花高价去外教班跟培训机构\n在家里就可以直接进行英语启蒙\n21天帮助宝宝树立英语学习兴趣，让宝宝爱上英语\n原价2980元，现在只需要99元\n全勤打卡18天赠送价值100元天猫同款3大精品礼盒\n限量200份，仅售3天！', // '这家英语启蒙做的很不错\n再也不用花高价去外教班跟培训机构\n在家里就可以直接进行英语启蒙\n21天帮助宝宝树立英语学习兴趣，让宝宝爱上英语\n原价2980元，现在只需要99元\n全勤打卡18天赠送价值100元天猫同款3大精品礼盒\n限量200份，仅售3天！',
'发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个21天课程在做活动，我体验过了，真的很好！现限时限量优惠，速来报名~', "发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个21天课程在做活动，我体验过了，真的很好！现限时限量优惠，速来报名~",
'第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天在快乐中学习。现在他们这个21天课程在做活动，全勤学习还返66元现金，报名立送教具礼盒，快来和我一起参与吧！' "第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天在快乐中学习。现在他们这个21天课程在做活动，全勤学习还返66元现金，报名立送教具礼盒，快来和我一起参与吧！"
], ],
commentIndex: 0, commentIndex: 0,
shareTitle: '钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金', shareTitle: "钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金",
shareDesc: '21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！' shareDesc: "21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！"
} };
}, },
mounted(){ mounted() {
this.getDetail(); this.getDetail();
}, },
methods:{ methods: {
onSwitch(){ onSwitch() {
if (this.commentIndex === 0) { if (this.commentIndex === 0) {
this.commentIndex = 1; this.commentIndex = 1;
} else if (this.commentIndex == 1) { } else if (this.commentIndex == 1) {
...@@ -136,129 +154,145 @@ ...@@ -136,129 +154,145 @@
this.commentIndex = 0; this.commentIndex = 0;
} }
}, },
onCopy(e){ onCopy(e) {
console.log(e) console.log(e);
Toast({ Toast({
message: '复制成功', message: "复制成功",
position: 'middle', position: "middle",
className: 'copyToast', className: "copyToast",
duration: 2000 duration: 2000
}); });
this.show = false; this.show = false;
}, },
refshow(){ refshow() {
Toast.loading({ Toast.loading({
mask:"true", mask: "true"
}) });
if(document.body.scrollTop < 10){ if (document.body.scrollTop < 10) {
document.body.scrollTop = 20; document.body.scrollTop = 20;
document.documentElement.scrollTop = 20; document.documentElement.scrollTop = 20;
} }
if(localStorage.getItem('cc_token') && localStorage.getItem('cc_token') !== ''){ if (
localStorage.getItem("cc_token") &&
localStorage.getItem("cc_token") !== ""
) {
let ownDetail = JSON.parse(localStorage.getItem("userDesc")); let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
if(!this.invite_code){ if (!this.invite_code) {
this.invite_code = 'CC-USER' this.invite_code = "CC-USER";
} }
this.user_id=JSON.parse(localStorage.getItem('userDesc')).user_id; this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
let _that = this; let _that = this;
let invite_code = this.invite_code.split('-'); let invite_code = this.invite_code.split("-");
if(invite_code.length > 2 && (invite_code[1] === 'TEACHER' ||invite_code[1] === 'XXMM' )){ if (
invite_code[1] = 'USER' 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 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 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://",
"https://"
),
function(avatar) {
_that.avatar = avatar;
}
);
this.refVisible = true; this.refVisible = true;
this.$nextTick(()=>{ this.$nextTick(() => {
_that.qrcode(URL); _that.qrcode(URL);
if(!this.dataURL){ if (!this.dataURL) {
setTimeout(()=>{ setTimeout(() => {
this.showLoad=true; this.showLoad = true;
this.$nextTick(()=>{ this.$nextTick(() => {
document.getElementById('showImg').onload=()=>{ document.getElementById("showImg").onload = () => {
let { let { height, width, top } = document
height, .getElementById("capture")
width, .getClientRects()[0];
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'),{ );
document.getElementById("inviteBtn").style.top =
height + top + 20 + "px";
document.getElementById("inviteBtn").style.opacity = 1;
html2canvas(document.getElementById("capture"), {
async: true, async: true,
timeout: 500, timeout: 500,
useCORS:true, useCORS: true,
scrollX:1, scrollX: 1,
scale: 2, scale: 2,
width: width, width: width,
height: height, height: height,
letterRendering: true, letterRendering: true
}).then((canvas) => { })
let dataURL = canvas.toDataURL("image/png",0.9); .then(canvas => {
let dataURL = canvas.toDataURL("image/png", 0.9);
this.dataURL = dataURL; this.dataURL = dataURL;
Toast.clear() Toast.clear();
}).catch(res=>{alert(res);console.log()});
}
}) })
.catch(res => {
},500) alert(res);
console.log();
}else{ });
};
});
}, 500);
} else {
} }
}) });
}else{ } else {
let query = {retUrl:this.$route.fullPath,is_new_user_url:'1'}; let query = { retUrl: this.$route.fullPath, is_new_user_url: "1" };
this.$router.push({name:'author',query:query}) this.$router.push({ name: "author", query: query });
} }
}, },
getOffsetRect(ele){ getOffsetRect(ele) {
var box=ele.getBoundingClientRect(); var box = ele.getBoundingClientRect();
var body=document.body, var body = document.body,
docElem=document.documentElement; docElem = document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法) //获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop, var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft; scrollLeft =
var clientTop=docElem.clientTop||body.clientTop, window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
clientLeft=docElem.clientLeft||body.clientLeft; var clientTop = docElem.clientTop || body.clientTop,
var top=box.top+scrollTop-clientTop, clientLeft = docElem.clientLeft || body.clientLeft;
left=box.left+scrollLeft-clientLeft; var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return { return {
//Math.round 兼容火狐浏览器bug //Math.round 兼容火狐浏览器bug
top:Math.round(top), top: Math.round(top),
left:Math.round(left) left: Math.round(left)
} };
}, },
qrcode(data){ qrcode(data) {
if(this.QRCodeB){ if (this.QRCodeB) {
this.QRCodeB.makeCode(data) this.QRCodeB.makeCode(data);
}else{ } else {
this.QRCodeB = new QRCode('qrcode', { this.QRCodeB = new QRCode("qrcode", {
width: 180, width: 180,
height: 180, // 高度 height: 180, // 高度
text: data, // 二维码内容 text: data, // 二维码内容
image: '' image: ""
}); });
} }
}, },
// 分享 // 分享
enableShare: function(option) { enableShare: function(option) {
let that = this; let that = this;
getwechatParam({ getwechatParam({
api_list: 'onMenuShareAppMessage,onMenuShareTimeline', api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url:window.location.href.split('#')[0] url: window.location.href.split("#")[0]
}).then(wechatRes => { }).then(wechatRes => {
console.log('enableShare', wechatRes) console.log("enableShare", wechatRes);
wx.config({ wx.config({
debug: false, debug: false,
appId: wechatRes.appId, appId: wechatRes.appId,
...@@ -270,141 +304,182 @@ ...@@ -270,141 +304,182 @@
wx.ready(function() { wx.ready(function() {
wx.onMenuShareTimeline({ wx.onMenuShareTimeline({
title: that.shareTitle, // 分享标题 title: that.shareTitle, // 分享标题
desc: that.shareDesc,// 分享描述 desc: that.shareDesc, // 分享描述
link: option.shareUrl, // 分享链接 link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() { success: function() {
console.log('分享成功'); console.log("分享成功");
window._hmt.push(['_trackEvent', '分享', "商品页好友分享",`id${that.shopId}`,that.invite_code]);//百度统计 window._hmt.push([
"_trackEvent",
"分享",
"商品页好友分享",
`id${that.shopId}`,
that.invite_code
]); //百度统计
}, },
cancel: function() { cancel: function() {
// alert("失败") // alert("失败")
console.log('分享失败') console.log("分享失败");
} }
}); });
wx.onMenuShareAppMessage({ wx.onMenuShareAppMessage({
title: that.shareTitle, // 分享标题 title: that.shareTitle, // 分享标题
desc: that.shareDesc,// 分享描述 desc: that.shareDesc, // 分享描述
link: option.shareUrl, // 分享链接 link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() { success: function() {
window._hmt.push(['_trackEvent', '分享', "商品页朋友圈分享",`id${that.shopId}`,that.invite_code]);//百度统计 window._hmt.push([
"_trackEvent",
"分享",
"商品页朋友圈分享",
`id${that.shopId}`,
that.invite_code
]); //百度统计
}, },
cancel: function() { cancel: function() {}
} });
});
}); });
})
})
}, },
onShare: function(type) { onShare: function(type) {
let ownDetail = JSON.parse(localStorage.getItem("userDesc")); 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}`; let URL = `${process.env.BUY_URL}?shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}&nickname=${ownDetail.nickname}`;
if(type === 1 ){ if (type === 1) {
URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}&nickname=${ownDetail.nickname}` URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}&nickname=${ownDetail.nickname}`;
} }
this.enableShare({ this.enableShare({
product_title: this.groupDetail.share_desc.title, product_title: this.groupDetail.share_desc.title,
desc: this.groupDetail.share_desc.content, desc: this.groupDetail.share_desc.content,
shareIcon:this.groupDetail.share_desc.img[0].url, shareIcon: this.groupDetail.share_desc.img[0].url,
shareUrl:URL shareUrl: URL
}) });
}, },
onNewShare(url){ onNewShare(url) {
this.enableShare({ this.enableShare({
product_title: this.groupDetail.share_desc.title, product_title: this.groupDetail.share_desc.title,
desc: this.groupDetail.share_desc.content, desc: this.groupDetail.share_desc.content,
shareIcon:this.groupDetail.share_desc.img[0].url, shareIcon: this.groupDetail.share_desc.img[0].url,
shareUrl:url shareUrl: url
}) });
}, },
toDataURLBase64 (src, callback) { toDataURLBase64(src, callback) {
let xhttp = new XMLHttpRequest(); let xhttp = new XMLHttpRequest();
xhttp.onload = function () { xhttp.onload = function() {
let fileReader = new FileReader(); let fileReader = new FileReader();
fileReader.onloadend = function () { fileReader.onloadend = function() {
callback(fileReader.result) callback(fileReader.result);
}; };
fileReader.readAsDataURL(xhttp.response) fileReader.readAsDataURL(xhttp.response);
}; };
xhttp.responseType = 'blob'; xhttp.responseType = "blob";
xhttp.open('GET', src, true); xhttp.open("GET", src, true);
xhttp.send() xhttp.send();
}, },
// 初始化 // 初始化
getDetail(){ getDetail() {
if(window.location.href.indexOf('invite_code')> -1){ if (window.location.href.indexOf("invite_code") > -1) {
this.invite_code = this.$route.query.invite_code; this.invite_code = this.$route.query.invite_code;
let l = this.invite_code.split('-').length let l = this.invite_code.split("-").length;
if(l < 3){ if (l < 3) {
this.invite_code_f = false this.invite_code_f = false;
} }
} }
if(window.location.href.indexOf('shopId')>-1){ if (window.location.href.indexOf("shopId") > -1) {
this.shopId = this.$route.query.shopId; this.shopId = this.$route.query.shopId;
getGoodsDetailApi(this.shopId).then(res=>{ getGoodsDetailApi(this.shopId).then(res => {
res.desc = JSON.parse(res.desc); res.desc = JSON.parse(res.desc);
res.goods_desc = JSON.parse(res.goods_desc); res.goods_desc = JSON.parse(res.goods_desc);
res.share_desc = JSON.parse(res.share_desc); res.share_desc = JSON.parse(res.share_desc);
//商品下架跳转绑定商品 //商品下架跳转绑定商品
if(res.status === 2 && res.bind_goods_id){ if (res.status === 2 && res.bind_goods_id) {
this.$router.push({name:'buyDetail',query:{shopId:res.bind_goods_id}}); this.$router.push({
name: "buyDetail",
query: { shopId: res.bind_goods_id }
});
this.getDetail(); this.getDetail();
return return;
} }
this.groupDetail = res; this.groupDetail = res;
for (let i = 0;i<this.groupDetail.header_url.length;i++){ 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.header_url[i] = this.groupDetail.header_url[
} i
this.groupDetail.desc.detail = this.groupDetail.desc.detail.replace(/http:\/\//g,'https://'); ].replace("http://", "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.desc.detail = this.groupDetail.desc.detail.replace(
this.groupDetail.share_desc.refImg[0].url = this.groupDetail.share_desc.refImg[0].url.replace('http://','https://'); /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; let _this = this;
this.toDataURLBase64(this.groupDetail.share_desc.refImg[0].url, function (avatarUrl) { 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()
} }
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 { } else {
this.refshow() this.refshow();
} }
});
} else { } else {
this.refshow() this.refshow();
} }
}) } else {
this.refshow();
} }
});
} }
} }
} }
};
</script> </script>
<style> <style>
img,video{ img,
video {
max-width: 100%; max-width: 100%;
} }
.copyToast { .copyToast {
z-index: 9999; 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);
}
.marquee {
display: block; display: block;
width: 100%; width: 100%;
top: 12 * @toVw; top: 12 * @toVw;
...@@ -413,23 +488,23 @@ ...@@ -413,23 +488,23 @@
position: absolute; position: absolute;
-webkit-animation: marquee 30s linear infinite; -webkit-animation: marquee 30s linear infinite;
animation: marquee 30s linear infinite; animation: marquee 30s linear infinite;
} }
.elips { .elips {
position: relative; position: relative;
width: 170* @toVw; width: 170 * @toVw;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
/*text-overflow: ellipsis;*/ /*text-overflow: ellipsis;*/
margin: 0; margin: 0;
z-index: 1; z-index: 1;
} }
.tips { .tips {
width: 230 * @toVw; width: 230 * @toVw;
margin-left: 163 / 2 * @toVw; margin-left: 163 / 2 * @toVw;
margin-top: 10 * @toVw; margin-top: 10 * @toVw;
} }
.img-cvs{ .img-cvs {
position: absolute; position: absolute;
background: rgb(253, 168, 19); background: rgb(253, 168, 19);
width: 518 / 2 * @toVw; width: 518 / 2 * @toVw;
...@@ -453,37 +528,36 @@ ...@@ -453,37 +528,36 @@
img { img {
/*border-radius: 10px;*/ /*border-radius: 10px;*/
} }
.qrcode{ .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; width: 642 / 2 * @toVw;
...@@ -492,15 +566,15 @@ ...@@ -492,15 +566,15 @@
font-size: 14 * @toVw; font-size: 14 * @toVw;
color: #fff; color: #fff;
// background: url('../../assets/activity/red-bg.png') no-repeat center; // background: url('../../assets/activity/red-bg.png') no-repeat center;
background: #FF7D77; background: #ff7d77;
border-radius: 25 * @toVw; border-radius: 25 * @toVw;
box-shadow:0px 1px 8px 0px rgba(255,125,119,0.5); box-shadow: 0px 1px 8px 0px rgba(255, 125, 119, 0.5);
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
padding: 2px 58/2*@toVw; padding: 2px 58/2 * @toVw;
overflow: hidden; overflow: hidden;
.i-env { .i-env {
width: 36 / 2 * @toVw;; width: 36 / 2 * @toVw;
height: auto; height: auto;
margin-right: 5px; margin-right: 5px;
margin-left: 0; margin-left: 0;
...@@ -508,18 +582,18 @@ ...@@ -508,18 +582,18 @@
} }
.i-env-title { .i-env-title {
font-size: 16 * @toVw; font-size: 16 * @toVw;
margin:0; margin: 0;
z-index: 2; z-index: 2;
} }
} }
} }
.flex-start { .flex-start {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.g-btns { .g-btns {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-around; justify-content: space-around;
...@@ -532,12 +606,12 @@ ...@@ -532,12 +606,12 @@
width: 96 / 2 * @toVw; width: 96 / 2 * @toVw;
height: 96 / 2 * @toVw; height: 96 / 2 * @toVw;
} }
} }
.copyBtn { .copyBtn {
// background: url('../../assets/activity/yellow-bg.png') no-repeat center; // background: url('../../assets/activity/yellow-bg.png') no-repeat center;
background:rgba(255,125,119,1); background: rgba(255, 125, 119, 1);
box-shadow:0px 1px 8px 0px rgba(255,125,119,1); box-shadow: 0px 1px 8px 0px rgba(255, 125, 119, 1);
border-radius:27 * @toVw; border-radius: 27 * @toVw;
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
width: 196 * @toVw; width: 196 * @toVw;
...@@ -546,43 +620,43 @@ ...@@ -546,43 +620,43 @@
line-height: 92 / 2 * @toVw; line-height: 92 / 2 * @toVw;
color: #fff; color: #fff;
font-size: 20 * @toVw; font-size: 20 * @toVw;
} }
.flex-bt { .flex-bt {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.p-tips { .p-tips {
color: #999; color: #999;
font-size: 15 * @toVw; font-size: 15 * @toVw;
} }
.p-envelope { .p-envelope {
width: 22 * @toVw; width: 22 * @toVw;
height: 22 * @toVw; height: 22 * @toVw;
margin-right: 12 * @toVw; margin-right: 12 * @toVw;
} }
.p-switch { .p-switch {
width: 15 * @toVw; width: 15 * @toVw;
height: 15 * @toVw; height: 15 * @toVw;
} }
.p-comments { .p-comments {
margin: 15px 0; margin: 15px 0;
// height: 220 * @toVw; // height: 220 * @toVw;
overflow-y: scroll; overflow-y: scroll;
p { p {
line-height: 2; line-height: 2;
} }
} }
.no-margin { .no-margin {
margin: 0; margin: 0;
} }
.ref-content{ .ref-content {
width: 299 * @toVw; width: 299 * @toVw;
height: 564 * @toVw; height: 564 * @toVw;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
.tips{ .tips {
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
color: #666; color: #666;
...@@ -590,133 +664,134 @@ ...@@ -590,133 +664,134 @@
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,
video {
max-width: 100%; max-width: 100%;
} }
.qa-content{ .qa-content {
margin: toVw(10) 0; margin: toVw(10) 0;
.qa-q{ .qa-q {
font-size: 16px; font-size: 16px;
color: #666666; color: #666666;
} }
.qa-a{ .qa-a {
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
} }
} }
} }
.detail{ .detail {
padding: 20/7.5vw 0 150/7.5vw 0; padding: 20/7.5vw 0 150/7.5vw 0;
.detail-content{ .detail-content {
img,video{ img,
video {
max-width: 100%; max-width: 100%;
} }
} }
} }
} }
footer{ footer {
position: absolute; position: absolute;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -730,48 +805,48 @@ ...@@ -730,48 +805,48 @@
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;
...@@ -779,9 +854,9 @@ ...@@ -779,9 +854,9 @@
} }
} }
.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{ .content-text {
margin-bottom: 15 * @toVw; margin-bottom: 15 * @toVw;
h3{ h3 {
margin-bottom: 5 * @toVw; margin-bottom: 5 * @toVw;
};
p{
font-size: 16 * @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