mobileclient/packkey/ysf.html

236 lines
10 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" />
<title>云闪付红包</title>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/ysf.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=20210302151401"
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/common/modelPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js"></script>
2024-02-25 13:51:00 +08:00
</head>
<body>
<div id="ysf">
<img @click="backGoodsFn" v-if="backAble&&!isMini" class="backIcon"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<div class="prompt" :class="promptShow?'proactive':''">
{{prompt_text}}
</div>
<!-- 弹出提示 -->
<model-pop @backFunction="backGoodsFn" :show.sync="popShow" title="温馨提示" :status="popStatus"
:text="popText"></model-pop>
<div v-show="money" class="mask" @touchmove.prevent @mousewheel.prevent>
<div class="random-pop">
<p class="r-p-money"><span class="r-p-tag"></span>{{parseFloat(money)}}</p>
<p class="r-p-type">随机红包</p>
<p class="r-p-text">领取成功<br>请前往【云闪付】-【卡包】中查看</p>
<p class="r-p-but" @click="backGoodsFn"></p>
</div>
</div>
<!-- 单条弹出框 -->
<img class="bubble" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/ysf-logo.png" alt="">
<div class="content">
<p class="title">{{ysf.entity.batch_goods_name}}</p>
<div class="information">
<p class="information-p1">
<span
class="information-tag">¥</span>{{ysf.entity.cash_amount_type==='1'?parseFloat(ysf.entity.denomination)
:`${parseFloat(ysf.entity.min_denomination)}~${parseFloat(ysf.entity.max_denomination)}`}}
</p>
<p class="information-p2">请在 {{ysf.entity.end_time}} 内领取 </p>
<p class="type">{{ysf.entity.cash_amount_type==='1'?'固额红包':'随机红包'}}</p>
</div>
<div class="form">
<div v-if="ysf.available!==9">
<p class="form-label">云闪付账号</p>
<input class="form-input" maxlength="11" v-model="account" type="text" placeholder="请输入手机号" />
<input class="form-input mt0" maxlength="11" v-model="confirmAccount" type="text"
placeholder="请再次输入手机号" />
<p class="form-note">您可在云闪付的个人信息中查看【云闪付账号】</p>
</div>
2024-02-29 11:02:54 +08:00
<button :class="ysf.available=== 9 ? 'disable':''" class="form-button" :disabled="ysf.available=== 9"
2024-02-25 13:51:00 +08:00
@click="submit">{{ysf.available!==9?'立即领取':'已领取'}}</button>
</div>
<div class="segmentation">
<i class="left"></i>
<i class="middle"></i>
<i class="right"></i>
</div>
<div class="illustrate">
<div v-if="ysf.entity.receive_type === 1" class="available_time">
<p class="instruction-text">领取时间</p>
<ul class="timeList">
<li v-for="item in sortWeeks(ysf.entity.receive_rule.week)" :key='item'>
{{item}}
<p v-for="(item1,index) in ysf.entity.receive_rule.time" key={index} style='
text-align: center ; margin-top: 5px'>
{{item1[0]}}~{{item1[1]}}
</p>
</li>
</ul>
</div>
<div v-if="ysf.entity.receive_type === 2" class="available_time">
<p class="instruction-text">领取时间</p>
<ul class="timeList">
<li v-for="item in ysf.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="ysf.entity.receive_type === 3" class="available_time">
<p class="instruction-text">领取时间</p>
<ul class="timeList">
<li v-for="item in ysf.entity.receive_day" :key='item'>{{item.join(" ~ ")}}</li>
</ul>
</div>
<p class="illustrate-title">活动说明</p>
<p class="illustrate-text" v-html="ysf.instruction"></p>
</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}$/;
new Vue({
el: "#ysf",
data() {
2024-02-25 13:51:00 +08:00
return {
ysf: JSON.parse(sessionStorage.getItem('goodsInfo')),
account: null,
confirmAccount: null,
backAble: ~~sessionStorage.getItem('goodsCount') > 1,
promptShow: false,
popShow: false,
popText: '',
popStatus: 1, /*1 成功 2提示 3失败 */
prompt_text: '',
cls: null,
money: 0,
isMini: false,
loading: false
};
},
components: {
modelPop
},
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');
/* 判断是否是微信小程序内 */
let ua = window.navigator.userAgent.toLowerCase();
this.isMini = /miniProgram/i.test(ua);
},
methods: {
/* 立即领取 */
submit() {
2024-02-25 13:51:00 +08:00
if (phoneReg.test(this.account) && this.confirmAccount) {
if (this.account === this.confirmAccount) {
this.finalSubmit();
} else {
this.tips('手机号输入不一致');
}
} else {
this.tips('请输入正确的手机号');
}
},
/* 验证后 最终提交 */
finalSubmit() {
2024-02-25 13:51:00 +08:00
if (this.loading) return;
this.loading = true;
const self = this;
let data = {
key: localStorage.getItem("key"),
goods_id: this.ysf.entity.goods_id,
code_batch_id: this.ysf.code_batch_id,
token: localStorage.getItem("token"),
account: this.account
};
req.axiosPost("/key/usage", data)
.then(({ code, data, message }) => {
2024-03-05 15:07:54 +08:00
2024-02-25 13:51:00 +08:00
this.loading = false;
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-02-25 13:51:00 +08:00
if (self.ysf.entity.cash_amount_type === '2') {
this.money = data.amount;
} else {
this.tip('领取成功,请前往【云闪付】-【卡包】中查看', 1);
}
self.ysf.available = 9;
} 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.tip(message, 2);
}
}
})
.catch((err) => { this.loading = false; });
},
/* 返回 */
backGoodsFn() {
2024-02-25 13:51:00 +08:00
this.money = 0;
/* 判断是否web-view打开 则不返回 */
if (this.isMini) return;
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);
}
},
/* 触发提示 */
tip(text, status,) {
2024-02-25 13:51:00 +08:00
this.popText = text;
this.popStatus = status; /*1 成功 2提示 3失败 */
this.popShow = true;
},
/* 触发提示 */
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);
},
}
})
</script>
</html>