浏览代码

滚动插件

lilei 4 年之前
父节点
当前提交
53e093cad2
共有 3 个文件被更改,包括 83 次插入132 次删除
  1. 13 0
      package-lock.json
  2. 1 0
      package.json
  3. 69 132
      pages/luckDraw/luckDraw.vue

+ 13 - 0
package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -19,6 +24,14 @@
       "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.7.9.tgz",
       "integrity": "sha512-YSZvz69Yt/7qoJohc9+tWVQsb4fUiE30OnvTZhUA0H+SkxhQXK6MgNsmL/lZ7RVqFLwawQBzDths2ReluvFOcA=="
     },
+    "vue-seamless-scroll": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.21.tgz",
+      "integrity": "sha512-O6n1Ly4Jw8sKaDuibLUX/QEjXRrMX2uHoqqIBBEM/Nyn8pQZpn2VdJDObBtnAS9F0cD8ExDq0mbZgZX6MXzXqQ==",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
     "weapp-qrcode": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/weapp-qrcode/-/weapp-qrcode-1.0.0.tgz",

+ 1 - 0
package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "moment": "^2.29.1",
     "uview-ui": "^1.7.9",
+    "vue-seamless-scroll": "^1.1.21",
     "weapp-qrcode": "^1.0.0"
   }
 }

+ 69 - 132
pages/luckDraw/luckDraw.vue

@@ -9,6 +9,9 @@
 				@draw-end="handleDrawEnd"
 				@finish="handleDrawFinish"
 				v-if="prizeList.length"
+				:canvasWidth="canvasData.width"
+				:canvasHeight="canvasData.height"
+				:canvasMargin="canvasData.margin"
 			/>
 			<view class="synums">
 				抽奖剩余次数:
@@ -16,71 +19,14 @@
 			</view>
 		</view>
 		<!-- 获奖人员滚动列表 -->
-		<view class="hjList">
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
-				恭喜
-				<text>185****5252</text>
-				获得
-				<text>7</text>
-				乐豆
-			</view>
-			<view>
+		<vueSeamlessScroll :data="hjList" :class-option="hjListOptions" class="hjList">
+			<view class="hjList_item" v-for="(item, index) in hjList" :key="index">
 				恭喜
-				<text>185****5252</text>
+				<text>{{ item.phone }}</text>
 				获得
-				<text>7</text>
-				乐豆
+				<text>{{ item.prize }}</text>
 			</view>
-		</view>
+		</vueSeamlessScroll> 
 		<!-- 抽奖规则 -->
 		<view class="guize">
 			<view>抽奖规则</view>
@@ -108,19 +54,54 @@
 </template>
 
 <script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
 import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue';
 import { clearCacheFile } from '@/almost-utils/almost-utils.js';
 export default {
 	name: 'Home',
 	components: {
-		AlmostLottery
+		AlmostLottery,
+		vueSeamlessScroll
 	},
 	data() {
 		return {
-			// canvas 宽高
+			hjList: [
+				{
+					time: '2019年1月',
+					phone: '1855****7766',
+					prize: 'iphone1164G一部'
+				},
+				{
+					time: '2019年2月',
+					phone: '1855****7766',
+					prize: 'iphone1164G一部'
+				},
+				{
+					time: '2019年3月',
+					phone: '1855****7766',
+					prize: 'iphone1164G一部'
+				},
+				{
+					time: '2019年4月',
+					phone: '1855****7766',
+					prize: 'iphone1164G一部'
+				},
+				{
+					time: '2019年5月',
+					phone: '1855****7766',
+					prize: 'iphone1164G一部'
+				},
+				{
+					time: '2019年6月',
+					phone: '1855****7766',
+					prize: 'iphone1164G一部'
+				}
+			], // 已获奖人员
+			// canvas 属性配置
 			canvasData: {
-				width: 200,
-				height: 200
+				width: 220,
+				height: 220,
+				margin: -1
 			},
 			// 奖品数据
 			prizeList: [],
@@ -130,14 +111,22 @@ export default {
 			targetName: '',
 			// 奖品是否设有库存
 			onStock: true,
-			// 是否由前端控制概率,默认不开启
-			onFrontend: false,
 			// 权重随机数的最大值
 			weightTotal: 0,
 			// 权重数组
 			weightArr: []
 		};
 	},
+	computed: {
+	  hjListOptions () {
+		return {
+		  step: 1,
+		  limitMoveNum: 5,
+		  singleHeight: 30,
+		  waitTime: 1000,
+		}
+	  }
+	},
 	methods: {
 		// 重新生成
 		handleInitCanvas() {
@@ -161,13 +150,6 @@ export default {
 					// stock 奖品库存
 					// weight 中奖概率,数值越大中奖概率越高
 					this.prizeList = data;
-
-					// 如果开启了前端控制概率
-					// 计算出权重的总和并生成权重数组
-					if (this.onFrontend) {
-						this.prizeList.forEach(item => (this.weightTotal += item.weight));
-						this.weightArr = this.prizeList.map(item => item.weight);
-					}
 				}
 			} else {
 				uni.hideLoading();
@@ -221,51 +203,14 @@ export default {
 			let stoTimer = setTimeout(() => {
 				clearTimeout(stoTimer);
 				stoTimer = null;
-
-				// 判断是否由前端控制概率
-				// 前端控制概率的情况下,需要拿到最接近随机权重且大于随机权重的值
-				// 后端控制概率的情况下,通常会直接返回 prizeId
-				if (this.onFrontend) {
-					if (!this.weightTotal) {
-						console.warn('###当前已开启前端控制中奖概率,但是奖品数据列表中的 weight 参数似乎配置不正确###');
-						return;
-					}
-					console.warn('###当前处于前端控制中奖概率,安全起见,强烈建议由后端控制###');
-					console.log('当前权重总和为 =>', this.weightTotal);
-
-					// 注意这里使用了 Math.ceil,如果某个权重的值为 0,则始终无法中奖
-					let weight = Math.ceil(Math.random() * this.weightTotal);
-					console.log('本次权重随机数 =>', weight);
-
-					// 生成大于等于随机权重的数组
-					let tempMaxArrs = [];
-					list.forEach(item => {
-						if (item.weight >= weight) {
-							tempMaxArrs.push(item.weight);
-						}
-					});
-
-					// 如果大于随机权重的数组有值,先对这个数组排序然后取值
-					// 反之新建一个临时的包含所有权重的已排序数组,然后取值
-					if (tempMaxArrs.length) {
-						tempMaxArrs.sort((a, b) => a - b);
-						this.prizeIndex = this.weightArr.indexOf(tempMaxArrs[0]);
-					} else {
-						let tempWeightArr = [...this.weightArr];
-						tempWeightArr.sort((a, b) => a - b);
-						this.prizeIndex = this.weightArr.indexOf(tempWeightArr[tempWeightArr.length - 1]);
+				// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
+				let prizeId = Math.floor(Math.random() * list.length + 1);
+				list.forEach((item, index) => {
+					if (item.prizeId === prizeId) {
+						// 中奖下标
+						this.prizeIndex = index;
 					}
-				} else {
-					console.warn('###当前处于模拟的随机中奖概率,实际场景中,中奖概率应由后端控制###');
-					// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
-					let prizeId = Math.floor(Math.random() * list.length + 1);
-					list.forEach((item, index) => {
-						if (item.prizeId === prizeId) {
-							// 中奖下标
-							this.prizeIndex = index;
-						}
-					});
-				}
+				});
 				console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].name);
 				if (this.onStock) {
 					console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].stock);
@@ -279,10 +224,10 @@ export default {
 			if (this.onStock) {
 				let prizeStock = this.prizeList[this.prizeIndex].stock;
 				this.targetName = prizeName === '谢谢参与' ? prizeName : prizeStock ? `恭喜您,获得 ${prizeName}` : '很抱歉,您来晚了,当前奖品已无库存';
-			}else{
+			} else {
 				this.targetName = prizeName === '谢谢参与' ? prizeName : `恭喜您,获得 ${prizeName}`;
 			}
-			console.log(this.targetName)
+			console.log(this.targetName);
 		},
 		// 抽奖转盘绘制完成
 		handleDrawFinish(res) {
@@ -322,17 +267,9 @@ export default {
 			}
 		}
 	}
-	.hjList {
-		height: 30vh;
-		overflow: auto;
-		> view {
-			width: 70%;
-			margin: 10rpx auto;
-			background: #acdbff;
-			padding: 6rpx;
-			border-radius: 50rpx;
-			text-align: center;
-			font-size: 24rpx;
+	.hjList{
+		.hjList_item{
+			
 		}
 	}
 	.guize {