初始项目

mallplusui-uniapp-wx/components/uni-rate/readme.md

@@ -0,0 +1,59 @@
+### Rate 评分
+
+评分组件，组件名：``uni-rate``，代码块： uRate。
+
+**使用方式：**
+
+在 ``script`` 中引用组件 
+
+```javascript
+import uniRate from "@/components/uni-rate/uni-rate.vue"
+export default {
+    components: {uniRate}
+}
+```
+
+基本用法
+
+```html
+<uni-rate value="2"></uni-rate>
+```
+
+自定义星星大小
+
+```html
+<uni-rate size="18" value="5"></uni-rate>
+```
+
+设置评分数
+
+```html
+<uni-rate max="10" value="5"></uni-rate>
+```
+
+不可点击状态
+
+```html
+<uni-rate disabled="true" value="3.5"></uni-rate>
+```
+
+实际效果参考：[https://github.com/dcloudio/uni-ui](https://github.com/dcloudio/uni-ui)
+
+**属性说明：**
+
+|属性名|类型|默认值	|说明|
+|---|----|---|---|
+|value|Number|0|当前评分|
+|max|Number|5|最大的评分|
+|size|Number|24|星星的大小|
+|margin|Number|0|星星的间距|
+|color|String|#ececec|星星的颜色|
+|active-color|String|#ffca3e|选中状态的星星的颜色|
+|is-fill|Boolean|true|星星的类型，是否为实心类型|
+|disabled|Boolean|false|是否为不可点击状态|
+
+**事件说明：**
+
+|事件称名|说明|返回参数|
+|---|----|---|
+|change|Rate 的 value 改变时触发事件，返回参数为Rate的value|{value:Number}|

mallplusui-uniapp-wx/components/uni-rate/uni-rate.vue

@@ -0,0 +1,125 @@
+<template>
+	<view class="uni-rate">
+		<view class="uni-rate-icon" v-for="(star,index) in stars" :key="index" :style="{marginLeft:margin+'px'}" @click="onClick(index)">
+			<uni-icon :size="size" :color="color" :type="isFill === false || isFill === 'false' ? 'star' : 'star-filled'"></uni-icon>
+			<view class="uni-rate-icon-on" :style="{width:star.activeWitch}">
+				<uni-icon :size="size" :color="activeColor" type="star-filled"></uni-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniIcon from '../uni-icon/uni-icon.vue'
+	export default {
+		name: "uni-rate",
+		components: {
+			uniIcon
+		},
+		props: {
+			isFill: { //星星的类型，是否镂空
+				type: [Boolean, String],
+				default: true
+			},
+			color: { //星星的颜色
+				type: String,
+				default: '#ececec'
+			},
+			activeColor: { //星星选中状态颜色
+				type: String,
+				default: '#ffca3e'
+			},
+			size: { //星星的大小
+				type: [Number, String],
+				default: 24
+			},
+			value: { //当前评分
+				type: [Number, String],
+				default: 0
+			},
+			max: { //最大评分
+				type: [Number, String],
+				default: 5
+			},
+			margin: { //星星的间距
+				type: [Number, String],
+				default: 0
+			},
+			disabled: { //是否可点击
+				type: [Boolean, String],
+				default: false
+			},
+			id: {
+				type: [Number, String],
+				default: 1
+			}
+		},
+		data() {
+			// console.log('data')
+			return {
+				maxSync: this.max,
+				valueSync: this.value
+			}
+		},
+		computed: {
+			stars() {
+				const max = Number(this.maxSync) ? Number(this.maxSync) : 5
+				const value = Number(this.valueSync) ? Number(this.valueSync) : 0
+				const starList = []
+				const floorValue = Math.floor(value)
+				const ceilValue = Math.ceil(value)
+				for (let i = 0; i < max; i++) {
+					if (floorValue > i) {
+						starList.push({
+							activeWitch: '100%'
+						})
+					} else if (ceilValue - 1 === i) {
+						starList.push({
+							activeWitch: (value - floorValue) * 100 + '%'
+						})
+					} else {
+						starList.push({
+							activeWitch: '0'
+						})
+					}
+				}
+				return starList
+			}
+		},
+		methods: {
+			onClick(index) {
+				if (this.disabled === true || this.disabled === 'true') {
+					return
+				}
+				this.valueSync = index + 1
+				this.$emit('change', {
+					id: this.id,
+					value: this.valueSync
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-rate {
+		line-height: 0;
+		font-size: 0;
+		display: flex;
+		flex-direction: row;
+
+		&-icon {
+			position: relative;
+			line-height: 0;
+			font-size: 0;
+			display: inline-block;
+
+			&-on {
+				position: absolute;
+				top: 0;
+				left: 0;
+				overflow: hidden;
+			}
+		}
+	}
+</style>