OfficeApp/pages/oaHome/oaHome.vue
2024-01-15 18:44:47 +08:00

990 lines
21 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="" style="float: right;margin-top: 20rpx;">
<Myindex url='/pages/index/index' />
</view>
<view class="head-content ">
<view class="identity">
工作证{{ 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="identity">
身份{{ 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="" style="margin-left:20rpx ;">
<view class="">
押金
</view>
<view class="deposit-value">
{{myOaInfo.deposit}}
</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="" style="margin-left:20rpx ;">
<view class="">
管理户数
</view>
<view class="deposit-value">
{{myOaInfo.user_information_count}}
</view>
</view>
</view>
<!-- <view class="deposit-l">
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/ZCYHS.png'"
shape="circle"></u--image>
<view class="" style="margin-left:20rpx ;">
<view class="">
注册用户数
</view>
<view class="deposit-value">
{{myOaInfo.register_num}}
</view>
</view>
</view> -->
<!-- <view class="deposit-l">
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/RZSHS.png'"
shape="circle"></u--image>
<view class="" style="margin-left:20rpx ;">
<view class="">
入驻商户数
</view>
<view class="deposit-value">
{{myOaInfo.merchant_num }}
</view>
</view>
</view> -->
<!-- <view class="deposit-l">
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/JYJE.png'"
shape="circle"></u--image>
<view class="" style="margin-left:20rpx ;">
<view class="">
交易金额
</view>
<view class="deposit-value">
{{myOaInfo.trade_amount }}
</view>
</view>
</view> -->
<view class="deposit-l">
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/YQM.png'"
shape="circle"></u--image>
<view class="" style="margin-left:20rpx ;">
<view class="">
邀请码
</view>
<view class="deposit-value">
{{myOaInfo.invite_code}}
</view>
</view>
</view>
</view>
<!--追加功能 -->
<view class="">
<u-empty icon="/static/newWork/index/empty.png" iconSize='200' width='300' height="300" marginTop='50'
textColor='#BFD7FF' 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 Myindex from '@/components/return/index.vue';
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 {
getTradeTaskInfo
} from "@/api/newTask.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 {
components: {
Myindex
},
data() {
return {
brange: 0,
options: {
data: '',
},
status: "loadmore",
page_num: 1,
flag: false,
uniMP: false,
managerInfo: {},
id: "",
is_captain: 0,
notArr: [],
orderList: [],
oaHomeData: [],
taskInfo: {},
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, //更新首页计算的值
chartData: {},
progress: 0,
//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
opts: {
title: {
fontSize: 16,
color: "#2fc25b"
},
subtitle: {
name: "",
fontSize: 12,
color: "#666666"
},
extra: {
arcbar: {
type: "circle",
width: 12,
backgroundColor: "#E9E9E9",
startAngle: 1.5,
endAngle: 0.25,
gap: 2
}
}
}
};
},
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 >= 7) {
arr = arr.slice(0, 3);
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 = "");
console.log(this.myOaInfo, 24545)
},
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();
console.log(res, "res")
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: 378.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: 128rpx;
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: -160rpx;
}
.identity {
max-width: 250rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.deposit {
margin-top: 40rpx;
display: flex;
width: 750rpx;
justify-content: space-between;
flex-wrap: wrap;
box-sizing: border-box;
padding: 0 30rpx;
.deposit-l {
width: 335rpx;
height: 128rpx;
background-color: white;
border-radius: 20rpx;
display: flex;
font-size: 30rpx;
box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);
box-sizing: border-box;
padding: 30rpx 29rpx;
font-weight: 500;
margin-bottom: 20rpx;
.deposit-value {
color: #336AE7;
margin-top: 5rpx;
}
}
}
// .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>