mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-13 12:43:43 +08:00
feat: no need login refactor with member and chatApps page
This commit is contained in:
RockYang
@@ -1,162 +1,164 @@
|
||||
<template>
|
||||
<div class="member custom-scroll">
|
||||
<div class="title">
|
||||
会员充值中心
|
||||
</div>
|
||||
<div class="inner" :style="{height: listBoxHeight + 'px'}">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="7">
|
||||
<div class="user-profile">
|
||||
<user-profile/>
|
||||
|
||||
<el-row class="user-opt" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding-top: 30px">
|
||||
<el-button type="danger" round @click="logout">退出登录</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="17">
|
||||
<div class="product-box">
|
||||
<div class="info" v-if="orderPayInfoText !== ''">
|
||||
<el-alert type="success" show-icon :closable="false" effect="dark">
|
||||
<strong>说明:</strong> 月度会员，年度会员每月赠送 {{ vipMonthPower }} 点算力，赠送算力当月有效，当月没有消费完的算力不结余到下个月。
|
||||
点卡充值的算力长期有效。
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
|
||||
<template #default="scope">
|
||||
<div class="product-item" :style="{width: scope.width+'px'}">
|
||||
<div class="image-container">
|
||||
<el-image :src="vipImg" fit="cover"/>
|
||||
</div>
|
||||
<div class="product-title">
|
||||
<span class="name">{{ scope.item.name }}</span>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="info-line">
|
||||
<span class="label">商品原价：</span>
|
||||
<span class="price">￥{{ scope.item.price }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">促销立减：</span>
|
||||
<span class="price">￥{{ scope.item.discount }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">有效期：</span>
|
||||
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
||||
<span class="expire" v-else>长期有效</span>
|
||||
</div>
|
||||
|
||||
<div class="info-line">
|
||||
<span class="label">算力值：</span>
|
||||
<span class="power" v-if="scope.item.power > 0">{{ scope.item.power }}</span>
|
||||
<span class="power" v-else>{{ vipMonthPower }}</span>
|
||||
</div>
|
||||
|
||||
<div class="pay-way">
|
||||
<el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
|
||||
<i class="iconfont icon-alipay"></i> 支付宝
|
||||
</el-button>
|
||||
<el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
|
||||
<span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
|
||||
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
|
||||
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ItemList>
|
||||
|
||||
<h2 class="headline">消费账单</h2>
|
||||
|
||||
<div class="user-order">
|
||||
<user-order v-if="isLogin"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
|
||||
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
|
||||
|
||||
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
|
||||
@logout="logout"/>
|
||||
|
||||
<bind-mobile v-if="isLogin" :show="showBindMobileDialog" :username="user.username"
|
||||
@hide="showBindMobileDialog = false"/>
|
||||
|
||||
<reward-verify v-if="isLogin" :show="showRewardVerifyDialog" @hide="showRewardVerifyDialog = false"/>
|
||||
|
||||
<el-dialog
|
||||
v-model="showRewardDialog"
|
||||
:show-close="true"
|
||||
width="400px"
|
||||
title="参与众筹"
|
||||
>
|
||||
<el-alert type="info" :closable="false">
|
||||
<div style="font-size: 14px">您好，目前每单位算力众筹价格为 <strong style="color: #f56c6c">{{ powerPrice }}
|
||||
</strong>元。
|
||||
由于本人没有开通微信支付，付款后请凭借转账单号,点击【众筹核销】按钮手动核销。
|
||||
</div>
|
||||
</el-alert>
|
||||
<div style="text-align: center;padding-top: 10px;">
|
||||
<el-image v-if="enableReward" :src="rewardImg"/>
|
||||
<div>
|
||||
<div class="member custom-scroll">
|
||||
<div class="title">
|
||||
会员充值中心
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div class="inner" :style="{height: listBoxHeight + 'px'}">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="7">
|
||||
<div class="user-profile">
|
||||
<user-profile/>
|
||||
|
||||
<el-dialog
|
||||
v-model="showPayDialog"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="true"
|
||||
:width="400"
|
||||
@close="closeOrder"
|
||||
:title="'实付金额：￥'+amount">
|
||||
<div class="pay-container">
|
||||
<div class="count-down">
|
||||
<count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef"/>
|
||||
</div>
|
||||
<el-row class="user-opt" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<div class="pay-qrcode" v-loading="loading">
|
||||
<el-image :src="qrcode"/>
|
||||
</div>
|
||||
<el-col :span="24" style="padding-top: 30px" v-if="isLogin">
|
||||
<el-button type="danger" round @click="logout">退出登录</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="17">
|
||||
<div class="product-box">
|
||||
<div class="info" v-if="orderPayInfoText !== ''">
|
||||
<el-alert type="success" show-icon :closable="false" effect="dark">
|
||||
<strong>说明:</strong> 月度会员，年度会员每月赠送 {{ vipMonthPower }} 点算力，赠送算力当月有效，当月没有消费完的算力不结余到下个月。
|
||||
点卡充值的算力长期有效。
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
|
||||
<template #default="scope">
|
||||
<div class="product-item" :style="{width: scope.width+'px'}">
|
||||
<div class="image-container">
|
||||
<el-image :src="vipImg" fit="cover"/>
|
||||
</div>
|
||||
<div class="product-title">
|
||||
<span class="name">{{ scope.item.name }}</span>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="info-line">
|
||||
<span class="label">商品原价：</span>
|
||||
<span class="price">￥{{ scope.item.price }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">促销立减：</span>
|
||||
<span class="price">￥{{ scope.item.discount }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">有效期：</span>
|
||||
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
||||
<span class="expire" v-else>长期有效</span>
|
||||
</div>
|
||||
|
||||
<div class="info-line">
|
||||
<span class="label">算力值：</span>
|
||||
<span class="power" v-if="scope.item.power > 0">{{ scope.item.power }}</span>
|
||||
<span class="power" v-else>{{ vipMonthPower }}</span>
|
||||
</div>
|
||||
|
||||
<div class="pay-way">
|
||||
<el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
|
||||
<i class="iconfont icon-alipay"></i> 支付宝
|
||||
</el-button>
|
||||
<el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
|
||||
<span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
|
||||
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
|
||||
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ItemList>
|
||||
|
||||
<h2 class="headline">消费账单</h2>
|
||||
|
||||
<div class="user-order">
|
||||
<user-order v-if="isLogin"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="tip success" v-if="text !== ''">
|
||||
<el-icon>
|
||||
<SuccessFilled/>
|
||||
</el-icon>
|
||||
<span class="text">{{ text }}</span>
|
||||
</div>
|
||||
<div class="tip" v-else>
|
||||
<el-icon>
|
||||
<InfoFilled/>
|
||||
</el-icon>
|
||||
<span class="text">请打开手机{{ payName }}扫码支付</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
|
||||
@logout="logout"/>
|
||||
|
||||
<bind-mobile v-if="isLogin" :show="showBindMobileDialog" :username="user.username"
|
||||
@hide="showBindMobileDialog = false"/>
|
||||
|
||||
<reward-verify v-if="isLogin" :show="showRewardVerifyDialog" @hide="showRewardVerifyDialog = false"/>
|
||||
|
||||
<el-dialog
|
||||
v-model="showRewardDialog"
|
||||
:show-close="true"
|
||||
width="400px"
|
||||
title="参与众筹"
|
||||
>
|
||||
<el-alert type="info" :closable="false">
|
||||
<div style="font-size: 14px">您好，目前每单位算力众筹价格为 <strong style="color: #f56c6c">{{ powerPrice }}
|
||||
</strong>元。
|
||||
由于本人没有开通微信支付，付款后请凭借转账单号,点击【众筹核销】按钮手动核销。
|
||||
</div>
|
||||
</el-alert>
|
||||
<div style="text-align: center;padding-top: 10px;">
|
||||
<el-image v-if="enableReward" :src="rewardImg"/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="showPayDialog"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="true"
|
||||
:width="400"
|
||||
@close="closeOrder"
|
||||
:title="'实付金额：￥'+amount">
|
||||
<div class="pay-container">
|
||||
<div class="count-down">
|
||||
<count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef"/>
|
||||
</div>
|
||||
|
||||
<div class="pay-qrcode" v-loading="loading">
|
||||
<el-image :src="qrcode"/>
|
||||
</div>
|
||||
|
||||
<div class="tip success" v-if="text !== ''">
|
||||
<el-icon>
|
||||
<SuccessFilled/>
|
||||
</el-icon>
|
||||
<span class="text">{{ text }}</span>
|
||||
</div>
|
||||
<div class="tip" v-else>
|
||||
<el-icon>
|
||||
<InfoFilled/>
|
||||
</el-icon>
|
||||
<span class="text">请打开手机{{ payName }}扫码支付</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="loginSuccess"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -212,13 +214,14 @@ onMounted(() => {
|
||||
checkSession().then(_user => {
|
||||
user.value = _user
|
||||
isLogin.value = true
|
||||
httpGet("/api/product/list").then((res) => {
|
||||
list.value = res.data
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取产品套餐失败：" + e.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
router.push("/login")
|
||||
showLoginDialog.value = true
|
||||
})
|
||||
|
||||
httpGet("/api/product/list").then((res) => {
|
||||
list.value = res.data
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取产品套餐失败：" + e.message)
|
||||
})
|
||||
|
||||
httpGet("/api/config/get?key=system").then(res => {
|
||||
@@ -276,10 +279,11 @@ const alipay = (row) => {
|
||||
payName.value = "支付宝"
|
||||
curPay.value = "alipay"
|
||||
amount.value = (row.price - row.discount).toFixed(2)
|
||||
if (!user.value.id) {
|
||||
if (!isLogin.value) {
|
||||
showLoginDialog.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (row) {
|
||||
curPayProduct.value = row
|
||||
}
|
||||
@@ -291,10 +295,11 @@ const huPiPay = (row) => {
|
||||
payName.value = payWays.value["hupi"]["name"] === "wechat" ? '微信' : '支付宝'
|
||||
curPay.value = "hupi"
|
||||
amount.value = (row.price - row.discount).toFixed(2)
|
||||
if (!user.value.id) {
|
||||
if (!isLogin.value) {
|
||||
showLoginDialog.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (row) {
|
||||
curPayProduct.value = row
|
||||
}
|
||||
@@ -306,10 +311,11 @@ const PayJs = (row) => {
|
||||
payName.value = '微信'
|
||||
curPay.value = "payjs"
|
||||
amount.value = (row.price - row.discount).toFixed(2)
|
||||
if (!user.value.id) {
|
||||
if (!isLogin.value) {
|
||||
showLoginDialog.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (row) {
|
||||
curPayProduct.value = row
|
||||
}
|
||||
@@ -352,6 +358,10 @@ const closeOrder = () => {
|
||||
activeOrderNo.value = ''
|
||||
}
|
||||
|
||||
const loginSuccess = () => {
|
||||
location.reload()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
Reference in New Issue
Block a user