159 lines
6.2 KiB
HTML
159 lines
6.2 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">
|
|
<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">
|
|
<div class="product-box">
|
|
<div class="product">
|
|
<img :src="goods.show_url" alt="">
|
|
<div>
|
|
<p class="p-title">{{goods.product_name}}</p>
|
|
<p class="p-user">充值账号：{{goods.account}}</p>
|
|
</div>
|
|
</div>
|
|
<p>x1</p>
|
|
</div>
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/dashedline.png"
|
|
alt="" class="dashedline">
|
|
<footer class="footer">
|
|
<div class="copy-box">
|
|
<p class="time-box">
|
|
订单单号：
|
|
<span class="time">{{goods.orderNumber}}</span>
|
|
</p>
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/copy.png"
|
|
alt="" @click="copyFunction(goods.orderNumber)" class="copy">
|
|
</div>
|
|
<p class="time-box">
|
|
订单时间：
|
|
<span class="time">{{goods.create_time}}</span>
|
|
</p>
|
|
<p class="time-box" v-show="goods.status==2">
|
|
成交时间：
|
|
<span class="time">{{goods.update_time}}</span>
|
|
</p>
|
|
</footer>
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/bottom.png" alt=""
|
|
class="bottom-img">
|
|
</main>
|
|
<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="prompt" :class="{show:toast}">
|
|
复制成功
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
const { createApp, ref, onMounted, computed } = Vue;
|
|
|
|
createApp({
|
|
setup() {
|
|
const goods = ref({});
|
|
const toast = ref(false);
|
|
const loading = ref(false);
|
|
const clr = ref(null);
|
|
const goodsCount = ref(0);
|
|
|
|
onMounted(() => {
|
|
goodsCount.value = Number(sessionStorage.getItem('goodsCount')) || 0;
|
|
getInfo();
|
|
});
|
|
|
|
/* 获取详情 */
|
|
function getInfo(isLoading) {
|
|
const orderNumber = sessionStorage.getItem('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, update_time, status, show_url, account, create_time, use_coupon } = res.data;
|
|
goods.value = { product_name, update_time, status, show_url, account, create_time, orderNumber, 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, loading };
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
|
|
</html> |