# 培评管理系统移动端

**Repository Path**: angeling/ppglxtydd

## Basic Information

- **Project Name**: 培评管理系统移动端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-18
- **Last Updated**: 2025-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、tabbar的配置

#### 1.https://www.iconfont.cn/ 找你想要的图标字体

#### (必看：CustomIcon 扩展自定义图标库:https://www.uviewui.com/guide/customIcon.html)

#### 2.下载后替换 src/static/css/iconfotn.css 文件

#### 3.配置src/pages.json文件

```json
"tabBar": {
		"color": "#cfcfcf",
		"selectedColor": "#fff",
		"borderStyle": "white",
		"backgroundColor": "#1e4db5",
		"list": [{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/order/index"
			},
			{
				"pagePath": "pages/mine/index"
			}
		]
}
```

#### 4.配置src/common/tabbar.js文件

- 与3中的list一一对应，其中路径前面加/, 例如 pages.json中是 "pagePath": "pages/mine/index"， 则tabbar.js 中对应 pagePath: "/pages/mine/index"

#### 5.页面中使用

```vue
<template>
    <u-tabbar :list="tabBarList" :mid-button="midButton" :active-color="activeColor" :inactive-color="inactiveColor"
    :border-top="borderTop" icon-size="40" height="105rpx" bg-color="#1e4db5"></u-tabbar>
</template>
<script>
export default {
    data(){
        return {
            // 自定义导航
            tabBarList: [],
            borderTop: true,  //是否显示上边框
            midButton: false, // 中间是否凸起
            inactiveColor: '#cfcfcf',
            activeColor: '#fff',
        }
    },
    onLoad(options) {
			this.tabBarList = this.$tabbar.tabbar
	},
}
</script>
```



## 二、请求拦截器与地址集中管理

1、拦截器：`src/common/http.interceptor`

2、地址集中管理：`src/common/http.api`

3、页面中使用：

```javascript
this.$u.api.main({   //main为http.api.js中对应的vm.$u.api = {main}
   param1: 'xxxxxx',
   param2: 'xxxxxx'
}).then(res => {

}).catch(err => {

});
```



## 三、路由守卫

文件：src/router.js

```javascript
router.beforeEach((to, from, next) => {
    //全局路由前置守卫
})
router.afterEach((to, from) => {
  // 全局路由后置守卫
});
```



## 四、H5设置代理

文件：src/manifest.json

```json
"h5": {
        "router": {
            "base": "/"
        },
        "devServer": {
            "https": false,
            "proxy": {
                "/dev-api": {
                    "target": "请求地址",
                    "changeOrigin": true,
                    "secure": false,
                    "pathRewrite": {
                        "^/dev-api": ""
                    }
                }
            },
            "port": 8081
        },
}
```



## 五、更换loading图标

文件：src\components\toast\toast.vue

```javascript
export default {
	data() {
		return {
src:'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzMiIgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2U9IiNmZGY5ZjkiIHN0cm9rZS1kYXNoYXJyYXk9IjUwLjI2NTQ4MjQ1NzQzNjY5IDUwLjI2NTQ4MjQ1NzQzNjY5IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjAuNzQwNzQwNzQwNzQwNzQwN3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIj48L2FuaW1hdGVUcmFuc2Zvcm0+CjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyMyIgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2U9IiMwMjZjYWEiIHN0cm9rZS1kYXNoYXJyYXk9IjM2LjEyODMxNTUxNjI4MjYyIDM2LjEyODMxNTUxNjI4MjYyIiBzdHJva2UtZGFzaG9mZnNldD0iMzYuMTI4MzE1NTE2MjgyNjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGR1cj0iMC43NDA3NDA3NDA3NDA3NDA3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMCA1MCA1MDstMzYwIDUwIDUwIj48L2FuaW1hdGVUcmFuc2Zvcm0+CjwvY2lyY2xlPgo8IS0tIFtsZGlvXSBnZW5lcmF0ZWQgYnkgaHR0cHM6Ly9sb2FkaW5nLmlvLyAtLT48L3N2Zz4='
		};
	},
}
```

## 六、全局工具方法的用法
文件：src\common\Tool.js
```javascript
// 页面中使用
let str = this.$tools.trimAll('去除  所有  空格');
//console.log(str) //>>去除所有空格
```

## 七、相关文档
<!-- uview文档 -->

项目中用到的框架文档地址**(直接使用，无需再做其他引入等操作)**
https://v1.uviewui.com/

<!-- echart文档 -->

项目中用到的 chart 图表文档地址**(直接使用，无需再做其他引入等操作)**
https://www.ucharts.cn/v2/#/demo/index