1、优化访客登记,增加车辆信息2、页面显示问题

This commit is contained in:
905166056 2022-04-12 10:46:29 +08:00
parent 74a3ec2aed
commit 83fdbcad96
11 changed files with 1414 additions and 2 deletions

View File

@ -119,6 +119,11 @@ export function getCategoryList() {
name: "投票问卷",
src: "/static/images/index_Voting.png",
href: "/pages/questionAnswer/questionAnswer"
},
{
name: "访客登记",
src: "/static/images/index_complaint.png",
href: "/pages/visit/addVisit"
}
]

View File

@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif

View File

@ -0,0 +1,903 @@
<template>
<view class="uni-datetime-picker">
<view @click="initTimePicker">
<slot>
<view class="uni-datetime-picker-timebox-pointer"
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
<text class="uni-datetime-picker-text">{{time}}</text>
<view v-if="!time" class="uni-datetime-picker-time">
<text class="uni-datetime-picker-text">选择{{title}}</text>
</view>
</view>
</slot>
</view>
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']" :style="fixNvueBug">
<view class="uni-title">
<text class="uni-datetime-picker-text">设置{{title}}</text>
</view>
<view v-if="dateShow" class="uni-datetime-picker__container-box">
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
@change="bindDateChange">
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
</picker-view>
<!-- 兼容 nvue 不支持伪类 -->
<text class="uni-datetime-picker-sign sign-left">-</text>
<text class="uni-datetime-picker-sign sign-right">-</text>
</view>
<view v-if="timeShow" class="uni-datetime-picker__container-box">
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
<picker-view-column v-if="!hideSecond">
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
</view>
</picker-view-column>
</picker-view>
<!-- 兼容 nvue 不支持伪类 -->
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
</view>
<view class="uni-datetime-picker-btn">
<view @click="clearTime">
<text class="uni-datetime-picker-btn-text">清空</text>
</view>
<view class="uni-datetime-picker-btn-group">
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
<text class="uni-datetime-picker-btn-text">取消</text>
</view>
<view @click="setTime">
<text class="uni-datetime-picker-btn-text">确定</text>
</view>
</view>
</view>
</view>
<!-- #ifdef H5 -->
<keypress v-if="visible" @esc="tiggerTimePicker" @enter="setTime" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress'
// #endif
/**
* DatetimePicker 时间选择器
* @description 可以同时选择日期和时间的选择器
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
* @property {String} type = [datetime | date | time] 显示模式
* @property {Boolean} multiple = [true|false] 是否多选
* @property {String|Number} value 默认值
* @property {String|Number} start 起始日期或时间
* @property {String|Number} end 起始日期或时间
* @property {String} return-type = [timestamp | string]
* @event {Function} change 选中发生变化触发
*/
export default {
name: 'UniDatetimePicker',
components: {
// #ifdef H5
keypress
// #endif
},
data() {
return {
indicatorStyle: `height: 50px;`,
visible: false,
fixNvueBug: {},
dateShow: true,
timeShow: true,
title: '日期和时间',
//
time: '',
//
year: 1900,
month: 0,
day: 0,
hour: 0,
minute: 0,
second: 0,
//
startYear: 1920,
startMonth: 1,
startDay: 1,
startHour: 0,
startMinute: 0,
startSecond: 0,
//
endYear: 2120,
endMonth: 12,
endDay: 31,
endHour: 23,
endMinute: 59,
endSecond: 59,
}
},
props: {
type: {
type: String,
default: 'datetime'
},
value: {
type: [String, Number],
default: ''
},
start: {
type: [Number, String],
default: ''
},
end: {
type: [Number, String],
default: ''
},
returnType: {
type: String,
default: 'string'
},
disabled: {
type: [Boolean, String],
default: false
},
border: {
type: [Boolean, String],
default: true
},
hideSecond: {
type: [Boolean, String],
default: false
}
},
watch: {
value: {
handler(newVal, oldVal) {
if (newVal) {
this.parseValue(this.fixIosDateFormat(newVal)) // iOSsafari
this.initTime(false)
} else {
this.parseValue(Date.now())
}
},
immediate: true
},
type: {
handler(newValue) {
if (newValue === 'date') {
this.dateShow = true
this.timeShow = false
this.title = '日期'
} else if (newValue === 'time') {
this.dateShow = false
this.timeShow = true
this.title = '时间'
} else {
this.dateShow = true
this.timeShow = true
this.title = '日期和时间'
}
},
immediate: true
},
start: {
handler(newVal) {
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') // iOSsafari
},
immediate: true
},
end: {
handler(newVal) {
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') // iOSsafari
},
immediate: true
},
//
months(newVal) {
this.checkValue('month', this.month, newVal)
},
days(newVal) {
this.checkValue('day', this.day, newVal)
},
hours(newVal) {
this.checkValue('hour', this.hour, newVal)
},
minutes(newVal) {
this.checkValue('minute', this.minute, newVal)
},
seconds(newVal) {
this.checkValue('second', this.second, newVal)
}
},
created() {
this.form = this.getForm('uniForms')
this.formItem = this.getForm('uniFormsItem')
if (this.formItem) {
if (this.formItem.name) {
this.rename = this.formItem.name
this.form.inputChildrens.push(this)
}
}
},
computed: {
//
years() {
return this.getCurrentRange('year')
},
months() {
return this.getCurrentRange('month')
},
days() {
return this.getCurrentRange('day')
},
hours() {
return this.getCurrentRange('hour')
},
minutes() {
return this.getCurrentRange('minute')
},
seconds() {
return this.getCurrentRange('second')
},
// picker
ymd() {
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
},
hms() {
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
},
// date start
currentDateIsStart() {
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
},
// date end
currentDateIsEnd() {
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
},
//
minYear() {
return this.startYear
},
maxYear() {
return this.endYear
},
minMonth() {
if (this.year === this.startYear) {
return this.startMonth
} else {
return 1
}
},
maxMonth() {
if (this.year === this.endYear) {
return this.endMonth
} else {
return 12
}
},
minDay() {
if (this.year === this.startYear && this.month === this.startMonth) {
return this.startDay
} else {
return 1
}
},
maxDay() {
if (this.year === this.endYear && this.month === this.endMonth) {
return this.endDay
} else {
return this.daysInMonth(this.year, this.month)
}
},
minHour() {
if (this.type === 'datetime') {
if (this.currentDateIsStart) {
return this.startHour
} else {
return 0
}
}
if (this.type === 'time') {
return this.startHour
}
},
maxHour() {
if (this.type === 'datetime') {
if (this.currentDateIsEnd) {
return this.endHour
} else {
return 23
}
}
if (this.type === 'time') {
return this.endHour
}
},
minMinute() {
if (this.type === 'datetime') {
if (this.currentDateIsStart && this.hour === this.startHour) {
return this.startMinute
} else {
return 0
}
}
if (this.type === 'time') {
if (this.hour === this.startHour) {
return this.startMinute
} else {
return 0
}
}
},
maxMinute() {
if (this.type === 'datetime') {
if (this.currentDateIsEnd && this.hour === this.endHour) {
return this.endMinute
} else {
return 59
}
}
if (this.type === 'time') {
if (this.hour === this.endHour) {
return this.endMinute
} else {
return 59
}
}
},
minSecond() {
if (this.type === 'datetime') {
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
return this.startSecond
} else {
return 0
}
}
if (this.type === 'time') {
if (this.hour === this.startHour && this.minute === this.startMinute) {
return this.startSecond
} else {
return 0
}
}
},
maxSecond() {
if (this.type === 'datetime') {
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
return this.endSecond
} else {
return 59
}
}
if (this.type === 'time') {
if (this.hour === this.endHour && this.minute === this.endMinute) {
return this.endSecond
} else {
return 59
}
}
}
},
mounted() {
// #ifdef APP-NVUE
const res = uni.getSystemInfoSync();
this.fixNvueBug = {
top: res.windowHeight / 2,
left: res.windowWidth / 2
}
// #endif
},
methods: {
/**
* @param {Object} item
* 小于 10 在前面加个 0
*/
lessThanTen(item) {
return item < 10 ? '0' + item : item
},
/**
* 获取父元素实例
*/
getForm(name = 'uniForms') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
/**
* 解析时分秒字符串例如00:00:00
* @param {String} timeString
*/
parseTimeType(timeString) {
if (timeString) {
let timeArr = timeString.split(':')
this.hour = Number(timeArr[0])
this.minute = Number(timeArr[1])
this.second = Number(timeArr[2])
}
},
/**
* 解析选择器初始值类型可以是字符串时间戳例如2000-10-02'08:30:00' 1610695109000
* @param {String | Number} datetime
*/
initPickerValue(datetime) {
let defaultValue = null
if (datetime) {
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
} else {
defaultValue = Date.now()
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
}
this.parseValue(defaultValue)
},
/**
* 初始值规则
* - 用户设置初始值 value
* - 设置了起始时间 start终止时间 end start < value < end初始值为 value 否则初始值为 start
* - 只设置了起始时间 start start < value初始值为 value否则初始值为 start
* - 只设置了终止时间 end value < end初始值为 value否则初始值为 end
* - 无起始终止时间则初始值为 value
* - 无初始值 value则初始值为当前本地时间 Date.now()
* @param {Object} value
* @param {Object} dateBase
*/
compareValueWithStartAndEnd(value, start, end) {
let winner = null
value = this.superTimeStamp(value)
start = this.superTimeStamp(start)
end = this.superTimeStamp(end)
if (start && end) {
if (value < start) {
winner = new Date(start)
} else if (value > end) {
winner = new Date(end)
} else {
winner = new Date(value)
}
} else if (start && !end) {
winner = start <= value ? new Date(value) : new Date(start)
} else if (!start && end) {
winner = value <= end ? new Date(value) : new Date(end)
} else {
winner = new Date(value)
}
return winner
},
/**
* 转换为可比较的时间戳接受日期时分秒时间戳
* @param {Object} value
*/
superTimeStamp(value) {
let dateBase = ''
if (this.type === 'time' && value && typeof value === 'string') {
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
dateBase = year + '/' + month + '/' + day + ' '
}
if (Number(value) && typeof value !== NaN) {
value = parseInt(value)
dateBase = 0
}
return this.createTimeStamp(dateBase + value)
},
/**
* 解析默认值 value字符串时间戳
* @param {Object} defaultTime
*/
parseValue(value) {
if (!value) return
if (this.type === 'time' && typeof value === "string") {
this.parseTimeType(value)
} else {
let defaultDate = null
defaultDate = new Date(value)
if (this.type !== 'time') {
this.year = defaultDate.getFullYear()
this.month = defaultDate.getMonth() + 1
this.day = defaultDate.getDate()
}
if (this.type !== 'date') {
this.hour = defaultDate.getHours()
this.minute = defaultDate.getMinutes()
this.second = defaultDate.getSeconds()
}
}
if (this.hideSecond) {
this.second = 0
}
},
/**
* 解析可选择时间范围 startend年月日字符串时间戳
* @param {Object} defaultTime
*/
parseDatetimeRange(point, pointType) {
if (point && this.type === 'time') {
const pointArr = point.split(':')
this[pointType + 'Hour'] = Number(pointArr[0])
this[pointType + 'Minute'] = Number(pointArr[1])
this[pointType + 'Second'] = Number(pointArr[2])
} else {
if (!point) {
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
return
}
if (Number(point) && Number(point) !== NaN) {
point = parseInt(point)
}
// datetime end ,
const hasTime = /[0-9]:[0-9]/
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
point)) {
point = point + ' 23:59:59'
}
const pointDate = new Date(point)
this[pointType + 'Year'] = pointDate.getFullYear()
this[pointType + 'Month'] = pointDate.getMonth() + 1
this[pointType + 'Day'] = pointDate.getDate()
if (this.type === 'datetime') {
this[pointType + 'Hour'] = pointDate.getHours()
this[pointType + 'Minute'] = pointDate.getMinutes()
this[pointType + 'Second'] = pointDate.getSeconds()
}
}
},
//
getCurrentRange(value) {
const range = []
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
range.push(i)
}
return range
},
//
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
//
checkValue(name, value, values) {
if (values.indexOf(value) === -1) {
this[name] = values[0]
}
},
//
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
return new Date(year, month, 0).getDate();
},
// iOSsafari
fixIosDateFormat(value) {
if (typeof value === 'string') {
value = value.replace(/-/g, '/')
}
return value
},
/**
* 生成时间戳
* @param {Object} time
*/
createTimeStamp(time) {
if (!time) return
if (typeof time === "number") {
return time
} else {
time = time.replace(/-/g, '/')
if (this.type === 'date') {
time = time + ' ' + '00:00:00'
}
return Date.parse(time)
}
},
/**
* 生成日期或时间的字符串
*/
createDomSting() {
const yymmdd = this.year +
'-' +
this.lessThanTen(this.month) +
'-' +
this.lessThanTen(this.day)
let hhmmss = this.lessThanTen(this.hour) +
':' +
this.lessThanTen(this.minute)
if(!this.hideSecond) {
hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
}
if (this.type === 'date') {
return yymmdd
} else if (this.type === 'time') {
return hhmmss
} else {
return yymmdd + ' ' + hhmmss
}
},
/**
* 初始化返回值并抛出 change 事件
*/
initTime(emit = true) {
this.time = this.createDomSting()
if (!emit) return
if (this.returnType === 'timestamp' && this.type !== 'time') {
this.formItem && this.formItem.setValue(this.createTimeStamp(this.time))
this.$emit('change', this.createTimeStamp(this.time))
this.$emit('input', this.createTimeStamp(this.time))
} else {
this.formItem && this.formItem.setValue(this.time)
this.$emit('change', this.time)
this.$emit('input', this.time)
}
},
/**
* 用户选择日期或时间更新 data
* @param {Object} e
*/
bindDateChange(e) {
const val = e.detail.value
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
},
bindTimeChange(e) {
const val = e.detail.value
this.hour = this.hours[val[0]]
this.minute = this.minutes[val[1]]
this.second = this.seconds[val[2]]
},
/**
* 初始化弹出层
*/
initTimePicker() {
if (this.disabled) return
const value = this.fixIosDateFormat(this.value)
this.initPickerValue(value)
this.visible = !this.visible
},
/**
* 触发或关闭弹框
*/
tiggerTimePicker(e) {
this.visible = !this.visible
},
/**
* 用户点击清空按钮清空当前值
*/
clearTime() {
this.time = ''
this.formItem && this.formItem.setValue(this.time)
this.$emit('change', this.time)
this.$emit('input', this.time)
this.tiggerTimePicker()
},
/**
* 用户点击确定按钮
*/
setTime() {
this.initTime()
this.tiggerTimePicker()
}
}
}
</script>
<style>
.uni-datetime-picker {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
}
.uni-datetime-picker-view {
height: 130px;
width: 270px;
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
}
.uni-datetime-picker-item {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
}
.uni-datetime-picker-btn {
margin-top: 60px;
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
flex-direction: row;
justify-content: space-between;
}
.uni-datetime-picker-btn-text {
font-size: 14px;
color: #007AFF;
}
.uni-datetime-picker-btn-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-datetime-picker-cancel {
margin-right: 30px;
}
.uni-datetime-picker-mask {
position: fixed;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.3s;
z-index: 998;
}
.uni-datetime-picker-popup {
border-radius: 8px;
padding: 30px;
width: 270px;
/* #ifdef APP-NVUE */
height: 500px;
/* #endif */
/* #ifdef APP-NVUE */
width: 330px;
/* #endif */
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition-duration: 0.3s;
z-index: 999;
}
.fix-nvue-height {
/* #ifdef APP-NVUE */
height: 330px;
/* #endif */
}
.uni-datetime-picker-time {
color: grey;
}
.uni-datetime-picker-column {
height: 50px;
}
.uni-datetime-picker-timebox {
border: 1px solid #E5E5E5;
border-radius: 5px;
padding: 7px 10px;
/* #ifndef APP-NVUE */
box-sizing: border-box;
cursor: pointer;
/* #endif */
}
.uni-datetime-picker-timebox-pointer {
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
}
.uni-datetime-picker-disabled {
opacity: 0.4;
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
}
.uni-datetime-picker-text {
font-size: 14px;
}
.uni-datetime-picker-sign {
position: absolute;
top: 53px;
/* 减掉 10px 的元素高度兼容nvue */
color: #999;
/* #ifdef APP-NVUE */
font-size: 16px;
/* #endif */
}
.sign-left {
left: 86px;
}
.sign-right {
right: 86px;
}
.sign-center {
left: 135px;
}
.uni-datetime-picker__container-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.time-hide-second {
width: 180px;
}
</style>

View File

@ -163,6 +163,7 @@ const queryApplyRoomDiscountType = baseUrl + 'app/applyRoomDiscount/queryApplyRo
const saveApplyRoomDiscount = baseUrl + 'app/applyRoomDiscount/saveApplyRoomDiscount';
const queryFeeDiscount = baseUrl + 'app/feeDiscount/queryFeeDiscount';
const saveRoomRenovation = baseUrl + 'app/roomRenovation/saveRoomRenovation';
const saveAddVisit = baseUrl + "callComponent/addVisit/save";
@ -262,4 +263,5 @@ module.exports = {
saveApplyRoomDiscount: saveApplyRoomDiscount,
queryFeeDiscount: queryFeeDiscount,
saveRoomRenovation: saveRoomRenovation,
saveAddVisit: saveAddVisit,
};

View File

@ -144,6 +144,7 @@ export default {
queryHousekeepingType: baseUrl + 'app/housekeepingType/queryHousekeepingType',
queryMainCategory: baseUrl + "app/productCategory/queryMainCategoryAllGoods",
queryShopCommunity: baseUrl + "app/shop/queryShopCommunity",
saveAddVisit: baseUrl + "callComponent/addVisit/save",
NEED_NOT_LOGIN_PAGE: [
'pages/login/login',

View File

@ -652,6 +652,24 @@
"enablePullDownRefresh": false
}
},
{
"path" : "pages/visit/addVisit",
"style" :
{
"navigationBarTitleText": "访客登记",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/visit/addVisitSuccess",
"style" :
{
"navigationBarTitleText": "登记成功",
"enablePullDownRefresh": false
}
}
],
"tabBar": {

View File

@ -18,9 +18,9 @@
<input v-model="msgCode" placeholder="请输入短信验证码" name="input"></input>
<button class='cu-btn bg-green shadow' :disabled="btnDisabled" @click="sendMsgCode()">{{btnValue}}</button>
</view>
<view >
<!-- <view >
<view >{{codeMsg}}</view>
</view>
</view> -->
<view class="padding flex flex-direction margin-top">
<button class="cu-btn bg-green lg" @click="_doRegister()">绑定</button>
</view>

10
pages/visit/addVisit.css Normal file
View File

@ -0,0 +1,10 @@
.block__title {
margin: 0;
font-weight: 400;
font-size: 14px;
color: rgba(69, 90, 100, .6);
padding: 40rpx 30rpx 20rpx;
}
.button_up_blank {
height: 40rpx;
}

342
pages/visit/addVisit.vue Normal file
View File

@ -0,0 +1,342 @@
<template>
<view>
<view class="block__title">房屋信息</view>
<view class="cu-form-group">
<view class="title">房屋信息</view>
<picker :range="roomCloums" @change="roomChange">
<view class="picker">
{{roomName?roomName:'请选择'}}
</view>
</picker>
</view>
<view class="block__title">访客信息</view>
<view class="cu-form-group">
<view class="title">访客姓名</view>
<input v-model="vName" placeholder="请输入访客姓名" class="text-right"></input>
</view>
<view class="cu-form-group">
<view class="title">访客性别</view>
<picker :value="visitGenderIndex" :range="visitGenderScopes" :range-key="'name'" @change="visitGenderChange">
<view class="picker">
{{visitGenderScopes[visitGenderIndex].name}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">访客联系方式</view>
<input v-model="phoneNumber" placeholder="请输入访客联系方式" class="text-right"></input>
</view>
<view class="cu-form-group">
<view class="title">访客车牌号</view>
<input v-model="carNum" placeholder="请输入访客车牌号" class="text-right"></input>
</view>
<view class="cu-form-group">
<view class="title">随行人数</view>
<input v-model="entourage" placeholder="请输入随行人数" class="text-right"></input>
</view>
<view class="cu-form-group">
<view class="title">开始时间</view>
<uni-datetime-picker v-model="visitTime" :disabled="true"></uni-datetime-picker>
</view>
<view class="cu-form-group">
<view class="title">结束时间</view>
<uni-datetime-picker v-model="departureTime"></uni-datetime-picker>
</view>
<view class="block__title">拜访事由</view>
<view class="cu-form-group">
<view class="title">事由类型</view>
<picker :value="reasonTypeIndex" :range="reasonTypeScopes" :range-key="'name'" @change="reasonTypeChange">
<view class="picker">
{{reasonTypeScopes[reasonTypeIndex].name}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">拜访事由</view>
<input v-model="visitCase" placeholder="请输入拜访事由" class="text-right"></input>
</view>
<view class="block__title">照片信息</view>
<view class="cu-bar bg-white ">
<view class="action">
照片上传
</view>
<view class="action">
{{imgList.length}}/1
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(img,index) in imgList" :key='index' bindtap="ViewImage" :data-url="imgList[index]">
<image :src='imgList[index]' mode='aspectFill'></image>
<view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="index">
<text class="cuIcon-close"></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
<text class="cuIcon-cameraadd"></text>
</view>
</view>
</view>
<view class="button_up_blank"></view>
<view class="flex flex-direction">
<button class="cu-btn bg-green margin-tb-sm lg" @click="submitVisit()">提交</button>
</view>
</view>
</template>
<script>
// pages/visit/addVisit.js
import context from '../../lib/java110/Java110Context.js';
const factory = context.factory;
const constant = context.constant;
import uniDatetimePicker from '../../components/uni-datetime-picker/uni-datetime-picker.vue'
import {formatTimeNow} from '../../lib/java110/utils/DateUtil.js'
import {checkPhoneNumber,checkStrLength} from '../../lib/java110/utils/StringUtil.js'
import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
export default {
data() {
return {
vName: '',
phoneNumber: '',
visitGender: 0,
visitGenderIndex: 0,
visitGenderScopes: [{
value: '0',
name: '男'
},
{
value: '1',
name: '女'
}
],
carNum: '',
entourage: '',
visitTime: '',
departureTime: '',
visitCase: '',
reasonType: 0,
reasonTypeIndex: 0,
reasonTypeScopes: [{
value: '0',
name: '喜事'
},
{
value: '1',
name: '白事'
}
],
roomCloums: [],
roomIdArr: [],
ownerId: '',
communityId: '',
roomId: '',
roomName: '',
imgList: [],
photos: [],
};
},
components: {
uniDatetimePicker
},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that = this;
context.onLoad(options);
this.visitTime = formatTimeNow();
//
context.getRooms().then(res => {
let arr = res.data.rooms;
let roomCloums = [];
let roomIdArr = [];
arr.map(item => {
roomCloums.push(item.floorNum + "号楼" + item.unitNum + "单元" + item.roomNum + "室");
roomIdArr.push(item.roomId);
})
that.roomCloums = roomCloums;
that.roomIdArr = roomIdArr;
that.ownerId = res.data.owner.ownerId;
that.communityId = res.data.owner.communityId;
});
},
methods: {
//
visitGenderChange: function(e){
this.visitGenderIndex = e.target.value
this.visitGender = this.visitGenderScopes[this.visitGenderIndex].value;
},
reasonTypeChange: function(e){
this.reasonTypeIndex = e.target.value
this.reasonType = this.reasonTypeScopes[this.reasonTypeIndex].value;
},
roomChange: function(e) {
this.roomId = this.roomIdArr[e.detail.value];
this.roomName = this.roomCloums[e.detail.value];
},
//
deleteImage: function(e) {
this.imgList.splice(e, 1);
this.photos.splice(e, 1);
},
ChooseImage: function(e) {
let that = this;
wx.chooseImage({
count: 1, //9
sizeType: ['compressed'], //
sourceType: ['album','camera'], //
success: (res) => {
that.imgList.push(res.tempFilePaths[0]);
var tempFilePaths = res.tempFilePaths[0]
//#ifdef H5
TanslateImage.translate(tempFilePaths, (url) => {
that.photos.push(url);
})
//#endif
//#ifdef MP-WEIXIN
factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
that.photos.push(_res);
});
//#endif
}
});
},
//
submitVisit: function(){
let obj = {
roomId: this.roomId,
roomName: this.roomName,
vName: this.vName,
visitGender: this.visitGender,
phoneNumber: this.phoneNumber,
carNum: this.carNum,
entourage: this.entourage,
visitTime: this.visitTime.replace(/\//g, '-'),
departureTime: this.departureTime,
reasonType: this.reasonType,
visitCase: this.visitCase,
photo: '',
videoPlaying: false,
ownerId: this.ownerId,
communityId: this.communityId
};
if(this.photos.length > 0){
obj.photo = this.photos[0];
}
console.log(obj);
let msg = "";
if (obj.roomId == "") {
msg = "请选择房屋";
} else if (obj.vName == "") {
msg = "请填写访客姓名";
} else if (checkStrLength(obj.vName) > 10) {
msg = "访客姓名过长";
} else if (obj.phoneNumber == "") {
msg = "请填写手机号";
} else if (!checkPhoneNumber(obj.phoneNumber)) {
msg = "手机号有误";
} else if (obj.entourage == "") {
msg = "请填写随行人数";
} else if (!/^\d+$/.test(obj.entourage) && obj.entourage != 0){
msg = "随行人数有误";
} else if (obj.departureTime == "") {
msg = "请选择结束时间";
} else if (obj.visitCase == "") {
msg = "请填写拜访事由";
}else{
let start = Date.parse(new Date(obj.visitTime.replace(/-/g, '/')))
let end = Date.parse(new Date(obj.departureTime.replace(/-/g, '/')))
if (end == 0 || start - end >= 0) {
msg = "结束时间有误";
}
}
if (msg != "") {
wx.showToast({
title: msg,
icon: 'none',
duration: 2000
});
return;
}
context.request({
url: constant.url.saveAddVisit,
header: context.getHeaders(),
method: "POST",
data: obj, //
success: function(res) {
let _json = res.data;
if (_json.code == 0) {
wx.redirectTo({
url: '/pages/visit/addVisitSuccess',
});
return;
}
wx.showToast({
title: _json.msg,
icon: 'none',
duration: 2000
})
},
fail: function(e) {
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
})
}
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {}
};
</script>
<style>
@import "./addVisit.css";
</style>

View File

@ -0,0 +1,8 @@
.scs-t{
width: 100%;
text-align: center;
margin: 100rpx auto;
font-size: 40rpx;
font-weight: bold;
color: #39B54A;
}

View File

@ -0,0 +1,78 @@
<template>
<view>
<view class="scs-t">登记成功</view>
<view class="flex flex-direction fixed-bottom" style="width: 100%;">
<button class="cu-btn bg-green margin-tb-sm lg" @click="toIndex()">返回首页</button>
</view>
</view>
</template>
<script>
// pages/visit/addVisitSuccess.js
import context from '../../lib/java110/Java110Context.js';
export default {
data() {
return {
};
},
components: {},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
context.onLoad(options);
},
methods: {
toIndex: function(){
uni.switchTab({
url:'/pages/index/index'
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {}
};
</script>
<style>
@import "./addVisitSuccess.css";
</style>