flying-monkey/pagesA/dataQuery/queryFunction.vue

<template>
    <view>
        <view class="head">
            <view class="text">查询功能</view>
        </view>
        <view class="queryFunction-head-content">
            <view class="queryFunction-head-nav">
                <view class="li" @click="navIndex(index)"
                    :class="[dataIndex==0?'li1':'',dataIndex==1?'li2':'',dataIndex==2?'li3':'' ]"
                    v-for="(item,index) in dataList" :key="index">
                    {{item.title}}
                </view>
            </view>
            <view class="queryFunction-head-Fun">
                <input type="text" v-model="key_word" placeholder="请输入关键词进行查询" class="queryFunction-head-input" value="" />
                <view @tap="checkEv(dataIndex)" class="button">查询</view>
            </view>
        </view>
        <view class="recently-query-title">最近查询</view>
        <view class="recently-query-content" v-for="(item,index) in recentlyQuery ">
            <view class="li" @click="goDetail()">
                <image class="icon" src="../../static/iocn/jfd.png" mode="widthFix"></image>
                <view class="text-content">
                    <view class="title clips1">{{item.name}}</view>
                    <view class="text">编号：{{item.code}}</view>
                    <view class="text">{{item.date}}</view>
                </view>
            </view>
        </view>
        <view class="imgJCon">
            <image class="imgJ" src="../../static/iocn/jh.png" mode=""></image>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataIndex: 0,
                recentlyQuery: [],
                customerQuery: [{
                        name: "湖南争鸣光电科技有限公司",
                        code: "FRID23123141123321124",
                        date: "2121-1-8 12:23",
                        img: "../../static/iocn/jfd.png"
                    },
                    {
                        name: "湖南争鸣光电科技有限公司a",
                        code: "FRID23123141123321124",
                        date: "2121-1-8 12:23",
                        img: "../../static/iocn/jfd.png"
                    },
                    {
                        name: "湖南争鸣光电科技有限公司b",
                        code: "FRID23123141123321124",
                        date: "2121-1-8 12:23",
                        img: "../../static/iocn/jfd.png"
                    },
                    {
                        name: "湖南争鸣光电科技有限公司c",
                        code: "FRID23123141123321124",
                        date: "2121-1-8 12:23",
                        img: "../../static/iocn/jfd.png"
                    }
                ],
                projectQuery: [

                    {
                        name: "湖南工业大学化工学院会议室P2.5全彩LED显示屏",
                        img: "../../static/del/img001.png",
                        code: "20220108-1001",
                        model: "DS-CK25FI/H",
                        size: "3.94ｍ*2.02ｍ",
                        installationSite: "xxx综合楼2楼会议室",
                        address: "湖南省长沙市高新开发区谷园路109号像素大厦1205",
                        date: "2022/01/08",
                        state: 1

                    },
                    {
                        name: "湖南工业大学化工学院会议室P2.5全彩LED显示屏",
                        img: "../../static/del/img001.png",
                        code: "20220108-1001",
                        model: "DS-CK25FI/H",
                        size: "3.94ｍ*2.02ｍ",
                        installationSite: "xxx综合楼2楼会议室",
                        address: "湖南省长沙市高新开发区谷园路109号像素大厦1205",
                        date: "2022/01/08",
                        state: 2

                    },
                    {
                        name: "湖南工业大学化工学院会议室P2.5全彩LED显示屏",
                        img: "../../static/del/img001.png",
                        code: "20220108-1001",
                        model: "DS-CK25FI/H",
                        size: "3.94ｍ*2.02ｍ",
                        installationSite: "xxx综合楼2楼会议室",
                        address: "湖南省长沙市高新开发区谷园路109号像素大厦1205",
                        date: "2022/01/08",
                        state: 2

                    },
                    {
                        name: "湖南工业大学化工学院会议室P2.5全彩LED显示屏",
                        img: "../../static/del/img001.png",
                        code: "20220108-1001",
                        model: "DS-CK25FI/H",
                        size: "3.94ｍ*2.02ｍ",
                        installationSite: "xxx综合楼2楼会议室",
                        address: "湖南省长沙市高新开发区谷园路109号像素大厦1205",
                        date: "2022/01/08",
                        state: 1

                    },
                    {
                        name: "湖南工业大学化工学院会议室P2.5全彩LED显示屏",
                        img: "../../static/del/img001.png",
                        code: "20220108-1001",
                        model: "DS-CK25FI/H",
                        size: "3.94ｍ*2.02ｍ",
                        installationSite: "xxx综合楼2楼会议室",
                        address: "湖南省长沙市高新开发区谷园路109号像素大厦1205",
                        date: "2022/01/08",
                        state: 0

                    },

                ],
                spareQuery: [{
                        name: "湖南工业大学生化学院三楼会议室",
                        date: "2021-04-06 16:45:45"

                    },
                    {
                        name: "湖南工业大学生化学院三楼会议室",
                        date: "2021-04-06 16:45:45"

                    },
                    {
                        name: "湖南工业大学生化学院三楼会议室",
                        date: "2021-04-06 16:45:45"

                    },
                    {
                        name: "湖南工业大学生化学院三楼会议室",
                        date: "2021-04-06 16:45:45"

                    },
                ],
                dataList: [{
                        title: "客户查询",
                    },
                    {
                        title: "项目查询",
                    },
                    {
                        title: "备品查询",
                    },
                ],
                key_word: '', // 关键词
            }
        },
        onLoad(op) {
            if (op.index != undefined) this.dataIndex = op.index;
                  this.recentlyQuery = [...this.customerQuery]
        },
        methods: {
            // 查询类型切换
            navIndex(index) {
                this.dataIndex = index
                if (this.dataIndex == 0) {
                    this.recentlyQuery = [...this.customerQuery]
                } else if (this.dataIndex == 1) {
                    this.recentlyQuery = [...this.projectQuery]
                } else {
                    this.recentlyQuery = [...this.spareQuery]
                }

            },
            // 获取最近查询
            getData(){
                
            },
            // 查询事件
            checkEv(index) {
                let urls = [
                    '/pagesA/dataQuery/client',
                    '/pagesA/dataQuery/projectQuery',
                    '/pagesA/dataQuery/dataQuery'
                ]
                uni.navigateTo({
                    url: `${urls[index]}?key_word=${this.key_word}`
                })
            },
           // 最近查询跳转
            goDetail() {
                if (this.dataIndex == 1) {
                    uni.navigateTo({
                        url: "/pagesA/project/details"
                    })
                } else if (this.dataIndex == 0) {
                    uni.navigateTo({
                        url: '/pagesA/dataQuery/details'
                    })
                } else {
                 uni.navigateTo({
                     url: '/pagesA/dataQuery/dataQuery'
                 })
                }
            },

        }
    }
</script>

<style>
    .head {
        width: 100%;
        height: 344rpx;
        padding: 0 35rpx;
        padding-top: 107rpx;
        background-color: #00A2E9;
        box-sizing: border-box;

    }

    .head .text {
        font-size: 41rpx;
        color: #FFFFFF;
    }

    .queryFunction-head-content {
        width: 676rpx;
        height: 400rpx;
        background-color: #FFFFFF;
        margin: auto;
        border-radius: 15rpx;
        margin-top: -130rpx;
    }

    .queryFunction-head-nav {
        display: flex;
        border-radius: 15rpx 15rpx 0 0;
        overflow: hidden;
    }

    .queryFunction-head-nav .li {
        position: relative;
        width: 233rpx;
        color: #505050;
        height: 102rpx;
        background-color: #F5F5F5;
        display: flex;
        align-items: center;
        font-size: 35rpx;
        justify-content: center;
    }

    .typeActive {
        position: absolute;
        width: 30%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 6rpx;
        border-radius: 21%;
        background-color: #00A2E9;
    }

    .queryFunction-head-nav .li1:nth-child(2) {
        border-radius: 15rpx 0rpx 0rpx 15rpx;
    }

    .queryFunction-head-nav .li1:nth-child(1) {
        background-color: #FFFFFF;
    }

    .queryFunction-head-nav .li2:nth-child(2) {
        background-color: #FFFFFF;
    }

    .queryFunction-head-nav .li2:nth-child(1) {
        border-radius: 0rpx 15rpx 15rpx 0rpx;
    }

    .queryFunction-head-nav .li2:nth-child(3) {
        border-radius: 15rpx 0rpx 0rpx 15rpx;
    }

    .queryFunction-head-nav .li3:nth-child(2) {
        border-radius: 0rpx 15rpx 15rpx 0rpx;
    }

    .queryFunction-head-nav .li3:nth-child(3) {
        background-color: #FFFFFF;
    }

    .queryFunction-head-input {
        margin-top: 20rpx;
        height: 100rpx;
        width: 100%;
        border-bottom: 2rpx solid #eeeeee;

    }

    .queryFunction-head-Fun {
        padding: 0 32rpx;

    }

    .queryFunction-head-Fun .button {
        background-color: #00A2E9;
        border-radius: 15rpx;
        height: 80rpx;
        color: #FFFFFF;
        text-align: center;
        margin-top: 34rpx;
        line-height: 80rpx;
    }

    .recently-query-title {
        color: #040b26;
        font-weight: bold;
        padding: 50rpx 34rpx 44rpx;
    }

    .recently-query-content {
        padding: 0 34rpx;
        box-sizing: border-box;
    }

    .recently-query-content .li {
        width: 100%;
        height: 232rpx;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-radius: 15rpx;
        padding-top: 30rpx;
        padding-left: 40rpx;
        margin-bottom: 37rpx;
        display: flex;
    }

    .recently-query-content .li .icon {
        width: 37rpx;
        height: 37rpx;
        margin-right: 40rpx;
		margin-top: 8rpx;
    }

    .recently-query-content .li .text-content {
        flex: 1;
    }

    .recently-query-content .li .text-content .title {
        color: #30364c;
        font-size: 33rpx;
        margin-bottom: 25rpx;
        padding-right: 50rpx;
    }

    .recently-query-content .li .text-content .text {
        color: #b5b5b5;
        font-size: 27rpx;
        margin-bottom: 25rpx;
    }

    .imgJ {
        width: 40rpx;
        height: 40rpx;
        position: fixed;
        display: block;

        margin: auto;

    }

    .imgJCon {
        display: flex;
        justify-content: center;
        height: 40rpx;
        margin-top: 180rpx;
    }

    .project-list .li {
        width: 710rpx;
        box-sizing: border-box;
        background-color: #FFFFFF;
        position: relative;

        margin: auto;
        margin-bottom: 20rpx;
        padding: 33rpx 23rpx;
    }

    .project-list .li .icon {
        width: 135rpx;
        height: 40rpx;
        position: absolute;
        font-size: 24rpx;
        color: #FFFFFF;
        right: 23rpx;
        line-height: 40rpx;
        text-align: center;
        background-size: 100% 100%;
        top: -10rpx;


    }

    .project-list .li .iconBer {
        background-image: url(../../static/iocn/za.png);
    }

    .project-list .li .iconBera {
        background-image: url(../../static/iocn/zac.png);
    }

    .project-list .li .iconBerb {
        background-image: url(../../static/iocn/lsxm.png);
    }

    .project-list .li .message {
        display: flex;

    }

    .project-list .li .message .img {
        width: 230rpx;
        margin-right: 11rpx;
        height: 180rpx;

    }

    .project-list .li .message .text {
        flex: 1;
    }

    .project-list .li .message .text .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        margin-bottom: 15rpx;
        font-size: 28rpx;
        line-height: 30rpx;
        color: #333333;
        font-weight: bold;
    }

    .project-list .li .message .serial-number {
        color: #ff8800;
        font-size: 24rpx;
        margin-bottom: 15rpx;
        line-height: 24rpx;
    }

    .project-list .li .message .specification {
        color: #00b1ff;
        font-size: 24rpx;
        margin-bottom: 15rpx;
        line-height: 24rpx;
    }

    .project-list .li .message .installation-site {
        color: #6b6a6a;
        font-size: 24rpx;
        margin-bottom: 15rpx;
        line-height: 24rpx;
    }

    .project-list-address {
        display: flex;
        margin-top: 10rpx;
        /* justify-content: space-between; */
    }

    .project-list-address .text {
        font-size: 24rpx;
    }

    .project-list-address .date {
        font-size: 24rpx;
        text-align: right;
        margin-left: 20rpx;
        margin-top: 12rpx;
    }

    .project-list-address .img {
        width: 23rpx;
        height: 28rpx;
        margin-right: 10rpx;
    }

    .project-list-address .address {
        display: flex;
        color: #666666;
        align-items: center;

    }

    .dataQuery-content {
        font-size: 24rpx;
        color: #333333;
        margin-top: 15rpx;
    }

    .dataQuery-content .li {
        background-color: #FFFFFF;
        padding: 26rpx 28rpx;


        margin-bottom: 14rpx;
    }

    .dataQuery-content .li {
        position: relative;
    }

    .dataQuery-content .li .text-content {
        display: flex;
        border-bottom: 2rpx solid #EEEEEE;
        padding-bottom: 10rpx;

    }

    .dataQuery-content .li .text-content .left {
        width: 48%;
    }

    .dataQuery-content .li .text-content .text {
        margin-top: 20rpx;
    }

    .cor {
        color: #ff9000;
    }

    .cor1 {
        color: #999999;
    }

    .dataQuery-content .li .icon {
        background-image: url(../../static/iocn/zc.png);
        width: 125rpx;
        height: 91rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        background-size: 100%;
        padding-left: 30rpx;
        right: 20rpx;
        top: 20rpx;
        position: absolute;
    }

    .dataQuery-content .li .icon .icon-text {
        transform: rotateZ(20deg);
        color: #53e5d0;

    }

    .dataQuery-content .li .icon1 {
        background-image: url(../../static/iocn/dwx.png);
        width: 125rpx;
        height: 91rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        background-size: 100%;
        padding-left: 30rpx;
        right: 20rpx;
        top: 20rpx;
        position: absolute;
    }

    .dataQuery-content .li .icon1 .icon-text {
        transform: rotateZ(20deg);
        color: #ff0006;

    }
</style>