zhangtao
/
prevention
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

新增访客登记

This commit is contained in:
余菲 2022-11-30 14:15:33 +08:00
parent cebe27eac7
commit d33750ba32
18 changed files with 599 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.json
View File

@ -28,7 +28,8 @@
"root": "package_A",
"pages": [
"page/alltask/index",
"page/upload/index"
"page/upload/index",
"page/register/index"
]
},
{

3
components/ImageInfo/index.js
View File

@ -15,6 +15,9 @@ Component({
this.setData({dataSource: this.properties.data})
let list = this.properties.data.registerFlowmanVoList || []
let arr = []
if(this.properties.data.carUrl) {
arr.push(this.properties.data.carUrl)
}
if(list.length > 0) {
list.forEach(item=> {
if(item.imageUrl) {

4
components/ImageInfo/index.wxml
View File

@ -1,6 +1,4 @@
<!--components/ImageInfo/index.wxml-->
<view class="info_contanier">
<image class="info_item" src="{{dataSource.carUrl}}"></image>
<image wx:if="{{imageList[0]}}" class="info_item" src="{{imageList[0]}}"></image>
<image wx:if="{{imageList[1]}}" class="info_item" src="{{imageList[1]}}"></image>
<image wx:for="{{imageList}}" wx:key="index" class="info_item" src="{{item}}"></image>
</view>

21
components/Tab/index.js
View File

@ -1,10 +1,18 @@
// components/Tab/index.js
// components/tab/tab.js
Component({
/**
* 组件的属性列表
*/
options:{
styleIsolation:"isolated"
},
properties: {
data:{
type:Array,
},
current:{
type:[Number,String]
}
},
/**
@ -18,6 +26,11 @@ Component({
* 组件的方法列表
*/
methods: {
}
updateCurrent(e){
this.triggerEvent('updatedata',{current:e.currentTarget.dataset.current})
}
},
lifetimes:{
},
})

10
components/Tab/index.wxml
View File

@ -1,2 +1,8 @@
<!--components/Tab/index.wxml-->
<text>components/Tab/index.wxml</text>
<view class="tab-container">
<view wx:for="{{data}}" class="tab-item {{item.value==current?'active':''}}" bindtap="updateCurrent" wx:key="value" data-current="{{item.value}}">
<view>{{item.label}}</view>
<view class="badge" wx:if="{{item.num}}">
{{item.num}}
</view>
</view>
</view>

51
components/Tab/index.wxss
View File

@ -1 +1,50 @@
/* components/Tab/index.wxss */
/* components/tab/tab.wxss */
.tab-container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20rpx 0 0 0;
}
.tab-item {
color: #222;
font-size: 32rpx;
padding-bottom: 20rpx;
position: relative;
/* font-weight:bold; */
}
.badge {
position: absolute;
background: red;
padding: 2rpx 8rpx;
top: 0;
right: 0;
border-radius: 50%;
font-size: 22rpx;
font-family: "PingFangSC-Medium", "PingFang SC";
font-weight: bold;
color: #FFFFFF;
transform: translate(100%,-40%);
line-height: 22rpx;
}
.tab-item.active {
color: #477DF3;
font-weight: bold;
}
.tab-item.active:after {
content: "";
display: block;
height: 6rpx;
width: 65rpx;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #477DF3;
border-radius: 2rpx;
}

16
package_A/page/alltask/index.js
View File

@ -11,7 +11,8 @@ Page({
startTime: '',
startCurrent: -1,
endTime: '',
endCurrent: -1
endCurrent: -1,
uploadType: ['车辆登记', '访客人员']
},
onLoad(e) {
@ -52,7 +53,6 @@ Page({
this.setData({params})
}
}
console.log(this.data.params);
},
/**
@ -61,8 +61,14 @@ Page({
*/
showDetail(e) {
let data = e.currentTarget.dataset.item
wx.navigateTo({
url: '/package_A/page/upload/index?data=' + JSON.stringify(data),
})
if(data.registerType === 0) {
wx.navigateTo({
url: '/package_A/page/upload/index?id=' + data.id,
})
} else {
wx.navigateTo({
url: '/package_A/page/register/index?id=' + data.id,
})
}
}
})

3
package_A/page/alltask/index.json
View File

@ -1,7 +1,8 @@
{
"usingComponents": {
"List": "../../../components/List/index",
"image-info": "../../../components/ImageInfo/index"
"image-info": "../../../components/ImageInfo/index",
"tab": "../../../components/Tab/index"
},
"navigationBarTitleText": "上报记录"
}

5
package_A/page/alltask/index.wxml
View File

@ -22,7 +22,10 @@
<List id="list" class="task_list" url="{{current}}" bind:update-list="updateList" list="{{list}}" bind:reset-list="resetList" params="{{params}}">
<view class="task_item" data-current="{{index}}" wx:for="{{list}}" wx:key="index">
<view class="task_main" data-item="{{item}}" bindtap="showDetail">
<text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);margin-bottom: 15rpx;">登记时间：{{item.createTime || ''}}</text>
<view class="card_head">
<text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);">登记时间：{{item.createTime || ''}}</text>
<text style="font-size: 30rpx;">{{uploadType[item.registerType]}}</text>
</view>
<image-info data="{{item}}" type="list"></image-info>
</view>
</view>

6
package_A/page/alltask/index.wxss
View File

@ -57,6 +57,12 @@
justify-content: flex-start;
align-items: flex-start;
}
.card_head {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.task_main {
box-sizing: border-box;
flex: 1;

252
package_A/page/register/index.js Normal file
View File

@ -0,0 +1,252 @@
// package_A/page/register/index.js
const crypto = require('crypto-js')
import {Base64} from 'js-base64'
import {getOssAuth} from '../../../api/upload.js'
import {confirmOrder, getAllTask} from '../../../api/task.js'
Page({
/**
* 页面的初始数据
*/
data: {
type: 'upload',
form: {},
dataSource: {},
healthCodeList: [],
formRules: {
healthCodeList: {
validator: function (value) {
return value.length!=0;
},
warning: false
}
}
},
onLoad(e) {
if(e.id) {
let id = parseInt(e.id)
let params = {
registerId: id,
limit: 1,
page: 1
}
getAllTask(params).then(res=> {
if(res.code === 0) {
let dataSource = res.data.records[0]
let list = dataSource.registerFlowmanVoList || []
let arr = []
if(list.length > 0) {
list.forEach(item=> {
if(item.imageUrl) {
arr.push(item.imageUrl)
}
})
}
let healthCodeList = arr
this.setData({dataSource, type: 'detail', healthCodeList})
}
})
}
if(this.data.type === 'upload') {
this.getOssAuthForm()
}
},
// 图片预览
previewImage(e) {
let type = e.currentTarget.dataset.type
let item = e.currentTarget.dataset.item
let str = type + 'List'
wx.previewImage({
urls: this.data[str],
current: item
})
},
validate(name) {
let formRules = this.data.formRules;
let validator = formRules[name].validator
let result
result = validator ? !validator(this.data[name]) : false
formRules[name].warning = result
this.setData({formRules})
return result
},
// 表单验证
validateForm() {
return new Promise((resolve, reject) => {
try {
let formRules = this.data.formRules;
let result = false;
for (let key in formRules) {
let temp = this.validate(key)
if (temp) {
result = temp
}
}
resolve(!result)
} catch (e) {
reject(e)
}
})
},
/* 获取图片上传鉴权 */
getOssAuthForm() {
let that = this
getOssAuth().then((res)=> {
let client = {
region: 'oss-cn-shanghai',
secure: true,
accessKeyId: res.accessKeyId,
accessKeySecret: res.accessKeySecret,
securityToken: res.securityToken,
bucket: 'ta-tech-image'
}
// 计算签名
function computeSignature(accessKeySecret, canonicalString) {
return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
}
const date = new Date();
date.setHours(date.getHours() + 1);
const policyText = {
expiration: date.toISOString(), // 设置policy过期时间。
conditions: [
// 限制上传大小。
["content-length-range", 0, 1024 * 1024 * 1024],
],
};
// 获取签名
const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
const signature = computeSignature(client.accessKeySecret, policy)
let ossForm = that.data.ossForm
ossForm = {
OSSAccessKeyId: client.accessKeyId,
signature,
policy,
SecurityToken: client.securityToken
}
that.setData({ossForm})
}).catch(e=> {
console.log(e);
})
},
/* 上传图片 */
uploadImages(e){
let type = e.currentTarget.dataset.type
let limit = e.currentTarget.dataset.limit
// wx.chooseImage({
wx.chooseMedia({
count: limit - this.data[type + 'List'].length, // 最多可以选择的图片张数，默认9
mediaType: ['image'], // 图片
sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['camera'], // album 从相册选图，camera 使用相机，默认二者都有
success:(res) =>{
// success
let str = type+'List'
// let imageList = this.data[str].concat(res.tempFilePaths);
// console.log(imageList)
let imageList = this.data[str].concat(res.tempFiles[0].tempFilePath);
this.setData({healthCodeList: imageList})
this.validate(type+'List')
},
fail: (e) => {
console.log('取消选择');
}
})
},
// 删除图片
deleteImage(e) {
let type = e.currentTarget.dataset.type
let index = this.getCurrentData(e);
let list = this.data[type+"List"]
list.splice(index, 1)
let str = type + 'List'
this.setData({healthCodeList: list})
this.validate(str)
},
getCurrentData(e) {
return e.currentTarget.dataset.current;
},
/* 取消 */
returnLastPage() {
this.setData({
form: {}
})
wx.navigateBack({
delta: 1,
})
},
/* 表单上传 */
submit(){
this.validateForm().then(res => {
if(res) {
let healthCodeList = this.data.healthCodeList
let imageList = healthCodeList
let ossForm = this.data.ossForm
let temp = []
console.log('图片列表数据：', imageList);
if (imageList.length > 0) {
wx.showLoading({title:"上传中",mask:true})
temp = imageList.map(item => {
// 设置文件上传路径
const randomString = Math.random().toString(36).slice(2)
const timestamp = new Date().getTime()
const key = `imagedir/${randomString}_${timestamp}.png`
// 上传图片
return new Promise((resolve, reject)=> {
wx.uploadFile({
url: 'https://ta-tech-image.oss-cn-shanghai.aliyuncs.com',
filePath: item,
name: 'file',
formData: {
key,
OSSAccessKeyId: ossForm.OSSAccessKeyId,
signature: ossForm.signature,
policy: ossForm.policy,
'x-oss-security-token': ossForm.SecurityToken
},
success: (res)=> {
if(res.statusCode === 204) {
// 上传成功，将图片路径resolve出去
resolve(key)
}
},
fail: (e)=> {
wx.showToast({
title: '图片上传失败',
})
}
})
})
})
Promise.all(temp).then((res)=> {
let form = this.data.form;
form.flowManUrlList = res
form.registerType = 1
// 登记
confirmOrder(form).then(res => {
if (res?.code === 0) {
wx.reLaunch({
url: '/pages/task/task',
})
}
}).catch(e=> {
console.log(e);
}).finally(()=>{
wx.hideLoading();
})
}).catch((e)=> {
wx.hideLoading()
})
}
}
})
}
})

4
package_A/page/register/index.json Normal file
View File

@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "访客登记"
}

25
package_A/page/register/index.wxml Normal file
View File

@ -0,0 +1,25 @@
<!--package_A/page/upload/index.wxml-->
<view class="upload_container">
<view class="upload_images {{formRules.healthCodeList.warning? 'warning': ''}}">
<text><text style="color: red;">*</text>上传健康码、行程卡照片：</text>
<view class="image_list">
<view class="image_preview" wx:for="{{healthCodeList}}" wx:key="index">
<image class="image_item" src="{{item}}" mode="aspectFill" data-type="healthCode" data-item="{{item}}" bindtap="previewImage">
</image>
<div class="close" data-current="{{index}}" data-type="healthCode" wx:if="{{type === 'upload'}}" catchtap="deleteImage"></div>
</view>
<view class="upload_image" data-limit="{{10}}" data-type="healthCode" bindtap="uploadImages" wx:if="{{type === 'upload'}}">
<image style="height: 56rpx;width: 56rpx;" mode="widthFix" src="../../../assets/img/upload.png"></image>
<text>拍照上传</text>
</view>
</view>
<text class="tips">请上传健康码、行程卡图片</text>
</view>
<view class="btn_list">
<view wx:if="{{type === 'detail'}}" class="btn_item cancel_btn" bindtap="returnLastPage">返 回</view>
<view wx:if="{{type === 'upload'}}" class="btn_item submit_btn" bindtap="submit">确 认</view>
</view>
</view>

136
package_A/page/register/index.wxss Normal file
View File

@ -0,0 +1,136 @@
/* package_A/page/upload/index.wxss */
.upload_container {
box-sizing: border-box;
width: 100%;
padding: 30rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
/* 上传图片 */
.upload_images {
width: 100%;
margin-bottom: 50rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
font-size: 34rpx;
color: #666666;
position: relative;
}
.image_list {
width: 100%;
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.image_preview {
height: 200rpx;
width: 200rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
position: relative;
}
.image_item {
height:100%;
width: 100%;
margin-bottom: 20rpx;
}
.close{
position: absolute;
top:0;
right:0;
transform: translate(40%,-40%);
height:50rpx;
width:50rpx;
background:rgba(179, 179, 179, 0.5);
border-radius: 50%;
z-index: 10;
}
.close::before{
content: "";
display: block;
position: absolute;
width: 60%;
height: 10rpx;
top:50%;
left:50%;
background:rgb(124, 124, 124);
transform-origin: center;
/* transform: ; */
transform: translate(-50%,-50%) rotate(45deg);
}
.close::after{
content: "";
display: block;
position: absolute;
width: 60%;
height: 10rpx;
top:50%;
left:50%;
background:rgb(124, 124, 124);
transform-origin: center;
/* transform: ; */
transform: translate(-50%,-50%) rotate(-45deg);
}
.upload_image {
width: 200rpx;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1rpx dashed #A6A6A6;
border-radius: 10rpx;
}
.upload_image text {
color: rgba(0, 0, 0, 0.5);
font-size: 30rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.note_mark {
margin-top: 20rpx;
font-size: 24rpx;
color: rgba(153, 153, 153, 1);
}
.tips{
position: absolute;
bottom: -40rpx;
left: -15rpx;
color: red;
font-size: 24rpx;
transform: translate(27rpx, -5rpx);
display: none;
}
.upload_images.warning .tips{
display: block;
}
/* 按钮区 */
.btn_list {
box-sizing: border-box;
width: 100%;
margin-top: 50rpx;
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.btn_item {
width: 600rpx;
height: 80rpx;
border-radius: 40rpx;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
color: #ffffff;
background-color: #477DF3;
}

48
package_A/page/upload/index.js
View File

@ -2,7 +2,7 @@
const crypto = require('crypto-js')
import {Base64} from 'js-base64'
import {getOssAuth} from '../../../api/upload.js'
import {confirmOrder} from '../../../api/task.js'
import {confirmOrder, getAllTask} from '../../../api/task.js'
Page({
/**
@ -30,20 +30,30 @@ Page({
},
onLoad(e) {
if(e.data) {
let data = JSON.parse(e.data)
let carNumberList = [data.carUrl]
let list = data.registerFlowmanVoList || []
let arr = []
if(list.length > 0) {
list.forEach(item=> {
if(item.imageUrl) {
arr.push(item.imageUrl)
}
})
if(e.id) {
let id = parseInt(e.id)
let params = {
registerId: id,
limit: 1,
page: 1
}
let healthCodeList = arr
this.setData({type: 'detail', carNumberList, healthCodeList})
getAllTask(params).then(res=> {
if(res.code === 0) {
let dataSource = res.data.records[0]
let carNumberList = [dataSource.carUrl]
let list = dataSource.registerFlowmanVoList || []
let arr = []
if(list.length > 0) {
list.forEach(item=> {
if(item.imageUrl) {
arr.push(item.imageUrl)
}
})
}
let healthCodeList = arr
this.setData({dataSource, type: 'detail', carNumberList, healthCodeList})
}
})
}
if(this.data.type === 'upload') {
this.getOssAuthForm()
@ -132,15 +142,18 @@ Page({
uploadImages(e){
let type = e.currentTarget.dataset.type
let limit = e.currentTarget.dataset.limit
wx.chooseImage({
// wx.chooseImage({
wx.chooseMedia({
count: limit - this.data[type + 'List'].length, // 最多可以选择的图片张数，默认9
mediaType: ['image'], // 图片
sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
sourceType: ['camera'], // album 从相册选图，camera 使用相机，默认二者都有
success:(res) =>{
// success
let str = type+'List'
let imageList = this.data[str].concat(res.tempFilePaths);
// let imageList = this.data[str].concat(res.tempFilePaths);
// console.log(imageList)
let imageList = this.data[str].concat(res.tempFiles[0].tempFilePath);
if(type === 'carNumber') {
this.setData({carNumberList: imageList})
} else {
@ -227,6 +240,7 @@ Page({
form.carUrl = res[0]
res.shift()
form.flowManUrlList = res
form.registerType = 0
// 登记
confirmOrder(form).then(res => {
if (res?.code === 0) {

22
pages/task/task.js
View File

@ -7,7 +7,8 @@ Page({
*/
data: {
userInfo: {},
dataList: []
dataList: [],
uploadType: ['车辆登记', '访客人员']
},
onLoad() {
@ -38,19 +39,32 @@ Page({
url: '/package_A/page/alltask/index',
})
},
// 车辆登记
goUpload() {
wx.navigateTo({
url: '/package_A/page/upload/index',
})
},
// 访客登记
goRegister() {
wx.navigateTo({
url: '/package_A/page/register/index',
})
},
/**
* 进入详情页面
*/
goTaskDetail(e) {
let detail = e.currentTarget.dataset.detail
wx.navigateTo({
url: '/package_A/page/upload/index?data=' + JSON.stringify(detail),
})
if(detail.registerType === 0) {
wx.navigateTo({
url: '/package_A/page/upload/index?id=' + detail.id,
})
} else {
wx.navigateTo({
url: '/package_A/page/register/index?id=' + detail.id,
})
}
}
})

17
pages/task/task.wxml
View File

@ -5,9 +5,15 @@
<view class="company_message">
<text>{{userInfo.name}}</text>
</view>
<view class="to_upload" bindtap="goUpload">
<image style="width: 80rpx;height: 60rpx;margin-right: 20rpx;" src="../../assets/img/photo.png"></image>
<text>拍照上传车辆信息</text>
<view class="upload_container">
<view class="to_upload" bindtap="goUpload">
<image style="width: 80rpx;height: 60rpx;margin-bottom: 20rpx;" src="../../assets/img/photo.png"></image>
<text>车辆登记</text>
</view>
<view class="to_upload" bindtap="goRegister">
<image style="width: 80rpx;height: 60rpx;margin-bottom: 20rpx;" src="../../assets/img/photo.png"></image>
<text>访客登记</text>
</view>
</view>
</view>
<!-- 记录 -->
@ -17,7 +23,10 @@
<text style="font-size: 26rpx; color: rgba(42, 130, 228, 1);" data-status="all" bindtap="goTaskPage">查看更多</text>
</view>
<view class="task_item" wx:for="{{dataList}}" wx:key="index" bindtap="goTaskDetail" data-detail="{{item}}">
<text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);margin-bottom: 15rpx;">登记时间：{{item.createTime || ''}}</text>
<view class="card_head">
<text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);">登记时间：{{item.createTime || ''}}</text>
<text style="font-size: 30rpx;">{{uploadType[item.registerType]}}</text>
</view>
<image-info data="{{item}}"></image-info>
</view>
</view>

18
pages/task/task.wxss
View File

@ -20,6 +20,13 @@
align-items: center;
background: linear-gradient(90deg, rgba(115, 164, 255, 1) 0%, rgba(67, 160, 255, 1) 100%);
}
.upload_container {
width: 100%;
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.company_message {
width: 100%;
@ -32,12 +39,13 @@
color: #ffffff;
}
.to_upload {
width: 600rpx;
height: 240rpx;
width: 320rpx;
height: 230rpx;
border-radius: 12rpx;
background-color: #ffffff;
font-size: 28rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@ -66,6 +74,12 @@
background-color: #ffffff;
border-bottom: 1rpx solid rgba(166, 166, 166, 0.35);
}
.card_head {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.empty_page {
width: 100%;