201 lines
8.6 KiB
HTML
201 lines
8.6 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,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>
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></script>
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js"></script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="mask" v-show="loading" @touchmove.prevent @mousewheel.prevent>
|
|
<div class="loading">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<img class="back" @click="backHandler"
|
|
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>
|
|
<p class="p-time">卡密有效期：{{goods.time}}</p>
|
|
</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"
|
|
alt="" @click="copyFunction(goods.card_number)" class="copy">
|
|
</div>
|
|
<div class="c-item" :class="{mt30:!goods.card_number}">
|
|
<div>
|
|
<p>卡密</p>
|
|
<p class="num">{{card_look_pwd}}</p>
|
|
</div>
|
|
<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> 复制</span>
|
|
</div>
|
|
</div>
|
|
<p class="tip-card">复制查看卡密</p>
|
|
</div>
|
|
|
|
<div class="but" v-show="goods.status==3" @click="toHome">
|
|
重新兑换
|
|
</div>
|
|
<div class="but refresh" v-show="[0,1].includes(goods.status)" @click="()=>getInfo(true)">
|
|
刷新
|
|
</div>
|
|
|
|
<div class="c-item" v-if="goods.detail_url" style="margin-top: 0.3rem;">
|
|
<img :src="goods.detail_url" alt="" class="detail_url">
|
|
</div>
|
|
|
|
<!-- 单条弹出框 -->
|
|
<div class="prompt" :class="{show:toast}">
|
|
复制成功
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
// 获取 包码结算数据
|
|
const bm_obj_data = sessionStorage.getItem("bm_auth") ? JSON.parse(sessionStorage.getItem("bm_auth")) : null;
|
|
const { createApp, ref, onMounted, computed } = Vue;
|
|
createApp({
|
|
setup() {
|
|
const goods = ref({});
|
|
const toast = ref(false);
|
|
const clr = ref(null);
|
|
const goodsCount = ref(0);
|
|
const loading = ref(false);
|
|
const key_number = ref("");
|
|
const card_look_pwd = ref("");
|
|
|
|
onMounted(() => {
|
|
goodsCount.value = Number(sessionStorage.getItem('goodsCount')) || 0;
|
|
getInfo();
|
|
|
|
});
|
|
|
|
/* 获取详情 */
|
|
function getInfo(isLoading) {
|
|
const orderNumber = sessionStorage.getItem('orderNumber');
|
|
if (orderNumber) {
|
|
req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => {
|
|
if (isLoading) {
|
|
loading.value = true;
|
|
const clr = setTimeout(() => {
|
|
loading.value = false;
|
|
clearTimeout(clr);
|
|
}, 1000);
|
|
}
|
|
if (res.code == 200) {
|
|
const { product_name, status, show_url, card_number, card_password, use_coupon, product, mask_card_password } = res.data;
|
|
card_look_pwd.value = mask_card_password && mask_card_password.length > 16 ? mask_card_password.substring(0, 16) : mask_card_password;
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
/* 重新兑换 */
|
|
function toHome() {
|
|
if (goods.value.use_coupon === 2) {
|
|
window.location.replace('../homepage.html');
|
|
} else {
|
|
window.location.replace('../coupon/couponCollection.html');
|
|
}
|
|
}
|
|
|
|
// 解密
|
|
function decrypt(encryptedBase64Str, key) {
|
|
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);
|
|
}
|
|
|
|
|
|
/* 复制 */
|
|
function copyFunction(number, type) {
|
|
let new_number = number;
|
|
// 使用结算 卡密6
|
|
if (bm_obj_data && !bm_obj_data.settlement_data.is_settlement && bm_obj_data.settlement_data.settlement_type === 6) {
|
|
settlementFun(bm_obj_data.token, bm_obj_data.settlement_data.settlement_type);
|
|
}
|
|
|
|
if (type === 1 && sessionStorage.getItem('orderNumber')) {
|
|
let key = sessionStorage.getItem('orderNumber');
|
|
key = key.substring(0, 16);
|
|
new_number = decrypt(number, key);
|
|
card_look_pwd.value = new_number;
|
|
}
|
|
|
|
var aux = document.createElement("input");
|
|
aux.setAttribute("value", new_number);
|
|
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';
|
|
case 2:
|
|
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner4.png';
|
|
case 3:
|
|
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner5.png';
|
|
default:
|
|
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner6.png';
|
|
}
|
|
});
|
|
|
|
function backHandler() {
|
|
history.go(-1);
|
|
}
|
|
|
|
return { copyFunction, getInfo, backHandler, toHome, dynamicBanner, goods, toast, goodsCount, loading, card_look_pwd };
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
|
|
</html> |