flying-monkey/pages/dataQuery/queryFunction.vue

588 lines
16 KiB
Vue
Raw Normal View History

2022-03-22 10:10:39 +00:00
<template>
<view>
<view class="head">
<view class="text">查询功能</view>
2022-03-22 10:10:39 +00:00
</view>
<view class="queryFunction-head-content">
<view class="queryFunction-head-nav">
2022-03-25 03:41:31 +00:00
<view class="li" @click="navIndex(index)"
:class="[dataIndex==0?'li1':'',dataIndex==1?'li2':'',dataIndex==2?'li3':'' ]"
v-for="(item,index) in dataList">
{{item.title}}
</view>
2022-03-22 10:10:39 +00:00
</view>
<view class="queryFunction-head-Fun">
2022-03-31 02:38:37 +00:00
<input type="text" v-model="key_word" placeholder="请输入关键词进行查询" class="queryFunction-head-input" value="" />
<view @tap="checkEv(dataIndex)" class="button">查询</view>
2022-03-22 10:10:39 +00:00
</view>
</view>
<view class="recently-query-title">最近查询</view>
2022-03-30 10:04:40 +00:00
<view class="recently-query-content" v-for="(item,index) in recentlyQuery ">
<view class="li" @click="goDetail()">
2022-03-25 03:41:31 +00:00
<image class="icon" src="../../static/iocn/jfd.png" mode=""></image>
<view class="text-content">
2022-03-30 10:04:40 +00:00
<view class="title clips1">{{item.name}}</view>
<view class="text">编号{{item.code}}</view>
<view class="text">{{item.date}}</view>
2022-03-25 03:41:31 +00:00
</view>
2022-03-22 10:10:39 +00:00
</view>
</view>
2022-03-25 10:33:33 +00:00
<view class="imgJCon">
<image class="imgJ" src="../../static/iocn/jh.png" mode=""></image>
</view>
2022-03-22 10:10:39 +00:00
</view>
</template>
<script>
2022-03-25 03:41:31 +00:00
export default {
data() {
return {
dataIndex: 0,
2022-03-30 10:04:40 +00:00
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"
},
],
2022-03-25 03:41:31 +00:00
dataList: [{
title: "客户查询",
},
{
title: "项目查询",
},
{
title: "备品查询",
},
],
key_word: '', // 关键词
}
},
onLoad(op) {
if (op.index != undefined) this.dataIndex = op.index;
2022-03-31 02:38:37 +00:00
this.recentlyQuery = [...this.customerQuery]
2022-03-25 03:41:31 +00:00
},
methods: {
// 查询类型切换
navIndex(index) {
this.dataIndex = index
2022-03-30 10:04:40 +00:00
if (this.dataIndex == 0) {
this.recentlyQuery = [...this.customerQuery]
} else if (this.dataIndex == 1) {
this.recentlyQuery = [...this.projectQuery]
} else {
this.recentlyQuery = [...this.spareQuery]
}
},
// 获取最近查询
getData(){
2022-03-25 03:41:31 +00:00
},
// 查询事件
checkEv(index) {
2022-03-30 10:04:40 +00:00
let urls = [
'/pages/dataQuery/client',
'/pages/dataQuery/projectQuery',
'/pages/dataQuery/dataQuery'
]
2022-03-31 02:38:37 +00:00
2022-03-30 10:04:40 +00:00
uni.navigateTo({
2022-04-13 12:36:32 +00:00
url: `${urls[index]}?key_word=${this.key_word}`
2022-03-30 10:04:40 +00:00
})
},
2022-03-31 02:38:37 +00:00
// 最近查询跳转
2022-03-30 10:04:40 +00:00
goDetail() {
if (this.dataIndex == 1) {
uni.navigateTo({
url: "/pages/project/details"
})
} else if (this.dataIndex == 0) {
uni.navigateTo({
url: '/pages/dataQuery/details'
})
} else {
uni.navigateTo({
url: '/pages/dataQuery/dataQuery'
})
}
},
2022-03-25 03:41:31 +00:00
}
}
2022-03-22 10:10:39 +00:00
</script>
<style>
2022-03-25 03:41:31 +00:00
.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;
}
2022-03-30 10:04:40 +00:00
.recently-query-content .li .text-content {
flex: 1;
}
2022-03-25 03:41:31 +00:00
.recently-query-content .li .text-content .title {
color: #30364c;
font-size: 33rpx;
margin-bottom: 25rpx;
2022-03-30 10:04:40 +00:00
padding-right: 50rpx;
2022-03-25 03:41:31 +00:00
}
.recently-query-content .li .text-content .text {
color: #b5b5b5;
font-size: 27rpx;
margin-bottom: 25rpx;
}
.imgJ {
width: 40rpx;
height: 40rpx;
position: fixed;
display: block;
2022-03-25 10:33:33 +00:00
2022-03-25 03:41:31 +00:00
margin: auto;
}
2022-03-25 10:33:33 +00:00
.imgJCon {
2022-03-25 03:41:31 +00:00
display: flex;
justify-content: center;
2022-03-25 10:33:33 +00:00
height: 40rpx;
margin-top: 180rpx;
2022-03-25 03:41:31 +00:00
}
2022-03-30 10:04:40 +00:00
.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;
}
2022-03-22 10:10:39 +00:00
</style>