643 lines
16 KiB
Vue
643 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="header">
|
||
<view class="search-box">
|
||
<view class="input-button-container">
|
||
<view class="search-input-wrapper">
|
||
<u-input v-model="searchKeyword" placeholder="搜索户主姓名或身份证号" prefix-icon="search"
|
||
@confirm="handleSearch" :disabled="isSerach" clearable />
|
||
</view>
|
||
<view class="scan-button" @click="handleScan">
|
||
<uni-icons type="scan" size="28" color="#28A0F8"></uni-icons>
|
||
</view>
|
||
<view class="search-button-wrapper">
|
||
<u-button @click="handleSearch" :disabled="isSerach" type="error" size="medium">
|
||
<u-icon name="search" size="24" />
|
||
搜索
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
<view class="area-select-row">
|
||
<!-- 镇/街 -->
|
||
<view class="select-item">
|
||
<uni-easyinput prefixIcon="search" v-model="selectedTown" placeholder="请选择镇/街"
|
||
@clear="clearTown" @iconClick="showTown" clearable />
|
||
</view>
|
||
<!-- 村/社区 -->
|
||
<view class="select-item">
|
||
<uni-easyinput prefixIcon="search" v-model="selectedVillage" @clear="clearVillage"
|
||
placeholder="请选择村/社区" clearable @iconClick="showVillage()" />
|
||
</view>
|
||
<!-- 组/网格 -->
|
||
<view class="select-item">
|
||
<uni-easyinput prefixIcon="search" v-model="selectedGroup" placeholder="请选择组/网格" clearable
|
||
@iconClick="showGroup()" />
|
||
</view>
|
||
|
||
<!-- 镇选择器 -->
|
||
<u-picker :show="showTownPicker" mode="region" :columns="[townList]" keyName="label"
|
||
@confirm="onTownConfirm" @close="showTownPicker = false" />
|
||
<!-- 村选择器 -->
|
||
<u-picker :show="showVillagePicker" mode="region" :columns="[villageList]" keyName="label"
|
||
@confirm="onVillageConfirm" @close="showVillagePicker = false" />
|
||
<!-- 组选择器 -->
|
||
<u-picker :show="showGroupPicker" mode="region" :columns="[groupList]" keyName="label"
|
||
@confirm="onGroupConfirm" @close="showGroupPicker = false" />
|
||
</view>
|
||
<view class="area-select-row">
|
||
<view class="select-item1">
|
||
<uni-easyinput prefixIcon="search" v-model="selectDoorNum"
|
||
placeholder="请输入门牌号，若要未填写门牌号数据，请输入无" clearable />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="filter-tabs">
|
||
<view class="tab-item" :class="{ active: currentStatus === '' }" @click="filterByStatus('')">
|
||
{{getTitel('')}}
|
||
</view>
|
||
<view class="tab-item" :class="{ active: currentStatus === '1' }" @click="filterByStatus('1')">
|
||
{{getTitel('1')}}
|
||
|
||
</view>
|
||
<view class="tab-item" :class="{ active: currentStatus === '0' }" @click="filterByStatus('0')">
|
||
{{getTitel('0')}}
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="list-container">
|
||
|
||
<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @up="upCallback" :down="downOption"
|
||
@down="downCallback" :height="mescrollHeight">
|
||
<view v-if="loading && householdList.length === 0" class="loading">
|
||
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
|
||
<text>加载中...</text>
|
||
</view>
|
||
<view v-else-if="householdList.length === 0" class="empty">
|
||
<u-icon name="info-circle" size="80" color="#ccc"></u-icon>
|
||
<text>暂无数据</text>
|
||
</view>
|
||
<view v-else class="household-list">
|
||
|
||
<view class="household-item" v-for="item in householdList" :key="item.id"
|
||
@click="viewDetail(item)">
|
||
<view class="item-header">
|
||
<text class="householder-name">{{ getMsg(item.householderName) }}</text>
|
||
<view class="status-tag" :class="item.submitStatus === 1 ? 'submitted' : 'draft'">
|
||
{{ item.submitStatus === 1 ? '已提交' : '暂存' }}
|
||
</view>
|
||
</view>
|
||
<view class="item-info">
|
||
<text class="info-text">{{ '身份证号：'+getMsg(item.householderIdNumber) }}</text>
|
||
<text class="info-text">{{ '联系电话：'+getMsg(item.householderPhone) }}</text>
|
||
<text class="info-text">{{'户籍人数：'+getMsg(item.householdNum) }}人</text>
|
||
<text class="info-text">{{'地址：'}}{{ getMsg(item.town) }}{{ getMsg(item.village) }}{{getMsg(item.groupName)}}{{ getMsg(item.doorNumber) }}</text>
|
||
<text class="info-text">{{ '入户员：'+ getMsg(item.submitterName) }}</text>
|
||
</view>
|
||
<view class="item-footer">
|
||
<text class="time-text">{{ '入户时间：'+formatTime(item.updateTime) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MescrollBody from 'mescroll-uni/mescroll-body.vue'
|
||
import MescrollMixin from 'mescroll-uni/mescroll-mixins.js'
|
||
import {
|
||
householdApi,areaApi
|
||
} from '../../utils/api.js'
|
||
import CryptoJS from "crypto-js";
|
||
let Qrcode = require('../../utils/reqrcode.js') //引用二维码（源码）
|
||
export default {
|
||
components: {
|
||
MescrollBody
|
||
},
|
||
mixins: [MescrollMixin],
|
||
data() {
|
||
return {
|
||
qrCodeRes: '',
|
||
searchKeyword: '',
|
||
total: '',
|
||
isSerach: false,
|
||
type: 'select',
|
||
secretKey: "m+=sad_sgAlo+1sag",
|
||
currentStatus: '',
|
||
householdList: [],
|
||
// 选择器弹窗控制
|
||
showTownPicker: false,
|
||
showVillagePicker: false,
|
||
showGroupPicker: false,
|
||
// 选中的值
|
||
selectedTown: '',
|
||
selectedVillage: '',
|
||
selectedGroup: '',
|
||
selectDoorNum: '',
|
||
// 下拉数据
|
||
townList: [],
|
||
villageList: [],
|
||
groupList: [],
|
||
// 三级原始数据
|
||
townVillageGroup: [],
|
||
loading: false,
|
||
upOption: {
|
||
use: true,
|
||
auto: true,
|
||
page: {
|
||
size: 5
|
||
},
|
||
noMoreSize: 5,
|
||
empty: {
|
||
tip: '暂无数据'
|
||
}
|
||
},
|
||
downOption: {
|
||
use: true
|
||
},
|
||
mescrollHeight: 'auto',
|
||
userInfo: {},
|
||
query: {}
|
||
}
|
||
},
|
||
async onLoad() {
|
||
this.loadUserInfo()
|
||
await this.listAreaNode();
|
||
|
||
},
|
||
methods: {
|
||
getMsg(value){
|
||
if(value){
|
||
return value
|
||
}else{
|
||
return ''
|
||
}
|
||
},
|
||
async listAreaNode() {
|
||
var areaDate = await areaApi.getAreaList();
|
||
this.townVillageGroup = this.transformTree(areaDate);
|
||
this.townList = this.townVillageGroup
|
||
},
|
||
transformTree(nodes) {
|
||
return nodes.map(node => {
|
||
// 创建基础对象（只包含label和value）
|
||
const newNode = {
|
||
"label": node.name,
|
||
"value": node.name
|
||
};
|
||
|
||
// 如果存在非空children则递归处理
|
||
if (node.children && node.children.length > 0) {
|
||
newNode.children = this.transformTree(node.children);
|
||
}
|
||
|
||
return newNode;
|
||
});
|
||
},
|
||
handleScan() {
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
var msg = res.result
|
||
const bytes = CryptoJS.AES.decrypt(msg, this.secretKey);
|
||
this.searchKeyword = bytes.toString(CryptoJS.enc.Utf8);
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '扫码失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef H5
|
||
this.scanCodeH5()
|
||
// #endif
|
||
},
|
||
//h5识别条码和二维码
|
||
scanCodeH5() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: imgRes => {
|
||
Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
|
||
Qrcode.qrcode.callback = (codeRes) => {
|
||
if (codeRes.indexOf('error') >= 0) {
|
||
// 二维码识别失败
|
||
uni.showToast({
|
||
title: '扫码失败',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
const bytes = CryptoJS.AES.decrypt(codeRes, this.secretKey);
|
||
this.searchKeyword = bytes.toString(CryptoJS.enc.Utf8);
|
||
this.mescroll.resetUpScroll()
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getTitel(current) {
|
||
if (current === '') {
|
||
if (this.currentStatus != '' || this.total == '' || this.total == 0) {
|
||
return '全部'
|
||
} else {
|
||
return '全部(' + this.total + ')'
|
||
}
|
||
} else if (current === '1') {
|
||
if (this.currentStatus != '1' || this.total == '' || this.total == 0) {
|
||
return '已提交'
|
||
} else {
|
||
return '已提交(' + this.total + ')'
|
||
}
|
||
} else if (current === '0') {
|
||
if (this.currentStatus != '0' || this.total == '' || this.total == 0) {
|
||
return '暂存'
|
||
} else {
|
||
return '暂存(' + this.total + ')'
|
||
}
|
||
}
|
||
|
||
|
||
},
|
||
// 获取文件地址函数
|
||
getObjectURL(file) {
|
||
var url = null
|
||
if (window.createObjectURL !== undefined) { // basic
|
||
url = window.createObjectURL(file)
|
||
} else if (window.URL !== undefined) { // mozilla(firefox)
|
||
url = window.URL.createObjectURL(file)
|
||
} else if (window.webkitURL !== undefined) { // webkit or chrome
|
||
url = window.webkitURL.createObjectURL(file)
|
||
}
|
||
return url
|
||
},
|
||
// 解码，输出：中文
|
||
decodeStr(str) {
|
||
var out, i, len, c;
|
||
var char2, char3;
|
||
out = "";
|
||
len = str.length;
|
||
i = 0;
|
||
while (i < len) {
|
||
c = str.charCodeAt(i++);
|
||
switch (c >> 4) {
|
||
case 0:
|
||
case 1:
|
||
case 2:
|
||
case 3:
|
||
case 4:
|
||
case 5:
|
||
case 6:
|
||
case 7:
|
||
// 0xxxxxxx
|
||
out += str.charAt(i - 1);
|
||
break;
|
||
case 12:
|
||
case 13:
|
||
// 110x xxxx 10xx xxxx
|
||
char2 = str.charCodeAt(i++);
|
||
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
|
||
break;
|
||
case 14:
|
||
// 1110 xxxx 10xx xxxx 10xx xxxx
|
||
char2 = str.charCodeAt(i++);
|
||
char3 = str.charCodeAt(i++);
|
||
out += String.fromCharCode(((c & 0x0F) << 12) |
|
||
((char2 & 0x3F) << 6) |
|
||
((char3 & 0x3F) << 0));
|
||
break;
|
||
}
|
||
}
|
||
return out;
|
||
},
|
||
mescrollInit(mescroll) {
|
||
this.mescroll = mescroll
|
||
},
|
||
loadUserInfo() {
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
if (userInfo) {
|
||
this.userInfo = userInfo
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/packageUser/pages/login'
|
||
})
|
||
}
|
||
},
|
||
handleSearch() {
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
filterByStatus(status) {
|
||
this.currentStatus = status
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
clearTown() {
|
||
this.selectedGroup = '';
|
||
this.selectedVillage = '';
|
||
},
|
||
clearVillage() {
|
||
this.selectedGroup = '';
|
||
},
|
||
// 镇选择
|
||
onTownConfirm(e) {
|
||
const town = e.value[0]
|
||
this.selectedTown = town.label
|
||
// 找到对应村
|
||
this.villageList = town.children || []
|
||
this.selectedVillage = ''
|
||
this.groupList = []
|
||
this.selectedGroup = ''
|
||
this.showTownPicker = false
|
||
},
|
||
showTown() {
|
||
console.log('s')
|
||
this.showTownPicker = true
|
||
},
|
||
showVillage() {
|
||
if (this.selectedTown) {
|
||
this.showVillagePicker = true
|
||
} else {
|
||
uni.showToast({
|
||
title: "请先选择村镇/街",
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
showGroup() {
|
||
if (this.selectedVillage) {
|
||
this.showGroupPicker = true;
|
||
} else {
|
||
uni.showToast({
|
||
title: "请先选择村/社区",
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
// 村选择
|
||
onVillageConfirm(e) {
|
||
const village = e.value[0]
|
||
this.selectedVillage = village.label
|
||
// 找到对应组
|
||
this.groupList = village.children || []
|
||
this.selectedGroup = ''
|
||
this.showVillagePicker = false
|
||
},
|
||
// 组选
|
||
onGroupConfirm(e) {
|
||
const group = e.value[0]
|
||
this.selectedGroup = group.label
|
||
this.showGroupPicker = false
|
||
},
|
||
downCallback() {
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
async upCallback(page) {
|
||
this.total = 0
|
||
// this.loading = page.num === 1
|
||
try {
|
||
uni.showLoading();
|
||
this.isSerach = true;
|
||
// console.log(this.loading)
|
||
// const token = uni.getStorageSync('token')
|
||
const params = {
|
||
pageNo: page.num,
|
||
pageSize: page.size,
|
||
}
|
||
if (this.searchKeyword) {
|
||
params.keyword = this.searchKeyword
|
||
}
|
||
if (this.currentStatus !== '') {
|
||
params.submitStatus = this.currentStatus
|
||
}
|
||
if (this.selectedTown != '') {
|
||
params.town = this.selectedTown;
|
||
|
||
}
|
||
if (this.selectedVillage != '') {
|
||
params.village = this.selectedVillage;
|
||
|
||
}
|
||
if (this.selectedGroup != '') {
|
||
params.groupName = this.selectedGroup;
|
||
}
|
||
if (this.selectDoorNum != '') {
|
||
params.doorNumber = this.selectDoorNum;
|
||
}
|
||
const response = await householdApi.pageHouseHoldPage(params)
|
||
if (response.total && response.total > 0) {
|
||
const newList = response.list;
|
||
this.total = response.total
|
||
if (page.num === 1) {
|
||
this.householdList = newList
|
||
|
||
} else {
|
||
this.householdList = [...this.householdList, ...newList]
|
||
}
|
||
this.mescroll.endBySize(newList.length, response.total || 0)
|
||
uni.hideLoading();
|
||
this.isSerach = false;
|
||
} else {
|
||
this.mescroll.endErr()
|
||
uni.hideLoading();
|
||
this.isSerach = false;
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
this.isSerach = false;
|
||
this.mescroll.endErr()
|
||
uni.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
uni.hideLoading();
|
||
this.isSerach = false;
|
||
}
|
||
|
||
},
|
||
viewDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/packageForm/pages/householdForm?id=${item.id}`
|
||
})
|
||
},
|
||
formatTime(timeStr) {
|
||
if (!timeStr) return ''
|
||
const date = new Date(timeStr)
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
min-height: 100vh;
|
||
background: #f4f6fa;
|
||
}
|
||
|
||
.header {
|
||
background: #fff;
|
||
padding: 20rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.search-box {
|
||
/* 搜索框样式 */
|
||
}
|
||
|
||
.input-button-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.search-input-wrapper {
|
||
flex: 3;
|
||
}
|
||
|
||
.scan-button {
|
||
background: none;
|
||
border: none;
|
||
padding: 0 10rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 8rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.search-button-wrapper {
|
||
flex: 1;
|
||
}
|
||
|
||
.content {
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.filter-tabs {
|
||
display: flex;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 15rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 24rpx 0;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
transition: all 0.3s;
|
||
border-left: 1rpx solid #F5F3F2;
|
||
/* 灰色边框 */
|
||
/* 添加上边框 */
|
||
border-top: 1rpx solid #F5F3F2;
|
||
/* 添加下边框 */
|
||
border-bottom: 1rpx solid #F5F3F2;
|
||
border-right: 1rpx solid #F5F3F2;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background: #2979ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.list-container {
|
||
min-height: 400rpx;
|
||
}
|
||
|
||
.loading,
|
||
.empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.household-list {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.household-item {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 32rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.householder-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.status-tag {
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.status-tag.submitted {
|
||
background: #e8f5e8;
|
||
color: #19be6b;
|
||
}
|
||
|
||
.status-tag.draft {
|
||
background: #fff3e0;
|
||
color: #ff9500;
|
||
}
|
||
|
||
.item-info {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.info-text {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.item-footer {
|
||
border-top: 1rpx solid #eee;
|
||
padding-top: 16rpx;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.area-select-row {
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
flex-direction: row;
|
||
}
|
||
.select-item1 {
|
||
flex: 1;
|
||
}
|
||
|
||
.select-item {
|
||
width: 32%;
|
||
margin-right: 2%;
|
||
}
|
||
</style> |