4444
This commit is contained in:
zpc
parent
0a43aa6c1f
commit
e74403f72a
484
App.vue
484
App.vue
|
|
@ -1,264 +1,268 @@
|
|||
<script>
|
||||
import Vue from "vue";
|
||||
// 移除全局预览弹窗方法导入
|
||||
import Vue from "vue";
|
||||
import AudioManager from "./common/audio.js";
|
||||
// 移除全局预览弹窗方法导入
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isFirstLaunch: true, // 添加标志变量，用于标记是否是首次启动
|
||||
}
|
||||
},
|
||||
onLaunch: function(options) {
|
||||
// console.log("App Launch", options, window.location.href);
|
||||
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 = {};
|
||||
|
||||
openBgm.src = src;
|
||||
openBgm.sessionCategory = "playback";
|
||||
openBgm.onPlay(() => {
|
||||
console.log('开始播放抽奖弹窗播放');
|
||||
});
|
||||
openBgm.onPause(() => {
|
||||
console.log('播放抽奖弹窗音乐暂停');
|
||||
});
|
||||
openBgm.onStop(() => {
|
||||
console.log('播放抽奖弹窗音乐停止');
|
||||
});
|
||||
openBgm.onError((res) => {
|
||||
console.log('播放抽奖弹窗失败');
|
||||
console.log(res.errMsg);
|
||||
console.log(res.errCode);
|
||||
});
|
||||
Vue.prototype.bgmCtx.openBgm = openBgm;
|
||||
//抽音效
|
||||
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 = {};
|
||||
slotBgm.src = src2;
|
||||
Vue.prototype.bgmCtx.slotBgm = slotBgm;
|
||||
|
||||
|
||||
//抽音效
|
||||
let src3 = await that.$config.getAppSettingAsync("win_audio3");
|
||||
if (src3 == null || src3 == "") {
|
||||
src3 = that.$img("/static/mp3/chaoshen.mp3");
|
||||
}
|
||||
//创建中奖音乐
|
||||
const csBgm = uni.createInnerAudioContext();
|
||||
// Vue.prototype.bgmCtx = {};
|
||||
csBgm.src = src3;
|
||||
|
||||
Vue.prototype.bgmCtx.csBgm = csBgm;
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 调用登录记录接口
|
||||
this.callLoginRecordApi();
|
||||
|
||||
/* 重置首页公告弹窗状态 */
|
||||
uni.setStorageSync("_is_this_show", false);
|
||||
|
||||
/* 清除缓存中的广告id */
|
||||
uni.removeStorageSync("_ad_id");
|
||||
/* 清除缓存中的click_id */
|
||||
uni.removeStorageSync("_click_id");
|
||||
// 调用平台启动方法
|
||||
this.$platform.AppLaunch(options);
|
||||
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
console.log("App Show");
|
||||
|
||||
},
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isFirstLaunch: true, // 添加标志变量，用于标记是否是首次启动
|
||||
}
|
||||
};
|
||||
},
|
||||
onLaunch: function (options) {
|
||||
// console.log("App Launch", options, window.location.href);
|
||||
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 = {};
|
||||
openBgm.src = src;
|
||||
openBgm.sessionCategory = "playback";
|
||||
openBgm.onPlay(() => {
|
||||
console.log('开始播放抽奖弹窗播放');
|
||||
});
|
||||
openBgm.onPause(() => {
|
||||
console.log('播放抽奖弹窗音乐暂停');
|
||||
});
|
||||
openBgm.onStop(() => {
|
||||
console.log('播放抽奖弹窗音乐停止');
|
||||
});
|
||||
openBgm.onError((res) => {
|
||||
console.log('播放抽奖弹窗失败');
|
||||
console.log(res.errMsg);
|
||||
console.log(res.errCode);
|
||||
});
|
||||
Vue.prototype.bgmCtx.openBgm = openBgm;
|
||||
//抽音效
|
||||
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 = {};
|
||||
slotBgm.src = src2;
|
||||
Vue.prototype.bgmCtx.slotBgm = slotBgm;
|
||||
//超神音效
|
||||
let src3 = await that.$config.getAppSettingAsync("win_audio3");
|
||||
if (src3 == null || src3 == "") {
|
||||
src3 = that.$img("/static/mp3/chaoshen.mp3");
|
||||
}
|
||||
//创建中奖音乐
|
||||
const csBgm = uni.createInnerAudioContext();
|
||||
// Vue.prototype.bgmCtx = {};
|
||||
csBgm.src = src3;
|
||||
Vue.prototype.bgmCtx.csBgm = csBgm;
|
||||
|
||||
//宝箱音效
|
||||
let src4 = await that.$config.getAppSettingAsync("win_audio4");
|
||||
if (src4 == null || src4 == "") {
|
||||
src4 = that.$img("/static/mp3/clipchamp.mp3");
|
||||
}
|
||||
//创建中奖音乐 audio
|
||||
const baoXiangBgm = uni.createInnerAudioContext();
|
||||
baoXiangBgm.src = src4;
|
||||
Vue.prototype.bgmCtx.baoXiangBgm = baoXiangBgm;
|
||||
Vue.prototype.audioManager = new AudioManager(openBgm, slotBgm, csBgm, baoXiangBgm);
|
||||
});
|
||||
|
||||
// 调用登录记录接口
|
||||
this.callLoginRecordApi();
|
||||
|
||||
/* 重置首页公告弹窗状态 */
|
||||
uni.setStorageSync("_is_this_show", false);
|
||||
|
||||
/* 清除缓存中的广告id */
|
||||
uni.removeStorageSync("_ad_id");
|
||||
/* 清除缓存中的click_id */
|
||||
uni.removeStorageSync("_click_id");
|
||||
// 调用平台启动方法
|
||||
this.$platform.AppLaunch(options);
|
||||
|
||||
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
console.log("App Show");
|
||||
|
||||
},
|
||||
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");
|
||||
/*每个页面公共css */
|
||||
@import "./common/animate.css";
|
||||
@import url("./common/common.css");
|
||||
|
||||
uni-tabbar {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
z-index: 97 !important;
|
||||
}
|
||||
uni-tabbar {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
z-index: 97 !important;
|
||||
}
|
||||
|
||||
/* 引入字体 */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.ziti {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.hang1 {
|
||||
overflow: hidden;
|
||||
/*超出部分隐藏*/
|
||||
white-space: nowrap;
|
||||
/*不换行*/
|
||||
text-overflow: ellipsis;
|
||||
/*超出部分文字以...显示*/
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.common_bg {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button.hide {
|
||||
position: absolute;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0;
|
||||
&:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #1c1b20;
|
||||
}
|
||||
}
|
||||
|
||||
/* 重写组件样式 */
|
||||
::v-deep.uni-noticebar {
|
||||
padding: 0 !important;
|
||||
.ziti {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.hang1 {
|
||||
overflow: hidden;
|
||||
/*超出部分隐藏*/
|
||||
white-space: nowrap;
|
||||
/*不换行*/
|
||||
text-overflow: ellipsis;
|
||||
/*超出部分文字以...显示*/
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.common_bg {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button.hide {
|
||||
position: absolute;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 重写组件样式 */
|
||||
::v-deep.uni-noticebar {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep.mescroll-upwarp {
|
||||
box-sizing: border-box;
|
||||
min-height: 55px;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
::v-deep.cmd-progress-outer {
|
||||
line-height: 0;
|
||||
|
||||
.cmd-progress-bg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.mescroll-upwarp {
|
||||
box-sizing: border-box;
|
||||
min-height: 55px;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
.uni-tabbar__bd {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
.uni-tabbar__icon {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
@keyframes m-zoom {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
::v-deep.cmd-progress-outer {
|
||||
line-height: 0;
|
||||
|
||||
.cmd-progress-bg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.uni-tabbar__bd {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
.uni-tabbar__icon {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
@keyframes m-zoom {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
40
common/audio.js
Normal file
40
common/audio.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
class AudioManager {
|
||||
constructor(openBgm, slotBgm, csBgm, baoXiangBgm) {
|
||||
this.openBgm = openBgm;
|
||||
this.slotBgm = slotBgm;
|
||||
this.csBgm = csBgm;
|
||||
this.baoXiangBgm = baoXiangBgm;
|
||||
}
|
||||
stop() {
|
||||
this.baoXiangBgm.stop();
|
||||
this.csBgm.stop();
|
||||
this.slotBgm.stop();
|
||||
this.openBgm.stop();
|
||||
}
|
||||
|
||||
playOpenBgm() {
|
||||
this.stop();
|
||||
this.openBgm.seek(0);
|
||||
this.openBgm.play();
|
||||
}
|
||||
|
||||
playSlotBgm() {
|
||||
this.stop();
|
||||
this.slotBgm.seek(0);
|
||||
this.slotBgm.play();
|
||||
}
|
||||
|
||||
playCsBgm() {
|
||||
this.stop();
|
||||
this.csBgm.seek(0);
|
||||
this.csBgm.play();
|
||||
}
|
||||
|
||||
playBaoXiangBgm() {
|
||||
this.stop();
|
||||
this.baoXiangBgm.seek(0);
|
||||
this.baoXiangBgm.play();
|
||||
}
|
||||
}
|
||||
|
||||
export default AudioManager;
|
||||
|
|
@ -8,7 +8,7 @@ import RequestManager from '@/common/request.js'
|
|||
let configData = null;
|
||||
let isLoading = false;
|
||||
let loadPromise = null;
|
||||
const wx_version = "111";
|
||||
const wx_version = "113";
|
||||
|
||||
// 白名单页面（不需要登录即可访问）
|
||||
export const whiteList = [
|
||||
|
|
|
|||
|
|
@ -20,41 +20,9 @@ class AppPlatform extends BasePlatform {
|
|||
getPayData(url, data) {
|
||||
return data;
|
||||
}
|
||||
// async getPlatformConfig() {
|
||||
// console.log("开启动态获取数据。。。。。。。。");
|
||||
// const res = await getPlatform();
|
||||
// if (this.config != null) {
|
||||
// if (this.config.isCheck != res.isCheck) {
|
||||
// uni.setStorageSync('platformConfig', res);
|
||||
// plus.runtime.restart();
|
||||
// }
|
||||
// }
|
||||
// this.config = res;
|
||||
// uni.setStorageSync('platformConfig', res);
|
||||
// }
|
||||
// async getConfig() {
|
||||
// // return new Promise((resolve, reject) => {
|
||||
// if (this.config) {
|
||||
// return this.config;
|
||||
// }
|
||||
// if (uni.getStorageSync('platformConfig')) {
|
||||
// this.config = uni.getStorageSync('platformConfig');
|
||||
// this.getPlatformConfig();
|
||||
// return this.config;
|
||||
// }
|
||||
// this.config = {
|
||||
// isCheck: true,
|
||||
// isWebPay: false,
|
||||
// version: '1.0.0',
|
||||
// };
|
||||
// this.getPlatformConfig();
|
||||
// // const res = await getPlatform();
|
||||
// // this.config = res;
|
||||
// return this.config;
|
||||
// }
|
||||
AppLaunch(options) {
|
||||
console.log("AppLaunch", options);
|
||||
// uni.hideTabBar({})
|
||||
|
||||
this.getConfig().then(res => {
|
||||
console.log("AppLaunch", res);
|
||||
if (res.isCheck) {
|
||||
|
|
@ -96,7 +64,6 @@ class AppPlatform extends BasePlatform {
|
|||
|
||||
getOrderNo(event) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
resolve(null);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ class BasePlatform {
|
|||
}
|
||||
async getConfig() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
if (this.config) {
|
||||
console.log("获取配置", this.config);
|
||||
if (this.config != null) {
|
||||
return this.config;
|
||||
}
|
||||
const res = await getPlatform();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import BasePlatform from './BasePlatform';
|
|||
import eruda from 'eruda';
|
||||
import { parseQueryString } from '@/common/util';
|
||||
|
||||
|
||||
|
||||
|
||||
class H5Platform extends BasePlatform {
|
||||
constructor() {
|
||||
|
|
@ -14,6 +14,7 @@ class H5Platform extends BasePlatform {
|
|||
if (erudaInstance != null && erudaInstance != "") {
|
||||
this.startDeb();
|
||||
}
|
||||
|
||||
// eruda.init();
|
||||
}
|
||||
getPayData(url, data) {
|
||||
|
|
@ -144,7 +145,6 @@ class H5Platform extends BasePlatform {
|
|||
if (query['version'] != null) {
|
||||
uni.setStorageSync('version', query['version']);
|
||||
}
|
||||
// if(){}
|
||||
if (query['method'] != null && query['method'] == "alipay.trade.wap.pay.return" && query[
|
||||
'out_trade_no'] != null) {
|
||||
//支付宝跳转过来的
|
||||
|
|
@ -169,6 +169,12 @@ class H5Platform extends BasePlatform {
|
|||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
|
||||
if (window.location.pathname == "/" || window.location.pathname == "/pages/index/index") {
|
||||
uni.switchTab({
|
||||
url: '/pages/shouye/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
getOrderNo(event) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ class MiniProgramPlatform extends BasePlatform {
|
|||
super();
|
||||
this.code = 'MP-WEIXIN';
|
||||
this.env = 'miniProgram';
|
||||
|
||||
|
||||
}
|
||||
|
||||
getPayData(url, data) {
|
||||
|
|
@ -212,6 +212,11 @@ class MiniProgramPlatform extends BasePlatform {
|
|||
updateManager.onUpdateFailed(function (res) {
|
||||
// 新的版本下载失败
|
||||
});
|
||||
if (options != null && options.path == "pages/index/index") {
|
||||
uni.switchTab({
|
||||
url: '/pages/shouye/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
async getOrderNo(event) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ class WebAppPlatform extends H5Platform {
|
|||
// alert(`请手动分享：${url}`);
|
||||
}
|
||||
|
||||
|
||||
downloadFile(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
|
|
|
|||
106
components/detail-lucky/detail-bao-xiang.vue
Normal file
106
components/detail-lucky/detail-bao-xiang.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="content-container" :class="{ 'fade-out': isFadingOut }" v-if="isVisible && isInitialized">
|
||||
<img id="animatedWebp" style="width:90%; height:50%" :src="webpUrl" alt="超神特效" />
|
||||
<view
|
||||
style="color: rgb(197 168 168);font-size: 19rpx;text-align: center;position: fixed;bottom: 10%;width: 99.5vw;">
|
||||
动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false, // 控制组件显示/隐藏
|
||||
isInitialized: false, // 控制是否已初始化
|
||||
webpUrl: "https://image.zfunbox.cn/static/image/lucky/baoxiang.webp",
|
||||
isFadingOut: false, // 控制淡出动画
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// 初始化老虎机组件
|
||||
init() {
|
||||
this.isInitialized = true;
|
||||
this.webpUrl = "";
|
||||
},
|
||||
playWebP() {
|
||||
const webpImg = document.getElementById("animatedWebp");
|
||||
// 重新加载图片实现从头播放
|
||||
webpImg.src = ""; // 先清空
|
||||
webpImg.src = "https://image.zfunbox.cn/static/image/lucky/baoxiang.webp"; // 重新设置相同的URL
|
||||
webpImg.style.animationPlayState = "running";
|
||||
if (this.bgmCtx && this.bgmCtx.csBgm) {
|
||||
this.bgmCtx.csBgm.seek(0);
|
||||
this.bgmCtx.csBgm.play();
|
||||
}
|
||||
},
|
||||
|
||||
pauseWebP() {
|
||||
const webpImg = document.getElementById("animatedWebp");
|
||||
webpImg.style.animationPlayState = "paused";
|
||||
},
|
||||
// 显示老虎机组件
|
||||
show() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
this.isVisible = true;
|
||||
this.isFadingOut = false; // 重置淡出状态
|
||||
this.webpUrl =
|
||||
"https://image.zfunbox.cn/static/image/lucky/baoxiang.webp?v=" + new Date().getTime();
|
||||
this.audioManager.playBaoXiangBgm();
|
||||
// 设置动画结束后的淡出效果
|
||||
setTimeout(() => {
|
||||
// 开始淡出动画
|
||||
this.isFadingOut = true;
|
||||
// 等待淡出动画完成后再隐藏组件
|
||||
setTimeout(() => {
|
||||
this.audioManager.stop();
|
||||
this.isVisible = false;
|
||||
this.$emit("end");
|
||||
}, 400); // 淡出动画持续800ms
|
||||
|
||||
}, 3500); // 4秒后开始淡出（总时间仍维持在4.2秒左右）
|
||||
|
||||
return this;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 不再自动初始化
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 内容容器样式
|
||||
.content-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
//background-image: url('https://image.zfunbox.cn/static/image/lucky/grand.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
opacity: 1;
|
||||
transition: opacity 0.8s ease;
|
||||
}
|
||||
|
||||
// 淡出动画样式
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -55,25 +55,14 @@ export default {
|
|||
this.isFadingOut = false; // 重置淡出状态
|
||||
this.webpUrl =
|
||||
"https://image.zfunbox.cn/static/image/lucky/grand.webp?v=" + new Date().getTime();
|
||||
|
||||
if (this.bgmCtx && this.bgmCtx.csBgm) {
|
||||
console.log('播放超神音乐');
|
||||
this.bgmCtx.slotBgm.stop();
|
||||
this.bgmCtx.csBgm.stop();
|
||||
this.bgmCtx.csBgm.seek(0);
|
||||
this.bgmCtx.csBgm.play();
|
||||
}
|
||||
|
||||
this.audioManager.playCsBgm();
|
||||
// 设置动画结束后的淡出效果
|
||||
setTimeout(() => {
|
||||
// 开始淡出动画
|
||||
this.isFadingOut = true;
|
||||
|
||||
// 等待淡出动画完成后再隐藏组件
|
||||
setTimeout(() => {
|
||||
if (this.bgmCtx && this.bgmCtx.csBgm) {
|
||||
this.bgmCtx.csBgm.pause();
|
||||
}
|
||||
this.audioManager.stop();
|
||||
this.isVisible = false;
|
||||
this.$emit("end");
|
||||
}, 400); // 淡出动画持续800ms
|
||||
|
|
|
|||
|
|
@ -7,24 +7,22 @@
|
|||
</view>
|
||||
<view class="slot-view" :class="'slot-view-' + currentMode">
|
||||
<!-- 抽奖特效组件 -->
|
||||
<SlotMachine ref="myLucky" :width="windowWidth" :height="slotHeight" :blocks="blocks" :slots="slots"
|
||||
:prizes="prizes" :defaultConfig="defaultConfig" @start="startCallBack" @end="endCallBack">
|
||||
<SlotMachine ref="myLucky" v-if="internalMode != 0" :width="windowWidth" :height="slotHeight"
|
||||
:blocks="blocks" :slots="slots" :prizes="prizes" :defaultConfig="defaultConfig"
|
||||
@start="startCallBack" @end="endCallBack">
|
||||
</SlotMachine>
|
||||
</view>
|
||||
<view style="color: #484848;font-size: 19rpx;text-align: center;padding-top: 20rpx;">
|
||||
动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
|
||||
<view class="skip-animation" @click="skipAnimation" :style="[skipButtonStyle()]">跳过动画</view>
|
||||
</view>
|
||||
<!-- <DetailGrandPrize ref="detailGrandPrize" @end="onLuckyEnd1" /> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入抽奖特效组件
|
||||
import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
|
||||
//超神特效
|
||||
import DetailGrandPrize from "@/components/detail-lucky/detail-grand-prize.vue";
|
||||
|
||||
import { sleep } from '@/common/util'
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
|
|
@ -38,8 +36,7 @@ function shuffle(array) {
|
|||
|
||||
export default {
|
||||
components: {
|
||||
SlotMachine,
|
||||
DetailGrandPrize
|
||||
SlotMachine
|
||||
},
|
||||
props: {
|
||||
// 抽奖特效模式: 1, 3, 5, 10 (分别代表1列、3列、5列、10列分两批)
|
||||
|
|
@ -52,10 +49,12 @@ export default {
|
|||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
return {
|
||||
isVisible: false, // 控制组件显示/隐藏
|
||||
isInitialized: false, // 控制是否已初始化
|
||||
windowWidth: "0px",
|
||||
windowWidth: windowWidth + "px",
|
||||
blocks: [],
|
||||
slots: [],
|
||||
prizes: [],
|
||||
|
|
@ -69,7 +68,7 @@ export default {
|
|||
luckyMessage: "恭喜您获得奖品",
|
||||
luckyPrize: null,
|
||||
currentPrizeIndex: -1,
|
||||
internalMode: 1, // 内部存储模式的状态
|
||||
internalMode: 0, // 内部存储模式的状态
|
||||
skipButtonOpacity: 0, // 跳过按钮的透明度
|
||||
isSkip: false,
|
||||
isBatchMode: false, // 是否为批次模式
|
||||
|
|
@ -199,7 +198,7 @@ export default {
|
|||
});
|
||||
}
|
||||
|
||||
this.windowWidth = windowWidth + "px";
|
||||
// this.windowWidth = windowWidth + "px";
|
||||
this.slots = slots;
|
||||
this.prizes = prizes;
|
||||
// 标记为已初始化
|
||||
|
|
@ -453,8 +452,6 @@ export default {
|
|||
this.$emit("luckyStop", "");
|
||||
|
||||
if (this.chaoShenIndex != -1) {
|
||||
// this.$refs.detailGrandPrize.init();
|
||||
// this.$refs.detailGrandPrize.show();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<detailLucky ref="_detailLucky" @end="onLuckyEnd" @luckyPlay="startCallBack" @luckyStop="endCallBack">
|
||||
</detailLucky>
|
||||
<detailGrandPrize ref="_detailGrandPrize" @end="onLuckyEnd1" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,6 +17,7 @@ import detailLucky from "./detail-lucky-canvas.vue";
|
|||
import detailLucky from "./detail-lucky-web.vue";
|
||||
//#endif
|
||||
import detailGrandPrize from "@/components/detail-lucky/detail-grand-prize.vue";
|
||||
|
||||
import { sleep } from '@/common/util'
|
||||
|
||||
export default {
|
||||
|
|
@ -42,22 +44,15 @@ export default {
|
|||
this.$refs._detailGrandPrize.show();
|
||||
return;
|
||||
}
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.stop();
|
||||
this.bgmCtx.csBgm.stop();
|
||||
}
|
||||
this.$emit("end", []);
|
||||
this.audioManager.stop();
|
||||
this.$emit("end", isSkip);
|
||||
},
|
||||
onLuckyEnd1() {
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.stop();
|
||||
this.bgmCtx.csBgm.stop();
|
||||
}
|
||||
this.$emit("end", []);
|
||||
this.audioManager.stop();
|
||||
this.$emit("end", false);
|
||||
},
|
||||
// 初始化抽奖特效组件
|
||||
init(prizeList, mode) {
|
||||
|
||||
this.prizeList = prizeList;
|
||||
this.mode = mode;
|
||||
//#ifdef H5 || MP
|
||||
|
|
@ -83,19 +78,13 @@ export default {
|
|||
// 抽奖特效开始回调
|
||||
startCallBack() {
|
||||
console.log('开始回调');
|
||||
|
||||
// 播放抽奖音乐
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.seek(0);
|
||||
console.log('开始回调，播放音乐');
|
||||
this.bgmCtx.slotBgm.play();
|
||||
}
|
||||
this.audioManager.playSlotBgm();
|
||||
|
||||
},
|
||||
|
||||
// 抽奖结束回调
|
||||
endCallBack(prize) {
|
||||
this.bgmCtx.slotBgm.stop();
|
||||
this.audioManager.stop();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
341
components/detail-results/detail-results.vue
Normal file
341
components/detail-results/detail-results.vue
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
<template>
|
||||
<view>
|
||||
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||||
<view class="res-pop common_bg column center" @click="close">
|
||||
<view class="res-pop-hd"></view>
|
||||
<scroll-view class="res-pop-bd" scroll-y>
|
||||
<view class="res-list">
|
||||
<view class="res-item" v-for="(item, i) in prizeList" :key="i" @click.stop="onPrizeClick(item)">
|
||||
<view class="pic center">
|
||||
<image :src="item.goodslist_imgurl" lazy-load></image>
|
||||
<view class="type-tag center"
|
||||
:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
<view class="num center">{{ item.prize_num || '1' }}</view>
|
||||
<view v-if="item.doubling > 1" class="yu-tag-text ziti log-multiple-tag" style="">
|
||||
x{{ item.doubling }}</view>
|
||||
<view v-if="item.is_lingzhu > 0" class="yu-tag-text ziti log-lingzhu-tag" style="">
|
||||
</view>
|
||||
<view v-if="item.goodslist_type == 4||item.parent_goods_list_id != 0" class="yu-tag-text ziti baoxiang-tag" style="">
|
||||
</view>
|
||||
</view>
|
||||
<view class="title hang1" style="text-align: center;">
|
||||
<text> {{ item.goodslist_title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="res-pop-ft">
|
||||
<view class="btn-list">
|
||||
<view class="ft-btn common_bg justify-center center" :style="{
|
||||
backgroundImage: `url(${$img1('common/quhegui.png')})`
|
||||
}" @click="toBag">
|
||||
<text>去发货</text>
|
||||
</view>
|
||||
|
||||
<view class="ft-btn common_bg justify-center center" :style="{
|
||||
backgroundImage: `url(${$img1('common/jixuchou.png')})`
|
||||
}" @click="continueDraw">
|
||||
<text>继续抽</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<DetailBaoXiang ref="baoXiangPop" @end="onBaoXiangEnd"></DetailBaoXiang>
|
||||
<uni-popup ref="resPop1" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||||
<view class="res-pop common_bg column center" @click="close1">
|
||||
<view class="res-pop-hd"></view>
|
||||
<scroll-view class="res-pop-bd" scroll-y>
|
||||
<view class="res-list">
|
||||
<view class="res-item" v-for="(item, i) in baoXiangList" :key="i">
|
||||
<view class="pic center">
|
||||
<image :src="item.goodslist_imgurl" lazy-load></image>
|
||||
<view class="type-tag center"
|
||||
:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
<view class="num center">{{ item.prize_num || '1' }}</view>
|
||||
<view v-if="item.doubling > 1" class="yu-tag-text ziti log-multiple-tag" style="">
|
||||
x{{ item.doubling }}</view>
|
||||
<view v-if="item.is_lingzhu > 0" class="yu-tag-text ziti log-lingzhu-tag" style="">
|
||||
</view>
|
||||
<view v-if="item.goodslist_type == 4" class="yu-tag-text ziti baoxiang-tag" style="">
|
||||
</view>
|
||||
</view>
|
||||
<view class="title hang1" style="text-align: center;">
|
||||
<text> {{ item.goodslist_title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DetailBaoXiang from '@/components/detail-lucky/detail-bao-xiang.vue'
|
||||
import { sleep } from '../../common/util'
|
||||
export default {
|
||||
name: 'DetailResults',
|
||||
components: {
|
||||
DetailBaoXiang
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prizeData: [],
|
||||
isSkip: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
prizeList() {
|
||||
if (this.isSkip) {
|
||||
let t = this.prizeData.filter(item => item.goodslist_type != 4);
|
||||
return t;
|
||||
}
|
||||
return this.prizeData.filter(item => item.parent_goods_list_id == 0)
|
||||
},
|
||||
baoXiangList() {
|
||||
return this.prizeData.filter(item => item.parent_goods_list_id != 0)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onBaoXiangEnd() {
|
||||
console.log('宝箱特效结束');
|
||||
this.$refs.resPop1.open();
|
||||
},
|
||||
async open(data, is_skip = false) {
|
||||
this.prizeData = data;
|
||||
this.isSkip = is_skip;
|
||||
this.audioManager.playOpenBgm();
|
||||
this.$refs.resPop.open();
|
||||
if (this.baoXiangList.length > 0 && !this.isSkip) {
|
||||
await sleep(800);
|
||||
console.log('展示宝箱特效');
|
||||
this.$refs.baoXiangPop.init();
|
||||
this.$refs.baoXiangPop.show();
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$refs.resPop.close()
|
||||
this.$emit('close')
|
||||
},
|
||||
close1() {
|
||||
this.$refs.resPop1.close()
|
||||
},
|
||||
onPrizeClick(item) {
|
||||
if (item.goodslist_type == 4) {
|
||||
this.$refs.resPop1.open();
|
||||
}
|
||||
},
|
||||
toBag() {
|
||||
this.$emit('to-bag')
|
||||
},
|
||||
continueDraw() {
|
||||
this.$emit('continue-draw')
|
||||
},
|
||||
// 设置背景颜色
|
||||
getBgColor(text) {
|
||||
switch (text) {
|
||||
case "普通":
|
||||
return "#DAFF27";
|
||||
case "黄金":
|
||||
return "#9A8EF6";
|
||||
case "欧皇":
|
||||
return "#FFEB8E";
|
||||
case "超神":
|
||||
return "#FF8E8E";
|
||||
default:
|
||||
return "#DAFF27";
|
||||
}
|
||||
},
|
||||
// 设置文字颜色
|
||||
getTextColor(text) {
|
||||
switch (text) {
|
||||
case "普通":
|
||||
return "#86AD46";
|
||||
case "黄金":
|
||||
return "#FFFFFF";
|
||||
case "欧皇":
|
||||
return "#DA8A50";
|
||||
case "超神":
|
||||
return "#FFEFB4";
|
||||
default:
|
||||
return "#86AD46";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.res-pop {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
|
||||
|
||||
.res-pop-hd {
|
||||
width: 380rpx;
|
||||
height: 104rpx;
|
||||
background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.res-pop-bd {
|
||||
width: 636rpx;
|
||||
height: 760rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
margin: 36rpx auto;
|
||||
|
||||
.res-list {
|
||||
padding: 20rpx 10rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 210rpx);
|
||||
gap: 24rpx 10rpx;
|
||||
|
||||
.res-item {
|
||||
width: 180rpx;
|
||||
height: 240rpx;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.pic {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
background: #D8D8D8;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
|
||||
>image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
position: absolute;
|
||||
left: 12rpx;
|
||||
top: 12rpx;
|
||||
z-index: 2;
|
||||
width: 68rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 18rpx;
|
||||
font-weight: 400;
|
||||
font-size: 14rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
min-width: 42rpx;
|
||||
height: 28rpx;
|
||||
font-weight: 400;
|
||||
font-size: 14rpx;
|
||||
color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 90%;
|
||||
padding: 0rpx 10rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.res-pop-ft {
|
||||
padding-top: 40rpx;
|
||||
|
||||
.btn-list {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.ft-btn {
|
||||
width: 200rpx;
|
||||
height: 68rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yu-tag-text {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
bottom: 10rpx;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.log-multiple-tag {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
background: url($iconurl + "fanbei.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #000;
|
||||
width: 68rpx;
|
||||
height: 32rpx;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.log-lingzhu-tag {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
background: url($iconurl + "lingzhu.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #000;
|
||||
width: 68rpx;
|
||||
height: 32rpx;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.baoxiang-tag {
|
||||
position: absolute;
|
||||
right: 15rpx;
|
||||
top: 15rpx;
|
||||
z-index: 5;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
border-radius: 30rpx;
|
||||
background-image: url($iconurl + "baoxiang.png");
|
||||
background-size: 100% 100%;
|
||||
height: 32rpx;
|
||||
width: 68rpx;
|
||||
}
|
||||
</style>
|
||||
18
pages.json
18
pages.json
|
|
@ -116,14 +116,6 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/bi_jl",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "星钻记录",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/jf_jl",
|
||||
"style": {
|
||||
|
|
@ -132,16 +124,6 @@
|
|||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/sy_jl",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#222222",
|
||||
"navigationBarTitleText": "奖励明细",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/user/vip",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -187,7 +187,6 @@
|
|||
<view class="send-pop relative">
|
||||
<view class="send-pop-hd">
|
||||
发货确认单
|
||||
|
||||
<view class="close icon" @click="close('sendPop')">
|
||||
<image :src="$img('/static/img/close2.png')" lazy-load></image>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -69,7 +69,8 @@
|
|||
|
||||
</view>
|
||||
<view class="br20 mt20" style="background: #FFFFFF;">
|
||||
<view class="pay-type" @click="changePay(0)">
|
||||
<view class="pay-type" @click="changePay(0)"
|
||||
v-if="orderData != null && orderData.goodsExtend.pay_wechat == 1">
|
||||
<view class="" style="width: 100%; color: #333333;">
|
||||
微信支付
|
||||
</view>
|
||||
|
|
@ -79,7 +80,8 @@
|
|||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay-type" @click="changePay(1)">
|
||||
<view class="pay-type" @click="changePay(1)"
|
||||
v-if="orderData != null && orderData.goodsExtend.pay_currency2 == 1">
|
||||
|
||||
<view class="" style="width: 100%; color: #333333;">
|
||||
{{ $config.getAppSetting('currency2_name') }}
|
||||
|
|
@ -134,10 +136,6 @@
|
|||
<PayDialog ref="payDialog" />
|
||||
</view>
|
||||
</page-container>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -268,6 +266,11 @@ export default {
|
|||
|
||||
that.orderData = res.data
|
||||
that.zhifu = 0;
|
||||
if (that.orderData.goodsExtend.pay_wechat == 1) {
|
||||
that.zhifu = 0;
|
||||
} else if (that.orderData.goodsExtend.pay_currency2 == 1) {
|
||||
that.zhifu = 1;
|
||||
}
|
||||
that.$refs.pop.open()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,40 +123,10 @@
|
|||
|
||||
<buy-notice ref="buyNotice"
|
||||
@confirm="$c.noDouble(confirmSubmit, [1, buyNum, true], choujiangloading)"></buy-notice>
|
||||
<!--中奖动画-->
|
||||
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||||
<view v-if="prizeData" class="res-pop common_bg column center">
|
||||
<view class="res-pop-hd"></view>
|
||||
<scroll-view class="res-pop-bd" scroll-y>
|
||||
<view class="res-list">
|
||||
<view class="res-item" v-for="(item, i) in prizeData.data" :key="i">
|
||||
<view class="pic center">
|
||||
<image :src="item.goodslist_imgurl" lazy-load></image>
|
||||
<view class="type-tag center">{{ item.shang_title }}</view>
|
||||
<view class="num center">{{ item.prize_num }}</view>
|
||||
</view>
|
||||
<view class="title hang1 flex center">
|
||||
<text> {{ item.goodslist_title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="res-pop-ft mt20">
|
||||
<view class="ft-btn common_bg justify-center center" :style="{
|
||||
backgroundImage: `url(${$img1('common/quhegui.png')})`,
|
||||
}" @click="toBag">
|
||||
<text>去发货</text>
|
||||
</view>
|
||||
|
||||
<view class="ft-btn common_bg justify-center center" :style="{
|
||||
backgroundImage: `url(${$img1('common/jixuchou.png')})`,
|
||||
}" @click="close('resPop')">
|
||||
<text>继续抽</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 抽奖结果 -->
|
||||
<detail-results ref="resPop" @to-bag="toBag" >
|
||||
</detail-results>
|
||||
|
||||
|
||||
<view v-if="aniShow" class="ani-pop">
|
||||
<image :src="aniSrc" lazy-load></image>
|
||||
|
|
@ -167,7 +137,7 @@
|
|||
<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
|
||||
<!-- 使用抽取的老虎机组件 -->
|
||||
<DetailLucky ref="detailLucky" @end="onLuckyEnd" />
|
||||
<DetailGrandPrize ref="detailGrandPrize" @end="onLuckyEnd" />
|
||||
|
||||
<PayDialog ref="payDialog" />
|
||||
</view>
|
||||
</page-container>
|
||||
|
|
@ -183,8 +153,8 @@ import DetailPreviewPopup from '@/components/detail-preview-popup/detail-preview
|
|||
import preview from '@/components/detail-preview-popup/index.js'
|
||||
// 导入抽取的抽奖组件
|
||||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||||
//超神特效
|
||||
import DetailGrandPrize from "@/components/detail-lucky/detail-grand-prize.vue";
|
||||
|
||||
import DetailResults from '@/components/detail-results/detail-results.vue'
|
||||
import { sleep } from '../../common/util'
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -194,7 +164,7 @@ export default {
|
|||
DetailButton,
|
||||
DetailPreviewPopup,
|
||||
DetailLucky,
|
||||
DetailGrandPrize
|
||||
DetailResults
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -341,14 +311,9 @@ export default {
|
|||
uni.setStorageSync('effectSwitch', value ? 1 : 0);
|
||||
},
|
||||
// 老虎机结束抽奖回调
|
||||
onLuckyEnd(data) {
|
||||
console.log("抽奖结束", data);
|
||||
this.$refs.resPop.open();
|
||||
// 获取所有中奖奖品
|
||||
this.bgmCtx.openBgm.stop();
|
||||
this.bgmCtx.openBgm.seek(0);
|
||||
this.bgmCtx.openBgm.play();
|
||||
|
||||
onLuckyEnd(isSkip) {
|
||||
console.log("抽奖结束", isSkip);
|
||||
this.$refs.resPop.open(this.prizeData.data, isSkip);
|
||||
},
|
||||
previewDetail(item) {
|
||||
console.log(item);
|
||||
|
|
@ -443,12 +408,7 @@ export default {
|
|||
this.isPrizeLoading = false;
|
||||
uni.hideLoading();
|
||||
if (!this.effectSwitch) {
|
||||
this.onLuckyEnd([]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.prizeData.data.length > 10) {
|
||||
this.onLuckyEnd([]);
|
||||
this.onLuckyEnd(true);
|
||||
return;
|
||||
}
|
||||
await sleep(200);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -120,13 +120,9 @@
|
|||
<image class="img100" :src="$img1('common/close.png')"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
<!-- <tab-bar :index="0"></tab-bar> -->
|
||||
<rule-pop ref="rulePop"></rule-pop>
|
||||
|
||||
<rule-pop ref="appNotice" notice-check></rule-pop>
|
||||
|
||||
<float-ball v-if="!$config.GetVersion()"></float-ball>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
|
|
|
|||
|
|
@ -1,475 +0,0 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="欧气券"
|
||||
color="#fff"
|
||||
backgroundColor="transparent"
|
||||
:fixed="true"
|
||||
:statusBar="true"
|
||||
:border="false"
|
||||
@clickLeft="back"
|
||||
></uni-nav-bar>
|
||||
|
||||
<view class="tab-list">
|
||||
<view
|
||||
@click="getlist(i + 1)"
|
||||
v-for="(item, i) in arr"
|
||||
:key="i"
|
||||
class="tab-list-item"
|
||||
:class="{
|
||||
active: show == i + 1
|
||||
}"
|
||||
>
|
||||
{{ item }}
|
||||
|
||||
<view v-if="show == i + 1" class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="header">
|
||||
<view class="qiehuan">
|
||||
<view @click="getlist(i + 1)" v-for="(v, i) in arr" :key="i">
|
||||
<view :class="show == i + 1 ? 'xzs' : 'wzs'">{{ v }}</view>
|
||||
<view class="qiehuan_line" v-if="show == i + 1">
|
||||
<image src="../../static/shouye/top.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 内容 -->
|
||||
<mescroll-body
|
||||
ref="mescrollRef"
|
||||
@init="mescrollInit"
|
||||
:down="downOption"
|
||||
@down="downCallback"
|
||||
@up="upCallback"
|
||||
>
|
||||
<view
|
||||
class="coupon common_bg"
|
||||
v-for="(item, index) in aixuanArr"
|
||||
:key="index"
|
||||
:style="{
|
||||
backgroundImage: `url(${$img('/static/img/coupon_bg.png')})`
|
||||
}"
|
||||
>
|
||||
<view class="coupon_item">
|
||||
<view class="coupon_item_1">
|
||||
<view class="coupon-title">
|
||||
<text>{{ item.title }}级</text>
|
||||
欧气券
|
||||
</view>
|
||||
<view>
|
||||
可随机开出
|
||||
<text>{{ item.min }}-{{ item.max }}</text>
|
||||
友达币
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="show == 1"
|
||||
class="coupon_r common_bg"
|
||||
:style="{
|
||||
'background-image': `url(${$img('/static/img/coupon_ljfx.png')})`
|
||||
}"
|
||||
>
|
||||
<button
|
||||
open-type="share"
|
||||
:data-id="item.id"
|
||||
:data-img="item.share_imgurl"
|
||||
style="width: 100%; height: 100%"
|
||||
>
|
||||
<!-- 立即分享 -->
|
||||
</button>
|
||||
</view>
|
||||
<view
|
||||
class="coupon_r common_bg"
|
||||
v-else
|
||||
@click="kaiquan(item.id)"
|
||||
:style="{
|
||||
'background-image': `url(${$img('/static/img/coupon_ljkq.png')})`
|
||||
}"
|
||||
>
|
||||
<!-- 立即开启 -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
|
||||
<!-- 奖品弹窗 -->
|
||||
<uni-popup ref="pop_show" type="center">
|
||||
<view
|
||||
class="pop_jp common_bg"
|
||||
:style="{
|
||||
'background-image': `url(${$img(
|
||||
'/static/img/coupon_prize_pop_bg.png'
|
||||
)})`
|
||||
}"
|
||||
>
|
||||
<view class="get-num">恭喜您获得{{ num }}个潮币</view>
|
||||
|
||||
<image :src="$img('/static/img/coupon_coin.png')"></image>
|
||||
|
||||
<!-- <view>
|
||||
<text>恭喜获得{{ num }}个潮币</text>
|
||||
</view> -->
|
||||
<view
|
||||
class="pop_btn common_bg"
|
||||
@click="$refs.pop_show.close()"
|
||||
:style="{
|
||||
'background-image': `url(${$img('/static/img/coupon_kxsx.png')})`
|
||||
}"
|
||||
>
|
||||
<!-- 知道了 -->
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
z_imgPath: this.$z_img2,
|
||||
arr: ['我的券', '参与中'],
|
||||
show: 1,
|
||||
|
||||
downOption: {
|
||||
auto: false
|
||||
},
|
||||
aixuanArr: [],
|
||||
|
||||
// 开券获得币的数量
|
||||
num: ''
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e && e.show == 2) {
|
||||
this.show = 2
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
// this.$refs.pop_show.open()
|
||||
},
|
||||
|
||||
onShareAppMessage(e) {
|
||||
console.log(e)
|
||||
return {
|
||||
title: '点击领取欧气券吧~',
|
||||
imageUrl: e.target.dataset.img,
|
||||
path:
|
||||
'/pages/user/index?coupon_id=' +
|
||||
e.target.dataset.id +
|
||||
'&pid=' +
|
||||
uni.getStorageSync('userinfo').ID
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
let page = getCurrentPages()
|
||||
|
||||
if (page.length > 1) {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
} else {
|
||||
uni.switchTab({ url: '/pages/user/index' })
|
||||
}
|
||||
},
|
||||
|
||||
kaiquan(e) {
|
||||
let that = this
|
||||
that.req({
|
||||
url: 'coupon_open',
|
||||
data: {
|
||||
coupon_id: e
|
||||
},
|
||||
success(res) {
|
||||
if (res.status == 1) {
|
||||
that.num = res.data
|
||||
that.$refs.pop_show.open()
|
||||
that.loadData(1)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 1500,
|
||||
success() {
|
||||
setTimeout(() => {
|
||||
that.loadData(1)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getlist(v) {
|
||||
this.show = v
|
||||
this.aixuanArr = []
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
downCallback() {
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
upCallback(page) {
|
||||
this.loadData(page.num)
|
||||
},
|
||||
loadData(pageNo) {
|
||||
let that = this
|
||||
that.req({
|
||||
url: 'coupon_list',
|
||||
Loading: true,
|
||||
data: {
|
||||
page: pageNo,
|
||||
type: that.show
|
||||
},
|
||||
success(res) {
|
||||
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
||||
if (pageNo == 1) {
|
||||
that.aixuanArr = res.data.data
|
||||
} else {
|
||||
that.aixuanArr = that.aixuanArr.concat(res.data.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mengban {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
line-height: inherit;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sixiao {
|
||||
position: absolute;
|
||||
width: 92rpx;
|
||||
height: 69rpx;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
.sy_btn {
|
||||
background: #96fffe !important;
|
||||
}
|
||||
|
||||
.coupon_r {
|
||||
height: 60rpx;
|
||||
width: 143rpx;
|
||||
// height: 74rpx;
|
||||
// margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
button {
|
||||
padding: 0 36rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: ZhenyanGB-Regular, ZhenyanGB;
|
||||
font-weight: 400;
|
||||
color: #290066;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon_item_1 {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
// padding-top: 88rpx;
|
||||
box-sizing: border-box;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 44rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: transparent;
|
||||
|
||||
background: linear-gradient(0deg, #85dfff 0%, #ba39ff 100%);
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon_item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* width: 690rpx;
|
||||
height: 146rpx; */
|
||||
/* background: url(../../static/mine/A_bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
// margin-top: 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 700rpx;
|
||||
height: 156rpx;
|
||||
margin: 0rpx auto 24rpx;
|
||||
/* background: #11141D; */
|
||||
/* box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.qiehuan {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
|
||||
.qiehuan_line {
|
||||
margin: -10rpx auto;
|
||||
width: 40rpx;
|
||||
height: 20rpx;
|
||||
border-bottom: 4rpx solid #1ac762;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.qiehuan_line > image {
|
||||
width: 30rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.qiehuan > view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wzs {
|
||||
font-size: 34rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.xzs {
|
||||
font-size: 34rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 750rpx;
|
||||
/* height: 176rpx; */
|
||||
padding-bottom: 30rpx;
|
||||
/* background: #222222; */
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
/* #ifdef MP */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
/* #ifndef MP */
|
||||
top: 88rpx;
|
||||
/* #endif */
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
// padding-top: 88rpx;
|
||||
box-sizing: border-box;
|
||||
background-attachment: fixed;
|
||||
background-size: 100vw 100vh;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
|
||||
.tab-list-item {
|
||||
margin-right: 40rpx;
|
||||
position: relative;
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -10rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 32rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: transparent;
|
||||
background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pop_jp {
|
||||
width: 534rpx;
|
||||
height: 696rpx;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
|
||||
.get-num {
|
||||
padding-top: 160rpx;
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 324rpx;
|
||||
height: 324rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.pop_btn {
|
||||
margin-top: 20rpx;
|
||||
width: 256rpx;
|
||||
height: 84rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
<template>
|
||||
<view class="content pd20">
|
||||
<!-- 内容 -->
|
||||
<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
|
||||
<uni-nav-bar left-icon="left" title="奖励明细" color="#fff" backgroundColor="transparent" :fixed="true"
|
||||
:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>
|
||||
<view class="coupon">
|
||||
<view v-for="(item, index) in aixuanArr" :key="index" class="coupon_item">
|
||||
<view class="coupon_item_1">
|
||||
<view>{{ item.content }}</view>
|
||||
<view>{{ item.addtime }}</view>
|
||||
</view>
|
||||
<view class="coupon_r flex_center">
|
||||
<text>{{ item.change_money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
arr: ['全部', '收入', '花费'],
|
||||
show: 1,
|
||||
aixuanArr: [],
|
||||
downOption: {
|
||||
auto: false
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
// setTimeout(() => {
|
||||
// this.aixuanArr = [
|
||||
// {
|
||||
// content: '邀请获得',
|
||||
// nickname:
|
||||
// '名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字',
|
||||
// addtime: '2333-23-23 23:23:23',
|
||||
// change_money: 233.33
|
||||
// },
|
||||
// {
|
||||
// content: '邀请获得',
|
||||
// nickname:
|
||||
// '名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字',
|
||||
// addtime: '2333-23-23 23:23:23',
|
||||
// change_money: 233.33
|
||||
// }
|
||||
// ]
|
||||
// }, 1000)
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
getlist(v) {
|
||||
this.show = v
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
downCallback() {
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
upCallback(page) {
|
||||
this.loadData(page.num)
|
||||
},
|
||||
loadData(pageNo) {
|
||||
// 模拟接口
|
||||
let that = this
|
||||
that.req({
|
||||
url: 'invitation_commission',
|
||||
Loading: true,
|
||||
data: {
|
||||
page: pageNo
|
||||
},
|
||||
success(res) {
|
||||
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
||||
if (pageNo == 1) {
|
||||
that.aixuanArr = res.data.data
|
||||
} else {
|
||||
that.aixuanArr = that.aixuanArr.concat(res.data.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.coupon_r>image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.coupon_r {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.coupon_item_1>view:nth-of-type(2) {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.coupon_item_1>view:nth-of-type(1) {
|
||||
font-size: 28rpx;
|
||||
// font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.coupon_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
width: 690rpx;
|
||||
margin: 20rpx auto;
|
||||
/* background: #11141D;
|
||||
box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7);
|
||||
padding: 0 30rpx; */
|
||||
box-sizing: border-box;
|
||||
/* border-radius: 20rpx; */
|
||||
}
|
||||
|
||||
.qiehuan {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
width: 300rpx;
|
||||
}
|
||||
|
||||
.qiehuan_line {
|
||||
margin: auto;
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #f96026;
|
||||
}
|
||||
|
||||
.qiehuan>view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wzs {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.xzs {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.close {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.close>image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.head>view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 750rpx;
|
||||
height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* font-family: 'zcq'; */
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
text-shadow: 0px 0px 10rpx rgba(150, 255, 254, 0.6);
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 750rpx;
|
||||
/* height: 176rpx; */
|
||||
padding-bottom: 30rpx;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
/* #ifdef MP */
|
||||
padding-top: 24rpx;
|
||||
/* #endif */
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 1rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,539 +0,0 @@
|
|||
<template>
|
||||
<view class="page-wrap">
|
||||
|
||||
<view class="top-bg">
|
||||
<image :src="z_imgPath + 'tuiguang-bg.png'" />
|
||||
</view>
|
||||
<view class="gzbox" @click="$refs.shuoming.open()">
|
||||
<image :src="z_imgPath+'yqgz.png'"></image>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="shuoming" type="center">
|
||||
<view class="pop" :style="'background: url('+ z_imgPath + 'gz_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
|
||||
<view class="pop_con">
|
||||
<scroll-view scroll-y="true" style="height: 440rpx;">
|
||||
<view v-html="news"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<view class="card">
|
||||
<view class="people-money">
|
||||
<view class="people">
|
||||
<image :src="z_imgPath+'yyq.png'" style="height:27rpx;width: 109rpx;"></image>
|
||||
<view class="num"> {{ total }} <text>人</text> </view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="moneys">
|
||||
<view class="content" @click="gotoPage('/pages/user/sy_jl')">
|
||||
<image :src="z_imgPath+'jl.png'" style="height:27rpx;width: 145rpx;"></image>
|
||||
<view class="money"> {{ commission }} <text>元</text> </view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<image :src="z_imgPath+'point_right.png'" mode="scaleToFill" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button open-type="share" class="invite-btn">
|
||||
<image :src="z_imgPath+'invite-btn.png'" />
|
||||
<!-- 去邀请好友 -->
|
||||
</button>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="card two">
|
||||
|
||||
<image :src="z_imgPath + 'yqjl.png'" class="title-img" style="height: 33rpx;width: 156rpx;"></image>
|
||||
<view class="list-wrap" :style="{height: upOption.isLock == false ? 'auto' : '510rpx' }">
|
||||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList"
|
||||
:down="downOption" :up="upOption">
|
||||
<view v-for="(item, i) of listData" :key="i" class="list-wrap-item">
|
||||
<view class="content">
|
||||
<view class="avatar">
|
||||
<image :src="item.headimg" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="info-hd">
|
||||
<text style="color: #fff;">{{ item.nickname }}</text>
|
||||
<text class="title">累计消费</text>
|
||||
</view>
|
||||
<view class="info-bd">
|
||||
<text>{{ item.addtime }}</text>
|
||||
<text class="money">¥{{ item.commission_money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invite-name">
|
||||
<!-- 邀请人：
|
||||
<text>{{ item.parent_name }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
<view v-if="upOption.isLock" class="show-more">
|
||||
<view v-if="listData.length > 3" @click="openUpPage" class="btn">
|
||||
<view>查看更多</view>
|
||||
<view class="icon">
|
||||
<image :src=" z_imgPath + 'arrow-right-circle.png' " style="position: relative;bottom: 6rpx;"
|
||||
mode="scaleToFill" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <blank :height="30"></blank> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
z_imgPath: this.$z_img + 'mine/yaoqing/',
|
||||
downOption: {
|
||||
use: false,
|
||||
auto: false
|
||||
},
|
||||
upOption: {
|
||||
isLock: true,
|
||||
auto: true,
|
||||
page: {
|
||||
size: 10 // 每页数据的数量,默认10
|
||||
}
|
||||
},
|
||||
tabList: [{
|
||||
name: '直推',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: '荐推',
|
||||
id: 2
|
||||
}
|
||||
],
|
||||
tabCur: 0,
|
||||
pop_show: false,
|
||||
userInfo: '',
|
||||
listData: '',
|
||||
news: '',
|
||||
total: 0,
|
||||
logo_image: '',
|
||||
commission: 0,
|
||||
pid: ''
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
let that = this;
|
||||
return {
|
||||
title: "友达赏，正版潮玩手办一番赏",
|
||||
imageUrl: that.logo_image,
|
||||
path: "/pages/shouye/index?pid=" + uni.getStorageSync('userinfo').ID
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
console.log(uni.getStorageSync('userinfo').ID)
|
||||
this.getDanye(9)
|
||||
},
|
||||
methods: {
|
||||
getDanye(e) {
|
||||
let that = this;
|
||||
that.req({
|
||||
url: 'danye',
|
||||
data: {
|
||||
type: e
|
||||
},
|
||||
success(res) {
|
||||
if (res.status == 1) {
|
||||
that.news = res.data
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
openUpPage() {
|
||||
this.upOption.isLock = false
|
||||
this.mescroll.lockUpScroll(false)
|
||||
},
|
||||
|
||||
getList({
|
||||
num,
|
||||
size
|
||||
}) {
|
||||
var that = this;
|
||||
this.req({
|
||||
url: 'invitation',
|
||||
data: {
|
||||
page: num,
|
||||
per_page: size,
|
||||
depth: this.tabList[this.tabCur].id
|
||||
},
|
||||
success: res => {
|
||||
that.total = res.data.count
|
||||
that.commission = res.data.money
|
||||
that.logo_image = res.data.share_image
|
||||
if (num == 1) {
|
||||
this.listData = []
|
||||
}
|
||||
this.mescroll.endBySize(res.data.data.length, res.data.last_page)
|
||||
this.listData = [...this.listData, ...res.data.data]
|
||||
},
|
||||
fail: err => {
|
||||
console.log('err', err)
|
||||
// this.mescroll.endErr()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: tab栏切换
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
tabChange(item, i) {
|
||||
this.tabCur = i
|
||||
this.mescroll.resetUpScroll()
|
||||
// this.mescroll.scrollTo(0, 0)
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
line-height: inherit;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
background: #080808;
|
||||
padding-bottom: 100rpx;
|
||||
padding-top: 183rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
::v-deep.uni-navbar__content {
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
|
||||
.top-bg {
|
||||
width: 750rpx;
|
||||
height: 790rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 299rpx auto 0;
|
||||
width: 712rpx;
|
||||
// height: 540rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
// background: #fff;
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.title-img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.people-money {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 60rpx;
|
||||
// padding: 40rpx 0;
|
||||
border-radius: 10rpx;
|
||||
// background: #000000;
|
||||
color: #ffffff;
|
||||
|
||||
.people {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.num {
|
||||
margin-top: 30rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #F37400;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 122rpx;
|
||||
width: 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.moneys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
.money {
|
||||
margin-top: 30rpx;
|
||||
font-size: 36rpx;
|
||||
color: #F37400;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
width: 391rpx;
|
||||
height: 74rpx;
|
||||
margin: 10rpx auto 30rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.two {
|
||||
margin-top: 30rpx;
|
||||
background: #151515;
|
||||
padding-top: 35rpx;
|
||||
|
||||
.tab-wrap {
|
||||
margin-top: 15rpx;
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
// width: 100%;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
|
||||
.tab-item {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.bar {
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #61e3ff;
|
||||
border-radius: 2rpx;
|
||||
position: absolute;
|
||||
bottom: 15rpx;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #222;
|
||||
|
||||
.bar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
&-item {
|
||||
height: 140rpx;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-evenly;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.avatar {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: calc(100% - 110rpx);
|
||||
|
||||
&-hd {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
&-bd {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
.money {
|
||||
color: #F37400;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-name {
|
||||
padding-left: 110rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
color: #ef2200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-more {
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
.icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gzbox {
|
||||
width: 90rpx;
|
||||
height: 75rpx;
|
||||
position: absolute;
|
||||
top: 74rpx;
|
||||
left: 40rpx;
|
||||
}
|
||||
|
||||
.gzbox>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// margin-right: 9rpx;
|
||||
// margin-left: 20rpx;
|
||||
position: relative;
|
||||
// top: 6rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pop_con {
|
||||
height: 440rpx;
|
||||
margin: auto;
|
||||
padding: 0rpx 36rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.pop_title {
|
||||
// font-family: 'zcq';
|
||||
font-size: 40rpx;
|
||||
color: #96FFFE;
|
||||
height: 128rpx;
|
||||
line-height: 128rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pop {
|
||||
width: 543rpx;
|
||||
height: 801rpx;
|
||||
padding-top: 192rpx;
|
||||
box-sizing: border-box;
|
||||
/* background: #FFFFFF; */
|
||||
/* border-radius: 20rpx; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="moneys">
|
||||
<view class="content" @click="gotoPage('/pages/user/sy_jl')">
|
||||
<view class="content">
|
||||
<view>奖励总额</view>
|
||||
<view class="money">
|
||||
{{ commission }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user