需求分析
进入小程序有三个底部按钮,分别是:首页、联系我们、个人。
首页:当进入小程序时,首先展示的就是首页部分,在本页面,最上方为一个轮播图,用于轮播欢迎语或者后期医院图片,在页面中部,有三个功能选项,分别是租遥控器、还遥控器和查看租借时长与佣金,页面下部即是按键图标用以快速进入相关页面。
功能区(租遥控器):此页面上方有一个用户搜索框,可以直接搜索病房号,在左侧有一个可以用于选择不同住院部大楼的复选框,包括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