|
@@ -9,6 +9,9 @@
|
|
@draw-end="handleDrawEnd"
|
|
@draw-end="handleDrawEnd"
|
|
@finish="handleDrawFinish"
|
|
@finish="handleDrawFinish"
|
|
v-if="prizeList.length"
|
|
v-if="prizeList.length"
|
|
|
|
+ :canvasWidth="canvasData.width"
|
|
|
|
+ :canvasHeight="canvasData.height"
|
|
|
|
+ :canvasMargin="canvasData.margin"
|
|
/>
|
|
/>
|
|
<view class="synums">
|
|
<view class="synums">
|
|
抽奖剩余次数:
|
|
抽奖剩余次数:
|
|
@@ -16,71 +19,14 @@
|
|
</view>
|
|
</view>
|
|
</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>
|
|
- </view>
|
|
|
|
|
|
+ </vueSeamlessScroll>
|
|
<!-- 抽奖规则 -->
|
|
<!-- 抽奖规则 -->
|
|
<view class="guize">
|
|
<view class="guize">
|
|
<view>抽奖规则</view>
|
|
<view>抽奖规则</view>
|
|
@@ -108,19 +54,54 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue';
|
|
import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue';
|
|
import { clearCacheFile } from '@/almost-utils/almost-utils.js';
|
|
import { clearCacheFile } from '@/almost-utils/almost-utils.js';
|
|
export default {
|
|
export default {
|
|
name: 'Home',
|
|
name: 'Home',
|
|
components: {
|
|
components: {
|
|
- AlmostLottery
|
|
|
|
|
|
+ AlmostLottery,
|
|
|
|
+ vueSeamlessScroll
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
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: {
|
|
canvasData: {
|
|
- width: 200,
|
|
|
|
- height: 200
|
|
|
|
|
|
+ width: 220,
|
|
|
|
+ height: 220,
|
|
|
|
+ margin: -1
|
|
},
|
|
},
|
|
// 奖品数据
|
|
// 奖品数据
|
|
prizeList: [],
|
|
prizeList: [],
|
|
@@ -130,14 +111,22 @@ export default {
|
|
targetName: '',
|
|
targetName: '',
|
|
// 奖品是否设有库存
|
|
// 奖品是否设有库存
|
|
onStock: true,
|
|
onStock: true,
|
|
- // 是否由前端控制概率,默认不开启
|
|
|
|
- onFrontend: false,
|
|
|
|
// 权重随机数的最大值
|
|
// 权重随机数的最大值
|
|
weightTotal: 0,
|
|
weightTotal: 0,
|
|
// 权重数组
|
|
// 权重数组
|
|
weightArr: []
|
|
weightArr: []
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ hjListOptions () {
|
|
|
|
+ return {
|
|
|
|
+ step: 1,
|
|
|
|
+ limitMoveNum: 5,
|
|
|
|
+ singleHeight: 30,
|
|
|
|
+ waitTime: 1000,
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
// 重新生成
|
|
// 重新生成
|
|
handleInitCanvas() {
|
|
handleInitCanvas() {
|
|
@@ -161,13 +150,6 @@ export default {
|
|
// stock 奖品库存
|
|
// stock 奖品库存
|
|
// weight 中奖概率,数值越大中奖概率越高
|
|
// weight 中奖概率,数值越大中奖概率越高
|
|
this.prizeList = data;
|
|
this.prizeList = data;
|
|
-
|
|
|
|
- // 如果开启了前端控制概率
|
|
|
|
- // 计算出权重的总和并生成权重数组
|
|
|
|
- if (this.onFrontend) {
|
|
|
|
- this.prizeList.forEach(item => (this.weightTotal += item.weight));
|
|
|
|
- this.weightArr = this.prizeList.map(item => item.weight);
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
@@ -221,51 +203,14 @@ export default {
|
|
let stoTimer = setTimeout(() => {
|
|
let stoTimer = setTimeout(() => {
|
|
clearTimeout(stoTimer);
|
|
clearTimeout(stoTimer);
|
|
stoTimer = null;
|
|
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);
|
|
console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].name);
|
|
if (this.onStock) {
|
|
if (this.onStock) {
|
|
console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].stock);
|
|
console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].stock);
|
|
@@ -279,10 +224,10 @@ export default {
|
|
if (this.onStock) {
|
|
if (this.onStock) {
|
|
let prizeStock = this.prizeList[this.prizeIndex].stock;
|
|
let prizeStock = this.prizeList[this.prizeIndex].stock;
|
|
this.targetName = prizeName === '谢谢参与' ? prizeName : prizeStock ? `恭喜您,获得 ${prizeName}` : '很抱歉,您来晚了,当前奖品已无库存';
|
|
this.targetName = prizeName === '谢谢参与' ? prizeName : prizeStock ? `恭喜您,获得 ${prizeName}` : '很抱歉,您来晚了,当前奖品已无库存';
|
|
- }else{
|
|
|
|
|
|
+ } else {
|
|
this.targetName = prizeName === '谢谢参与' ? prizeName : `恭喜您,获得 ${prizeName}`;
|
|
this.targetName = prizeName === '谢谢参与' ? prizeName : `恭喜您,获得 ${prizeName}`;
|
|
}
|
|
}
|
|
- console.log(this.targetName)
|
|
|
|
|
|
+ console.log(this.targetName);
|
|
},
|
|
},
|
|
// 抽奖转盘绘制完成
|
|
// 抽奖转盘绘制完成
|
|
handleDrawFinish(res) {
|
|
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 {
|
|
.guize {
|