mobileclient/index copy.html

482 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<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=1367936144999">
</script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/index.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js"></script>
<style>
input {
color: var(--placeholderColor);
}
input::placeholder {
color: var(--placeholderColor);
}
</style>
</head>
<body>
<div id="app" :style={background:bgcolor}>
<!-- 弹出提示 -->
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText"></model-pop>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<div class="um-content" v-if="loading" ref="load">
<preload-component />
</div>
<div v-show="!loading">
<div class="top">
<img :src="topImg" id="top">
</div>
<div class="center" id="center" style="margin-top: -0.01rem;">
<img :src="middleImg" style="position: absolute;z-index: 1;" id="center_img">
<input class="key" :maxlength="16" v-if="[3,4].includes(pageType)" :style="bindInputStyle"
placeholder="请输入兑换码" v-model="key" />
<input class="code" :maxlength="5" v-if="[3,4].includes(pageType)" :style="bindInputStyle"
placeholder="请输入验证码" v-model="code" />
<input class="key" :maxlength="11" v-if="[1,8].includes(pageType)" :style="bindInputStyle"
placeholder="请输入手机号" v-model="key" />
<input class="code" :maxlength="6" v-if="[1,8].includes(pageType)" :style="bindInputStyle"
placeholder="请输入验证码" v-model="code" />
<img src="#" alt="" class="codeimg" v-if="[3,4].includes(pageType)" id="captcha_img"
@click="captchaimg()" />
<button class="codeimg" :class="disabled?'disabledstyle':'active'" v-if="[1,8].includes(pageType)"
@click="getcode()" :disabled="disabled">{{codetip}}</button>
<div class="submit" @click="submit"></div>
</div>
<div class="bottom" id="bottom">
<img :src="describe.bg_image" v-show="describe.type&&describe.bg_image">
<div v-html="describe.content" class="tipBottomtext" v-show="describe.type==2&&describe.content"></div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
loading: true,
pageType: 1,
key: '',
code: '',
disabled: true,
codetip: '获取验证码',
topImg: '',
middleImg: '',
describe: {},
ftcolor: '',
bgcolor: '#333',
promttip: '',
promtshow: false,
tiptext: '提示信息',
plan_id: '',
disabledBtn: false,
typeList: {//1 白名单 3 兑换码 4优惠券 8 优惠券白名单
'1': 'access_conf',
'3': 'exchange',
'4': 'coupon',
'8': 'coupon',
},
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1, /*1 成功 2提示 3失败 */
openid: localStorage.getItem('openid')
};
},
components: {
modelPop
},
async created() {
// 白名单不清除
let bmd_token = this.getQueryString('token');
if (!bmd_token) {
sessionStorage.clear();
localStorage.clear();
} else {
let linkId = this.getQueryString('id');
req.axiosGet('/plan/plan_theme/' + linkId).then(res => {
if (res.code === 200) {
this.pageType = res.data.page;
/** TODO: 判断是否是包码逻辑 **/
if (res.data.settlement_data && res.data.settlement_data.settlement_type > 0) {
self.goToPackKey({ token: res.data.token, settlement_data: res.data.settlement_data }, 1);
} else {
let clr = setTimeout(() => {
if (this.pageType === 4 || this.pageType === 8) {
window.location.replace('/coupon/couponCollection.html');
} else {
window.location.replace('/homepage.html');
}
clearTimeout(clr);
}, 1000);
}
}
})
return
}
await req.axiosGet('/conf/apiStatus').then(res => {
if (res.data.update) {
sessionStorage.setItem('notice', res.data.msg);
location.replace('./notice.html');
return;
}
});
let self = this;
//获取链接携带的参数
let linkId = this.getQueryString('id');
let keyCode = this.getQueryString('key');
let openid = this.getQueryString('openid');
openid && localStorage.setItem('openid', openid);
if (!linkId) {//地址栏无携带id
let path = window.location.pathname;
let parmas = path.split('/');
let parmasResult = parmas.filter(n => n);
linkId = parmasResult && parmasResult.length > 0 ? parmasResult[0] : 1402; //链接携带落地页渲染id
keyCode = parmasResult && parmasResult.length > 1 ? parmasResult[1] : null; //链接携带key
}
if (linkId.length > 10) {
req.axiosGet('/plan/plan_theme/' + linkId).then(res => {
if (res.code == 200) {
locationReplace(res.data);
self.loading = false;
return;
} else {
self.openErrorDialog(res.message);
}
}).catch(err => { });
}
req.axiosGet('/plan/plan_theme/' + linkId).then(res => {
if (res.code == 200) {
//内置页顶图
document.title = res.data.title;
self.plan_id = res.data.plan_id;
this.pageType = res.data.page;
localStorage.setItem('title', res.data.title);
localStorage.setItem('product_list', JSON.stringify(res.data[this.typeList[res.data.page]].product_list));
localStorage.setItem('product_detail', JSON.stringify(res.data[this.typeList[res.data.page]].product_detail));
localStorage.setItem('test', window.location.href);
self.loading = false;
localStorage.setItem('linkId', linkId);
//是否携带token
if (keyCode) {
let data = {
key: keyCode,
theme_type: this.pageType
};
req.axiosPost('/key/loginFromLink', data).then(res => {
if (res.code == 200) {
localStorage.setItem('key', keyCode);
this.wxgzAuth(res.data.is_have_webview_voucher);
localStorage.setItem('token', res.data.token);
localStorage.setItem('haskey', keyCode);
this.openDialog('正在加载商品...');
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
/** TODO: 判断是否是包码逻辑 **/
if (res.data.settlement_data && res.data.settlement_data.settlement_type > 0) {
self.goToPackKey({ token: res.data.token, settlement_data: res.data.settlement_data }, 1);
} else {
let clr = setTimeout(() => {
if (this.pageType === 4 || this.pageType === 8) {
window.location.replace('/coupon/couponCollection.html');
} else {
window.location.replace('/homepage.html');
}
clearTimeout(clr);
}, 1000);
}
} else {
self.openErrorDialog(res.message);
}
}).catch(err => {
console.log(174, err);
});
} else {
if ([3, 4].includes(this.pageType)) {
captchaimg();
}
let keyName = this.typeList[this.pageType];
self.bgcolor = res.data[keyName].land.bg_color;
self.ftcolor = res.data[keyName].land.font_color;
self.topImg = res.data[keyName].land.top_image;
self.middleImg = res.data[keyName].land.middle_image;
if (this.pageType == 8) {
self.middleImg = res.data[keyName].land.white_image;
}
self.describe = res.data[keyName].land.describe;
}
}
}).catch(err => { });
},
mounted() {
this.$nextTick(() => {
let img = document.getElementById("center_img");
let center = document.getElementById("center");
img.onload = function (e) {
center.style.height = img.clientHeight + "px";
};
});
localStorage.clear();
},
computed: {
bindInputStyle() {
return {
'--placeholderColor': this.ftcolor,
};
},
},
methods: {
// 判断是否是包码 跳转对应的包码页面 ****
goToPackKey(data, type) {
// 存储数据
sessionStorage.setItem("bm_auth", JSON.stringify(data));
// 包码打开结算
if (!data.settlement_data.is_settlement && data.settlement_data.settlement_type === 2) {
settlementFun(data.token, data.settlement_data.settlement_type);
}
setTimeout(() => {
if (type) {
// 跳转包码页面
window.location.replace("/packkey/bm-index.html");
} else {
// 跳转包码页面
window.location.href = '/packkey/bm-index.html';
}
}, 300)
},
// 静默授权
wxgzAuth(is_have_webview_voucher, token) {
console.log("token 1111111 =>", token);
debugger
/* 公众号打开 */
if (is_have_webview_voucher && !this.openid) {
const key = localStorage.getItem('key');
const linkId = localStorage.getItem('linkId');
if (token) {
location.href = `https://openapi.1688sup.com/wechat/oauth?jump=${location.origin}/${linkId}/${token}`;
return
} else {
location.href = `https://openapi.1688sup.com/wechat/oauth?jump=${location.origin}/${linkId}/${key}`;
return
}
}
},
//获取白名单验证码
getcode() {
let self = this;
let data = {
'mobile': this.key,
'plan_id': this.plan_id
};
req.axiosPost('/sms/sendMobileExchangeCode', data).then(res => {
if (res.code == 200) {
let timeId = 60;
let timer = setInterval(() => {
timeId--;
if (timeId > 0) {
self.codetip = timeId + 's';
self.disabled = true;
} else {
clearInterval(timer);
self.codetip = '获取验证码';
self.disabled = false;
}
}, 1000);
} else {
self.openErrorDialog(res.message);
}
}).catch(err => { });
},
submit() {
let self = this;
if (!this.key) {
this.openDialog('请输入兑换码');
return;
}
if (!this.code) {
this.openDialog('请输入验证码');
return;
}
if (this.disabledBtn) {
return;
}
this.disabledBtn = true;
if ([3, 4].includes(this.pageType)) {//兑换码、优惠卷
let data = {
"key": this.key,
"code": this.code,
"code_unique_str": sessionStorage.getItem('unique_str'),
"theme_type": this.pageType
};
req.axiosPost('/key/login', data).then(res => {
setTimeout(() => {
self.disabledBtn = false;
}, 2000);
if (res.code == 200) {
localStorage.setItem('key', self.key);
this.wxgzAuth(res.data.is_have_webview_voucher);
localStorage.setItem('token', res.data.token);
this.openDialog('正在加载商品...');
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
/** TODO: 判断是否是包码逻辑 **/
if (res.data.settlement_data && res.data.settlement_data.settlement_type > 0) {
setTimeout(() => {
self.goToPackKey({ token: res.data.token, settlement_data: res.data.settlement_data });
}, 1000);
} else {
setTimeout(() => {
if (this.pageType === 4 || this.pageType === 8) {
window.location.href = './coupon/couponCollection.html';
} else {
window.location.href = './homepage.html';
}
}, 1000);
}
} else {
self.openErrorDialog(res.message);
}
}).catch(err => { });
} else if ([1, 8].includes(this.pageType)) {//白名单
let par = {
"code": this.code,
"mobile": this.key,
"plan_id": this.plan_id,
};
let getTokenList = [];//多个批次下的key存放token
req.axiosPostgetKey('/key/getKeyByMobile', par).then(async res => {
setTimeout(() => {
self.disabledBtn = false;
}, 2000);
if (res.data.code == 200) {
localStorage.setItem('key', self.key);
localStorage.setItem('token', res.data.data);
localStorage.setItem('showType', 1);
localStorage.setItem('white_link', window.location.href);
let tokenArr = res.data.data;
let istoGoods = false;
let form_data_res = null;
for (item of tokenArr) {
let obj = {};
let data = {
"code_unique_str": res.headers['unique-str'],
"key": item,
"theme_type": this.pageType
};
let wait = await req.axiosPost('/key/loginFromMobileKey', data).then(res => {
if (res.code == 200) {
form_data_res = res;
getTokenList.push(res.data.token);
istoGoods = true;
} else {
if (res.message == '活动暂停中') {
self.tiptext = res.message;
istoGoods = false;
} else {
self.tiptext = res.message;
}
}
}).catch(err => { });
};
if (istoGoods) {
localStorage.setItem('getTokenList', JSON.stringify(getTokenList));
this.openDialog('正在加载商品...');
localStorage.setItem('entryLink', window.location.href);//存储起始页链接
this.wxgzAuth(res.data.is_have_webview_voucher, res.data.token);
/** TODO: 判断是否是包码逻辑 **/
if (form_data_res.data.settlement_data && form_data_res.data.settlement_data.settlement_type > 0) {
setTimeout(() => {
self.goToPackKey({ token: form_data_res.data.token, settlement_data: form_data_res.data.settlement_data });
}, 1000);
} else {
setTimeout(() => {
if (this.pageType === 4 || this.pageType === 8) {
window.location.href = './coupon/couponCollection.html';
} else {
window.location.href = './homepage.html';
}
}, 1000);
}
} else {
self.openErrorDialog(self.tiptext);
}
} else {
self.openErrorDialog(res.data.message);
}
}).catch(err => { });
}
},
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
// 单条弹框
openDialog(tip) {
this.promtshow = true;
this.promttip = tip;
let clr = setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 500);
},
// ym-power UP +25% + (x * 2%) +
//错误弹出框
openErrorDialog(tip) {
this.popTitle = '温馨提示';
this.popText = tip;
this.popStatus = 3;
this.popShow = true;
}
},
watch: {
key(val) {
this.disabled = Boolean(!([1, 8].includes(this.pageType) && val.length == 11));
}
}
});
</script>
</html>