Skip to content

G
game-h5
Commit 13d66ada by 曾经
Options

游戏 条件 游戏弹窗

parent dc71fcd2
Showing with 511 additions and 56 deletions
README.md
......@@ -22,3 +22,10 @@ yarn lint
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
https://test.web.demogic.com/wxa-h5-game
https://www.gicdev.com/wxa-h5-game
https://hope.demogic.com/wxa-h5-game
package-lock.json
......@@ -2676,8 +2676,7 @@
"version": "2.2.0",
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true,
"optional": true
"dev": true
},
"bindings": {
"version": "1.5.0",
......@@ -3168,7 +3167,6 @@
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"dev": true,
"optional": true,
"requires": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
......@@ -3185,7 +3183,6 @@
"resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"optional": true,
"requires": {
"fill-range": "^7.0.1"
}
......@@ -3195,7 +3192,6 @@
"resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"optional": true,
"requires": {
"to-regex-range": "^5.0.1"
}
......@@ -3204,15 +3200,13 @@
"version": "7.0.0",
"resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"optional": true
"dev": true
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"optional": true,
"requires": {
"is-number": "^7.0.0"
}
......@@ -3449,6 +3443,17 @@
"integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
"dev": true
},
"clone-deep": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
"dev": true,
"requires": {
"is-plain-object": "^2.0.4",
"kind-of": "^6.0.2",
"shallow-clone": "^3.0.0"
}
},
"coa": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/coa/-/coa-2.0.2.tgz",
......@@ -6791,7 +6796,6 @@
"resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"optional": true,
"requires": {
"binary-extensions": "^2.0.0"
}
......@@ -9369,7 +9373,6 @@
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"optional": true,
"requires": {
"picomatch": "^2.2.1"
}
......@@ -9772,6 +9775,50 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"sass": {
"version": "1.32.13",
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
}
},
"sass-loader": {
"version": "8.0.2",
"resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-8.0.2.tgz",
"integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
"dev": true,
"requires": {
"clone-deep": "^4.0.1",
"loader-utils": "^1.2.3",
"neo-async": "^2.6.1",
"schema-utils": "^2.6.1",
"semver": "^6.3.0"
},
"dependencies": {
"json5": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.0",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
......@@ -10002,6 +10049,15 @@
"safe-buffer": "^5.0.1"
}
},
"shallow-clone": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz",
"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
"dev": true,
"requires": {
"kind-of": "^6.0.2"
}
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-1.2.0.tgz",
......
package.json
......@@ -23,6 +23,8 @@
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32.6",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
......
src/api/common.js
......@@ -47,6 +47,9 @@ const gameApiMap = {
// 校验会员玩游戏权限
validGame: '/gic-wx-app/game/valid',
// 获取已玩次数
getPlayCount: '/gic-wx-app/game/play_count',
// 获取积分
getIntegral: '/gic-wx-app/common/integral',
}
......
src/api/service.js
......@@ -12,13 +12,13 @@ service.interceptors.request.use((config) => {
});
service.interceptors.response.use((response) => {
const { data, config } = response;
const { data } = response;
let err;
const { errorCode, code } = data;
if( errorCode==0||code==0){
return data.result;
}else{
err = new Error(`${data.message}: ${config.url}`);
err = new Error(data.message || '系统异常');
return Promise.reject(err);
}
}, (err) => {
......
src/components/cmh/components/alert.vue
<template>
<div class="dialog-bg" v-if="show">
<div class="dialog-bg" v-if="show && (title || content || (buttonList && buttonList.length))">
<div class="content">
<div class="content-detail">
<div class="content-detail-bg">
<div class="content-detail">
<div class="title" v-if="title">{{ title }}</div>
<div class="subtitle" v-if="content">{{ content }}</div>
<div class="handle-btn-box" v-if="buttonList && buttonList.length">
<div
class="handle-btn"
v-for="item in buttonList"
:key="item"
@click="item.click()"
>
{{ item.text }}
</div>
</div>
</div>
</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
......@@ -12,26 +25,55 @@
<script>
export default {
props: {
show: Boolean
show: Boolean,
title:{
type: String,
default: "提示"
},
content:{
type: String,
default: "提示内容"
},
buttonList:{
type: Object,
default(){
return [
{
text: "btn1",
click: function () {
console.log("click1");
},
},
{
text: "btn1",
click: function () {
console.log("click2");
},
},
]
}
},
cancel:{
type: Function,
default(){
console.log("cancel");
}
},
},
data() {
return {};
},
methods: {
again(){
this.$emit('again');
this.close();
},
close(){
this.$emit('update:show', false);
close() {
this.$emit("update:show", false);
this.options.cancel();
},
},
};
</script>
<style scoped>
.dialog-bg{
<style scoped lang="scss">
.dialog-bg {
position: fixed;
left: 0;
top: 0;
......@@ -41,18 +83,65 @@ export default {
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg .content{
.dialog-bg .content {
position: absolute;
z-index: 2;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
text-align: center;
width: 75%;
.content-detail-bg {
background: #12b4bb;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #54fefe;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
padding: 8px 10px;
.content-detail {
background: white;
border-radius: 10px;
text-align: center;
padding: 10px 13px;
.title {
color: #27292b;
font-weight: 600;
font-size: 20px;
padding-top: 15px;
}
.subtitle {
color: #27292b;
font-size: 15px;
padding: 20px 0 30px;
}
.handle-btn-box {
display: flex;
padding-bottom: 15px;
justify-content: center;
.handle-btn {
box-sizing: border-box;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
font-size: 16px;
font-weight: 600;
border-radius: 20px;
background: #12b4bb;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
flex: 1;
max-width: 165px;
margin-right: 15px;
&:last-child {
margin-right: 0px;
}
}
}
}
}
}
.dialog-bg .content .icon-guanbi{
.dialog-bg .content .icon-guanbi {
margin: 40px auto 0;
color: white;
opacity: 0.8;
......@@ -61,6 +150,4 @@ export default {
height: 28px;
width: 28px;
}
</style>
src/components/cmh/components/share-select-dialog.vue
<template>
<div class="dialog-bg" :class="show ? 'show' : 'hidden'" @click="close">
<div class="content" v-infinite-scroll="load" @click.stop="tap">
<div class="content" @click.stop="tap">
<div class="top">
<div class="title">邀请好友助力</div>
<div class="iconfont icon-guanbi" @click="close"></div>
......@@ -24,14 +24,14 @@
</div>
</div>
</div>
<div class="cell">
<div class="cell" v-if="list && list.length" v-infinite-scroll="loadData">
<div class="iconfont icon-duobianxing"></div>
<div class="info">
<div class="title">助力成功记录</div>
<div class="record-list">
<div class="record-item" v-for="item in count" :key="item">
<div class="time">2022-05-07</div>
<div class="text">凌* 助力成功</div>
<div class="record-item" v-for="item in list" :key="item">
<div class="time">{{ item.createTime | formatDate }}</div>
<div class="text">{{ item.helpMemberName || item.helpMemberNick }} 助力成功</div>
</div>
</div>
</div>
......@@ -56,19 +56,42 @@ export default {
data() {
return {
count: 100,
pageSize: 20,
currentPage: 1,
list: [],
};
},
created(){
this.loadData();
},
methods: {
reloadData(){
this.currentPage = 1;
this.totalCount = 0;
this.loadData();
this.getGameRule();
},
async loadData(){
if(this.list.length >= this.totalCount && this.totalCount != 0){
return;
}
let res = await getReportRecord({
memberId: this.memberId || '',
enterpriseId: this.enterpriseId || '',
gameId: this.gameId || ''
});
console.log("res---->",res);
gameId: this.gameId || '',
currentPage: this.currentPage,
pageSize: this.pageSize
})
this.totalCount = res.totalCount;
let list = [];
if(this.currentPage == 1){
list = res.result||[];
}else{
list = list.concat(res.result||[])
}
this.currentPage ++;
this.list = list;
},
again() {
this.$emit("again");
......@@ -81,8 +104,14 @@ export default {
}, 200);
},
tap() {},
load() {},
},
filters:{
formatDate(value){
if (!value) return '--';
let date = new Date(value);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
}
}
};
</script>
......
src/components/cmh/index.vue
......@@ -49,7 +49,12 @@
<div class="points-count-box">
<div>
<!-- 左边显示-右边次数显示且积分玩法开启才显示在左边 -->
<div class="text-box" v-if="rule.integral && playNumberObj && playNumberObj.playNumberFlag">
<div
class="text-box"
v-if="
rule.integral && playNumberObj && playNumberObj.playNumberFlag
"
>
<div class="text">{{ currentIntegral }}</div>
<img class="text-shadow" src="./images/circle_bg.png" />
<img class="title-image" src="./images/我的积分.png" />
......@@ -110,6 +115,7 @@
v-if="showShareSelectDialog"
></share-select-dialog>
<share-img-dialog :show.sync="showShareImgDialog"></share-img-dialog>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div>
</template>
......@@ -119,13 +125,14 @@ const {
getGameInfo,
getGamePlayNumber,
getGamePlayBarrage,
gamePlay,
getIntegral,
getGameRule,
} = gameRequestApi;
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { Manager } from "../manager";
import "swiper/css/swiper.css";
import OpenBoxDialog from "./components/open-box.vue";
......@@ -134,6 +141,7 @@ import RewardDialog from "./components/reward-dialog.vue";
import RewardFailDialog from "./components/reward-fail.vue";
import ShareSelectDialog from "./components/share-select-dialog.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import AlertDialog from "./components/alert.vue";
export default {
components: {
OpenBoxDialog,
......@@ -143,6 +151,7 @@ export default {
RewardFailDialog,
ShareSelectDialog,
ShareImgDialog,
AlertDialog,
},
data() {
return {
......@@ -151,6 +160,7 @@ export default {
showRewardFailDialog: false,
showShareSelectDialog: false,
showShareImgDialog: false,
alertOptions: {},
list: [
"刷卡拉拉卡",
"阿拉卡萨卢克和史莱克",
......@@ -210,12 +220,20 @@ export default {
gameId: "1",
enterpriseId: "ff8080815dacd3a2015dacd3ef5c0000",
memberId: "ff808081804666e3018049dee09102af",
isAttest: false,
currentIntegral: "--",
rule:{},
rule: {},
};
},
created() {
document.title = "猜盲盒";
this.manager = new Manager(this);
let query = this.$route.query;
this.gameId = query.gameId;
this.enterpriseId = query.enterpriseId;
this.memberId = query.memberId;
this.isAttest = query.isAttest;
if (!this.audio) {
this.audio = new Audio();
this.audio.autoplay = true;
......@@ -256,24 +274,24 @@ export default {
this.audio.pause();
}
},
async getGameRule(){
async getGameRule() {
let rule = await getGameRule({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
})
});
this.rule = rule;
window.wx.miniProgram.postMessage({
data:{
data: {
shareTitle: rule.shareRuleDesc,
shareImage: rule.shareImageUrl,
}
})
},
});
},
async getGamePlayNumber() {
let playNumberObj = await getGamePlayNumber({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId,
memberId: this.memberId || "",
});
this.playNumberObj = playNumberObj;
},
......@@ -333,11 +351,7 @@ export default {
console.log();
},
async open() {
let gameRes = await gamePlay({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId,
});
let gameRes = await this.manager.play();
this.showOpenBoxDialog = false;
// this.rewardDetail = {};
......
src/components/index.vue
......@@ -35,7 +35,6 @@ export default {
default:
break;
}
this.$router.replace({
path: `/${ gameName }${ query.shareMemberId ? '/support' : '' }`,
query: query,
......
src/components/manager.js 0 → 100644
import { gameRequestApi } from "@/api/common.js";
const {
getPlayCount,
validGame,
gamePlay
} = gameRequestApi;
export function Manager(component) {
let _component;
if (component) {
_component = component;
}
this.init = (component) => {
_component = component;
}
const showAlert = (options) => {
_component.alertOptions = options;
}
const hiddenAlert = () => {
_component.alertOptions = {};
}
const checkAttest = () => {
return new Promise((resolve, reject) => {
let query = _component.$route.query;
if (query.isAttest) {
resolve();
return;
} else {
reject();
showAlert({
show: true,
content: "成为会员才可参与游戏哦~<br/>快认证成为会员赢好礼吧！",
buttonList: [
{
text: "立即认证",
click: () => {
hiddenAlert();
// TODO
},
},
],
cancel: () => {
hiddenAlert();
},
});
}
});
}
const checkTime = () => {
return new Promise((resolve, reject) => {
let game = _component.game;
let content = "无法参与游戏";
switch (+game.status) {
case 0:
content = "游戏还没开始，请耐心等待,\n去其他地方先逛逛吧~";
break;
case 1:
resolve();
return;
case 2:
content = "来晚一步，游戏已结束，\n去其他地方看看吧~";
break;
case 3:
content = "来晚一步，游戏已下架，\n去其它地方看看吧~";
break;
default:
break;
}
reject();
showAlert({
show: true,
content: content,
buttonList: [
{
text: "前往会员中心",
click: () => {
hiddenAlert();
// window.wx.miniProgram
// TODO
},
},
],
cancel: () => {
hiddenAlert();
},
});
});
}
const checkCount = () => {
return new Promise((resolve, reject) => {
let query = _component.$route.query;
getPlayCount(query).then((res) => {
let rule = _component.rule;
if (rule.playTimes > res) {
resolve();
} else {
reject();
showAlert({
show: true,
content: rule.giveawayType == '21' ? "今日免费次数已用完，明早继续" : '免费游戏次数已用完，去其他地方看看吧~',
buttonList: [
{
text: "前往会员中心",
click: () => {
hiddenAlert();
// TODO
},
},
],
cancel: () => {
hiddenAlert();
},
});
}
}).catch(() => {
resolve();
})
});
}
const checkLimit = () => {
return new Promise((resolve) => {
validGame(_component.$route.query).then(resolve).catch(() => {
showAlert({
show: true,
title: "很遗憾",
content: "您暂无权限参加本次游戏，详情请查看游戏规则",
buttonList: [
{
text: "查看规则",
click: () => {
hiddenAlert();
this.toGameRule();
},
},
],
cancel: () => {
hiddenAlert();
},
})
})
})
}
const play = () => {
return new Promise((resolve, reject) => {
gamePlay(_component.$route.query).then(resolve).catch((res) => {
reject(res);
let content = "";
let title = "";
let buttonList = [
{
text: "前往会员中心",
click: () => {
hiddenAlert();
// TODO
},
},
];
switch (+res.code) {
case 2001:
// 游戏已结束
content = "来晚一步，游戏已结束，\n去其他地方看看吧~";
break;
case 2002:
// 游戏未开始
content = "游戏还没开始，请耐心等待，\n去其他地方看看吧~";
break;
case 2003:
// 游戏无权限
title = "很遗憾";
content = "您暂无权限参加本次游戏，\n详情请查看游戏规则";
buttonList = [{
text: "查看规则",
click: () => {
hiddenAlert();
_component.toGameRule();
},
}];
break;
case 2004:
// 抽奖次数已达上限
content = "游戏次数已达上限，\n去其他地方看看吧~";
break;
case 2005:
// 用户游戏抽奖次数小于0
content = "游戏次数已达上限，\n去其他地方看看吧~";
break;
case 2006:
// 用户积分不足
content = "当前积分不足，\n去先去获取些积分吧~";
buttonList = [{
text: "立即获取积分",
click: () => {
hiddenAlert();
},
}];
break;
case 2007:
// 用户游戏抽奖今日免费次数小于0
content = "今日免费次数已用完，\n明早继续";
break;
case 2008:
// 用户游戏抽奖总免费次数小于0
content = "免费游戏次数已达上限，\n去其他地方看看吧~";
break;
default:
content = res.message || "系统异常";
buttonList = [];
break;
}
console.log(title,content);
if(title || content){
showAlert({
show: true,
title: title,
content: content,
buttonList: buttonList,
cancel: () => {
hiddenAlert();
},
})
}
})
})
}
this.play = () => {
return checkTime()
.then(checkAttest)
.then(checkCount)
.then(checkLimit)
.then(() => {
return play();
})
}
return this;
}
vue.config.js
......@@ -22,6 +22,13 @@ module.exports = {
},
},
},
css: {
loaderOptions: {
scss: {
sassOptions: { outputStyle: 'expanded' }, // 避免默认compressed打包输出双字节字符造成icon乱码
},
},
},
configureWebpack: config => {
config.externals = {
vue: 'Vue',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment