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

feat: 初始化版本！

Browse Source
This commit is contained in:
tianyongbao
2024-05-31 13:08:46 +08:00
parent 884a84802d
commit b3fe699735
587 changed files with 103758 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/common/textview/index.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<view>
<uni-card class="view-title" :title="title">
<text class="uni-body view-content">{{ content }}</text>
</uni-card>
</view>
</template>
<script>
export default {
data() {
return {
title: '',
content: ''
}
},
onLoad(options) {
this.title = options.title
this.content = options.content
uni.setNavigationBarTitle({
title: options.title
})
}
}
</script>
<style scoped>
page {
background-color: #ffffff;
}
.view-title {
font-weight: bold;
}
.view-content {
font-size: 26rpx;
padding: 12px 5px 0;
color: #333;
line-height: 24px;
font-weight: normal;
}
</style>

34
src/pages/common/webview/index.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<view v-if="params.url">
<web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
params: {},
webviewStyles: {
progress: {
color: "#FF3333"
}
}
}
},
props: {
src: {
type: [String],
default: null
}
},
onLoad(event) {
this.params = event
if (event.title) {
uni.setNavigationBarTitle({
title: event.title
})
}
}
}
</script>

75
src/pages/index.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<view class="content">
<image class="logo" src="@/static/logo.png"></image>
<view class="text-area">
<text class="title">Hello RuoYi-Vue</text>
</view>
<view class="text-area">
<up-text type="primary" text="uview-plus"></up-text>
</view>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const chartData = ref({});
onMounted(() => { getServerData() });
function getServerData() {
// 模拟从服务器获取数据时的延时
setTimeout(() => {
let res = {
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
series: [
{
name: '目标值',
data: [35, 36, 31, 33, 13, 34],
},
{
name: '完成量',
data: [18, 27, 21, 24, 6, 28],
},
],
};
chartData.value = JSON.parse(JSON.stringify(res));
}, 500);
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.charts-box {
width: 100%;
height: 300px;
}
</style>

208
src/pages/login.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/mine.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>

131
src/pages/template.config.js Normal file
View File

@@ -0,0 +1,131 @@
export default [
{
groupName: 'geek组件',
groupName_en: 'Page',
list: [
{
path: '/pages_geek/pages/index/index',
icon: 'wxCenter',
title: '组件展示',
title_en: 'index',
},
{
path: '/pages_geek/pages/code/index',
icon: 'wxCenter',
title: '二维码',
title_en: 'index',
}
]
},
{
groupName: '部件',
groupName_en: 'Parts',
list: [
{
path: '/pages_template/pages/coupon/index',
icon: 'coupon',
title: 'Coupon 优惠券',
title_en: 'Coupon',
},
{
path: '/pages_template/pages/citySelect/index',
icon: 'citySelect',
title: 'CitySelect 城市选择',
title_en: 'CitySelect',
},
{
path: '/pages_template/pages/submitBar/index',
icon: 'submitBar',
title: 'SubmitBar 提交订单栏',
title_en: 'SubmitBar',
},
{
path: '/pages_template/pages/keyboardPay/index',
icon: 'keyboardPay',
title: 'KeyboardPay 自定义键盘支付模板',
title_en: 'KeyboardPay',
},
]
},
{
groupName: '报表',
groupName_en: 'Parts',
list: [
{
path: '/pages_qiun/pages/finance/index',
icon: 'coupon',
title: '财务报告',
title_en: 'finace',
},
{
path: '/pages_qiun/pages/main/index',
icon: 'coupon',
title: '数据报表中心',
title_en: 'main',
},
{
path: '/pages_qiun/pages/school/index',
icon: 'coupon',
title: '智慧教育报表中心',
title_en: 'school',
},
{
path: '/pages_qiun/pages/sport/index',
icon: 'coupon',
title: '运动报告',
title_en: 'sport',
},
]
},
{
groupName: '页面',
groupName_en: 'Page',
list: [
{
path: '/pages_template/pages/wxCenter/index',
icon: 'wxCenter',
title: 'WxCenter 仿微信个人中心',
title_en: 'WxCenter',
},
{
path: '/pages_template/pages/mallMenu/index1',
icon: 'mall_menu_1',
title: 'MallMenu 垂直分类(左右独立)',
title_en: 'MallMenu 1',
}, {
path: '/pages_template/pages/mallMenu/index2',
icon: 'mall_menu_2',
title: 'MallMenu 垂直分类(左右联动)',
title_en: 'MallMenu 2',
}, {
path: '/pages_template/pages/comment/index',
icon: 'comment',
title: 'Comment 评论列表',
title_en: 'Comment',
}, {
path: '/pages_template/pages/order/index',
icon: 'order',
title: 'Order 订单列表',
title_en: 'Order',
},
{
path: '/pages_template/pages/login/index1',
icon: 'login',
title: 'Login 登录界面',
title_en: 'Login',
},
{
path: '/pages_template/pages/login/index2',
icon: 'login',
title: 'Login 水滴登录',
title_en: 'Login',
},
{
path: '/pages_template/pages/address/index',
icon: 'address',
title: 'Address 收货地址',
title_en: 'Address',
},
]
},
]

65
src/pages/template.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<view class="wrap">
<view class="list-wrap">
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list"
:key="index">
<u-cell :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
v-for="(item1, index1) in item.list" :key="index1">
<template v-slot:icon>
<image class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
</template>
</u-cell>
</u-cell-group>
</view>
<u-gap height="70"></u-gap>
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
</view>
</template>
<script>
import list from "./template.config.js";
export default {
data() {
return {
list: list,
// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
}
},
computed: {
getIcon() {
return path => {
return '../static/uview/demo/' + path + '.png';
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
}
},
},
methods: {
openPage(path) {
this.$u.route({
url: path
})
},
getGroupTitle(item) {
return item.groupName
},
getFieldTitle(item) {
return item.title
}
}
}
</script>
<style>
/* page {
background-color: rgb(240, 242, 244);
} */
</style>
<style lang="scss" scoped>
.u-cell-icon {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
</style>

184
src/pages/work.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<view class="work-container">
<!-- 轮播图 -->
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
<swiper-item v-for="(item, index) in data" :key="index">
<view class="swiper-item" @click="clickBannerItem(item)">
<image :src="item.image" mode="aspectFill" :draggable="false" />
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
<!-- 宫格组件 -->
<uni-section title="系统管理" type="line"></uni-section>
<view class="grid-body">
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="person-filled" size="30"></uni-icons>
<text class="text">用户管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="staff-filled" size="30"></uni-icons>
<text class="text">角色管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="color" size="30"></uni-icons>
<text class="text">菜单管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="settings-filled" size="30"></uni-icons>
<text class="text">部门管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="heart-filled" size="30"></uni-icons>
<text class="text">岗位管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="bars" size="30"></uni-icons>
<text class="text">字典管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="gear-filled" size="30"></uni-icons>
<text class="text">参数设置</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="chat-filled" size="30"></uni-icons>
<text class="text">通知公告</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="wallet-filled" size="30"></uni-icons>
<text class="text">日志管理</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
import modal from "@/plugins/modal"
const current=ref(0);
const swiperDotIndex=ref(0);
const data=ref([{
image: '/static/images/banner/banner01.jpg'
},
{
image: '/static/images/banner/banner02.jpg'
},
{
image: '/static/images/banner/banner03.jpg'
}
]);
function clickBannerItem(item) {
console.info(item)
};
function changeSwiper(e) {
current.value = e.detail.current
}
function changeGrid(e) {
modal.showToast({
title: '模块建设中',
mask: false,
icon:'loading',
duration: 1000
});
}
</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: 26rpx;
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>