合并代码
This commit is contained in:
zpc
commit
53665b748d
424
App.vue
424
App.vue
|
|
@ -1,239 +1,255 @@
|
|||
<script>
|
||||
import Vue from "vue";
|
||||
// 移除全局预览弹窗方法导入
|
||||
import Vue from "vue";
|
||||
// 移除全局预览弹窗方法导入
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isFirstLaunch: true, // 添加标志变量，用于标记是否是首次启动
|
||||
}
|
||||
},
|
||||
onLaunch: function () {
|
||||
console.log("App Launch");
|
||||
// #ifdef MP-WEIXIN
|
||||
const updateManager = uni.getUpdateManager();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isFirstLaunch: true, // 添加标志变量，用于标记是否是首次启动
|
||||
}
|
||||
},
|
||||
onLaunch: function() {
|
||||
console.log("App Launch");
|
||||
// #ifdef MP-WEIXIN
|
||||
const updateManager = uni.getUpdateManager();
|
||||
|
||||
updateManager.onCheckForUpdate(function (res) {
|
||||
// 请求完新版本信息的回调
|
||||
console.log(res.hasUpdate);
|
||||
});
|
||||
updateManager.onCheckForUpdate(function(res) {
|
||||
// 请求完新版本信息的回调
|
||||
console.log(res.hasUpdate);
|
||||
});
|
||||
|
||||
updateManager.onUpdateReady(function (res) {
|
||||
uni.showModal({
|
||||
title: "更新提示",
|
||||
content: "新版本已经准备好，是否重启应用？",
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
||||
updateManager.applyUpdate();
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
updateManager.onUpdateReady(function(res) {
|
||||
uni.showModal({
|
||||
title: "更新提示",
|
||||
content: "新版本已经准备好，是否重启应用？",
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
||||
updateManager.applyUpdate();
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
updateManager.onUpdateFailed(function (res) {
|
||||
// 新的版本下载失败
|
||||
});
|
||||
//#endif
|
||||
var that = this;
|
||||
updateManager.onUpdateFailed(function(res) {
|
||||
// 新的版本下载失败
|
||||
});
|
||||
//#endif
|
||||
var that = this;
|
||||
|
||||
this.$config.init().then(async (data) => {
|
||||
//加载配置
|
||||
let src = await that.$config.getAppSettingAsync("win_audio");
|
||||
if (src == null || src == "") {
|
||||
src = that.$img("/static/mp3/open.mp3");
|
||||
}
|
||||
//创建中奖音乐
|
||||
const openBgm = uni.createInnerAudioContext();
|
||||
Vue.prototype.bgmCtx = {};
|
||||
Vue.prototype.bgmCtx.openBgm = openBgm;
|
||||
openBgm.src = src;
|
||||
});
|
||||
this.$config.init().then(async (data) => {
|
||||
//加载配置
|
||||
let src = await that.$config.getAppSettingAsync("win_audio");
|
||||
if (src == null || src == "") {
|
||||
src = that.$img("/static/mp3/open.mp3");
|
||||
}
|
||||
//创建中奖音乐
|
||||
const openBgm = uni.createInnerAudioContext();
|
||||
Vue.prototype.bgmCtx = {};
|
||||
Vue.prototype.bgmCtx.openBgm = openBgm;
|
||||
openBgm.src = src;
|
||||
|
||||
// 调用登录记录接口
|
||||
this.callLoginRecordApi();
|
||||
|
||||
/* 重置首页公告弹窗状态 */
|
||||
uni.setStorageSync("_is_this_show", false);
|
||||
//抽音效
|
||||
let src2 = await that.$config.getAppSettingAsync("win_audio2");
|
||||
if (src2 == null || src2 == "") {
|
||||
src2 = that.$img("/static/mp3/slot_open.mp3");
|
||||
}
|
||||
//创建中奖音乐
|
||||
const slotBgm = uni.createInnerAudioContext();
|
||||
Vue.prototype.bgmCtx = {};
|
||||
Vue.prototype.bgmCtx.slotBgm = slotBgm;
|
||||
slotBgm.src = src2;
|
||||
|
||||
/* 清除缓存中的广告id */
|
||||
uni.removeStorageSync("_ad_id");
|
||||
/* 清除缓存中的click_id */
|
||||
uni.removeStorageSync("_click_id");
|
||||
},
|
||||
onShow: function () {
|
||||
console.log("App Show");
|
||||
// // 如果不是首次启动才调用登录记录接口，避免与onLaunch重复调用，有问题，当用户分享的时候，会频繁触发
|
||||
// if (!this.isFirstLaunch) {
|
||||
// this.callLoginRecordApi();
|
||||
// } else {
|
||||
// this.isFirstLaunch = false; // 重置标志
|
||||
// }
|
||||
},
|
||||
onHide: function () {
|
||||
console.log("App Hide");
|
||||
},
|
||||
methods: {
|
||||
// 调用登录记录接口的方法
|
||||
callLoginRecordApi() {
|
||||
// 检查用户是否已登录
|
||||
const token = uni.getStorageSync('token');
|
||||
if (!token) {
|
||||
console.log('用户未登录，不调用登录记录接口');
|
||||
return;
|
||||
}
|
||||
this.req({
|
||||
url: 'login_record',
|
||||
method: 'POST',
|
||||
success: (res) => {
|
||||
console.log('登录记录接口调用成功', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('登录记录接口调用失败', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 调用登录记录接口
|
||||
this.callLoginRecordApi();
|
||||
|
||||
/* 重置首页公告弹窗状态 */
|
||||
uni.setStorageSync("_is_this_show", false);
|
||||
|
||||
/* 清除缓存中的广告id */
|
||||
uni.removeStorageSync("_ad_id");
|
||||
/* 清除缓存中的click_id */
|
||||
uni.removeStorageSync("_click_id");
|
||||
},
|
||||
onShow: function() {
|
||||
console.log("App Show");
|
||||
// // 如果不是首次启动才调用登录记录接口，避免与onLaunch重复调用，有问题，当用户分享的时候，会频繁触发
|
||||
// if (!this.isFirstLaunch) {
|
||||
// this.callLoginRecordApi();
|
||||
// } else {
|
||||
// this.isFirstLaunch = false; // 重置标志
|
||||
// }
|
||||
},
|
||||
onHide: function() {
|
||||
console.log("App Hide");
|
||||
},
|
||||
methods: {
|
||||
// 调用登录记录接口的方法
|
||||
callLoginRecordApi() {
|
||||
// 检查用户是否已登录
|
||||
const token = uni.getStorageSync('token');
|
||||
if (!token) {
|
||||
console.log('用户未登录，不调用登录记录接口');
|
||||
return;
|
||||
}
|
||||
this.req({
|
||||
url: 'login_record',
|
||||
method: 'POST',
|
||||
success: (res) => {
|
||||
console.log('登录记录接口调用成功', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('登录记录接口调用失败', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "./common/animate.css";
|
||||
@import url("./common/common.css");
|
||||
@import url("/components/gaoyia-parse/parse.css");
|
||||
/*每个页面公共css */
|
||||
@import "./common/animate.css";
|
||||
@import url("./common/common.css");
|
||||
@import url("/components/gaoyia-parse/parse.css");
|
||||
|
||||
/* 引入字体 */
|
||||
@font-face {
|
||||
font-family: "YouSheBiaoTiHei";
|
||||
src: url($imgurl + "font/YouSheBiaoTiHei.ttf") format("truetype");
|
||||
}
|
||||
/* 引入字体 */
|
||||
@font-face {
|
||||
font-family: "YouSheBiaoTiHei";
|
||||
src: url($imgurl + "font/YouSheBiaoTiHei.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "zihun152hao-jijiachaojihei";
|
||||
src: url($imgurl + "font/zihun152hao-jijiachaojihei.TTF") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "zihun152hao-jijiachaojihei";
|
||||
src: url($imgurl + "font/zihun152hao-jijiachaojihei.TTF") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "zihun147hao-xingyuanhei";
|
||||
src: url($imgurl + "font/zihun147hao-xingyuanhei.TTF") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "zihun147hao-xingyuanhei";
|
||||
src: url($imgurl + "font/zihun147hao-xingyuanhei.TTF") format("truetype");
|
||||
}
|
||||
|
||||
page {
|
||||
overflow-x: hidden;
|
||||
page {
|
||||
overflow-x: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #1c1b20;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #1c1b20;
|
||||
}
|
||||
}
|
||||
|
||||
.ziti {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
.ziti {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hang2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
.hang2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.hang1 {
|
||||
overflow: hidden;
|
||||
/*超出部分隐藏*/
|
||||
white-space: nowrap;
|
||||
/*不换行*/
|
||||
text-overflow: ellipsis;
|
||||
/*超出部分文字以...显示*/
|
||||
}
|
||||
.hang1 {
|
||||
overflow: hidden;
|
||||
/*超出部分隐藏*/
|
||||
white-space: nowrap;
|
||||
/*不换行*/
|
||||
text-overflow: ellipsis;
|
||||
/*超出部分文字以...显示*/
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.common_bg {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.common_bg {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button.hide {
|
||||
position: absolute;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
button.hide {
|
||||
position: absolute;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 重写组件样式 */
|
||||
/deep/.uni-noticebar {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* 重写组件样式 */
|
||||
/deep/.uni-noticebar {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/deep/.mescroll-upwarp {
|
||||
box-sizing: border-box;
|
||||
min-height: 55px;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
/deep/.mescroll-upwarp {
|
||||
box-sizing: border-box;
|
||||
min-height: 55px;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/deep/.cmd-progress-outer {
|
||||
line-height: 0;
|
||||
/deep/.cmd-progress-outer {
|
||||
line-height: 0;
|
||||
|
||||
.cmd-progress-bg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
.cmd-progress-bg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-tabbar__bd {
|
||||
height: 50px !important;
|
||||
}
|
||||
.uni-tabbar__bd {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
.uni-tabbar__icon {
|
||||
height: 50px !important;
|
||||
}
|
||||
.uni-tabbar__icon {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
@keyframes m-zoom {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@keyframes m-zoom {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -336,7 +336,7 @@ $nav-height: 44px;
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 998;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
&--shadow {
|
||||
|
|
|
|||
349
components/tiner-swiper-loop/tiner-swiper-loop.vue
Normal file
349
components/tiner-swiper-loop/tiner-swiper-loop.vue
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
<template>
|
||||
<view class="scroll-view" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
|
||||
<view class="view-list" :style="scrollOffsetStyle">
|
||||
<view class="list-item" v-for="(item,index) in suffixItems" :key="index+'left'"
|
||||
:style="(index-excessCount == curIndex && itemSelectBig) ? itemParentSelectStyle : itemParentNomalStyle"
|
||||
@click="onItemClick(-excessCount,index)">
|
||||
|
||||
<view :class="{'item-checked ':itemSelectBig && (curIndex == index - excessCount)}"
|
||||
:style="itemAnimateStyle">
|
||||
<slot :item="item" :index="index"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item" v-for="(item,index) in items"
|
||||
:style="(index == curIndex && itemSelectBig) ? itemParentSelectStyle : itemParentNomalStyle"
|
||||
@click="onItemClick(index)" :key="index">
|
||||
|
||||
<view :class="{'item-checked ':itemSelectBig && (index == curIndex)}" :style="itemAnimateStyle">
|
||||
<slot :item="item" :index="index"></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" v-for="(item,index) in prefixItems" :key="index + 'right'"
|
||||
:style="(items.length + index == curIndex && itemSelectBig) ? itemParentSelectStyle : itemParentNomalStyle"
|
||||
@click="onItemClick(items.length,index)">
|
||||
|
||||
<view :class="{'item-checked ':itemSelectBig && (curIndex == index + items.length)}"
|
||||
:style="itemAnimateStyle">
|
||||
<slot :item="item" :index="index"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let lottrypoolCount = 30;
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
aTime: {
|
||||
type: [Number],
|
||||
default: 0.2
|
||||
},
|
||||
//每个元素的宽度 单位px
|
||||
itemW: {
|
||||
type: [Number],
|
||||
default: uni.upx2px(170)
|
||||
},
|
||||
//每个元素的高度, 单位px
|
||||
itemH: {
|
||||
type: [Number],
|
||||
default: uni.upx2px(220)
|
||||
},
|
||||
//两边各多出几个item
|
||||
excessCount: {
|
||||
type: [Number],
|
||||
default: 4
|
||||
},
|
||||
items: {
|
||||
type: [Array],
|
||||
default: []
|
||||
},
|
||||
//选中的item 是否有放大效果
|
||||
itemSelectBig: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
//是否禁止触摸滑动
|
||||
disableTouch: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
//是否是抽奖
|
||||
isLottry: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrolloffset: 0,
|
||||
aniTime: this.aTime,
|
||||
curIndex: 0,
|
||||
|
||||
isTouch: false,
|
||||
isMove: false,
|
||||
startX: 0,
|
||||
endX: 0,
|
||||
prizePoolItems: [], //奖池数据
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 初始偏移量
|
||||
startOffset() {
|
||||
let itemScle = 1;
|
||||
if (this.itemSelectBig) {
|
||||
itemScle = 1.4
|
||||
}
|
||||
return uni.upx2px(375) - this.itemW * itemScle / 2 - this.excessCount * this.itemW;
|
||||
},
|
||||
scrollOffsetStyle() {
|
||||
// 注意：translateX 的单位得用px，不然会有误差，不知道什么原因，不信你可以试试。把所有单位换成rpx
|
||||
return `transition: all ${ this.isTouch ? 0 :this.aniTime }s ${this.isLottry?'ease-in-out':'linear'};transform: translateX(${this.scrolloffset}px);`
|
||||
},
|
||||
//后缀部分
|
||||
prefixItems() {
|
||||
return this.items.slice(0, this.excessCount);
|
||||
},
|
||||
//前缀部分
|
||||
suffixItems() {
|
||||
return this.items.slice(this.items.length - this.excessCount, this.items.length);
|
||||
},
|
||||
//选中的item容器（放大1.4）
|
||||
itemParentSelectStyle() {
|
||||
return `width:${this.itemW * 1.4}px;height:${this.itemH*1.4}px;transition: all ${this.aniTime}s linear;`
|
||||
},
|
||||
//正常情况下的容器
|
||||
itemParentNomalStyle() {
|
||||
return `width:${this.itemW}px;height:${this.itemH}px;transition: all ${this.aniTime}s linear;`
|
||||
},
|
||||
itemAnimateStyle() {
|
||||
return `transition: all ${this.aniTime}s linear;transform-origin: bottom center;`
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.isLottry) {
|
||||
this.initLottryData();
|
||||
} else {
|
||||
this.scrolloffset = this.startOffset;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
onTouchStart(e) {
|
||||
if (this.disableTouch) return
|
||||
let x = e.changedTouches[0].clientX;
|
||||
//console.log("触摸开始=====",x);
|
||||
|
||||
this.isTouch = true;
|
||||
// 记录之前的偏移量
|
||||
this.oldOffset = this.scrolloffset;
|
||||
this.startX = x;
|
||||
},
|
||||
onTouchMove(e) {
|
||||
if (this.disableTouch) return
|
||||
this.isMove = true;
|
||||
let x = e.changedTouches[0].clientX;
|
||||
console.log("触摸结束=====", x);
|
||||
this.endX = x;
|
||||
this.scrolloffset = this.oldOffset + this.endX - this.startX;
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
if (this.disableTouch || this.isLottry) return
|
||||
let x = e.changedTouches[0].clientX;
|
||||
//console.log("触摸结束=====",x);
|
||||
if (this.isMove && !this.isLottry) {
|
||||
//只有移动的时候才会对不齐中间，点击item的时候不执行这个
|
||||
this.moveItemAfterToCenter();
|
||||
}
|
||||
this.isTouch = false;
|
||||
this.isMove = false;
|
||||
|
||||
},
|
||||
//针对触摸后屏幕中心点没有和item的中心对齐，使其对齐
|
||||
moveItemAfterToCenter() {
|
||||
//1、计算出当前偏移量在哪个item上，求curIndex
|
||||
//this.scrolloffset = startOffset - realIndex * this.itemW;
|
||||
//根据上面的公式计算realIndex = (startOffset - this.scrolloffset)/this.itemW;
|
||||
//因为偏移量是指向中心位置的，所以这个realIndex是中间位置，也就是 realIndex ± 0.5 都是这个item,所以必须是四舍五入，要不然就要再减去 this.itemW/2，
|
||||
//最后公式是realIndex = (startOffset - this.scrolloffset - this.itemW/2)/this.itemW;
|
||||
|
||||
//四舍五入的情况是 let curIndex = Math.round((startOffset - this.scrolloffset) / this.itemW);
|
||||
//下面是向上取整
|
||||
let curIndex = Math.ceil((this.startOffset - this.scrolloffset - this.itemW / 2) / this.itemW);
|
||||
this.curIndex = curIndex;
|
||||
console.log("计算得到当前索引：", curIndex);
|
||||
this.scrolloffset = this.startOffset - curIndex * this.itemW;
|
||||
this.loopOffset(curIndex);
|
||||
},
|
||||
onItemClick(startIndex, index) {
|
||||
if (this.disableTouch) {
|
||||
return;
|
||||
}
|
||||
let realIndex = startIndex;
|
||||
if (startIndex > 9) {
|
||||
realIndex = startIndex + index;
|
||||
}
|
||||
if (startIndex < 0) {
|
||||
realIndex = startIndex + index;
|
||||
}
|
||||
this.curIndex = realIndex;
|
||||
this.scrolloffset = this.startOffset - realIndex * this.itemW;
|
||||
|
||||
//console.log("偏移量：",this.scrolloffset);
|
||||
this.loopOffset(realIndex);
|
||||
},
|
||||
//无限循环的关键
|
||||
loopOffset(realIndex) {
|
||||
if (realIndex > this.items.length - 1 || realIndex < 0) {
|
||||
let rindex = 0;
|
||||
if (realIndex > this.items.length - 1) { //后缀item， 需要回到真正的偏移量
|
||||
rindex = realIndex - this.items.length;
|
||||
} else { //前缀item，偏移量需要指向最后边的那几个item
|
||||
rindex = this.items.length + realIndex;
|
||||
}
|
||||
setTimeout(() => {
|
||||
console.log("归正：");
|
||||
//点击后有个动画时间，过了动画后以不可察觉的无动画方式使偏离量回正。
|
||||
this.aniTime = 0;
|
||||
this.scrolloffset = this.startOffset - rindex * this.itemW;
|
||||
this.curIndex = rindex;
|
||||
|
||||
setTimeout(() => {
|
||||
console.log("归正结束");
|
||||
this.aniTime = this.aTime;
|
||||
}, 100) //执行上一句需要时间，等待一会儿再把动画时间复原
|
||||
}, 300)
|
||||
} else {
|
||||
this.curIndex = realIndex;
|
||||
}
|
||||
},
|
||||
//设置数据
|
||||
initLottryData() {
|
||||
// 随机一个数作为奖品（应该注意的是，抽奖前奖品是什么就已经注定，滚动只是一个效果，奖品是随机也确实没啥大问题。））
|
||||
// let winPrizeItemIndex = parseInt(Math.random()*this.items.length);
|
||||
let winPrizeItemIndex = 4;
|
||||
|
||||
let prizeItem = this.items[winPrizeItemIndex]; //当前奖品
|
||||
let listLength = this.items.length;
|
||||
|
||||
let prizePoolItems = [];
|
||||
if (this.prizePoolItems.length == 0) { //第一次，不用考虑当前屏幕显示的是哪几个奖品
|
||||
console.log("第一次抽奖：");
|
||||
while (prizePoolItems.length < lottrypoolCount) {
|
||||
if (prizePoolItems.length == lottrypoolCount - 3) {
|
||||
//将本次奖品放入奖品池中
|
||||
prizePoolItems.push(prizeItem);
|
||||
} else {
|
||||
//从商品池中随机选一个
|
||||
const randomIndex = parseInt(Math.random() * listLength);
|
||||
prizePoolItems.push(this.items[randomIndex]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
//需要上一次抽奖的后三个，放在这次奖品池数据的头三个，形成视觉误差，
|
||||
prizePoolItems.push(this.prizePoolItems[this.prizePoolItems.length - 5]);
|
||||
prizePoolItems.push(this.prizePoolItems[this.prizePoolItems.length - 4]);
|
||||
prizePoolItems.push(this.prizePoolItems[this.prizePoolItems.length - 3]);
|
||||
prizePoolItems.push(this.prizePoolItems[this.prizePoolItems.length - 2]);
|
||||
prizePoolItems.push(this.prizePoolItems[this.prizePoolItems.length - 1]);
|
||||
|
||||
while (prizePoolItems.length < lottrypoolCount) {
|
||||
if (prizePoolItems.length == lottrypoolCount - 3) {
|
||||
//将本次奖品放入奖品池中
|
||||
prizePoolItems.push(prizeItem);
|
||||
} else {
|
||||
//从商品池中随机选一个
|
||||
const randomIndex = parseInt(Math.random() * listLength);
|
||||
prizePoolItems.push(this.items[randomIndex]);
|
||||
}
|
||||
}
|
||||
}
|
||||
//记录上一次的商品池进神
|
||||
this.prizePoolItems = prizePoolItems;
|
||||
|
||||
this.items = prizePoolItems;
|
||||
console.log("奖品池数据：", prizePoolItems);
|
||||
this.aniTime = 0;
|
||||
this.scrolloffset = this.startOffset - 2 * this.itemW;
|
||||
setTimeout(() => {
|
||||
this.aniTime = this.aTime;
|
||||
}, 100)
|
||||
},
|
||||
startDraw() {
|
||||
console.log("startDraw");
|
||||
if (this.drawTimer) {
|
||||
uni.showToast({
|
||||
title: "正在抽奖，请稍后。。。",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.scrolloffset = this.startOffset - 27 * this.itemW;
|
||||
|
||||
console.log("this.scrolloffset", this.scrolloffset);
|
||||
|
||||
this.drawTimer = setTimeout(() => {
|
||||
clearTimeout(this.drawTimer);
|
||||
this.drawTimer = null;
|
||||
this.initLottryData();
|
||||
}, this.aniTime * 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.scroll-view {
|
||||
position: relative;
|
||||
height: 152.78rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.view-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
transform-origin: bottom center;
|
||||
|
||||
|
||||
// .item—normal {
|
||||
// box-sizing: border-box;
|
||||
// transform-origin: bottom center;
|
||||
// }
|
||||
|
||||
.item-checked {
|
||||
background-color: gold;
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.item-center-line {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 1rpx;
|
||||
background-color: green;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -365,6 +365,13 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shouye/slots",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/other/choose_address",
|
||||
"style" :
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,7 +7,7 @@
|
|||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
|
||||
<view class="flex" style="width: 100%">
|
||||
<view class="title1" style="width: 166rpx; height: 64rpx; margin-top: 5rpx;">
|
||||
<view class="title1" style="width: 166rpx; height: 64rpx; margin-top: 5rpx;" @click="jumapSlots()">
|
||||
<image :src="$img1('common/home_logo.png')" style="width: 166rpx; height: 64rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -430,6 +430,10 @@ export default {
|
|||
toyaqingRanking() {
|
||||
this.$customRouter.navigateTo("/pages/shouye/yaoqing_ranking");
|
||||
},
|
||||
|
||||
jumapSlots(){
|
||||
this.$customRouter.navigateTo("/pages/shouye/slots");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
175
pages/shouye/slots.vue
Normal file
175
pages/shouye/slots.vue
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<page-container title="老虎机" :showBack="true">
|
||||
|
||||
<view class="content-container">
|
||||
|
||||
|
||||
<view class="slot-view">
|
||||
|
||||
<view class=""
|
||||
style="width: 100%; height: 152.78rpx; background-color: aquamarine; margin-top: 195rpx;">
|
||||
|
||||
|
||||
<tiner-swiper-loop ref="lottryRef" :itemW="lotteryItemSize[0]" :itemH="lotteryItemSize[1]"
|
||||
:items="items" :aTime="5" :isLottry="true" :excessCount="0" :disableTouch="true"
|
||||
style="height: 152.78rpx;">
|
||||
<template v-slot="{item,index}">
|
||||
<view class="item-lottry" :style="{ color: item.color }">{{item.value}}</view>
|
||||
</template>
|
||||
</tiner-swiper-loop>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<button style="margin-top: 20rpx;" @click="onStartDraw">开始抽奖</button>
|
||||
|
||||
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 原始数据
|
||||
items: [{
|
||||
value: '一等奖',
|
||||
color: '#ff0000'
|
||||
},
|
||||
{
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
}, {
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
}, {
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
},
|
||||
{
|
||||
value: '二等奖',
|
||||
color: '#00ff00'
|
||||
},
|
||||
{
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
}, {
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
},
|
||||
{
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
},
|
||||
{
|
||||
value: '三等奖',
|
||||
color: '#0000ff'
|
||||
},
|
||||
{
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
},
|
||||
{
|
||||
value: '四等奖',
|
||||
color: '#ffff00'
|
||||
},
|
||||
{
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
}, {
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
}, {
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
},
|
||||
{
|
||||
value: '五等奖',
|
||||
color: '#ff00ff'
|
||||
},
|
||||
{
|
||||
value: '六等奖',
|
||||
color: '#00ffff'
|
||||
},
|
||||
{
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
},
|
||||
{
|
||||
value: '七等奖',
|
||||
color: '#ff8800'
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
lotteryItemSize() {
|
||||
let height = uni.upx2px(220);
|
||||
let width = uni.upx2px(170);
|
||||
return [width, height];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
onStartDraw() {
|
||||
//this.$refs.lottryRef.initLottryData();
|
||||
this.bgmCtx.slotBgm.play()
|
||||
this.$refs.lottryRef.startDraw();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-image: url($imgurl + 'common/slot_bg.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.slot-view {
|
||||
background-image: url($imgurl + 'common/slot1.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 427.78rpx;
|
||||
}
|
||||
|
||||
|
||||
.view-center-line {
|
||||
position: absolute;
|
||||
width: 1rpx;
|
||||
background-color: red;
|
||||
height: 300rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.item-lottry {
|
||||
height: 152.78rpx;
|
||||
width: 152.78rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
color: black;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user