HandOver-liuwu
/
mobileclient
mirror of https://codeup.aliyun.com/lsxd/marketing/mobileclient.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
mobileclient/exchange.html

404 lines
15 KiB
HTML
Raw Normal View History

白名单C端更改
2021-12-29 11:51:28 +08:00
<!DOCTYPE html>
<html lang="en">
白名单C端更新
2022-01-20 14:45:21 +08:00
白名单C端更改
2021-12-29 11:51:28 +08:00
<head>
白名单C端更新
2022-01-20 14:45:21 +08:00
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
<title>权益兑换页</title>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
</script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/js/swiper.min.js"></script>
<link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet">
跟新css加载外部样式
2022-01-22 11:23:31 +08:00
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage1_1_0.css">
白名单C端更新
2022-01-20 14:45:21 +08:00
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
c端白名单自测
2022-01-21 19:17:24 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_1_0.js"></script>
白名单C端更改
2021-12-29 11:51:28 +08:00
<style>
白名单C端更新
2022-01-20 14:45:21 +08:00
* {
margin: 0 auto;
padding: 0;
font-family: HYQiHei;
}
白名单C端更改
2021-12-29 11:51:28 +08:00
白名单C端更新
2022-01-20 14:45:21 +08:00
html {
font-size: 26.66666667vw;
}
白名单C端更改
2021-12-29 11:51:28 +08:00
白名单C端更新
2022-01-20 14:45:21 +08:00
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
白名单C端更改
2021-12-29 11:51:28 +08:00
</style>
</head>
白名单C端更新
2022-01-20 14:45:21 +08:00
白名单C端更改
2021-12-29 11:51:28 +08:00
<body>
白名单C端更新
2022-01-20 14:45:21 +08:00
<div id="exchangePage">
<div v-if="!suspension">
<div class="about-good">
<span>
单商品不显示返回按钮
2022-01-24 14:14:45 +08:00
<img @click="backgoodsFn" v-if=""
白名单C端更新
2022-01-20 14:45:21 +08:00
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
</span>
<img :src="goodsShow[0]" alt="" v-if="goodsShow.length<=1">
<div class="swiper-container" v-else>
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in goodsShow" :key="i">
<img :src="item" alt="">
白名单C端更新
2022-01-20 14:45:21 +08:00
</div>
</div>
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
<div class="swiper-pagination"></div>
</div>
C端更新白名单模式
2022-01-14 13:48:14 +08:00
</div>
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
解决虚拟键盘弹起兑换按钮遮盖输入框
2022-01-24 13:47:35 +08:00
<div class="ipt-acc" style="position: relative;z-index: 999;">
白名单C端更新
2022-01-20 14:45:21 +08:00
<p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="account"
:placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
<p v-if="acctype=='tel'"><span>再次输入:</span> <input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="reaccount"
placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
<p v-if="acctype!='tel'"><span>账号:</span> <input :type="acctype" :maxlength="maxlen" v-model="account"
:placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
<p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen" v-model="reaccount"
placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
</div>
<div class="bottom" id="bottom" v-show="describe.type">
<img :src="describe.bg_image" v-show="describe.type==1&&describe.bg_image">
<div v-html="describe.content" class="goodsTip" v-show="describe.type==3&&describe.content"></div>
白名单C端更改
2021-12-29 11:51:28 +08:00
</div>
白名单C端更新
2022-01-20 14:45:21 +08:00
<button class="exchange-btn" :class="exchangeOpen?bgcolor:''"
:style="{'background': exchangeOpen?bgcolor:'#D7D7D7','color':exchangeOpen?ftcolor:'#333'}"
@click="exchangeGoodsFn">立即兑换</button>
</div>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<!-- 弹出框 -->
<div class="mask" v-if="maskshow">
</div>
C端更新白名单模式
2022-01-14 13:48:14 +08:00
白名单C端更新
2022-01-20 14:45:21 +08:00
<!-- 悬浮提示 -->
<div v-if="suspension" class="suspensionDom">
<img @click="closeTip" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
alt="">
<h4>活动规则</h4>
<div v-html="describe.content">
C端更新白名单模式
2022-01-14 13:48:14 +08:00
白名单C端更新
2022-01-20 14:45:21 +08:00
</div>
C端更新白名单模式
2022-01-14 13:48:14 +08:00
</div>
白名单C端更新
2022-01-20 14:45:21 +08:00
<img class="susTip" @click="susTipFn" v-if="describe.type==2&&describe.content&&!suspension"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png" alt="">
<!-- 弹出框 -->
白名单C端更改
2021-12-29 11:51:28 +08:00
<!-- 询问 -->
<div class="popboxshow" v-if="popboxshow&&popboxtype=='兑换'" :class="popboxshow?'active':''">
白名单C端更新
2022-01-20 14:45:21 +08:00
<div>
<p v-if="acctype=='tel'">是否为账号{{this.account}}兑换{{this.proname}}会员?</p>
<p v-if="acctype=='text'">是否兑换{{this.proname}}会员?</p>
<span @click="surexchangeBtn">确认兑换</span>
白名单C端更改
2021-12-29 11:51:28 +08:00
</div>
白名单C端更新
2022-01-20 14:45:21 +08:00
</div>
<!-- 弹出提示 -->
<div class="popboxshow" v-if="popboxshow&&popboxtype=='提示'" :class="popboxshow?'active':''">
<div class="tip">
<p>{{tiptext}}</p>
<span @click="successchangeBtn">知道了</span>
白名单C端更改
2021-12-29 11:51:28 +08:00
</div>
白名单C端更新
2022-01-20 14:45:21 +08:00
</div>
<!-- 成功 -->
<div class="popboxshow successbox" v-if="popboxshow&&popboxtype=='成功'" :class="popboxshow?'active':''">
<div>
<p>{{this.successTip}}</p>
<span @click="successchangeBtnFn">我知道啦</span>
白名单C端更改
2021-12-29 11:51:28 +08:00
</div>
白名单C端更新
2022-01-20 14:45:21 +08:00
</div>
<img v-if="popboxshow&&popboxtype!='成功'" class="closed"
src="http://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/cardpwd/img/commimgs/close.png" alt=""
@click="closeBtn()">
白名单C端更改
2021-12-29 11:51:28 +08:00
</div>
</body>
<script>
new Vue({
白名单C端更新
2022-01-20 14:45:21 +08:00
el: '#exchangePage',
data() {
return {
account: '',
reaccount: '',
maxlen: 11,
acctype: 'tel',
promttip: '',
promtshow: false,
productType: 0,
proname: '',
placeholder: '',
maskshow: false,
popboxshow: false,
exchangeOpen: false,
suspension: false,
popboxtype: '',
describe: {},
successTip: '',
goodInfo: '',
bgcolor: '',
ftcolor: '',
单商品不显示返回按钮
2022-01-24 14:14:45 +08:00
backAble:true,
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
goodsShow: [
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220120/9bedd7af6a8a570be8f2858564f9ec6d.png'
]
白名单C端更改
2021-12-29 11:51:28 +08:00
}
},
白名单C端更新
2022-01-20 14:45:21 +08:00
created() {
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
let self = this;
C端更新白名单模式
2022-01-14 13:48:14 +08:00
document.title = sessionStorage.getItem('title');
let detailsConfig = JSON.parse(sessionStorage.getItem('product_detail'));
c端白名单自测
2022-01-21 19:17:24 +08:00
this.bgcolor = detailsConfig.button_color;
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
this.bgcolor = '#f00'
c端白名单自测
2022-01-21 19:17:24 +08:00
this.ftcolor = detailsConfig.font_color;
this.describe = detailsConfig.describe;
this.goodInfo = JSON.parse(sessionStorage.getItem('goodsInfo'));
更新兑换后跳转列表页，商品详情页展示商品logo/商品描述
2022-01-22 14:57:51 +08:00
this.goodsShow = JSON.parse(sessionStorage.getItem('goodsInfo')).describe_url?[JSON.parse(sessionStorage.getItem('goodsInfo')).describe_url]:[JSON.parse(sessionStorage.getItem('goodsInfo')).show_url];
c端白名单自测
2022-01-21 19:17:24 +08:00
this.productType = JSON.parse(sessionStorage.getItem('goodsInfo')).account_type;
白名单C端更新
2022-01-20 14:45:21 +08:00
self.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
autoplay: 3000, //可选选项，自动滑动
pagination: '.swiper-pagination',
白名单C端更新
2022-01-20 14:45:21 +08:00
})
商品兑换后统一跳转到商品列表页
2022-01-22 14:41:08 +08:00
console.log(123, document.querySelector('.swiper-container'));
白名单C端更新
2022-01-20 14:45:21 +08:00
})
白名单C端更改
2021-12-29 11:51:28 +08:00
},
白名单C端更新
2022-01-20 14:45:21 +08:00
methods: {
backgoodsFn() {
更新C 端，返回切换
2022-01-22 15:50:40 +08:00
let goodsCount=sessionStorage.getItem('goodsCount');
单商品不显示返回按钮
2022-01-24 14:14:45 +08:00
this.backAble=goodsCount>1;
更新C 端，返回切换
2022-01-22 15:50:40 +08:00
if(goodsCount>1){
window.location.replace(document.referrer);
}else{
调整返回上一页地址
2022-01-24 11:55:00 +08:00
history.go(-2);
更新C 端，返回切换
2022-01-22 15:50:40 +08:00
}
// window.location.replace(document.referrer);
C端更新白名单模式
2022-01-14 13:48:14 +08:00
},
白名单C端更新
2022-01-20 14:45:21 +08:00
closeTip() {
this.suspension = false;
C端更新白名单模式
2022-01-14 13:48:14 +08:00
},
白名单C端更新
2022-01-20 14:45:21 +08:00
susTipFn() {
this.suspension = true;
白名单C端更改
2021-12-29 11:51:28 +08:00
},
白名单C端更新
2022-01-20 14:45:21 +08:00
// 单条弹框
openDialog() {
白名单C端更改
2021-12-29 11:51:28 +08:00
this.promtshow = true;
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
C端详情页逻辑处理，兑换逻辑贯通，代码优化
2021-12-30 17:11:17 +08:00
//刷新页面
successchangeBtnFn() {
调试回退
2022-01-22 15:07:49 +08:00
console.log(window);
更新
2022-01-22 15:20:34 +08:00
window.location.replace(document.referrer);
C端详情页逻辑处理，兑换逻辑贯通，代码优化
2021-12-30 17:11:17 +08:00
},
白名单C端更改
2021-12-29 11:51:28 +08:00
//兑换商品
白名单C端更新
2022-01-20 14:45:21 +08:00
exchangeGoodsFn() {
if (!this.account) {
白名单C端更改
2021-12-29 11:51:28 +08:00
this.promttip = '请输入兑换账号！'
this.openDialog();
return false;
白名单C端更新
2022-01-20 14:45:21 +08:00
} else {
let namereg = /\w{4}/.test(this.account);
let phonereg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account);
let qqreg = /^[1-9][0-9]{4,9}$/.test(this.account);
let emailsreg = /^[A-Za-z0-9\u4e00-\u9fa5\.]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.account);
let weixinreg = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/.test(this.account);
白名单C端更改
2021-12-29 11:51:28 +08:00
let regflag = true;
if (this.productType == 0) {
白名单C端更新
2022-01-20 14:45:21 +08:00
this.placeholder = "请输入昵称";
regflag = namereg;
} else if (this.productType == 1) {
regflag = phonereg;
} else if (this.productType == 2) {
regflag = emailsreg;
} else if (this.productType == 3) {
regflag = phonereg || emailsreg;
} else if (this.productType == 4) {
regflag = qqreg;
} else if (this.productType == 5) {
regflag = phonereg || qqreg;
} else if (this.productType == 6) {
regflag = emailsreg || qqreg;
} else if (this.productType == 7) {
regflag = phonereg || emailsreg || qqreg;
} else if (this.productType == 8) {
regflag = weixinreg;
} else if (this.productType == 9) {
regflag = phonereg || weixinreg;
} else if (this.productType == 10) {
regflag = emailsreg || weixinreg;
} else if (this.productType == 11) {
regflag = phonereg || emailsreg || weixinreg;
} else if (this.productType == 12) {
regflag = qqreg || weixinreg;;
} else if (this.productType == 13) {
regflag = phonereg || qqreg || weixinreg;
} else if (this.productType == 14) {
this.placeholder = "请输入邮箱/QQ号/微信号";
regflag = emailsreg || qqreg || weixinreg;
} else {
this.placeholder = "请输入手机号/邮箱/QQ号/微信号";
regflag = phonereg || emailsreg || qqreg || weixinreg;
}
白名单C端更改
2021-12-29 11:51:28 +08:00
if (!regflag) {
this.promttip = "充值账号格式不正确！"
this.openDialog();
return false;
}
}
if (this.reaccount == "") {
this.promttip = "请再次输入账号！";
this.openDialog();
return false;
}
if (this.account != this.reaccount) {
this.promttip = "两次输入的账号必须一致！";
this.reaccount == ""
this.openDialog();
return false;
}
this.maskshow = true;
this.popboxshow = true;
this.popboxtype = '兑换';
},
白名单C端更新
2022-01-20 14:45:21 +08:00
//确定兑换
surexchangeBtn() {
白名单C端更改
2021-12-29 11:51:28 +08:00
let self = this;
let data = {
"key": sessionStorage.getItem('key'),
C端详情页逻辑处理，兑换逻辑贯通，代码优化
2021-12-30 17:11:17 +08:00
"product_id": this.goodInfo.product_id,
白名单C端更改
2021-12-29 11:51:28 +08:00
"account": this.account,
C端详情页逻辑处理，兑换逻辑贯通，代码优化
2021-12-30 17:11:17 +08:00
"code_batch_id": this.goodInfo.code_batch_id,
白名单C端更新
2022-01-20 14:45:21 +08:00
"token": sessionStorage.getItem('token')
白名单C端更改
2021-12-29 11:51:28 +08:00
}
req.axiosPostusage('/key/usage', data).then(res => {
白名单C端更新
2022-01-20 14:45:21 +08:00
sessionStorage.setItem('lastid', self.goodInfo.product_id);
白名单C端更改
2021-12-29 11:51:28 +08:00
if (res.code == 200) {
// 查询订单接口
this.popboxtype = '成功';
this.popboxshow = true;
this.successTip = '兑换成功，请直接登录app使用！';
} else {
this.popboxtype = '提示';
this.popboxshow = true;
this.tiptext = res.message;
白名单C端更新
2022-01-20 14:45:21 +08:00
if (res.code == -1) {
更新C 端，返回切换
2022-01-22 15:50:40 +08:00
let goodsCount=sessionStorage.getItem('goodsCount');
if(goodsCount>1){
白名单C端更改
2021-12-29 11:51:28 +08:00
setTimeout(() => {
更新C 端，返回切换
2022-01-22 15:50:40 +08:00
window.location.replace(document.referrer);
白名单C端更改
2021-12-29 11:51:28 +08:00
}, 3000);
更新C 端，返回切换
2022-01-22 15:50:40 +08:00
}else{
调整返回上一页地址
2022-01-24 11:55:00 +08:00
let backUrl=window.history.length;
if(backUrl){
history.go(-backUrl+1);
}
白名单C端更改
2021-12-29 11:51:28 +08:00
}
}
}
}).catch(err => {
});
},
//关闭弹出框,仅关闭弹框
successchangeBtn() {
this.maskshow = false;
this.popboxshow = false;
this.account = "";
this.reaccount = "";
C端更新白名单模式
2022-01-14 13:48:14 +08:00
},
focusFn(a) {
虚拟键盘弹起
2022-01-22 11:57:25 +08:00
let ele = document.querySelector('.ipt-acc');
C端更新白名单模式
2022-01-14 13:48:14 +08:00
setTimeout(function () {
ele.scrollIntoView(false);
document.body.scrollTop = document.body.scrollHeight;
document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 400);
白名单C端更改
2021-12-29 11:51:28 +08:00
},
白名单C端更新
2022-01-20 14:45:21 +08:00
//关闭,关闭弹框
closeBtn() {
白名单C端更改
2021-12-29 11:51:28 +08:00
this.popboxshow = false;
this.maskshow = false;
this.account = "";
白名单C端更新
2022-01-20 14:45:21 +08:00
this.reaccount = "";
白名单C端更改
2021-12-29 11:51:28 +08:00
},
},
watch: {
白名单C端更新
2022-01-20 14:45:21 +08:00
account() {
if (this.account == this.reaccount) {
this.exchangeOpen = true;
白名单C端更改
2021-12-29 11:51:28 +08:00
}
},
白名单C端更新
2022-01-20 14:45:21 +08:00
reaccount() {
if (this.account == this.reaccount) {
this.exchangeOpen = true;
白名单C端更改
2021-12-29 11:51:28 +08:00
}
},
白名单C端更新
2022-01-20 14:45:21 +08:00
productType: {
白名单C端更改
2021-12-29 11:51:28 +08:00
immediate: true,
白名单C端更新
2022-01-20 14:45:21 +08:00
handler(newVal) {
this.maxlen = 50;
this.acctype = "text";
if (newVal == 0) {
this.placeholder = "请输入昵称";
} else if (newVal == 1) {
this.acctype = "tel";
this.placeholder = "请输入手机号";
this.maxlen = 11;
} else if (newVal == 2) {
this.placeholder = "请输入邮箱";
} else if (newVal == 3) {
this.placeholder = "请输入手机号或邮箱";
} else if (newVal == 4) {
this.placeholder = "请输入QQ号";
this.acctype = "tel";
this.maxlen = 10;
} else if (newVal == 5) {
this.placeholder = "请输入手机号或QQ号";
this.maxlen = 11;
this.acctype = "tel";
} else if (newVal == 6) {
this.placeholder = "请输入邮箱或QQ号";
} else if (newVal == 7) {
this.placeholder = "请输入手机号/邮箱/QQ号";
} else if (newVal == 8) {
this.placeholder = "请输入微信号";
this.maxlen = 20;
} else if (newVal == 9) {
this.placeholder = "请输入手机号或微信";
this.maxlen = 20;
} else if (newVal == 10) {
this.placeholder = "请输入邮箱或微信号";
} else if (newVal == 11) {
this.placeholder = "请输入手机号/邮箱/微信号";
} else if (newVal == 12) {
this.placeholder = "请输入QQ号或微信号";
this.maxlen = 20;
} else if (newVal == 13) {
this.placeholder = "请输入手机号/QQ号/微信号";
this.maxlen = 20;
} else if (newVal == 14) {
this.placeholder = "请输入邮箱/QQ号/微信号";
} else {
this.placeholder = "请输入手机号/邮箱/QQ号/微信号";
}
白名单C端更改
2021-12-29 11:51:28 +08:00
}
}
}
})
</script>
白名单C端更新
2022-01-20 14:45:21 +08:00
白名单C端更改
2021-12-29 11:51:28 +08:00
</html>