add: 渐变进度条

src/component/progressPoint/progressPoint.js

+// component/progressPoint/progressPoint.js
+const wxService = require('../../utils/wxService')
+
+Component({
+  properties: {
+    percent: {
+      type: [Number, String],
+      value: 50
+    },
+    width: {
+      type: [Number, String],
+      value: 650
+    },
+    strokeWidth: {
+      type: [Number, String],
+      value: 10
+    },
+    activeColor: {
+      type: [String, Array],
+      value: '#949494'
+    },
+    backgroundColor: {
+      type: String,
+      value: '#e5e5e5'
+    },
+    radius: {
+      type: [Number, String],
+      value: 5
+    },
+    orientation: {
+      type: [Number, String],
+      value: 'landscape'
+      // slider方向 landscape横向 portrait纵向
+    },
+    portraitOrientation: {
+      type: [Number, String],
+      value: 'bottom'
+      // 纵向方向 top 从上到下 bottom 从下到上
+    }
+  },
+  attached: function () {
+    let activeColor = this.data.activeColor;
+    if (!!~activeColor.indexOf(',')) {
+      this.setData({
+        activeLineColor: activeColor.split(',')
+      })
+    }
+  }
+})
\ No newline at end of file

src/component/progressPoint/progressPoint.json

+{
+  "component": true,
+  "usingComponents": {
+  }
+}
\ No newline at end of file

src/component/progressPoint/progressPoint.wxml

+<!--component/progressPoint/progressPoint.wxml-->
+<view class="progress progress__bg" style="width: {{orientation == 'landscape' ? width : strokeWidth}}rpx; border-radius:{{radius}}rpx; background-color: {{backgroundColor}}; height: {{orientation == 'landscape' ? strokeWidth : width}}rpx">
+	<view class="progress__line" style="width: {{orientation == 'landscape' ? percent / 100 * width : strokeWidth}}rpx; height: {{orientation == 'landscape' ? strokeWidth : percent / 100 * width}}rpx; top:{{ portraitOrientation == 'bottom' && orientation == 'portrait' ? (100 - percent) / 100 * width : 0 }}rpx; border-radius:{{radius}}rpx; {{ orientation == 'landscape' ?(activeLineColor[1] ? 'background-image: linear-gradient(to right, ' + activeLineColor[0] + ', ' + activeLineColor[1] + ');' : 'background-color:' + activeColor + ';') : (activeLineColor[1] ? 'background-image: linear-gradient(to top, ' + activeLineColor[0] + ', ' + activeLineColor[1] + ');' : 'background-color:' + activeColor + ';')}}" />
+</view>
\ No newline at end of file

src/component/progressPoint/progressPoint.wxss

+/* component/progressPoint/progressPoint.wxss */ 

src/pages/pointDetail/pointDetail.js

@@ -22,8 +22,13 @@ wxService.page({
     popupType: 0, // 默认不跳转  1 优惠券 2 积分
     goal: 0,
     detailImage: '',
-    countObj: null,
-    currentPercent: 0, // 当前进度
+    countObj: {
+      surplusPoints: 0,
+      exchangeCount: 0,
+      totalPoints: 0
+    },
+    currentPercent: (100 / 5) * 2,
+    // currentPercent: 0, // 当前进度
     isDisabled: false
   },
   /**
@@ -77,8 +82,8 @@ wxService.page({
         if (result == 0) {
           this.setData({
             countObj: data,
-            // currentPercent: (100 / 5) * 2
-            currentPercent: (100 / this.data.goal) * data.surplusPoints
+            currentPercent: (100 / 5) * 2
+            // currentPercent: (100 / this.data.goal) * data.surplusPoints
           }, () => {
             wx.hideLoading()
           })

src/pages/pointDetail/pointDetail.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "集点详情",
   "usingComponents": {
     "status-img": "/component/statusPoint/statusPoint",
-    "x-dialog":"/component/dialog/dialog"
+    "x-dialog":"/component/dialog/dialog",
+    "x-progress-point":"/component/progressPoint/progressPoint"
   }
 }
\ No newline at end of file

src/pages/pointDetail/pointDetail.wxml

@@ -12,16 +12,28 @@
 		</view>
 	</view>
 	<view class="info-progress border_box">
-		<progress
-		 percent="{{currentPercent}}"
+		<x-progress-point
+		 active-color='#3EEB9A, #04C25C'
+		 percent='{{currentPercent}}'
+		 stroke-width='20'
+		 radius='20'
+		/>
+	<!--	<progress
+		 percent="{{50}}"
 		 activeColor="#05C35B"
 		 stroke-width="10"
 		 active
 		 border-radius="{{20}}"
-		/>
+		/>-->
 	</view>
-	<button wx:if="{{!countObj.totalPoints}}" bindtap="handleToGet" class="info-status-btn border_box available breathe-btn" disabled="{{isDisabled}}">可领取奖励
-		<text class="total-points"> {{countObj.totalPoints}} </text>次
+	<button
+	 wx:if="{{countObj.totalPoints}}"
+	 bindtap="handleToGet"
+	 class="info-status-btn border_box available breathe-btn"
+	 disabled="{{isDisabled}}"
+	>可领取奖励
+		<text class="total-points"> {{countObj.totalPoints}} </text>
+		次
 	</button>
 	<view wx:else class="info-status-btn unacommpolished border_box">
 		还未达成，继续加油呀