mobileclient/orderDetails/cardOrder.html

199 lines
8.5 KiB
HTML
Raw Normal View History

2024-02-04 14:32:16 +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>
<link rel="stylesheet" href="./orderCss.css" />
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/vue3.global.js"></script>
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.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-02-22 19:28:16 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js"></script>
2024-03-19 10:50:52 +08:00
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
2024-02-04 14:32:16 +08:00
</head>
<body>
<div id="app">
2024-03-01 10:00:02 +08:00
<div class="mask" v-show="loading" @touchmove.prevent @mousewheel.prevent>
<div class="loading">
<div></div>
<div></div>
</div>
</div>
2024-02-04 16:16:12 +08:00
<img class="back" @click="backHandler"
2024-02-04 14:32:16 +08:00
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="" />
<img :src="dynamicBanner" alt="" class="banner">
<main class="main card">
<img :src="goods.show_url" alt="" class="logo">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/dashedline.png"
alt="" class="dashedline">
<footer class="footer">
<p class="p-title">{{goods.product_name}}</p>
2024-02-04 16:26:36 +08:00
<p class="p-time">卡密有效期:{{goods.time}}</p>
2024-02-04 14:32:16 +08:00
</footer>
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/bottom.png" alt=""
class="bottom-img">
</main>
<div v-show="goods.status==2 && goods.card_show==2">
<div class="c-item mt30" v-if="goods.card_number">
<div>
<p>卡号</p>
<p class="num">{{goods.card_number}}</p>
</div>
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/copy.png"
2024-03-01 10:00:02 +08:00
alt="" @click="copyFunction(goods.card_number)" class="copy">
2024-02-04 14:32:16 +08:00
</div>
<div class="c-item" :class="{mt30:!goods.card_number}">
<div>
<p>卡密</p>
2024-03-22 17:54:01 +08:00
<p class="num">{{card_look_pwd}}</p>
2024-02-04 14:32:16 +08:00
</div>
2024-03-25 11:46:47 +08:00
<div @click="copyFunction(goods.card_password,1)">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/copy.png"
alt="" class="copy">
<span>&nbsp;复制</span>
2024-02-04 14:32:16 +08:00
</div>
</div>
2024-03-25 13:59:34 +08:00
<p class="tip-card">复制查看卡密</p>
2024-02-04 14:32:16 +08:00
</div>
2024-02-04 15:48:33 +08:00
<div class="but" v-show="goods.status==3" @click="toHome">
2024-02-04 14:32:16 +08:00
重新兑换
</div>
2024-03-01 10:00:02 +08:00
<div class="but refresh" v-show="[0,1].includes(goods.status)" @click="()=>getInfo(true)">
2024-02-04 14:32:16 +08:00
刷新
</div>
2024-03-01 10:00:02 +08:00
<div class="c-item" v-if="goods.detail_url" style="margin-top: 0.3rem;">
<img :src="goods.detail_url" alt="" class="detail_url">
</div>
2024-02-04 14:32:16 +08:00
<!-- 单条弹出框 -->
<div class="prompt" :class="{show:toast}">
复制成功
</div>
</div>
</body>
<script>
2024-02-22 15:07:06 +08:00
// 获取 包码结算数据
const bm_obj_data = sessionStorage.getItem("bm_auth") ? JSON.parse(sessionStorage.getItem("bm_auth")) : null;
2024-02-04 14:32:16 +08:00
const { createApp, ref, onMounted, computed } = Vue;
createApp({
2024-04-10 23:11:41 +08:00
setup() {
2024-02-04 14:32:16 +08:00
const goods = ref({});
const toast = ref(false);
const clr = ref(null);
const goodsCount = ref(0);
2024-03-01 10:00:02 +08:00
const loading = ref(false);
2024-03-19 10:50:52 +08:00
const key_number = ref("");
2024-03-22 17:54:01 +08:00
const card_look_pwd = ref("");
2024-02-04 14:32:16 +08:00
onMounted(() => {
goodsCount.value = Number(sessionStorage.getItem('goodsCount')) || 0;
getInfo();
2024-02-28 17:52:36 +08:00
2024-02-04 14:32:16 +08:00
});
/* 获取详情 */
2024-04-10 23:11:41 +08:00
function getInfo(isLoading) {
2024-03-01 10:00:02 +08:00
2024-02-04 14:32:16 +08:00
const orderNumber = sessionStorage.getItem('orderNumber');
req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => {
2024-03-01 10:00:02 +08:00
if (isLoading) {
loading.value = true;
const clr = setTimeout(() => {
loading.value = false;
clearTimeout(clr);
}, 1000);
}
2024-02-04 14:32:16 +08:00
if (res.code == 200) {
2024-03-25 10:34:34 +08:00
const { product_name, status, show_url, card_number, card_password, use_coupon, product, mask_card_password } = res.data;
2024-04-10 21:55:23 +08:00
card_look_pwd.value = mask_card_password && mask_card_password.length > 16 ? mask_card_password.substring(0, 16) : mask_card_password;
2024-03-01 10:00:02 +08:00
goods.value = { product_name, time: res.data.goods.end_time, status, show_url, card_number, card_password, card_show: res.data.goods.card_show, use_coupon, detail_url: product.detail_url };
// 领取成功结算 5
if (bm_obj_data && !bm_obj_data.settlement_data.is_settlement && bm_obj_data.settlement_data.settlement_type === 5 && status === 2) {
settlementFun(bm_obj_data.token, bm_obj_data.settlement_data.settlement_type);
}
2024-02-04 14:32:16 +08:00
}
});
}
2024-02-04 15:48:33 +08:00
/* 重新兑换 */
2024-04-10 23:11:41 +08:00
function toHome() {
2024-02-04 15:48:33 +08:00
if (goods.value.use_coupon === 2) {
window.location.replace('../homepage.html');
} else {
window.location.replace('../coupon/couponCollection.html');
}
}
2024-03-19 10:50:52 +08:00
// 解密
2024-04-10 23:11:41 +08:00
function decrypt(encryptedBase64Str, key) {
2024-03-19 10:50:52 +08:00
var keyHex = CryptoJS.enc.Utf8.parse(key);
var decrypted = CryptoJS.AES.decrypt(encryptedBase64Str, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
2024-02-04 14:32:16 +08:00
/* 复制 */
2024-04-10 23:11:41 +08:00
function copyFunction(number, type) {
2024-03-19 10:50:52 +08:00
let new_number = number;
2024-02-25 17:51:34 +08:00
// 使用结算 卡密6
if (bm_obj_data && !bm_obj_data.settlement_data.is_settlement && bm_obj_data.settlement_data.settlement_type === 6) {
2024-02-25 17:53:29 +08:00
settlementFun(bm_obj_data.token, bm_obj_data.settlement_data.settlement_type);
2024-02-22 15:07:06 +08:00
}
2024-03-19 10:53:59 +08:00
if (type === 1 && sessionStorage.getItem('orderNumber')) {
2024-03-26 09:57:06 +08:00
let key = sessionStorage.getItem('orderNumber');
2024-03-19 10:50:52 +08:00
key = key.substring(0, 16);
2024-03-26 09:57:06 +08:00
new_number = decrypt(number, key);
2024-03-25 10:34:34 +08:00
card_look_pwd.value = new_number;
2024-03-19 10:50:52 +08:00
}
2024-02-04 14:32:16 +08:00
var aux = document.createElement("input");
2024-03-19 10:50:52 +08:00
aux.setAttribute("value", new_number);
2024-02-04 14:32:16 +08:00
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
toast.value = true;
clr.value && clearTimeout(clr.value);
clr.value = setTimeout(() => {
toast.value = false;
}, 1000);
};
/* 动态banner */
const dynamicBanner = computed(() => {
switch (goods.value.status) {
case 1:
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner6.png';
2024-02-04 14:32:16 +08:00
case 2:
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner4.png';
2024-02-04 14:32:16 +08:00
case 3:
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner5.png';
2024-02-04 14:32:16 +08:00
default:
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner6.png';
2024-02-04 14:32:16 +08:00
}
});
2024-04-10 23:11:41 +08:00
function backHandler() {
2024-02-04 14:32:16 +08:00
history.go(-1);
}
2024-03-22 17:58:50 +08:00
return { copyFunction, getInfo, backHandler, toHome, dynamicBanner, goods, toast, goodsCount, loading, card_look_pwd };
2024-02-04 14:32:16 +08:00
}
}).mount('#app')
</script>
</html>