CommunityApp/pages/myFamily/activateFace/activateFace.vue

<template>
<view style="background-color: #FFFFFF;height: 100vh;">
<view v-if="faceList!=null && faceList.length!=0">
	<view class="head">请选择人脸套餐：</view>
	<view class="content">
	  <view class="faceList">
	    <view v-for="(item, index) in faceList" :key="index" class="item" @tap="selectFace" :data-item="item" :data-index="index" :style="'border-color:' + (selectIndex==index?'#1296db':'gray')">
	      <view class="day">{{item.days}}天</view>
	      <view class="amount">售价{{item.amount}}元</view>
	    </view>
	  </view>
	</view>
	<view class="faceDate">
	  人脸有效期：<text>{{faceEndDate}}</text>
	</view>
	<view @click="goPay"  class=" footer-fixed" >
		<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
			支付
		</view>
	</view>
</view>
<view v-else>
	<view class="default" >
	   <image src="/static/empty.png" mode="heightFix"></image>
	  <view>
	    <text>没有相关信息</text>
	  </view>
	</view>
</view>	

</view>	

</template>

<script>
// pages/myFamily/activateFace/activateFace.js
let app = getApp();

export default {
  data() {
    return {
      user_id: '',
      room_id: '',
      residential_id: '',
      face_charge_id: '',
      faceList: [],
      selectIndex: null,
      faceEndDate: ''
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.user_id = options.user_id;
    this.room_id = options.room_id;

    if (uni.getStorageSync("residentialId")) {
      this.residential_id = uni.getStorageSync("residentialId");
    } else {
      uni.showToast({
        title: '请先在首页选择所在小区',
        icon: 'none'
      });
      return;
    }

    this.getFaceList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    selectFace(e) {
      let item = e.currentTarget.dataset.item;
      let index = e.currentTarget.dataset.index;
      this.setData({
        face_charge_id: item.id,
        selectIndex: index
      });
    },

    getFaceList: function () {
      var that = this;
      let params = {};
      params['residential_id'] = this.residential_id;
      params['user_id'] = this.user_id;
      let operation = 'userFace/getFaceChargeListByResidentialId';
      app.globalData.postRequest(params, operation, function (res) {
        console.info("获取成功" + res.data.result_msg);

        if (res.data.result_code == 1) {
          that.setData({
            faceEndDate: res.data.faceEndDate,
            faceList: res.data.list
          });
        }
      });
    },
    goPay: function () {
      if (this.face_charge_id == '' || this.face_charge_id == null) {
        uni.showToast({
          title: '请先选择人脸套餐',
          icon: 'none'
        });
        return;
      }

      let params = {};
      params['residential_id'] = this.residential_id;
      params['user_id'] = this.user_id;
      params['face_charge_id'] = this.face_charge_id;
      params['room_id'] = this.room_id;
      let operation = 'userFace/activeFace';
      app.globalData.postRequest(params, operation, function (res) {
        console.info("获取成功" + res.data.result_msg);

        if (res.data.result_code == 1) {
          uni.showToast({
            title: '激活成功',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>
<style lang="scss">
.head{
  line-height: 100rpx;
  margin-left: 20rpx
}
.content{
  width: 100%;
}
.faceList{
  margin: 0 10rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item{
  width:30%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center;
  border-radius: 10rpx;
  border-style: solid;
  border-width: 2rpx;
  margin: 10rpx
}
.day{
  height:80rpx;
  line-height: 80rpx;
  font-size: 35rpx;
}
.amount{
  color:#1296db;
  height:90rpx;
}
.faceDate{
  position: fixed;
  bottom: 150rpx;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.faceDate text{
  color:#1296db;
}


.default {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.default text{
	color: #AAAAAA;
}
.default image {
  height: 280rpx;
  display: inline-block;
}
</style>