mobileclient/v1_5_0_C/exchange.html

512 lines
24 KiB
HTML
Raw Normal View History

2022-09-21 17:30:39 +08:00
<!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/homepage1_3_0.css?v=12"> -->
<link rel="stylesheet" href="./exchange.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_4_0.js"></script>
<!-- <script src="./payPop.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>
<body>
<div id="exchangePage">
<div v-if="!suspension" class="content">
<!-- 返回模块-->
<img @click="backHandler" class="back" v-if="backAble"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<!-- 优惠卷权益商品 -->
<!-- <div>
<div class="about-good">
<img :src="goodsShow[0]" alt="" v-if="goodsShow.length<=1">
<div class="swiper-container" v-else>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in goodsShow" :key="i">
<img :src="item" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="ipt-acc" style="position: relative;z-index: 999;" @click="bindAvailable">
<div class="title">
<p>
<span class="sign"></span>128.00
</p>
<p class="text">爱奇艺黄金VIP会员-月卡</p>
</div>
<p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
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,'')" :disabled="goodsDetail.available!=1"
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" :disabled="goodsDetail.available!=1" :placeholder="placeholder"
@focus="(e)=>focusFn(e)"></p>
<p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen"
v-model="reaccount" :disabled="goodsDetail.available!=1" placeholder="请再次输入"
@focus="(e)=>focusFn(e)"></p>
</div>
<div class="bottom" id="bottom" v-show="describe.type||detailUrl">
<img :src="detailUrl" v-show="detailUrl">
<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>
</div>
</div> -->
<!-- 优惠卷立减金 -->
<div class="reduce">
<div class="bg">
<div class="bg-left">
<p>
<span class="sign"></span>
<span class="money">100</span>
</p>
<p class="moneyUse">满1000.01可用</p>
</div>
<div class="bg-right">
<p class="money">100.00元微信立减金</p>
<p class="time">有效期2021.12.23 00:00:00至2021.12.23 00:00:00</p>
<p class="receive">请在有效期内领取</p>
</div>
</div>
<div class="illustrate">
<p class="title">- 立减金兑换说明 -</p>
<p class="title_2">使用须知</p>
<p class="text">
1、在微信APP内打开链接点击【一键领取】完成领取微信立减金<br>
2、微信里立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人<br>
</p>
<p class="title_2">使用规则</p>
<p class="text">
1、立减金自领取之日起0天有效请在有效期内使用<br>
2、微信立减金自领取后每个立减金一次性使用不兑换不找零到期后自动失效逾期未使用不再补发。使用微信支付进行付款大于立减金面额0.01元以上)即可自动抵扣<br>
3、多张立减金可在单笔微信支付订单中一起使用但当用户的立减金超过8张时系统会选取其中一部分使用不保证在一张订单中全部使用<br>
4、在中国境内商户使用微信支付即可使用少数特定商户包括但不限于CoCo奶茶、优衣库、星巴克、肯德基、必胜客、同程艺龙、热风、太平鸟、孩子王、航联保险、华为商城、Miss<br>
Sixty、Ochirly、Apple商城、FivePlus、信用卡还款、零钱通、理财通等、以及社交支付如转账、红包、个人收款码支付等及合单支付微信支付订单号为44开头的交易无法使用立减金<br>
5、使用立减金的微信支付订单如发生全额退款且立减金仍在有效期内立减金将自动退还给用户如立减金已过期则不退还给用户如发生部分退款用户支付金额将按比例原路退还立减金将不退还给用户
</p>
</div>
</div>
<!-- 支付模块-->
<div class="exchange-btn-fr">
<div class="title">
<p>
<span class="sign"></span>128.00
</p>
<p class="text">共省¥ 20.00</p>
</div>
<button class="exchange-btn"
:style="{'background': exchangeOpen?bgcolor:'#D7D7D7','color':exchangeOpen?ftcolor:'#333'}"
@click="exchangeGoodsFn">立即支付</button>
</div>
</div>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<!-- 弹出框 -->
<div class="mask" v-if="maskshow">
</div>
<!-- 悬浮提示 -->
<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">
</div>
</div>
<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="">
<!-- 弹出框 -->
<!-- 支付弹窗 -->
<div class="mask model" @touchmove.prevent @mousewheel.prevent v-if="show">
<div class="model-box">
<img class="coles" @click="show=false" src="./img/coles.png" alt="">
<p class="money"><span class="sign"></span>128.00</p>
<p class="title">选择支付方式</p>
<div class="list">
<div class="list-children" @click="active=1">
<div>
<img class="icon" src="./img/wx.png" alt="">
<span>微信支付</span>
</div>
<img class="icon-select" v-if="active===1" src="./img/active.png" alt="">
<img class="icon-select" v-else src="./img/no-active.png" alt="">
</div>
<div class="list-children" @click="active=2">
<div>
<img class="icon" src="./img/zfb.png" alt="">
<span>支付宝支付</span>
</div>
<img class="icon-select" v-if="active===2" src="./img/active.png" alt="">
<img class="icon-select" v-else src="./img/no-active.png" alt="">
</div>
</div>
<button class="pay" @click="payFunction">确认付款</button>
</div>
</div>
<!-- <pay-pop :show="show" @setColes="show=false" :payFunction="payFunction"></pay-pop> -->
<!-- 弹出提示 -->
<div class="popboxshow" v-if="popboxshow&&popboxtype=='提示'" :class="popboxshow?'active':''">
<div class="tip">
<p>{{tiptext}}</p>
<span @click="successchangeBtn">知道了</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>
</div>
</body>
<script>
let goodsCount = null, goodsDetail = null;
new Vue({
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: {},
detailUrl: '',
successTip: '',
goodInfo: '',
bgcolor: '',
ftcolor: '',
goodsDetail: {},//商品详情
backAble: true,
bindClick: false,//控制遮罩显示
goodsShow: [
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220120/9bedd7af6a8a570be8f2858564f9ec6d.png'
],
show: false,
active: 1
}
},
components: {
// payPop
},
created () {
document.title = sessionStorage.getItem('title');
let detailsConfig = JSON.parse(sessionStorage.getItem('product_detail'));
goodsCount = sessionStorage.getItem('goodsCount');
this.backAble = goodsCount > 1;//多个商品才有返回
this.bgcolor = detailsConfig.button_color;
this.ftcolor = detailsConfig.font_color;
this.describe = detailsConfig.describe;
goodsDetail = JSON.parse(sessionStorage.getItem('goodsInfo'));//商品详情
this.goodsDetail = goodsDetail;//商品详情
let goodsInform = goodsDetail.entity; //商品信息
this.goodInfo = goodsInform;
let goods_desc = goodsInform.describe_url;
this.goodsShow = goods_desc.length > 0 ? goods_desc : [goodsDetail.show_url];
this.detailUrl = goodsInform.detail_url ? goodsInform.detail_url : '';
this.productType = goodsDetail.entity.account_type;
this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
autoplay: 3000, //可选选项,自动滑动
pagination: '.swiper-pagination',
})
})
},
methods: {
bindAvailable () {
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
return
}
},
openErrorDialog (tip) {
this.maskshow = true;
this.popboxtype = '提示';
this.tiptext = tip;
this.popboxshow = true;
},
backHandler () {
if (goodsCount > 1) {
window.location.replace('./couponCollection.html');
} else {
history.go(-2);
}
},
closeTip () {
this.suspension = false;
},
susTipFn () {
this.suspension = true;
},
// 单条弹框
openDialog (tip) {
this.promtshow = true;
this.promttip = tip
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
//刷新页面
successchangeBtnFn () {
console.log(window);
window.location.replace(document.referrer);
},
//兑换商品
exchangeGoodsFn () {
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
return
}
if (!this.account) {
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) {
regflag = emailsreg || qqreg || weixinreg;
} else {
regflag = phonereg || emailsreg || qqreg || weixinreg;
}
if (!regflag) {
this.openDialog("充值账号格式不正确!");
return false;
}
}
if (this.reaccount == "") {
this.openDialog("请再次输入账号!");
return false;
}
if (this.account != this.reaccount) {
this.reaccount == ""
this.openDialog("两次输入的账号必须一致!");
return false;
}
this.show = true
this.popboxshow = true;
this.popboxtype = '兑换';
},
//确定兑换
surexchangeBtn () {
let self = this;
let data = {
"key": sessionStorage.getItem('key'),
"goods_id": this.goodInfo.goods_id,
"account": this.account,
"code_batch_id": this.goodInfo.code_batch_id,
"token": sessionStorage.getItem('token')
}
req.axiosPost('/key/usage', data).then(res => {
// sessionStorage.setItem('lastid', self.goodInfo.product_id);
if (res.code == 200) {
sessionStorage.setItem('lastid', self.goodInfo.product_id);
// 查询订单接口
this.popboxtype = '成功';
this.popboxshow = true;
this.successTip = '兑换成功请直接登录app使用';
} else {
this.openErrorDialog(res.message);
if (res.code == -1) {
if (goodsCount > 1) {
setTimeout(() => {
window.location.replace('./homepage.html');
}, 3000);
} else {
// let backUrl = window.history.length;
// if (backUrl) {
// history.go(-backUrl + 1);
// }
/*跳转起始页面*/
let entryLink = sessionStorage.getItem('entryLink');
setTimeout(() => {
window.location.replace(entryLink);
}, 3000);
}
}
}
}).catch(err => {
});
},
//关闭弹出框,仅关闭弹框
successchangeBtn () {
this.maskshow = false;
this.popboxshow = false;
this.account = "";
this.reaccount = "";
},
focusFn (a) {
let ele = document.querySelector('.ipt-acc');
setTimeout(function () {
ele.scrollIntoView(false);
document.body.scrollTop = ele.scrollHeight;
document.documentElement.scrollTop = ele.scrollHeight;
}, 400);
},
//关闭,关闭弹框
closeBtn () {
this.popboxshow = false;
this.maskshow = false;
this.account = "";
this.reaccount = "";
},
/* 确认付款 */
payFunction (va) {
alert(`确认付款 选择的是${this.active === 1 ? '微信' : '支付宝'}`)
}
},
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>