网站制作上哪学校,长沙seo外包平台,网页做好怎么变成网站,云南专业网站建设1. pages下创建三个不同用户身份的“我的”页面。 显示第几个tabbar#xff0c;0是管理员 1是财务 2是司机 2. 在uni_modules文件夹创建底部导航cc-myTabbar文件夹#xff0c;在cc-myTabbar文件夹创建components文件夹#xff0c;在components文件夹创建cc-myTabbar.vue组件… 1. pages下创建三个不同用户身份的“我的”页面。 显示第几个tabbar0是管理员 1是财务 2是司机 2. 在uni_modules文件夹创建底部导航cc-myTabbar文件夹在cc-myTabbar文件夹创建components文件夹在components文件夹创建cc-myTabbar.vue组件 3. 在utils文件夹创建tabBar.js 4. pages.json里指定路径 5. 在单页面引入底部导航组件 //cc-myTabbar.vue 底部导航组件
templateview classpage-totalview classtab-listview classlist v-for(item,index) in TabBarList clickonTabBar(item,index) :style{marginTop: (item.name ) ? -88rpx : 0px} :keyitem.indeximage :srcitem.acImg modewidthFix v-showtabBarShow index :style{width: (item.name ) ? 100rpx : 54rpx,borderRadius: (item.name ) ? 24rpx : 0rpx}/imageimage :srcitem.img modewidthFix v-showtabBarShow ! index :style{width: (item.name ) ? 100rpx : 54rpx,borderRadius: (item.name ) ? 24rpx : 0rpx}/imagetext :class{action:tabBarShowindex}{{item.name}}/text/view/view/view
/templatescript
import tabBar from /utils/tabBar.js
// 判断当前登陆用户角色
// 0 为管理员
// 1 为财务
// 2 为司机// 三元表达式判断当前登陆的用户角色
// var user_type uni.getStorageSync(userType)
var user_type 0
let type user_type 0 ? admin : user_type 1 ? finance : driverconst state {list: tabBar[type]
}
// console.log(user_type, user_type);
// console.log(type, type);
// console.log(state, state);
export default {data () {return {TabBarList: state.list,codeheight: 0,isOverall: 0,phoneModel: ,};},props: {tabBarShow: {type: Number,default: 0,}},mounted () {try {const res uni.getSystemInfoSync();let that this;// 获取系统信息uni.getSystemInfo({success (res) {console.log(res.brand) //手机牌子console.log(res.model) //手机型号console.log(res.screenWidth) //屏幕宽度console.log(res.screenHeight) //屏幕高度that.codeheight Math.round(res.screenHeight);that.phoneModel res.modelif (res.model.search(iPhone)) {that.isOverall 0;} else if (Math.round(res.screenHeight) 740) {that.isOverall 1;}console.log(that.isOverall);}});} catch (e) {// error}},methods: {// 底部导航 跳转onTabBar (item, index) {// this.tabBarShow index;// console.log(item, item);// console.log(index, index);if (user_type 2) { // 司机switch (item.name) {case 首页:uni.switchTab({url: /pages/homePage/homePage})break;case :// uni.switchTab({// url: /pages/scan/scan// })// 允许从相机和相册扫码uni.scanCode({success: function (res) {console.log(条码类型 res.scanType);console.log(条码内容 res.result);}});break;case 我的:uni.switchTab({url: /pages/mineDriver/mineDriver})break;}} else if (user_type 0) { //管理员switch (item.name) {case 首页:uni.switchTab({url: /pages/homePage/homePage})break;case :// uni.switchTab({// url: /pages/scan/scan// })// 允许从相机和相册扫码uni.scanCode({success: function (res) {console.log(条码类型 res.scanType);console.log(条码内容 res.result);}});break;case 我的:uni.switchTab({url: /pages/mine/mine})break;}} else { // 财务switch (item.name) {case 首页:uni.switchTab({url: /pages/homePage/homePage})break;case :// uni.switchTab({// url: /pages/scan/scan// })// 允许从相机和相册扫码uni.scanCode({success: function (res) {console.log(条码类型 res.scanType);console.log(条码内容 res.result);}});break;case 我的:uni.switchTab({url: /pages/mineFinance/mineFinance})break;}}}}
}
/scriptstyle scoped langscss
import cc-myTabbar.scss;
/style//在components文件夹里创建cc-myTabbar.scss
//cc-myTabbar.scss
/* 主要颜色 */
$base: #508AF1; // 基础颜色.page-total {position: fixed;left: 0;bottom: 0;width: 100%;// height: 100rpx;
}.tab-list {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 140rpx;padding-bottom: 20rpx;background-color: #FFFFFF;// border-top: 1px solid #e8e8e8;.list {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 38%;height: 120rpx;image {width: 48rpx;height: 48rpx;background-color: white;}text {color: #707070;font-weight: 900;font-size: 24rpx;margin-top: 10rpx;}.action {color: $base;}}
}
//tabBar.js
// 小程序管理者
const admin [{pagePath: /pages/homePage/homePage,index: 0,name: 首页,img: /static/images/tabBar/tab_01.png,acImg: /static/images/tabBar/tab_02.png},// {// index: 2,// name: ,// img: /static/images/tabBar/tab_03.png,// acImg: /static/images/tabBar/tab_04.png// },{pagePath: /pages/mine/mine,index: 1,name: 我的,img: /static/images/tabBar/tab_05.png,acImg: /static/images/tabBar/tab_06.png},
]
// 财务
const finance [{pagePath: /pages/homePage/homePage,index: 0,name: 首页,img: /static/images/tabBar/tab_01.png,acImg: /static/images/tabBar/tab_02.png},// {// index: 1,// name: ,// img: /static/images/tabBar/tab_03.png,// acImg: /static/images/tabBar/tab_04.png// },{pagePath: /pages/mineFinance/mineFinance,index: 1,name: 我的,img: /static/images/tabBar/tab_05.png,acImg: /static/images/tabBar/tab_06.png},
]// 司机
const driver [{pagePath: /pages/homePage/homePage,index: 0,name: 首页,img: /static/images/tabBar/tab_01.png,acImg: /static/images/tabBar/tab_02.png},// {// pagePath: /pages/scan/scan,// index: 1,// name: ,// img: /static/images/tabBar/tab_03.png,// acImg: /static/images/tabBar/tab_04.png// },{pagePath: /pages/mineDriver/mineDriver,index: 1,name: 我的,img: /static/images/tabBar/tab_05.png,acImg: /static/images/tabBar/tab_06.png},
]export default {admin,finance,driver
}
// pages.json
{pages: [{path: pages/homePage/homePage,style: {navigationBarTitleText: 首页// navigationStyle: custom}},{path: pages/login,style: {navigationBarTitleText: 登录}},{path: pages/register,style: {navigationBarTitleText: 注册}},{path: pages/work/work,style: {navigationBarTitleText: 工作台}},{path: pages/mine/mine, //管理员style: {navigationBarTitleText: 我的}},{path: pages/mineDriver/mineDriver, // 司机style: {navigationBarTitleText: 我的}},{path: pages/mineFinance/mineFinance, // 财务style: {navigationBarTitleText: 我的}},{path: pages/mine/avatar/index,style: {navigationBarTitleText: 修改头像}},{path: pages/mine/info/index,style: {navigationBarTitleText: 个人信息}},{path: pages/mine/info/edit,style: {navigationBarTitleText: 编辑资料}},{path: pages/mine/pwd/index,style: {navigationBarTitleText: 修改密码}},{path: pages/mine/setting/index,style: {navigationBarTitleText: 应用设置}},{path: pages/mine/help/index,style: {navigationBarTitleText: 常见问题}},{path: pages/mine/about/index,style: {navigationBarTitleText: 关于我们}},],tabBar: {custom: true, // 隐藏tabBarcolor: #000000,selectedColor: #508af1, // 选中颜色borderStyle: white,backgroundColor: #ffffff,list: [{pagePath: pages/homePage/homePage// iconPath: static/images/tabbar/tab_01.png,// selectedIconPath: static/images/tabbar/tab_02.png,// text: 首页},// {// pagePath: pages/work/work,// iconPath: static/images/tabbar/work.png,// selectedIconPath: static/images/tabbar/work_.png,// text: 工作台// },{pagePath: pages/mine/mine// iconPath: static/images/tabbar/tab_09.png,// selectedIconPath: static/images/tabbar/tab_10.png,// text: 我的},{pagePath: pages/mineDriver/mineDriver// iconPath: static/images/tabbar/tab_09.png,// selectedIconPath: static/images/tabbar/tab_10.png,// text: 我的},{pagePath: pages/mineFinance/mineFinance// iconPath: static/images/tabbar/tab_09.png,// selectedIconPath: static/images/tabbar/tab_10.png,// text: 我的}]},globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: RuoYi,navigationBarBackgroundColor: #FFFFFF}
}
// 单页面
// mine.vue管理员版我的页面 / mineDriver.vue司机版我的页面 / mineFinance.vue财务版我的页面templateview classpage!-- tabBarShow显示第几个tabbar 0是管理员 1是财务 2是司机--cc-myTabbar :tabBarShow0/cc-myTabbar /view
/templatescriptexport default {data() {return {};},onReady() {uni.hideTabBar()},methods: {}}
/scriptstyle scoped langscsspage {padding-bottom: 140rpx;}
/style 上一篇文章
vue2踩坑之项目vue2element实现前端导出_vue2导出 type为text/plain 找不到状态code值-CSDN博客文章浏览阅读392次点赞8次收藏9次。vue2踩坑之项目vue2element实现前端导出。安装插件依赖 npm i --save xlsx0.17.0 file-saver2.0.5单页面引入 前端导出插件_vue2导出 type为text/plain 找不到状态code值https://blog.csdn.net/weixin_43928112/article/details/135685385
