mobileclient/ysf-reduce.html

305 lines
12 KiB
HTML
Raw Permalink Normal View History

2023-07-25 11:47:15 +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>
2023-12-20 15:16:04 +08:00
<link rel="stylesheet" href="./ysf.css">
2023-07-25 11:47:15 +08:00
<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-07-25 11:47:15 +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>
<!-- 弹出提示 -->
2023-07-26 19:19:30 +08:00
<model-pop @backFunction="backGoodsFn" :show_close="is" :show.sync="popShow" title="温馨提示" :status="popStatus"
2023-07-25 11:47:15 +08:00
:text="popText"></model-pop>
<!-- 单条弹出框 -->
<img class="bubble" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/ysf-logo.png" alt="">
<div class="content">
2023-12-20 15:16:04 +08:00
<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>
2024-03-25 16:48:56 +08:00
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-07-25 11:47:15 +08:00
<div class="information">
<p class="information-p1" :style="{fontSize:fonts().a}">
满{{parseFloat(ysf.entity.denomination)}}元减{{parseFloat(ysf.entity.reduce_amount)}}元
</p>
2024-03-25 19:29:41 +08:00
<p class="information-p2" v-if="receive_time.timer_show!=2">请在
2023-07-25 11:47:15 +08:00
{{receive_time.effect_time.start_time}} ~ {{receive_time.effect_time.end_time}} 内领取 </p>
2023-07-26 18:28:26 +08:00
<div class="card">
2023-07-25 11:47:15 +08:00
<p class="type">
{{ysf.entity.card_type|cardType}}
</p>
</div>
</div>
<div class="form">
2023-07-26 20:23:47 +08:00
<div v-show="ysf.available!==9">
2023-07-25 11:47:15 +08:00
<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">
2023-08-04 15:08:57 +08:00
温馨提示:单笔交易大于{{parseFloat(ysf.entity.denomination)}}元可立减{{parseFloat(ysf.entity.reduce_amount)}}元
</p>
2023-07-25 11:47:15 +08:00
</div>
2024-02-05 14:14:15 +08:00
<button :class="ysf.available===9?'disable':''" class="form-button"
2024-04-22 10:24:59 +08:00
@click="submit">{{ysf.available===9?buttonTextFun(ysf.type,'received'):buttonTextFun(ysf.type,'receive')}}</button>
2023-07-25 11:47:15 +08:00
</div>
<div class="segmentation">
<i class="left"></i>
<i class="middle"></i>
<i class="right"></i>
</div>
<div class="illustrate">
2023-07-26 18:28:26 +08:00
<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'">
2023-07-25 11:47:15 +08:00
<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 phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
new Vue({
el: "#ysf",
2024-06-18 13:47:09 +08:00
data() {
2023-07-25 11:47:15 +08:00
return {
ysf: JSON.parse(sessionStorage.getItem('goodsInfo')),
account: null,
confirmAccount: null,
2023-08-09 14:17:24 +08:00
backAble: (~~sessionStorage.getItem('goodsCount')) > 1,
2023-07-25 11:47:15 +08:00
promptShow: false,
popShow: false,
popText: '',
popStatus: 1, /*1 成功 2提示 3失败 */
prompt_text: '',
cls: null,
receive_time: JSON.parse(sessionStorage.getItem('goodsInfo')).entity.time_limit,
isMini: false,
2023-07-26 18:28:26 +08:00
is: false,
2024-03-25 19:29:41 +08:00
loading: false,
outTime: []
2023-07-25 11:47:15 +08:00
};
},
components: {
modelPop
},
2024-06-18 13:47:09 +08:00
mounted() {
2023-08-09 14:17:24 +08:00
document.title = localStorage.getItem('title');
2023-07-25 11:47:15 +08:00
/* 判断是否是微信小程序内 */
let ua = window.navigator.userAgent.toLowerCase();
this.isMini = /miniProgram/i.test(ua);
2023-07-26 18:28:26 +08:00
/* 初始弹窗 */
2023-07-26 20:56:48 +08:00
if (![1, 9].includes(this.ysf.available)) {
2023-07-26 18:28:26 +08:00
this.is = true;
this.tip(product_status(this.ysf.available, this.ysf), 2);
}
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-07-25 11:47:15 +08:00
},
filters: {
2024-06-18 13:47:09 +08:00
cardType(val) {
2023-07-25 11:47:15 +08:00
return val.map((item) => {
return item == 1 ? "借记卡" : "信用卡" + " ";
}).join(" ");
},
},
methods: {
/* 立即领取 */
2024-06-18 13:47:09 +08:00
submit() {
// if (this.ysf.available != 1) return;
if ([1, 11].includes(this.ysf.available)) {
if (phoneReg.test(this.account) && this.confirmAccount) {
if (this.account === this.confirmAccount) {
this.finalSubmit();
} else {
this.tips('手机号输入不一致');
}
2023-07-25 11:47:15 +08:00
} else {
2024-06-18 13:47:09 +08:00
this.tips('请输入正确的手机号');
2023-07-25 11:47:15 +08:00
}
}
},
/* 验证后 最终提交 */
2024-06-18 13:47:09 +08:00
finalSubmit() {
if (this.loading) return;
this.loading = true;
2023-07-25 11:47:15 +08:00
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;
2023-07-25 11:47:15 +08:00
if (code == 200) {
this.verificationYsf(data);
} else {
this.axiosErrorFun(code, message, 2);
}
})
.catch((err) => { this.loading = false; });
2023-07-25 11:47:15 +08:00
},
/* 核销云闪付立减金 */
2024-06-18 13:47:09 +08:00
verificationYsf({ order_number }) {
2023-07-25 11:47:15 +08:00
console.log(order_number);
let params = {
order_number: order_number,
channel: "3", //立减金发放渠道1支付宝2微信 3云闪付
channel_user_id: this.account,
receive_mode: 1,
2023-07-25 11:47:15 +08:00
};
req.axiosPost("/voucher/grant", params)
.then(({ code, message }) => {
if (code === 200) {
2023-07-26 20:23:47 +08:00
this.is = false;
2023-07-25 11:47:15 +08:00
this.ysf.available = 9;
2023-07-26 20:23:47 +08:00
this.tip('领取成功,请前往【云闪付】-【卡包】中查看', 1);
2023-07-25 11:47:15 +08:00
} else {
this.axiosErrorFun(code, message, 2);
}
})
.catch((err) => { });
},
/* 返回 */
2024-06-18 13:47:09 +08:00
backGoodsFn() {
2023-07-25 11:47:15 +08:00
/* 判断是否web-view打开 则不返回 */
if (this.isMini) return;
if (this.backAble) {
setTimeout(() => {
window.location.replace('./homepage.html');
}, 300);
2023-07-25 11:47:15 +08:00
} else {
history.go(-2);
}
},
/* 触发提示 */
2024-06-18 13:47:09 +08:00
tip(text, status) {
2023-07-25 11:47:15 +08:00
this.popText = text;
this.popStatus = status; /*1 成功 2提示 3失败 */
this.popShow = true;
},
/* 接口异常处理 */
2024-06-18 13:47:09 +08:00
axiosErrorFun(code, message, status) {
2023-07-26 20:23:47 +08:00
this.is = false;
2023-07-25 11:47:15 +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 13:47:09 +08:00
tips(text) {
2023-07-25 11:47:15 +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 13:47:09 +08:00
fonts() {
2023-07-25 11:47:15 +08:00
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>