CommunityApp/pages/myFamily/activateFace/activateFace.vue

<template>
<view style="background-color: #FFFFFF;height: 100vh;">
	<view class="" v-if="vuex_appletType==1">
		<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/common/empty.png" mode="heightFix"></image>
			  <view>
			    <text>没有相关信息</text>
			  </view>
			</view>
		</view>	
	</view>
	
	<view v-else>
		<view class="" style="height: 300rpx;"></view>
		<u-empty ></u-empty>
	</view>

</view>	

</template>

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

export default {
  data() {
    return {
	  // 小程序审核状态,0审核中,1审核通过
	  //目的是为了隐藏wei gui的人脸功能
	  appletType:0,
		
      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();
  },
  onShow() {
  	  this.appletType=this.$setNavigationBarTitle('套餐','人脸激活')
	  console.log(this.appletType);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: 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>