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="form_group">

    <text class="type">有效次数：</text>
    <view class="stepper">
      <text :class="minusStatus" type="number" @tap="bindMinus">-</text>
      <input @input="bindManual" :value="valid_count"></input>
      <text @tap="bindPlus">+</text>
    </view>

  </view>
<!-- <view class="submit_btn">
 <button class="ar_btn" @tap="getGuestAuthorize">获取开门密码</button>
</view> -->
<view @tap="getGuestAuthorize" class=" footer-fixed" >
	<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">{{password}}</text>
      </view>
    </view>
    <view class="modal-footer">
      <button class="btn-cancel" open-type="share" data-status="cancel">转发</button>
      <button class="btn-confirm" @tap="copy" data-status="confirm">复制</button>
    </view>
</view>
<u-select z-index="9999999"  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 {
	  roomSelectShow:false,
	  selectRoomName:'',
	  selectRoomId:0,
		
      room_list: null,
      //有效次数
      valid_count: 1,
      minusStatus: 'disable',
      //获取开门密码
      showModal: false,
      //开门密码
      password: null,
      //访客类型
      guestTypeIndex: 0,
      //默认选中第一个
      guestTypeArray: ['朋友', '外卖', '快递', '其他'],
      //密码有效期
      activeIndex: 0,
      //默认选中第一个
      numArray: [1, 2, 5, 8, 24, 48],
      begin_date: "",
      end_date: ""
    };
  },

  components: {},
  props: {},

  /**
   * 监听页面加载
   */
  onLoad() {
    //禁用头部分享
    uni.hideShareMenu({});
    let room_list = app.globalData.room_list;
	console.log(room_list,"**************");
    if (room_list) {
	  this.selectRoomId=room_list[0].id
		
      this.setData({
        room_list: room_list
      });
    } else {
      //获取房屋信息
      this.geRoomByMemberId();
    }
  },

  onShareAppMessage: function (ops) {
    let title = "访客密码:" + this.password + "，有效次数:" + this.valid_count + "次，有效期" + this.begin_date + " 到 " + this.end_date;
    return {
      title: title,
      path: '/pages/myPassword/myPassword?valid_count=' + this.valid_count + "&password=" + this.password + "&end_date=" + this.end_date,
      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
    },
    //事件处理函数

    /*点击减号*/
    bindMinus: function () {
      var valid_count = this.valid_count;

      if (valid_count > 1) {
        valid_count--;
      }

      var minusStatus = valid_count > 1 ? 'normal' : 'disable';
      this.setData({
        valid_count: valid_count,
        minusStatus: minusStatus
      });
    },

    /*点击加号*/
    bindPlus: function () {
      var valid_count = this.valid_count;

      if (valid_count >= 10) {
        uni.showToast({
          title: '密码最大次数不能超过10次',
          icon: 'none',
          duration: 2000
        });
      } else {
        valid_count++;
        var minusStatus = valid_count > 1 ? 'normal' : 'disable';
        this.setData({
          valid_count: valid_count,
          minusStatus: minusStatus
        });
      }
    },

    /*输入框事件*/
    bindManual: function (e) {
      var valid_count = e.detail.value;
      var minusStatus = valid_count > 1 ? 'normal' : 'disable';
      this.setData({
        valid_count: valid_count,
        minusStatus: minusStatus
      });
    },
    //访客类型
    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
      });
    },
    //复制密码
    copy: function (e) {
      var that = this; //获取app.js里面定义的全局变量

      if (uni.setClipboardData) {
        //微信版本兼容处理
        let title = "访客密码:" + this.password + "，有效次数:" + this.valid_count + "次，有效期" + this.begin_date + " 到 " + this.end_date;
        uni.setClipboardData({
          data: title,

          success(res) {
            uni.getClipboardData({
              success(res) {
				  that.closeModal()
			  }

            });
          }

        });
      } else {//用户微信版本过低，不支持使用该功能
      }
    },
    //关闭弹窗
    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;
      params['valid_count'] = that.valid_count; //选择有效时间数字

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

      let begin_date = new Date(); //提前30分钟

      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); //有效次数

      params['valid_count'] = that.valid_count;
	  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,
            password: res.data.guestAuthorize.password,
            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) {
          that.setData({
            room_list: res.data.list
          });
		  that.selectRoomId=that.room_list[0].id
          app.globalData.room_list = res.data.list;
        }
      });
    }
  }
};
</script>
<style lang="scss">
/* pages/openPass/openPass.wxss */

.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: 50%;
  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: 50rpx 32rpx;
}

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

.password {
  width: 100%;
  height: 80rpx;
  font-size: 40rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #ec5300;
  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: #666;
  text-align: center;
  border-right: 1px solid #dedede;
 border-radius: 0;
}

.modal-footer .btn-confirm {
  width: 50%;
  color: #ec5300;
  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>