Skip to content

H
h5-base
Commit bd0af7ae authored by wangwei's avatar wangwei
Browse files
Options

投放 去除客服

parent 31bd8272
Show whitespace changes
Inline Side-by-side
Showing with 260 additions and 206 deletions
index.html
View file @ bd0af7ae
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
<title>唱唱启蒙英语</title> <title>唱唱启蒙英语</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_822651_g9r2j7kybxu.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_822651_g9r2j7kybxu.css">
<style> <style>
.mint-toast{
z-index: 10001 !important;
}
</style> </style>
</head> </head>
<body> <body>
......
indexMaster.html
View file @ bd0af7ae
...@@ -12,6 +12,9 @@ ...@@ -12,6 +12,9 @@
*{ *{
-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:touch;
} }
.mint-toast{
z-index: 10001 !important;
}
</style> </style>
</head> </head>
<body> <body>
......
src/components/buy/buy.vue
View file @ bd0af7ae
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<div class="sub-block"> <div class="sub-block">
合计金额： 合计金额：
<span>￥{{priceTotal}}</span> <span>￥{{priceTotal}}</span>
<div class="pay-btn" @click="payOrder(orderFlag)">提交订单</div> <div class="pay-btn" @click="payOrder(orderFlag)">确认支付</div>
</div> </div>
</footer> </footer>
<transition name="slide-fade"> <transition name="slide-fade">
...@@ -249,10 +249,6 @@ ...@@ -249,10 +249,6 @@
this.addressPop = true this.addressPop = true
}, },
initPage(){ initPage(){
if(!JSON.parse(localStorage.getItem('userDesc')).mobile|| JSON.parse(localStorage.getItem('userDesc')).mobile === ''){
this.$router.push({name:'bindMobile',query:{retUrl:this.$route.fullPath}})
}else
{
getwechatParam({api_list:'chooseWXPay'}).then(res=>{ getwechatParam({api_list:'chooseWXPay'}).then(res=>{
wx.config({ wx.config({
debug: false, debug: false,
...@@ -308,7 +304,6 @@ ...@@ -308,7 +304,6 @@
} }
} }
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
......
src/components/buy/index.vue
View file @ bd0af7ae
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
<span class="price-content">￥{{groupDetail.current_price/100}}元</span> <span class="price-content">￥{{groupDetail.current_price/100}}元</span>
<span style="text-decoration:line-through;color: #bbb;font-size: 14px" v-if="groupDetail.goods_type === 1 && groupDetail.original_price > groupDetail.current_price">￥{{groupDetail.original_price/100}}</span> <span style="text-decoration:line-through;color: #bbb;font-size: 14px" v-if="groupDetail.goods_type === 1 && groupDetail.original_price > groupDetail.current_price">￥{{groupDetail.original_price/100}}</span>
</div> </div>
</div> </div>
<div class="head-icon"> <div class="head-icon">
<img class="icon" v-for="(data,index) in groupDetail.header_url" v-if="index<5" :src="data" :key="data"> <img class="icon" v-for="(data,index) in groupDetail.header_url" v-if="index<5" :src="data" :key="data">
...@@ -114,21 +113,41 @@ ...@@ -114,21 +113,41 @@
</div> </div>
</footer> </footer>
</div> </div>
<mt-popup
v-model="bindMobile.show"
class="bindMobile-block"
position="bottom">
<div class="bindMobile-main">
<img :src="groupDetail.goods_desc.img[0].url" class="header">
<div class="title">
{{groupDetail.name}}
<br>
<span style="color: red;font-weight: normal">￥{{(groupDetail.current_price/100).toFixed(2)}}</span>
</div>
<mt-field style="font-size: 14px" label="手机号" placeholder="请输入手机号" v-model="bindMobile.mobile"></mt-field>
<mt-field label="图片验证" placeholder="请输入验证码" v-model="bindMobile.img_code">
<img src="/api/public/img/verify" style="width: 35vw;margin-left: 5px" class="right-btn" ref="imgCode" @click="refImgCode"/>
</mt-field>
<mt-field label="短信验证" placeholder="短信验证码" v-model="bindMobile.verify_code">
<button class="codeMsg right-btn" @click="sendMobileCode" v-if="time===0">发送验证码</button>
<button class="codeMsg disabled right-btn" v-if="time>0">{{time}}s后重新发送</button>
</mt-field>
<mt-button type="danger" style="width: 100%;margin-top: 10px" @click="onBindMobile">下一步</mt-button>
</div>
</mt-popup>
</div> </div>
</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 { Toast } from 'mint-ui';
import { Indicator } from 'mint-ui'; import {getwechatParam,getGoodsDetailApi,bindMobileApi,getUserDetailApi,sendMobileCodeApi,getGroupDetailApi,getStatusWechatApi} from "../../service/api";
import {getwechatParam,getGoodsDetailApi,getGroupDetailApi,getStatusWechatApi} from "../../service/api";
import refBg from '../../assets/refBg.png' import refBg from '../../assets/refBg.png'
import moreUrl from '../../assets/moreIcon.png' import moreUrl from '../../assets/moreIcon.png'
import weChatIcon from '../../assets/wechatIcon.png' import weChatIcon from '../../assets/wechatIcon.png'
import weChatQrUrl from '../../assets/weChatCode.png' import weChatQrUrl from '../../assets/weChatCode.png'
import closeUrl from '../../assets/closemy.png' import closeUrl from '../../assets/closemy.png'
import html2canvas from 'html2canvas'
export default { export default {
name: "index", name: "index",
components: { components: {
...@@ -138,6 +157,12 @@ ...@@ -138,6 +157,12 @@
data(){ data(){
return { return {
refBg:refBg, refBg:refBg,
bindMobile:{
show:false,
mobile:'',
img_code:'',
verify_code:''
},
join:false, join:false,
popType:false, popType:false,
popFill:false, popFill:false,
...@@ -159,11 +184,13 @@ ...@@ -159,11 +184,13 @@
QRCodeB:false, QRCodeB:false,
payFlag:true, payFlag:true,
dataURL:null, dataURL:null,
time:0,
user_id:null, user_id:null,
invite_code_f:true, invite_code_f:true,
invite_code:'', invite_code:'',
this_code:'', this_code:'',
shopId:'', shopId:'',
buyType:'',
groupId:null, groupId:null,
groupDetail:false, groupDetail:false,
groupData:null, groupData:null,
...@@ -173,111 +200,135 @@ ...@@ -173,111 +200,135 @@
this.getDetail(); this.getDetail();
}, },
methods:{ methods:{
goToActivity(){ onBindMobile(){
let query = {} this.$sa.track('clickSignUp',{});
if(window.location.href.indexOf('shopId')>-1){ if(this.payFlag){
query.shopId = this.$route.query.shopId; this.payFlag = false;
if(this.bindMobile.verify_code===''||!this.bindMobile.verify_code) {
Toast('请填写手机验证码');
return false;
} }
if(window.location.href.indexOf('groupId')>-1){ let json={
query.groupId = this.$route.query.groupId; verify_code:this.bindMobile.verify_code
};
let mobileCheck = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
if(this.bindMobile.mobile.match(mobileCheck)){
json.mobile = this.bindMobile.mobile
}else{
Toast('请正确填写手机号');
return false
} }
if(window.location.href.indexOf('invite_code')> -1) { bindMobileApi(json).then(data=>{
query.invite_code = this.$route.query.invite_code; getUserDetailApi().then(res=>{
localStorage.setItem('userDesc',JSON.stringify(res));
this.payFlag = true;
this.goToBuyPage()
})
}).catch(res=>{
this.refImgCode();
this.payFlag = true
})
} }
this.$router.push({name:'activity',query:query})
}, },
refshow(){ timeO(){
Indicator.open(); if(this.time>0){
if(document.body.scrollTop < 10){ this.time--;
document.body.scrollTop = 20;
document.documentElement.scrollTop = 20;
}
if(localStorage.getItem('cc_token') && localStorage.getItem('cc_token') !== ''){
setTimeout(()=>{ setTimeout(()=>{
Indicator.close(); this.timeO()
if(!this.invite_code){ },1000)
this.invite_code = 'CC-USER'
} }
let invite_code = this.invite_code.split('-'); },
if(invite_code.length > 2 && invite_code[1] === 'TEACHER'){ goToBuyPage(){
invite_code[1] = 'USER' let query = {shopId: this.shopId,invite_code:this.invite_code};
if(this.groupId){
query.group_order_id = this.groupId
} }
let code = `${invite_code[0]}-${invite_code[1]}`; if(this.buyType === 0 && !this.groupId){
let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}`; query.type='single';
if(this.groupId && this.groupId !== 'null'){ this.buyType = 'single';
URL += `&groupId=${this.groupId}` }else if (this.buyType === 0 && this.groupId){
this.$router.push({
name: 'buyDetail',
query:{
shopId:this.shopId,
invite_code:this.invite_code
} }
this.qrcode(URL); });
this.refVisible = true; window.location.reload();
return false
} else{
query.type=''
}
let invite = this.invite_code;
this.$sa.track('buyCourse',{
buyType:this.groupDetail.goods_type === 2 && buyType !== 'single' ? '团购' : '直购',
goodsID:this.shopId,
salesType:invite?invite.split('-')[1]:'null',
salesID:invite?Number(invite.split('-')[2]):0
});
if(window.location.href.indexOf('gdt_vid')>-1){
query.gdt_vid = this.$route.query.gdt_vid
}
if(window.location.href.indexOf('cct_user_id')>-1){
query.cct_user_id = this.$route.query.cct_user_id
}
this.$router.push({
name: 'buy',
query:query
});
this.$nextTick(()=>{ this.$nextTick(()=>{
if(!this.dataURL){ this.payFlag=true;
setTimeout(()=>{ });
let { },
height, refImgCode(){
width this.$refs.imgCode.src='/api/public/img/verify?flag='+Math.random()
} = document.getElementById('capture').getClientRects()[0] },
document.getElementById('capture').style.width = width + 'px'; sendMobileCode(){
let o = this.getOffsetRect(this.$refs.imageWrapper); if(this.bindMobile.img_code===''||!this.bindMobile.img_code){
let { Toast({message:'请填写图形验证码'});
height1, return false;
width1 }
} = document.getElementById('capture').getClientRects()[0]; let json={
console.log(height1) img_code:this.bindMobile.img_code
html2canvas(document.getElementById('capture'),{ };
async: true,
timeout: 500,
scrollX:1,
scale: 3,
width: width1,
height: height1,
letterRendering: true,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/jpg");
this.dataURL = dataURL;
}).catch(res=>{alert(res);console.log()});
},500)
}else{
let mobileCheck = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
if(this.bindMobile.mobile.match(mobileCheck)){
json.mobile = this.bindMobile.mobile
}else{
Toast('请正确填写手机号');
return false
} }
}) this.time=30;
},500) this.timeO();
this.$sa.track('clickSendcode',{});
sendMobileCodeApi(json).then(res=>{
if(res === '操作成功'){
Toast('验证码已发送');
}else{ }else{
let query = {retUrl:this.$route.fullPath,is_new_user_url:'1'}; this.time = 0;
this.$router.push({name:'author',query:query}) this.refImgCode();
Toast(res);
} }
}).catch(res=>{
this.refImgCode();
})
}, },
getOffsetRect(ele){ goToActivity(){
var box=ele.getBoundingClientRect(); let query = {}
var body=document.body, if(window.location.href.indexOf('shopId')>-1){
docElem=document.documentElement; query.shopId = this.$route.query.shopId;
//获取页面的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)
} }
}, if(window.location.href.indexOf('groupId')>-1){
qrcode(data){ query.groupId = this.$route.query.groupId;
if(this.QRCodeB){
this.QRCodeB.makeCode(data)
}else{
this.QRCodeB = new QRCode('qrcode', {
width: 80,
height: 80, // 高度
text: data, // 二维码内容
image: ''
});
} }
if(window.location.href.indexOf('invite_code')> -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({name:'activity',query:query})
}, },
// 分享
enableShare: function(option) { enableShare: function(option) {
let that = this; let that = this;
getwechatParam({ getwechatParam({
...@@ -319,7 +370,6 @@ ...@@ -319,7 +370,6 @@
}) })
}) })
}, },
// 处理invite_code
handleInviteCode(){ handleInviteCode(){
if(!this.invite_code){ if(!this.invite_code){
this.this_code = 'CC-USER-'+this.user_id; this.this_code = 'CC-USER-'+this.user_id;
...@@ -444,50 +494,11 @@ ...@@ -444,50 +494,11 @@
}); });
}, },
groupPay(type){ groupPay(type){
if(this.payFlag){ if(!JSON.parse(localStorage.getItem('userDesc')).mobile|| JSON.parse(localStorage.getItem('userDesc')).mobile === ''){
this.payFlag=false; this.bindMobile.show = true
let query = {shopId: this.shopId,invite_code:this.invite_code}; }else{
let buyType this.buyType = type;
if(this.groupId){ this.goToBuyPage();
query.group_order_id = this.groupId
}
if(type === 0 && !this.groupId){
query.type='single';
buyType = 'single';
}else if (type === 0 && this.groupId){
this.$router.push({
name: 'buyDetail',
query:{
shopId:this.shopId,
invite_code:this.invite_code
}
});
window.location.reload();
return false
} else{
query.type=''
}
let invite = this.invite_code;
this.$sa.track('buyCourse',{
buyType:this.groupDetail.goods_type === 2 && buyType !== 'single' ? '团购' : '直购',
goodsID:this.shopId,
salesType:invite?invite.split('-')[1]:'null',
salesID:invite?Number(invite.split('-')[2]):0
});
if(window.location.href.indexOf('gdt_vid')>-1){
query.gdt_vid = this.$route.query.gdt_vid
}
if(window.location.href.indexOf('cct_user_id')>-1){
query.cct_user_id = this.$route.query.cct_user_id
}
this.$router.push({
name: 'buy',
query:query
});
this.$nextTick(()=>{
this.payFlag=true;
});
} }
} }
} }
...@@ -563,6 +574,50 @@ ...@@ -563,6 +574,50 @@
padding-bottom: toVw(150); padding-bottom: toVw(150);
background: #f0f0f0; background: #f0f0f0;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
.bindMobile-block.mint-popup{
border-radius: 0;
width: 100%;
font-size:14*@toVw;
background: transparent;
/deep/ .mint-cell-text{
font-size: 14*@toVw;
}
/deep/ .mint-field-core{
font-size: 14*@toVw;
}
.codeMsg{
border-radius:100*@toVw;
border:1*@toVw solid rgba(96,173,240,1);
background: white;
font-size: 12*@toVw;
color: rgb(96,173,240);
outline: none;
float: right;
padding: 4*@toVw 10*@toVw;
&.disabled{
opacity: 0.5;
}
}
.bindMobile-main{
background: white;
position: relative;
margin-top: 50*@toVw;
.header{
width: 70*@toVw;
top: -30*@toVw;
left: 15*@toVw;
height: 70*@toVw;
position: absolute;
}
.title{
padding-left: 95*@toVw;
padding-top: 5*@toVw;
font-family:PingFang-SC-Bold;
font-weight:bold;
}
}
}
.ref-icon{ .ref-icon{
position: fixed; position: fixed;
height: 100/375 * 90vw ; height: 100/375 * 90vw ;
...@@ -776,5 +831,4 @@ ...@@ -776,5 +831,4 @@
} }
} }
} }
</style> </style>
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