微信小程序（8）——五星级评分-蒲公英云

微信小程序（8）——五星级评分

野性酷女 2022-05-17 02:46 809阅读 0赞

▍写在前面

在制作一个医院类小程序的前端时，有一个功能是对医院进行评价，通过查找资料并结合自身的知识花了一个下午终于解决了。（由于知识欠缺的原因，中间一个问题阻碍了几个小时，即为下文所陈列问题的第二条）。

▍效果预览

分别截取了无评分状态和评价状态的页面：

未选中

70 1 选中

▍代码实现

1、feedback.js

// pages/more/feedback.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 评价图片
    evaluationImgUrl: "https://s1.ax1x.com/2018/08/05/PDM8Bj.png",
    starCheckedImgUrl: "https://s1.ax1x.com/2018/08/05/PDQ0it.png",
    starUnCheckedImgUrl: "https://s1.ax1x.com/2018/08/05/PDQdII.png",
    // 建议内容
    opinion: "",
    starMap: [
      '非常差',
      '差',
      '一般',
      '好',
      '非常好',
    ],
    evaluations: [
      {
        id: 0,
        name: "医院环境",
        image: "https://s1.ax1x.com/2018/08/05/PDMaCV.png",
        star: 0,
        note: ""
      },
      {
        id: 1,
        name: "医生专业技术",
        image: "https://s1.ax1x.com/2018/08/05/PDMd3T.png",
        star: 0,
        note: ""
      },
      {
        id: 2,
        name: "医生态度",
        image: "https://s1.ax1x.com/2018/08/05/PDMN40.png",
        star: 0,
        note: ""
      }
    ]
  },
  /**
   * 评分
   */
  chooseStar: function (e) {
    const index = e.currentTarget.dataset.index;
    const star = e.target.dataset.star;
    let evaluations = this.data.evaluations;
    let evaluation = evaluations[index];
    // console.log(evaluation)
    evaluation.star = star;
    evaluation.note = this.data.starMap[star-1];
    this.setData({
      evaluations: evaluations
    })
  }
})

2、feedback.wxml

<!--pages/more/feedback.wxml-->
<view class='container'>
  <view class='card'>
    <!-- 为方便数据定位，自定义了wx:for-item为i -->
    <block wx:for='{
   {evaluations}}' wx:for-item='i' wx:key=''>
      <!-- 单个卡片项 -->
      <view class='card-item'>
        <!-- 卡片上方标题 -->
        <view class='item-title'>
          <view class='image-container title-image'>
            <image src='{
   {i.image}}'></image>
          </view>
          <view class='title-text'>{
   {i.name}}</view>
        </view>
        <!-- 卡片下方评价区 -->
        <view class='item-content'>
          <view class='image-container content-image'>
            <image src='{
   {evaluationImgUrl}}'></image>
          </view>
          <view class='contet-text content-body'>
            <!-- 为方便数据定位，自定义了wx:for-item为j -->
            <block wx:for='{
   {starMap}}' wx:for-item='j' wx:key=''>
              <view class='image-container' data-index='{
   {i.id}}' bindtap='chooseStar'>
                <image wx:if='{
   {i.star >= index + 1}}' data-star='{
   {index + 1}}' src='{
   {starCheckedImgUrl}}' bin></image>
                <image wx:if='{
   {i.star < index + 1}}' data-star='{
   {index + 1}}' src='{
   {starUnCheckedImgUrl}}'></image>
              </view>
            </block>
            <text class='note'>{
   {i.note}}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
  <view class='submit' bindtap='submit'>提交反馈</view>
</view>

3、*.wxss（样式由两个部分构成）

/* common.wxss */
.card .card-item{
  margin-bottom: 25rpx;
  border: 5rpx solid #888;
  border-radius: 20rpx;
  padding: 25rpx;
  background-color: white;
}
.card-item .item-title,
.card-item .item-content{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.card-item .item-title{
  border-bottom: 1rpx solid #eee;
  padding-bottom: 25rpx;
  align-items: center;
  line-height: 70rpx;
  font-weight: 700;
}
.card-item .item-content{
  padding-top: 25rpx;
  line-height: 70rpx;
}
.card-item .image-container{
  margin-right: 25rpx;
  width: 40rpx;
  display: flex;
  align-items: center;
}
.card-item .title-image{
  height: 40rpx;
}
.card-item .content-image{
  height: 70rpx;
}
.card-item .image-container image{
  width: 40rpx;
  height: 40rpx;
}
.card-item .title-text,
.card-item .content-text{
  width: 575rpx;
}
/* feedback.wxss */
.card-item .content-body{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.card-item .content-body .note{
  line-height: 70rpx;
  font-size: 30rpx;
}