wuliu_sy/pages/index/index.vue

354 lines
6.2 KiB
Vue

<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">
<index ref="list" @onfunction='onfunction' v-if="num==0&&isshow" />
<indexa :type='type' @outfun='outfun' v-if="num==0&&!isshow" />
<index1 ref="list1" @onfunction1='onfunction1' v-if="num==1&&isshow1" />
<indexb :type='type' @outfun='outfun' v-if="num==1&&!isshow1" />
<pindex ref="list2" @onfunction2='onfunction2' v-if="num==2&&isshow2" />
<indexc :type='type' @outfun='outfun' v-if="num==2 &&!isshow2" />
</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() {
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
},
},
onLoad() {
},
onPullDownRefresh() {
if (this.num == 0) {
this.$refs.list.refresh()
uni.stopPullDownRefresh()
} else if (this.num == 1) {
this.$refs.list1.refresh()
uni.stopPullDownRefresh()
} else {
this.$refs.list2.refresh()
uni.stopPullDownRefresh()
}
},
mounted() {
},
methods: {
login() {
uni.reLaunch({
url: '/pages/oaLogin/oaLogin'
})
},
logout() {
uni.reLaunch({
url: '/pages/oaLogin/oaLogin'
})
},
getlist(index) {
this.num = index
if (index == 1) {
this.isshow2 = true
this.isshow = true
}
if (index == 2) {
this.isshow1 = true
this.isshow = true
}
if (index == 0) {
this.isshow1 = true
this.isshow2 = true
}
},
onfunction(e) {
if (e) {
this.isshow = false
this.type = e
}
},
onfunction1(e) {
if (e) {
this.isshow1 = false
this.type = e
}
},
onfunction2(e) {
if (e) {
this.isshow2 = false
this.type = e
}
},
outfun(e) {
if (e == 1) {
this.isshow = true
} else if (e == 2) {
this.isshow1 = true
} else {
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>