CommunityApp/pages/authorize_record/openPass/openPass.vue

<template>
	<view style="background-color: #FFFFFF;height: 100vh;">
		<!--pages/openPass/openPass.wxml-->
		<view class="container edit_wrap">
			<view class="form_group">
				<text class="type">选择房间：</text>
				<view class="ar_picker " style="background:#fff;border-bottom: 1rpx solid #ddd;"
					@click="roomSelectShow=true">
					<view class="ar_picker_wrap">
						<text>{{selectRoomName?selectRoomName:room_list[0].address}}</text>
					</view>
				</view>
			</view>
			<view class="form_group">

				<view class="tui-picker-content">
					<text class="type">访客类型：</text>
					<view class="flex between itemBox">
						<view v-for="(item, index) in guestTypeArray" :key="index"
							:class="guestTypeIndex == index ? 'active':''" @tap="guestTypethis" :data-thisindex="index">
							<text>{{item}}</text>
						</view>
					</view>

				</view>

			</view>
			<view class="form_group">
				<view class="tui-picker-content">
					<text class="type">授权有效时间：</text>
					<view class="flex between itemBox">
						<view v-for="(item, index) in numArray" :key="index" :class="activeIndex == index ? 'active':''"
							@tap="activethis" :data-thisindex="index">
							<text>{{item}}小时</text>
						</view>
					</view>

				</view>
			</view>
			<view @tap="getGuestAuthorize" class=" footer-fixed " style="z-index: 99;"
				:style="{marginBottom:safeAreaBottom + 'rpx'}">
				<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
					确认授权
				</view>
			</view>
		</view>


		<!--弹窗-->
		<view class="modal-mask" @tap="closeModal" catchtouchmove="preventTouchMove" v-if="showModal"></view>
		<view class="modal-dialog" v-if="showModal">
			<view class="modal-title">提示</view>
			<view class="modal-content">
				<view class="modal-input">
					<text class="password">授权成功，请转发给好友填写表单</text>
				</view>
			</view>
			<view class="modal-footer">
				<button class="btn-confirm" @click="showModal=false" data-status="confirm">暂不转发</button>
				<button class="btn-cancel" open-type="share" data-status="cancel">立即转发</button>
			</view>
		</view>
		<u-select z-index="999" mode="single-column" value-name="id" label-name="address" v-model="roomSelectShow"
			:list="room_list" @confirm="roomChange"></u-select>
	</view>
</template>

<script>
	// 访客授权
	//获取app实例
	var app = getApp();
	var util = require("../../../utils/util.js");

	export default {
		data() {
			return {
				//是否需要审核通过访客表单后才能开门
				doorNeedAudit: 0,

				roomSelectShow: false,
				selectRoomName: '',
				selectRoomId: 0,

				//授权记录 的id
				id: '',

				room_list: null,
				minusStatus: 'disable',
				//获取开门密码
				showModal: false,
				//访客类型
				guestTypeIndex: 0,
				//默认选中第一个
				guestTypeArray: ['朋友', '外卖', '快递', '其他'],
				//密码有效期
				activeIndex: 0,
				//默认选中第一个
				numArray: [1, 2, 5, 8, 24, 48],
				begin_date: "",
				end_date: ""
			};
		},

		components: {},
		props: {},

		/**
		 * 监听页面加载
		 */
		onLoad() {
			this.doorNeedAudit = uni.getStorageSync("doorNeedAudit")
			//禁用头部分享
			uni.hideShareMenu({});
			//获取房屋信息
			this.geRoomByMemberId();
		},

		onShareAppMessage: function(ops) {
			this.showModal = false
			let roomName = this.selectRoomName ? this.selectRoomName : this.room_list[0].name
			let title = `访问房间：${roomName};
					     开始日期：${this.begin_date};
						 结束日期：${this.end_date}`
			return {
				title: title,
				path: "/pages/guest/guest_form?id=" + this.id + "&doorNeedAudit=" + this.doorNeedAudit + "&memberId=" +
					app.globalData.member.id,
				imageUrl: "/static/clock.png"
			};
		},
		methods: {
			//选择房间
			roomChange: function(e) {
				console.log(e, "e");
				this.selectRoomId = e[0].value
				this.selectRoomName = e[0].label
			},
			//访客类型
			guestTypethis: function(event) {
				//点击选中事件
				var thisindex = event.currentTarget.dataset.thisindex; //当前index

				this.setData({
					guestTypeIndex: thisindex
				});
			},
			//密码有效时间
			activethis: function(event) {
				//点击选中事件
				var thisindex = event.currentTarget.dataset.thisindex; //当前index

				this.setData({
					activeIndex: thisindex
				});
			},
			//关闭弹窗
			closeModal: function() {
				this.setData({
					showModal: false
				});
			},
			//获取开门密码
			getGuestAuthorize: function() {
				let avalidTime = this.numArray[this.activeIndex]
				let beginDate = new Date()
				let endDate = new Date()
				endDate.setHours(endDate.getHours() + avalidTime)
				let params = {
					roomId: this.selectRoomId,
					beginDate: this.$u.timeFormat(beginDate, 'yyyy-mm-dd hh:MM:ss'),
					endDate: this.$u.timeFormat(endDate, 'yyyy-mm-dd hh:MM:ss'),
					memberId: this.vuex_member.id,
					userName: this.vuex_member.name,
					guestType: this.guestTypeIndex
				}
				this.$http.addGuestAuthorize(params).then(res => {
					if (res.data.success) {
						uni.setStorageSync("isFlush", true);
						this.showModal = true,
							this.id = res.data.data.id,
							this.begin_date = res.data.data.beginDate,
							this.end_date = res.data.data.endDate
					} else {
						app.globalData.oneFailHint(res.data.msg);
					}
				});
			},
			//根据会员id获取我的房屋列表
			geRoomByMemberId: function() {
				let params = {
					id: getApp().globalData.member.id,
					residentialId: uni.getStorageSync('residentialId')
				}
				this.$http.getRoomByMemberId(params).then(res => {
					let records = res.data.data
					if (this.$isNotEmpty(records)) {
						records.forEach(item => {
							item.address =
								`${item.residentialName}-${item.buildingName}-${item.unitName}-${item.name}`
						})
						this.room_list = records
						this.selectRoomId = this.room_list[0].id
						this.selectRoomName = this.room_list[0].address
						app.globalData.room_list = records
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.edit_wrap {
		font-size: 30rpx;
		color: #333;
	}

	.form_group {
		margin: 0 20rpx;
		line-height: 60rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.form_group input,
	.form_group picker {
		width: 100%;
		border-bottom: 1px solid #ddd;
		color: $base-btn-color;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0rpx 20rpx;
	}

	.ar_picker_wrap picker {
		width: 100%;
		box-sizing: border-box;
	}

	.tui-picker-content picker {
		width: 260rpx;
		display: inline-block;
		padding: 0 10rpx;
	}

	.tui-picker-content .time_text {
		margin: 0 20rpx;
	}

	/*主容器*/

	.stepper {
		width: 214rpx;
		height: 60rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		background: #fff;
		margin-top: 10rpx;
	}

	/*加号和减号*/

	.stepper text {
		float: left;
		width: 70rpx;
		line-height: 52rpx;
		text-align: center;
	}

	/*数值*/

	.stepper input {
		width: 70rpx;
		height: 60rpx;
		float: left;
		margin: 0 auto;
		text-align: center;
		font-size: 12px;
		border: none;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		padding: 0;
		border-radius: 0;
		color: $base-btn-color;
	}

	/*普通样式*/

	.stepper .normal {
		color: black;
	}

	/*禁用样式*/

	.stepper .disable {
		color: #ccc;
	}

	.get_code {
		padding: 0rpx 60rpx;
		position: fixed;
		bottom: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.ar_book {
		background: $base-btn-color;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;
		margin: 40rpx 0rpx 10rpx;
		padding: 0rpx 60rpx;
	}

	.show-btn {
		margin-top: 100rpx;
		color: #2c2;
	}

	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 9000;
		color: #fff;
	}

	.modal-dialog {
		width: 540rpx;
		overflow: hidden;
		position: fixed;
		top: 45%;
		left: 0;
		z-index: 9999;
		background: #f9f9f9;
		margin: -180rpx 105rpx;
		border-radius: 36rpx;
	}

	.modal-title {
		padding-top: 50rpx;
		font-size: 36rpx;
		color: #030303;
		text-align: center;
	}

	.modal-content {
		padding: 60rpx 0;
	}

	.modal-input {
		display: flex;
		font-size: 30rpx;
	}

	.password {
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #606266;
		text-align: center;
	}

	input-holder {
		color: #666;
		font-size: 28rpx;
	}

	.modal-footer {
		display: flex;
		flex-direction: row;
		height: 86rpx;
		border-top: 1px solid #dedede;
		font-size: 34rpx;
		line-height: 86rpx;
	}

	.modal-footer button::after {
		border: none;

	}

	.modal-footer .btn-cancel {
		width: 50%;
		color: #2a7fff;
		text-align: center;
		border-right: 1px solid #dedede;
		border-radius: 0;
	}

	.modal-footer .btn-confirm {
		width: 50%;
		color: #666;
		text-align: center;
	}

	/* 密码有效期 */

	.itemBox {
		flex-flow: wrap;
	}

	.itemBox view {
		width: 30%;
		box-sizing: border-box;
		margin: 10rpx;
	}

	.itemBox view.active text {
		background: $base-btn-color;
		color: #fff;
	}

	.itemBox view text {
		text-align: center;
		width: 100%;
		background: #fff;
		color: $base-btn-color;
		font-size: 28rpx;
		display: inline-block;
		border: 2rpx solid $base-btn-color;
		border-radius: 40rpx;
	}
</style>