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].name}}</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 class="submit_btn">
 <button class="ar_btn" @tap="getGuestAuthorize">获取开门密码</button>
</view> -->
<view @tap="getGuestAuthorize" class=" footer-fixed" style="z-index: 99;">
	<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="name" 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({});
    let room_list = app.globalData.room_list;
    if (this.$isEmpty(room_list)) {
		//获取房屋信息
		this.geRoomByMemberId();
    } else {
		//当前选择的小区
		let residentialId=uni.getStorageSync("residentialId")
		let room_list_new=[]
		room_list.forEach(item=>{
			if (item.residentialId==residentialId) {
				room_list_new.push(item)
			}
		})
		this.room_list=room_list_new
		this.selectRoomId=room_list[0].id
    }
 },

  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;
	// console.log("id:"+this.id+";doorNeedAudit="+this.doorNeedAudit+";memberId="+app.globalData.member.id);
    return {
      title: title,
      path: "/pages/guest/guest_form?id="+this.id+"&doorNeedAudit="+this.doorNeedAudit+"&memberId="+app.globalData.member.id,
      imageUrl: "http://139.9.103.171:1888/img/image/ps_bg.png"
    };
  },
  methods: {
    //选择房间
    roomChange: function (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 that = this;
      let params = {};
      params['member_id'] = app.globalData.member.id;
      params['room_id'] = that.selectRoomId;
      params['guest_type'] = that.guestTypeIndex;

      let avalid_num = that.numArray[that.activeIndex]; //有效开始时间

      let begin_date = new Date();

      // begin_date.setMinutes(begin_date.getMinutes() - 30);
      params['begin_date'] = util.getTimestamp(begin_date); //有效结束时间

      let end_date = new Date(); //小时累加

      end_date.setHours(end_date.getHours() + avalid_num);
      params['end_date'] = util.getTimestamp(end_date); //有效次数

	  console.log(that.params);
      let operation = 'guestAuthorize/getGuestAuthorize';
      app.globalData.postRequest(params, operation, function (res) {
        console.info("接口返回结果：" + res.data.result_msg); //获取成功

        if (res.data.result_code == 1) {
          uni.setStorageSync("isFlush", true);
          that.setData({
            //显示复制密码弹窗
            showModal: true,
            id: res.data.guestAuthorize.id,
            begin_date: util.formatTime(res.data.guestAuthorize.beginDate),
            end_date: util.formatTime(res.data.guestAuthorize.endDate)
          });
        } else {
          app.globalData.oneFailHint(res.data.result_msg);
        }
      });
    },
    //根据会员id获取我的房屋列表
    geRoomByMemberId: function () {
      let that = this;
      let params = {};
      params['member_id'] = app.globalData.member.id;
      let operation = 'estate/getRoomByMemberId';
      app.globalData.postRequest(params, operation, function (res) {
        console.info("获取成功" + res.data.result_msg); //获取成功
        if (res.data.result_code == 1) {
			let residentialId=uni.getStorageSync("residentialId")
			let room_list_new=[]
			res.data.list.forEach(item=>{
				if (item.residentialId==residentialId) {
					room_list_new.push(item)
				}
			})
           that.room_list=room_list_new
		  that.selectRoomId=that.room_list[0].id
          app.globalData.room_list = res.data.list;
        }
      });
    }
  }
};
</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>