forked from ccsens_fe/tall-mui-3
8 changed files with 272 additions and 256 deletions
@ -1,25 +1,215 @@ |
|||||
<template> |
<template> |
||||
<view class="wrap bg-white px-2"> |
<view class="wrap bg-white px-2"> |
||||
<role-list @getTasks="getTasks" /> |
<view class="home-box u-skeleton"> |
||||
|
<scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x> |
||||
|
<view class="tab-box"> |
||||
|
<view :key="index" @click="changeIndex(item.id, index)" class="tab-item" v-for="(item, index) in roles"> |
||||
|
<view :class="setColor(item.mine, item.id)" class="tab-children u-skeleton-fillet">{{ item.name }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import RoleList from './component/RoleList'; |
import { mapState, mapMutations, mapActions } from 'vuex'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'Roles', |
name: 'Roles', |
||||
components: { RoleList }, |
|
||||
data() { |
data() { |
||||
return {}; |
return { |
||||
|
tabIndex: 0, //当前访问的 index 默认为0 |
||||
|
tabList: [], //tab dom节点集合 |
||||
|
scrollLeft: 0, //scrollview需要滚动的距离 |
||||
|
loading: false, // 是否显示骨架屏组件 |
||||
|
roles: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: '项目经理', |
||||
|
mine: 0, |
||||
|
pm: 1, |
||||
|
sequence: 1, |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: '运维', |
||||
|
mine: 0, |
||||
|
pm: 0, |
||||
|
sequence: 2, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
}, |
}, |
||||
|
|
||||
|
computed: { ...mapState('home', ['visibleRoles', 'roleId', 'tasks']) }, |
||||
|
|
||||
|
watch: { |
||||
|
visibleRoles(val) { |
||||
|
if (val && val.length) { |
||||
|
this.roles = [...this.visibleRoles]; |
||||
|
this.loading = false; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
if (!this.visibleRoles || !this.visibleRoles.length) { |
||||
|
this.loading = true; |
||||
|
} else { |
||||
|
this.roles = [...this.visibleRoles]; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
methods: { |
methods: { |
||||
getTasks(query) { |
...mapMutations('home', ['setRoleId', 'setTasks']), |
||||
console.log('query: ', query); |
...mapActions('home', ['handleRegularTask']), |
||||
this.$emit('getTasks', query); |
|
||||
|
// 设置滚动位置 |
||||
|
setCurrentRole(index) { |
||||
|
const data = document.getElementsByClassName('tab-children'); |
||||
|
// 获取当前所有子元素 并插入到 tabList 列表中 |
||||
|
data.forEach(item => { |
||||
|
this.tabList.push({ |
||||
|
width: item.clientWidth, |
||||
|
left: item.offsetLeft, |
||||
|
}); |
||||
|
}); |
||||
|
//当前滚动的位置 |
||||
|
let left = 0; |
||||
|
let screenWidth = window.screen.width; |
||||
|
for (let i = 0; i < index; i++) { |
||||
|
left += this.tabList[i].width + this.tabList[i].left * 2; |
||||
|
} |
||||
|
left += this.tabList[index].width; |
||||
|
this.scrollLeft = left - screenWidth / 2; |
||||
|
}, |
||||
|
|
||||
|
// 切换角色 |
||||
|
async changeIndex(id, index) { |
||||
|
try { |
||||
|
this.setRoleId(id); |
||||
|
//改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 |
||||
|
this.setCurrentRole(index); |
||||
|
// 清空定期任务数据 |
||||
|
this.setTasks([]); |
||||
|
// 根据时间基准点和角色查找定期任务 |
||||
|
await this.$emit('getTasksByRole'); |
||||
|
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 设置文字颜色 |
||||
|
setColor(mine, id) { |
||||
|
const { roleId } = this; |
||||
|
if (mine === '1' && roleId === id) { |
||||
|
return 'default-tab-choice'; |
||||
|
} |
||||
|
if (mine === '1' && roleId !== id) { |
||||
|
return 'default-tab-item'; |
||||
|
} |
||||
|
if (mine === '0' && roleId === id) { |
||||
|
return 'tab-choice'; |
||||
|
} |
||||
}, |
}, |
||||
}, |
}, |
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"></style> |
<style lang="scss" scoped> |
||||
|
.home-box { |
||||
|
// 对此盒子进行 sticky 粘性定位 |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
background: #fff; // 设置背景 否则会透明 |
||||
|
|
||||
|
/* #ifdef H5 */ |
||||
|
//粘性定位 在h5下 加 原生头部高度 44px |
||||
|
top: 88rpx; |
||||
|
/* #endif */ |
||||
|
|
||||
|
.tab-box { |
||||
|
position: relative; |
||||
|
white-space: nowrap; |
||||
|
// height: 84rpx; |
||||
|
|
||||
|
.tab-item { |
||||
|
// width: 20%; |
||||
|
// height: 84rpx; |
||||
|
padding: 20rpx 24rpx; |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
font-size: 30rpx; |
||||
|
transition-property: background-color, width; |
||||
|
} |
||||
|
|
||||
|
.default-tab-item { |
||||
|
color: $roleChoiceColor; |
||||
|
} |
||||
|
|
||||
|
.default-tab-choice { |
||||
|
//当前选中 基于此类名给与底部选中框 |
||||
|
position: relative; |
||||
|
color: $roleChoiceColor; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.default-tab-choice:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -20rpx; |
||||
|
width: 100%; |
||||
|
height: 6rpx; |
||||
|
border-radius: 2rpx; |
||||
|
background: $roleChoiceColor; |
||||
|
} |
||||
|
|
||||
|
.tab-choice { |
||||
|
//当前选中 基于此类名给与底部选中框 |
||||
|
position: relative; |
||||
|
color: $uni-color-primary; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.tab-choice:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -20rpx; |
||||
|
width: 100%; |
||||
|
height: 6rpx; |
||||
|
border-radius: 2rpx; |
||||
|
background: $uni-color-primary; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// // 删除 底部滚动条 |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
::-webkit-scrollbar, |
||||
|
::-webkit-scrollbar, |
||||
|
::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
width: 0 !important; |
||||
|
height: 0 !important; |
||||
|
-webkit-appearance: none; |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
/* #endif */ |
||||
|
/* #ifdef H5 */ |
||||
|
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条 |
||||
|
scroll-view ::v-deep ::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* #endif */ |
||||
|
|
||||
|
.skeleton { |
||||
|
height: 44rpx; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -1,225 +0,0 @@ |
|||||
<template> |
|
||||
<view> |
|
||||
<view class="home-box u-skeleton"> |
|
||||
<scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x> |
|
||||
<view class="tab-box"> |
|
||||
<view :key="index" @click="changeIndex(item.id, index)" class="tab-item" v-for="(item, index) in roles"> |
|
||||
<view :class="setColor(item.mine, item.id)" class="tab-children u-skeleton-fillet">{{ item.name }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
<u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { mapState, mapMutations, mapActions } from 'vuex'; |
|
||||
|
|
||||
export default { |
|
||||
name: 'RoleList', |
|
||||
data() { |
|
||||
return { |
|
||||
tabIndex: 0, //当前访问的 index 默认为0 |
|
||||
tabList: [], //tab dom节点集合 |
|
||||
scrollLeft: 0, //scrollview需要滚动的距离 |
|
||||
loading: false, // 是否显示骨架屏组件 |
|
||||
roles: [ |
|
||||
{ |
|
||||
id: 1, |
|
||||
name: '项目经理', |
|
||||
mine: 0, |
|
||||
pm: 1, |
|
||||
sequence: 1, |
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
name: '运维', |
|
||||
mine: 0, |
|
||||
pm: 0, |
|
||||
sequence: 2, |
|
||||
}, |
|
||||
], |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
computed: { ...mapState('home', ['visibleRoles', 'roleId', 'tasks']) }, |
|
||||
|
|
||||
watch: { |
|
||||
visibleRoles(val) { |
|
||||
if (val && val.length) { |
|
||||
this.roles = [...this.visibleRoles]; |
|
||||
this.loading = false; |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
|
|
||||
mounted() { |
|
||||
if (!this.visibleRoles || !this.visibleRoles.length) { |
|
||||
this.loading = true; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
...mapMutations('home', ['setRoleId']), |
|
||||
...mapActions('home', ['handleRegularTask']), |
|
||||
|
|
||||
setCurrentRole(index) { |
|
||||
const data = document.getElementsByClassName('tab-children'); |
|
||||
// 获取当前所有子元素 并插入到 tabList 列表中 |
|
||||
data.forEach(item => { |
|
||||
this.tabList.push({ |
|
||||
width: item.clientWidth, |
|
||||
left: item.offsetLeft, |
|
||||
}); |
|
||||
}); |
|
||||
//当前滚动的位置 |
|
||||
let left = 0; |
|
||||
let screenWidth = window.screen.width; |
|
||||
for (let i = 0; i < index; i++) { |
|
||||
left += this.tabList[i].width + this.tabList[i].left * 2; |
|
||||
} |
|
||||
left += this.tabList[index].width; |
|
||||
this.scrollLeft = left - screenWidth / 2; |
|
||||
}, |
|
||||
|
|
||||
async changeIndex(id, index) { |
|
||||
this.setRoleId(id); |
|
||||
//改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 |
|
||||
this.setCurrentRole(index); |
|
||||
// 根据时间基准点和角色查找定期任务 |
|
||||
await this.$emit('getTasks', { queryType: 0 }); |
|
||||
await this.$emit('getTasks', { queryType: 1 }); |
|
||||
console.log('this.tasks && this.tasks.length: ', this.tasks && this.tasks.length); |
|
||||
if (this.tasks && this.tasks.length) { |
|
||||
debugger; |
|
||||
// 查上下的任务 |
|
||||
const upQuery = { |
|
||||
timeNode: +this.tasks[0].planStart, |
|
||||
queryType: 0, |
|
||||
queryNum: 6, |
|
||||
}; |
|
||||
console.log('upQuery: ', upQuery); |
|
||||
await this.$emit('getTasks', upQuery); |
|
||||
const downQuery = { |
|
||||
timeNode: +this.tasks[this.tasks.length - 1].planStart, |
|
||||
queryType: 0, |
|
||||
queryNum: 6, |
|
||||
}; |
|
||||
console.log('downQuery: ', downQuery); |
|
||||
await this.$emit('getTasks', downQuery); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 设置文字颜色 |
|
||||
setColor(mine, id) { |
|
||||
const { roleId } = this; |
|
||||
if (mine === '1' && roleId === id) { |
|
||||
return 'default-tab-choice'; |
|
||||
} |
|
||||
if (mine === '1' && roleId !== id) { |
|
||||
return 'default-tab-item'; |
|
||||
} |
|
||||
if (mine === '0' && roleId === id) { |
|
||||
return 'tab-choice'; |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.home-box { |
|
||||
// 对此盒子进行 sticky 粘性定位 |
|
||||
position: sticky; |
|
||||
top: 0; |
|
||||
background: #fff; // 设置背景 否则会透明 |
|
||||
|
|
||||
/* #ifdef H5 */ |
|
||||
//粘性定位 在h5下 加 原生头部高度 44px |
|
||||
top: 88rpx; |
|
||||
/* #endif */ |
|
||||
|
|
||||
.tab-box { |
|
||||
position: relative; |
|
||||
white-space: nowrap; |
|
||||
// height: 84rpx; |
|
||||
|
|
||||
.tab-item { |
|
||||
// width: 20%; |
|
||||
// height: 84rpx; |
|
||||
padding: 20rpx 24rpx; |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
text-align: center; |
|
||||
font-size: 30rpx; |
|
||||
transition-property: background-color, width; |
|
||||
} |
|
||||
|
|
||||
.default-tab-item { |
|
||||
color: $roleChoiceColor; |
|
||||
} |
|
||||
|
|
||||
.default-tab-choice { |
|
||||
//当前选中 基于此类名给与底部选中框 |
|
||||
position: relative; |
|
||||
color: $roleChoiceColor; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.default-tab-choice:before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
bottom: -20rpx; |
|
||||
width: 100%; |
|
||||
height: 6rpx; |
|
||||
border-radius: 2rpx; |
|
||||
background: $roleChoiceColor; |
|
||||
} |
|
||||
|
|
||||
.tab-choice { |
|
||||
//当前选中 基于此类名给与底部选中框 |
|
||||
position: relative; |
|
||||
color: $uni-color-primary; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.tab-choice:before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
bottom: -20rpx; |
|
||||
width: 100%; |
|
||||
height: 6rpx; |
|
||||
border-radius: 2rpx; |
|
||||
background: $uni-color-primary; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// // 删除 底部滚动条 |
|
||||
/* #ifndef APP-NVUE */ |
|
||||
::-webkit-scrollbar, |
|
||||
::-webkit-scrollbar, |
|
||||
::-webkit-scrollbar { |
|
||||
display: none; |
|
||||
width: 0 !important; |
|
||||
height: 0 !important; |
|
||||
-webkit-appearance: none; |
|
||||
background: transparent; |
|
||||
} |
|
||||
|
|
||||
/* #endif */ |
|
||||
/* #ifdef H5 */ |
|
||||
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条 |
|
||||
scroll-view ::v-deep ::-webkit-scrollbar { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
/* #endif */ |
|
||||
|
|
||||
.skeleton { |
|
||||
height: 44rpx; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue