SmartStorage/pages/index/index.vue

<template>
    <view>
        <view class="upper-user">
            <view class="user-lef">
                <image src="/static/bg1.jpg" mode=""></image>
            </view>
            <view class="user-rig">
                <view>你好！{{ username }}</view>
                <view>欢迎使用智慧仓储（装备共享平台）</view>
            </view>
        </view>
        <view class="sliders">
            <view>
                <h2>{{ todayDatas.dayLeaseNum }}</h2>
                <span>当日领料</span>
            </view>
            <view>
                <h2>{{ todayDatas.dayBackNum }}</h2>
                <span>当日退料</span>
            </view>
            <view>
                <h2>{{ todayDatas.dayInputNum }}</h2>
                <span>当日入库</span>
            </view>
            <view>
                <h2>{{ todayDatas.dayOutNum }}</h2>
                <span>当日出库</span>
            </view>
        </view>
        <view class="sections">
            <view
                v-for="(part, index) in isUsingList"
                :key="index"
                @click="jumpUrl(part.iconMark)">
                <image :src="`/static/${part.iconMark}.png`" mode=""></image>
                <span>{{ part.iconName }}</span>
            </view>
            <!-- <view @click="jumpUrl('fetchMaterial')">
				<image src="/static/领料申请.png" mode=""></image>
				<span>领料申请</span>
			</view>
			<view @click="jumpUrl('exitMaterial')">
				<image src="/static/退料申请.png" mode=""></image>
				<span>退料申请</span>
			</view> -->
        </view>
        <h4 style="width: 90%; margin: 3vh auto">待办事项</h4>
        <view class="wait-do">
            <view
                class="llsp"
                @click="jumpUrl('fetchExam')"
                v-if="
                    store.includes('picking:auditing:fgs') ||
                    store.includes('*:*:*') ||
                    store.includes('picking:auditing:sgb') ||
                    store.includes('picking:auditing:jjnb') ||
                    store.includes('picking:auditing:tsnb')
                ">
                <h4>{{ waitList.leaseNum }}</h4>
                <h5>领料待审批</h5>
            </view>
            <view
                class="tlsp"
                @click="jumpUrl('exitExam')"
                v-if="
                    store.includes('return:auditing:auditing') ||
                    store.includes('*:*:*') ||
                    store.includes('return:auditing:auditing:batch')
                ">
                <h4>{{ waitList.backNum }}</h4>
                <h5>退料待审批</h5>
            </view>
            <view
                class="bfsh"
                @click="jumpUrl('crashExam')"
                v-if="
                    store.includes('service:auditing') ||
                    store.includes('*:*:*') ||
                    store.includes('service:batch:auditing')
                ">
                <h4>{{ waitList.scrapNum }}</h4>
                <h5>报废待审核</h5>
            </view>
            <view
                class="sysh"
                @click="jumpUrl('testExam')"
                v-if="
                    store.includes('scrap:auditing') || store.includes('*:*:*')
                ">
                <h4>{{ waitList.trialNum }}</h4>
                <h5>试验检验待审核</h5>
            </view>
        </view>
        <h4
            style="
                width: 90%;
                margin: 3vh auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
            ">
            <span>通知公告</span>
            <text
                @click="seeMore"
                style="color: #5297ff; font-weight: normal; font-size: 12px"
                >查看更多>></text
            >
        </h4>
        <view
            class="single-notice"
            v-for="(notice, index) in noticeList"
            :key="index"
            @click="noticeDetail(notice.noticeId)">
            <view class="notice-lef">
                <image src="/static/notice.png" mode=""></image>
            </view>
            <view class="notice-rig">
                <h4>{{ notice.noticeTitle }}</h4>
                <h5>{{ notice.createTime }}</h5>
            </view>
        </view>
        <uni-popup ref="popup" type="center" :mask-click="false">
            <view class="popup">
                <view class="pop-top">
                    <h4>公告({{ unreadIndex + 1 }}/{{ unreadList.length }})</h4>
                    <uni-icons
                        style="color: #aaaaaa; font-weight: bold"
                        type="closeempty"
                        @click="closePopup">
                    </uni-icons>
                </view>
                <view
                    class="unread-notice"
                    v-for="(list, index) in unreadList"
                    :key="index"
                    v-show="index == unreadIndex">
                    <view class="tit">
                        {{ list.noticeTitle }}
                    </view>
                    <view class="info">
                        <view>发布人：{{ list.createBy }}</view>
                        <view>发布时间：{{ list.createTime }}</view>
                        <view>公告内容：{{ list.noticeContent }}</view>
                    </view>
                    <view
                        class="read-one"
                        v-show="unreadIndex < unreadList.length - 1"
                        @click="readOneNotice(list.noticeId)">
                        我知道了
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import store from "../../store/user";
    export default {
        data() {
            return {
                showLoading: false,
                username: uni.getStorageSync("userInfo").username,
                noticeList: [],
                todayDatas: {
                    dayLeaseNum: "",
                    dayBackNum: "",
                    dayInputNum: "",
                    dayOutNum: "",
                },
                waitList: {
                    lldsp: "",
                    tldsp: "",
                    bfdsh: "",
                    sydsh: "",
                },
                isUsingList: [],
                percent: "",
                unreadList: [],
                unreadIndex: 0,
                store: store.state.permissions || [],
            };
        },
        methods: {
            seeMore() {
                uni.navigateTo({
                    url: "/pages/moreNotice/moreNotice",
                });
            },
            noticeDetail(id) {
                console.log(id);
                uni.navigateTo({
                    url: `/pages/noticeDetail/noticeDetail?noticeId=${id}`,
                });
            },
            jumpUrl(path) {
                uni.navigateTo({
                    url: `/pages/${path}/${path}`,
                });
            },
            extractTextFromHTML(htmlString) {
                return htmlString.replace(/<[^>]*>/g, "");
            },
            openPopup() {
                this.$refs.popup.open();
            },
            closePopup() {
                let that = this;
                let noticeArr = [];
                that.unreadList.forEach((item) => {
                    noticeArr.push(item.noticeId);
                });
                console.log(noticeArr);
                that.uploadUnNotice(noticeArr);
                that.$refs.popup.close();
            },
            readOneNotice(noticeId) {
                let that = this;
                let noticeArr = [];
                noticeArr.push(noticeId);
                that.uploadUnNotice(noticeArr);
                that.unreadIndex++;
            },
            uploadUnNotice(arr) {
                let that = this;
                that.$api.index
                    .uploadNotice({
                        noticeId: arr,
                        userId: uni.getStorageSync("userInfo").userid,
                    })
                    .then((res) => {
                        console.log(res);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
        },
        onShow() {
            console.log(uni.getStorageSync("token"));
            console.log(uni.getStorageSync("userInfo"));
            let that = this;
            that.unreadIndex = 0;
            that.noticeList = [];
            // 获取公告内容
            that.$api.index
                .noticeCont()
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        that.noticeList = res.data.data.slice(0, 5);
                    } else if (res.data.code == 401) {
                        uni.showToast({
                            icon: "none",
                            title: "登录状态已过期，请重新登录！",
                            success: () => {
                                uni.removeStorageSync("token");
                                uni.removeStorageSync("userInfo");
                                uni.reLaunch({
                                    url: "/pages/login/login",
                                });
                            },
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            // 获取待办事项
            that.$api.index
                .waitDo()
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        that.waitList = res.data.data;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            // 获取关键数据
            that.$api.index
                .keyData()
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        that.todayDatas = res.data.data;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            // 获取已用模块
            that.$api.authManage
                .fetchIsUsing({
                    userId: uni.getStorageSync("userInfo").userid,
                })
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        that.isUsingList = res.data.data;
                        console.log(
                            "已用模块",
                            uni.getStorageSync("userInfo").userid,
                            that.isUsingList
                        );
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            // 获取公司名称
            let dept = uni.getStorageSync("userInfo").sysUser.dept.ancestors;
            if (dept == null) {
                uni.setStorageSync("companyName", "");
            } else {
                that.$api.index
                    .fetchCompanyName({
                        ancestors: dept,
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200)
                            uni.setStorageSync("companyName", res.data.msg);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
            // 获取通知公告
            that.$api.index
                .fetchNotice()
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        if (res.data.data.length != 0) {
                            res.data.data.forEach((item) => {
                                item.noticeContent = that.extractTextFromHTML(
                                    item.noticeContent
                                );
                            });
                            that.unreadList = res.data.data;
                            console.log(that.unreadList);
                            that.openPopup();
                        } else {
                            console.log("无未读公告");
                        }
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: res.data.msg,
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        onNavigationBarButtonTap(e) {
            console.log(e);
            if (e.text == "权限") {
                uni.navigateTo({
                    url: "/pages/authManage/authManage",
                });
            } else if (e.text == "扫一扫") {
                uni.scanCode({
                    success: (res) => {
                        console.log(res);
                        const fixedRes = res.result.split("=")[1];
                        console.log(fixedRes);
                        uni.navigateTo({
                            url: `/pages/indexScan/indexScan?scan=${fixedRes}`,
                        });
                    },
                });
            }
        },
    };
</script>

<style lang="scss">
    body {
        background: url("/static/bgd.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .upper-user {
        width: 85%;
        margin: 8vh auto;
        margin-bottom: 0;
        box-sizing: border-box;
        padding: 15rpx;
        display: flex;
        .user-lef {
            width: 15%;
            height: 6vh;
            border-radius: 50%;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .user-rig {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            box-sizing: border-box;
            padding-left: 20rpx;
            view {
                width: 100%;
                color: #fff;
            }
            view:first-child {
                font-size: 18px;
            }
            view:last-child {
                font-size: 12px;
                letter-spacing: 6rpx;
            }
        }
    }
    .sliders {
        width: 85%;
        height: 5vh;
        margin: 4vh auto;
        margin-bottom: 2vh;
        border-radius: 15rpx 15rpx 0 0;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(2px);
        border: 1px solid #b3d3ff;
        padding: 1.3vh 0;
        display: flex;
        view {
            width: 25%;
            height: 100%;
            border-right: 1px solid #cde2ff;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            color: #fff;
            h2 {
                font-size: 22px;
            }
            span {
                font-size: 12px;
            }
        }
        view:last-child {
            border-right: none;
        }
    }
    .sections {
        width: 90%;
        margin: 15rpx auto;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding-top: 2vh;
        view {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 2vh;
            image {
                width: 50%;
                height: 6vh;
                margin-bottom: 10rpx;
            }
            span {
                font-size: 20rpx;
            }
        }
    }
    .wait-do {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        view {
            width: 48%;
            height: 13vh;
            margin-bottom: 15rpx;
            border-radius: 15rpx;
            box-sizing: border-box;
            padding: 25rpx;
            h4 {
                margin-bottom: 5rpx;
                font-size: 22px;
            }
            h5 {
                font-weight: normal;
                font-size: 14px;
            }
        }
        .llsp {
            background: url("/static/llsp.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .tlsp {
            background: url("/static/tlsp.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .bfsh {
            background: url("/static/bfsh.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .sysh {
            background: url("/static/sysh.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
    .single-notice {
        width: 100%;
        margin: 0 auto;
        border-bottom: 1px solid #dee3ea;
        box-sizing: border-box;
        padding: 20rpx 5%;
        display: flex;
        background-color: #fff;
        .notice-lef {
            width: 12%;
            height: 5.5vh;
            border-radius: 50%;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .notice-rig {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            box-sizing: border-box;
            padding-left: 20rpx;
            h4 {
                font-size: 14px;
            }
            h5 {
                font-size: 12px;
                color: #8f9298;
                font-weight: normal;
            }
        }
    }
    .popup {
        width: 80vw;
        height: 90vh;
        background-color: #fff;
        border-radius: 15rpx;
        overflow-y: auto;
        background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
        .pop-top {
            width: 100%;
            height: 5vh;
            box-sizing: border-box;
            padding: 0 25rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .unread-notice {
            width: 85%;
            margin: 40rpx auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            .tit {
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 20rpx;
            }
            .info {
                width: 100%;
                view {
                    margin-bottom: 15rpx;
                }
                view:last-child {
                    margin-bottom: 0;
                }
            }
            .read-one {
                width: 40%;
                margin: 40rpx auto;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                border-radius: 15rpx;
                padding: 10rpx 0;
                background-color: #3788ff;
                color: #fff;
            }
        }
    }
</style>