update vue3

This commit is contained in:
RuoYi
2025-03-28 23:23:07 +08:00
parent fb0656fe14
commit 03e023cbc4
18 changed files with 477 additions and 514 deletions

View File

@@ -1,5 +1,5 @@
// 应用全局配置 // 应用全局配置
module.exports = { export default {
baseUrl: 'https://vue.ruoyi.vip/prod-api', baseUrl: 'https://vue.ruoyi.vip/prod-api',
// baseUrl: 'http://localhost:8080', // baseUrl: 'http://localhost:8080',
// 应用信息 // 应用信息

17
index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

23
main.js
View File

@@ -1,17 +1,14 @@
import Vue from 'vue' import { createSSRApp } from 'vue'
import App from './App' import App from './App'
import store from './store' // store import store from './store' // store
import plugins from './plugins' // plugins import { install } from './plugins' // plugins
import './permission' // permission import './permission' // permission
Vue.use(plugins)
Vue.config.productionTip = false export function createApp() {
Vue.prototype.$store = store const app = createSSRApp(App)
app.use(store)
App.mpType = 'app' install(app)
return {
const app = new Vue({ app
...App }
}) }
app.$mount()

View File

@@ -53,7 +53,7 @@
}, },
"usingComponents" : true "usingComponents" : true
}, },
"vueVersion" : "2", "vueVersion" : "3",
"h5" : { "h5" : {
"template" : "static/index.html", "template" : "static/index.html",
"devServer" : { "devServer" : {

View File

@@ -38,86 +38,88 @@
</view> </view>
</template> </template>
<script> <script setup>
import { getCodeImg } from '@/api/login' import { getCodeImg } from '@/api/login'
import store from '@/store'
import { ref, getCurrentInstance } from "vue"
export default { const { proxy } = getCurrentInstance()
data() { const globalConfig = getApp().globalData.config
return { const codeUrl = ref("")
codeUrl: "", // 验证码开关
captchaEnabled: true, const captchaEnabled = ref(true)
// 用户注册开关 // 用户注册开关
register: false, const register = ref(false)
globalConfig: getApp().globalData.config, const loginForm = ref({
loginForm: {
username: "admin", username: "admin",
password: "admin123", password: "admin123",
code: "", code: "",
uuid: "" uuid: ""
} })
}
},
created() {
this.getCode()
},
methods: {
// 用户注册 // 用户注册
handleUserRegister() { function handleUserRegister() {
this.$tab.redirectTo(`/pages/register`) proxy.$tab.redirectTo(`/pages/register`)
}, }
// 隐私协议 // 隐私协议
handlePrivacy() { function handlePrivacy() {
let site = this.globalConfig.appInfo.agreements[0] let site = globalConfig.appInfo.agreements[0]
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`) proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
}, }
// 用户协议 // 用户协议
handleUserAgrement() { function handleUserAgrement() {
let site = this.globalConfig.appInfo.agreements[1] let site = globalConfig.appInfo.agreements[1]
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`) proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
}, }
// 获取图形验证码 // 获取图形验证码
getCode() { function getCode() {
getCodeImg().then(res => { getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (this.captchaEnabled) { if (captchaEnabled.value) {
this.codeUrl = 'data:image/gif;base64,' + res.img codeUrl.value = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid loginForm.value.uuid = res.uuid
} }
}) })
}, }
// 登录方法 // 登录方法
async handleLogin() { async function handleLogin() {
if (this.loginForm.username === "") { if (loginForm.value.username === "") {
this.$modal.msgError("请输入账号") proxy.$modal.msgError("请输入账号")
} else if (this.loginForm.password === "") { } else if (loginForm.value.password === "") {
this.$modal.msgError("请输入密码") proxy.$modal.msgError("请输入密码")
} else if (this.loginForm.code === "" && this.captchaEnabled) { } else if (loginForm.value.code === "" && captchaEnabled.value) {
this.$modal.msgError("请输入验证码") proxy.$modal.msgError("请输入验证码")
} else { } else {
this.$modal.loading("登录中,请耐心等待...") proxy.$modal.loading("登录中,请耐心等待...")
this.pwdLogin() pwdLogin()
} }
}, }
// 密码登录 // 密码登录
async pwdLogin() { async function pwdLogin() {
this.$store.dispatch('Login', this.loginForm).then(() => { store.dispatch('Login', loginForm.value).then(() => {
this.$modal.closeLoading() proxy.$modal.closeLoading()
this.loginSuccess() loginSuccess()
}).catch(() => { }).catch(() => {
if (this.captchaEnabled) { if (captchaEnabled.value) {
this.getCode() getCode()
} }
}) })
}, }
// 登录成功后,处理函数 // 登录成功后,处理函数
loginSuccess(result) { function loginSuccess(result) {
// 设置用户信息 // 设置用户信息
this.$store.dispatch('GetInfo').then(res => { store.dispatch('GetInfo').then(res => {
this.$tab.reLaunch('/pages/index') proxy.$tab.reLaunch('/pages/index')
}) })
} }
}
} getCode()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -198,5 +200,4 @@
} }
} }
} }
</style> </style>

View File

@@ -43,15 +43,9 @@
</view> </view>
</template> </template>
<script> <script setup>
export default { const url = getApp().globalData.config.appInfo.site_url
data() { const version = getApp().globalData.config.appInfo.version
return {
url: getApp().globalData.config.appInfo.site_url,
version: getApp().globalData.config.appInfo.version
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -15,11 +15,12 @@
</view> </view>
</template> </template>
<script> <script setup>
export default { import { ref, getCurrentInstance } from "vue"
data() {
return { const { proxy } = getCurrentInstance()
list: [{
const list = ref([{
icon: 'iconfont icon-github', icon: 'iconfont icon-github',
title: '若依问题', title: '若依问题',
childList: [{ childList: [{
@@ -49,15 +50,10 @@
title: '如何修改登录密码?', title: '如何修改登录密码?',
content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码', content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码',
}] }]
} }])
]
} function handleText(item) {
}, proxy.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
methods: {
handleText(item) {
this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
}
}
} }
</script> </script>

View File

@@ -76,51 +76,50 @@
</view> </view>
</template> </template>
<script> <script setup>
export default { import store from '@/store'
data() { import { computed , getCurrentInstance } from "vue"
return {
name: this.$store.state.user.name, const { proxy } = getCurrentInstance()
version: getApp().globalData.config.appInfo.version const name = store.state.user.name
const version= getApp().globalData.config.appInfo.version
const avatar = computed(() => store.state.user.avatar)
const windowHeight = computed(() => uni.getSystemInfoSync().windowHeight - 50)
function handleToInfo() {
proxy.$tab.navigateTo('/pages/mine/info/index')
} }
},
computed: { function handleToEditInfo() {
avatar() { proxy.$tab.navigateTo('/pages/mine/info/edit')
return this.$store.state.user.avatar
},
windowHeight() {
return uni.getSystemInfoSync().windowHeight - 50
} }
},
methods: { function handleToSetting() {
handleToInfo() { proxy.$tab.navigateTo('/pages/mine/setting/index')
this.$tab.navigateTo('/pages/mine/info/index')
},
handleToEditInfo() {
this.$tab.navigateTo('/pages/mine/info/edit')
},
handleToSetting() {
this.$tab.navigateTo('/pages/mine/setting/index')
},
handleToLogin() {
this.$tab.reLaunch('/pages/login')
},
handleToAvatar() {
this.$tab.navigateTo('/pages/mine/avatar/index')
},
handleHelp() {
this.$tab.navigateTo('/pages/mine/help/index')
},
handleAbout() {
this.$tab.navigateTo('/pages/mine/about/index')
},
handleJiaoLiuQun() {
this.$modal.showToast('QQ群①133713780(满)、②146013835(满)、③189091635')
},
handleBuilding() {
this.$modal.showToast('模块建设中~')
} }
function handleToLogin() {
proxy.$tab.reLaunch('/pages/login')
} }
function handleToAvatar() {
proxy.$tab.navigateTo('/pages/mine/avatar/index')
}
function handleHelp() {
proxy.$tab.navigateTo('/pages/mine/help/index')
}
function handleAbout() {
proxy.$tab.navigateTo('/pages/mine/about/index')
}
function handleJiaoLiuQun() {
proxy.$modal.showToast('QQ群①133713780(满)、②146013835(满)、③189091635')
}
function handleBuilding() {
proxy.$modal.showToast('模块建设中~')
} }
</script> </script>

View File

@@ -20,27 +20,27 @@
</view> </view>
</template> </template>
<script> <script setup>
import { getUserProfile } from "@/api/system/user" import { getUserProfile } from "@/api/system/user"
import { updateUserProfile } from "@/api/system/user" import { updateUserProfile } from "@/api/system/user"
import { ref , getCurrentInstance } from "vue"
import { onReady } from "@dcloudio/uni-app"
export default { const { proxy } = getCurrentInstance()
data() { const user = ref({
return {
user: {
nickName: "", nickName: "",
phonenumber: "", phonenumber: "",
email: "", email: "",
sex: "" sex: ""
}, })
sexs: [{ const sexs = [{
text: '男', text: '男',
value: "0" value: "0"
}, { }, {
text: '女', text: '女',
value: "1" value: "1"
}], }]
rules: { const rules = ref({
nickName: { nickName: {
rules: [{ rules: [{
required: true, required: true,
@@ -65,30 +65,27 @@
errorMessage: '请输入正确的邮箱地址' errorMessage: '请输入正确的邮箱地址'
}] }]
} }
} })
}
}, function getUser() {
onLoad() {
this.getUser()
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
getUser() {
getUserProfile().then(response => { getUserProfile().then(response => {
this.user = response.data user.value = response.data
}) })
}, }
submit(ref) {
this.$refs.form.validate().then(res => { function submit(ref) {
updateUserProfile(this.user).then(response => { proxy.$refs.form.validate().then(res => {
this.$modal.msgSuccess("修改成功") updateUserProfile(user.value).then(response => {
proxy.$modal.msgSuccess("修改成功")
}) })
}) })
} }
}
} onReady(() => {
proxy.$refs.form.setRules(rules.value)
})
getUser()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -11,30 +11,23 @@
</view> </view>
</template> </template>
<script> <script setup>
import { getUserProfile } from "@/api/system/user" import { getUserProfile } from "@/api/system/user"
import { ref, reactive } from "vue"
export default { const user = ref({})
data() { const roleGroup = ref("")
return { const postGroup = ref("")
user: {},
roleGroup: "", function getUser() {
postGroup: ""
}
},
onLoad() {
this.getUser()
},
methods: {
getUser() {
getUserProfile().then(response => { getUserProfile().then(response => {
this.user = response.data user.value = response.data
this.roleGroup = response.roleGroup roleGroup.value = response.roleGroup
this.postGroup = response.postGroup postGroup.value = response.postGroup
}) })
} }
}
} getUser()
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@@ -15,18 +15,18 @@
</view> </view>
</template> </template>
<script> <script setup>
import { updateUserPwd } from "@/api/system/user" import { updateUserPwd } from "@/api/system/user"
import { ref, reactive , getCurrentInstance } from "vue"
import { onReady } from "@dcloudio/uni-app"
export default { const { proxy } = getCurrentInstance()
data() { const user = reactive({
return {
user: {
oldPassword: undefined, oldPassword: undefined,
newPassword: undefined, newPassword: undefined,
confirmPassword: undefined confirmPassword: undefined
}, })
rules: { const rules = ref({
oldPassword: { oldPassword: {
rules: [{ rules: [{
required: true, required: true,
@@ -37,40 +37,34 @@
rules: [{ rules: [{
required: true, required: true,
errorMessage: '新密码不能为空', errorMessage: '新密码不能为空',
}, }, {
{
minLength: 6, minLength: 6,
maxLength: 20, maxLength: 20,
errorMessage: '长度在 6 到 20 个字符' errorMessage: '长度在 6 到 20 个字符'
} }]
]
}, },
confirmPassword: { confirmPassword: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '确认密码不能为空' errorMessage: '确认密码不能为空'
}, { }, {
validateFunction: (rule, value, data) => data.newPassword === value, validateFunction: (rule, value, data) => user.newPassword === value,
errorMessage: '两次输入的密码不一致' errorMessage: '两次输入的密码不一致'
}]
} }
] })
}
} onReady(() => {
} proxy.$refs.form.setRules(rules.value)
}, })
onReady() {
this.$refs.form.setRules(this.rules) function submit() {
}, proxy.$refs.form.validate().then(res => {
methods: { updateUserPwd(user.oldPassword, user.newPassword).then(response => {
submit() { proxy.$modal.msgSuccess("修改成功")
this.$refs.form.validate().then(res => {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功")
}) })
}) })
} }
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -30,32 +30,32 @@
</view> </view>
</template> </template>
<script> <script setup>
export default { import store from '@/store'
data() { import { ref, computed , getCurrentInstance } from "vue"
return {
windowHeight: uni.getSystemInfoSync().windowHeight const { proxy } = getCurrentInstance()
const windowHeight = computed(() => uni.getSystemInfoSync().windowHeight - 50)
function handleToPwd() {
proxy.$tab.navigateTo('/pages/mine/pwd/index')
} }
},
methods: { function handleToUpgrade() {
handleToPwd() { proxy.$modal.showToast('模块建设中~')
this.$tab.navigateTo('/pages/mine/pwd/index') }
},
handleToUpgrade() { function handleCleanTmp() {
this.$modal.showToast('模块建设中~') proxy.$modal.showToast('模块建设中~')
}, }
handleCleanTmp() {
this.$modal.showToast('模块建设中~') function handleLogout() {
}, proxy.$modal.confirm('确定注销并退出系统吗?').then(() => {
handleLogout() { store.dispatch('LogOut').then(() => {}).finally(()=>{
this.$modal.confirm('确定注销并退出系统吗?').then(() => { proxy.$tab.reLaunch('/pages/index')
this.$store.dispatch('LogOut').then(() => {}).finally(()=>{
this.$tab.reLaunch('/pages/index')
}) })
}) })
} }
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -35,80 +35,78 @@
</view> </view>
</template> </template>
<script> <script setup>
import { getCodeImg, register } from '@/api/login' import { getCodeImg, register } from '@/api/login'
import { ref, getCurrentInstance } from "vue"
export default { const { proxy } = getCurrentInstance()
data() { const globalConfig = getApp().globalData.config
return { const codeUrl = ref("")
codeUrl: "", // 验证码开关
captchaEnabled: true, const captchaEnabled = ref(true)
globalConfig: getApp().globalData.config, const registerForm = ref({
registerForm: {
username: "", username: "",
password: "", password: "",
confirmPassword: "", confirmPassword: "",
code: "", code: "",
uuid: "" uuid: ""
} })
}
},
created() {
this.getCode()
},
methods: {
// 用户登录 // 用户登录
handleUserLogin() { function handleUserLogin() {
this.$tab.navigateTo(`/pages/login`) proxy.$tab.navigateTo(`/pages/login`)
}, }
// 获取图形验证码 // 获取图形验证码
getCode() { function getCode() {
getCodeImg().then(res => { getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (this.captchaEnabled) { if (captchaEnabled.value) {
this.codeUrl = 'data:image/gif;base64,' + res.img codeUrl.value = 'data:image/gif;base64,' + res.img
this.registerForm.uuid = res.uuid registerForm.value.uuid = res.uuid
} }
}) })
},
// 注册方法
async handleRegister() {
if (this.registerForm.username === "") {
this.$modal.msgError("请输入您的账号")
} else if (this.registerForm.password === "") {
this.$modal.msgError("请输入您的密码")
} else if (this.registerForm.confirmPassword === "") {
this.$modal.msgError("请再次输入您的密码")
} else if (this.registerForm.password !== this.registerForm.confirmPassword) {
this.$modal.msgError("两次输入的密码不一致")
} else if (this.registerForm.code === "" && this.captchaEnabled) {
this.$modal.msgError("请输入验证码")
} else {
this.$modal.loading("注册中,请耐心等待...")
this.register()
} }
},
// 注册方法
async function handleRegister() {
if (registerForm.value.username === "") {
proxy.$modal.msgError("请输入您的账号")
} else if (registerForm.value.password === "") {
proxy.$modal.msgError("请输入您的密码")
} else if (registerForm.value.confirmPassword === "") {
proxy.$modal.msgError("请再次输入您的密码")
} else if (registerForm.value.password !== registerForm.value.confirmPassword) {
proxy.$modal.msgError("两次输入的密码不一致")
} else if (registerForm.value.code === "" && captchaEnabled.value) {
proxy.$modal.msgError("请输入验证码")
} else {
proxy.$modal.loading("注册中,请耐心等待...")
userRegister()
}
}
// 用户注册 // 用户注册
async register() { async function userRegister() {
register(this.registerForm).then(res => { register(registerForm.value).then(res => {
this.$modal.closeLoading() proxy.$modal.closeLoading()
uni.showModal({ uni.showModal({
title: "系统提示", title: "系统提示",
content: "恭喜你,您的账号 " + this.registerForm.username + " 注册成功!", content: "恭喜你,您的账号 " + registerForm.value.username + " 注册成功!",
success: function (res) { success: function (res) {
if (res.confirm) { if (res.confirm) {
uni.redirectTo({ url: `/pages/login` }); uni.redirectTo({ url: `/pages/login` })
} }
} }
}) })
}).catch(() => { }).catch(() => {
if (this.captchaEnabled) { if (captchaEnabled.value) {
this.getCode() getCode()
} }
}) })
} }
}
} getCode()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -185,5 +183,4 @@
} }
} }
} }
</style> </style>

View File

@@ -74,35 +74,24 @@
</view> </view>
</template> </template>
<script> <script setup>
export default { import { ref, getCurrentInstance } from "vue"
data() {
return { const { proxy } = getCurrentInstance()
current: 0, const current = ref(0)
swiperDotIndex: 0, const swiperDotIndex = ref(0)
data: [{ const data = ref([{ image: '/static/images/banner/banner01.jpg' }, { image: '/static/images/banner/banner02.jpg' }, { image: '/static/images/banner/banner03.jpg' }])
image: '/static/images/banner/banner01.jpg'
}, function clickBannerItem(item) {
{
image: '/static/images/banner/banner02.jpg'
},
{
image: '/static/images/banner/banner03.jpg'
}
]
}
},
methods: {
clickBannerItem(item) {
console.info(item) console.info(item)
},
changeSwiper(e) {
this.current = e.detail.current
},
changeGrid(e) {
this.$modal.showToast('模块建设中~')
} }
function changeSwiper(e) {
current.value = e.detail.current
} }
function changeGrid(e) {
proxy.$modal.showToast('模块建设中~')
} }
</script> </script>

View File

@@ -2,13 +2,11 @@ import tab from './tab'
import auth from './auth' import auth from './auth'
import modal from './modal' import modal from './modal'
export default { export function install(app) {
install(Vue) {
// 页签操作 // 页签操作
Vue.prototype.$tab = tab app.config.globalProperties.$tab = tab
// 认证对象 // 认证对象
Vue.prototype.$auth = auth app.config.globalProperties.$auth = auth
// 模态框对象 // 模态框对象
Vue.prototype.$modal = modal app.config.globalProperties.$modal = modal
}
} }

View File

@@ -1,15 +1,11 @@
import Vue from 'vue' import { createStore } from "vuex"
import Vuex from 'vuex'
import user from '@/store/modules/user' import user from '@/store/modules/user'
import getters from './getters' import getters from './getters'
Vue.use(Vuex) const store = createStore({
const store = new Vuex.Store({
modules: { modules: {
user user
}, },
getters getters
}) })
export default store export default store

View File

@@ -29,12 +29,7 @@ const request = config => {
header: config.header, header: config.header,
dataType: 'json' dataType: 'json'
}).then(response => { }).then(response => {
let [error, res] = response const res = response
if (error) {
toast('后端接口连接异常')
reject('后端接口连接异常')
return
}
const code = res.data.code || 200 const code = res.data.code || 200
const msg = errorCode[code] || res.data.msg || errorCode['default'] const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) { if (code === 401) {

View File

@@ -7,7 +7,7 @@ import { toast, showConfirm, tansParams } from '@/utils/common'
let timeout = 10000 let timeout = 10000
const baseUrl = config.baseUrl const baseUrl = config.baseUrl
const upload = config => { export default function upload(config) {
// 是否需要设置 token // 是否需要设置 token
const isToken = (config.headers || {}).isToken === false const isToken = (config.headers || {}).isToken === false
config.header = config.header || {} config.header = config.header || {}
@@ -67,4 +67,4 @@ const upload = config => {
}) })
} }
export default upload