mobileclient/orderDetails/chargerOrder.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>