您的位置: 首页  >  文章  >  微信小程序商品评价，默认5星（还没对接口）

微信小程序商品评价，默认5星（还没对接口）

分类: 文章 • 2025-02-28 21:01:40

刚刚接手小程序自己写了点
先上图看效果
微信小程序商品评价，默认5星（还没对接口）

index.wxml

<view class="main">
  <view class="flex header p20">
      <view class="flex ac">
        <image src="../../image/" class="shangPin"></image>
      </view>

      <view class="right flex ac">商家描述
        <view bindtap="starTap0" data-index="{{index}}" wx:for="{{userStars0}}" wx:key="index"  class="images">
          <image src="{{item}}"></image>
        </view>
      </view>
  </view>

  <view class="flex ac jc p20">
      <textarea placeholder="说说您对商品的体验吧！您最多可输入200个字哦~"></textarea>
  </view>

<!-- 上传 -->
  <view class="weui-cells">
      <view class="weui-cell">
          <view class="weui-cell__bd">
              <view class="weui-uploader">
                  <view class="weui-uploader__hd">
                      <view class="weui-uploader__title"></view>
                      <view class="weui-uploader__info"></view>
                  </view>

                  <view class="weui-uploader__bd">

                      <view class="weui-uploader__files" id="uploaderFiles">
                        <block wx:for="{{files}}" wx:key="*this">
                          <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage" id="{{item}}" data-index="{{index}}">
                              <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/>
                          </view>
                        </block>
                      </view>
                    
                      <view wx:if="{{files.length < 6}}" class="weui-uploader__input-box" >
                          <view class="weui-uploader__input" bindtap="chooseImage">
                              <image src="../../image/evalua/img.png" class="weui-uploader__input_img">
                              <text class="flex jc">{{files.length}} / 6</text>
                              </image>
                          </view>
                      </view>

                  </view>
              </view>
          </view>
      </view>
  </view>
</view>
<!-- 店铺评分 -->
<view class="center">
      <view class="shopName flex ac">
        <image src="../../image/evalua/seller.png" class="shopImg"></image>
        <text >店铺评分</text>
      </view>
      
      <view class="c9 right flex ac">卖家服务
        <view bindtap="starTap" data-index="{{index}}" wx:for="{{userStars1}}" wx:key="index"  class="images">
          <image src="{{item}}"></image>
        </view>
      </view>

      <view class="c9 right flex ac">物流服务
        <view bindtap="starTaps" data-index="{{index}}" wx:for="{{userStars2}}" wx:key="index" class="images">
          <image src="{{item}}"></image>
        </view>
      </view>
</view>
<!-- 底部提交 -->
<view class="flex jc ac foot">提交评价</view>

css的一些flex ac jc是简略写好的css

index.wxss

page {
	background: #f4f4f4;

}
.p20{
  padding: 20rpx;
}
.shopName{
  padding: 10rpx;
  font-weight:600;
}
.header{
  /* padding:20rpx; */
  border-bottom: 1px solid #999;
}
.images image{
  width:80rpx;
  height: 80rpx;
  padding-left:15rpx;
}
.center{
  padding: 20rpx;
  height: 250rpx;
  background: white;
  font-size:16px;
}
.shopImg{
  width: 68rpx;
  height: 60rpx;
  margin-right: 30rpx;
}
.shangPin{
  width: 44px;
  height: 44px;
  margin-right: 20rpx;
}
/* 星星样式 */
.right{
font-size: 16px;
}
.star image{
  width: 40rpx;
  height: 40rpx;
}
textarea{
  width: 100%;
}
/* 上传样式 */
.main{
  width: 100%;
  background: white;
  margin-bottom: 20px;
}
icon {
  vertical-align: middle;
}
.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.weui-cell_input {
  padding-top: 0;
  padding-bottom: 0;
}
.weui-uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  align-items: center;
}
.weui-uploader__title {
  flex: 1;
}
.weui-uploader__info {
  color: #b2b2b2;
}
.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}
.weui-uploader__file {
  float: left;
  margin-right: 7px;
  margin-bottom: 7px;
}
.weui-uploader__img {
  display: block;
  width:70px;
  height:70px;
}
.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 7px;
  margin-bottom:7px;
  width: 70px;
  height: 70px;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
  content: " ";
  
  transform: translate(-50%, -50%);
  
}
.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}
.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}
.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.weui-uploader__input_img{
  width: 70px;
  height: 70px;
  position: relative
}
.weui-uploader__input_img text{
position:relative;
top: -20px;
}

.hideTrue {
  display: none
}
/* 底部 */
.foot{
  height: 50px;
  width: 100%;
  background-color: rgb(255, 80, 80);
  font-size: 20px;
  color: white;
  position: absolute;
  bottom: 0;
}

样式

index.js

const qp = getApp(),
	qpApi = qp.api;

Page({
  data:{
    loading:1,
    userStars0: [
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
    ],
    userStars1: [
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
    ],
    userStars2: [
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
      '../../image/evalua/star-1.png',
    ],
    files: []
  },
  onLoad: function (options) {

  },
  // 添加图片
  chooseImage: function (e) {
    var that = this;
    var images = that.data.files;
    wx.chooseImage({
      count: 6 - images.length,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          files: that.data.files.concat(res.tempFilePaths)
        });
      }
    })
  },
  // 预览图片
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id,
      urls: this.data.files
    })
  },
  //长按图片删除
  deleteImage: function (e) {
    var that = this;
    var images = that.data.files;
    var index = e.currentTarget.dataset.index; //获取当前长按图片下标
    wx.showModal({
      title: '醒购提醒',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          images.splice(index, 1);
        } else if (res.cancel) {
          return false;
        }
        that.setData({
          files: images
        });
      }
    })
  },
  // 商品星星评价
  starTap0: function (e) {
    var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
    var tempuserStars = this.data.userStars1; // 暂存星星数组
    var len = tempuserStars.length;
    for (var i = 0; i < len; i++) {
      if (i <= index) {
        tempuserStars[i] = '../../image/evalua/star-1.png'
      } else {
        tempuserStars[i] = '../../image/evalua/star-0.png'
      }
    }
    // 重新赋值
    this.setData({
      userStars0: tempuserStars
    })
    console.log(userStars0)
  },
  // 卖家服务星星评价
  starTap: function (e) {
    var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
    var tempuserStars = this.data.userStars1; // 暂存星星数组
    var len = tempuserStars.length; 
    for (var i = 0; i < len; i++) {
      if (i <= index) { 
        tempuserStars[i] = '../../image/evalua/star-1.png'
      } else { 
        tempuserStars[i] = '../../image/evalua/star-0.png'
      }
    }
    // 重新赋值
    this.setData({
      userStars1: tempuserStars
    })
  },

  // 物理服务星星评价
  starTaps: function (e) {
    var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
    var tempuserStars = this.data.userStars2; // 暂存星星数组
    var len = tempuserStars.length; 
    for (var i = 0; i < len; i++) {
      if (i <= index) {
        tempuserStars[i] = '../../image/evalua/star-1.png'
      } else {
        tempuserStars[i] = '../../image/evalua/star-0.png'
      }
    }
    // 重新赋值
    this.setData({
      userStars2: tempuserStars,
     
    })
  },

});

'…/…/image/evalua/star-0.png’星星图片
'…/…/image/evalua/star-1.png’星星图片

相关推荐