mobileclient/zfb-reduce.html

275 lines
11 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="./zfb-reduce.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>
</head>
<body>
<div id="app">
<img @click="backGoodsFn" v-if="backAble" 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="popShow = false" :show_close="is" :show.sync="popShow" title="温馨提示"
:status="popStatus" :text="popText"></model-pop>
<!-- 单条弹出框 -->
<img class="bubble" src="https://lsxd-zfb-reduction.oss-cn-hangzhou.aliyuncs.com/img/logo.png" alt="">
<div class="content">
<p class="title">
{{goods.entity.batch_goods_name}}
<span class="send_num" v-if="goods.entity.send_num>1">
x{{goods.entity.send_num}}
</span>
</p>
<div class="information">
<p class="information-p1" :style="{fontSize:fonts().a}">
满{{parseFloat(goods.entity.denomination)}}元减{{parseFloat(goods.entity.reduce_amount)}}元
</p>
<p class="information-p2">请在
{{receive_time.effect_time.start_time}} ~ {{receive_time.effect_time.end_time}} 内领取 </p>
<div class="card">
<p class="type">
{{goods.entity.card_type|cardType}}
</p>
</div>
</div>
<div class="form">
<template v-if="goods.available==1">
<p class="form-label">支付宝账号</p>
<input class="form-input" v-model="form.confirm" type="text" placeholder="请输入支付宝账号" />
<input class="form-input mt0" v-model="form.receive_account" type="text" placeholder="请再次输入支付宝账号" />
<p class="form-note">
您可在支付宝的个人信息中查看【支付宝账号】
</p>
<button :class="goods.available!==1?'disable':''" class="form-button" @click="submit">立即领取</button>
</template>
<button v-else class="form-button disable">已领取</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="goods.instruction"></p>
</div>
</div>
</div>
</body>
<script>
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: "#app",
data () {
return {
goods: JSON.parse(sessionStorage.getItem('goodsInfo')),
backAble: (~~sessionStorage.getItem('goodsCount')) > 1,
promptShow: false,
popShow: false,
is: false,
popText: '',
popStatus: 1, /*1 成功 2提示 3失败 */
prompt_text: '',
cls: null,
receive_time: JSON.parse(sessionStorage.getItem('goodsInfo')).entity.time_limit,
loading: false,
form: {
confirm: null,
receive_account: null
}
};
},
components: {
modelPop
},
mounted () {
document.title = localStorage.getItem('title');
/* 初始弹窗 */
if (this.goods.available == 8) {
this.is = true;
this.tip(product_status(this.goods.available, this.goods), 2);
}
},
filters: {
cardType (val) {
return val.map((item) => {
return item == 1 ? "借记卡" : "信用卡" + " ";
}).join(" ");
},
},
methods: {
/* 立即领取 */
submit () {
const { confirm, receive_account } = this.form;
if (this.goods.available !== 1) return;
if (this.loading) return;
if (confirm !== receive_account) return this.tips('支付宝账号不一致');
if ((phoneReg.test(receive_account) || emailReg.test(receive_account))) {
this.finalSubmit();
} else {
this.tips('请输入正确的支付宝账号');
}
},
/* 验证后 最终提交 */
finalSubmit () {
this.loading = true;
const self = this;
let data = {
key: localStorage.getItem("key"),
goods_id: this.goods.entity.goods_id,
code_batch_id: this.goods.code_batch_id,
token: localStorage.getItem("token"),
account: this.form.receive_account
};
/* 创建订单 */
req.axiosPost("/key/usage", data)
.then(({ code, data, message }) => {
if (code == 200) {
this.verificationYsf(data);
} else {
this.axiosErrorFun(code, message, 2);
}
})
.catch((err) => { this.loading = false; });
},
/* 核销支付宝立减金 */
verificationYsf ({ order_number }) {
let params = {
order_number,
channel: "3", //立减金发放渠道1支付宝2微信 3云闪付
receive_mode: 2, /* 领取方式 1:支付宝 2:H5 */
channel_user_id: this.form.receive_account,
};
req.axiosPost("/voucher/grant", params)
.then(({ code, message }) => {
if (code === 200) {
this.loading = false;
this.goods.available = 9;
sessionStorage.setItem('goodsInfo', JSON.stringify(this.goods));
this.tip('领取成功,请前往【支付宝】-【卡包】中查看', 1);
} else {
this.axiosErrorFun(code, message, 2);
}
})
.catch((err) => {
this.loading = false;
});
},
/* 返回 */
backGoodsFn () {
if (this.backAble) {
window.location.replace('./homepage.html');
} else {
history.go(-2);
}
},
/* 触发提示 */
tip (text, status) {
this.popText = text;
this.popStatus = status; /*1 成功 2提示 3失败 */
this.popShow = true;
},
/* 接口异常处理 */
axiosErrorFun (code, message, status) {
this.loading = 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.goods.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>