|
|
@@ -7,9 +7,7 @@
|
|
|
<a-card title="我的订阅" class="subscription-card">
|
|
|
<div class="subscription-content">
|
|
|
<h3 class="plan-title">测试</h3>
|
|
|
- <p v-if="past" class="expire-text" style="color:#e04f1a;font-weight: 600">
|
|
|
- 已过期
|
|
|
- </p>
|
|
|
+ <p v-if="past" class="expire-text" style="color: #e04f1a; font-weight: 600">已过期</p>
|
|
|
<p v-else class="expire-text">
|
|
|
于 {{ expired }} 到期,距离到期还有 <span class="highlight">{{ expiredDay }}</span> 天。
|
|
|
</p>
|
|
|
@@ -21,14 +19,7 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
- <a-button
|
|
|
- @click="goTO(3)"
|
|
|
- type="primary"
|
|
|
- size="large"
|
|
|
- class="purchase-btn"
|
|
|
- >
|
|
|
- 续费订阅
|
|
|
- </a-button>
|
|
|
+ <a-button @click="goTO(3)" type="primary" size="large" class="purchase-btn"> 续费订阅 </a-button>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
|
|
|
@@ -116,7 +107,7 @@
|
|
|
import QRCode from 'qrcode'
|
|
|
export default {
|
|
|
name: 'SubscriptionPage',
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
progressColor: '#fa541c',
|
|
|
subscribeModalVisible: false,
|
|
|
@@ -125,7 +116,7 @@ export default {
|
|
|
{ id: 1, title: '查看教程', desc: '学习如何使用 V2Board', icon: 'book' },
|
|
|
{ id: 2, title: '一键订阅', desc: '快速将节点导入对应客户端进行使用', icon: 'wifi' },
|
|
|
{ id: 3, title: '续费订阅', desc: '对您当前的订阅进行续费', icon: 'clock-circle' },
|
|
|
- { id: 4, title: '遇到问题', desc: '遇到问题可以通过工单与我们沟通', icon: 'global' }
|
|
|
+ { id: 4, title: '遇到问题', desc: '遇到问题可以通过工单与我们沟通', icon: 'global' },
|
|
|
],
|
|
|
subscribeUrl: '', // 订阅地址
|
|
|
info: '',
|
|
|
@@ -135,15 +126,15 @@ export default {
|
|
|
allFlow: '0.00',
|
|
|
percent: 0,
|
|
|
qrImageUrl: '',
|
|
|
- past:false,
|
|
|
+ past: false,
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
+ created() {
|
|
|
this.getInfo()
|
|
|
this.getSubscribe()
|
|
|
},
|
|
|
methods: {
|
|
|
- async generateQRCode () {
|
|
|
+ async generateQRCode() {
|
|
|
try {
|
|
|
if (!this.subscribeUrl.trim()) {
|
|
|
return
|
|
|
@@ -152,7 +143,7 @@ export default {
|
|
|
// 生成图片 URL
|
|
|
this.qrImageUrl = await QRCode.toDataURL(this.subscribeUrl, {
|
|
|
width: 200,
|
|
|
- margin: 2
|
|
|
+ margin: 2,
|
|
|
})
|
|
|
console.log('this.qrImageUrl', this.qrImageUrl)
|
|
|
} catch (error) {
|
|
|
@@ -160,7 +151,7 @@ export default {
|
|
|
this.$message.error('生成二维码失败')
|
|
|
}
|
|
|
},
|
|
|
- getInfo () {
|
|
|
+ getInfo() {
|
|
|
this.$http.get('/user/info').then((res) => {
|
|
|
console.log('res', res)
|
|
|
this.$store.commit('SET_NAME', { name: res.data.email })
|
|
|
@@ -171,7 +162,7 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- getSubscribe () {
|
|
|
+ getSubscribe() {
|
|
|
this.$http.get('/user/getSubscribe').then((res) => {
|
|
|
if (res.data.d || res.data.u) {
|
|
|
this.useFlow = this.getMB(res.data.d) + this.getMB(res.data.u)
|
|
|
@@ -188,7 +179,7 @@ export default {
|
|
|
this.generateQRCode()
|
|
|
})
|
|
|
},
|
|
|
- getMB (e) {
|
|
|
+ getMB(e) {
|
|
|
const bytes = e
|
|
|
|
|
|
// 转换为 MB
|
|
|
@@ -208,8 +199,7 @@ export default {
|
|
|
// = ${gb} GB
|
|
|
// `);
|
|
|
},
|
|
|
- getTime (time) {
|
|
|
-
|
|
|
+ getTime(time) {
|
|
|
// 格式化输出
|
|
|
const targetTimestamp = time * 1000 // 转换为毫秒
|
|
|
const targetDate = new Date(targetTimestamp)
|
|
|
@@ -221,41 +211,47 @@ export default {
|
|
|
// 计算天数差
|
|
|
const timeDiff = targetTimestamp - now.getTime()
|
|
|
const daysRemaining = Math.ceil(timeDiff / (1000 * 60 * 60 * 24))
|
|
|
- if(daysRemaining <= 0){
|
|
|
+ if (daysRemaining <= 0) {
|
|
|
this.past = true
|
|
|
}
|
|
|
return daysRemaining
|
|
|
},
|
|
|
- goTO (id) {
|
|
|
+ goTO(id) {
|
|
|
if (id == 1) {
|
|
|
this.$router.push('/dashboard/analysis')
|
|
|
} else if (id == 2) {
|
|
|
this.showSubscribeModal()
|
|
|
} else if (id == 3) {
|
|
|
- this.$router.push({
|
|
|
- path: '/form/plan',
|
|
|
- query: {
|
|
|
- plan_id: this.info?.plan_id ?? ''
|
|
|
- }
|
|
|
- })
|
|
|
+ if (this.info && this.info.plan_id) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/form/plan',
|
|
|
+ query: {
|
|
|
+ plan_id: this.info?.plan_id ?? '',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/form/base-form'
|
|
|
+ })
|
|
|
+ }
|
|
|
} else if (id == 4) {
|
|
|
this.$router.push('/account/workOrder')
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 显示一键订阅弹窗
|
|
|
- showSubscribeModal () {
|
|
|
+ showSubscribeModal() {
|
|
|
this.subscribeModalVisible = true
|
|
|
},
|
|
|
|
|
|
// 显示二维码弹窗
|
|
|
- showQRCodeModal () {
|
|
|
+ showQRCodeModal() {
|
|
|
this.qrModalVisible = true
|
|
|
this.subscribeModalVisible = false
|
|
|
},
|
|
|
|
|
|
// 复制订阅地址
|
|
|
- copySubscribeUrl () {
|
|
|
+ copySubscribeUrl() {
|
|
|
const textArea = document.createElement('textarea')
|
|
|
textArea.value = this.subscribeUrl
|
|
|
document.body.appendChild(textArea)
|
|
|
@@ -267,7 +263,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 导入到 Clash For Windows
|
|
|
- importToClash () {
|
|
|
+ importToClash() {
|
|
|
// 尝试使用 clash:// 协议打开 Clash For Windows
|
|
|
const clashUrl = `clash://install-config?url=${encodeURIComponent(this.subscribeUrl)}`
|
|
|
|
|
|
@@ -285,11 +281,11 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 查看教程
|
|
|
- viewTutorial () {
|
|
|
+ viewTutorial() {
|
|
|
this.$router.push('/dashboard/analysis')
|
|
|
// 这里可以跳转到教程路由
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -300,8 +296,8 @@ export default {
|
|
|
|
|
|
.purchase-btn {
|
|
|
height: 32px;
|
|
|
- font-size: 14px;
|
|
|
- border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.subscription-page {
|