pdkj
/
guessing-miniprogram-fortend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

封装竞猜组件

hui.zhou
ihzero 2024-07-09 02:18:57 +08:00
parent cffddd124c
commit b054a90371
5 changed files with 1136 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -16,6 +16,7 @@
"dev:mp-qq": "uni -p mp-qq", "dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao", "dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin", "dev:mp-weixin": "uni -p mp-weixin",
"dev:mp-weixin:pro": "uni -p mp-weixin --mode production",
"dev:mp-xhs": "uni -p mp-xhs", "dev:mp-xhs": "uni -p mp-xhs",
"dev:quickapp-webview": "uni -p quickapp-webview", "dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei", "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
@ -60,7 +61,7 @@
"pinia": "2.0.33", "pinia": "2.0.33",
"pinia-plugin-persistedstate": "^3.2.1", "pinia-plugin-persistedstate": "^3.2.1",
"tiny-emitter": "^2.1.0", "tiny-emitter": "^2.1.0",
"uview-plus": "^3.1.41", "uview-plus": "^3.3.4",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-i18n": "^9.1.9", "vue-i18n": "^9.1.9",
"vue3-eventbus": "^2.0.0" "vue3-eventbus": "^2.0.0"

515
src/components/quiz/modal.vue 100644
View File

@ -0,0 +1,515 @@
<template>
<up-modal
:show="showGuessModalVisible"
:width="335"
:closeOnClickOverlay="true"
:showConfirmButton="false"
:showCancelButton="false"
@close="hideGuessModal"
>
<view class="guess-model w-full" v-if="gameInfo">
<view class="slot-content">
<view class="guess-title">
<view class="flex-1 flex-center">{{ gameInfo.home_field }}</view>
<view class="w-170rpx text-center">VS</view>
<view class="flex-1 flex-center">{{ gameInfo.away }}</view>
</view>
<template v-if="gameInfo.score_type == 1">
<view class="guess-table">
<view class="row herder-title">
<view class="table-td col-12">单</view>
</view>
<view class="table-tr row row-3">
<view class="row-title table-td row-3 col-10">胜</view>
<view class="row-content">
<view class="row-1 col-10">
<view
class="table-td col-2"
:class="{ active: userGuess === '1:0' }"
@click="userGuessChange('1:0')"
>1:0</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '2:0' }"
@click="userGuessChange('2:0')"
>2:0</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '2:1' }"
@click="userGuessChange('2:1')"
>2:1</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '3:0' }"
@click="userGuessChange('3:0')"
>3:0</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '3:1' }"
@click="userGuessChange('3:1')"
>3:1</view
>
</view>
<view class="row-1 col-10">
<view
class="table-td col-2"
:class="{ active: userGuess === '3:2' }"
@click="userGuessChange('3:2')"
>3:2</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '4:0' }"
@click="userGuessChange('4:0')"
>4:0</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '4:1' }"
@click="userGuessChange('4:1')"
>4:1</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '4:2' }"
@click="userGuessChange('4:2')"
>4:2</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '5:0' }"
@click="userGuessChange('5:0')"
>5:0</view
>
</view>
<view class="row-1 col-10">
<view
class="table-td col-2"
:class="{ active: userGuess === '5:1' }"
@click="userGuessChange('5:1')"
>5:1</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '5:2' }"
@click="userGuessChange('5:2')"
>5:2</view
>
<view
class="table-td col-6"
:class="{ active: userGuess === '胜其他' }"
@click="userGuessChange('胜其他')"
>胜其他</view
>
</view>
</view>
</view>
<view class="table-tr row row-1">
<view class="row-title table-td row-1 col-10">平</view>
<view class="row-content">
<view class="row-1 col-10">
<view
class="table-td col-2"
:class="{ active: userGuess === '0:0' }"
@click="userGuessChange('0:0')"
>0:0</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '1:1' }"
@click="userGuessChange('1:1')"
>1:1</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '2:2' }"
@click="userGuessChange('2:2')"
>2:2</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '3:3' }"
@click="userGuessChange('3:3')"
>3:3</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '平其他' }"
@click="userGuessChange('平其他')"
>平其他</view
>
</view>
</view>
</view>
<view class="table-tr row row-3">
<view class="row-title table-td row-3 col-10">负</view>
<view class="row-content">
<view class="row-1 col-10">
<view
class="table-td col-2"
:class="{ active: userGuess === '0:1' }"
@click="userGuessChange('0:1')"
>0:1</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '0:2' }"
@click="userGuessChange('0:2')"
>0:2</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '0:3' }"
@click="userGuessChange('0:3')"
>0:3</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '0:4' }"
@click="userGuessChange('0:4')"
>0:4</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '0:5' }"
@click="userGuessChange('0:5')"
>0:5</view
>
</view>
<view class="row-1 col-10">
<view
class="table-td col-2"
:class="{ active: userGuess === '1:2' }"
@click="userGuessChange('1:2')"
>1:2</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '1:3' }"
@click="userGuessChange('1:3')"
>1:3</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '1:4' }"
@click="userGuessChange('1:4')"
>1:4</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '1:5' }"
@click="userGuessChange('1:5')"
>1:5</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '2:3' }"
@click="userGuessChange('2:3')"
>2:3</view
>
</view>
<view class="row-1 col-10">
<view
class="table-td col-2"
:class="{ active: userGuess === '2:4' }"
@click="userGuessChange('2:4')"
>2:4</view
>
<view
class="table-td col-2"
:class="{ active: userGuess === '2:5' }"
@click="userGuessChange('2:5')"
>2:5</view
>
<view
class="table-td col-6"
:class="{ active: userGuess === '负其他' }"
@click="userGuessChange('负其他')"
>负其他</view
>
</view>
</view>
</view>
</view>
</template>
<template v-if="gameInfo.score_type == 2">
<view class="flex">
<view class="flex-1 flex-center">
<up-avatar
size="48"
mode="aspectFit"
:src="gameInfo.home_logo"
></up-avatar>
</view>
<view class="text-center w-170rpx text-12px text-hex-999">
<view>{{ gameInfo.game_day }}</view>
<view>{{ gameInfo.little_game_at }}</view>
</view>
<view class="flex-1 flex-center">
<up-avatar
size="48"
mode="aspectFit"
:src="gameInfo.home_logo"
></up-avatar>
</view>
</view>
<view class="w-full type2" :class="successGuessClass">
<view class="h-34px flex bg-hex-eeeeef rounded-4px text-hex-303133">
<view
v-for="item in subsectionList"
:key="item"
:class="{
active: userGuess === item,
}"
@click="userGuessChange(item)"
class="flex-1 flex-center text-12px rounded-4px"
>
{{ item }}
</view>
</view>
</view>
</template>
<view class="guess-btns" v-if="!readonly">
<up-button
class="more-btn"
:customStyle="{
margin: 0,
width: '120px',
backgroundColor: '#D9D9D9',
color: '#000',
}"
shape="circle"
text="取消"
@click="hideGuessModal"
></up-button>
<up-button
class="more-btn"
:customStyle="{
margin: 0,
width: '120px',
backgroundColor: '#5fb358',
color: '#fff',
}"
shape="circle"
text="确定"
@click="submitGuessResult"
></up-button>
</view>
</view>
</view>
</up-modal>
</template>
<script setup>
import { computed } from 'vue';
import { ref, watch, watchEffect } from 'vue'
const props = defineProps({
show: {
type: Boolean,
default: false,
},
gameInfo: {
type: Object,
default: () => ({}),
},
showResult: {
type: Boolean,
default: false,
}
})
const showGuessModalVisible = ref(props.show)
const subsectionList = ref(['胜', '平', '负'])
const userGuess = ref('')
const readonly = computed(()=>{
if(props.gameInfo?.has_guess || props.gameInfo?.game_at_comparison_now){
return true
}
return false
})
const isGuess = computed(()=>!!props.gameInfo?.has_guess)
const successGuess = computed(()=>props.gameInfo?.game_score === props.gameInfo?.has_guess)
const successGuessClass = computed(()=>{
if(isGuess.value){
return ''
}
return successGuess.value ? 'success' : 'fail'
})
watchEffect(() => {
userGuess.value = props.gameInfo?.has_guess || ''
},{
deep: true
})
watchEffect(() => {
showGuessModalVisible.value = props.show
})
const emit = defineEmits([
'update:show',
'hideGuessModal',
'submitGuessResult',
'userGuessChange',
])
const hideGuessModal = () => {
emit('hideGuessModal')
}
const submitGuessResult = () => {
emit('submitGuessResult')
}
const userGuessChange = (score) => {
userGuess.value = score
}
watch(
() => showGuessModalVisible.value,
(val) => {
emit('update:show', val)
}
)
</script>
<style lang="scss" scoped>
.type2{
.active{
background-color: #1d2b5c;
color: white;
}
}
.success {
.active {
background-color: red !important;
color: white;
}
}
.fail {
.active {
background-color: #bbb !important;
color: white;
}
}
.guess-model {
.slot-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.guess-title {
width: 100%;
display: flex;
// justify-content: center;
// align-items: center;
// gap: 58px;
}
.guess-table {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
.table-td {
border: 1px solid #bbb;
width: 48px !important;
}
.table-td.active {
background-color: #1d2b5c;
color: #fff;
}
.row-1 {
height: calc(30px * 1 - 2px) !important;
line-height: calc(30px * 1 - 2px) !important;
}
.row-2 {
height: calc(30px * 2 - 2px) !important;
line-height: calc(30px * 2 - 2px) !important;
}
.row-3 {
height: calc(30px * 3 - 8px) !important;
line-height: calc(30px * 3 - 8px) !important;
}
.row {
width: 300px;
height: 30px;
line-height: 30px;
flex-shrink: 0;
display: flex;
text-align: center;
.col-1 {
width: calc(292px / 12 * 1);
}
.col-2 {
width: calc(292px / 12 * 2);
}
.col-10 {
display: flex;
justify-content: flex-start;
align-self: flex-start;
flex-grow: 1;
.table-td {
width: 47.7px !important;
border: 1px solid #bbb;
}
.col-6 {
width: calc(47.7px * 3 + 4px) !important;
}
}
.col-12 {
width: 292px;
}
}
.herder-title {
background-color: #1d2b5c;
color: #fff;
.table-td {
width: 100% !important;
}
}
.row-title {
background-color: #d9d9d9;
width: 48px !important;
justify-content: center !important;
}
.row-content {
display: flex;
flex-wrap: wrap;
width: calc(300px - 48px - 3px) !important;
}
}
.guess-btns {
display: flex;
justify-content: space-around;
width: 300px;
flex-shrink: 0;
}
}
</style>

1
src/pages/charts/charts.vue
View File

@ -659,6 +659,7 @@ function useGameDetail() {
) )
detail.value.end_at = dayjs(detail.value.end_at).format('YYYY-MM-DD') detail.value.end_at = dayjs(detail.value.end_at).format('YYYY-MM-DD')
detailLoading.false = false detailLoading.false = false
detailId.value = res.data.activity.id
resolve(detail) resolve(detail)
}) })
.catch((err) => { .catch((err) => {

572
src/pages/index/index.vue
View File

@ -1,23 +1,46 @@
<template> <template>
<view class="home-page"> <view class="home-page">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{ <mescroll-body
@init="mescrollInit"
@down="downCallback"
@up="upCallback"
:up="{
empty: { empty: {
use: false, use: false,
} },
}"> }"
>
<view class="home-banner" v-if="homeBannerList.length"> <view class="home-banner" v-if="homeBannerList.length">
<up-swiper class="bg" :radius="0" height="200" :list="homeBannerList" <up-swiper
:displayMultipleItems="displayMultipleItems" keyName="url" @click="clickHomeBanner"></up-swiper> class="bg"
:radius="0"
height="200"
:list="homeBannerList"
:displayMultipleItems="displayMultipleItems"
keyName="url"
@click="clickHomeBanner"
></up-swiper>
</view> </view>
<view class="home-content" v-if="gameInfo || articleList.length || gameLogs.length"> <view
<image class="bg" mode="widthFix" :src="`${config.baseUrl}/images/mini-bg.jpg`"></image> class="home-content"
v-if="gameInfo || articleList.length || gameLogs.length"
>
<image
class="bg"
mode="widthFix"
:src="`${config.baseUrl}/images/mini-bg.jpg`"
></image>
<view class="today-guess-box" v-if="gameInfo"> <view class="today-guess-box" v-if="gameInfo">
<view class="title">今日竞猜</view> <view class="title">今日竞猜</view>
<view class="vs-box"> <view class="vs-box">
<view class="left"> <view class="left">
<up-avatar class="item-box" size="48" mode="aspectFit" <up-avatar
:src="gameInfo.home_logo"></up-avatar> class="item-box"
size="48"
mode="aspectFit"
:src="gameInfo.home_logo"
></up-avatar>
<view class="item-text">{{ gameInfo.home_field }}</view> <view class="item-text">{{ gameInfo.home_field }}</view>
</view> </view>
<view class="middle"> <view class="middle">
@ -25,52 +48,123 @@
<view class="item-text">{{ gameInfo.little_game_at }}</view> <view class="item-text">{{ gameInfo.little_game_at }}</view>
</view> </view>
<view class="right"> <view class="right">
<up-avatar class="item-box" size="48" mode="aspectFit" <up-avatar
:src="gameInfo.away_logo"></up-avatar> class="item-box"
size="48"
mode="aspectFit"
:src="gameInfo.away_logo"
></up-avatar>
<view class="item-text">{{ gameInfo.away }}</view> <view class="item-text">{{ gameInfo.away }}</view>
</view> </view>
</view> </view>
<view class="operation-box"> <view class="operation-box">
<up-button class="guess-btn" :disabled="false" shape="circle" @click="showGuessModal(gameInfo)" <up-button
:customStyle="{ margin: 0, width: '132px', backgroundColor: '#1D2B5C', color: '#fff', opacity: 1 }" class="guess-btn"
v-if="!gameInfo.game_at_comparison_now && !gameInfo.has_guess">立即竞猜</up-button> :disabled="false"
shape="circle"
<up-button class="guess-btn disabled" :disabled="false" shape="circle"
@click="showGuessModal(gameInfo)" @click="showGuessModal(gameInfo)"
:customStyle="{ margin: 0, width: '132px', backgroundColor: '#1D2B5C', color: '#fff', opacity: 0.7 }" :customStyle="{
v-if="gameInfo.has_guess">已竞猜</up-button> margin: 0,
width: '132px',
backgroundColor: '#1D2B5C',
color: '#fff',
opacity: 1,
}"
v-if="!gameInfo.game_at_comparison_now && !gameInfo.has_guess"
>立即竞猜</up-button
>
<up-button class="guess-btn disabled" :disabled="true" shape="circle" <up-button
class="guess-btn disabled"
:disabled="false"
shape="circle"
@click="showGuessModal(gameInfo)" @click="showGuessModal(gameInfo)"
:customStyle="{ margin: 0, width: '132px', backgroundColor: '#1D2B5C', color: '#fff', opacity: 0.7 }" :customStyle="{
v-if="gameInfo.game_at_comparison_now && !gameInfo.has_guess">已结束</up-button> margin: 0,
width: '132px',
backgroundColor: '#1D2B5C',
color: '#fff',
opacity: 0.7,
}"
v-if="gameInfo.has_guess"
>已竞猜</up-button
>
<up-button class="more-btn" :disabled="false" shape="circle" @click="goToActivateDetailPage" <up-button
:customStyle="{ margin: 0, width: '75px', backgroundColor: '#f0f0f0', color: '#000', opacity: 1 }">更多</up-button> class="guess-btn disabled"
:disabled="true"
shape="circle"
@click="showGuessModal(gameInfo)"
:customStyle="{
margin: 0,
width: '132px',
backgroundColor: '#1D2B5C',
color: '#fff',
opacity: 0.7,
}"
v-if="gameInfo.game_at_comparison_now && !gameInfo.has_guess"
>已结束</up-button
>
<up-button
class="more-btn"
:disabled="false"
shape="circle"
@click="goToActivateDetailPage"
:customStyle="{
margin: 0,
width: '75px',
backgroundColor: '#f0f0f0',
color: '#000',
opacity: 1,
}"
>更多</up-button
>
</view> </view>
</view> </view>
<view class="news-box" v-if="articleList.length"> <view class="news-box" v-if="articleList.length">
<view class="news-title-box"> <view class="news-title-box">
<text class="title">体彩资讯</text> <text class="title">体彩资讯</text>
<text class="more" @click="$goToPage('pages/news/news', true)">查看更多</text> <text class="more" @click="$goToPage('pages/news/news', true)"
>查看更多</text
>
</view> </view>
<view v-for="(item, index) in articleList" :key="index" <view
@click="$goToPage({ url: 'packages/pages/news/newDetail/newDetail', params: { id: item.id } })"> v-for="(item, index) in articleList"
<view class="news-image-box" :class="{ 'last': index === articleList.length - 1 }" :key="index"
v-if="item.cover"> @click="
$goToPage({
url: 'packages/pages/news/newDetail/newDetail',
params: { id: item.id },
})
"
>
<view
class="news-image-box"
:class="{ last: index === articleList.length - 1 }"
v-if="item.cover"
>
<image class="news-image" :src="item.cover"></image> <image class="news-image" :src="item.cover"></image>
<view class="news-info"> <view class="news-info">
<view class="news-info-title">{{ item.title }}</view> <view class="news-info-title">{{ item.title }}</view>
<view class="news-info-publish_time">{{ item.published_at }}</view> <view class="news-info-publish_time">{{
item.published_at
}}</view>
</view> </view>
</view> </view>
<view class="news-content-box" :class="{ 'last': index === articleList.length - 1 }" v-else> <view
class="news-content-box"
:class="{ last: index === articleList.length - 1 }"
v-else
>
<view class="news-info"> <view class="news-info">
<view class="news-info-title">{{ item.title }}</view> <view class="news-info-title">{{ item.title }}</view>
<view class="news-info-publish_time">{{ item.published_at }}</view> <view class="news-info-publish_time">{{
item.published_at
}}</view>
</view> </view>
</view> </view>
</view> </view>
@ -81,15 +175,14 @@
<text class="title">最新竞猜</text> <text class="title">最新竞猜</text>
<!-- <text class="more" @click="$goToPage('pages/news/news', true)">查看更多</text> --> <!-- <text class="more" @click="$goToPage('pages/news/news', true)">查看更多</text> -->
</view> </view>
<view v-for="(item,i) in gameLogs" :key="i"> <view v-for="(item, i) in gameLogs" :key="i">
<QuizItem :data="item"></QuizItem> <QuizItem :data="item"></QuizItem>
</view> </view>
</view> </view>
</view> </view>
<view class="guess-model" v-if="gameInfo"> <!-- <view class="guess-model" v-if="gameInfo">
<up-modal :show="showGuessModalVisible" :width="335" :closeOnClickOverlay="true" <up-modal v-model:show="showGuessModalVisible" :width="335" :closeOnClickOverlay="true"
:showConfirmButton="false" :showCancelButton="false" @close="hideGuessModal"> :showConfirmButton="false" :showCancelButton="false" @close="hideGuessModal">
<view class="slot-content"> <view class="slot-content">
<view class="guess-title"> <view class="guess-title">
@ -206,35 +299,51 @@
</view> </view>
</view> </view>
</up-modal> </up-modal>
</view> </view> -->
</mescroll-body> </mescroll-body>
<QuizModal
:gameInfo="gameInfo"
:userGuess="userGuess"
:readonly="readonly"
@hideGuessModal="hideGuessModal"
@submitGuessResult="submitGuessResult"
@userGuessChange="userGuessChange"
v-model:show="showGuessModalVisible"
></QuizModal>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, getCurrentInstance } from 'vue'; import QuizModal from '@/components/quiz/modal.vue'
import { ref, getCurrentInstance } from 'vue'
import config from '@/common/config' import config from '@/common/config'
import { queryAds, queryLatestgame, queryRecommendArticles, submitGuess ,getLatestGameLogs} from '@/api/xinjiang_guess'; import {
import useAuthUser from '@/utils/hooks/useAuthUser'; queryAds,
queryLatestgame,
queryRecommendArticles,
submitGuess,
getLatestGameLogs,
} from '@/api/xinjiang_guess'
import useAuthUser from '@/utils/hooks/useAuthUser'
import jumpFun from '@/utils/jump.js' import jumpFun from '@/utils/jump.js'
import QuizItem from '@/components/quiz/item-new.vue' import QuizItem from '@/components/quiz/item-new.vue'
const vm = getCurrentInstance(); const vm = getCurrentInstance()
const loading = ref(false); const loading = ref(false)
const homeBannerLoading = ref(false); const homeBannerLoading = ref(false)
const homeBannerInfo = ref(null); const homeBannerInfo = ref(null)
const homeBannerList = ref([]); const homeBannerList = ref([])
const displayMultipleItems = ref(0); const displayMultipleItems = ref(0)
const showGuessModalVisible = ref(false); const showGuessModalVisible = ref(false)
const gameInfoLoading = ref(false); const gameInfoLoading = ref(false)
const gameInfo = ref(null); const gameInfo = ref(null)
const readonly = ref(false); const readonly = ref(false)
const userGuess = ref('0:0'); const userGuess = ref('0:0')
const submitGuessLoading = ref(false); const submitGuessLoading = ref(false)
const articleListLoading = ref(false); const articleListLoading = ref(false)
const articleList = ref([]); const articleList = ref([])
const gameLogs = ref([]) const gameLogs = ref([])
@ -247,40 +356,41 @@ function clickHomeBanner(index) {
} }
function userGuessChange(score) { function userGuessChange(score) {
userGuess.value = score
if (readonly.value) { if (readonly.value) {
return; return
} }
userGuess.value = score; userGuess.value = score
} }
function showGuessModal(item) { function showGuessModal(item) {
const { user } = useAuthUser(); const { user } = useAuthUser()
if (user.is_need_bind_phone) { if (user.is_need_bind_phone) {
vm.proxy.$goToPage('packages/pages/login/login?previous=index'); vm.proxy.$goToPage('packages/pages/login/login?previous=index')
return; return
} }
gameInfo.value = item; gameInfo.value = item
if (gameInfo.value.has_guess) { if (gameInfo.value.has_guess) {
readonly.value = true; readonly.value = true
} }
if (gameInfo.value.game_at_comparison_now) { if (gameInfo.value.game_at_comparison_now) {
readonly.value = true; readonly.value = true
} }
if (readonly.value) { if (readonly.value) {
userGuess.value = item.has_guess; userGuess.value = item.has_guess
} else { } else {
userGuess.value = '0:0'; userGuess.value = '0:0'
} }
showGuessModalVisible.value = true; showGuessModalVisible.value = true
} }
function hideGuessModal() { function hideGuessModal() {
showGuessModalVisible.value = false; showGuessModalVisible.value = false
setTimeout(() => { setTimeout(() => {
userGuess.value = '0:0'; userGuess.value = '0:0'
}, 300); }, 300)
} }
function goToActivateDetailPage() { function goToActivateDetailPage() {
@ -288,137 +398,150 @@ function goToActivateDetailPage() {
url: 'packages/pages/activeDetail/activeDetail', url: 'packages/pages/activeDetail/activeDetail',
params: { params: {
id: gameInfo.value.activity_id, id: gameInfo.value.activity_id,
} },
}) })
} }
async function getHomeBanner() { async function getHomeBanner() {
try { try {
homeBannerLoading.value = true; homeBannerLoading.value = true
const resp = await queryAds({ const resp = await queryAds({
address: "index-top", address: 'index-top',
}); })
homeBannerInfo.value = resp.data; homeBannerInfo.value = resp.data
homeBannerList.value = resp.data?.ads.map(item => { homeBannerList.value =
resp.data?.ads.map((item) => {
return { return {
url: item.resource, url: item.resource,
title: "", title: '',
poster: "", poster: '',
jump_type: item.jump_type, jump_type: item.jump_type,
jump_config: item.jump_config, jump_config: item.jump_config,
} }
}) || []; }) || []
displayMultipleItems.value = 1; displayMultipleItems.value = 1
if (homeBannerList.value.length > 3) { if (homeBannerList.value.length > 3) {
displayMultipleItems.value = 3; displayMultipleItems.value = 3
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err)
} finally { } finally {
homeBannerLoading.value = false; homeBannerLoading.value = false
} }
} }
async function getLatestGuess() { async function getLatestGuess() {
try { try {
gameInfoLoading.value = true; gameInfoLoading.value = true
const resp = await queryLatestgame() const resp = await queryLatestgame()
gameInfo.value = resp.data; gameInfo.value = resp.data
if (gameInfo.value && gameInfo.value.has_guess) { if (gameInfo.value && gameInfo.value.has_guess) {
userGuess.value = gameInfo.value.has_guess; userGuess.value = gameInfo.value.has_guess
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err)
} finally { } finally {
gameInfoLoading.value = false; gameInfoLoading.value = false
} }
} }
async function getRecommendArticles(params) { async function getRecommendArticles(params) {
try { try {
articleListLoading.value = true; articleListLoading.value = true
const resp = await queryRecommendArticles(params) const resp = await queryRecommendArticles(params)
articleList.value = resp.data?.articles || []; articleList.value = resp.data?.articles || []
} catch (err) { } catch (err) {
console.error(err); console.error(err)
} finally { } finally {
articleListLoading.value = false; articleListLoading.value = false
} }
} }
async function getNewQuiz(){ async function getNewQuiz() {
try { try {
const resData = await getLatestGameLogs() const resData = await getLatestGameLogs()
gameLogs.value = resData.data?.list || []; gameLogs.value = resData.data?.list || []
} catch (error) { } catch (error) {
console.error(error); console.error(error)
} }
} }
async function submitGuessResult() { async function submitGuessResult() {
try { try {
uni.showLoading({ uni.showLoading({
title: "加载中..." title: '加载中...',
}); })
const params = { const params = {
game: gameInfo.value.id, game: gameInfo.value.id,
score: userGuess.value, score: userGuess.value,
}; }
submitGuessLoading.value = true; submitGuessLoading.value = true
const res = await submitGuess(params, { custom: { catch: true } }); const res = await submitGuess(params, { custom: { catch: true } })
console.log('submitGuess', res); console.log('submitGuess', res)
uni.showToast({ uni.showToast({
title: res.message, title: res.message,
icon: "none", icon: 'none',
}); })
getLatestGuess(); getLatestGuess()
setTimeout(hideGuessModal, 0); setTimeout(hideGuessModal, 0)
} catch (err) { } catch (err) {
console.error(err); console.error(err)
} finally { } finally {
submitGuessLoading.value = false; submitGuessLoading.value = false
} }
} }
function getData(page = 1, per_page = 10) { function getData(page = 1, per_page = 10) {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
loading.value = true; loading.value = true
setTimeout(async () => { setTimeout(async () => {
await getHomeBanner(); await getHomeBanner()
await getLatestGuess(); await getLatestGuess()
// await getRecommendArticles(); // await getRecommendArticles();
getNewQuiz() getNewQuiz()
resolve(); resolve()
}, 1500); }, 1500)
} catch (err) { } catch (err) {
console.log('getData index', err); console.log('getData index', err)
reject(); reject()
} finally { } finally {
loading.value = false; loading.value = false
} }
}); })
} }
import { onShow, onLoad, onPullDownRefresh, onPageScroll, onReachBottom, onShareAppMessage } from "@dcloudio/uni-app"; import {
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"; onShow,
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) onLoad,
onPullDownRefresh,
onPageScroll,
onReachBottom,
onShareAppMessage,
} from '@dcloudio/uni-app'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
const { mescrollInit, downCallback, getMescroll } = useMescroll(
onPageScroll,
onReachBottom
)
const list = ref([]); const list = ref([])
const upCallback = (mescroll) => { const upCallback = (mescroll) => {
typeof getData === 'function' && getData(mescroll.num, mescroll.size).then(data => { typeof getData === 'function' &&
getData(mescroll.num, mescroll.size)
.then((data) => {
let curPageData = [] // 当前页数据 let curPageData = [] // 当前页数据
if (Array.isArray(data)) { if (Array.isArray(data)) {
curPageData = data; curPageData = data
} }
if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表 if (mescroll.num == 1) list.value = [] // 第一页需手动制空列表
list.value = list.value.concat(curPageData); //追加新数据 list.value = list.value.concat(curPageData) //追加新数据
//联网成功的回调,隐藏下拉刷新和上拉加载的状态; //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据; //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
@ -432,12 +555,13 @@ const upCallback = (mescroll) => {
//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false) //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据. //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载 mescroll.endSuccess(curPageData.length) // 请求成功, 结束加载
}).catch((err) => {
console.error(err);
mescroll.endErr(); // 请求失败, 结束加载
}) })
}; .catch((err) => {
console.error(err)
mescroll.endErr() // 请求失败, 结束加载
})
}
</script> </script>
<style lang="scss"> <style lang="scss">
@ -518,7 +642,7 @@ const upCallback = (mescroll) => {
.guess-btn { .guess-btn {
margin: 0; margin: 0;
width: 132px; width: 132px;
background-color: #1D2B5C; background-color: #1d2b5c;
color: #fff; color: #fff;
border-radius: 50px; border-radius: 50px;
height: 36px; height: 36px;
@ -526,7 +650,7 @@ const upCallback = (mescroll) => {
} }
.guess-btn.disabled { .guess-btn.disabled {
opacity: .5; opacity: 0.5;
} }
.more-btn { .more-btn {
@ -550,7 +674,7 @@ const upCallback = (mescroll) => {
.news-title-box { .news-title-box {
padding-left: 12px; padding-left: 12px;
border-left: 4px solid #D8524C; border-left: 4px solid #d8524c;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
@ -618,120 +742,120 @@ const upCallback = (mescroll) => {
} }
} }
.guess-model { // .guess-model {
.slot-content { // .slot-content {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
gap: 12px; // gap: 12px;
} // }
.guess-title { // .guess-title {
width: 100%; // width: 100%;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
gap: 58px; // gap: 58px;
} // }
.guess-table { // .guess-table {
width: 100%; // width: 100%;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
font-size: 12px; // font-size: 12px;
.table-td { // .table-td {
border: 1px solid #bbb; // border: 1px solid #bbb;
width: 48px !important; // width: 48px !important;
} // }
.table-td.active { // .table-td.active {
background-color: #1D2B5C; // background-color: #1d2b5c;
color: #fff; // color: #fff;
} // }
.row-1 { // .row-1 {
height: calc(30px * 1 - 2px) !important; // height: calc(30px * 1 - 2px) !important;
line-height: calc(30px * 1 - 2px) !important; // line-height: calc(30px * 1 - 2px) !important;
} // }
.row-2 { // .row-2 {
height: calc(30px * 2 - 2px) !important; // height: calc(30px * 2 - 2px) !important;
line-height: calc(30px * 2 - 2px) !important; // line-height: calc(30px * 2 - 2px) !important;
} // }
.row-3 { // .row-3 {
height: calc(30px * 3 - 8px) !important; // height: calc(30px * 3 - 8px) !important;
line-height: calc(30px * 3 - 8px) !important; // line-height: calc(30px * 3 - 8px) !important;
} // }
.row { // .row {
width: 300px; // width: 300px;
height: 30px; // height: 30px;
line-height: 30px; // line-height: 30px;
flex-shrink: 0; // flex-shrink: 0;
display: flex; // display: flex;
text-align: center; // text-align: center;
.col-1 { // .col-1 {
width: calc(292px / 12 * 1); // width: calc(292px / 12 * 1);
} // }
.col-2 { // .col-2 {
width: calc(292px / 12 * 2); // width: calc(292px / 12 * 2);
} // }
.col-10 { // .col-10 {
display: flex; // display: flex;
justify-content: flex-start; // justify-content: flex-start;
align-self: flex-start; // align-self: flex-start;
flex-grow: 1; // flex-grow: 1;
.table-td { // .table-td {
width: 47.7px !important; // width: 47.7px !important;
border: 1px solid #bbb; // border: 1px solid #bbb;
} // }
.col-6 { // .col-6 {
width: calc(47.7px * 3 + 4px) !important; // width: calc(47.7px * 3 + 4px) !important;
} // }
} // }
.col-12 { // .col-12 {
width: 292px; // width: 292px;
} // }
} // }
.herder-title { // .herder-title {
background-color: #1D2B5C; // background-color: #1d2b5c;
color: #fff; // color: #fff;
.table-td { // .table-td {
width: 100% !important; // width: 100% !important;
} // }
} // }
.row-title { // .row-title {
background-color: #D9D9D9; // background-color: #d9d9d9;
width: 48px !important; // width: 48px !important;
justify-content: center !important; // justify-content: center !important;
} // }
.row-content { // .row-content {
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
width: calc(300px - 48px - 3px) !important; // width: calc(300px - 48px - 3px) !important;
} // }
} // }
.guess-btns { // .guess-btns {
display: flex; // display: flex;
justify-content: space-around; // justify-content: space-around;
width: 300px; // width: 300px;
flex-shrink: 0; // flex-shrink: 0;
} // }
} // }
</style> </style>

8
yarn.lock
View File

@ -5045,10 +5045,10 @@ utils-merge@1.0.1:
resolved "https://mirrors.cloud.tencent.com/npm/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" resolved "https://mirrors.cloud.tencent.com/npm/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA== integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
uview-plus@^3.1.41: uview-plus@^3.3.4:
version "3.2.22" version "3.3.4"
resolved "https://mirrors.cloud.tencent.com/npm/uview-plus/-/uview-plus-3.2.22.tgz#579320499be2a75f4becde8f928a11cc52374821" resolved "https://registry.npmmirror.com/uview-plus/-/uview-plus-3.3.4.tgz#9aa745de6292a067d8afde380f8a719c355eebc1"
integrity sha512-ouhq0CCGP/ElR7eCCu0rBFNPTGW/EctcrxKIerjj1DOkEIY9BwKBbdI0VTSSkMFnr6RFejSQLBw/aKkqd6Q+7g== integrity sha512-WSh4sGdSzam7rtNuUIxIOm+O7+3gNm0O25JFv2BUkAAuLimdic17c2Xg7VpVdd2yhAGcVYMTrD5u4dJb8he02A==
dependencies: dependencies:
clipboard "^2.0.11" clipboard "^2.0.11"
dayjs "^1.11.3" dayjs "^1.11.3"