qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:框架搭建及功能完善。

Browse Source
This commit is contained in:
tianyongbao
2024-06-03 17:00:27 +08:00
parent b3fe699735
commit 2b281fe098
37 changed files with 2211 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/work/accounts/accountDealRecord/index.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<view class="work-container">
交易记录
</view>
</template>

8
src/pages/work/accounts/accounts/index.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<view class="work-container">
记账账户
</view>
</template>

208
src/pages/work/base/credit/index.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<view class="normal-login-container">
<view class="logo-content align-center justify-center flex">
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
</image>
<text class="title">智聪科技记账平台登录</text>
</view>
<view class="login-form-content">
<view class="input-item flex align-center">
<view class="iconfont icon-user icon"></view>
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
</view>
<view class="input-item flex align-center">
<view class="iconfont icon-password icon"></view>
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
</view>
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
<view class="iconfont icon-code icon"></view>
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
<view class="login-code">
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
</view>
</view>
<view class="action-btn">
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
</view>
</view>
<view class="xieyi text-center">
<text class="text-grey1">登录即代表同意</text>
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
</view>
</view>
</template>
<script setup>
import modal from '@/plugins/modal'
import { getCodeImg } from '@/api/login'
import { ref } from "vue";
import config from '@/config.js'
import useUserStore from '@/store/modules/user'
import { getWxCode } from '@/utils/geek';
import { wxLogin } from '@/api/oauth';
import { setToken } from '@/utils/auth';
const userStore = useUserStore()
const codeUrl = ref("");
const captchaEnabled = ref(true); // 是否开启验证码
const useWxLogin = ref(false); // 是否使用微信登录
const globalConfig = ref(config);
const loginForm = ref({
username: "admin",
password: "admin123",
code: "",
uuid: ''
});
if (useWxLogin.value) {
getWxCode().then(res => {
console.log(res);
wxLogin('miniapp',res).then(res => {
if(res.token != null){
setToken(res.token);
loginSuccess()
}
});
})
}
// 获取图形验证码
function getCode() {
getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (captchaEnabled.value) {
codeUrl.value = 'data:image/gif;base64,' + res.img
loginForm.value.uuid = res.uuid
}
})
};
async function handleLogin() {
if (loginForm.value.username === "") {
modal.msgError("请输入您的账号")
} else if (loginForm.value.password === "") {
modal.msgError("请输入您的密码")
} else if (loginForm.value.code === "" && captchaEnabled.value) {
modal.msgError("请输入验证码")
} else {
modal.loading("登录中，请耐心等待...")
pwdLogin()
}
};
// 密码登录
async function pwdLogin() {
userStore.login(loginForm.value).then(() => {
modal.closeLoading()
loginSuccess()
}).catch(() => {
if (captchaEnabled.value) {
modal.closeLoading()
getCode()
}
})
};
function loginSuccess(result) {
// 设置用户信息
userStore.getInfo().then(res => {
uni.switchTab({
url: '/pages/index'
});
})
}
// 隐私协议
function handlePrivacy() {
let site = globalConfig.value.appInfo.agreements[0];
uni.navigateTo({
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
});
};
// 用户协议
function handleUserAgrement() {
let site = globalConfig.value.appInfo.agreements[1]
uni.navigateTo({
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
});
};
getCode();
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
.normal-login-container {
width: 100%;
.logo-content {
width: 100%;
font-size: 21px;
text-align: center;
padding-top: 15%;
image {
border-radius: 4px;
}
.title {
margin-left: 10px;
}
}
.login-form-content {
text-align: center;
margin: 20px auto;
margin-top: 15%;
width: 80%;
.input-item {
margin: 20px auto;
background-color: #f5f6f7;
height: 45px;
border-radius: 20px;
.icon {
font-size: 38rpx;
margin-left: 10px;
color: #999;
}
.input {
width: 100%;
font-size: 14px;
line-height: 20px;
text-align: left;
padding-left: 15px;
}
}
.login-btn {
margin-top: 40px;
height: 45px;
}
.xieyi {
color: #333;
margin-top: 20px;
}
.login-code {
height: 38px;
float: right;
.login-code-img {
height: 38px;
position: absolute;
margin-left: 10px;
width: 200rpx;
}
}
}
}
</style>

237
src/pages/work/base/pos/index.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<view class="mine-container" :style="{ height: `${windowHeight}px` }">
<!--顶部个人信息栏-->
<view class="header-section">
<view class="flex padding justify-between">
<view class="flex align-center">
<view v-if="!avatar" class="cu-avatar xl round bg-white">
<view class="iconfont icon-people text-gray icon"></view>
</view>
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
</image>
<view v-if="!name" @click="handleToLogin" class="login-tip">
点击登录
</view>
<view v-if="name" @click="handleToInfo" class="user-info">
<view class="u_title">
用户名：{{ name }}
</view>
</view>
</view>
<view @click="handleToInfo" class="flex align-center">
<text>个人信息</text>
<view class="iconfont icon-right"></view>
</view>
</view>
</view>
<view class="content-section">
<view class="mine-actions grid col-4 text-center">
<view class="action-item" @click="handleJiaoLiuQun">
<view class="iconfont icon-friendfill text-pink icon"></view>
<text class="text">交流群</text>
</view>
<view class="action-item" @click="handleBuilding">
<view class="iconfont icon-service text-blue icon"></view>
<text class="text">在线客服</text>
</view>
<view class="action-item" @click="handleBuilding">
<view class="iconfont icon-community text-mauve icon"></view>
<text class="text">反馈社区</text>
</view>
<view class="action-item" @click="handleBuilding">
<view class="iconfont icon-dianzan text-green icon"></view>
<text class="text">点赞我们</text>
</view>
</view>
<view class="menu-list">
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
<view class="menu-item-box">
<view class="iconfont icon-user menu-icon"></view>
<view>编辑资料</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleHelp">
<view class="menu-item-box">
<view class="iconfont icon-help menu-icon"></view>
<view>常见问题</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleAbout">
<view class="menu-item-box">
<view class="iconfont icon-aixin menu-icon"></view>
<view>关于我们</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleToSetting">
<view class="menu-item-box">
<view class="iconfont icon-setting menu-icon"></view>
<view>应用设置</view>
</view>
</view>
</view>
</view>
</view>
<!-- <view>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
title="通知" content="确定注销并退出系统吗"
@confirm="dialogConfirm"
@close="dialogClose">
</uni-popup-dialog>
</uni-popup>
</view> -->
</template>
<script setup>
import { ref } from "vue";
import config from '@/config.js'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const name = userStore.name;
const version = config.appInfo.version;
const avatar = ref(userStore.avatar);
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
const popup = ref(null);
uni.$on('refresh', () => {
avatar.value = userStore.avatar;
})
console.log(avatar.value)
function handleToInfo() {
uni.navigateTo({
url: '/pages_mine/pages/info/index'
});
};
function handleToEditInfo() {
uni.navigateTo({
url: '/pages_mine/pages/info/edit'
});
};
function handleToSetting() {
uni.navigateTo({
url: '/pages_mine/pages/setting/index'
});
};
function handleToLogin() {
uni.reLaunch({
url: '/pages/login'
});
};
function handleToAvatar() {
uni.navigateTo({
url: '/pages_mine/pages/avatar/index'
});
};
function handleLogout() {
popup.value.open();
};
function dialogConfirm() {
//console.log('----------------点击确认------------')
userStore.logOut().then(() => {
uni.reLaunch({
url: '/pages/login'
});
})
};
function dialogClose() {
//console.log('点击关闭')
};
function handleHelp() {
uni.navigateTo({
url: '/pages_mine/pages/help/index'
});
};
function handleAbout() {
uni.navigateTo({
url: '/pages_mine/pages/about/index'
});
};
function handleJiaoLiuQun() {
uni.showToast({
title: 'QQ群：133713780',
mask: false,
icon: "none",
duration: 1000
});
};
function handleBuilding() {
uni.showToast({
title: '模块建设中~',
mask: false,
icon: "none",
duration: 1000
});
}
</script>
<style lang="scss">
page {
background-color: #f5f6f7;
}
.mine-container {
width: 100%;
height: 100%;
.header-section {
padding: 15px 15px 45px 15px;
background-color: #3c96f3;
color: white;
.login-tip {
font-size: 18px;
margin-left: 10px;
}
.cu-avatar {
border: 2px solid #eaeaea;
.icon {
font-size: 40px;
}
}
.user-info {
margin-left: 15px;
.u_title {
font-size: 18px;
line-height: 30px;
}
}
}
.content-section {
position: relative;
top: -50px;
.mine-actions {
margin: 15px 15px;
padding: 20px 0px;
border-radius: 8px;
background-color: white;
.action-item {
.icon {
font-size: 28px;
}
.text {
display: block;
font-size: 13px;
margin: 8px 0px;
}
}
}
}
}
</style>

8
src/pages/work/heartJourney/index.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<view class="work-container">
心路历程
</view>
</template>

173
src/pages/work/index.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<view class="work-container">
<!-- 宫格组件 -->
<uni-section title="基础信息" v-show="auth.hasPermi('invest:bankcard:list')" type="line"></uni-section>
<view class="grid-body">
<uni-grid :column="4" :showBorder="false">
<uni-grid-item v-for="(item, index) in baseGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
<view class="grid-item-box">
<uni-icons :type="item.icon" size="30"></uni-icons>
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
<!-- 宫格组件 -->
<uni-section title="账单管理" v-show="auth.hasPermi('invest:creditQueryRecord:list')" type="line"></uni-section>
<view class="grid-body">
<uni-grid :column="4" :showBorder="false">
<uni-grid-item v-for="(item, index) in billGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
<view class="grid-item-box">
<uni-icons :type="item.icon" size="30"></uni-icons>
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
<!-- 宫格组件 -->
<uni-section title="记账管理" v-show="auth.hasPermi('invest:accounts:list')" type="line"></uni-section>
<view class="grid-body">
<uni-grid :column="4" :showBorder="false">
<uni-grid-item v-for="(item, index) in accountGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
<view class="grid-item-box">
<uni-icons :type="item.icon" size="30"></uni-icons>
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
<!-- 宫格组件 -->
<uni-section title="心路历程" v-show="auth.hasPermi('invest:heartJourney:list')" type="line"></uni-section>
<view class="grid-body">
<uni-grid :column="4" :showBorder="false">
<uni-grid-item v-for="(item, index) in heartJourneyGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
<view class="grid-item-box">
<uni-icons :type="item.icon" size="30"></uni-icons>
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</template>
<script setup>
import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
// 也可以使用下面的方式
import { ref } from "vue";
const baseGridList=ref([
{ path: '/pages/work/base/pos/index', text: 'pos机管理', icon: 'shop-filled', permission: 'invest:posmachine:list' },
{ path: '/pages/work/base/credit/index', text: '信用卡管理', icon: 'wallet', permission: 'invest:bankcard:list' },
{ path: '/pages/page1/page1', text: '储蓄卡管理', icon: 'wallet-filled', permission: 'invest:bankcard:list' },
{ path: '/pages/page1/page1', text: '借贷账户管理', icon: 'upload', permission: 'invest:bankcard:list' },
{ path: '/pages/page1/page1', text: '股票账户管理', icon: 'calendar', permission: 'invest:futureStocks:list' },
{ path: '/pages/page1/page1', text: '期货账户管理', icon: 'paperplane-filled', permission: 'invest:futureStocks:list' }
])
const billGridList=ref([
{ path: '/pages/page1/page1', text: '期货账单', icon: 'map', permission: 'invest:futureStocksBill:list' },
{ path: '/pages/page1/page1', text: '股票账单', icon: 'paperplane', permission: 'invest:futureStocksBill:list' },
{ path: '/pages/page1/page1', text: '网贷账单', icon: 'settings', permission: 'invest:installmentHistory:list' },
{ path: '/pages/page1/page1', text: '信用卡账单', icon: 'list', permission: 'invest:creditCardBill:list' },
{ path: '/pages/page1/page1', text: '信用卡分期账单', icon: 'bars', permission: 'invest:installmentHistory:list' },
{ path: '/pages/page1/page1', text: '人情账单', icon: 'staff-filled', permission: 'invest:installmentHistory:list' },
{ path: '/pages/page1/page1', text: '征信查询记录', icon: 'search', permission: 'invest:creditQueryRecord:list' }
])
const accountGridList=ref([
{ path: '/pages/work/accounts/accounts/index', text: '记账账户', icon: 'staff', permission: 'invest:accounts:list' },
{ path: '/pages/page1/page1', text: 'POS机刷卡记账', icon: 'reload', permission: 'invest:accountsTransferRecord:list' },
{ path: '/pages/page1/page1', text: '信用卡还款', icon: 'arrow-left', permission: 'invest:accountsTransferRecord:list' },
{ path: '/pages/page1/page1', text: '投资账户记账', icon: 'auth-filled', permission: 'invest:accountsTransferRecord:list' },
{ path: '/pages/page1/page1', text: '投资交易记录', icon: 'chatboxes', permission: 'invest:accountDealRecord:list' },
{ path: '/pages/page1/page1', text: '储蓄账户记账', icon: 'tune', permission: 'invest:accountsTransferRecord:list' },
{ path: '/pages/page1/page1', text: '借贷账户记账', icon: 'link', permission: 'invest:accountsTransferRecord:list' },
{ path: '/pages/page1/page1', text: '账户交易记录', icon: 'paperclip', permission: 'invest:accountDealRecord:list' }
])
const heartJourneyGridList=ref([
{ path: '/pages/work/heartJourney/index', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list' }
])
function navigateTo(path) {
uni.navigateTo({
url: path
});
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fff;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
/* #endif */
.text {
text-align: center;
font-size: 22rpx;
margin-top: 10rpx;
}
.grid-item-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.uni-margin-wrap {
width: 690rpx;
width: 100%;
;
}
.swiper {
height: 300rpx;
}
.swiper-box {
height: 150px;
}
.swiper-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
height: 300rpx;
line-height: 300rpx;
}
@media screen and (min-width: 500px) {
.uni-swiper-dot-box {
width: 400px;
/* #ifndef APP-NVUE */
margin: 0 auto;
/* #endif */
margin-top: 8px;
}
.image {
width: 100%;
}
}
</style>