OfficeApp/pages/oaHome/oaHome.vue
2024-01-02 22:59:17 +08:00

898 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="box">
<view class="" style="background-color: #2B63E3;height: var(--status-bar-height);" />
<view class="head">
<view class="head-content ">
<view class="">
工作证{{ myOaInfo.nickname }}
</view>
<view class="avatar">
<u--image :showLoading="true" width="134rpx" height="134rpx"
:src="myOaInfo.avatar || '../../static/img/public/avatar.png'" shape="circle"></u--image>
</view>
<view class="">
身份{{ myOaInfo.user_role_name}}
</view>
</view>
</view>
<view class="deposit">
<view class="deposit-l">
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/YJ.png'"
shape="circle"></u--image>
<view class="">
<view class="">
押金
</view>
<view class="deposit-value">
1000
</view>
</view>
</view>
<view class="deposit-l">
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/GLHS.png'"
shape="circle"></u--image>
<view class="">
<view class="">
押金
</view>
<view class="deposit-value">
1000
</view>
</view>
</view>
</view>
<!--追加功能 -->
<view class="">
<u-empty icon="/static/newWork/index/empty.png" iconSize='200' width='300' height="300" marginTop='150'
text="等待任务下发"></u-empty>
</view>
<!-- 旧版供销 -->
<view class="oa_home" style="oaColor" v-if="false">
<view class="home_header" :class="!ApproveList.length > 0 ? 'home_header_no_data' : ''">
<view style="
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
border-radius: 0 0 30rpx 30rpx;
">
<hx-lottie :options="options" ref="lottie" style="
width: 100vw;
height: 440rpx;
transform: scale(1.2);
background-color: #0122c7;
" />
</view>
<!-- #ifdef APP-PLUS||H5 -->
<view style="height: var(--status-bar-height)"></view>
<view style="height: 30rpx"></view>
<!-- <view v-if="uniMP" style="height: 44px;"></view> -->
<!-- #endif -->
<view class="my_info">
<view class="head_img">
<view class="img_box">
<u--image :showLoading="true" width="131.43rpx" height="131.43rpx" class="img_box_img"
:src="myOaInfo.avatar || '../../static/img/public/avatar.png'"
shape="circle"></u--image>
</view>
<text class="head_text">工作证: {{ myOaInfo.nickname }}</text>
<text class="head_text" style="flex-shrink: 0">身份: {{ myOaInfo.user_role_name}}</text>
</view>
</view>
<!-- 占位 -->
<view style="height: 50rpx"></view>
<view class="" style="background-color: white;position: relative;padding: 20rpx;border-radius: 20rpx;">
<view class="" style="display: flex;justify-content: space-around;">
<view class="" style="display: flex;flex-direction: column;align-items: center;">
<view style="color: #FF7C32;">押金</view>
<view style="margin-top: 30rpx;font-size: 40rpx;">{{myOaInfo.deposit}} </view>
</view>
<view class="" style="display: flex;flex-direction: column;align-items: center;">
<view style="color: #FF7C32;">管理户数</view>
<view style="margin-top: 30rpx;font-size: 40rpx;">{{myOaInfo.user_information_count}} <text
style="font-size: 30rpx;margin-left: 5rpx;"></text> </view>
</view>
</view>
</view>
</view>
<u-empty text="等待任务下发">
</u-empty>
<!-- <view class="fast_track">
<block v-for="(item, index) in oaHomeData" :key="item.id">
<view class="track_item" @click="navTwo(item.paths, index)">
<image :src="item.icon" mode="aspectFit" style="width: 77rpx;height: 77rpx;">
</image>
<view class="title">{{ item.name }}</view>
</view>
</block>
</view>
-->
</view>
</view>
</template>
<script>
import {
getList
} from "@/api/logistics.js";
import {
Toast
} from "@/libs/uniApi.js";
import {
oaHomeData
} from "@/static/server/server.js";
import {
noticeList
} from "@/api/notice.js";
import {
getAreaManagerApi
} from "@/api/bussness.js"
// import tabbar from '../components/tabbar'
import {
getIndexListAPI,
getTaskListAPI,
getMyTaskListAPI,
getApproveListAPI,
getUserIndexAPI,
} from "@/api/oaApi.js";
import {
mapState
} from 'vuex';
import bj from "@/static/animation/home.json"
import {
userInfo
} from "@/api/oaUser.js"
//#ifdef APP-PLUS
var jpushModule = uni.requireNativePlugin("JG-JPush");
// #endif
export default {
data() {
return {
brange: 0,
options: {
data: '',
},
status: "loadmore",
page_num: 1,
flag: false,
uniMP: false,
managerInfo: {},
id: "",
is_captain: 0,
notArr: [],
orderList: [],
oaHomeData: [],
src: "https://cdn.uviewui.com/uview/album/1.jpg",
assessData: [{
num: "0",
name: "任务",
},
{
num: "0",
name: "已完成",
},
{
num: "0",
name: "未完成",
},
{
num: "0%",
name: "完成率",
},
],
project: {},
task: {},
page: 1,
myTaskList: [],
flowState: "#47B347", // 任务状态
priority: "", // 任务紧急度
myOaInfo: {
avatar: "",
nickname: "",
mobile: "",
did_name: "",
label_name: "",
},
ApproveList: [],
showOaHomeData: false, //更新首页计算的值
};
},
async onLoad() {
// console.log('asdashg')
if (uni.getStorageSync('USER_INFO')) {
let userData = JSON.parse(uni.getStorageSync('USER_INFO'))
this.initUserInfo(userData);
// console.log(545)
}
await this.$onLaunched;
this.is_captain = JSON.parse(uni.getStorageSync("USER_INFO") || '{}')?.is_captain
this.options.data = bj;
},
async onShow() {
await this.$onLaunched;
if (uni.getStorageSync('uniMP')) this.uniMP = true;
userInfo().then(({
data
}) => {
this.$store.commit('setUserInfo', data);
this.initUserInfo(data);
this.$store.dispatch('initConfig');
// console.log('更新信息', data);
});
this.initUserInfo();
// console.log(this.oaHomeData, this.oaHomeData.length==0);
if (this.oaHomeData.length == 0) {
this.$nextTick(() => {
this.$store.dispatch('initConfig');
})
}
},
computed: {
// oaHomeData() {
// const route = '/pages/oaHome/oaHome';
// let arr = [];
// this.$store.state.config?.config?.menu?.forEach((item) => {
// if (item.paths.includes(route)) {
// arr = item.children;
// }
// })
// if (arr.length >= 8) {
// arr = arr.slice(0, 7);
// let obj = this.$store.state.config?.config?.menu?.find(item => item.paths.includes(
// '/pages/moreFun/moreFun'));
// arr.push(obj);
// }
// return arr;
// },
},
watch: {
'$store.state.app.token': {
handler: function(n, o) {
userInfo().then(({
data
}) => {
// console.log(data);
this.$store.commit('setUserInfo', data);
this.initUserInfo(data);
this.$store.dispatch('initConfig');
});
}
},
'$store.state.config.config.menu': {
immediate: true,
deep: true,
handler: function(n, o) {
const route = '/pages/oaHome/oaHome';
let arr = [];
n.forEach((item) => {
if (item.paths.includes(route)) {
arr = item.children;
}
})
if (arr.length >= 8) {
arr = arr.slice(0, 7);
let obj = n.find(item => item.paths.includes(
'/pages/moreFun/moreFun'));
arr.push(obj);
}
this.oaHomeData = arr;
}
}
},
methods: {
leftClick(e) {
console.log("发送给宿主")
uni.sendHostEvent('closeApp', e, (ret) => {
//发送消息成功回调
console.log('关闭应用' + JSON.stringify(ret));
});
},
initUserInfo(data = null) {
if (data) return this.myOaInfo = data;
this.$store.state.app.userInfo ?
(this.myOaInfo = this.$store.state.app.userInfo) :
(this.myOaInfo.avatar = "");
},
navTo(url) {
if (url) {
uni.showLoading({
title: '加载中',
mask: true
});
uni.navigateTo({
url: url,
success() {
uni.hideLoading()
},
fail() {
uni.switchTab({
url: url,
success() {
uni.hideLoading()
},
fail() {
uni.hideLoading()
}
});
},
})
} else Toast('暂未开放')
},
navTwo(url, key) {
// let role_id = this.$store.state.app?.userInfo?.admin?.role_id || null;
// var arr = [3, 6];
// if (role_id && role_id[0] == 9) {
// if (arr.indexOf(key) == -1) {
// Toast("请先成立公司后开放");
// return false;
// }
// }
this.navTo(url);
},
// 点击公告
clickNotice(e) {
uni.navigateTo({
url: `/pages/oaNews/oaNews?id=${e}`,
});
},
async getUserIndex() {
const res = await getUserIndexAPI();
this.myOaInfo = res;
},
},
async onPullDownRefresh() {
await this.$store.dispatch('initConfig');
uni.stopPullDownRefresh();
},
};
</script>
<style lang="scss">
.box {
min-height: 100vh;
background-color: #F9FBFF;
}
.head {
width: 750rpx;
background-image: url('/static/newWork/index/SYBG.png');
background-size: 100% 100%;
height: 309.78rpx;
font-size: 30rpx;
font-weight: bold;
color: #2B63E2;
position: relative;
.head-content {
// box-shadow: 0.5rpx 0.5rpx 100rpx 0.5rpx rgba(0, 0, 0, 0.1);
width: 690rpx;
margin: 0 auto;
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
padding: 0 30rpx;
box-sizing: border-box;
align-items: center;
height: 137rpx;
background-image: linear-gradient(to bottom, #D8EAFF 30%, #FFFFFF 100%);
border-radius: 64rpx 64rpx 64rpx 64rpx;
.avatar {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -50rpx;
}
}
}
.deposit {
margin-top: 30rpx;
display: flex;
width: 750rpx;
justify-content: space-between;
box-sizing: border-box;
padding: 0 20rpx;
.deposit-l {
width: 300rpx;
height: 120rpx;
background-color: white;
margin: 0 20rpx;
border-radius: 10rpx;
display: flex;
font-size: 30rpx;
box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);
.deposit-value {
color: #336AE7;
}
}
}
// .oa_home {
// padding-bottom: 100rpx;
// }
// .header_bg {
// position: absolute;
// width: 100%;
// }
// .home_header {
// position: relative;
// padding: 28rpx;
// width: 100%;
// margin-bottom: 110rpx;
// background-color: $theme-oa-color;
// border-radius: 0 0 30rpx 30rpx;
// .head_img {
// position: relative;
// background-color: #ff7c32;
// width: 100%;
// height: 105.14rpx;
// line-height: 105.14rpx;
// border-radius: 35.05rpx 35.05rpx 35.05rpx 35.05rpx;
// display: flex;
// justify-content: space-between;
// padding-right: 28rpx;
// color: white;
// font-size: 34rpx;
// padding-left: 150rpx;
// box-sizing: border-box;
// .img_box {
// position: absolute;
// left: -10rpx;
// top: -15rpx;
// width: 140rpx;
// height: 140rpx;
// background-color: white;
// border-radius: 140rpx;
// .img_box_img {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
// .head_text {
// font-size: 33rpx;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// }
// // font-we
// }
// .my_info {
// .mesg_box {
// color: #fff;
// margin-left: 31.58rpx;
// .nickname {
// font-size: 32rpx;
// font-weight: 500;
// margin-right: 30rpx;
// }
// .duty {
// margin-top: 10.53rpx;
// }
// }
// }
// .task_panel {
// color: #fff;
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
// align-content: space-between;
// text-align: center;
// padding-bottom: 110rpx;
// .task_item {
// margin-top: 42.11rpx;
// .plan {
// width: 173.68rpx;
// font-size: 38.6rpx;
// margin-bottom: 21.05rpx;
// }
// }
// }
// .backlog {
// position: absolute;
// left: 50%;
// bottom: -101.75rpx;
// transform: translate(-50%);
// width: 694.74rpx;
// background: #ffffff;
// border-radius: 12px;
// padding: 28.07rpx;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// font-size: 25rpx;
// font-weight: 400;
// .title {
// font-size: 32rpx;
// font-weight: 500;
// }
// &_item {
// margin-top: 19.3rpx;
// color: #666666;
// .text {
// font-size: 28.04rpx;
// white-space: nowrap;
// /* 禁止换行 */
// overflow: hidden;
// /* 溢出隐藏 */
// text-overflow: ellipsis;
// /* 使用省略号代表被截断的文本 */
// width: 580rpx;
// /* 设置元素宽度,根据需要进行调整 */
// .text_time {
// display: inline-block;
// background-color: #ff7c32;
// color: white;
// padding: 5rpx 10rpx;
// margin-right: 10rpx;
// border-radius: 15rpx;
// }
// // &::before {
// // content: "公告";
// // display: inline-block;
// // color: #ff8c1a;
// // padding: 2px 8px;
// // border-radius: 4px;
// // border: 1px solid #ff8c1a;
// // margin-right: 14.04rpx;
// // }
// }
// }
// &_no {
// margin-top: 19.3rpx;
// color: #666666;
// .text {
// font-size: 28.04rpx;
// white-space: nowrap;
// /* 禁止换行 */
// overflow: hidden;
// /* 溢出隐藏 */
// text-overflow: ellipsis;
// /* 使用省略号代表被截断的文本 */
// width: 580rpx;
// /* 设置元素宽度,根据需要进行调整 */
// &::before {
// content: none;
// }
// }
// }
// }
// }
// .home_header_no_data {
// margin-bottom: 93.33rpx;
// }
// .fast_track {
// width: 694rpx;
// // height: 331rpx;
// display: flex;
// flex-wrap: wrap;
// justify-content: left;
// align-content: space-between;
// margin: 0 auto;
// padding: 15rpx 38.6rpx;
// background-color: #fff;
// border-radius: 12px;
// .track_item {
// width: 154.39rpx;
// font-size: 24.56rpx;
// margin: 25rpx 0;
// display: flex;
// flex-direction: column;
// align-items: center;
// .title {
// margin-top: 14.04rpx;
// }
// }
// }
// .my_task {
// width: 694.74rpx;
// margin: 0 auto;
// // margin-top: 31.58rpx;
// // background-color: #fff;
// border-radius: 12px;
// // padding: 28.07rpx;
// .no_task {
// width: 694rpx;
// height: 140rpx;
// padding: 28rpx;
// background: #ffffff;
// border-radius: 21rpx 21rpx 21rpx 21rpx;
// display: flex;
// flex-direction: column;
// justify-content: space-evenly;
// .title {
// font-size: 28rpx;
// font-weight: 500;
// color: #000000cc;
// line-height: 35rpx;
// }
// .tips {
// font-size: 25rpx;
// font-weight: 400;
// color: #333333ff;
// line-height: 35rpx;
// }
// }
// .task_title {
// font-size: 25rpx;
// font-weight: 400;
// padding: 28rpx;
// .title {
// font-size: 32rpx;
// font-weight: 500;
// }
// }
// .task_list {
// height: 196.49rpx;
// border-bottom: 1px solid #cccccc;
// padding: 21.05rpx 0;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// .title {
// .tag {
// color: #f24848;
// font-size: 24.56rpx;
// padding: 0 7.02rpx;
// margin-right: 14.04rpx;
// background: #ffe4e4;
// border-radius: 4px;
// }
// .tag1 {
// color: #3274f9;
// font-size: 24.56rpx;
// padding: 0 7.02rpx;
// margin-right: 14.04rpx;
// background: #e4edff;
// border-radius: 4px;
// }
// .text {
// font-size: 28.07rpx;
// width: 403.51rpx;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
// .if_take {
// font-size: 28.07rpx;
// text-align: center;
// line-height: 49.12rpx;
// width: 115.79rpx;
// height: 49.12rpx;
// border-radius: 100px;
// }
// .take1 {
// color: #47b347;
// background: #dffcdf;
// }
// .take2 {
// color: #3274f9;
// background: #e4edff;
// }
// .take3 {
// color: #999999;
// background: #f5f5f5;
// }
// }
// .describe {
// font-size: 24.56rpx;
// }
// .task_deta {
// color: #999;
// font-size: 24.56rpx;
// }
// }
// }
// .no_login {
// position: fixed;
// left: 0;
// bottom: 0;
// width: 100vw;
// height: 112rpx;
// /* #ifdef H5 */
// height: 212rpx;
// /* #endif */
// background: rgba(#333333, 0.4);
// border-radius: 14rpx 14rpx 0rpx 0rpx;
// padding: 28rpx 28rpx;
// .view {
// width: 100%;
// display: flex;
// justify-content: space-between;
// align-items: center;
// .text {
// font-size: 28rpx;
// font-weight: 500;
// color: #ffffff;
// }
// .btn {
// width: 158rpx;
// height: 60rpx;
// background: #3274f9;
// border-radius: 30rpx 30rpx 30rpx 30rpx;
// font-size: 28rpx;
// font-weight: 500;
// color: #ffffff;
// display: flex;
// justify-content: center;
// align-items: center;
// }
// }
// }
// .chat {
// margin-top: 1000px;
// // margin-top: 2000rpx;
// width: 694.74rpx;
// margin: 0 auto;
// background-color: white;
// border-radius: 12px;
// padding: 20rpx;
// // padding-top: 10rpx;
// padding-right: 24rpx;
// display: flex;
// justify-content: space-between;
// align-items: center;
// .chat-l {
// display: flex;
// align-items: center;
// }
// }
// .brange {
// color: white;
// background-color: red;
// width: 40rpx;
// height: 40rpx;
// border-radius: 40rpx;
// font-size: 12px;
// text-align: center;
// lighting-color: 40rpx;
// }
</style>