From e2b0d7bcf0e1c8228a5dd7b3df5450d23d698c2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E4=B8=96=E8=B1=AA?=
 <liushihao@MacBook-Pro-3.local>
Date: Mon, 7 May 2018 16:10:29 +0800
Subject: [PATCH 1/2] rate component

---
 cd-vue                          |   1 +
 src/components/rate/index.js    |   3 +
 src/components/rate/rate.vue    | 181 ++++++++++++++++++++++++++++++++
 src/styles/components/rate.less |   8 ++
 src/styles/index.less           |   1 +
 5 files changed, 194 insertions(+)
 create mode 120000 cd-vue
 create mode 100644 src/components/rate/index.js
 create mode 100644 src/components/rate/rate.vue
 create mode 100644 src/styles/components/rate.less

diff --git a/cd-vue b/cd-vue
new file mode 120000
index 0000000..89bd69e
--- /dev/null
+++ b/cd-vue
@@ -0,0 +1 @@
+/Users/liushihao/mycode/vue/codeages/cd-vue
\ No newline at end of file
diff --git a/src/components/rate/index.js b/src/components/rate/index.js
new file mode 100644
index 0000000..24b5cd1
--- /dev/null
+++ b/src/components/rate/index.js
@@ -0,0 +1,3 @@
+import Rate from './rate.vue';
+
+export default Rate;
\ No newline at end of file
diff --git a/src/components/rate/rate.vue b/src/components/rate/rate.vue
new file mode 100644
index 0000000..a8084fe
--- /dev/null
+++ b/src/components/rate/rate.vue
@@ -0,0 +1,181 @@
+<template>
+  <div
+    class="cd-rate"
+  >
+    <span
+      v-for="item in max"
+      @mousemove="setHoverIndex(item, $event)"
+      @mouseleave="clearHoverIndex()"
+      @click="setCurrentValue(item, $event)"
+      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
+      >
+      <i class="cd-icon"
+        :class="iconType[item - 1]"
+        :style="iconStyle"
+      ></i>
+    </span>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        ifIconHalf: false,
+        ifHoverChange: false,
+        pointerAtLeftHalf: false,
+        iconStates: [],
+        hoverStates: [],
+        hoverIndex: 0,
+        currentValue: this.value,
+      };
+    },
+
+    created () {
+      this.iconStates = this.updateItemStates(this.currentValue);
+    },
+
+    props: {
+      value: {
+        type: Number,
+        default: 0
+      },
+
+      allowHalf: {
+        type: Boolean,
+        default: false
+      },
+
+      lowThreshold: {
+        type: Number,
+        default: 2
+      },
+
+      highThreshold: {
+        type: Number,
+        default: 4
+      },
+
+      max: {
+        type: Number,
+        default: 5
+      },
+
+      rateDisabled: {
+        type: Boolean,
+        default: false
+      },
+
+      colors: {
+        type: Array,
+        default() {
+          return ['#F7BA2A', '#F7BA2A', '#F7BA2A']
+        }
+      },
+      
+      classNames: {
+        type: Array,
+        default() {
+          return ['cd-icon-star-o', 'cd-icon-star-half', 'cd-icon-star']
+        }
+      }
+    },
+
+    computed: {
+      iconStyle() {
+        return {
+          color: this.activeColor
+        };
+      },
+
+      iconType() {
+        if (this.ifHoverChange) {
+          return this.hoverStates;
+        } else {
+          return this.iconStates;
+        }
+      },
+      
+      activeColor() {
+        return this.getValueFromMap(this.hoverIndex, this.colorMap);
+      },
+
+      colorMap() {
+        return {
+          lowColor: this.colors[0],
+          mediumColor: this.colors[1],
+          highColor: this.colors[2],
+        }
+      },
+    },
+
+    watch: {
+      currentValue() {
+        this.ifHoverChange = false;
+      },
+
+      hoverIndex() {
+        this.ifHoverChange = true;
+      }
+    },
+
+    methods: {
+      judgeHalf(e) {
+        return e.offsetX * 2 <= e.target.clientWidth;
+      },
+
+      updateItemStates(value) {
+        let starNum = Math.floor(value);
+        let iconStates = [];
+        let oNum = Math.floor(this.max - value);
+        for (let i = 1; i <= starNum; i++) {
+          iconStates.push(this.classNames[2]);
+        }
+        if (value - starNum) {
+          iconStates.push(this.classNames[1]);
+        }
+        for (let i = 1; i <= oNum; i++) {
+          iconStates.push(this.classNames[0]);
+        }
+        return iconStates;
+      },
+
+      setHoverIndex(item, e) {
+        if (this.allowHalf && this.judgeHalf(e)) {
+          item = item - 0.5;
+          this.ifIconHalf = true;
+        }
+        this.hoverIndex = item;
+        this.hoverStates = this.updateItemStates(item);
+      },
+
+      clearHoverIndex() {
+        this.ifHoverChange = false;
+      },
+
+      setCurrentValue(item, e) {
+        if (this.allowHalf && this.judgeHalf(e)) {
+          item = item - 0.5;
+          this.ifIconHalf = true;
+        }
+        this.currentValue = item;
+        this.$emit('input', this.currentValue);
+        this.iconStates = this.updateItemStates(item);
+        console.log(this.currentValue, 'this.currentValue');
+      },
+
+      getValueFromMap(value, map) {
+        let result = '';
+        if (value <= this.lowThreshold) {
+          result = map.lowColor;
+        } else if (value >= this.highThreshold) {
+          result = map.highColor;
+        } else {
+          result = map.mediumColor;
+        }
+        return result;
+      }
+    }
+  }
+
+</script>
\ No newline at end of file
diff --git a/src/styles/components/rate.less b/src/styles/components/rate.less
new file mode 100644
index 0000000..1dd45ba
--- /dev/null
+++ b/src/styles/components/rate.less
@@ -0,0 +1,8 @@
+.cd-icon {
+  display: inline-block;
+  font-size: 18px;
+  transition: 0.3s;
+  &:hover {
+    transform: scale(1.2);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/index.less b/src/styles/index.less
index e67075a..472be09 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -11,6 +11,7 @@
 @import './components/row.less';
 @import './components/alert.less';
 @import './components/panel.less';
+@import './components/rate.less';
 @import './components/message.less';
 @import './components/sidebar.less';
 @import './components/v-menu.less';

From 50dd6a37335bdb34985fafea598b1a3df245141b Mon Sep 17 00:00:00 2001
From: IWSR <lsh934960645@163.com>
Date: Mon, 7 May 2018 16:55:09 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=B8=85=E9=99=A4=E8=BD=AF=E8=BF=9E?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cd-vue | 1 -
 1 file changed, 1 deletion(-)
 delete mode 120000 cd-vue

diff --git a/cd-vue b/cd-vue
deleted file mode 120000
index 89bd69e..0000000
--- a/cd-vue
+++ /dev/null
@@ -1 +0,0 @@
-/Users/liushihao/mycode/vue/codeages/cd-vue
\ No newline at end of file