2024-04-16 11:48:47 +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,viewport-fit=cover" />
|
|
|
|
|
|
<title>立减金领取</title>
|
|
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" 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>
|
|
|
|
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage2_0.css" />
|
2024-04-25 11:14:23 +08:00
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></script>
|
2024-04-16 11:48:47 +08:00
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js?v=sdfhksdfklwrwer"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
|
|
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
* {
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
font-family: HYQiHei;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
|
font-size: 26.66666667vw;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
|
|
-ms-text-size-adjust: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="reduce" :style="{paddingTop:this.outTime.length>0?'0':'0.21rem'}">
|
|
|
|
|
|
<!-- 弹出框 -->
|
|
|
|
|
|
<div class="mask" v-if="maskshow"></div>
|
|
|
|
|
|
<!-- 单条弹出框 -->
|
|
|
|
|
|
<div class="prompt" :class="promtshow?'proactive':''">
|
|
|
|
|
|
{{this.promttip}}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 弹出提示 -->
|
|
|
|
|
|
<div class="popboxshow" v-if="popboxshow" :class="popboxshow?'active':''">
|
|
|
|
|
|
<div class="tip">
|
|
|
|
|
|
<p>{{tiptext}}</p>
|
|
|
|
|
|
<span @click="knowFn">知道了</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 复制提示 -->
|
|
|
|
|
|
<div class="popboxshow" v-if="copyshow" :class="copyshow?'active':''">
|
|
|
|
|
|
<div class="tip">
|
|
|
|
|
|
<p>请点击下方[复制]按钮，复制链接到浏览器打开！</p>
|
|
|
|
|
|
<span @click="copyFn">复制</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="countdown" v-if="this.outTime.length>0">
|
|
|
|
|
|
<span>链接有效期：</span>
|
|
|
|
|
|
<p>{{this.outTime[0]}}</p>时
|
|
|
|
|
|
<p>{{this.outTime[1]}}</p>分
|
|
|
|
|
|
<p>{{this.outTime[2]}}</p>秒
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mask" v-if="loading" ref="load" @touchmove.prevent @mousewheel.prevent>
|
|
|
|
|
|
<preload-component />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="couponShow">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<img @click="backgoodsFn" v-if="backAble" class="backIcon"
|
|
|
|
|
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<div class="coupon-left">
|
|
|
|
|
|
<p class="coupon_money" :style="{fontSize:this.fonts()}">
|
|
|
|
|
|
<span>￥</span>{{parseFloat(reduceInfo.reduce_amount)}}
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="full_money">满{{parseFloat(reduceInfo.denomination)}}可用</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="coupon-right">
|
|
|
|
|
|
<p class="title">
|
|
|
|
|
|
{{reduceInfo.batch_goods_name}}
|
|
|
|
|
|
<span class="send_num" v-if="reduceInfo.send_num>1">x{{reduceInfo.send_num}}</span>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p style="font-size: 0.11rem">
|
|
|
|
|
|
{{reduceInfo.card_type|cardType}}可用
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="validity" v-if="receive_time.timer_show!=2">
|
|
|
|
|
|
有效期:{{receive_time.effect_time.start_time}}至{{receive_time.effect_time.end_time}}
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="validity" 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="validity" 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>
|
|
|
|
|
|
</div>
|
2024-05-06 13:35:54 +08:00
|
|
|
|
<div class="receiveBtn" @click="receiveFn" :class="goodInfo.available!=1?'readOnly':''">
|
|
|
|
|
|
{{goodInfo.available==9?buttonTextFun(goodInfo.type,'received'):buttonTextFun(goodInfo.type,'receive')}}</div>
|
2024-04-16 11:48:47 +08:00
|
|
|
|
|
|
|
|
|
|
<div class="coupon_explain">
|
|
|
|
|
|
<h1>- 兑换说明 -</h1>
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<h3 v-if="receive_time.use_time.type=='week'||receive_time.use_time.type=='irregular'">可用时间</h3>
|
|
|
|
|
|
<ul v-if="receive_time.use_time.type=='week'" class="weekTime">
|
|
|
|
|
|
<li v-for="(item,index) in 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>
|
|
|
|
|
|
<ul v-if="receive_time.use_time.type=='irregular'">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<h3>使用须知</h3>
|
2024-05-06 13:35:54 +08:00
|
|
|
|
<p v-html="goodInfo.entity.notice" v-if="goodInfo.entity.notice"></p>
|
|
|
|
|
|
<p v-else>
|
2024-04-16 11:48:47 +08:00
|
|
|
|
1、在{{reduceInfo.channel==1?'支付宝H5':'微信APP内打开链接'}}，点击【一键领取】完成领取{{reduceInfo.channel==1?'支付宝':'微信'}}立减金<br />
|
|
|
|
|
|
2、{{reduceInfo.channel==1?'支付宝':'微信'}}立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人
|
|
|
|
|
|
</p>
|
2024-05-06 13:35:54 +08:00
|
|
|
|
|
2024-04-16 11:48:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<h3>使用规则</h3>
|
|
|
|
|
|
<p v-html="goodInfo.instruction"></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
let goodsDetail = null, goodsCount = null;
|
|
|
|
|
|
new Vue({
|
|
|
|
|
|
el: "#reduce",
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
plaflam: 1, //支付宝
|
|
|
|
|
|
promtshow: false,
|
|
|
|
|
|
promttip: "警告提示",
|
|
|
|
|
|
copyshow: false,//解决ios，必须触发按钮复制
|
|
|
|
|
|
copyLink: '',//存储链接
|
|
|
|
|
|
popboxshow: false,
|
|
|
|
|
|
maskshow: false,
|
|
|
|
|
|
openId: localStorage.getItem('openid'),
|
|
|
|
|
|
bindClick: false,
|
|
|
|
|
|
tiptext: "错误提示",
|
|
|
|
|
|
goodInfo: {}, //商品信息
|
|
|
|
|
|
reduceInfo: {}, //券信息
|
|
|
|
|
|
orderId: '',
|
|
|
|
|
|
backAble: true,
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
outTime: [],
|
2024-04-26 18:24:42 +08:00
|
|
|
|
cardType: [],
|
2024-04-16 11:48:47 +08:00
|
|
|
|
receive_time: {},//领取立减金时间
|
|
|
|
|
|
tip: `1、立减金自领取之日起0天有效，请在有效期内使用<br />
|
|
|
|
|
|
2、微信立减金自领取后每个立减金一次性使用，不兑换，不找零，到期后自动失效，逾期未使用不再补发。使用微信支付进行付款（大于立减金面额0.01元以上）即可自动抵扣<br />
|
|
|
|
|
|
3、多张立减金可在单笔微信支付订单中一起使用，但当用户的立减金超过8张时，系统会选取其中一部分使用，不保证在一张订单中全部使用<br />
|
|
|
|
|
|
4、在中国境内商户使用微信支付即可使用，少数特定商户（包括但不限于：CoCo奶茶、优衣库、星巴克、肯德基、必胜客、同程艺龙、热风、太平鸟、孩子王、航联保险、华为商城、Miss
|
|
|
|
|
|
Sixty、Ochirly、Apple商城、FivePlus、信用卡还款、零钱通、理财通等）、以及社交支付（如转账、红包、个人收款码支付等）及合单支付（微信支付订单号为44开头的交易）无法使用立减金<br />
|
|
|
|
|
|
5、使用立减金的微信支付订单，如发生全额退款，且立减金仍在有效期内，立减金将自动退还给用户，如立减金已过期，则不退还给用户；如发生部分退款，用户支付金额将按比例原路退还，立减金将不退还给用户<br />`,
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
|
|
|
document.title = localStorage.getItem('title');
|
|
|
|
|
|
/* 获取立减金信息*/
|
2024-04-25 11:53:31 +08:00
|
|
|
|
goodsDetail = JSON.parse(localStorage.getItem("goodsInfo"));
|
2024-04-16 11:48:47 +08:00
|
|
|
|
this.goodInfo = goodsDetail;
|
|
|
|
|
|
console.log(this.goodInfo)
|
|
|
|
|
|
/*默认显示*/
|
|
|
|
|
|
// if (goodsDetail.available != 1) {
|
|
|
|
|
|
// this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
|
|
|
|
|
|
// this.bindClick = true;
|
|
|
|
|
|
// }
|
2024-04-25 11:53:31 +08:00
|
|
|
|
goodsCount = localStorage.getItem('goodsCount') ? Number(localStorage.getItem('goodsCount')) : 0;
|
2024-04-16 11:48:47 +08:00
|
|
|
|
this.backAble = goodsCount > 1;//多个商品才有返回
|
|
|
|
|
|
this.reduceInfo = goodsDetail.entity;
|
|
|
|
|
|
this.plaflam = goodsDetail.entity.channel;
|
|
|
|
|
|
if (goodsDetail.entity.time_limit.use_time && goodsDetail.entity.time_limit.use_time.type == 'week') { //处理星期连贯操作
|
|
|
|
|
|
goodsDetail.entity.time_limit.use_time.week = sortWeeks(goodsDetail.entity.time_limit.use_time.week);
|
|
|
|
|
|
}
|
|
|
|
|
|
this.receive_time = goodsDetail.entity.time_limit;
|
|
|
|
|
|
|
|
|
|
|
|
/* 倒计时 */
|
2024-04-25 11:53:31 +08:00
|
|
|
|
const key_expiration_time = localStorage.getItem('key_expiration_time');
|
2024-04-16 11:48:47 +08:00
|
|
|
|
if (key_expiration_time != 0) {
|
|
|
|
|
|
const cls = setInterval(() => {
|
|
|
|
|
|
const time = pageOutTime(key_expiration_time);
|
|
|
|
|
|
if (time) {
|
|
|
|
|
|
this.outTime = time;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.outTime = ['00', '00', '00'];
|
|
|
|
|
|
clearInterval(cls);
|
|
|
|
|
|
}
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.outTime = [];
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
filters: {
|
|
|
|
|
|
cardType(val) {
|
2024-04-26 18:24:42 +08:00
|
|
|
|
if (val) {
|
|
|
|
|
|
return val.map((item) => {
|
|
|
|
|
|
return item == 1 ? "借记卡" : "信用卡" + " ";
|
|
|
|
|
|
}).join(" ");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-04-16 11:48:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
globalFormatStatus(type) {
|
|
|
|
|
|
switch (type) {
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
return "立即兑换"
|
|
|
|
|
|
case 9:
|
|
|
|
|
|
return "已兑换"
|
|
|
|
|
|
default:
|
|
|
|
|
|
return "立即兑换"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
backgoodsFn() {
|
|
|
|
|
|
if (goodsCount > 1) {
|
|
|
|
|
|
window.location.replace('./homepage.html');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
history.go(-2);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
receiveFn() {
|
|
|
|
|
|
if (this.loading) return;
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
|
let self = this;
|
|
|
|
|
|
if (self.goodInfo.available != 1) {
|
|
|
|
|
|
self.openErrorDialog(product_status(self.goodInfo.available, self.goodInfo));
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
key: localStorage.getItem("key"),
|
|
|
|
|
|
goods_id: this.goodInfo.entity.goods_id,
|
|
|
|
|
|
code_batch_id: this.goodInfo.code_batch_id,
|
|
|
|
|
|
token: localStorage.getItem("token"),
|
|
|
|
|
|
};
|
|
|
|
|
|
req.axiosPost("/key/usage", data)
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
if (res.code == 200) {
|
2024-04-25 11:53:31 +08:00
|
|
|
|
localStorage.setItem("lastid", self.goodInfo.product_id);
|
2024-04-16 11:48:47 +08:00
|
|
|
|
this.orderId = res.data.order_number;
|
|
|
|
|
|
// 第一步：是否是微信环境 -> 公众号授权
|
2024-04-25 11:40:33 +08:00
|
|
|
|
if (self.openId && navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
|
2024-04-16 11:48:47 +08:00
|
|
|
|
this.publicCollection(res.data.order_number);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 第二步：其它环境 微信小程序
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
window.location.replace(res.data.redirect_url);
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
2024-04-16 15:59:23 +08:00
|
|
|
|
this.loading = false;
|
2024-04-16 11:48:47 +08:00
|
|
|
|
self.openErrorDialog(res.message);
|
|
|
|
|
|
if (res.code == 403) {
|
|
|
|
|
|
if (goodsCount > 1) {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
window.location.replace("./homepage.html");
|
|
|
|
|
|
}, 3000);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
self.openErrorDialog(res.message);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((err) => { this.loading = false; });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 公众号领取 */
|
|
|
|
|
|
publicCollection(order_number) {
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
order_number,
|
|
|
|
|
|
channel: 2,
|
|
|
|
|
|
channel_user_id: this.openId,
|
2024-04-25 09:55:55 +08:00
|
|
|
|
is_webview: 1,
|
|
|
|
|
|
grant_channel: "wechat"
|
2024-04-16 11:48:47 +08:00
|
|
|
|
};
|
|
|
|
|
|
req.axiosPost("/voucher/grant", params)
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
this.openErrorDialog('领取成功');
|
|
|
|
|
|
this.goodInfo.available = 9;
|
2024-04-25 11:53:31 +08:00
|
|
|
|
localStorage.setItem('goodInfo', JSON.stringify(this.goodInfo));
|
2024-04-16 11:48:47 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
this.openErrorDialog(res.message);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((err) => { this.loading = false; });
|
|
|
|
|
|
},
|
|
|
|
|
|
//错误弹出框关闭
|
|
|
|
|
|
knowFn() {
|
|
|
|
|
|
this.popboxshow = false;
|
|
|
|
|
|
this.maskshow = false;
|
|
|
|
|
|
},
|
|
|
|
|
|
//错误弹出框
|
|
|
|
|
|
openErrorDialog(tip) {
|
|
|
|
|
|
this.maskshow = true;
|
|
|
|
|
|
this.tiptext = tip;
|
|
|
|
|
|
this.popboxshow = true;
|
|
|
|
|
|
},
|
|
|
|
|
|
// 单条弹框
|
|
|
|
|
|
openDialog(tip) {
|
|
|
|
|
|
this.promtshow = true;
|
|
|
|
|
|
this.promttip = tip;
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
this.promtshow = false;
|
|
|
|
|
|
this.promttip = "";
|
|
|
|
|
|
}, 3000);
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 动态font */
|
|
|
|
|
|
fonts() {
|
|
|
|
|
|
const defaultCss = '0.32rem';
|
|
|
|
|
|
const count = String(parseFloat(this.reduceInfo.reduce_amount)).length + 1;
|
|
|
|
|
|
if (count > 4) {
|
|
|
|
|
|
return 0.32 - ((count - 3) / 100 * 2.2) + 'rem';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return defaultCss;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//复制文本
|
|
|
|
|
|
copyFn() {
|
|
|
|
|
|
var textArea = document.createElement("textarea");
|
|
|
|
|
|
textArea.value = this.copyLink;
|
|
|
|
|
|
document.body.appendChild(textArea);
|
|
|
|
|
|
textArea.select();
|
|
|
|
|
|
document.execCommand("copy");
|
|
|
|
|
|
this.openDialog("复制成功，请到浏览器打开");
|
|
|
|
|
|
document.body.removeChild(textArea);
|
|
|
|
|
|
this.copyshow = false;
|
|
|
|
|
|
this.maskshow = false;
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
