如果管理后台没有启用会员充值菜单,移动端也不显示充值套餐功能

This commit is contained in:
GeekMaster
2025-05-27 16:49:31 +08:00
parent a7063bf30a
commit 6b6fe1bebd
7 changed files with 353 additions and 304 deletions

View File

@@ -30,28 +30,36 @@
<div class="opt" v-if="isLogin">
<van-row :gutter="10">
<van-col :span="8">
<van-button round block @click="showPasswordDialog = true" size="small">修改密码</van-button>
<van-button round block @click="showPasswordDialog = true" size="small"
>修改密码</van-button
>
</van-col>
<van-col :span="8">
<van-button round block @click="logout" size="small">退出登录</van-button>
</van-col>
<van-col :span="8">
<van-button round block @click="showSettings = true" icon="setting" size="small">设置</van-button>
<van-button round block @click="showSettings = true" icon="setting" size="small"
>设置</van-button
>
</van-col>
</van-row>
</div>
<div class="product-list">
<h3>充值套餐</h3>
<div class="product-list" v-if="menuList['/member']">
<h3 class="py-3">充值套餐</h3>
<div class="item" v-for="item in products" :key="item.id">
<div class="title">
<span class="name">{{ item.name }}</span>
<div class="pay-btn">
<div v-for="payWay in payWays" @click="pay(item, payWay)" :key="payWay">
<span>
<van-button type="primary" size="small" v-if="payWay.pay_type === 'alipay'"> <i class="iconfont icon-alipay"></i> 支付宝 </van-button>
<van-button type="success" size="small" v-if="payWay.pay_type === 'wxpay'"> <i class="iconfont icon-wechat-pay"></i> 微信支付 </van-button>
<van-button type="primary" size="small" v-if="payWay.pay_type === 'alipay'">
<i class="iconfont icon-alipay"></i> 支付宝
</van-button>
<van-button type="success" size="small" v-if="payWay.pay_type === 'wxpay'">
<i class="iconfont icon-wechat-pay"></i> 微信支付
</van-button>
</span>
</div>
</div>
@@ -100,7 +108,10 @@
<van-cell-group inset>
<van-field name="switch" label="暗黑主题">
<template #input>
<van-switch v-model="dark" @change="(val) => store.setTheme(val ? 'dark' : 'light')" />
<van-switch
v-model="dark"
@change="(val) => store.setTheme(val ? 'dark' : 'light')"
/>
</template>
</van-field>
@@ -130,163 +141,151 @@
</template>
<script setup>
import { onMounted, ref } from "vue";
import { showFailToast, showLoadingToast, showNotify, showSuccessToast } from "vant";
import { httpGet, httpPost } from "@/utils/http";
import { dateFormat, showLoginDialog } from "@/utils/libs";
import { ElMessage } from "element-plus";
import { checkSession, getSystemInfo } from "@/store/cache";
import { useRouter } from "vue-router";
import { removeUserToken } from "@/store/session";
import { useSharedStore } from "@/store/sharedata";
import { checkSession, getSystemInfo } from '@/store/cache'
import { removeUserToken } from '@/store/session'
import { useSharedStore } from '@/store/sharedata'
import { httpGet, httpPost } from '@/utils/http'
import { dateFormat, showLoginDialog } from '@/utils/libs'
import { ElMessage } from 'element-plus'
import { showFailToast, showLoadingToast, showNotify, showSuccessToast } from 'vant'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const form = ref({
username: "GeekMaster",
nickname: "极客学长@001",
mobile: "1300000000",
avatar: "",
username: 'GeekMaster',
nickname: '极客学长@001',
mobile: '1300000000',
avatar: '',
power: 0,
});
})
const fileList = ref([
{
url: "/images/user-info.png",
message: "上传中...",
url: '/images/user-info.png',
message: '上传中...',
},
]);
])
const products = ref([]);
const vipMonthPower = ref(0);
const payWays = ref({});
const router = useRouter();
const userId = ref(0);
const isLogin = ref(false);
const showSettings = ref(false);
const store = useSharedStore();
const stream = ref(store.chatStream);
const dark = ref(store.theme === "dark");
const products = ref([])
const vipMonthPower = ref(0)
const payWays = ref({})
const router = useRouter()
const userId = ref(0)
const isLogin = ref(false)
const showSettings = ref(false)
const store = useSharedStore()
const stream = ref(store.chatStream)
const dark = ref(store.theme === 'dark')
const menuList = ref({})
onMounted(() => {
checkSession()
.then((user) => {
userId.value = user.id;
isLogin.value = true;
httpGet("/api/user/profile")
userId.value = user.id
isLogin.value = true
httpGet('/api/user/profile')
.then((res) => {
form.value = res.data;
fileList.value[0].url = form.value.avatar;
form.value = res.data
fileList.value[0].url = form.value.avatar
})
.catch((e) => {
console.log(e.message);
showFailToast("获取用户信息失败");
});
console.log(e.message)
showFailToast('获取用户信息失败')
})
})
.catch(() => {});
.catch(() => {})
// 获取产品列表
httpGet("/api/product/list")
httpGet('/api/product/list')
.then((res) => {
products.value = res.data;
products.value = res.data
})
.catch((e) => {
showFailToast("获取产品套餐失败:" + e.message);
});
showFailToast('获取产品套餐失败:' + e.message)
})
getSystemInfo()
.then((res) => {
vipMonthPower.value = res.data["vip_month_power"];
vipMonthPower.value = res.data['vip_month_power']
})
.catch((e) => {
showFailToast("获取系统配置失败:" + e.message);
});
showFailToast('获取系统配置失败:' + e.message)
})
httpGet("/api/payment/payWays")
httpGet('/api/payment/payWays')
.then((res) => {
payWays.value = res.data;
payWays.value = res.data
})
.catch((e) => {
ElMessage.error("获取支付方式失败:" + e.message);
});
});
ElMessage.error('获取支付方式失败:' + e.message)
})
// const afterRead = (file) => {
// file.status = 'uploading';
// file.message = '上传中...';
// // 压缩图片并上传
// new Compressor(file.file, {
// quality: 0.6,
// success(result) {
// const formData = new FormData();
// formData.append('file', result, result.name);
// // 执行上传操作
// httpPost('/api/upload', formData).then((res) => {
// form.value.avatar = res.data.url
// file.status = 'success'
// httpPost('/api/user/profile/update', form.value).then(() => {
// showSuccessToast('上传成功')
// }).catch(() => {
// showFailToast('上传失败')
// })
// }).catch((e) => {
// showNotify({type: 'danger', message: '上传失败:' + e.message})
// })
// },
// error(err) {
// console.log(err.message);
// },
// });
// }
getMenuList()
})
const showPasswordDialog = ref(false);
// 获取菜单列表
const getMenuList = () => {
httpGet('/api/menu/list')
.then((res) => {
res.data.forEach((item) => {
menuList.value[item.url] = item
})
})
.catch((e) => {
showFailToast('获取菜单列表失败:' + e.message)
})
}
const showPasswordDialog = ref(false)
const pass = ref({
old: "",
new: "",
renew: "",
});
old: '',
new: '',
renew: '',
})
const beforeClose = (action) => {
new Promise((resolve) => {
resolve(action === "confirm");
});
};
resolve(action === 'confirm')
})
}
// 提交修改密码
const updatePass = () => {
if (pass.value.old === "") {
return showNotify({ type: "danger", message: "请输入旧密码" });
if (pass.value.old === '') {
return showNotify({ type: 'danger', message: '请输入旧密码' })
}
if (!pass.value.new || pass.value.new.length < 8) {
return showNotify({ type: "danger", message: "密码的长度为8-16个字符" });
return showNotify({ type: 'danger', message: '密码的长度为8-16个字符' })
}
if (pass.value.renew !== pass.value.new) {
return showNotify({ type: "danger", message: "两次输入密码不一致" });
return showNotify({ type: 'danger', message: '两次输入密码不一致' })
}
httpPost("/api/user/password", {
httpPost('/api/user/password', {
old_pass: pass.value.old,
password: pass.value.new,
repass: pass.value.renew,
})
.then(() => {
showSuccessToast("更新成功!");
showPasswordDialog.value = false;
showSuccessToast('更新成功!')
showPasswordDialog.value = false
})
.catch((e) => {
showFailToast("更新失败," + e.message);
showPasswordDialog.value = false;
});
};
showFailToast('更新失败,' + e.message)
showPasswordDialog.value = false
})
}
const pay = (product, payWay) => {
if (!isLogin.value) {
return showLoginDialog(router);
return showLoginDialog(router)
}
showLoadingToast({
message: "正在创建订单",
message: '正在创建订单',
forbidClick: true,
});
let host = process.env.VUE_APP_API_HOST;
if (host === "") {
host = `${location.protocol}//${location.host}`;
})
let host = process.env.VUE_APP_API_HOST
if (host === '') {
host = `${location.protocol}//${location.host}`
}
httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
product_id: product.id,
@@ -294,27 +293,27 @@ const pay = (product, payWay) => {
pay_type: payWay.pay_type,
user_id: userId.value,
host: host,
device: "wechat",
device: 'wechat',
})
.then((res) => {
location.href = res.data;
location.href = res.data
})
.catch((e) => {
showFailToast("生成支付订单失败:" + e.message);
});
};
showFailToast('生成支付订单失败:' + e.message)
})
}
const logout = function () {
httpGet("/api/user/logout")
httpGet('/api/user/logout')
.then(() => {
removeUserToken();
store.setIsLogin(false);
router.push("/");
removeUserToken()
store.setIsLogin(false)
router.push('/')
})
.catch(() => {
showFailToast("注销失败!");
});
};
showFailToast('注销失败!')
})
}
</script>
<style lang="stylus">