上传文件至 '微信小程序/douban/components/stars'

微信小程序/douban/components/stars/stars.js

@@ -0,0 +1,75 @@
+// components/stars/stars.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    rate: {
+      type: Number,
+      value: 0
+    },
+    starsize:{
+      type:Number,
+      value:20 //rpx
+    },
+    fontsize:{
+      type:Number,
+      value:20 //rpx
+    },
+    fontcolor:{
+      type:String,
+      value:"#ccc"
+    },
+    istext:{
+      type:Boolean,
+      value:true
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  },
+  /**
+   * 组件声明周期事件
+   */
+  lifetimes:{
+    attached:function(){
+      var that = this;
+      var rate = that.properties.rate;
+      var intRate = parseInt(rate);
+      var light = parseInt(intRate/2);
+      var half = intRate%2;
+      var gray = 5-half-light;
+      var lights = [];
+      var halfs = [];
+      var grays = [];
+      for (var index = 1; index <= light; index++){
+        lights.push(index);
+      }
+      for (var index = 1; index <= half; index++) {
+        halfs.push(index);
+      }
+      for (var index = 1; index <= gray; index++) {
+        grays.push(index);
+      }
+      var rateText =rate&&rate>0?rate.toFixed(1):"未评分";
+      that.setData({
+        lights:lights,
+        halfs: halfs,
+        grays: grays,
+        rateText: rateText
+      })
+    }
+  }
+
+})

微信小程序/douban/components/stars/stars.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

微信小程序/douban/components/stars/stars.wxml

@@ -0,0 +1,6 @@
+<view class='rate-group'>
+  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx' wx:for="{{lights}}" wx:key="*this"src='/images/rate_light.png'></image>
+  <image  style='width:{{starsize}}rpx;height:{{starsize}}rpx' wx:for="{{halfs}}" wx:key="*this"src='/images/rate_half.png'></image>
+  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx' wx:for="{{grays}}" wx:key="*this"src='/images/rate_gray.png'></image>
+  <text wx:if="{{istext}}" style='font-size:{{fontsize}}rpx; color:{{fontcolor}}'>{{rateText}}</text>
+</view>

微信小程序/douban/components/stars/stars.wxss

@@ -0,0 +1,11 @@
+.rate-group{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20rpx;
+  color: #ccc;
+}
+.rate-group image{
+  width: 20rpx;
+  height: 20rpx;
+}