php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(components): 添加自定义 Tabbar 组件并更新首页布局 

- 新增 AQTabber 自定义 Tabbar 组件，支持不同用户类型显示不同菜单
- 更新学生端首页布局，添加 Tabbar 组件
- 新增教练端和销售端的首页页面结构
- 修改全局配置，移除默认 Tabbar 设置
master
liutong 1 year ago
parent
4ee8dde742
commit
d35d2cc5be
4 changed files with 426 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 137
      components/AQ/AQTabber.vue
  2. 25
      pages.json
  3. 281
      pages/coach/home/index.vue
  4. 10
      pages/student/index/index.vue

137
components/AQ/AQTabber.vue
View File

@ -0,0 +1,137 @@
<!--底部Tabber组件-->
<template>
<view class="main_box">
<fui-tabbar :tabBar="tabBar" :current="current" @click="openView"></fui-tabbar>
</view>
</template>
<script>
import fuiTabbar from "@/components/firstui/fui-tabbar/fui-tabbar.vue"
export default {
components:{
fuiTabbar
},
data() {
return {
userType:'',//用户类型|1=教练,2=销售,3=学员
current:'0',
tabBar: []
};
},
onShow(){
//设置缓存
uni.setStorageSync('userType',1)
//获取缓存
this.userType = uni.getStorageSync('userType')
this.init()
},
methods: {
async init(){
switch (String(this.userType)){
case "1"://教练
this.tabBar = [
{
text: "首页",
urlPath:'pages/student/index/index',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "课表",
urlPath:'pages/student/timetable/index',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "班级",
urlPath:'pages/student/my/my',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "我的",
urlPath:'pages/student/my/my',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
}
]
break;
case "2"://销售
this.tabBar = [
{
text: "首页",
urlPath:'pages/student/index/index',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "线索",
urlPath:'pages/student/my/my',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "添加",
urlPath:'pages/student/my/my',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
midButton: true,
width: 96,
height: 96
},
{
text: "数据",
urlPath:'pages/student/my/my',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "我的",
urlPath:'pages/student/my/my',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
}
]
break;
case "3"://学员
this.tabBar = [
{
text: "首页",
urlPath:'pages/student/index/index',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "课表",
urlPath:'pages/student/timetable/index',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "我的",
urlPath:'pages/student/my/my',//自定义页面跳转路径
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
}
]
break;
}
},
openView(e){
console.log('点击跳转',e)
},
}
}
</script>
<style lang="less" scoped>
.fui-wrap {
//为防止标签栏遮住页面内容，页面底部需留白高度不低于标签栏高度。非Nvue端和头条小程序如果fixedHeight属性没有设置为true，则页面外层还需加入以下样式（或者在页面最底部加入`fui-safe-area` 组件）兼容异形屏：
/* #ifndef APP-NVUE */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* #endif */
}
</style>

25
pages.json
View File

@ -46,30 +46,7 @@
}
}],
"tabBar": {
"color": "#999999",
"selectedColor": "#60ba61",
"borderStyle": "white",
"backgroundColor": "#fff",
"fontSize": "18px",
"iconWidth": "25px",
"list": [{
"pagePath": "pages/student/index/index",
"iconPath": "static/images/tabbar/home.png",
"selectedIconPath": "static/images/tabbar/home_selected.png",
"text": "首页"
}, {
"pagePath": "pages/student/timetable/index",
"iconPath": "static/images/tabbar/index.png",
"selectedIconPath": "static/images/tabbar/index_selected.png",
"text": "课表"
}, {
"pagePath": "pages/student/my/my",
"iconPath": "static/images/tabbar/my.png",
"selectedIconPath": "static/images/tabbar/my_selected.png",
"text": "我的"
}]
},
"share": {
"title": "用药提醒",
"imageUrl": "/static/images/home/tixing.png",

281
pages/coach/home/index.vue
View File

@ -0,0 +1,281 @@
<template>
<view>
<view class="top">
<view class="top_1">发现</view>
<view class="top_2" @click="publishing"><fui-icon name="plussign" size="80" fontWeight="Number"></fui-icon></view>
</view>
<view style="position: relative;" class="middle" v-for="(item, index) in list" :key="index" v-if="list.length > 0">
<view class="middles">
<view class="middles_1" v-if="item.headimg">
<image class="middles_1_img" :src="item.headimg"></image>
</view>
<view class="middles_1" v-else>
<image class="middles_1_img" src="/static/images/home/tixing.png"></image>
</view>
<view class="middles_2">
<view class="middles_info1">{{item.user}}</view>
<view class="middles_info2">{{item.timedifference}}</view>
</view>
</view>
<view class="shoucang" style="border: 5rpx #f8627f solid;color: #f8627f;" v-if="item.collections == 1" @click="collection(item.id,um_id)">收藏</view>
<view class="shoucang" style="border: 5rpx #ccc solid;" v-else @click="collection(item.id,um_id)">收藏</view>
<view @click="coninfo(item)" style="height: 300rpx;width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;">
<view class="middles_con">
{{item.activity}}
</view>
<view class="middles_con" v-if="item.imagesnum!=0">
<view>
<view style="width: 32%;height: 200rpx;display: inline-block;margin:2rpx;" v-for="(item1, index) in item.images" :key="index">
<image :src="item1" style="width: 100%;height: 100%;"></image>
</view>
</view>
</view>
<view class="middles_con">
{{item.content}}
</view>
</view>
<view class="middles_con" style="font-size: 20rpx;color: #ccc;" @click="coninfo(item)">
点击内容查看详情
</view>
<view class="middles_bom">
<view class="middles_bom_1 middles_boms" v-if="item.area">{{item.area}}</view>
<view class="middles_bom_2 middles_boms">
<fui-icon name="fabulous-fill" color="#f8627f" size="45" @click="like(item.id,item.um_id)"></fui-icon>
{{item.likes}}
</view>
<view class="middles_bom_3 middles_boms" @click="Comment(item.id)">
<fui-icon name="comment-fill" color="#6281a6" size="45"></fui-icon>
{{item.comment}}
</view>
</view>
<view style="width: 100%;height: 20rpx;"></view>
</view>
<view class="empty" v-if="!list.length">
<view style="width: 200rpx;">
<img src="@/static/icon-img/kkry.png" alt="" style="width: 180rpx;height: 180rpx;">
<view style="font-size: 28rpx;font-weight: 800;color: #00be8c;">
还没有任何提醒
</view>
</view>
</view>
<view style="width: 100%;height: 20rpx;"></view>
</view>
</template>
<script>
import user from '@/api/user.js';
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
components:{
fuiIcon
},
data() {
return {
list:[],
likes:0,
type:1,
type1:1,
activity_id:0,
um_id:0,
urls:'http://medication.zeyan.wang/'
}
},
onLoad() {
const um_id = uni.getStorageSync('um_id');
this.um_id = um_id
if (um_id == '') {
uni.navigateTo({
url: '/pages/login/login'
})
}
this.fetchData(this.um_id)
},
methods: {
fetchData(um_id) {
user.activity_index({
um_id: um_id
}).then(res => {
console.log(res)
if(res.status == 200){
if(res.data == null){
this.list = []
}else{
this.list = res.data
}
}else{
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
},
onPullDownRefresh(){
this.fetchData(this.um_id)
},
publishing(){
uni.navigateTo({
url: '/pages/index/publishing'
})
},
like(id,um_id){
user.activity_like({um_id:um_id,activity_id:id,type:1}).then(res => {
if(res.status == 200){
user.activity_index({
um_id: um_id
}).then(res => {
console.log(res)
if(res.status == 200){
this.list = res.data
}
});
this.type = res.data.type
this.activity_id = res.data.activity_id
}else{
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
},
collection(id,um_id){
user.activity_like({um_id:um_id,activity_id:id,type:2}).then(res => {
if(res.status == 200){
console.log(res)
this.fetchData(this.um_id)
this.type1 = res.data.type
this.activity_id = res.data.activity_id
}else{
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
},
coninfo(item){
// user.coninfo({id:id}).then(res => {
// if(res.status == 200){
uni.setStorageSync('coninfo', item);
uni.navigateTo({
url: '/pages/index/coninfo'
})
// }else{
// uni.showToast({
// title: res.msg,
// icon: 'none'
// })
// }
// });
},
Comment(id){
uni.setStorageSync('actid', id);
uni.navigateTo({
url: '/pages/index/Comment'
})
}
}
}
</script>
<style>
.empty {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 85vh;
align-items: center;
}
.top{
background-color: #fff;
height: 100rpx;
width: 100%;
}
.top_1{
display: inline-block;
font-size: 55rpx;
font-weight: bold;
margin-left: 30rpx;
line-height: 100rpx;
}
.top_2{
margin-left: 600rpx;
position: absolute;
top: 15rpx;
}
.middle{
width: 95%;
background-color: #fff;
margin: auto;
margin-top: 20rpx;
border-radius: 10rpx;
}
.middles{
height: 150rpx;
/* background-color: aqua; */
margin-top: 20rpx;
}
.middles_1{
height: 100%;
width: 24%;
/* background-color: red; */
display: inline-block;
}
.middles_2{
width: 70%;
/* background-color: green; */
display: inline-block;
position: relative;
top: -15%;
left: 2%;
}
.middles_1_img{
width: 130rpx;
height: 130rpx;
margin-left: 12%;
border-radius: 100rpx;
margin-top: 6%;
}
.middles_info1{
font-size: 40rpx;
font-weight: bold;
}
.middles_info2{
color: #5e5e5e;
}
.middles_con{
width: 92%;
margin: 20rpx auto;
font-size: 30rpx;
}
.middles_bom{
padding: 30rpx 0 40rpx 25rpx;
position: relative;
}
.middles_boms{
display: inline-block;
color: #9297b2;
}
.middles_bom_2{
position: absolute;
right: 30%;
}
.middles_bom_3{
position: absolute;
right: 10%;
}
.shoucang{
position: absolute;
right: 10%;
top: 10%;
height: 60rpx;
width: 140rpx;
border-radius: 10rpx;
line-height: 54rpx;
text-align: center;
}
</style>

10
pages/student/index/index.vue
View File

@ -60,16 +60,20 @@
</view>
<view style="width: 100%;height: 20rpx;"></view>
<AQTabber></AQTabber>
</view>
</template>
<script>
import user from '@/api/user.js';
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components:{
fuiIcon
},
components: {
fuiIcon,
AQTabber
},
data() {
return {
list:[],

Write Preview
Loading…
Cancel
Save