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.
559 lines
15 KiB
559 lines
15 KiB
<template>
|
|
<view class="m-content">
|
|
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text=""
|
|
title="绑定游客信息" @clickLeft="back" />
|
|
<view class="m-enter-box">
|
|
<view class="m-tips blue" v-if="count > 0">
|
|
还需填写
|
|
<span>{{ count }}</span>
|
|
位游客信息
|
|
</view>
|
|
<view class="m-tips orange" v-if=showAlert>
|
|
请选择要删除的<span>{{ delNUm }}</span>条游客信息
|
|
</view>
|
|
<uni-forms label-align="right" :label-width="80" v-if="count > 0 || editIng" ref="customForm"
|
|
:rules="customRules" :modelValue="customFormData">
|
|
<uni-forms-item label="姓名" required name="name">
|
|
<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
|
|
</uni-forms-item>
|
|
<uni-forms-item v-if="ticket && ticket.ischeckedMobile == 1" label="手机号" required name="phoneNumber">
|
|
<uni-easyinput type="number" v-model="customFormData.phoneNumber" placeholder="请输入手机号" />
|
|
</uni-forms-item>
|
|
<uni-forms-item v-if="ticket && ticket.ischeckedIdcard == 1" label="身份证号" required name="idCardNumber">
|
|
<uni-easyinput suffixIcon="personadd-filled" @iconClick="iconClick" type="idcard"
|
|
v-model="customFormData.idCardNumber" placeholder="请输入身份证号" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<button type="primary" v-if="count == 1 || editIng" @click="submit('customForm')">保存</button>
|
|
<button type="primary" v-if="count > 1 && !editIng" @click="submit('customForm')">继续填写</button>
|
|
</view>
|
|
<view class="m-user-list-box" v-if="ticket && ticket.visitorInfoList.length > 0">
|
|
<view class="m-title">
|
|
游客信息
|
|
</view>
|
|
<view class="m-list-item" v-for="(item, index) in ticket.visitorInfoList">
|
|
<uni-row :gutter="10">
|
|
<uni-col :span="16">
|
|
<uni-row :gutter="10">
|
|
<uni-col :span="8">姓名：</uni-col>
|
|
<uni-col :span="16">{{ item.name }}</uni-col>
|
|
</uni-row>
|
|
<uni-row v-if="ticket && ticket.ischeckedMobile == 1" :gutter="10">
|
|
<uni-col :span="8">手机号：</uni-col>
|
|
<uni-col :span="16">{{ item.phoneNumber }}</uni-col>
|
|
</uni-row>
|
|
<uni-row v-if="ticket && ticket.ischeckedIdcard == 1" :gutter="10">
|
|
<uni-col :span="8">身份证号：</uni-col>
|
|
<uni-col :span="16">{{ item.idCardNumber }}</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col class="m-btn-box" :span="8" v-if="!editIng">
|
|
<button class="m-btn edit" @click="editPerson(item)" size="mini">编辑</button>
|
|
<button class="m-btn del" @click="delPerson(item)" size="mini">删除</button>
|
|
</uni-col>
|
|
</uni-row>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="btn-box" v-if="count == 0 && !editIng && !showAlert">
|
|
<button class="m-btn" @click="saveUserInfo">保存用户信息</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
import * as Reader from '../../uni_modules/yzwl-nfc-reader';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
ticket: null,
|
|
count: 1,
|
|
idx: 0,
|
|
editId: null,
|
|
allTicket: null,
|
|
editIng: false,//编辑中保存不减数量
|
|
event: null,
|
|
needCount: 0,
|
|
showAlert: false,//提示删除游客信息
|
|
delNUm: 0,
|
|
|
|
// 自定义表单数据
|
|
customFormData: {
|
|
idx: null,
|
|
name: null,
|
|
phoneNumber: null,
|
|
idCardNumber: null
|
|
},
|
|
customRules: {
|
|
name: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '姓名不能为空'
|
|
}
|
|
]
|
|
},
|
|
phoneNumber: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '手机号不能为空'
|
|
},
|
|
{
|
|
validateFunction: (rule, value, data, callback) => {
|
|
let flag = this.ticket.visitorInfoList.some((item, index) => {
|
|
if (item.idx == this.editId) {
|
|
return false;
|
|
}
|
|
return item.phoneNumber == value;
|
|
});
|
|
if (flag) {
|
|
callback('手机号已存在，请重新填写');
|
|
}
|
|
return true;
|
|
}
|
|
},
|
|
{
|
|
validateFunction: (rule, value, data, callback) => {
|
|
const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
|
|
if (!reg.test(value.toString())) {
|
|
callback('请输入正确的手机号码');
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
]
|
|
},
|
|
idCardNumber: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '身份证号不能为空'
|
|
},
|
|
{
|
|
validateFunction: (rule, value, data, callback) => {
|
|
let flag = this.ticket.visitorInfoList.some((item, index) => {
|
|
if (item.idx == this.editId) {
|
|
return false;
|
|
}
|
|
return item.idCardNumber == value;
|
|
});
|
|
if (flag) {
|
|
callback('身份证号已存在，请重新填写');
|
|
}
|
|
return true;
|
|
}
|
|
},
|
|
{
|
|
validateFunction: (rule, value, data, callback) => {
|
|
const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
|
|
if (!reg.test(value.toString())) {
|
|
callback('请输入正确的身份证号');
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
const allTicket = uni.getStorageSync('ALL_TICKET');
|
|
this.needCount = options.count ? options.count : 0;
|
|
if (allTicket&&Array.isArray(allTicket)&&allTicket.length > 0) {
|
|
let allTickets = allTicket;
|
|
let that = this;
|
|
that.allTicket = allTickets;
|
|
if (options.needInfoItem) {
|
|
debugger;
|
|
const ticket = JSON.parse(options.needInfoItem);
|
|
this.event = options.event ? options.event : null;
|
|
//单个游客信息
|
|
if (ticket.touristInformation == 2) {
|
|
debugger;
|
|
console.log('allTickets:', allTickets); // 打印allTickets数组
|
|
console.log('ticket:', ticket); // 打印ticket对象
|
|
let index = allTickets.findIndex(item => Number(item.id) == Number(ticket.id) && item.date == ticket.date);
|
|
console.log('index:', index); // 打印index值
|
|
if (index != -1) {
|
|
allTickets[index].num++;
|
|
that.count = 0;
|
|
that.ticket = allTickets[index];
|
|
} else {
|
|
ticket.num = 1;
|
|
that.count = 1;
|
|
that.ticket = ticket;
|
|
}
|
|
|
|
}
|
|
//全部游客信息
|
|
if (ticket.touristInformation == 3) {
|
|
debugger;
|
|
console.log('allTickets:', allTickets); // 打印allTickets数组
|
|
console.log('ticket:', ticket); // 打印ticket对象
|
|
let index = allTickets.findIndex(item => Number(item.id) == Number(ticket.id) && item.date == ticket.date);
|
|
console.log('index:', index); // 打印index值
|
|
if (that.needCount == 0) {
|
|
if (index != -1) {
|
|
const counts = allTickets[index].visitorInfoList.length;
|
|
allTickets[index].num++;
|
|
that.count = allTickets[index].usersNumber * allTickets[index].num - counts;
|
|
that.ticket = allTickets[index];
|
|
} else {
|
|
debugger
|
|
ticket.num = 1;
|
|
that.count = 1 * ticket.usersNumber;
|
|
that.ticket = ticket;
|
|
}
|
|
} else {
|
|
//购物车过来count走这里
|
|
if (index != -1) {
|
|
const counts = allTickets[index].visitorInfoList.length;
|
|
// allTickets[index].num = that.needCount;
|
|
const subNum = allTickets[index].usersNumber * Number(that.needCount) - counts;
|
|
if (subNum > 0) {
|
|
that.showAlert = false
|
|
that.count = subNum
|
|
} else {
|
|
that.count = 0
|
|
that.showAlert = true
|
|
that.delNUm = Math.abs(subNum)
|
|
}
|
|
that.ticket = allTickets[index];
|
|
} else {
|
|
debugger
|
|
ticket.num = 1;
|
|
that.count = 1 * ticket.usersNumber;
|
|
that.ticket = ticket;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
} else {
|
|
this.allTicket = [];
|
|
let allTickets = [];
|
|
if (options.needInfoItem) {
|
|
debugger;
|
|
const ticket = JSON.parse(options.needInfoItem);
|
|
this.event = options.event ? options.event : null;
|
|
let that = this;
|
|
//需要填写单人信息
|
|
if (ticket.touristInformation == 2) {
|
|
debugger;
|
|
ticket.num = 1;
|
|
that.count = 1;
|
|
that.ticket = ticket;
|
|
}
|
|
//需要填写所有人信息
|
|
if (ticket.touristInformation == 3) {
|
|
debugger;
|
|
ticket.num = 1;
|
|
that.count = 1 * ticket.usersNumber;
|
|
that.ticket = ticket;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
this.$refs.customForm.setRules(this.customRules);
|
|
},
|
|
methods: {
|
|
iconClick() {
|
|
uni.showLoading({
|
|
title: '等待读取中...',
|
|
})
|
|
let thisPage = this;
|
|
Reader.initReader({
|
|
data: {
|
|
appKey: 'F266113E826112B0EE0B2C5FFE48D9C1',
|
|
appSecret: 'MWJiZDMzYWQ0NTlkMTc5NDQ1ZmNmMmFmODZkNGQwNTE=',
|
|
userData: ''
|
|
},
|
|
success: (res) => {
|
|
res.photoBase64Png = 'data:image/png;base64,' + res.photoBase64Png;
|
|
res.photoBase64Bmp = 'data:image/png;base64,' + res.photoBase64Bmp;
|
|
// thisPage.info = res;
|
|
console.log('读卡结果：', res);
|
|
|
|
thisPage.customFormData.idCardNumber = res.no;
|
|
thisPage.customFormData.name = res.name;
|
|
},
|
|
progress: (res) => {
|
|
thisPage.progress = res;
|
|
},
|
|
start: (res) => {
|
|
// thisPage.info = null;
|
|
uni.hideLoading()
|
|
uni.showLoading({
|
|
title: '开始读取：'
|
|
})
|
|
// console.log('开始读取：', res);
|
|
},
|
|
end: (res) => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '读取完毕',
|
|
icon: 'none'
|
|
});
|
|
console.log('结束读取：', res);
|
|
plus.globalEvent.removeEventListener('newintent');
|
|
},
|
|
fail: (res) => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '读取错误',
|
|
icon: 'none'
|
|
});
|
|
// thisPage.errorMessage = '错误信息：' + res.msg + ', 错误码：' + res.code;
|
|
console.log('错误信息：', res);
|
|
}
|
|
});
|
|
plus.globalEvent.addEventListener('newintent', function () {
|
|
// 轮询调用NFC 异步进行
|
|
setTimeout(() => {
|
|
Reader.onNewIntent();
|
|
}, 500);
|
|
});
|
|
Reader.usbAutoReadConfig(false);
|
|
setTimeout(()=>{
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title:'识别超时'
|
|
})
|
|
plus.globalEvent.removeEventListener('newintent');
|
|
},10000)
|
|
},
|
|
saveUserInfo() {
|
|
debugger
|
|
let that = this
|
|
if (that.event) {
|
|
uni.setStorageSync('EVENT', that.event)
|
|
}
|
|
if (this.needCount != 0) {
|
|
that.ticket.num = Number(this.needCount);
|
|
}
|
|
if (that.allTicket.length > 0) {
|
|
const index = that.allTicket.findIndex(item => item.id == that.ticket.id && item.date == that.ticket.date)
|
|
if (index != -1) {
|
|
//判断删除后信息是否也删除了
|
|
|
|
that.allTicket[index] = that.ticket
|
|
uni.setStorageSync('ALL_TICKET', that.allTicket)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
that.allTicket.push(that.ticket)
|
|
uni.setStorageSync('ALL_TICKET', that.allTicket)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
this.needCount = 0
|
|
|
|
} else {
|
|
that.allTicket.push(that.ticket)
|
|
uni.setStorageSync('ALL_TICKET', that.allTicket)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
this.needCount = 0
|
|
|
|
}
|
|
uni.removeStorageSync('oldTicket')
|
|
},
|
|
resetForm() {
|
|
this.customFormData = {
|
|
idx: null,
|
|
name: null,
|
|
phoneNumber: null,
|
|
idCardNumber: null
|
|
}
|
|
},
|
|
editPerson(val) {
|
|
debugger
|
|
if (this.ticket.touristInformation == 2) {
|
|
this.count = 1
|
|
this.editIng = true
|
|
this.editId = val.idx
|
|
this.customFormData = val
|
|
}
|
|
if (this.ticket.touristInformation == 3) {
|
|
// this.count++
|
|
this.editIng = true
|
|
this.editId = val.idx
|
|
this.customFormData = val
|
|
}
|
|
},
|
|
delPerson(val) {
|
|
let that = this
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定删除此名游客信息吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
debugger
|
|
const validItems = that.ticket.visitorInfoList.filter(item => item !== undefined && item !== null);
|
|
const index = validItems.findIndex(item => Number(item.idx) == Number(val.idx))
|
|
that.ticket.visitorInfoList.splice(index, 1)
|
|
if (that.needCount != 0) {
|
|
|
|
if (that.ticket.visitorInfoList.length > that.needCount * that.ticket.usersNumber) {
|
|
that.delNUm--
|
|
that.showAlert = true
|
|
}
|
|
if (that.ticket.visitorInfoList.length == that.needCount * that.ticket.usersNumber) {
|
|
that.showAlert = false
|
|
}
|
|
if (that.ticket.visitorInfoList.length < that.needCount * that.ticket.usersNumber) {
|
|
that.count++
|
|
that.showAlert = false
|
|
}
|
|
} else {
|
|
|
|
if (that.ticket.visitorInfoList.length > that.ticket.num * that.ticket.usersNumber) {
|
|
that.delNUm--
|
|
that.showAlert = true
|
|
}
|
|
if (that.ticket.visitorInfoList.length == that.ticket.num * that.ticket.usersNumber) {
|
|
that.showAlert = false
|
|
}
|
|
if (that.ticket.visitorInfoList.length < that.ticket.num * that.ticket.usersNumber) {
|
|
that.count++
|
|
that.showAlert = false
|
|
}
|
|
}
|
|
|
|
that.resetForm()
|
|
|
|
console.log('用户点击确定');
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
})
|
|
},
|
|
back() {
|
|
this.needCount = 0
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
submit(ref) {
|
|
let that = this;
|
|
this.$refs[ref]
|
|
.validate()
|
|
.then((res) => {
|
|
debugger
|
|
console.log('success', res);
|
|
if (that.customFormData.idx == null) {
|
|
that.count--;
|
|
that.customFormData.idx = that.idx
|
|
that.ticket.visitorInfoList.push(that.customFormData)
|
|
that.idx++
|
|
console.log(that.ticket.visitorInfoList, that.idx)
|
|
} else {
|
|
if (that.editIng == true) {
|
|
that.editIng = false
|
|
this.editId = null
|
|
if (that.ticket.touristInformation == 2) {
|
|
that.count--
|
|
}
|
|
} else {
|
|
that.count--
|
|
}
|
|
// that.ticket.visitorInfoList[that.customFormData.idx] = that.customFormData
|
|
// const sss = that.ticket.visitorInfoList.find(item => item.idx == that.customFormData.idx)
|
|
console.log(that.ticket.visitorInfoList)
|
|
}
|
|
this.resetForm()
|
|
})
|
|
.catch((err) => {
|
|
console.log('err', err);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-content {
|
|
margin: 0 20upx;
|
|
|
|
.m-tips {
|
|
width: fit-content;
|
|
padding: 10upx 20upx;
|
|
border-radius: 10upx;
|
|
margin: 20upx auto;
|
|
|
|
span {
|
|
color: red;
|
|
font-size: 38upx;
|
|
}
|
|
}
|
|
|
|
.orange {
|
|
background: #ffe1cbc7;
|
|
}
|
|
|
|
.blue {
|
|
background: #cbe7ffc7;
|
|
}
|
|
|
|
.m-user-list-box {
|
|
margin-top: 40upx;
|
|
padding-bottom: 300upx;
|
|
|
|
.m-title {
|
|
padding: 10upx;
|
|
background: #fff;
|
|
border-bottom: solid 1upx #ddd;
|
|
}
|
|
|
|
.m-list-item {
|
|
padding: 10px;
|
|
background: #fff;
|
|
margin-bottom: 10px;
|
|
border-radius: 10upx;
|
|
|
|
.m-btn-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.m-btn {
|
|
align-self: center;
|
|
height: 60upx;
|
|
padding: 2upx 5upx;
|
|
line-height: 60upx;
|
|
width: 40%;
|
|
}
|
|
|
|
.del {
|
|
background-color: #ff4c4cc7;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
position: fixed;
|
|
width: 90%;
|
|
bottom: 50upx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.m-btn {
|
|
background-color: #188ffe;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|