feats

src/pages/WuYe/ShengHuoGuanJia/components/Card.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import LR from './LR'
 import Btn from './Btn'
+import Stars from './Stars'
 import './style.less'
 
 export default props => {
@@ -29,7 +30,7 @@ export default props => {
           <LR title="管家姓名">{data.userName || ''}</LR>
           <LR title="联系方式">{data.phone || ''}</LR>
           <LR title="管家说明">{data.description || ''}</LR>
-          <LR title="综合评价"></LR>
+          <LR title="综合评价"><Stars value={4} editable /></LR>
         </view>
       </view>
       <view className="gj-card-footer">

src/pages/WuYe/ShengHuoGuanJia/components/Star.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+export default props => {
+  const clsName = [
+    props.className,
+    props.active ? props.activeClass : false
+  ].filter(Boolean).join(' ')
+
+  const handleClick = e => {
+    if (props.onClick) {
+      props.onClick(e)
+    }
+  }
+
+  return <text className={clsName} style={props.style} onClick={handleClick}>&#9733;</text>
+}

src/pages/WuYe/ShengHuoGuanJia/components/Stars.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Star from './Star'
+
+const total = new Array(5).fill(0).map((_, inx) => inx + 1)
+
+// 小数得分会被转为整数
+export default props => {
+  const [score, setScore] = useState(0)
+  const inited = useRef(false)
+
+  // 暂时只写了默认以及 size=large 的样式
+  const sizeClass = props.size ? `${gj-star}-${props.size}` : ''
+
+  const handleClick = i => {
+    if (props.editable) {
+      setScore(i)
+      if (props.onChange) {
+        props.onChange(i)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (props.value !== null && props.value !== undefined && !inited.current) {
+      setScore(Math.floor(props.value))
+      inited.current = true
+    }
+  }, [props.value])
+
+  return (
+    <view className="gj-stars">
+      {
+        total.map(i => <Star className={`gj-start ${sizeClass}`} activeClass="gj-star-active" key={i} active={score >= i} onClick={() => handleClick(i)} />)
+      }
+    </view>
+  )
+}

src/pages/WuYe/ShengHuoGuanJia/components/style.less

@@ -75,3 +75,28 @@
   border: 1px solid #F35844;
   border-radius: 30px;
 }
+
+.gj-stars {
+  font-size: 36rpx;
+
+  .gj-star-large {
+    font-size: 64rpx;
+  
+    & + .gj-star-large {
+      margin-left: 16rpx;
+    }
+  }
+}
+
+.gj-star {
+  color: #333;
+  display: inline-block;
+
+  &.gj-star-active {
+    color: #F35844;
+  }
+
+  & + .gj-star {
+    margin-left: 8rpx;
+  }
+}