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">
			<view @tap="goDetail(item.id)" class="li mar-x20 animated fadeIn" v-for="(item,index) in recentlyQuery" :key="index">
				<view class="li-content">
					<view class="">
						<view class="title">{{item.name}}</view>
						<view class="code">编号：{{item.serial_number}}</view>
					</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: [],
                dataList: [{
                        title: "客户查询",
                    },
                    {
                        title: "项目查询",
                    },
                    {
                        title: "备品查询",
                    },
                ],
                key_word: '', // 关键词
				list_rows: 10,
				page:1
            }
        },
        onLoad(op) {
            if (op.index != undefined) this.dataIndex = op.index;
			this.getData();
        },
        methods: {
            // 查询类型切换
            navIndex(index) {
                this.dataIndex = index
            },
            // 获取最新客户
            getData(){
				let params = {
					type_id:1,
					keyword:this.key_word,
					list_rows:this.list_rows,
					page:this.page
				}
                this.$requst.get('/universal/api.search/search',params).then(res=>{
					console.log(res,'最新客户')
                	if(res.code) {
                		res.data.forEach(item=>{
                			let obj = {
                				id:item.member_id,
								name:item.name,
                				serial_number:item.serial_number
                			}
                			this.recentlyQuery.push(obj);
                		})
                	}
                })
            },
            // 查询事件
            checkEv(index) {
                let urls = [
                    '/pagesA/dataQuery/client',
                    '/pagesA/dataQuery/projectQuery',
                    '/pagesA/dataQuery/dataQuery'
                ]
                uni.navigateTo({
                    url: `${urls[index]}?key_word=${this.key_word}`
                })
            },
           // 最近查询跳转
            goDetail(id) {
                uni.navigateTo({
					url: `/pagesA/dataQuery/details?id=${id}`
				})
            },

        }
    }
</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{
		width: 676rpx;
		margin: 0 auto;
	}
	
	.recently-query-content .li {
		background-color: #FFFFFF;
		padding: 32rpx;
		border-radius: 15rpx;
	}
	
	.recently-query-content .li .title {
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 25rpx;
	}
	
	.recently-query-content .li .code {
		font-size: 24rpx;
		color: #666666;
	}
	
	.recently-query-content .li .label-content {
		display: flex;
		padding-bottom: 22rpx;
	}
	
	.recently-query-content .li .label-content .label {
		padding: 10rpx 30rpx;
		background-color: #EDEDED;
		margin-right: 12rpx;
		color: #999999;
		font-size: 24rpx;
		border-radius: 5rpx;
		margin-top: 10rpx;
	}
	
	.recently-query-content .li .li-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.recently-query-content .li .li-content .icon {
		width: 71rpx;
		height: 66rpx;
		background-color: #00A2E9;
		box-shadow: -5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	
	.recently-query-content .li .address {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		color: #666666;
		font-size: 24rpx
	}
	
	.recently-query-content .li .address .img {
		width: 17rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
</style>