sxq2024
/
zhengxinApplets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
征信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
47 MiB
 
 
 
Tag: Branch: Tree: b9886da972
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b9886da972'
${ noResults }
zhengxinApplets/pages/index/search.vue

393 lines
9.2 KiB
Raw Blame History

<template>
<view class="search">
<view class="hd">
<view class="l">
<image class="icon-search" src="https://zhengxin.njrenzhou.cn/static/search.png"></image>
<input type="text" v-model="title" placeholder="支持姓名/公司/手机号/标签搜索"/>
<image class="icon-del" v-if="title" src="https://zhengxin.njrenzhou.cn/static/icon-close.png"></image>
<image class="icon-filter" v-else src="https://zhengxin.njrenzhou.cn/static/icon-filter.png"></image>
</view>
<view class="btn">搜索</view>
</view>
<view class="content" :style="{'min-height': (statusBarHeight-70)+'px'}">
<view class="l">查询信息</view>
<view class="list">
<view class="li">
<view class="a">姓名：李大花</view>
<view class="a">身份证号：320324199603064568</view>
</view>
</view>
<view class="l">数据列表</view>
<view class="list">
<view class="li">
<view class="b">1、张美丽在抗震救灾中捐款100万</view>
<view class="c">善</view>
</view>
<view class="li">
<view class="b">2、向李大花借款30万一年款项未归还</view>
<view class="c c-on">恶</view>
</view>
</view>
</view>
<view class="bd" v-if="false" :style="{'min-height': (statusBarHeight-70)+'px'}">
<view class="l">搜索历史<text>清除记录</text></view>
<view class="info">
<view class="item">借款</view>
<view class="item">安庆砂锅店，李大花</view>
<view class="item">安庆砂锅店，李大花</view>
<view class="item">李大花，13078989080，32032520032365</view>
</view>
<view class="l">猜你想搜</view>
<view class="info">
<view class="item">借款</view>
<view class="item">安庆砂锅店，李大花</view>
<view class="item">安庆砂锅店，李大花</view>
<view class="item">李大花，13078989080，32032520032365</view>
</view>
<view class="empty">
<image src="https://zhengxin.njrenzhou.cn/static/empty.png"></image>
<view class="title">暂无数据 ~</view>
</view>
</view>
<u-popup :show="show" mode="top" @close="close" @open="open" :overlayStyle="overlayStyle" zIndex="10">
<view class="form">
<view class="hd">
<view class="l">
<image class="icon-search" src="https://zhengxin.njrenzhou.cn/static/search.png"></image>
<input type="text" placeholder="支持姓名/公司/手机号/标签搜索"/>
<image class="icon-filter" src="https://zhengxin.njrenzhou.cn/static/icon-filter.png"></image>
</view>
<view class="btn">搜索</view>
</view>
<view class="l">当事人身份信息筛选</view>
<view class="info">
<view class="item">
<view class="fl">姓名<text>*</text></view>
<view class="fr">
<input placeholder="请输入当事人姓名" type="text" />
</view>
</view>
<view class="item">
<view class="fl">身份证号</view>
<view class="fr">
<input placeholder="请输入当事人身份证号" type="text" />
</view>
</view>
<view class="item">
<view class="fl">手机号码</view>
<view class="fr">
<input placeholder="请输入手机号码" type="number" />
</view>
</view>
<view class="item">
<view class="fl">QQ号</view>
<view class="fr">
<input placeholder="请输入当事人QQ号" type="text" />
</view>
</view>
<view class="item">
<view class="fl">微信号</view>
<view class="fr">
<input placeholder="请输入微信号" type="text" />
</view>
</view>
<view class="item">
<view class="fl">居住地址</view>
<view class="fr">
<picker mode="region">
<view class="picker">
{{title?title:'请选择 省/市/区'}}
<image src="https://zhengxin.njrenzhou.cn/static/icon-arrow.png"></image>
</view>
</picker>
</view>
</view>
<view class="item">
<view class="fl">籍贯</view>
<view class="fr">
<picker mode="region">
<view class="picker">
{{title?title:'请选择'}}
<image src="https://zhengxin.njrenzhou.cn/static/icon-arrow.png"></image>
</view>
</picker>
</view>
</view>
<view class="item">
<view class="fl">公司</view>
<view class="fr">
<input placeholder="请输入当事人所在公司" type="text" />
</view>
</view>
<view class="btns">
<view class="reset">重置</view>
<view class="sure">确定</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
overlayStyle: {
'zIndex': 9
},
statusBarHeight: 0,
title: "",
show: false,
};
},
onLoad() {
this.statusBarHeight = uni.getSystemInfoSync().windowHeight-uni.getSystemInfoSync().statusBarHeight;
}
}
</script>
<style scoped lang="scss">
.search{
overflow: hidden;
.content{
width: 100%;
background: #F3F7F8;
.l{
padding: 25rpx 25rpx 0;
font-weight: 500;
font-size: 30rpx;
color: #222222;
}
.list{
padding: 0 25rpx;
.li{
min-height: 100rpx;
background: #FFFFFF;
box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
border-radius: 20rpx;
padding: 20rpx 30rpx;
box-sizing: border-box;
margin-top: 20rpx;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
.a{
width: 100%;
font-weight: 500;
font-size: 28rpx;
color: #666666;
line-height: 50rpx;
}
.c{
width: 80rpx;
line-height: 56rpx;
background: #00C6A9;
border-radius: 0px 20rpx 0px 20rpx;
font-weight: 400;
font-size: 32rpx;
text-align: center;
color: #FFFFFF;
position: absolute;
right: 0;
top: 0;
z-index: 2;
&-on{
background: #333333;
}
}
}
}
}
.form{
padding: 0 0 25rpx;
background-color: #fff;
overflow: hidden;
.btns{
padding: 40rpx 35rpx 20rpx 55rpx;
display: flex;
align-items: center;
justify-content: space-between;
.reset{
width: 300rpx;
line-height: 90rpx;
background: #E3F4F1;
border-radius: 90rpx;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #00C6A9;
}
.sure{
width: 300rpx;
line-height: 90rpx;
background: #00C6A9;
border-radius: 90rpx;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #fff;
}
}
.l{
padding: 0 25rpx;
font-weight: 500;
font-size: 30rpx;
color: #222222;
}
.info{
margin-top: 10rpx;
padding: 0 25rpx 0 0;
overflow: hidden;
.item{
margin-top: 20rpx;
overflow: hidden;
display: flex;
align-items: center;
.fl{
font-weight: 500;
font-size: 28rpx;
color: #222222;
width: 140rpx;
text-align: right;
margin-right: 20rpx;
}
.fr{
flex: 1;
picker{
width: 100%;
line-height: 80rpx;
height: 80rpx;
background: #F6F6F6;
padding: 0 20rpx;
box-sizing: border-box;
border-radius: 10rpx;
font-weight: 500;
.picker{
width: 100%;
font-size: 28rpx;
color: #212121;
display: flex;
align-items: center;
justify-content: space-between;
image{
width: 45rpx;
height: 45rpx;
}
}
}
input{
width: 100%;
line-height: 80rpx;
height: 80rpx;
background: #F6F6F6;
padding: 0 20rpx;
box-sizing: border-box;
border-radius: 10rpx;
font-weight: 500;
font-size: 28rpx;
color: #212121;
}
}
}
}
}
.bd{
background-color: #fff;
overflow: hidden;
.empty{
margin-top: 139rpx;
text-align: center;
font-weight: 500;
font-size: 32rpx;
color: #222222;
image{
width: 460rpx;
height: 400rpx;
margin-bottom: 15rpx;
}
}
.l{
padding: 5rpx 25rpx;
font-weight: 500;
font-size: 30rpx;
color: #333333;
overflow: hidden;
text{
font-weight: 500;
font-size: 24rpx;
color: #999999;
float: right;
}
}
.info{
padding: 0 25rpx 0 0;
overflow: hidden;
margin-bottom: 30rpx;
.item{
padding: 0 20rpx;
line-height: 52rpx;
background: #F6F6F6;
border-radius: 52rpx;
font-weight: 500;
font-size: 24rpx;
color: #666666;
float: left;
margin-top: 25rpx;
margin-left: 25rpx;
}
}
}
.hd{
background-color: #fff;
padding: 30rpx 25rpx;
display: flex;
align-items: center;
justify-content: space-between;
.l{
flex: 1;
width: 620rpx;
line-height: 70rpx;
height: 70rpx;
background: #F6F6F6;
border-radius: 70rpx;
border: 1px solid #EAEAEA;
padding: 15rpx 30rpx;
overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
.icon-search{
width: 24rpx;
height: 27rpx;
margin-right: 15rpx;
}
.icon-filter{
width: 35rpx;
height: 33rpx;
margin-left: 15rpx;
}
.icon-del{
width: 50rpx;
height: 50rpx;
margin-left: 15rpx;
}
input{
flex: 1;
font-weight: 500;
font-size: 24rpx;
color: #212121;
}
}
.btn{
font-weight: 500;
font-size: 30rpx;
color: #222222;
margin-left: 25rpx;
}
}
}
</style>