wuliu_sy/pages/index/index.vue

405 lines
8.2 KiB
Vue
Raw Normal View History

2023-11-18 10:47:46 +08:00
<template>
<view class="content" :style="{'height':BarHeight+'px'}">
<view class="content-con">
<view class="content-left">
<view class="content-left-img">
<image src="@/static/images/logo.png" mode=""></image>
</view>
<view class="content-left-one" v-for="(item, index) in list" :key="index" @click="getlist(index)">
<view class="left-one" :class="{ 'lefcolor': num === index }">
{{item.name}}
</view>
</view>
<view class="content-left-bottom">
<view class="left-bottom-left">
<view class="left-bottom">
<image :src="oaUserInfo.avatar" mode=""></image>
</view>
<view class="left-bottom1">
{{oaUserInfo.nickname}}
</view>
</view>
<view class="left-bottom-right">
<view class="bottom-right1">
<view class="bottom-right_a">
</view>
<view class="bottom-right_b">
{{oaUserInfo.nickname ?'在线':'离线'}}
</view>
</view>
<view class="bottom-right2" @click="logout">
切换账号
</view>
</view>
</view>
</view>
<view class="content-right">
2023-11-28 08:59:04 +08:00
<index ref="list" @onfunction='onfunction' v-show="showIndexComponent" />
<indexa :type='type' @outfun='outfun' v-if="showIndexAComponent" />
<index1 ref="list1" @onfunction='onfunction' v-show="showIndex1Component" />
<indexb :type='type' @outfun='outfun' v-if="showIndexBComponent" />
<pindex ref="list2" @onfunction='onfunction' v-show="showPIndexComponent" />
<indexc :type='type' @outfun='outfun' v-if="showIndexCComponent" />
2023-11-18 10:47:46 +08:00
</view>
</view>
</view>
</template>
<script>
import {
getdatatotal,
getDocumentListApi,
projecttasklist,
todosubjec,
tasksubjec
} from '@/api/oa.js'
import {
HTTP_REQUEST_URL
} from '@/config/app.js'
import index from '@/components/index/index.vue'
import index1 from '@/components/index/index1.vue'
import pindex from '@/components/index/indexg.vue'
import indexa from '@/components/index/detaila.vue'
import indexb from '@/components/index/detailb.vue'
import indexc from '@/components/index/detailc.vue'
export default {
components: {
index,
index1,
pindex,
indexa,
indexb,
indexc
},
data() {
2023-11-28 08:59:04 +08:00
2023-11-18 10:47:46 +08:00
return {
title: 'Hello',
BarHeight: '',
list: [{
name: '待取货',
id: 0
},
{
name: '配送中',
id: 1
},
{
name: '已送达',
id: 2
},
],
num: 0,
isshow: true,
isshow1: true,
isshow2: true,
type: ''
}
},
computed: {
oaUserInfo() {
return this.$store.state.app.userInfo
},
2023-11-28 08:59:04 +08:00
showIndexComponent: function() {
return this.num === 0 && this.isshow;
},
showIndexAComponent: function() {
return this.num === 0 && !this.isshow;
},
showIndex1Component: function() {
return this.num === 1 && this.isshow1;
},
showIndexBComponent: function() {
return this.num === 1 && !this.isshow1;
},
showPIndexComponent: function() {
return this.num === 2 && this.isshow2;
},
showIndexCComponent: function() {
return this.num === 2 && !this.isshow2;
}
2023-11-18 10:47:46 +08:00
},
onLoad() {
},
2023-11-28 08:59:04 +08:00
// onPullDownRefresh() {
// if (this.num == 0 && this.isshow) {
// this.$refs.list.refresh()
// uni.stopPullDownRefresh()
// } else if (this.num == 1 && this.isshow1) {
// this.$refs.list1.refresh()
// uni.stopPullDownRefresh()
// } else if (this.num == 2 && this.isshow2) {
// this.$refs.list2.refresh()
// uni.stopPullDownRefresh()
// }
// },
onShow() {
if (this.num == 0 && this.isshow) {
2023-11-18 10:47:46 +08:00
this.$refs.list.refresh()
uni.stopPullDownRefresh()
2023-11-28 08:59:04 +08:00
} else if (this.num == 1 && this.isshow1) {
2023-11-18 10:47:46 +08:00
this.$refs.list1.refresh()
uni.stopPullDownRefresh()
2023-11-28 08:59:04 +08:00
} else if (this.num == 2 && this.isshow2) {
2023-11-18 10:47:46 +08:00
this.$refs.list2.refresh()
uni.stopPullDownRefresh()
}
},
2023-11-28 08:59:04 +08:00
mounted() {
if (this.num == 0 && this.isshow) {
this.$refs.list.refresh()
uni.stopPullDownRefresh()
} else if (this.num == 1 && this.isshow1) {
this.$refs.list1.refresh()
uni.stopPullDownRefresh()
} else if (this.num == 2 && this.isshow2) {
this.$refs.list2.refresh()
uni.stopPullDownRefresh()
}
2023-11-18 10:47:46 +08:00
},
methods: {
login() {
uni.reLaunch({
url: '/pages/oaLogin/oaLogin'
})
},
logout() {
2023-11-28 08:59:04 +08:00
uni.showModal({
title: '提示',
content: '确定退出?',
cancelText: "取消", // 取消按钮的文字
confirmText: "确认", // 确认按钮的文字
showCancel: true, // 是否显示取消按钮,默认为 true
confirmColor: '#f55850',
cancelColor: '#39B54A',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '/pages/oaLogin/oaLogin'
})
console.log('comfirm') //点击确定之后执行的代码
} else {
console.log('cancel') //点击取消之后执行的代码
}
}
2023-11-18 10:47:46 +08:00
})
2023-11-28 08:59:04 +08:00
2023-11-18 10:47:46 +08:00
},
getlist(index) {
this.num = index
if (index == 1) {
2023-11-28 08:59:04 +08:00
this.$refs.list1.refresh()
2023-11-18 10:47:46 +08:00
this.isshow2 = true
this.isshow = true
}
if (index == 2) {
this.isshow1 = true
this.isshow = true
2023-11-28 08:59:04 +08:00
this.$refs.list2.refresh()
2023-11-18 10:47:46 +08:00
}
if (index == 0) {
2023-11-28 08:59:04 +08:00
this.$refs.list.refresh()
2023-11-18 10:47:46 +08:00
this.isshow1 = true
this.isshow2 = true
}
},
2023-11-28 08:59:04 +08:00
onfunction(e,id) {
console.log(e,id)
if (id == 1) {
2023-11-18 10:47:46 +08:00
this.isshow = false
this.type = e
2023-11-28 08:59:04 +08:00
} else if (id == 2) {
2023-11-18 10:47:46 +08:00
this.isshow1 = false
this.type = e
2023-11-28 08:59:04 +08:00
} else {
2023-11-18 10:47:46 +08:00
this.isshow2 = false
this.type = e
}
2023-11-28 08:59:04 +08:00
2023-11-18 10:47:46 +08:00
},
2023-11-28 08:59:04 +08:00
2023-11-18 10:47:46 +08:00
outfun(e) {
if (e == 1) {
2023-11-28 08:59:04 +08:00
this.$refs.list.refresh()
2023-11-18 10:47:46 +08:00
this.isshow = true
} else if (e == 2) {
2023-11-28 08:59:04 +08:00
this.$refs.list1.refresh()
2023-11-18 10:47:46 +08:00
this.isshow1 = true
} else {
2023-11-28 08:59:04 +08:00
this.$refs.list2.refresh()
2023-11-18 10:47:46 +08:00
this.isshow2 = true
}
},
}
}
</script>
<style lang="scss">
page {
// background: #Fff;
// width: 1024px;
// border: 1px solid red;
}
.content {
position: relative;
height: 100vh;
.content-con {
display: flex;
}
.content-left {
width: 136rpx;
margin-left: 10rpx;
margin-right: 10rpx;
.content-left-img {
width: 50rpx;
height: 45rpx;
margin: 0 auto;
margin-bottom: 37rpx;
margin-top: 40rpx;
image {
width: 50rpx;
height: 45rpx;
}
}
.content-left-one {
text-align: center;
margin-bottom: 30rpx;
}
.left-one {
width: 136rpx;
font-size: 13rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
height: 29px;
line-height: 29px;
margin: 0 auto;
}
.lefcolor {
background: #DDE9FE;
font-size: 13rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #0022C7;
}
.content-left-bottom {
position: absolute;
width: 136rpx;
bottom: 0rpx;
height: 62rpx;
background-color: #F5F8FE;
.left-bottom-left {
display: flex;
.left-bottom1 {
font-size: 12rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #0022C7;
margin-top: 10rpx;
}
.left-bottom {
width: 26rpx;
height: 26rpx;
border-radius: 50%;
margin-right: 10rpx;
margin-left: 30rpx;
image {
width: 26rpx;
height: 26rpx;
border-radius: 50%;
}
}
}
.left-bottom-right {
display: flex;
justify-content: space-around;
line-height: 25rpx;
margin-top: 10rpx;
.bottom-right1 {
display: flex;
.bottom-right_a {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: #46BE61;
margin-top: 8rpx;
margin-right: 10rpx;
}
.bottom-right_b {
font-size: 10rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
.bottom-right2 {
font-size: 10rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
}
.content-right {
background: linear-gradient(180deg, #D8E6FE 0%, rgba(228, 236, 251, 0.39) 16%, rgba(244, 246, 252, 0.61) 100%);
border-radius: 15px 0px 0px 0px;
padding-top: 5rpx;
padding-left: 15rpx;
padding-right: 15rpx;
}
}
</style>