mobileclient/packkey/ysf-reduce.html

309 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="./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>
</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_close="is" :show.sync="popShow" title="温馨提示" :status="popStatus"
:text="popText"></model-pop>
<!-- 单条弹出框 -->
<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}}
<span class="send_num" v-if="ysf.entity.send_num>1">x{{ysf.entity.send_num}}</span>
</p>
<div class="countdown" v-if="this.outTime.length>0">
<p>{{this.outTime[0]}}</p>
<p>{{this.outTime[1]}}</p>
<p>{{this.outTime[2]}}</p>
</div>
<div class="information">
<p class="information-p1" :style="{fontSize:fonts().a}">
满{{parseFloat(ysf.entity.denomination)}}元减{{parseFloat(ysf.entity.reduce_amount)}}元
</p>
<p class="information-p2" v-if="receive_time.timer_show!=2">请在
{{receive_time.effect_time.start_time}} ~ {{receive_time.effect_time.end_time}} 内领取 </p>
<div class="card">
<p class="type">
{{ysf.entity.card_type|cardType}}
</p>
</div>
</div>
<div class="form">
<div v-show="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">
温馨提示:单笔交易大于{{parseFloat(ysf.entity.denomination)}}元可立减{{parseFloat(ysf.entity.reduce_amount)}}元
</p>
</div>
<button :class="ysf.available===9?'disable':''" class="form-button"
@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">
<p class="illustrate-title">可用时间</p>
<p class="received-fiexd" v-if="receive_time.use_time.type=='received'">
领取后{{receive_time.use_time.effect_date_type==0?'立即':'次日凌晨'}}生效,有效期
{{receive_time.use_time.effect_day}} 天
</p>
<p class="received-fiexd" v-if="receive_time.use_time.type=='fiexd'">
可用时间:{{receive_time.use_time.fiexd_time.start_time}} ~ {{receive_time.use_time.fiexd_time.end_time}}
</p>
<div class="available_time" v-if="receive_time.use_time.type=='week'">
<ul class="timeList">
<li v-for="(item,index) in sortWeeks(receive_time.use_time.week)" :key="index">
<p>{{item}}</p>
<div>
<p v-for="(item2,index2) in receive_time.use_time.time" :key="index2">
{{item2[0]}}~{{item2[1]}}
</p>
</div>
</li>
</ul>
</div>
<div class="available_time" v-if="receive_time.use_time.type=='irregular'">
<ul class="timeList">
<li v-for="(item,index) in receive_time.use_time.day" :key="index">
<p>{{item[0]}}至{{item[1]}}</p>
<div>
<p v-for="(item2,index2) in receive_time.use_time.time" :key="index2">
{{item2[0]}}~{{item2[1]}}
</p>
</div>
</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;
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
new Vue({
el: "#ysf",
data () {
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: '',
outTime: [],
cls: null,
receive_time: JSON.parse(sessionStorage.getItem('goodsInfo')).entity.time_limit,
isMini: false,
is: false,
loading: false
};
},
components: {
modelPop
},
mounted () {
// 领取成功结算 5
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);
}
document.title = localStorage.getItem('title');
/* 判断是否是微信小程序内 */
let ua = window.navigator.userAgent.toLowerCase();
this.isMini = /miniProgram/i.test(ua);
/* 初始弹窗 */
if (![1, 9].includes(this.ysf.available)) {
this.is = true;
this.tip(product_status(this.ysf.available, this.ysf), 2);
}
/* 倒计时 */
const key_expiration_time = sessionStorage.getItem('key_expiration_time');
if (key_expiration_time != 0) {
setInterval(() => {
this.outTime = pageOutTime(key_expiration_time);
}, 1000);
} else {
this.outTime = [];
}
},
filters: {
cardType (val) {
return val.map((item) => {
return item == 1 ? "借记卡" : "信用卡" + " ";
}).join(" ");
},
},
methods: {
/* 立即领取 */
submit () {
if (phoneReg.test(this.account) && this.confirmAccount) {
if (this.account === this.confirmAccount) {
this.finalSubmit();
} else {
this.tips('手机号输入不一致');
}
} else {
this.tips('请输入正确的手机号');
}
},
/* 验证后 最终提交 */
finalSubmit () {
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 }) => {
this.loading = false;
if (code == 200) {
// 使用结算 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);
}
this.verificationYsf(data);
} else {
this.axiosErrorFun(code, message, 2);
}
})
.catch((err) => { this.loading = false; });
},
/* 核销云闪付立减金 */
verificationYsf ({ order_number }) {
console.log(order_number);
let params = {
order_number: order_number,
channel: "3", //立减金发放渠道1支付宝2微信 3云闪付
channel_user_id: this.account,
receive_mode: 1,
};
req.axiosPost("/voucher/grant", params)
.then(({ code, message }) => {
if (code === 200) {
this.is = false;
this.ysf.available = 9;
this.tip('领取成功,请前往【云闪付】-【卡包】中查看', 1);
} else {
this.axiosErrorFun(code, message, 2);
}
})
.catch((err) => { });
},
/* 返回 */
backGoodsFn () {
/* 判断是否web-view打开 则不返回 */
if (this.isMini) return;
if (this.backAble) {
setTimeout(() => {
locationReplace('./homepage.html');
}, 300);
} else {
history.go(-2);
}
},
/* 触发提示 */
tip (text, status) {
this.popText = text;
this.popStatus = status; /*1 成功 2提示 3失败 */
this.popShow = true;
},
/* 接口异常处理 */
axiosErrorFun (code, message, status) {
this.is = false;
if (code == 403) {
if (this.backAble) {
this.tip(message, status);
setTimeout(() => {
window.location.href = localStorage.getItem('entryLink');
}, 3000);
} else {
this.tip(message, status);
}
} else {
this.tip(message, status);
}
},
/* 触发提示 */
tips (text) {
this.cls && clearTimeout(this.cls);
this.prompt_text = text;
this.promptShow = true;
this.cls = setTimeout(() => {
this.promptShow = false;
}, 3000);
},
/* 动态font */
fonts () {
const { denomination, reduce_amount } = this.ysf.entity;
const defaultCss = { a: '0.34rem' };
const count = String(parseFloat(denomination)).length + String(parseFloat(reduce_amount)).length + 4;
if (count > 12) {
return {
a: 0.34 - ((count - 12) / 100 * 1.8) + 'rem',
};
} else {
return defaultCss;
}
}
}
})
</script>
</html>