💪 optimize: 优化代码
This commit is contained in:
parent
bb762e8380
commit
b3480296d5
|
@ -12,8 +12,6 @@
|
|||
<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>
|
||||
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -23,144 +21,146 @@
|
|||
{{this.toastTip}}
|
||||
</div>
|
||||
|
||||
<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.goods.end_time}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottomBox">
|
||||
<div>
|
||||
<p class="cardInformation">卡密信息</p>
|
||||
<template v-if="cardData.card_number">
|
||||
<div class="item item-margin">
|
||||
<p class="title">卡号:</p>
|
||||
<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>
|
||||
<div v-else class="generate" style="display: flex;flex: 1;">
|
||||
<p style="flex:1">{{cardData.status===3?'卡密兑换失败,请重新兑换':'卡密正在生成中,请稍后刷新再查看'}} </p>
|
||||
<span @click="backHandler" style="color: #3558df;" v-if="cardData.status===3">重新兑换</span>
|
||||
<span @click="getInfo" style="color: #3558df;" v-else>点击刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="title">密码:</p>
|
||||
<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>
|
||||
<div v-else class="generate" style="display: flex;flex: 1;">
|
||||
<p style="flex:1">{{cardData.status===3?'卡密兑换失败,请重新兑换':'卡密正在生成中,请稍后刷新再查看'}} </p>
|
||||
<span @click="backHandler" style="color: #3558df;" v-if="cardData.status===3">重新兑换</span>
|
||||
<span @click="getInfo" style="color: #3558df;" v-else>点击刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="item item-margin">
|
||||
<p class="title">卡密:</p>
|
||||
<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>
|
||||
<div v-else class="generate" style="display: flex;flex: 1;">
|
||||
<p style="flex:1">{{cardData.status===3?'卡密兑换失败,请重新兑换':'卡密正在生成中,请稍后刷新再查看'}} </p>
|
||||
<span @click="backHandler" style="color: #3558df;" v-if="cardData.status===3">重新兑换</span>
|
||||
<span @click="getInfo" style="color: #3558df;" v-else>点击刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-show="!loading">
|
||||
<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.goods.end_time}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mask" @touchmove.prevent @mousewheel.prevent v-if="loading" ref="load">
|
||||
<preload-component />
|
||||
<div class="bottomBox">
|
||||
<div>
|
||||
<p class="cardInformation">卡密信息</p>
|
||||
<template v-if="cardData.card_number">
|
||||
<div class="item item-margin">
|
||||
<p class="title">卡号:</p>
|
||||
<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>
|
||||
<div v-else class="generate" style="display: flex;flex: 1;">
|
||||
<p style="flex:1">{{cardData.status===3?'卡密兑换失败,请重新兑换':'卡密正在生成中,请稍后刷新再查看'}} </p>
|
||||
<span @click="backHandler" style="color: #3558df;"
|
||||
v-if="cardData.status===3">重新兑换</span>
|
||||
<span @click="getInfo" style="color: #3558df;" v-else>点击刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="title">密码:</p>
|
||||
<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>
|
||||
<div v-else class="generate" style="display: flex;flex: 1;">
|
||||
<p style="flex:1">{{cardData.status===3?'卡密兑换失败,请重新兑换':'卡密正在生成中,请稍后刷新再查看'}} </p>
|
||||
<span @click="backHandler" style="color: #3558df;"
|
||||
v-if="cardData.status===3">重新兑换</span>
|
||||
<span @click="getInfo" style="color: #3558df;" v-else>点击刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="item item-margin">
|
||||
<p class="title">卡密:</p>
|
||||
<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>
|
||||
<div v-else class="generate" style="display: flex;flex: 1;">
|
||||
<p style="flex:1">{{cardData.status===3?'卡密兑换失败,请重新兑换':'卡密正在生成中,请稍后刷新再查看'}} </p>
|
||||
<span @click="backHandler" style="color: #3558df;"
|
||||
v-if="cardData.status===3">重新兑换</span>
|
||||
<span @click="getInfo" style="color: #3558df;" v-else>点击刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data () {
|
||||
return {
|
||||
cardData: {
|
||||
goods: {},
|
||||
card_password: null,
|
||||
card_number: null,
|
||||
product_name: null,
|
||||
show_url: null,
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data () {
|
||||
return {
|
||||
cardData: {
|
||||
goods: {},
|
||||
card_password: null,
|
||||
card_number: null,
|
||||
product_name: null,
|
||||
show_url: null,
|
||||
},
|
||||
toastShow: false,
|
||||
toastTip: '',
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
created () {
|
||||
this.getInfo();
|
||||
},
|
||||
|
||||
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('复制成功');
|
||||
},
|
||||
|
||||
getInfo () {
|
||||
const orderNumber = localStorage.getItem('orderNumber');
|
||||
this.loading = true;
|
||||
/* 获取卡密详情 */
|
||||
req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.cardData = res.data;
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toastShow: false,
|
||||
toastTip: '',
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
// 单条弹框
|
||||
openDialog (tip) {
|
||||
this.toastShow = true;
|
||||
this.toastTip = tip;
|
||||
setTimeout(() => {
|
||||
this.toastShow = false;
|
||||
this.toastTip = '';
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
created () {
|
||||
this.getInfo();
|
||||
},
|
||||
backHandler () {
|
||||
history.go(-1);
|
||||
}
|
||||
|
||||
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('复制成功');
|
||||
},
|
||||
|
||||
getInfo () {
|
||||
const orderNumber = localStorage.getItem('orderNumber');
|
||||
this.loading = true;
|
||||
/* 获取卡密详情 */
|
||||
req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.cardData = res.data;
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 单条弹框
|
||||
openDialog (tip) {
|
||||
this.toastShow = true;
|
||||
this.toastTip = tip;
|
||||
setTimeout(() => {
|
||||
this.toastShow = false;
|
||||
this.toastTip = '';
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
backHandler () {
|
||||
history.go(-1);
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue