333 lines
14 KiB
HTML
333 lines
14 KiB
HTML
<!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>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" v-if="goods">
|
|
<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>
|
|
|
|
<div class="mask" @touchmove.prevent @mousewheel.prevent v-show="message">
|
|
<div class="model">
|
|
<p class="m-title">温馨提示</p>
|
|
<p class="m-msg">{{message}}</p>
|
|
<button class="m-but" @click="copyFn" v-if="copyLink">复制</button>
|
|
<button class="m-but" @click="message = ''" v-else>知道了</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content" :style="{background: `linear-gradient(${dynamicStyle.bg} 0 1rem, #f6f6f4 3rem 70%)`}">
|
|
<p class="nav">领取页面</p>
|
|
<p class="notis">恭喜您领取立减金</p>
|
|
<div class="box">
|
|
<div class="box-cotent">
|
|
<p class="b-t-t">{{goods.title}}</p>
|
|
<div class="logo">
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/unionPay.svg"
|
|
alt="">
|
|
<span>中国银联</span>
|
|
</div>
|
|
<p class="t-1">内含 {{goods.send_num}} 张</p>
|
|
<p class="t-1">适用于：{{goods.group_info.channel==1?'支付宝':goods.group_info.channel==2?'微信':'云闪付'}}
|
|
</p>
|
|
<img class="dashedLine"
|
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining_dashedLine.png"
|
|
alt="">
|
|
<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>
|
|
|
|
<p class="time" style="margin-top: 0;">生效时间：{{goods.group_info.time_limit.effect_time.start_time}} ~
|
|
{{goods.group_info.time_limit.effect_time.end_time}}，逾期不可领取</p>
|
|
<p class="time" style="margin-top: 0.01rem;"
|
|
v-if="goods.group_info.time_limit.receive_time.start_time">
|
|
领取时间：{{goods.group_info.time_limit.receive_time.start_time}} ~
|
|
{{goods.group_info.time_limit.receive_time.end_time}}</p>
|
|
|
|
<button class="but" :style="{background: dynamicStyle.bg}" @click="submit"
|
|
v-if="goods.receive_status==1">立即领取</button>
|
|
<button class="but" v-else :style="{background: dynamicStyle.bt}">已领取</button>
|
|
</div>
|
|
|
|
<div class="box-footer">
|
|
<p class="b-f-t">
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
|
|
alt="">使用须知 <img
|
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
|
|
alt="">
|
|
</p>
|
|
<div class="b-f-i" v-html="goods.group_info.instruction" v-if="goods.group_info.instructionType==1">
|
|
</div>
|
|
<img v-else :src="goods.group_info.group_image" alt="" class="group_image">
|
|
</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 {
|
|
goods: '',
|
|
backAble: (~~sessionStorage.getItem('goodsCount')) > 1,
|
|
token: localStorage.getItem('token'),
|
|
key: localStorage.getItem('key'),
|
|
promptShow: false,
|
|
popShow: false,
|
|
is: false,
|
|
cls: null,
|
|
prompt_text: '',
|
|
receive_time: '',
|
|
message: '',
|
|
loading: false,
|
|
openId: localStorage.getItem('openid'),
|
|
copyLink: '',
|
|
form: {
|
|
confirm: null,
|
|
receive_account: null
|
|
}
|
|
};
|
|
},
|
|
|
|
mounted () {
|
|
document.title = localStorage.getItem('title');
|
|
this.code_batch_id = JSON.parse(sessionStorage.getItem('goodsInfo')).entity.code_batch_id;
|
|
this.getProductDetail();
|
|
},
|
|
|
|
computed: {
|
|
dynamicStyle () {
|
|
switch (Number(this.goods.group_info.channel)) {
|
|
case 1:
|
|
return { bg: '#0076f6', bt: '#c2dbf5' };
|
|
case 2:
|
|
return { bg: '#07c160', bt: '#cfeddc' };
|
|
case 3:
|
|
return { bg: '#ff2c02', bt: '#f9bbae' };
|
|
default:
|
|
return {};
|
|
}
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
//获取商品详情
|
|
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();
|
|
},
|
|
|
|
|
|
/* ******************************************** 官方领取 ******************************************** */
|
|
/* 直接领取 */
|
|
directSubmit () {
|
|
/* 公众号打开 */
|
|
if (this.goods.group_info.channel == 2 && this.goods.group_info.is_webview == 1 && !this.openId) {
|
|
const linkId = localStorage.getItem('linkId');
|
|
location.href = `https://openapi.1688sup.com/wechat/oauth?jump=${location.origin}/${linkId}/${this.key}`;
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
key: this.key,
|
|
token: this.token,
|
|
code_batch_id: this.code_batch_id,
|
|
receive_mode: 1,
|
|
};
|
|
|
|
req.axiosPost("/key/couponGroupUsage", data)
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
if (this.goods.group_info.channel == 1 && this.goods.group_info.receive_mode == 1) {
|
|
/* 支付宝官方领取 */
|
|
this.toLinkAlipay();
|
|
} else if (this.goods.group_info.channel == 2) {
|
|
if (this.goods.group_info.is_webview == 1) {
|
|
this.publicCollection();
|
|
} else {
|
|
/* 微信官方领取 */
|
|
window.location.replace(res.data.redirect_url);
|
|
}
|
|
}
|
|
this.getProductDetail();
|
|
} 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
|
|
};
|
|
req.axiosPost("/voucher/groupVoucherGrant", params)
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.message = '领取成功';
|
|
this.getProductDetail();
|
|
} else {
|
|
this.axiosErrorFun(res.code, res.message);
|
|
}
|
|
})
|
|
.catch((err) => { this.loading = false; });
|
|
;
|
|
},
|
|
|
|
/* 支付宝官方领取H5跳转 */
|
|
toLinkAlipay () {
|
|
let self = this;
|
|
let banklink = encodeURIComponent(
|
|
window.location.origin +
|
|
`/combiningAlipay.html?codeBatchId=${this.code_batch_id}&token=${this.token}`
|
|
);
|
|
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);
|
|
}
|
|
},
|
|
|
|
|
|
/* ******************************************** 账号领取 ******************************************** */
|
|
/* 立即领取 */
|
|
submit () {
|
|
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('请输入正确的账号');
|
|
}
|
|
} else {
|
|
this.directSubmit();
|
|
}
|
|
|
|
},
|
|
|
|
/* 验证后 最终提交 */
|
|
finalSubmit () {
|
|
this.loading = true;
|
|
const self = this;
|
|
let data = {
|
|
key: this.key,
|
|
code_batch_id: this.code_batch_id,
|
|
token: localStorage.getItem("token"),
|
|
account: this.form.receive_account,
|
|
receive_mode: 2
|
|
};
|
|
|
|
/* 领取立减金 */
|
|
req.axiosPost("/key/couponGroupUsage", data)
|
|
.then(({ code, message }) => {
|
|
if (code == 200) {
|
|
this.loading = false;
|
|
this.message = '领取成功';
|
|
this.getProductDetail();
|
|
} else {
|
|
this.axiosErrorFun(code, message);
|
|
}
|
|
})
|
|
.catch((err) => { this.loading = false; });
|
|
},
|
|
|
|
/* 返回 */
|
|
backGoodsFn () {
|
|
if (this.backAble) {
|
|
window.location.replace('./homepage.html');
|
|
} else {
|
|
history.go(-2);
|
|
}
|
|
},
|
|
|
|
/* 接口异常处理 */
|
|
axiosErrorFun (code, message) {
|
|
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;
|
|
}
|
|
},
|
|
|
|
//复制文本
|
|
copyFn () {
|
|
var textArea = document.createElement("textarea");
|
|
textArea.value = this.copyLink;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand("copy");
|
|
this.tips("复制成功，请到浏览器打开");
|
|
document.body.removeChild(textArea);
|
|
this.copyshow = false;
|
|
this.maskshow = false;
|
|
this.copyLink = null;
|
|
this.message = '';
|
|
},
|
|
|
|
/* 触发提示 */
|
|
tips (text) {
|
|
this.cls && clearTimeout(this.cls);
|
|
this.prompt_text = text;
|
|
this.promptShow = true;
|
|
this.cls = setTimeout(() => {
|
|
this.promptShow = false;
|
|
}, 3000);
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |