mobileclient/coupon/lookCard.html

142 lines
5.6 KiB
HTML
Raw Normal View History

2022-10-24 11:59:56 +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>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/lookCard.css">
2024-01-08 16:08:53 +08:00
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
</script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
2022-10-24 11:59:56 +08:00
</head>
<body>
<div id="app">
<!-- 单条弹出框 -->
<div class="prompt" :class="toastShow?'proactive':''">
{{this.toastTip}}
</div>
2022-10-24 11:59:56 +08:00
<img class="backPresTy" @click="backHandler"
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<p class="nav-title">卡密</p>
<div class="topBox">
<img :src="cardData.show_url" alt="">
<p class="product_name">{{cardData.product_name}}</p>
2022-10-24 16:34:44 +08:00
<p class="end_time">
卡密有效期至:{{cardData.goods.end_time}}
2022-10-24 16:34:44 +08:00
</p>
2022-10-24 11:59:56 +08:00
</div>
<div class="bottomBox">
<div>
<p class="cardInformation">卡密信息</p>
<template v-if="cardData.card_number">
<div class="item item-margin">
<p class="title">卡号:</p>
2024-01-08 16:08:53 +08:00
<template v-if="cardData.card_number">
<p class="number">{{cardData.card_number}}</p>
<p class="copy" @click="copyFunction(cardData.card_number)">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/copyNumber.png"
alt="">
复制卡号
</p>
</template>
<p v-else class="generate">卡密正在生成中,请稍后刷新再查看</p>
2022-10-24 11:59:56 +08:00
</div>
<div class="item">
<p class="title">密码:</p>
2024-01-08 16:08:53 +08:00
<template v-if="cardData.card_password">
<p class="number">{{cardData.card_password}}</p>
<p class="copy" @click="copyFunction(cardData.card_password)">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/copyNumber.png"
alt="">
复制密码
</p>
</template>
<p v-else class="generate">卡密正在生成中,请稍后刷新再查看</p>
2022-10-24 11:59:56 +08:00
</div>
</template>
<template v-else>
<div class="item item-margin">
<p class="title">卡密:</p>
2024-01-08 16:08:53 +08:00
<template v-if="cardData.card_password">
<p class="number">{{cardData.card_password}}</p>
<p class="copy" @click="copyFunction(cardData.card_password)">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/copyNumber.png"
alt="">
复制卡密
</p>
</template>
<p v-else class="generate">卡密正在生成中,请稍后刷新再查看</p>
2022-10-24 11:59:56 +08:00
</div>
</template>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data () {
return {
2024-01-08 16:08:53 +08:00
cardData: {
goods: {},
card_password: null,
card_number: null,
product_name: null,
show_url: null,
},
2022-10-24 11:59:56 +08:00
toastShow: false,
toastTip: ''
2022-11-18 18:05:01 +08:00
};
2022-10-24 11:59:56 +08:00
},
2023-12-20 17:17:16 +08:00
2022-10-24 11:59:56 +08:00
created () {
2024-01-08 16:08:53 +08:00
const orderNumber = localStorage.getItem('orderNumber');
/* 获取卡密详情 */
req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => {
if (res.code == 200) {
// this.cardData = res.data;
}
});
2022-10-24 11:59:56 +08:00
},
methods: {
/* 复制 */
copyFunction (number) {
var aux = document.createElement("input");
aux.setAttribute("value", number);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
2022-11-18 18:05:01 +08:00
this.openDialog('复制成功');
2022-10-24 11:59:56 +08:00
},
// 单条弹框
openDialog (tip) {
this.toastShow = true;
this.toastTip = tip;
setTimeout(() => {
this.toastShow = false;
this.toastTip = '';
2022-11-18 18:05:01 +08:00
}, 3000);
2022-10-24 11:59:56 +08:00
},
backHandler () {
history.go(-1);
}
}
})
</script>
</body>
</html>