315 lines
11 KiB
HTML
315 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<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">
|
|||
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage.css?v=123">
|
|||
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
|
|||
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_0_3.js"></script>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0;
|
|||
|
|
font-family: HYQiHei;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
font-size: 26.66666667vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
-webkit-text-size-adjust: 100%;
|
|||
|
|
-ms-text-size-adjust: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<link rel="stylesheet" href="./homepage.css">
|
|||
|
|
<body>
|
|||
|
|
<div id="exchangePage">
|
|||
|
|
<div class="about-good">
|
|||
|
|
<span @click="backgoodsFn"><返回</span>
|
|||
|
|
<img :src="goodInfo.show_url" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="ipt-acc">
|
|||
|
|
<p><span>账号</span><input v-model="account" type="text" placeholder="请输入QQ号"></p>
|
|||
|
|
<p><span>再次输入</span><input v-model="reaccount" type="text" placeholder="请输入QQ号"></p>
|
|||
|
|
</div>
|
|||
|
|
<img class="desc-img" :src="goodInfo.describe_url" alt="">
|
|||
|
|
<button class="exchange-btn" :class="exchangeOpen?bgcolor:''" :style="{'background': exchangeOpen?bgcolor:'#D7D7D7','color':exchangeOpen?'#fff':'#333'}" @click="exchangeGoodsFn">立即兑换</button>
|
|||
|
|
<!-- 单条弹出框 -->
|
|||
|
|
<div class="prompt" :class="promtshow?'proactive':''">
|
|||
|
|
{{this.promttip}}
|
|||
|
|
</div>
|
|||
|
|
<!-- 弹出框 -->
|
|||
|
|
<div class="mask" v-if="maskshow">
|
|||
|
|
</div>
|
|||
|
|
<!-- 弹出框 -->
|
|||
|
|
<!-- 询问 -->
|
|||
|
|
<div class="popboxshow" v-if="popboxshow&&popboxtype=='兑换'" :class="popboxshow?'active':''">
|
|||
|
|
<div>
|
|||
|
|
<p v-if="acctype=='tel'">是否为账号{{this.account}}兑换{{this.proname}}会员?</p>
|
|||
|
|
<p v-if="acctype=='text'">是否兑换{{this.proname}}会员?</p>
|
|||
|
|
<span @click="surexchangeBtn">确认兑换</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 弹出提示 -->
|
|||
|
|
<div class="popboxshow" v-if="popboxshow&&popboxtype=='提示'" :class="popboxshow?'active':''">
|
|||
|
|
<div class="tip">
|
|||
|
|
<p :class="gstatus==4||gstatus==6?'yettip':''">{{tiptext}}</p>
|
|||
|
|
<span @click="successchangeBtn" :class="gstatus==4||gstatus==6?'yetexchange':''">知道了</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 成功 -->
|
|||
|
|
<div class="popboxshow successbox" v-if="popboxshow&&popboxtype=='成功'" :class="popboxshow?'active':''">
|
|||
|
|
<div>
|
|||
|
|
<p>{{this.successTip}}</p>
|
|||
|
|
<span @click="successchangeBtnFn">我知道啦</span>
|
|||
|
|
</div>
|
|||
|
|
</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()">
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
new Vue({
|
|||
|
|
el:'#exchangePage',
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
account:'',
|
|||
|
|
reaccount:'',
|
|||
|
|
promttip:'',
|
|||
|
|
promtshow:false,
|
|||
|
|
productType:0,
|
|||
|
|
proname:'',
|
|||
|
|
maskshow:false,
|
|||
|
|
popboxshow:false,
|
|||
|
|
exchangeOpen:false,
|
|||
|
|
popboxtype:'',
|
|||
|
|
successTip:'',
|
|||
|
|
goodInfo:'',
|
|||
|
|
bgcolor:'',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
this.bgcolor=sessionStorage.getItem('bcolor');
|
|||
|
|
this.goodInfo=JSON.parse(sessionStorage.getItem('goodsInfo'));
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
backgoodsFn(){
|
|||
|
|
window.history.back();
|
|||
|
|
},
|
|||
|
|
// 单条弹框
|
|||
|
|
openDialog() {
|
|||
|
|
this.promtshow = true;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.promtshow = false;
|
|||
|
|
this.promttip = '';
|
|||
|
|
}, 3000)
|
|||
|
|
},
|
|||
|
|
//兑换商品
|
|||
|
|
exchangeGoodsFn(){
|
|||
|
|
if(!this.account){
|
|||
|
|
this.promttip = '请输入兑换账号！'
|
|||
|
|
this.openDialog();
|
|||
|
|
return false;
|
|||
|
|
}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);
|
|||
|
|
let regflag = true;
|
|||
|
|
if (this.productType == 0) {
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
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 = '兑换';
|
|||
|
|
},
|
|||
|
|
//确定兑换
|
|||
|
|
surexchangeBtn() {
|
|||
|
|
let self = this;
|
|||
|
|
let data = {
|
|||
|
|
"key": sessionStorage.getItem('key'),
|
|||
|
|
"product_id": this.product_id,
|
|||
|
|
"account": this.account,
|
|||
|
|
"code_batch_id": this.codebid,
|
|||
|
|
"token":sessionStorage.getItem('token')
|
|||
|
|
}
|
|||
|
|
req.axiosPostusage('/key/usage', data).then(res => {
|
|||
|
|
sessionStorage.setItem('lastid',self.product_id);
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
// 查询订单接口
|
|||
|
|
this.popboxtype = '成功';
|
|||
|
|
this.popboxshow = true;
|
|||
|
|
|
|||
|
|
this.successTip = '兑换成功，请直接登录app使用！';
|
|||
|
|
} else {
|
|||
|
|
this.popboxtype = '提示';
|
|||
|
|
this.popboxshow = true;
|
|||
|
|
this.tiptext = res.message;
|
|||
|
|
if (res.code == -1) {
|
|||
|
|
let haskey=sessionStorage.getItem('haskey');
|
|||
|
|
if(haskey){
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// window.location.href = "./index.html?id=" + sessionStorage.getItem('linkId')+'&';
|
|||
|
|
window.history.back();
|
|||
|
|
// sessionStorage.clear();
|
|||
|
|
}, 3000);
|
|||
|
|
}else{
|
|||
|
|
setTimeout(() => {
|
|||
|
|
window.location.href = "./index.html?id=" + sessionStorage.getItem('linkId');
|
|||
|
|
// sessionStorage.clear();
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//关闭弹出框,仅关闭弹框
|
|||
|
|
successchangeBtn() {
|
|||
|
|
this.maskshow = false;
|
|||
|
|
this.popboxshow = false;
|
|||
|
|
this.account = "";
|
|||
|
|
this.reaccount = "";
|
|||
|
|
if(this.gstatus==8){
|
|||
|
|
window.history.go(0);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//关闭,关闭弹框
|
|||
|
|
closeBtn() {
|
|||
|
|
this.popboxshow = false;
|
|||
|
|
this.maskshow = false;
|
|||
|
|
this.account = "";
|
|||
|
|
this.reaccount = "";
|
|||
|
|
if(this.gstatus==8){
|
|||
|
|
window.history.go(0);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
account(){
|
|||
|
|
if(this.account==this.reaccount){
|
|||
|
|
this.exchangeOpen=true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
reaccount(){
|
|||
|
|
if(this.account==this.reaccount){
|
|||
|
|
this.exchangeOpen=true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
productType:{
|
|||
|
|
immediate: true,
|
|||
|
|
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号/微信号";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</html>
|