mobileclient/packkey/zfb-redPackets.html

289 lines
13 KiB
HTML
Raw Normal View History

2024-02-25 13:51:00 +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>
2024-03-25 16:48:56 +08:00
<link rel="stylesheet" href="../zfb-redPackets.css" />
2024-02-25 13:51:00 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
<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/MarketingSystem/js/api2_0.js"></script>
<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/loading.js"></script>
2024-03-25 21:53:04 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js?v=sdfhksdfklwrwer"></script>
2024-02-25 13:51:00 +08:00
</head>
<body>
<div id='redPacketsViews'>
<img @click="backGoodsFn" v-if="backAble" class="backIcon"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<!-- 弹出提示 -->
<model-pop :show.sync="popShow" title="温馨提示" :show_close="is" :status="popStatus" :text="popText"
bottom_text="知道了" @backFunction="popShow = false"></model-pop>
<!-- 单条弹出框 -->
<div class="prompt" :class="promptShow?'proactive':''">
{{prompt_text}}
</div>
<div class="mask" @touchmove.prevent @mousewheel.prevent v-if="loading" ref="load">
<preload-component />
</div>
<div class="box" :class="{disb:goodsInfo.available==9}" ref="app">
<div class='top'>
<p class="title">{{goodsInfo.entity.batch_goods_name}}</p>
<p class='effect_date'>
<span>红包有效期截止 {{goodsInfo.entity.end_time}}</span>
</p>
<p class='money'>
<span class='tag' :style="{fontSize:this.fonts().b}"></span>
<span
:style="{fontSize:this.fonts().a}">{{goodsInfo.entity.cash_amount_type==='1'?parseFloat(goodsInfo.entity.denomination)
:`${parseFloat(goodsInfo.entity.min_denomination)}~${parseFloat(goodsInfo.entity.max_denomination)}`}}</span>
</p>
<p class='type'>
<span>{{goodsInfo.entity.cash_amount_type==='1'?'固额红包':'随机红包'}}</span>
</p>
<p class="bt" v-show="goodsInfo.available==9">
<img src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/_h-common_btn_receive@2x.png'
alt='' />
</p>
</div>
<div class="form">
<template v-if="goodsInfo.available!==9">
<input type="text" placeholder="请输入真实姓名" class="f-input" v-model="form.receive_name"
maxlength="100">
<input type="text" placeholder="请输入支付宝账号" class="f-input" v-model="form.receive_account">
<p class="f-prompt">您可在支付宝的个人信息中查看【支付宝账号】</p>
<button class="but" @click="receive">立即领取</button>
</template>
</div>
<div class="instruction-box">
<div class="instruction-header"></div>
<div class='instruction'>
<div class='instruction-1'>
<p class='center'>
<img class='notice'
src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_title_notice.png'
alt='' />
</p>
<div v-if="goodsInfo.entity.receive_type === 1" class="available_time">
<h3 class="instruction-text">领取时间</h3>
<ul class="timeList">
<li v-for="item in sortWeeks(goodsInfo.entity.receive_rule.week)" :key='item'>
{{item}}
<p v-for="(item1,index) in goodsInfo.entity.receive_rule.time" key={index} style='
text-align: center ; margin-top: 5px'>
{{item1[0]}}~{{item1[1]}}
</p>
</li>
</ul>
</div>
<div v-if="goodsInfo.entity.receive_type === 2" class="available_time">
<h3 class="instruction-text">领取时间</h3>
<ul class="timeList">
<li v-for="item in goodsInfo.entity.receive_irregular" :key='item.date'>
{{item.date}}
<p v-for="item1 in item.time" style='margin-top:5px' :key='item1[1]'>
{{item1[0]}}~{{item1[1]}}
</p>
</li>
</ul>
</div>
<div v-if="goodsInfo.entity.receive_type === 3" class="available_time">
<h3 class="instruction-text">领取时间</h3>
<ul class="timeList">
<li v-for="item in goodsInfo.entity.receive_day" :key='item'>{{item.join(" ~ ")}}</li>
</ul>
</div>
<div>
<h3 class="instruction-text">使用规则</h3>
<p class='scroll' v-html="goodsInfo.entity.instruction"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
const bm_obj_data = sessionStorage.getItem("bm_auth") ? JSON.parse(sessionStorage.getItem("bm_auth")) : null;
2024-02-25 13:51:00 +08:00
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
new Vue({
el: "#redPacketsViews",
2024-03-25 21:53:04 +08:00
data() {
2024-02-25 13:51:00 +08:00
return {
popShow: false,
popText: '请点击下方[复制]按钮,复制链接到浏览器打开!',
popStatus: 1, /*1 成功 2提示 3失败 */
goodsInfo: JSON.parse(sessionStorage.getItem('goodsInfo')) || {},
backAble: sessionStorage.getItem('goodsCount') > 1,
loading: false,
is: false,
prompt_text: null,
promptShow: false,
form: {
receive_name: null,
receive_account: null
}
};
},
components: {
modelPop
},
2024-03-25 21:53:04 +08:00
mounted() {
// 领取成功结算 5
2024-02-27 17:55:11 +08:00
if (bm_obj_data && !bm_obj_data.settlement_data.is_settlement && bm_obj_data.settlement_data.settlement_type === 5) {
settlementFun(bm_obj_data.token, bm_obj_data.settlement_data.settlement_type);
}
2024-02-25 13:51:00 +08:00
document.title = localStorage.getItem('title');
// /* 初始弹窗 */
// if (this.goodsInfo.available == 8) {
// this.is = true;
// this.tip(product_status(this.goodsInfo.available, this.goodsInfo), 2);
// }
},
methods: {
/* 立即领取 */
2024-03-25 21:53:04 +08:00
receive() {
2024-02-28 13:57:59 +08:00
let self = this;
2024-02-25 13:51:00 +08:00
const { receive_name, receive_account } = this.form;
if (this.loading) return;
if (!receive_name) return this.tips('请输入真实姓名');
if (!(phoneReg.test(receive_account) || emailReg.test(receive_account))) {
return this.tips('请输入正确的支付宝账号');
}
let data = {
key: localStorage.getItem("key"),
goods_id: this.goodsInfo.entity.goods_id,
code_batch_id: this.goodsInfo.code_batch_id,
token: localStorage.getItem("token"),
};
this.loading = true;
req.axiosPost("/key/usage", data)
.then(({ code, data, message }) => {
2024-02-25 13:51:00 +08:00
if (code == 200) {
2024-03-05 15:07:54 +08:00
// 使用结算 6
// 卡密做特殊处理,复制才会触发
if (bm_obj_data && !bm_obj_data.settlement_data.is_settlement && bm_obj_data.settlement_data.settlement_type === 6) {
settlementFun(bm_obj_data.token, bm_obj_data.settlement_data.settlement_type);
}
2024-03-05 15:07:54 +08:00
2024-02-25 13:51:00 +08:00
this.judgeEnvironment(data.order_number);
} else {
if (code == 403) {
if (this.backAble) {
this.tip(message, 2, '关闭');
setTimeout(() => {
window.location.href = localStorage.getItem('entryLink');
}, 3000);
} else {
this.tip(message, 2, '关闭');
}
} else {
this.loading = false;
this.tip(message, 2, '关闭');
}
}
}).catch((err) => { this.loading = false; });;
},
2024-03-25 21:53:04 +08:00
judgeEnvironment(order_number) {
2024-02-25 13:51:00 +08:00
req.axiosPost('/alipay/cash/receive/account', { ...this.form, order_number })
.then(({ code, data, message }) => {
if (code == 200) {
this.loading = false;
this.goodsInfo.available = 9;
sessionStorage.setItem('goodsInfo', JSON.stringify(this.goodsInfo));
this.tip(message, 1, '关闭');
this.$refs.app.scrollIntoView();
} else {
this.loading = false;
if (code == 403) {
if (this.backAble) {
this.tip(message, 2, '关闭');
setTimeout(() => {
window.location.href = localStorage.getItem('entryLink');
}, 3000);
} else {
this.tip(message, 2, '关闭');
}
} else {
this.tip(message, 2, '关闭');
}
}
}).catch(() => {
this.loading = false;
});
},
/* 触发提示 */
2024-03-25 21:53:04 +08:00
tip(text, status, bt) {
2024-02-25 13:51:00 +08:00
this.popText = text;
this.popStatus = status; /*1 成功 2提示 3失败 */
this.popShow = true;
},
/* 触发提示 */
2024-03-25 21:53:04 +08:00
tips(text) {
2024-02-25 13:51:00 +08:00
this.cls && clearTimeout(this.cls);
this.prompt_text = text;
this.promptShow = true;
this.cls = setTimeout(() => {
this.promptShow = false;
}, 3000);
},
/* 返回 */
2024-03-25 21:53:04 +08:00
backGoodsFn() {
2024-02-25 13:51:00 +08:00
if (this.backAble) {
2024-02-28 09:55:23 +08:00
locationReplace('./homepage.html');
2024-02-25 13:51:00 +08:00
} else {
history.go(-2);
}
},
/* 动态font */
2024-03-25 21:53:04 +08:00
fonts() {
2024-02-25 13:51:00 +08:00
const { cash_amount_type, min_denomination, max_denomination } = this.goodsInfo.entity;
const defaultCss = { b: '0.2rem', a: '0.32rem' };
if (cash_amount_type === '2') {
const count = String(parseFloat(min_denomination)).length + String(parseFloat(max_denomination)).length + 1;
if (count > 6) {
return {
a: 0.32 - ((count - 6) / 100 * 1.5) + 'rem',
b: 0.2 - ((count - 6) / 100) + 'rem'
};
} else {
return defaultCss;
}
} else {
return defaultCss;
}
}
},
})
</script>
</html>