140 lines
5.6 KiB
HTML
140 lines
5.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"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<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)">
|
|
</div>
|
|
|
|
<div class="c-item" :class="{mt30:!goods.card_number}">
|
|
<div>
|
|
<p>卡密</p>
|
|
<p class="num">{{goods.card_password}}</p>
|
|
</div>
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/copy.png"
|
|
alt="" @click="copyFunction(goods.card_password)">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="but" v-show="goods.status==3" @click="toHome">
|
|
重新兑换
|
|
</div>
|
|
<div class="but refresh" v-show="goods.status==1" @click="getInfo">
|
|
刷新
|
|
</div>
|
|
|
|
<!-- 单条弹出框 -->
|
|
<div class="prompt" :class="{show:toast}">
|
|
复制成功
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const { createApp, ref, onMounted, computed } = Vue;
|
|
createApp({
|
|
setup () {
|
|
const goods = ref({});
|
|
const toast = ref(false);
|
|
const clr = ref(null);
|
|
const goodsCount = ref(0);
|
|
|
|
onMounted(() => {
|
|
goodsCount.value = Number(sessionStorage.getItem('goodsCount')) || 0;
|
|
getInfo();
|
|
});
|
|
|
|
/* 获取详情 */
|
|
function getInfo () {
|
|
const orderNumber = sessionStorage.getItem('orderNumber');
|
|
req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => {
|
|
if (res.code == 200) {
|
|
const { product_name, status, show_url, card_number, card_password, use_coupon } = res.data;
|
|
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 };
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 重新兑换 */
|
|
function toHome () {
|
|
if (goods.value.use_coupon === 2) {
|
|
window.location.replace('../homepage.html');
|
|
} else {
|
|
window.location.replace('../coupon/couponCollection.html');
|
|
}
|
|
}
|
|
|
|
/* 复制 */
|
|
function copyFunction (number) {
|
|
var aux = document.createElement("input");
|
|
aux.setAttribute("value", 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/banner3.png';
|
|
case 2:
|
|
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner1.png';
|
|
case 3:
|
|
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner2.png';
|
|
default:
|
|
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/banner3.png';
|
|
}
|
|
});
|
|
|
|
function backHandler () {
|
|
history.go(-1);
|
|
}
|
|
|
|
return { copyFunction, getInfo, backHandler, toHome, dynamicBanner, goods, toast, goodsCount };
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
|
|
</html> |