mobileclient/coupon/lookCard.html

119 lines
4.4 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">
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>
</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>
<p class="end_time">兑换有效期:{{cardData.keyBatch.begin_time}} {{cardData.keyBatch.end_time}}</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>
<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>
</div>
<div class="item">
<p class="title">密码:</p>
<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>
</div>
</template>
<template v-else>
<div class="item item-margin">
<p class="title">卡密:</p>
<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>
</div>
</template>
</div>
</div>
</div>
<script>
var vConsole = new VConsole();
new Vue({
el: "#app",
data () {
return {
cardData: {},
toastShow: false,
toastTip: ''
}
},
created () {
this.cardData = JSON.parse(localStorage.getItem('cardProductDetail'));
},
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);
this.openDialog('复制成功')
},
// 单条弹框
openDialog (tip) {
this.toastShow = true;
this.toastTip = tip;
setTimeout(() => {
this.toastShow = false;
this.toastTip = '';
}, 3000)
},
backHandler () {
history.go(-1);
}
}
})
</script>
</body>
</html>