医院租遥控器微信小程序的实现

需求分析

进入小程序有三个底部按钮，分别是：首页、联系我们、个人。

首页：当进入小程序时，首先展示的就是首页部分，在本页面，最上方为一个轮播图，用于轮播欢迎语或者后期医院图片，在页面中部，有三个功能选项，分别是租遥控器、还遥控器和查看租借时长与佣金，页面下部即是按键图标用以快速进入相关页面。

功能区（租遥控器）：此页面上方有一个用户搜索框，可以直接搜索病房号，在左侧有一个可以用于选择不同住院部大楼的复选框，包括A，B，C三个大楼，在选择相关住院部大楼后，将会出现对应楼层，每栋楼有5层，之后进入病房号的选择，每层楼有9个病房，对于已租用过遥控器的用户，将显示病房号和用户信息，如果没有找到该用户与之匹配的租借信息，将会让用户自行输入信息，成功选择病房后，选择租借服务，选择租借时长，租借一天需要1块钱，以此类推，最后支付押金20块钱。

还遥控器：显示本账户的现阶段遥控器租借情况，有租借时，显示剩余租借时长，佣金，并提示用户是否需要还遥控器，如果需要即支付佣金，结束使用；如果没有租借显示为空并做提示。

查看租借时长与佣金：对于已注册用户将会显示用户租借情况，包括时长与佣金

实现效果

部分源码

personal.js

// pages/personal/personal.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      avatarUrl: null,
      nickName: null,
      openid:null
    },
    loginStatus:false,
    rentalList: []// 存放租借的遥控器信息
  },

  /**
   * 生命周期函数--监听页面加载
   */
  // 点击头像或昵称跳转到个人信息页面
  goToUserInfoPage: function(){
    wx.redirectTo({
      url: '../updateUserInfo/UpdateUserInfo'
    })
    
  },

  getUserProfile() {
    if(wx.getStorageSync('userInfo'))
    {
        wx.setStorageSync('loginStatus', true)
        this.setData({
          loginStatus: true,
          userInfo : wx.getStorageSync('userInfo')
        })
    }
    else{
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: res => {
        console.log(res)
        // 获取用户信息
        const { avatarUrl, nickName } = res.userInfo
        // 检查本地缓存
        const openid = wx.getStorageSync('openid')
        if (openid) {
          // 用户已经授权，并且已经获取过openid，直接使用本地缓存中的数据
          console.log('使用本地缓存')
          // 更新页面状态
          
            
            this.setData({
              'userInfo.avatarUrl': avatarUrl,
              'userInfo.nickName': nickName,
              'userInfo.openid': openid
            });
            
        } else {
          // 调用云函数获取openid
          wx.cloud.callFunction({
            name: 'login',
            success: res => {
              console.log(res)
              const { openid } = res.result
              // 将openid保存到本地缓存中
              wx.setStorageSync('openid', openid)



              
              // 检查用户信息
              const db = wx.cloud.database()
              db.collection('user').where({
                openid
              }).get({
                success: res => {
                  console.log(res)
                  if (res.data.length > 0) {
                    // 用户已注册，获取用户信息
                    const { avatarUrl, nickName } = res.data[0]
                    // 更新页面状态
                    this.setData({
                      loginStatus: true,
                      'userInfo.avatarUrl': avatarUrl,
                      'userInfo.nickName': nickName,
                      'userInfo.openid': openid
                    });
                    wx.setStorageSync('userInfo',this.data.userInfo)
                    wx.setStorageSync('loginStatus',true)
                  } else {
                    // 用户未注册，上传数据到云数据库
                    db.collection('user').add({
                      data: {
                        openid,
                        avatarUrl,
                        nickName
                      },
                      success: res => {
                        console.log(res)
                        // 更新页面状态
                        this.setData({
                          loginStatus: true,
                          'userInfo.avatarUrl': avatarUrl,
                          'userInfo.nickName': nickName,
                          'userInfo.openid': openid
                        });
                        wx.setStorageSync('userInfo',this.data.userInfo)
                      },
                      fail: err => {
                        console.error(err)
                      }
                    })
                  }
                },
                fail: err => {
                  console.error(err)
                }
              })
            },
            fail: err => {
              console.error(err)
            }
          })
        }
      },
      fail: err => {
        console.error(err)
      }
    })
    }
  
  
  
  },

  getRentaList() {
    wx.cloud.callFunction({
      name: 'getRentalList',
      data: {
        openid: this.data.userInfo.openid
      },
      success: res => {
        const rentalList = res.result.data;
        const now = new Date();
      // 先为每个元素添加一个 yuqi 属性
      for (let i = 0; i < rentalList.length; i++) {
        rentalList[i].yuqi = false;
      }
        for (let i = 0; i < rentalList.length; i++) {
          const endTime = new Date(rentalList[i].endTime);
          const isExpired = now.getTime() > endTime.getTime();
          rentalList[i].flag1 = rentalList[i].flag === 1 && isExpired;
          rentalList[i].yuqi = rentalList[i].flag1 ? true : false;
        }
        this.setData({
          rentalList: rentalList
        })
      },
      fail: err => {
        console.error('[云函数] [getRentalList] 调用失败', err)
      }
    })
  },
  



  onLoad(options) {
    this.getUserProfile()
    this. getRentaList()
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

personal.wxml

<!-- WXML代码 -->
<page>
<view class="container">
  <!-- 背景图片区域 -->
  <view class="bgcImage">
    <!-- 用户信息区域 -->



    <view wx:if="{{!loginStatus}}">
  <button bindtap="getUserProfile">授权登录</button>
  </view>


<view wx:else >
    <view class="userInfo">
      <!-- 头像,利用小程序语法获取微信头像 -->
        <!--<open-data type="userAvatarUrl"></open-data> -->
        <image src="{{userInfo.avatarUrl}}" class="userAvatar" bindtap="goToUserInfoPage"> </image>
      <!-- Txt -->
      <view class="userInfoTxt" bindtap="goToUserInfoPage">
        <!-- 姓名，利用小程序语法获取微信昵称 -->
        <view class="nickname" >
          <!-- <open-data type="userNickName"></open-data> -->
          {{ userInfo.nickName}}
        </view>
    
      </view>
      </view>

</view>
</view>


    <!-- 间隔 -->
    <view class="gap"></view>

    
    <view class="rental-list">
  <view class="title">遥控器租借情况(20押金逾期不退)</view>
  <view  class="rental-item">
    <view class="price">房间</view>
    <view class="price">租借时长</view>
    <view class="price">金额</view>
    <view class="price" >逾期情况</view>
  </view>
  <view wx:for="{{rentalList}}" wx:key="id" class="rental-item">
    <view class="name">{{item.room}}</view>
    <view class="duration">{{item.rental}}</view>
    <view class="price"> 💰{{item.price}}元</view>
    <view class="price" wx:if="{{item.yuqi}}">{{'已逾期'}}</view>
    <view class="price" wx:else>{{'未逾期'}}</view>
  </view>
</view>


</view>
</page>

!!代码量较大，已经打包成压缩包的形式放在wangpan。需要的自取
链接: https://pan.baidu.com/s/1us-om8WQKyBFVJjbTRzjsw?pwd=7q9i 提取码: 7q9i