2023-11-17 15:44:32 +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" />
|
2023-11-22 10:28:41 +08:00
|
|
|
|
<title>支付宝立减金</title>
|
2023-11-17 15:44:32 +08:00
|
|
|
|
<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>
|
2024-04-11 03:05:05 +08:00
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></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>
|
2023-11-17 15:44:32 +08:00
|
|
|
|
</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>
|
|
|
|
|
|
<!-- 弹出提示 -->
|
2023-11-22 15:20:59 +08:00
|
|
|
|
<model-pop @backFunction="popShow = false" :show_close="is" :show.sync="popShow" title="温馨提示"
|
|
|
|
|
|
:status="popStatus" :text="popText"></model-pop>
|
2023-11-17 15:44:32 +08:00
|
|
|
|
<!-- 单条弹出框 -->
|
|
|
|
|
|
<img class="bubble" src="https://lsxd-zfb-reduction.oss-cn-hangzhou.aliyuncs.com/img/logo.png" alt="">
|
|
|
|
|
|
<div class="content">
|
2023-12-20 15:16:04 +08:00
|
|
|
|
<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>
|
2024-03-25 19:29:41 +08:00
|
|
|
|
<div class="countdown" v-if="this.outTime.length>0">
|
|
|
|
|
|
<p>{{this.outTime[0]}}</p>时
|
|
|
|
|
|
<p>{{this.outTime[1]}}</p>分
|
|
|
|
|
|
<p>{{this.outTime[2]}}</p>秒
|
2024-03-25 16:48:56 +08:00
|
|
|
|
</div>
|
2023-11-17 15:44:32 +08:00
|
|
|
|
<div class="information">
|
|
|
|
|
|
<p class="information-p1" :style="{fontSize:fonts().a}">
|
|
|
|
|
|
满{{parseFloat(goods.entity.denomination)}}元减{{parseFloat(goods.entity.reduce_amount)}}元
|
|
|
|
|
|
</p>
|
2024-03-25 19:29:41 +08:00
|
|
|
|
<p class="information-p2" v-if="receive_time.timer_show!=2">请在
|
2023-11-17 15:44:32 +08:00
|
|
|
|
{{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">
|
2024-02-05 14:14:15 +08:00
|
|
|
|
<template v-if="goods.available!==9">
|
2023-11-22 10:28:41 +08:00
|
|
|
|
<p class="form-label">支付宝账号</p>
|
2024-10-10 17:43:41 +08:00
|
|
|
|
<input class="form-input" v-model="form.confirm" :disabled="!!goods.account" type="text" placeholder="请输入支付宝账号" />
|
|
|
|
|
|
<input class="form-input mt0" v-model="form.receive_account" :disabled="!!goods.account" type="text" placeholder="请再次输入支付宝账号" />
|
2023-11-17 15:44:32 +08:00
|
|
|
|
<p class="form-note">
|
|
|
|
|
|
您可在支付宝的个人信息中查看【支付宝账号】
|
|
|
|
|
|
</p>
|
2024-04-22 10:24:59 +08:00
|
|
|
|
<button :class="goods.available===9?'disable':''" class="form-button"
|
|
|
|
|
|
@click="submit">{{buttonTextFun(goods.type,'receive')}}</button>
|
2023-11-22 15:20:59 +08:00
|
|
|
|
</template>
|
2024-04-22 10:24:59 +08:00
|
|
|
|
<button v-else class="form-button disable">{{buttonTextFun(goods.type,'received')}}</button>
|
2023-11-17 15:44:32 +08:00
|
|
|
|
</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",
|
2024-06-18 14:22:58 +08:00
|
|
|
|
data() {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
return {
|
|
|
|
|
|
goods: JSON.parse(sessionStorage.getItem('goodsInfo')),
|
|
|
|
|
|
backAble: (~~sessionStorage.getItem('goodsCount')) > 1,
|
|
|
|
|
|
promptShow: false,
|
|
|
|
|
|
popShow: false,
|
2023-11-22 15:20:59 +08:00
|
|
|
|
is: false,
|
2023-11-17 15:44:32 +08:00
|
|
|
|
popText: '',
|
|
|
|
|
|
popStatus: 1, /*1 成功 2提示 3失败 */
|
|
|
|
|
|
prompt_text: '',
|
|
|
|
|
|
cls: null,
|
|
|
|
|
|
receive_time: JSON.parse(sessionStorage.getItem('goodsInfo')).entity.time_limit,
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
form: {
|
2023-11-22 09:34:41 +08:00
|
|
|
|
confirm: null,
|
2023-11-17 15:44:32 +08:00
|
|
|
|
receive_account: null
|
2024-03-25 19:29:41 +08:00
|
|
|
|
},
|
|
|
|
|
|
outTime: []
|
2023-11-17 15:44:32 +08:00
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
components: {
|
|
|
|
|
|
modelPop
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2024-06-18 14:22:58 +08:00
|
|
|
|
mounted() {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
document.title = localStorage.getItem('title');
|
2023-11-22 15:20:59 +08:00
|
|
|
|
|
|
|
|
|
|
/* 初始弹窗 */
|
2024-06-18 15:59:12 +08:00
|
|
|
|
if (this.goods.available == 8 || this.goods.available == 11) {
|
2023-11-22 15:20:59 +08:00
|
|
|
|
this.is = true;
|
|
|
|
|
|
this.tip(product_status(this.goods.available, this.goods), 2);
|
|
|
|
|
|
}
|
2024-10-10 17:43:41 +08:00
|
|
|
|
this.form.confirm = this.goods.account;
|
|
|
|
|
|
this.form.receive_account = this.goods.account;
|
2024-03-25 19:29:41 +08:00
|
|
|
|
/* 倒计时 */
|
|
|
|
|
|
const key_expiration_time = sessionStorage.getItem('key_expiration_time');
|
|
|
|
|
|
if (key_expiration_time != 0) {
|
2024-03-25 19:36:25 +08:00
|
|
|
|
const cls = setInterval(() => {
|
|
|
|
|
|
const time = pageOutTime(key_expiration_time);
|
|
|
|
|
|
if (time) {
|
|
|
|
|
|
this.outTime = time;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.outTime = ['00', '00', '00'];
|
|
|
|
|
|
clearInterval(cls);
|
|
|
|
|
|
}
|
2024-03-25 19:29:41 +08:00
|
|
|
|
}, 1000);
|
|
|
|
|
|
} else {
|
2024-03-25 19:55:37 +08:00
|
|
|
|
this.outTime = [];
|
2024-03-25 19:29:41 +08:00
|
|
|
|
}
|
2023-11-17 15:44:32 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
filters: {
|
2024-06-18 14:22:58 +08:00
|
|
|
|
cardType(val) {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
return val.map((item) => {
|
|
|
|
|
|
return item == 1 ? "借记卡" : "信用卡" + " ";
|
|
|
|
|
|
}).join(" ");
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
/* 立即领取 */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
submit() {
|
2023-11-22 09:34:41 +08:00
|
|
|
|
const { confirm, receive_account } = this.form;
|
2023-11-17 15:44:32 +08:00
|
|
|
|
if (this.loading) return;
|
2024-06-18 14:22:58 +08:00
|
|
|
|
// if (this.goods.available != 1) return;
|
2023-11-22 09:34:41 +08:00
|
|
|
|
if (confirm !== receive_account) return this.tips('支付宝账号不一致');
|
2023-11-17 15:44:32 +08:00
|
|
|
|
if ((phoneReg.test(receive_account) || emailReg.test(receive_account))) {
|
|
|
|
|
|
this.finalSubmit();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.tips('请输入正确的支付宝账号');
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 验证后 最终提交 */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
finalSubmit() {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
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"),
|
2023-11-21 13:57:57 +08:00
|
|
|
|
account: this.form.receive_account
|
2023-11-17 15:44:32 +08:00
|
|
|
|
};
|
|
|
|
|
|
/* 创建订单 */
|
|
|
|
|
|
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; });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 核销支付宝立减金 */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
verificationYsf({ order_number }) {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
let params = {
|
2023-11-21 14:29:58 +08:00
|
|
|
|
order_number,
|
2023-11-17 15:44:32 +08:00
|
|
|
|
channel: "3", //立减金发放渠道，1：支付宝；2：微信 3：云闪付
|
2023-11-21 13:57:57 +08:00
|
|
|
|
receive_mode: 2, /* 领取方式 1:支付宝 2:H5 */
|
|
|
|
|
|
channel_user_id: this.form.receive_account,
|
2023-11-17 15:44:32 +08:00
|
|
|
|
};
|
|
|
|
|
|
req.axiosPost("/voucher/grant", params)
|
|
|
|
|
|
.then(({ code, message }) => {
|
|
|
|
|
|
if (code === 200) {
|
2023-11-22 14:09:12 +08:00
|
|
|
|
this.loading = false;
|
2023-11-22 15:20:59 +08:00
|
|
|
|
this.goods.available = 9;
|
|
|
|
|
|
sessionStorage.setItem('goodsInfo', JSON.stringify(this.goods));
|
2023-11-17 15:44:32 +08:00
|
|
|
|
this.tip('领取成功，请前往【支付宝】-【卡包】中查看', 1);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.axiosErrorFun(code, message, 2);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
2023-11-22 14:09:12 +08:00
|
|
|
|
.catch((err) => {
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
});
|
2023-11-17 15:44:32 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 返回 */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
backGoodsFn() {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
if (this.backAble) {
|
2023-11-22 11:57:03 +08:00
|
|
|
|
window.location.replace('./homepage.html');
|
2023-11-17 15:44:32 +08:00
|
|
|
|
} else {
|
2023-11-22 11:57:03 +08:00
|
|
|
|
history.go(-2);
|
2023-11-17 15:44:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 触发提示 */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
tip(text, status) {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
this.popText = text;
|
|
|
|
|
|
this.popStatus = status; /*1 成功 2提示 3失败 */
|
|
|
|
|
|
this.popShow = true;
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 接口异常处理 */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
axiosErrorFun(code, message, status) {
|
2023-11-22 15:20:59 +08:00
|
|
|
|
this.loading = false;
|
2023-11-17 15:44:32 +08:00
|
|
|
|
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);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 触发提示 */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
tips(text) {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
this.cls && clearTimeout(this.cls);
|
|
|
|
|
|
this.prompt_text = text;
|
|
|
|
|
|
this.promptShow = true;
|
|
|
|
|
|
this.cls = setTimeout(() => {
|
|
|
|
|
|
this.promptShow = false;
|
|
|
|
|
|
}, 3000);
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 动态font */
|
2024-06-18 14:22:58 +08:00
|
|
|
|
fonts() {
|
2023-11-17 15:44:32 +08:00
|
|
|
|
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>
|
