2021-07-10

最新推荐文章于 2024-08-12 22:03:32 发布

Erzeroer

最新推荐文章于 2024-08-12 22:03:32 发布

阅读量139

点赞数 1

本文链接：https://blog.csdn.net/weixin_43765948/article/details/118641022

版权

微信小程序云开发用户评分数据库操作功能实现

关键词由CSDN通过智能技术生成

微信小程序云开发实现多个用户评分功能

在使用很多小程序的过程中，会给某个商品，某个视频，某个东东评分，本文介绍如何实现如何实现多用户评分功能。

1.先看一下页面效果图

在这里插入图片描述

页面的实现参考了XX博主,主要讲功能的实现，评分的结果分为差、一般、较好、好四个等级，可自己设置。

2.功能实现设计思路

（0）点击进入评分页面时，判断改用户是否已评分，未评分则进入评分页面，否则不可再进行评分并给出友好提示；
（1）进入页面加载onLoad方法从数据库获取标题数据并保存到data中，页面从data获取静态数据；
（2）点击星星触发点击事件，判断当前点击的是哪一条标题和点击值为多少等；
（3）获取页面文本输入框中内容；
（4）点击提交保存到云数据库；
（5）跳转到课程详情页；

3.功能实现代码如下：

比较简单，直接贴上代码

score.wxml

//score.wxml
<view wx:for="{{titlelist}}" wx:key="titlekey" wx:for-item="titleitem" wx:for-index="titleIndex" class='pj_view'>

  <view class='bigtitle'>{{titleitem}}</view>

  <view class='start_view'>
  

    <view class='starttouch' bindtouchmove='' data-index='{{titleIndex}}'>

      <block wx:for="{{stars}}" wx:key="starkey" wx:for-item="staritem" wx:for-index="starIndex">
        <!-- stars: [0, 1, 2, 3, 4],-->
        <image class="star-image" style="left: {{staritem*150}}rpx"
          src="{{keylist[titleIndex] > staritem ?(keylist[titleIndex]-staritem == 0.5?halfSrc:selectedSrc) : normalSrc}}"
          data-key="{{staritem+1}}" data-index='{{titleIndex}}' bindtap="startClick"
          style='{{starIndex == stars.length-1 ? "margin-right:0;":""}}'>

        </image>
        
      </block>
      <!-- <view>{{keylist[titleIndex]}}</view> -->
     
    </view>

    <block wx:if='{{keylist[titleIndex] == 0}}'>

      <view class='smalltitle' style='font-size: 20rpx;'>请点击星星评分</view>

    </block>

    <block wx:else>

      <view class='smalltitle'>

        <block wx:if='{{keylist[titleIndex]*2 > 0 && keylist[titleIndex]*2 < 3}}'>

          {{keylist[titleIndex]*2}}分 差

        </block>

        <block wx:elif='{{keylist[titleIndex]*2 >= 3 && keylist[titleIndex]*2 < 6}}'>

          {{keylist[titleIndex]*2}}分 一般

        </block>

        <block wx:elif='{{keylist[titleIndex]*2 >= 6 && keylist[titleIndex]*2 < 9}}'>

          {{keylist[titleIndex]*2}}分 较好

        </block>

        <block wx:else>

          {{keylist[titleIndex]*2}}分 好

        </block>

      </view>

    </block>

  </view>

</view>

<view class='proposal'>

  <text class='bigtitle'>5.其他建议</text>

  <textarea class='content' maxlength='-1' bindinput='proposal' value='{{textareaStr}}'></textarea>

</view>

<view class='button' bindtap='proposalClick'>提交评价</view>

score.wxss

/* page {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}
.service {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: #fff;
}
.score {
  width: 100%;
  height: 100rpx;
  border-bottom: 1px solid #ccc;
}
.star {
  float: left;
  width: 54rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}
.star image{
  width: 40rpx;
  height: 40rpx;
  margin-top: 30rpx;
}
.score .left {
  width: 100rpx;
  line-height: 100rpx;
  font-size: 30rpx;
  float: left;
}
.score .right {
  width: 610rpx;
  font-size: 30rpx;
  float: left;
  color: #888;
}

.score .right .rtxt {
  display: inline-block;
  height: 100rpx;
  line-height: 100rpx;
  margin-left: 15rpx;
  color: #c00;
  font-weight: bold;
}
.labelColor {
  color: #c00;
  border: 1px solid #c00 !important;
}
.content {
  width: 100%;
  overflow: hidden;
  border-bottom:1px solid #ccc;
  padding:0 0 26rpx 0;
  box-sizing: border-box;
}
.content .left {
  width: 100rpx;
  font-size: 30rpx;
  float: left;
  padding-top: 20rpx;
}
.content .right {
  width: 610rpx;
  font-size: 24rpx;
  float: left;
  color: #888;
}
.content .right text {
  font-size: 24rpx;
  padding: 13rpx 24rpx;
  float: left;
  border: 1px solid #888;
  border-radius: 10rpx;
  margin-right: 34rpx;
  margin-top: 20rpx;
}
.picture {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #ccc;
}
.picture .left {
  width: 100rpx;
  font-size: 30rpx;
  float: left;
  padding-top: 20rpx;
}
.picture .right {
  width: 610rpx;
  font-size: 24rpx;
  float: left;
  color: #888;
  box-sizing: border-box;
  padding-top:36rpx;
}
.picture .right .add {
  width: 120rpx;
  height: 120rpx;
  margin-right: 10rpx;
}
.According{
  width:120rpx;
  height:120rpx;
  float:left;
  margin-right:10rpx;
  margin-bottom: 10rpx;
}
.parcel{
 width:120rpx;
  height:120rpx;
  float:left;
  margin-right:10rpx;
   margin-bottom: 10rpx;
  position: relative;
}
.deleteimg{
  width:30rpx;
  height:30rpx;
  position: absolute;
  right:0;
  top:0;
  z-index: 2;
}
.conts{
  width: 100%;
  height: auto;
  background: #fff;
}
textarea {
  width: 687rpx;
}
.areas{
  height:315rpx;
  font-size: 30rpx;
  padding-top: 30rpx;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.currentWordNumber{
  font-size: 28rpx;
  position: absolute;
  left: 0%;
  bottom: 0rpx;
  color: #c00;
}
.hint{
   font-size: 28rpx;
   position: absolute;
   top: 120rpx;
   left: 30rpx;
   color: #FF6600;
}
.btn {
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #fff;
  background: #c00;
  position: fixed;
  left:75rpx;
  bottom: 37rpx;
}
button:after {
  border: 0;
} */

page{
 
  background: #fff;
   
  }
   
  .pj_view{
   
  margin: 40rpx 30rpx;
   
  }
   
  .bigtitle{
   
  font-size: 30rpx;
   
  color: #333;
   
  }
   
  .start_view{
   
  margin: 30rpx 0 40rpx 20rpx;
   
  height: 56rpx;
   
  line-height: 56rpx;
   
  }
   
  .starttouch{
   
  display: inline-block;
   
  width:462rpx;
   
  height: 56rpx;
   
  }
   
  .star-image {
   
  width: 56rpx;
   
  height: 56rpx;
   
  margin-right: 45rpx;
   
  }
   
  .smalltitle{
   
  display: inline-block;
   
  position: relative;
   
  top: -20rpx;
   
  font-size: 30rpx;
   
  color: #ffaf02;
   
  margin-left: 39rpx;
   
  }
   
  .proposal{
   
  margin:0 30rpx 40rpx 30rpx;
   
  }
   
  .content{
   
  width: 100%;
   
  height: 237rpx;
   
  background: #f5f5f5;
   
  margin-top: 30rpx;
   
  }
   
  textarea{
   
  color: #333;
   
  font-size: 30rpx;
   
  }
   
  .button{
   
  margin: 0 30rpx 30rpx 30rpx;
   
  background: #388ef2;
   
  font-size: 30rpx;
   
  color: #fff;
   
  text-align: center;
   
  height: 90rpx;
   
  line-height: 90rpx;
   
  border-radius: 10rpx;
   
  }

score.js



//获取应用实例

//var app = getApp()

Page({

  data: {

    stars: [0, 1, 2, 3, 4],

    normalSrc: '../img/kx.png',

    selectedSrc: '../img/sx.png',

    halfSrc: '../img/half.png',

    textareaStr: '',

    keylist: [0, 0, 0, 0],

    titlelist: [],

    scrollTop: 0,
    ID: '',
    pingfen: []

  },

  onLoad: function (options) {
    let ID = options.id
    this.setData({
      ID: ID
    })
    wx.cloud.callFunction({
      name: "commentPlus",
      data: {
        action: "getTitleList",
      }
    }).then(res => {
      console.log("获取标题列表成功", res)
      let scoreList = res.result.data
      console.log(scoreList)
      let titlelist = this.data.titlelist
      for (var i = 0; i < scoreList.length; i++) {
        titlelist[i] = scoreList[i].score_content
      }
      this.setData({
        titlelist: titlelist
      })
    }).catch(err => {
      console.log("获取标题列表失败", err)
    })
  },

  //点击星星
  startClick: function (e) {

    var key = e.currentTarget.dataset.key;

    var index = e.currentTarget.dataset.index

    if (this.data.keylist[index] >= key) {

      key -= 0.5;

    }

    this.data.keylist[index] = key;

    this.setData({

      keylist: this.data.keylist

    })

  },

  //输入其他建议
  proposal: function (e) {

    this.setData({

      textareaStr: e.detail.value

    })

  },

  //点击提交评分按钮
  proposalClick: function () {

    console.log(this.data.keylist)
    let keylist = this.data.keylist
    //判断是否有为评分项
    if (keylist.indexOf(0) != -1) {
      wx.showToast({
        title: '存在未评分项',
        icon: 'error'
      })
      return
    }

    let userInfo = wx.getStorageSync('userInfo')
    let pingfenItem = {}
    //let studentName = userInfo.nickName
    let otherAdvice = this.data.textareaStr
    let ID = this.data.ID
    let pingfenArr = this.data.pingfen
    pingfenItem.studentName = userInfo.nickName
    pingfenItem.otherAdvice = otherAdvice
    pingfenItem.keylist = keylist
    pingfenArr.push(pingfenItem)
    wx.cloud.callFunction({
      name: "commentPlus",
      data: {
        action: "addpingdfenToDb",
        pingfen: pingfenArr,
        id: ID
      }
    }).then(res => {
      console.log("添加评分成功", res)
      wx.setStorageSync('pingfen', pingfenArr)
      this.setData({
        pingfen: pingfenArr
      })
      wx.showToast({
        title: '评分成功',
        icon: 'succes',
        duration: 1500,
        mask: true,
      })
      let id = this.data.ID
      setTimeout(function () {
        wx.redirectTo({
          url: '../course_detail/courses_detail?id=' + id+'&deleteDoublePage='+1
        })
      }, 1500)
    }).catch(err => {
      console.log("添加评分失败", err)
    })
  },
  },

})

云函数代码：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  if (event.action == 'getAllCourse') {
    return await cloud.database().collection("courseList").get()
      .then(res => {
        console.log("获取所有课程成功", res)
        return res
      }).catch(err => {
        console.log("获取所有课程失败", err)
        return err
      })
  } else if (event.action == 'getCourseDetailById') {
    return await cloud.database().collection("courseList").doc(event.id).get()
      .then(res => {
        console.log("根据ID获取课程详情成功", res)
        return res
      }).catch(err => {
        console.log("根据ID获取课程详情失败", err)
      })

  } else if (event.action == 'dianzan') {
    return await cloud.database().collection("courseList").doc(event.id).update({
      data: {
        dianzan: event.dianzan
      }
    }).then(res => {
      console.log("改变点赞状态成功", res)
    }).catch(err => {
      console.log("改变点赞状态失败", err)
    })
  } else if (event.action == 'pinglun') {
    console.log(event)
    return await cloud.database().collection("courseList").doc(event.id).update({
      data: {
        pinglun: event.pinglun
        // pinglun: cloud.database().command.push(event.pinglun)
      }
    }).then(res => {
      console.log("评论成功", res)
    }).catch(err => {
      console.log("评论失败", err)
    })
  } else if (event.action == 'getTitleList') {
    return await cloud.database().collection("giveScore").get()
      .then(res => {
        console.log("获取标题列表成功", res)
        return res
      }).catch(err => {
        console.log("获取标题列表失败", err)
        return err
      })
  } else if (event.action == 'addpingdfenToDb') {
    console.log(event)
    return await cloud.database().collection("courseList").doc(event.id).update({
      data: {
        pingfen: cloud.database().command.push(event.pingfen)
      }
    }).then(res => {
      console.log("添加评分成功", res)
    }).catch(err => {
      console.log("添加评分失败", err)
    })
   }
}

云数据库截图如下：

在这里插入图片描述
若想实现评分功能则在云数据库中pinglun字段可以忽略。

直接复制粘贴就可实现功能，页面中的星星图标可在阿里图标里搜索half,便可把三颗样式星星下载导入到微信开发者工具中，星星样式如下图所示：

在这里插入图片描述

4.总结

实现评分功能的原理比较简单，导入代码即可实现，若想完善页面功能可以参考上一篇文章。

Erzeroer

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
2021-07-10

微信小程序云开发实现多个用户评分功能    在使用很多小程序的过程中，会给某个商品，某个视频，某个东东评分，本文介绍如何实现如何实现多用户评分功能。1.先看一下页面效果图页面的实现参考了XX博主,主要讲功能的实现，评分的结果分为差、一般、较好、好四个等级，可自己设置。2.功能实现设计思路（0）点击进入评分页面时，判断改用户是否已评分，未评分则进入评分页面，否则不可再进行评分并给出友好提示；（1）进入页面加载onLoad方法从数据库获取标题数据并保存到da
复制链接

扫一扫