mobileclient/combining.html

419 lines
20 KiB
HTML
Raw Normal View History

2024-02-24 14:17:04 +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>
<link rel="stylesheet" href="./combining.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/MarketingSystem/js/api2_0.js"></script>
2024-03-25 19:29:41 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js"></script>
2024-02-24 14:17:04 +08:00
</head>
<body>
2024-02-28 11:41:26 +08:00
<div id="app" v-if="goods">
2024-02-24 19:17:51 +08:00
<img @click="backGoodsFn" v-if="backAble" class="backIcon"
2024-02-24 14:17:04 +08:00
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<div class="prompt" :class="promptShow?'proactive':''">
{{prompt_text}}
</div>
<div class="mask" @touchmove.prevent @mousewheel.prevent v-show="message">
<div class="model">
<p class="m-title">温馨提示</p>
<p class="m-msg">{{message}}</p>
2024-02-24 19:17:51 +08:00
<button class="m-but" @click="copyFn" v-if="copyLink">复制</button>
<button class="m-but" @click="message = ''" v-else>知道了</button>
2024-02-24 14:17:04 +08:00
</div>
</div>
2024-03-15 19:45:47 +08:00
<div class="content" :style="{background: dynamicStyle.bg}">
<img class="banner" :src="dynamicStyle.banner" alt="">
2024-03-25 19:29:41 +08:00
<div class="countdown" v-if="this.outTime.length>0">
2024-03-25 19:47:06 +08:00
<p :style="{color:dynamicStyle.times_color}">{{this.outTime[0]}}</p>
<p :style="{color:dynamicStyle.times_color}">{{this.outTime[1]}}</p>
<p :style="{color:dynamicStyle.times_color}">{{this.outTime[2]}}</p>
2024-03-25 16:48:56 +08:00
</div>
2024-02-24 14:17:04 +08:00
<div class="box">
2024-03-01 23:58:25 +08:00
<div class="box-cotent">
2024-03-15 19:45:47 +08:00
<div class="goods-box"
:style="{backgroundImage:`url(${dynamicStyle.goods_bg})`,paddingTop:goods.group_info.channel==1?'0.28rem':goods.group_info.channel==2?'0.16rem':'0.2rem'}">
<p class="title" :style="{color:dynamicStyle.title_color}">{{goods.title}}</p>
<ul class="g-b-u"
:style="{marginLeft:goods.group_info.channel==1?'0.12rem':'0.14rem',marginTop:goods.group_info.channel==2?'0.12rem':'0.28rem'}">
<li :style="{backgroundImage:`url(${item.voucher.used_num?dynamicStyle.goods_a:dynamicStyle.goods_b})`}"
v-for="item in goods.product">
<p class="g-b-u-t">立减金</p>
<p class="money">
<span></span>
{{item.voucher.reduce_amount}}
</p>
<p class="reduce">满{{item.voucher.denomination}}可用</p>
2024-03-15 23:13:38 +08:00
<p class="g-b-but" v-if='goods.receive_status==1'>
2024-03-15 19:45:47 +08:00
待领取({{item.voucher.used_num}}/{{item.voucher.send_num}})</p>
2024-03-15 23:13:38 +08:00
<p class="g-b-but" v-else-if='item.voucher.used_num'>
2024-03-15 19:45:47 +08:00
已使用({{item.voucher.used_num}}/{{item.voucher.send_num}})</p>
2024-03-15 23:13:38 +08:00
<p class="g-b-but" v-else>
2024-03-15 21:27:23 +08:00
待使用({{item.voucher.used_num}}/{{item.voucher.send_num}})</p>
2024-03-15 19:45:47 +08:00
</li>
</ul>
<p class="notis" :style="{color:dynamicStyle.notis_color}" v-show="goods.product.length>3">
滑动查看更多
</p>
2024-03-01 23:58:25 +08:00
</div>
2024-03-15 19:45:47 +08:00
<p class="g_b_title"
v-if="goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_title_icon.png"
alt="">
{{goods.group_info.channel==1?'支付宝账号':'云闪付账号'}}
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_title_icon.png"
alt="">
2024-03-01 23:58:25 +08:00
</p>
2024-03-15 19:45:47 +08:00
2024-03-01 23:58:25 +08:00
<template
v-if="goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2">
<input type="text" maxlength="50" :placeholder="goods.group_info.channel==3?'请输入手机号':'请输入账号'"
v-model="form.confirm">
<input type="text" maxlength="50"
:placeholder="goods.group_info.channel==3?'请再次输入手机号':'请再次输入账号'"
v-model="form.receive_account">
</template>
2024-03-15 19:45:47 +08:00
<img class="but"
:style="{marginTop:goods.group_info.channel==2||goods.group_info.channel==1&&goods.group_info.receive_mode==1&&'0.12rem'}"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_but.png"
alt="" @click="submit">
2024-03-25 19:29:41 +08:00
<p class="time" v-if="goods.group_info.time_limit.timer_show!=2"
2024-03-25 16:48:56 +08:00
:style="{marginTop: 0,color:dynamicStyle.time_color}">
2024-03-15 19:45:47 +08:00
生效时间:{{goods.group_info.time_limit.effect_time.start_time}}
~
{{goods.group_info.time_limit.effect_time.end_time}}</p>
2024-03-25 16:48:56 +08:00
2024-03-15 19:45:47 +08:00
<p class="time" :style="{marginTop: '0.05rem',color:dynamicStyle.time_color}"
2024-03-02 00:29:05 +08:00
v-if="goods.group_info.time_limit.receive_time.start_time">
2024-02-28 09:21:06 +08:00
领取时间:{{goods.group_info.time_limit.receive_time.start_time}} ~
{{goods.group_info.time_limit.receive_time.end_time}}</p>
2024-02-24 19:17:51 +08:00
</div>
2024-03-01 23:58:25 +08:00
<div class="box-footer">
2024-03-15 19:45:47 +08:00
<img class="b-f-img" :src="dynamicStyle.footer_top" alt="">
<div class="b-f-b" :style="{backgroundImage:`url(${dynamicStyle.footer_middle})`}">
<div class="b-f-i" v-html="goods.group_info.instruction"
:style="{color:dynamicStyle.footer_color}" v-if="goods.group_info.instructionType==1">
</div>
<img v-else :src="goods.group_info.group_image" alt="" class="group_image">
2024-03-02 02:34:16 +08:00
</div>
2024-03-15 19:45:47 +08:00
<img class="b-f-img" :style="{filter:goods.receive_status==1?'grayscale(0)':'grayscale(0.6)'}"
:src="dynamicStyle.footer_bottom" alt="">
2024-02-24 14:17:04 +08:00
</div>
</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 {
2024-02-28 11:41:26 +08:00
goods: '',
2024-02-24 14:17:04 +08:00
backAble: (~~sessionStorage.getItem('goodsCount')) > 1,
2024-02-24 19:17:51 +08:00
token: localStorage.getItem('token'),
key: localStorage.getItem('key'),
2024-02-24 14:17:04 +08:00
promptShow: false,
popShow: false,
is: false,
cls: null,
prompt_text: '',
receive_time: '',
message: '',
loading: false,
openId: localStorage.getItem('openid'),
2024-02-24 19:17:51 +08:00
copyLink: '',
2024-03-25 19:29:41 +08:00
outTime: [],
2024-02-24 14:17:04 +08:00
form: {
confirm: null,
receive_account: null
}
};
},
mounted () {
document.title = localStorage.getItem('title');
2024-02-28 09:21:06 +08:00
this.code_batch_id = JSON.parse(sessionStorage.getItem('goodsInfo')).entity.code_batch_id;
this.getProductDetail();
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
}
2024-02-24 14:17:04 +08:00
},
2024-03-01 23:58:25 +08:00
computed: {
dynamicStyle () {
switch (Number(this.goods.group_info.channel)) {
case 1:
2024-03-15 19:45:47 +08:00
return {
bg: '#4989f5',
title_color: '#fff',
banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_banner.png',
goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_img.png',
footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_top.png',
footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_middle.png',
footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_d.png',
footer_color: '#4989F5',
notis_color: '#FF486D',
2024-03-25 19:50:26 +08:00
times_color: '#1e6ff8',
2024-03-15 19:45:47 +08:00
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_tobeused.png',
goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_overdue.png',
};
2024-03-01 23:58:25 +08:00
case 2:
2024-03-15 19:45:47 +08:00
return {
bg: '#cee5be',
title_color: '#239700',
banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_banner.png',
goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_redenvelope_img.png',
footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_top.png',
footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_middle.png',
footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_d.png',
footer_color: '#5eb145',
time_color: '#5eb145',
2024-03-25 19:47:06 +08:00
times_color: '#5eb145',
2024-03-15 19:45:47 +08:00
notis_color: '#239700',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_tobeused.png',
goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_overdue.png',
};
2024-03-01 23:58:25 +08:00
case 3:
2024-03-15 19:45:47 +08:00
return {
bg: '#ff4830',
title_color: '#FF3024',
banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_banner.png',
goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_img.png',
footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_top.png',
footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_middle.png',
footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_d.png',
footer_color: '#FF4901',
2024-03-25 19:50:26 +08:00
times_color: '#ed703f',
2024-03-15 19:45:47 +08:00
notis_color: '#FFD3D8',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_tobeused.png',
goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_overdue.png',
};
2024-03-01 23:58:25 +08:00
default:
return {};
}
},
},
2024-02-24 14:17:04 +08:00
methods: {
2024-02-28 09:21:06 +08:00
//获取商品详情
getProductDetail () {
req.axiosGet('/key/group/groupProductDetail', {
token: this.token,
code_batch_id: this.code_batch_id
}).then(res => {
if (res.code == 200) {
this.goods = res.data;
}
}).catch();
},
2024-03-01 23:58:25 +08:00
2024-02-24 19:17:51 +08:00
/* ******************************************** 官方领取 ******************************************** */
/* 直接领取 */
directSubmit () {
const data = {
key: this.key,
token: this.token,
2024-02-28 11:41:26 +08:00
code_batch_id: this.code_batch_id,
receive_mode: 1,
2024-02-24 19:17:51 +08:00
};
2024-02-24 19:17:51 +08:00
req.axiosPost("/key/couponGroupUsage", data)
.then((res) => {
if (res.code == 200) {
2024-02-28 09:21:06 +08:00
if (this.goods.group_info.channel == 1 && this.goods.group_info.receive_mode == 1) {
2024-02-24 19:17:51 +08:00
/* 支付宝官方领取 */
this.toLinkAlipay();
2024-02-28 09:21:06 +08:00
} else if (this.goods.group_info.channel == 2) {
2024-03-06 16:54:55 +08:00
if (this.goods.group_info.is_webview == 1) {
/* 公众号 */
this.publicCollection();
2024-03-06 16:54:55 +08:00
} else {
/* 小程序 */
2024-03-06 16:54:55 +08:00
window.location.replace(res.data.redirect_url);
this.getProductDetail();
2024-03-06 16:54:55 +08:00
}
2024-02-24 19:17:51 +08:00
}
} else {
this.axiosErrorFun(res.code, res.message);
}
})
.catch((err) => { this.loading = false; });
},
/* 公众号领取 */
publicCollection () {
let params = {
token: this.token,
code_batch_id: this.code_batch_id,
channel_user_id: this.openId,
is_webview: 1
};
req.axiosPost("/voucher/groupVoucherGrant", params)
.then((res) => {
if (res.code == 200) {
this.message = '领取成功';
2024-02-28 09:21:06 +08:00
this.getProductDetail();
2024-02-24 19:17:51 +08:00
} else {
this.axiosErrorFun(res.code, res.message);
}
})
.catch((err) => { this.loading = false; });
;
2024-02-24 19:17:51 +08:00
},
/* 支付宝官方领取H5跳转 */
toLinkAlipay () {
let self = this;
let banklink = encodeURIComponent(
window.location.origin +
2024-02-29 16:14:15 +08:00
`/combiningAlipay.html?codeBatchId=${this.code_batch_id}&token=${this.token}`
2024-02-24 19:17:51 +08:00
);
let link = "http://openapi.1688sup.com/alipay/oauth?jump=" + banklink;
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
if (isWx() ||
(ua.indexOf("android") > -1 &&
ua.indexOf("baiduboxapp") > -1) ||
ua.indexOf("windows") > -1) {
//复制链接地址,提醒去浏览器打开
this.message = '请点击下方[复制]按钮,复制链接到浏览器打开!';
this.copyLink = link;
} else {
//唤起支付宝
window.location.replace(link);
}
},
2024-02-24 19:17:51 +08:00
/* ******************************************** 账号领取 ******************************************** */
2024-02-24 14:17:04 +08:00
/* 立即领取 */
submit () {
2024-03-01 23:58:25 +08:00
if (this.goods.group_info.channel == 3 || this.goods.group_info.channel == 1 && this.goods.group_info.receive_mode == 2) {
const { confirm, receive_account } = this.form;
if (this.loading) return;
if (confirm !== receive_account) return this.tips('两次输入账号不一致');
/* 云闪付校验手机号 支付宝校验手机号/邮箱号 */
if ((phoneReg.test(receive_account) && this.goods.group_info.channel == 3 || this.goods.group_info.channel == 1 && (emailReg.test(receive_account) || phoneReg.test(receive_account)))) {
this.finalSubmit();
} else {
this.tips('请输入正确的账号');
}
2024-02-24 14:17:04 +08:00
} else {
2024-03-01 23:58:25 +08:00
this.directSubmit();
2024-02-24 14:17:04 +08:00
}
2024-03-01 23:58:25 +08:00
2024-02-24 14:17:04 +08:00
},
/* 验证后 最终提交 */
finalSubmit () {
this.loading = true;
const self = this;
let data = {
2024-02-24 19:17:51 +08:00
key: this.key,
2024-02-28 11:41:26 +08:00
code_batch_id: this.code_batch_id,
2024-02-24 14:17:04 +08:00
token: localStorage.getItem("token"),
2024-02-27 11:24:14 +08:00
account: this.form.receive_account,
2024-02-27 16:19:15 +08:00
receive_mode: 2
2024-02-24 14:17:04 +08:00
};
2024-02-24 19:17:51 +08:00
/* 领取立减金 */
req.axiosPost("/key/couponGroupUsage", data)
2024-02-24 14:17:04 +08:00
.then(({ code, message }) => {
2024-02-24 19:17:51 +08:00
if (code == 200) {
2024-02-24 14:17:04 +08:00
this.loading = false;
2024-02-24 19:17:51 +08:00
this.message = '领取成功';
2024-02-28 09:21:06 +08:00
this.getProductDetail();
2024-02-24 14:17:04 +08:00
} else {
2024-02-24 19:17:51 +08:00
this.axiosErrorFun(code, message);
2024-02-24 14:17:04 +08:00
}
})
2024-02-24 19:17:51 +08:00
.catch((err) => { this.loading = false; });
2024-02-24 14:17:04 +08:00
},
/* 返回 */
backGoodsFn () {
if (this.backAble) {
window.location.replace('./homepage.html');
} else {
history.go(-2);
}
},
/* 接口异常处理 */
2024-02-24 19:17:51 +08:00
axiosErrorFun (code, message) {
2024-02-24 14:17:04 +08:00
this.loading = false;
if (code == 403) {
if (this.backAble) {
this.message = message;
setTimeout(() => {
window.location.href = localStorage.getItem('entryLink');
}, 3000);
} else {
this.message = message;
}
} else {
this.message = message;
}
},
2024-02-24 19:17:51 +08:00
//复制文本
copyFn () {
var textArea = document.createElement("textarea");
textArea.value = this.copyLink;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
2024-02-29 15:52:11 +08:00
this.tips("复制成功,请到浏览器打开");
2024-02-24 19:17:51 +08:00
document.body.removeChild(textArea);
this.copyshow = false;
this.maskshow = false;
this.copyLink = null;
this.message = '';
},
2024-02-24 14:17:04 +08:00
/* 触发提示 */
tips (text) {
this.cls && clearTimeout(this.cls);
this.prompt_text = text;
this.promptShow = true;
this.cls = setTimeout(() => {
this.promptShow = false;
}, 3000);
},
}
})
</script>
</html>