Browse Source

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

- 新增 AQTabber 自定义 Tabbar 组件,支持不同用户类型显示不同菜单
- 更新学生端首页布局,添加 Tabbar 组件
- 新增教练端和销售端的首页页面结构
- 修改全局配置,移除默认 Tabbar 设置
master
liutong 1 year ago
parent
commit
d35d2cc5be
  1. 137
      components/AQ/AQTabber.vue
  2. 25
      pages.json
  3. 281
      pages/coach/home/index.vue
  4. 8
      pages/student/index/index.vue

137
components/AQ/AQTabber.vue

@ -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 {
//NvuefixedHeighttrue`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

@ -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": { "share": {
"title": "用药提醒", "title": "用药提醒",
"imageUrl": "/static/images/home/tixing.png", "imageUrl": "/static/images/home/tixing.png",

281
pages/coach/home/index.vue

@ -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>

8
pages/student/index/index.vue

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

Loading…
Cancel
Save