😎更新移动端开发框架

This commit is contained in:
zuohuaijun 2024-06-15 13:52:42 +08:00
parent 5074b67f65
commit daec13a022
9 changed files with 241 additions and 136 deletions

4
App/api/log.js Normal file
View File

@ -0,0 +1,4 @@
import { http } from 'uview-plus'
// 获取操作日志
export const sysLogOpPageApi = (data) => http.post('/api/sysLogOp/page', data)

View File

@ -19,9 +19,7 @@
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "Admin.NET 开发框架",
"navigationBarBackgroundColor": "#eeeeee",
"navigationBarTextStyle": "black"
"navigationBarTitleText": "Admin.NET 开发框架"
}
},
{
@ -54,24 +52,18 @@
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "Admin.NET",
"navigationBarBackgroundColor": "#11559c"
"navigationBarBackgroundColor": "#11559c",
"app-plus": {
"bounce": "none"
}
},
"tabBar": {
// "custom": true,
"color": "#B6C3D2",
"selectedColor": "#2B2E3D",
"borderStyle": "black",
"custom": true,
"list": [{
"pagePath": "pages/home/home",
"iconPath": "static/tabIcon/home.png",
"selectedIconPath": "static/tabIcon/home.png",
"text": "首页"
"pagePath": "pages/home/home"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/tabIcon/user.png",
"selectedIconPath": "static/tabIcon/user.png",
"text": "我的"
"pagePath": "pages/mine/mine"
}
]
}

View File

@ -21,15 +21,12 @@
</script>
<style lang="scss" scoped>
page {
background-color: #23212F;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #23212F;
}
.logo {

View File

@ -0,0 +1,124 @@
<template>
<view class="pd-lr-20" style="padding-bottom: 80px;">
<block v-for="(item,index) in state.logData" :key="index">
<view class="cardBox mg-t-20">
<view style="display: flex;">
<view class="cardBox-avatar">
{{ item.realName?.slice(0, 1) || item.realName?.slice(0, 1)}}
</view>
<view class="cardBox-rightInf">
<view class="cardBox-rightInf-fontSize " style="align-items: baseline;">
<span> {{ item.realName }}</span>
<up-tag class="mg-l-20" size="mini" borderColor="#ffeed4" bgColor="#ffeed4" plain :text="item.httpMethod" color="#FB8B05" />
</view>
<view style="font-size: 26rpx;color: #777;" class="mg-t-20">
<view style="display: flex;align-items: baseline;">
{{ item.location }} <span style="padding: 0 6rpx;"> | </span> {{ item.remoteIp }}
</view>
</view>
</view>
</view>
<up-line dashed direction="row" color="#ccc" margin="20rpx 0"></up-line>
<view class=" cardBox-content">
<span class="gray"></span> {{item.displayTitle}}
</view>
<view class=" cardBox-content mg-t-20">
<span class="gray"></span> {{item.requestUrl}}
</view>
<view class="mg-t-20">
<up-tag :text="item.browser" borderColor="#cee3f9" bgColor="#cee3f9" color="#11559c" size="mini" plain></up-tag>
<up-tag :text="item.createTime" borderColor="#cee3f9" bgColor="#cee3f9" color="#11559c" size="mini" plain style="margin-left: 20rpx;"></up-tag>
<up-tag :text="item.elapsed + '3ms'" borderColor="#ffeed4" bgColor="#ffeed4" color="#FB8B05" size="mini" plain style="margin-left: 20rpx;" />
</view>
</view>
</block>
</view>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { sysLogOpPageApi } from '@/api/log.js'
const state = reactive({
theme: uni.getStorageSync('theme'),
requestBody: {
page: 0,
pageSize: 10
},
logData: {} as any,
})
//
onMounted(() => {
sysLogOpPageApi(state.requestBody).then((res : any) => {
state.logData = res.result.items;
})
});
</script>
<style lang="scss" scoped>
.pd-lr-20 {
padding: 0 20rpx
}
.cardBox {
padding: 20rpx;
background: #fff;
border-radius: 15rpx;
box-sizing: border-box;
}
.mg-t-20 {
margin-top: 16rpx;
}
.cardBox-avatar {
color: #1661AB;
background: #F1F0ED;
text-align: center;
border-radius: 50%;
flex: none;
width: 120rpx;
height: 120rpx;
font-size: 45rpx;
line-height: 120rpx;
}
.cardBox-rightInf {
width: calc(100% - 130rpx);
padding-left: 24rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: hidden;
.cardBox-rightInf-fontSize {
font-size: 25rpx;
font-weight: bold;
display: flex;
justify-content: space-between;
}
}
.gray {
color: #999;
}
.cardBox-name {
color: #999;
font-size: 20rpx;
}
.cardBox-leixing {
color: $uni-color-primary;
padding-top: 5rpx;
font-size: 1rem;
}
.cardBox-content {
color: #333;
font-size: 26rpx;
}
</style>

View File

@ -25,13 +25,13 @@
id: 0,
path: "/pages/home/home",
icon: 'home',
text: "首页",
text: "首页",
centerItem: false
}, {
id: 1,
path: "/pages/mine/mine",
icon: 'account',
text: "我的",
text: "我的",
centerItem: false
}]
})
@ -47,12 +47,6 @@
</script>
<style lang="scss" scoped>
view {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.tabbar-container {
position: fixed;
bottom: 0;
@ -77,6 +71,7 @@
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
}
.item-active {

View File

@ -3,7 +3,7 @@
<view class="cardBox mg-t-20">
<view class="card-title">问题原因</view>
<up-line dashed color="#ccc"></up-line>
<view class="card-body mg-t-20">
<view class="mg-t-20">
<view class="card-type">
<input type="text" v-model="state.fromData.reason" placeholder="描述问题原因" />
</view>
@ -12,14 +12,14 @@
<view class="cardBox mg-t-20">
<view class="card-title">问题描述</view>
<up-line dashed color="#ccc"></up-line>
<view class="card-body mg-t-20">
<view class="mg-t-20">
<textarea v-model="state.fromData.describe" placeholder="描述具体的问题描述"></textarea>
</view>
</view>
<view class="cardBox mg-t-20">
<view class="card-title">联系方式 </view>
<up-line dashed color="#ccc"></up-line>
<view class="card-body mg-t-20">
<view class="mg-t-20">
<input type="number" maxlength="11" v-model="state.fromData.phone" placeholder="请输入手机号码" />
</view>
</view>
@ -27,7 +27,6 @@
<div class="fixed">
<up-button class="mg-t-20 " text="提交"></up-button>
</div>
<up-gap height="80" bgColor="#bbbfff00"></up-gap>
</view>
</template>
@ -37,13 +36,63 @@
const state = reactive({
fromData: {} as any,
})
onMounted(() => {
});
</script>
<style lang="scss" scoped>
.success {
width: 90%;
}
.pd-lr-20 {
padding: 0 16rpx;
}
.mg-t-20 {
margin-top: 20rpx;
}
.cardBox {
padding: 20rpx;
background: #fff;
border-radius: 15rpx;
box-sizing: border-box;
}
.card-title {
color: $uni-color-primary;
position: relative;
padding-left: 20rpx;
padding: 10rpx 0 30rpx 20rpx;
font-weight: bold;
font-size: 32rpx;
height: 32rpx;
line-height: 32rpx;
}
.card-title::before {
content: '';
position: absolute;
left: 0;
width: 6rpx;
height: 32rpx;
border-radius: 0 6rpx 6rpx 0;
background: $uni-color-primary;
}
.fixed {
width: 100vw;
padding: 10rpx 20rpx 30rpx;
background: #fff;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
}
::v-deep.u-button--info {
color: white !important;
width: 90%;
border-radius: 30px !important;
background: $uni-color-primary !important;
}
</style>

View File

@ -12,6 +12,8 @@
</up-grid-item>
</up-grid>
</view>
<SysLogOp />
</view>
<TabBar :current-page="0" />
@ -20,6 +22,7 @@
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import TabBar from '@/pages/component/tabbar.vue'
import SysLogOp from '@/pages/component/sysLogOp.vue'
const state = reactive({
swiperList: [
@ -80,7 +83,6 @@
.grid {
padding-top: 20rpx;
background: #fff;
border-radius: 15rpx;
box-sizing: border-box;
}

View File

@ -1,25 +1,25 @@
<template>
<view class="content">
<view class="pd-lr-20">
<view class="oldpsd mg-t-20" style="display: flex;align-items: baseline;">
<up-gap height="20" bgColor="#0000"></up-gap>
<view class="mg-t-20" style="display: flex;align-items: baseline;">
<up-icon name="lock-fill" size="15" />
<span style="margin-left: 4rpx;">原密码</span>
</view>
<input class="oldpsdinp" type="text" v-model="state.formData.paswOld" placeholder="输入原密码" />
<up-input class="mg-t-20" v-model="state.formData.paswOld" border="surround" placeholder="输入原密码" />
<up-gap height="20" bgColor="#0000"></up-gap>
<view class="oldpsd mg-t-20" style="display: flex;align-items: baseline;">
<view class="mg-t-20" style="display: flex;align-items: baseline;">
<up-icon name="lock-fill" size="15" />
<span style="margin-left: 4rpx;">新密码</span>
</view>
<input class="newpsdinp bottom" type="password" v-model="state.passwordNew" placeholder="请输入新的密码" @blur="newCode" />
<input class="newpsdinp" type="password" v-model="state.formData.paswNew" placeholder="再次输入确认密码" @blur="newCode2" />
<view class="txt">
<view :class="state.isTrue?'red':''">{{ state.tstxt }}</view>
</view>
<up-input class="mg-t-20" v-model="state.paswNew" border="surround" placeholder="请输入新的密码" @blur="newCode"></up-input>
<up-input class="mg-t-20" v-model="state.formData.paswNew" border="surround" placeholder="再次输入确认密码" @blur="newCode2"></up-input>
<up-button class="mg-t-20" text="提交" @click="onsubmit"></up-button>
<u-toast ref="uToast" />
<view class="txt">
<view :class="state.isTrue?'':'red'"> {{state.tstxt}} </view>
</view>
<up-gap height="40" bgColor="#0000"></up-gap>
<up-button class="mg-t-20" icon="checkmark-circle" iconColor="#fff" text="提交" @click="onsubmit"></up-button>
</view>
</template>
@ -31,14 +31,14 @@
const state = reactive({
isTrue: false,
tstxt: '请正确输入',
passwordNew: '',
tstxt: '',
paswNew: '',
formData: {} as any,
})
const newCode = () => {
if (state.passwordNew.length >= 6 && state.passwordNew.length <= 15) {
state.tstxt = '99999'
if (state.paswNew.length >= 6 && state.paswNew.length <= 15) {
state.tstxt = ''
state.isTrue = true
} else {
state.isTrue = false
@ -47,19 +47,21 @@
}
const newCode2 = () => {
if (state.formData.paswNew != state.passwordNew) {
if (state.formData.paswNew != state.paswNew) {
state.isTrue = false
state.tstxt = '两次密码不一致'
} else {
state.tstxt = ''
state.isTrue = true
}
}
const onsubmit = () => {
if (!state.isTrue) return uni.showToast({ title: state.tstxt, icon: 'none' })
state.formData.passwordOld = sm2.doEncrypt(state.formData.paswOld, env.smKey, 1)
state.formData.passwordNew = sm2.doEncrypt(state.formData.paswNew, env.smKey, 1)
let publicKey = env.smKey
state.formData.passwordOld = sm2.doEncrypt(state.formData.paswOld, publicKey, 1)
state.formData.passwordNew = sm2.doEncrypt(state.formData.paswNew, publicKey, 1)
changePwdApi(state.formData).then((res : any) => {
console.log(res);
if (res.code == 200) {
uni.showToast({ title: '修改成功', icon: 'none' })
setTimeout(() => {
@ -71,83 +73,22 @@
</script>
<style lang="scss" scoped>
.pd-lr-20 {
padding: 0 20rpx;
}
.mg-t-20 {
margin-top: 16rpx;
}
.red {
color: #ff0000 !important;
}
.oldpsdinp {
height: 104rpx;
margin-bottom: 40rpx;
width: 100%;
box-sizing: border-box;
background-color: #FFFFFF;
padding-left: 24rpx;
font-size: 28rpx;
}
.content {
width: 100vw;
height: 100vh;
background-color: #F5F6F8;
.oldpsd {
padding-left: 24rpx;
height: 92rpx;
line-height: 92rpx;
font-size: 30rpx;
color: #656565;
}
.newpsdinp {
height: 104rpx;
width: 100%;
box-sizing: border-box;
background-color: #FFFFFF;
padding-left: 24rpx;
font-size: 28rpx;
margin-top: 20rpx;
}
.bottom {
border-bottom: 1rpx solid #F2F2F2;
}
.txt {
margin-top: 16rpx;
display: flex;
padding: 0rpx 24rpx;
align-items: center;
justify-content: space-between;
view:first-child {
font-size: 20rpx;
color: #9A9A9A;
}
view:last-child {
font-size: 20rpx;
color: #FF2442;
}
}
.success {
width: 90%;
margin: 190rpx auto 0rpx;
}
::v-deep.u-icon__icon {
margin-top: 2px;
margin-right: 5px !important;
font-size: 35rpx !important;
}
.red {
color: red;
}
.pd-lr-20 {
padding: 0 16rpx;
}
.mg-t-20 {
margin-top: 20rpx;
}
::v-deep.u-button--info {

View File

@ -1,5 +1,6 @@
const env = {
baseUrl: 'http://101.43.53.74:5005', // 服务器地址
header: {}, // 请求头
smKey: "044E6B087A52596D7B4F18687ED5EC1DD9A8E45A9016852C9698E1C958D55663C195C667D302EFD81839C460613398DABE49B469A4DD81B95F018ED8B7BBFA90BC" // sm2国密公匙
}