Skip to content

H
h5-base
Commit 9c06fc52 authored by chenyishuai@singsingenglish.com's avatar chenyishuai@singsingenglish.com
Browse files
Options

78

parents 6f6fc0fd a29c38e1
Show whitespace changes
Inline Side-by-side
Showing with 459 additions and 382 deletions
src/components/buy/activity.vue
View file @ 9c06fc52
<template>
<div>
<div class="activity">
<img class="headerImg" :src="header1">
<img class="headerImg" :src="header2">
<img class="headerImg" :src="header1" />
<img class="headerImg" :src="header2" />
<div class="inviteContainer">
<img class="invite-title" :src="inviteResultTitle">
<img class="invite-icon" :src="header_icon"/>
<img class="invite-title" :src="inviteResultTitle" />
<img class="invite-icon" :src="header_icon" />
<div class="invite-list">
<div class="flex-center i-title">
<span>受邀购买</span>
......@@ -21,218 +21,233 @@
<ul class="p-list">
<li v-for="data in inviteList">
<div class="flex-start no-margin">
<img :src="data.avatar"/>
<img :src="data.avatar" />
<span>{{data.nickname}}</span>
</div>
<span class="no-margin">{{data.pay_at | formatDate}}</span>
</li>
</ul>
<img v-if="total > 3" class="moreBtn" :src="moreResult" @click="goToInviteList">
<img v-if="total > 3" class="moreBtn" :src="moreResult" @click="goToInviteList" />
</template>
</div>
<img class="headerImg" :src="header4">
<img class="headerImg" :src="header4" />
<div class="invite-btn">
<img :src="inviteBtn" @click="goToInvite">
<img :src="inviteBtn" @click="goToInvite" />
</div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2'
import {getwechatParam,getGoodsDetailApi,getGroupDetailApi,getStatusWechatApi,getInviteResultApi,getInviteListApi} from "../../service/api";
import refBg from '../../assets/refBg.png'
import moreUrl from '../../assets/moreIcon.png'
import refIcon from '../../assets/refIcon.png'
import weChatIcon from '../../assets/wechatIcon.png'
import weChatQrUrl from '../../assets/weChatCode.png'
import closeUrl from '../../assets/closemy.png'
import html2canvas from 'html2canvas'
import QRCode from "qrcodejs2";
import {
getwechatParam,
getGoodsDetailApi,
getGroupDetailApi,
getStatusWechatApi,
getInviteResultApi,
getInviteListApi
} from "../../service/api";
import refBg from "../../assets/refBg.png";
import moreUrl from "../../assets/moreIcon.png";
import refIcon from "../../assets/refIcon.png";
import weChatIcon from "../../assets/wechatIcon.png";
import weChatQrUrl from "../../assets/weChatCode.png";
import closeUrl from "../../assets/closemy.png";
import html2canvas from "html2canvas";
import header_1 from '../../assets/activity/title1.png'
import header_icon from '../../assets/activity/icon.png'
import header_2 from '../../assets/activity/21.png'
import header_3 from '../../assets/activity/31.jpg'
import header_4 from '../../assets/activity/4.png'
import invite_result_title from '../../assets/activity/invite_result.png'
import more_result from '../../assets/activity/more.png'
import invite_poster from '../../assets/activity/btn.png'
import noData from '../../assets/activity/no_data.png'
export default {
import header_1 from "../../assets/activity/title1.png";
import header_icon from "../../assets/activity/icon.png";
import header_2 from "../../assets/activity/21.png";
import header_3 from "../../assets/activity/31.jpg";
import header_4 from "../../assets/activity/4.png";
import invite_result_title from "../../assets/activity/invite_result.png";
import more_result from "../../assets/activity/more.png";
import invite_poster from "../../assets/activity/btn.png";
import noData from "../../assets/activity/no_data.png";
export default {
name: "index",
data(){
data() {
return {
header1: header_1,
header2: header_2,
header3:header_3,
header_icon:header_icon,
header3: header_3,
header_icon: header_icon,
header4: header_4,
inviteResultTitle: invite_result_title,
moreResult: more_result,
inviteBtn: invite_poster,
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,
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,
noData: noData,
QRCodeB:false,
dataURL:null,
user_id:null,
invite_code_f:true,
invite_code:'',
shopId:'',
groupId:null,
groupDetail:false,
groupData:null,
QRCodeB: false,
dataURL: null,
user_id: null,
invite_code_f: true,
invite_code: "",
shopId: "",
groupId: null,
groupDetail: false,
groupData: null,
earnings: 0,
userNum: 0,
inviteList: [],
total:0,
shareTitle: '钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金',
shareDesc: '21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！'
}
total: 0,
shareTitle: "钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金",
shareDesc: "21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！"
};
},
filters: {
formatDate(value){
if(value) {
return value.split(' ')[0]
formatDate(value) {
if (value) {
return value.split(" ")[0];
} else {
return ''
return "";
}
}
},
mounted(){
mounted() {
this.getInviteResult();
this.getInviteList();
this.enableShare();
},
methods:{
goToInvite(){
methods: {
goToInvite() {
let query = {};
if(window.location.href.indexOf('shopId')>-1){
if (window.location.href.indexOf("shopId") > -1) {
query.shopId = this.$route.query.shopId;
}
if(window.location.href.indexOf('groupId')>-1){
if (window.location.href.indexOf("groupId") > -1) {
query.groupId = this.$route.query.groupId;
}
if(window.location.href.indexOf('invite_code')> -1) {
if (window.location.href.indexOf("invite_code") > -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({name:'activityInvite',query:query})
this.$router.push({ name: "activityInvite", query: query });
},
goToInviteList(){
goToInviteList() {
let query = {};
if(window.location.href.indexOf('shopId')>-1){
if (window.location.href.indexOf("shopId") > -1) {
query.shopId = this.$route.query.shopId;
}
if(window.location.href.indexOf('groupId')>-1){
if (window.location.href.indexOf("groupId") > -1) {
query.groupId = this.$route.query.groupId;
}
if(window.location.href.indexOf('invite_code')> -1) {
if (window.location.href.indexOf("invite_code") > -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({name:'inviteList',query:query})
this.$router.push({ name: "inviteList", query: query });
},
refshow(){
refshow() {
Toast.loading({
mask: true,
message: ''
message: ""
});
if(document.body.scrollTop < 10){
if (document.body.scrollTop < 10) {
document.body.scrollTop = 20;
document.documentElement.scrollTop = 20;
}
if(localStorage.getItem('cc_token') && localStorage.getItem('cc_token') !== ''){
setTimeout(()=>{
Toast.clear()
if(!this.invite_code){
this.invite_code = 'CC-USER'
}
this.user_id=JSON.parse(localStorage.getItem('userDesc')).user_id;
let invite_code = this.invite_code.split('-');
if(invite_code.length > 2 && (invite_code[1] === 'TEACHER' ||invite_code[1] === 'XXMM' )){
invite_code[1] = 'USER'
if (
localStorage.getItem("cc_token") &&
localStorage.getItem("cc_token") !== ""
) {
setTimeout(() => {
Toast.clear();
if (!this.invite_code) {
this.invite_code = "CC-USER";
}
this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
let invite_code = this.invite_code.split("-");
if (
invite_code.length > 2 &&
(invite_code[1] === "TEACHER" || invite_code[1] === "XXMM")
) {
invite_code[1] = "USER";
}
let code = `${invite_code[0]}-${invite_code[1]}`;
let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}`;
if(this.groupId && this.groupId !== 'null'){
URL += `&groupId=${this.groupId}`
if (this.groupId && this.groupId !== "null") {
URL += `&groupId=${this.groupId}`;
}
this.qrcode(URL);
this.refVisible = true;
this.$nextTick(()=>{
if(!this.dataURL){
setTimeout(()=>{
let {
height,
width
} = document.getElementById('capture').getClientRects()[0]
document.getElementById('capture').style.width = width + 'px';
this.$nextTick(() => {
if (!this.dataURL) {
setTimeout(() => {
let { height, width } = document
.getElementById("capture")
.getClientRects()[0];
document.getElementById("capture").style.width = width + "px";
let o = this.getOffsetRect(this.$refs.imageWrapper);
let {
height1,
width1
} = document.getElementById('capture').getClientRects()[0];
html2canvas(document.getElementById('capture'),{
let { height1, width1 } = document
.getElementById("capture")
.getClientRects()[0];
html2canvas(document.getElementById("capture"), {
async: true,
timeout: 500,
scrollX:1,
scrollX: 1,
scale: 3,
width: width1,
height: height1,
letterRendering: true,
}).then((canvas) => {
letterRendering: true
})
.then(canvas => {
let dataURL = canvas.toDataURL("image/jpg");
this.dataURL = dataURL;
}).catch(res=>{alert(res);console.log()});
},500)
}else{
}
})
},500)
}else{
let query = {retUrl:this.$route.fullPath,is_new_user_url:'1'};
this.$router.push({name:'author',query:query})
.catch(res => {
alert(res);
console.log();
});
}, 500);
} else {
}
});
}, 500);
} else {
let query = { retUrl: this.$route.fullPath, is_new_user_url: "1" };
this.$router.push({ name: "author", query: query });
}
},
getOffsetRect(ele){
var box=ele.getBoundingClientRect();
var body=document.body,
docElem=document.documentElement;
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;
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)
}
top: Math.round(top),
left: Math.round(left)
};
},
qrcode(data){
if(this.QRCodeB){
this.QRCodeB.makeCode(data)
}else{
this.QRCodeB = new QRCode('qrcode', {
qrcode(data) {
if (this.QRCodeB) {
this.QRCodeB.makeCode(data);
} else {
this.QRCodeB = new QRCode("qrcode", {
width: 80,
height: 80, // 高度
text: data, // 二维码内容
image: ''
image: ""
});
}
},
......@@ -240,8 +255,8 @@
enableShare: function() {
let that = this;
getwechatParam({
api_list: 'onMenuShareAppMessage,onMenuShareTimeline',
url:window.location.href.split('#')[0]
api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url: window.location.href.split("#")[0]
}).then(wechatRes => {
wx.config({
debug: false,
......@@ -251,6 +266,43 @@
signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
});
wx.ready(function() {
wx.onMenuShareTimeline({
title: that.shareTitle, // 分享标题
desc: that.shareDesc, // 分享描述
link: window.location.href, // 分享链接
imgUrl:
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
console.log("分享成功");
window._hmt.push([
"_trackEvent",
"分享",
"商品页好友分享",
`id${that.shopId}`
]); //百度统计
},
cancel: function() {
// alert("失败")
console.log("分享失败");
}
});
wx.onMenuShareAppMessage({
title: that.shareTitle, // 分享标题
desc: that.shareDesc, // 分享描述
link: window.location.href, // 分享链接
imgUrl:
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
window._hmt.push([
"_trackEvent",
"分享",
"商品页朋友圈分享",
`id${that.shopId}`
]); //百度统计
},
cancel: function() {}
});
wx.ready(function() {
wx.onMenuShareTimeline({
title: that.shareTitle, // 分享标题
......@@ -295,107 +347,133 @@
};
fileReader.readAsDataURL(xhttp.response)
};
xhttp.responseType = 'blob';
xhttp.open('GET', src, true);
xhttp.send()
fileReader.readAsDataURL(xhttp.response);
};
xhttp.responseType = "blob";
xhttp.open("GET", src, true);
xhttp.send();
},
// 初始化
getDetail(){
if(window.location.href.indexOf('invite_code')> -1){
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
let l = this.invite_code.split("-").length;
if (l < 3) {
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;
getGoodsDetailApi(this.shopId).then(res=>{
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}});
if (res.status === 2 && res.bind_goods_id) {
this.$router.push({
name: "buyDetail",
query: { shopId: res.bind_goods_id }
});
this.getDetail();
return
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://');
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.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}});
if (this.groupDetail.goods_type === 2) {
if (localStorage.getItem("cc_token")) {
getStatusWechatApi({ goods_id: this.shopId }).then(res => {
if (res.out_trade_no) {
this.$router.push({
name: "success",
query: { out_trade_no: res.out_trade_no }
});
}
});
}
if(window.location.href.indexOf('groupId')>-1){
if (window.location.href.indexOf("groupId") > -1) {
this.groupId = this.$route.query.groupId;
getGroupDetailApi(this.groupId).then(res=>{
this.groupData = res
getGroupDetailApi(this.groupId).then(res => {
this.groupData = res;
});
this.onShare(0)
}else{
this.onShare(1)
this.onShare(0);
} else {
this.onShare(1);
}
}
})
});
}
},
getInviteResult(){
let id=this.$route.query.shopId;
getInviteResultApi({},id).then(res=>{
getInviteResult() {
let id = this.$route.query.shopId;
getInviteResultApi({}, id).then(res => {
this.earnings = res.earnings;
this.userNum = res.user_num;
});
},
getInviteList(){
getInviteList() {
let json = {
page: 1,
limit: 3
};
let id=this.$route.query.shopId;
getInviteListApi(json,id).then(res=>{
let id = this.$route.query.shopId;
getInviteListApi(json, id).then(res => {
this.inviteList = res.list;
this.total=res.total;
this.total = res.total;
});
}
}
}
};
</script>
<style>
img,video{
img,
video {
max-width: 100%;
}
}
</style>
<style scoped lang="less">
@import "../../util/public";
@red: #fc4a1b;
@borderRadius: 8px;
.activity {
@import "../../util/public";
@red: #fc4a1b;
@borderRadius: 8px;
.activity {
padding-bottom: 50 * @toVh;
background-color: #FFd955;
img{
background-color: #ffd955;
img {
display: block;
}
}
.headerImg {
}
.headerImg {
width: 100%;
}
.inviteContainer {
}
.inviteContainer {
position: relative;
margin: 128 / 2 * @toVh 29 / 2 * @toVw 30 * @toVw 29 / 2 * @toVw;
min-height: 100px;
......@@ -404,26 +482,26 @@
border-radius: @borderRadius;
padding-top: 110 / 2 * @toVw;
padding-bottom: 38 / 2 * @toVh;
}
.invite-title {
}
.invite-title {
position: absolute;
width: 450 / 2 * @toVw;
left: 50%;
margin-left: -450 / 4 * @toVw;
top: -50 / 2 * @toVw;
height: auto;
}
.invite-icon{
}
.invite-icon {
position: absolute;
bottom: -15*@toVw;
width: 50*@toVw;
right: -15*@toVw;
}
.invite-list {
bottom: -15 * @toVw;
width: 50 * @toVw;
right: -15 * @toVw;
}
.invite-list {
margin-left: 32 / 2 * @toVw;
margin-right: 32 / 2 * @toVw;
padding: 28 / 2 * @toVh;
border: 2*@toVw solid #f6234e;
border: 2 * @toVw solid #f6234e;
border-radius: @borderRadius;
.i-title {
font-size: 14px;
......@@ -431,24 +509,24 @@
.i-num {
font-size: 18px;
}
}
.flex-center {
}
.flex-center {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: #888888;
}
.flex-start {
}
.flex-start {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.red{
}
.red {
color: #f6234e;
}
.p-list {
}
.p-list {
margin: 0 32 / 2 * @toVw;
padding: 0;
li {
......@@ -465,15 +543,15 @@
border-radius: 50%;
}
}
}
.no-margin {
}
.no-margin {
margin: 0;
}
.moreBtn {
}
.moreBtn {
width: 220 / 2 * @toVw;
height: auto;
}
.invite-btn {
}
.invite-btn {
position: fixed;
bottom: 0;
width: 100%;
......@@ -485,9 +563,9 @@
width: 504 / 2 * @toVw;
height: auto;
}
}
.noData {
}
.noData {
width: 80%;
margin-top: 15px;
}
}
</style>
src/components/buy/inviteRecordList.vue
View file @ 9c06fc52
......@@ -36,8 +36,7 @@ export default {
page: 1,
loading: true,
finished: false,
list: [
]
list: []
};
},
mounted() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment