Merge branch 'v2-dev' of https://github.com/jdf2e/nutui into v2-dev

package.json

@@ -79,4 +79,4 @@
     "instrument": false,
     "sourceMap": false
   }
-}
+}

src/config.json

@@ -632,6 +632,16 @@
       "sort": "6",
       "showDemo": true,
       "author": "yangxiaolu"
+    },
+    {
+      "version": "1.0.0",
+      "name": "CountUp",
+      "type": "component",
+      "chnName": "数字滚动",
+      "desc": "用于数据展示",
+      "sort": "0",
+      "showDemo": true,
+      "author": "yumingming"
     }
   ]
 }

src/nutui.js

@@ -119,11 +119,13 @@ import './packages/subsidenavbar/subsidenavbar.scss';
 import SideNavBarItem from './packages/sidenavbaritem/index.js';
 import './packages/sidenavbaritem/sidenavbaritem.scss';
 import Drag from './packages/drag/index.js';
-import './packages/drag/drag.scss';
-// import VueQr from "./packages/qart/index.js";
+import './packages/drag/drag.scss'; // import VueQr from "./packages/qart/index.js";
 // import "./packages/qart/qart.scss";
+
 import Address from './packages/address/index.js';
 import './packages/address/address.scss';
+import CountUp from "./packages/countup/index.js";
+import "./packages/countup/countup.scss";
 
 const packages = {
   Cell,
@@ -185,7 +187,8 @@ const packages = {
   SubSideNavBar: SubSideNavBar,
   SideNavBarItem: SideNavBarItem,
   Drag: Drag,
-  Address: Address
+  Address: Address,
+  CountUp: CountUp
 };
 
 const components = {};
@@ -213,7 +216,7 @@ pkgList.map(item => {
   }
 });
 
-const install = function(Vue, opts = {}) {
+const install = function (Vue, opts = {}) {
   if (install.installed) return;
 
   if (opts.locale) {
@@ -265,9 +268,8 @@ export default {
   install,
   Lazyload,
   // VueQr,
-
   ...components,
   ...filters,
   ...directives,
   ...methods
-};
+};

src/packages/countup/countup.scss

@@ -0,0 +1,50 @@
+.nut-countup{
+    display:inline-block;
+    width: 100%;
+    padding:5px;
+    color: #000;
+	font-weight:bold;
+	// text-align:center;
+    .run-number{
+        margin: 0 auto;
+        padding: 0;
+        overflow: hidden;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        font-weight: bold;
+        position: relative;
+        li {
+            position: absolute;
+            transition: none;
+            // transition: all linear .1s;
+            // animation: myMove 1s linear infinite;
+            // animation-fill-mode: forwards;
+            // @keyframes myMove {
+            //     0% {
+            //       transform: translateY(0);
+            //     }
+            //     100% {
+            //       transform: translateY(-50px);
+            //     }
+            // }
+            span {
+                display: block;
+            }
+        }
+    }
+    .pointstyl {
+        position: absolute;
+        display: block;
+    }
+    .run-number-img {
+        position: relative;
+        li {
+            position: absolute;
+            transition: none;
+            display: inline-block;
+            background-position: 0 0;
+            background-repeat: no-repeat;
+        }
+    }
+}

src/packages/countup/countup.vue

@@ -0,0 +1,437 @@
+<template>
+    <div class="nut-countup">
+        <template v-if="customBgImg != ''">
+            <ul class="run-number-img" :style="{height: numHeight+'px'}">
+                <li
+                    class="run-number-img-li"
+                    v-for="(val,index) of num_total_len"
+                    :key="'cImg'+index"
+                    :style="{
+                        width: numWidth+'px', height: numHeight+'px',
+                        left: (numWidth*(index > num_total_len-pointNum-1 ? (index==num_total_len-pointNum? index*1.5:index*1.3):index))+'px',
+                        backgroundImage: 'url('+customBgImg+')',
+                        backgroundPosition: '0 '+ -(String(relNum)[index]*numHeight+customSpacNum*String(relNum)[index])+'px',
+                        transition: 'all linear '+(during/10)+'ms'
+                    }"
+                ></li>
+                <div
+                    v-if="pointNum > 0"
+                    class="pointstyl"
+                    :style="{
+                        width: numWidth/2 +'px',
+                        bottom: 0, 
+                        left: (numWidth*(num_total_len-pointNum)*1.1)+'px',
+                        'fontSize': '30px'
+                    }"
+                >.</div>
+            </ul>
+        </template>
+        <template v-else>
+            <ul
+                v-if="scrolling"
+                class="run-number"
+                :style="{height: numHeight+'px'}"
+            >
+                <li
+                    ref="numberItem"
+                    v-for="(val,index) of num_total_len"
+                    :key="val"
+                    :style="{
+                        top: topNumber(index), 
+                        left: (numWidth*(index > num_total_len-pointNum-1 ? index*1.1:index))+'px'
+                    }"
+                    :turn-number="turnNumber(index)"
+                >
+                    <span
+                        v-for="(item,idx) of to0_10"
+                        :key="'dote'+idx"
+                        :style="{width: numWidth+'px',height: numHeight+'px',lineHeight: numHeight+'px'}"
+                    >
+                        {{item}}
+                    </span>
+                </li>
+                <div
+                    v-if="pointNum > 0"
+                    class="pointstyl"
+                    :style="{
+                        width: numWidth/3 +'px',
+                        height: numHeight+'px',
+                        lineHeight: numHeight+'px',
+                        top: 0, 
+                        left: (numWidth*(num_total_len-pointNum))+'px'
+                    }"
+                >.</div>
+            </ul>
+            <template v-else>
+                {{current}}
+            </template>
+        </template>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-countup',
+    props: {
+    	'initNum':{
+            type:Number,
+            default: 0,
+        },
+        'endNum':{
+            type:Number,
+            default: 0,
+        },
+        'speed':{
+        	type:Number,
+            default: 1,
+        },
+        'toFixed':{
+        	type:Number,
+            default: 0,
+        },
+        'during':{
+        	type:Number,
+            default: 1000,
+        },
+        'startFlag':{
+        	type:Boolean,
+            default:true,
+        },
+        // 数字滚动
+        'numWidth': {
+            type:Number,
+            default: 20
+        },
+        'numHeight': {
+            type:Number,
+            default: 20
+        },
+        'scrolling': {
+            type:Boolean,
+            default: false
+        },
+        // 自定义图片
+        'customBgImg': {
+            type: String,
+            default: ''
+        },
+        'customSpacNum': {
+            type:Number,
+            default: 0
+        },
+        'customChangeNum': {
+            type:Number,
+            default: 1
+        }
+    },
+    data() {
+        return {
+            current: this.initNum,
+            sortFlag: 'add',
+            initDigit1: 0,
+            initDigit2: 0,
+            to0_10: [0,1,2,3,4,5,6,7,8,9,0],
+            to10_0: [0,9,8,7,6,5,4,3,2,1,1],
+            timer: null,
+            totalCount: 0,//正整数
+            pointNum: 0,//小数位
+            numberVal: 0,//数字
+            num_total_len: 0,//数字长度
+            relNum: 0,//去除小数点
+            customNumber: 1,
+        };
+    },
+    computed: {
+        
+    },
+    watch: {
+       customChangeNum:function(n,o) {
+           this.customNumber = n;
+           this.countGo();
+       } 
+    },
+    mounted(){
+    	if(this.startFlag){
+            if (this.scrolling || this.customBgImg) {
+                this.countGo();
+            }else {
+                this.countChange();
+            }
+        }
+    },
+    beforeDestroy() {
+        clearInterval(this.timer);        
+        this.timer = null;
+    },
+    methods: {
+        // 清空定时器
+        clearInterval() {
+            clearInterval(this.timer);
+            this.timer = null;
+        },
+        // 精确计算
+        calculation(num1, num2, type) {
+            const num1Digits = (num1.toString().split('.')[1] || '').length;
+            const num2Digits = (num2.toString().split('.')[1] || '').length;
+            const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
+            if(type == '-'){
+                return (num1 * baseNum - num2 * baseNum).toFixed(0) / baseNum;
+            }else {
+                return (num1 * baseNum + num2 * baseNum).toFixed(0) / baseNum;
+            }
+        },
+        // 基本用法
+    	countChange(){
+            let {endNum, initNum, speed, toFixed} = this;
+    		let countTimer = setInterval(()=>{
+    			if(initNum > endNum){//减少
+    				if(this.current <= endNum || this.current <= speed){//数字减小，有可能导致current小于speed
+	    				this.current = endNum.toFixed(toFixed);
+                        clearInterval(countTimer);
+                        this.$emit('scrollEnd');
+					}else{
+                        this.current = (parseFloat(this.current) - parseFloat(speed)).toFixed(toFixed);
+					}
+    			}else{//增加
+    				if(this.current >= endNum){
+    					this.current = endNum.toFixed(toFixed);
+                        clearInterval(countTimer);
+                        this.$emit('scrollEnd');
+    				}else{
+    					this.current = (parseFloat(this.current) + parseFloat(speed)).toFixed(toFixed);
+    				}
+    			}
+    		},this.during);
+        },
+        // 数字滚动-top值
+        topNumber(index) {
+            let {num_total_len, pointNum, initDigit1, initDigit2, sortFlag} = this;
+            let idx1 = sortFlag == 'add' ? initDigit2[index-(num_total_len-pointNum)] : (10 - initDigit2[index-(num_total_len-pointNum)]);
+            let idx2 = sortFlag == 'add' ? initDigit1[index] : (10 - initDigit1[index]);
+            let num = index > num_total_len-pointNum-1 ? -(idx1) * 100 + '%' : 
+                    (index <= initDigit1.length - 1 ? -(idx2) * 100 + '%':0);
+            if(num == '-1000%') {num = 0}
+            return num;
+        },
+        // 数字滚动-到哪里了
+        turnNumber(index) {
+            let {num_total_len, pointNum, initDigit1, initDigit2, sortFlag} = this;
+            let idx1 = initDigit2[index-(num_total_len-pointNum)];
+            let num = index > num_total_len-pointNum-1 ? (idx1?idx1:0): 
+                    (index <= initDigit1.length - 1 ? initDigit1[index]:0);
+            return num;
+        },
+        countGo() {
+            let val = null;
+            if (this.toFixed != 0) {
+                // val = this.endNum.toFixed(this.toFixed);
+                // this.initNum = this.initNum.toFixed(this.toFixed);
+                // this.endNum = this.endNum.toFixed(this.toFixed);
+            }
+            let {initNum, endNum, toFixed, customBgImg} = this;
+            if (customBgImg) {
+                initNum = this.customNumber;
+            }
+            // --------------
+            let startNumber1,startNumber2,endNumber1,endNumber2;
+            if(initNum != 0) {
+                if (toFixed != 0) {
+                    initNum = initNum.toFixed(toFixed);
+                }
+                if(String(initNum).indexOf('.') > -1) {
+                    startNumber1 = String(initNum).split('.')[0].length;
+                    startNumber2 = String(initNum).split('.')[1].length;
+                }else {
+                    startNumber1 = String(initNum).length;
+                    startNumber2 = 0;
+                }
+            }else {
+                startNumber1 = 1;
+                startNumber2 = 0;
+            }
+            if(endNum != 0) {
+                if (toFixed != 0) {
+                    endNum = endNum.toFixed(toFixed);
+                }
+                if(String(endNum).indexOf('.') > -1) {
+                    endNumber1 = String(endNum).split('.')[0].length;
+                    endNumber2 = String(endNum).split('.')[1].length;
+                }else {
+                    endNumber1 = String(endNum).length;
+                    endNumber2 = 0;
+                }
+            }else {
+                endNumber1 = 1;
+                endNumber2 = 0;
+            }
+            let len1 = startNumber1 >= endNumber1 ? startNumber1 : endNumber1;
+            let len2 = startNumber2 >= endNumber2 ? startNumber2 : endNumber2;
+            this.num_total_len = len1 + len2;
+            this.pointNum = len2;
+            // --------------
+            if(initNum > endNum){
+                //减少
+                this.sortFlag = 'reduce';
+                this.to0_10 = [0,9,8,7,6,5,4,3,2,1,0];
+                this.totalCount = this.calculation(initNum,endNum,'-');
+                this.numberVal = String(initNum);
+            }else {
+                //增加
+                this.sortFlag = 'add';
+                this.to0_10 = [0,1,2,3,4,5,6,7,8,9,0];
+                this.totalCount = this.calculation(endNum,initNum,'-');
+                this.numberVal = String(endNum);
+            }
+            //将小数位数计算后，补0
+            var unit = 1;
+            for(let i = 0; i < this.pointNum; i++){
+                unit *= 10
+            }
+            var rel_big = this.numberVal*unit;// 去除小数点后的数，unit几个零表示有几个小数
+            this.relNum = rel_big;
+            // this.totalCount = rel_big;
+            if (toFixed != 0) {
+                //计算小数点后的位数，小数位
+                this.pointNum = this.numberVal.split('.')[1] ? this.numberVal.split('.')[1].length:0;
+                //数字长度
+                this.num_total_len = String(rel_big).length;
+            }
+            if(String(initNum).indexOf('.') > -1) {
+                let n = String(initNum).split('.');
+                this.initDigit1 = n[0];
+                this.initDigit2 = n[1];
+            }else {
+                this.initDigit1 = String(initNum);
+                this.initDigit2 = '0';
+            }
+            if(this.scrolling && !customBgImg) {
+                this.$nextTick(() => {
+                    // 数字都是从小加到大的，所以我们循环转动最后一个数字，传入最后一个数字的DOM
+                    let element = this.$refs.numberItem[this.num_total_len - 1];
+                    this.runTurn(element);
+                });
+            }else {
+                this.imgNumberScroll();
+            }
+        },
+        runTurn(el) {
+            let that = this;
+            that.clearInterval();
+            var m = 1;
+            if(this.pointNum!=0){
+                m = 1/(Math.pow(10,this.pointNum));
+            }
+            //设置定时器
+            that.timer = setInterval(() => {
+                that.runStep(el);
+                that.totalCount=that.calculation(that.totalCount,m,'-');
+                // that.totalCount--;
+                if(that.totalCount <= 0) {
+                    that.clearInterval();
+                    this.$emit('scrollEnd');
+                }
+            }, that.during);
+        },
+        runStep(el) {
+            let that = this;
+            let currentTurn = el.getAttribute('turn-number');
+            let turningNum = null;
+            if (that.sortFlag == 'add') {
+                turningNum = parseInt(currentTurn) + 1;
+            }else {
+                turningNum = parseInt(currentTurn) - 1 >= 0 ? (parseInt(currentTurn) - 1) : 9;
+            }
+            // if(el.getAttribute('flag')) {el.removeAttribute('flag');}
+            // let flag = parseInt(currentTurn) - 1;
+            // el.setAttribute('flag', flag);
+            // if(turningNum == 0) {
+            //     el.setAttribute('flag', -1);
+            // }
+            el.setAttribute('turn-number', turningNum);
+            if(el.style.transition == 'none 0s ease 0s' || turningNum == 1 || !el.style.transition) {
+                el.style.transition = `all linear ${that.during}ms`;
+            }
+            if(turningNum == 10 ||(that.sortFlag == 'reduce' && turningNum == 0)) {
+                var timeOut = null;
+                // el.style.top = `-${turningNum * 100}%`;
+                el.style.top = `-${that.sortFlag == 'add'?turningNum*100:(10-turningNum)*100}%`;
+                el.setAttribute('turn-number', 0);
+                timeOut = setTimeout(() => {
+                    timeOut && clearTimeout(timeOut);
+                    el.style.transition = 'none';
+                    el.style.top = 0;
+                    // 前面数字的滚动，用于递增
+                    if(turningNum == 10) {
+                        if (el.previousSibling) {
+                            that.runStep(el.previousSibling);
+                        }
+                    }
+                }, 0.975 * that.during);
+            }else {
+                // el.style.top = `-${(10-turningNum)*100}%`;
+                el.style.top = `-${that.sortFlag == 'add'?turningNum*100:(10-turningNum)*100}%`;
+            }
+            // 用于递减的时候
+            if(el.style.top == '-100%' && that.sortFlag == 'reduce') {
+                that.runStep(el.previousSibling);
+            }
+        },
+        // 自定义图片
+        imgNumberScroll() {
+            let that = this;
+            var m = 1;
+            if(that.pointNum!=0){
+                m = (Math.pow(10,that.pointNum));
+            }
+            this.$nextTick(() => {
+                var f = that.$el.querySelector('.run-number-img');
+                setTimeout(() => {
+                    that.relNum = that.calculation(that.relNum, m * that.speed, '+');
+                }, that.during)
+                f.addEventListener('webkitTransitionEnd', () => {
+                    this.$emit('scrollEnd');
+                    setTimeout(() => {
+                        that.relNum = that.calculation(that.relNum, m * that.speed, '+');
+                    }, that.during);
+                });
+            })
+            
+            // that.timer = setInterval(() => {
+            //     that.relNum = that.calculation(that.relNum, Math.floor(Math.random() * (20 - 4 + 1) + 4), '+');;
+            // }, that.during)
+            // let that = this;
+            // that.clearInterval();
+            // var m = 1;
+            // if(that.pointNum!=0){
+            //     m = (Math.pow(10,that.pointNum));
+            // }
+            // that.timer = setInterval(() => {
+                // if(that.sortFlag == 'add') {
+                //     that.relNum = that.calculation(that.relNum, m * that.speed, '+');
+                //     if(that.relNum >= that.endNum*m) {
+                //         that.relNum = that.endNum*m;
+                //         that.clearInterval();
+                //         this.$emit('scroll-end');
+                //     }
+                // }else {
+                //     that.relNum = that.calculation(that.relNum, m * that.speed, '-');
+                //     if(that.relNum <= 0) {
+                //         that.relNum = String(0).repeat(that.num_total_len);
+                //         that.clearInterval();
+                //         this.$emit('scroll-end');
+                //     }
+                // }
+                // that.relNum = that.calculation(that.relNum, m * that.speed, that.sortFlag == 'add'?'+':'-');
+                // if(that.relNum <= 0) {
+                //     that.relNum = String(0).repeat(that.num_total_len);
+                //     that.clearInterval();
+                //     this.$emit('scroll-end');
+                // }
+                // if(that.relNum >= that.endNum*m) {
+                //     that.relNum = that.endNum*m;
+                //     that.clearInterval();
+                // }
+            // }, that.during);
+        }
+    }
+}
+</script>

src/packages/countup/demo.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="demo-list">
+      <h4>基本用法</h4>
+      <div class="show-demo">
+        <nut-countup :initNum='0' :endNum='200'></nut-countup>
+
+        <nut-countup
+        :initNum='150.00' 
+        :endNum='0.00' 
+        :speed='6.18' 
+        :toFixed='2'>
+        </nut-countup>
+
+        <nut-countup :initNum='1000.00' 
+        :endNum='0.00'
+        :speed='17'  
+        :toFixed='2'>
+        </nut-countup>
+      </div>
+      <h4>数字滚动</h4>
+      <div class="show-demo">
+        <nut-countup :scrolling="true" :initNum='17.618' :during="600">
+        </nut-countup>
+      </div>
+      <h4>自定义滚动图片展示</h4>
+      <div class="show-demo">
+        <nut-countup
+          :customChangeNum="customNumber"
+          :customBgImg="bgImage"
+          :customSpacNum="11"
+          :numWidth="33"
+          :numHeight="47"
+          :during="5000"
+        >
+        </nut-countup>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+    return {
+        customNumber: 618, 
+        bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png',
+    };
+  },
+  methods: {
+      run() {
+        let timer = null;
+        timer = setInterval(() => {
+            this.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+        }, 5000);
+      }
+  },
+  mounted() {
+      this.run();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.show-demo {
+  background: #ffffff;
+}
+</style>

src/packages/countup/doc.md

@@ -0,0 +1,82 @@
+# CountUp 数字滚动
+
+## 基本用法
+
+```html
+<nut-countup :initNum='0' :endNum='200'></nut-countup>
+
+<nut-countup :initNum='150.00' :endNum='0.00' :speed='2.62' :toFixed='2'></nut-countup>
+
+<nut-countup :initNum='1000.00' :endNum='0.00' :speed='6.3' :startFlag='startNum' :toFixed='2'></nut-countup>
+```
+
+## 数字滚动
+
+```html
+<nut-countup :scrolling="true" :initNum='17.618' :during="600"></nut-countup>
+```
+
+## 自定义数字图片展示
+
+```html
+<nut-countup
+    :customChangeNum="customNumber"
+    :customBgImg="bgImage"
+    :customSpacNum="11"
+    :numWidth="33"
+    :numHeight="47"
+    :during="5000"
+>
+</nut-countup>
+```
+```javascript
+export default {
+    data() {
+        return {
+            customNumber: 618, 
+            bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
+        };
+    },
+    methods: {
+        run() {
+            let timer = null;
+            timer = setInterval(() => {
+                this.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+            }, 5000);
+        }
+    },
+    mounted() {
+        this.run();
+    }
+};
+```
+
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| initNum | 初始数字 | Number | 0
+| endNum | 结束数字 | Number | 0
+| speed | 间隔数字，目前仅支持基本用法 | Number | 1
+| toFixed | 保留小数点后几位 | Number | 以传入的数字为准
+| startFlag | 触发数字滚动的标识 | Boolean | true
+| during | 滚动一次运行时间 | Number | 1000
+| numWidth | 数字宽度，常用于自定义无缝滚动 | Number | 20
+| numHeight | 数字高度，常用于自定义无缝滚动 | Number | 20
+| scrolling | 用于数字滚动展示 | Boolean | false
+| custom | 用于自定义图片数字滚动 | Boolean | false
+| customChangeNum | 要变化的数字（用于自定义图片,initNum\endNum在此无效） | Number | 1
+| customBgImg | 自定义图片（建议使用雪碧图实现） | - | -
+| customSpacNum | 图片中数字之间可能会存在间距 | Number | 0
+
+
+
+
+
+
+## Event
+
+| 字段 | 说明 | 回调参数
+|----- | ----- | -----
+| scroll-end | 滚动结束后回调函数 | - 

src/packages/countup/index.js

@@ -0,0 +1,8 @@
+import CountUp from './countup.vue';
+import './countup.scss';
+
+CountUp.install = function(Vue) {
+  Vue.component(CountUp.name, CountUp);
+};
+
+export default CountUp

src/packages/luckdraw/demo.vue

@@ -53,6 +53,7 @@ export default {
         },
         {
           id: 'blue',
+          prizeColor: 'rgb(251, 219, 216)',
           prizeName: '蓝牙耳机',
           prizeImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg'
         },
@@ -63,6 +64,7 @@ export default {
         },
         {
           id: 'fruit',
+          prizeColor: 'rgba(246, 142, 46, 0.5)',
           prizeName: '迪士尼苹果',
           prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png'
         },
@@ -122,7 +124,6 @@ export default {
     },
     // 已经转动完转盘触发的函数
     endTurns() {
-      console.log(123);
       // 提示中奖
       this.$dialog({
         content: `恭喜中奖！！！${this.prizeList[this.prizeIndex].prizeName}`,

src/packages/luckdraw/doc.md

@@ -45,32 +45,34 @@ export default {
           {
             id: 'xiaomi',
             prizeName: '小米手机',
-            prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png',
+            prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png'
           },
           {
             id: 'blue',
+            prizeColor: 'rgb(251, 219, 216)',
             prizeName: '蓝牙耳机',
-            prizeImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg',
+            prizeImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg'
           },
           {
             id: 'apple',
             prizeName: 'apple watch',
-            prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png',
+            prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png'
           },
           {
             id: 'fruit',
+            prizeColor: 'rgba(246, 142, 46, 0.5)',
             prizeName: '迪士尼苹果',
-            prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png',
+            prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png'
           },
           {
             id: 'fish',
             prizeName: '海鲜套餐',
-            prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png',
+            prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png'
           },
           {
             id: 'thanks',
             prizeName: '谢谢参与',
-            prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png',
+            prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png'
           }
         ],
         turnsNumber: 5, // 转动圈数
@@ -138,7 +140,7 @@ export default {
 | prize-list | 奖品列表 | Array | -
 | turns-number | 转动的圈数 | Number | 5
 | turns-time | 从开始转动到结束所用时间 | Number | 5(单位是秒)
-| style-opt | 转盘中的样式，包括每个扇区的背景颜色，扇区的边框颜色 | Object | {prizeBgColors: [],borderColor: ''}
+| style-opt | 转盘中的样式，包括每个扇区的背景颜色(在每条数据中页可单独设置prizeColor)，扇区的边框颜色 | Object | {prizeBgColors: [],borderColor: ''}
 | pointerStyle | 转盘中指针的样式，包括背景图片、大小等 | Object | {width: '80px',height: '80px'}
 
 

src/packages/luckdraw/luckdraw.vue

@@ -53,6 +53,11 @@ export default {
       default: 5
     }
   },
+  watch: {
+    prizeList: function(newVal, oldVal) {
+      this.init();
+    }
+  },
   data() {
     return {
       winningPrize: 0,
@@ -94,7 +99,11 @@ export default {
       ctx.strokeStyle = borderColor; // 设置画图线的颜色
       for (let index = 0; index < prizeNum; index++) {
         const angle = index * baseAngle;
-        ctx.fillStyle = prizeBgColors[index]; //设置每个扇形区域的颜色
+        if(this.prizeList[index]['prizeColor']) {
+          ctx.fillStyle = this.prizeList[index]['prizeColor']; //设置每个扇形区域的颜色,根据每条数据中单独设置的优先
+        }else {
+          ctx.fillStyle = prizeBgColors[index]; //设置每个扇形区域的颜色
+        }
         ctx.beginPath(); //开始绘制
         // 标准圆弧：arc(x,y,radius,startAngle,endAngle,anticlockwise)
         ctx.arc(canvasW * 0.5, canvasH * 0.5, outRadius, angle, angle + baseAngle, false);

types/nutui.d.ts

@@ -81,3 +81,4 @@ export declare class SideNavBarItem extends UIComponent {}
 export declare class Qart extends UIComponent {}
 export declare class Drag extends UIComponent {}
 export declare class Address extends UIComponent {}
+export declare class CountUp extends UIComponent {}