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-toutiao": "uni -p mp-toutiao",
"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:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
@ -60,7 +61,7 @@
"pinia": "2.0.33",
"pinia-plugin-persistedstate": "^3.2.1",
"tiny-emitter": "^2.1.0",
"uview-plus": "^3.1.41",
"uview-plus": "^3.3.4",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9",
"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')
detailLoading.false = false
detailId.value = res.data.activity.id
resolve(detail)
})
.catch((err) => {

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

File diff suppressed because it is too large Load Diff

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"
integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
uview-plus@^3.1.41:
version "3.2.22"
resolved "https://mirrors.cloud.tencent.com/npm/uview-plus/-/uview-plus-3.2.22.tgz#579320499be2a75f4becde8f928a11cc52374821"
integrity sha512-ouhq0CCGP/ElR7eCCu0rBFNPTGW/EctcrxKIerjj1DOkEIY9BwKBbdI0VTSSkMFnr6RFejSQLBw/aKkqd6Q+7g==
uview-plus@^3.3.4:
version "3.3.4"
resolved "https://registry.npmmirror.com/uview-plus/-/uview-plus-3.3.4.tgz#9aa745de6292a067d8afde380f8a719c355eebc1"
integrity sha512-WSh4sGdSzam7rtNuUIxIOm+O7+3gNm0O25JFv2BUkAAuLimdic17c2Xg7VpVdd2yhAGcVYMTrD5u4dJb8he02A==
dependencies:
clipboard "^2.0.11"
dayjs "^1.11.3"