645 lines
19 KiB
Vue
645 lines
19 KiB
Vue
<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>
|
|
<view
|
|
:class="[successGuessClass, readonly ? 'pointer-events-none' : '']"
|
|
>
|
|
<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="{
|
|
'result-active': gameScore === '1:0',
|
|
active: userGuess === '1:0',
|
|
}"
|
|
@click="userGuessChange('1:0')"
|
|
>1:0</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '2:0',
|
|
active: userGuess === '2:0',
|
|
}"
|
|
@click="userGuessChange('2:0')"
|
|
>2:0</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '2:1',
|
|
active: userGuess === '2:1',
|
|
}"
|
|
@click="userGuessChange('2:1')"
|
|
>2:1</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '3:0',
|
|
active: userGuess === '3:0',
|
|
}"
|
|
@click="userGuessChange('3:0')"
|
|
>3:0</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '3:1',
|
|
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="{
|
|
'result-active': gameScore === '3:2',
|
|
active: userGuess === '3:2',
|
|
}"
|
|
@click="userGuessChange('3:2')"
|
|
>3:2</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '4:0',
|
|
active: userGuess === '4:0',
|
|
}"
|
|
@click="userGuessChange('4:0')"
|
|
>4:0</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '4:1',
|
|
active: userGuess === '4:1',
|
|
}"
|
|
@click="userGuessChange('4:1')"
|
|
>4:1</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '4:2',
|
|
active: userGuess === '4:2',
|
|
}"
|
|
@click="userGuessChange('4:2')"
|
|
>4:2</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '5:0',
|
|
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="{
|
|
'result-active': gameScore === '5:1',
|
|
active: userGuess === '5:1',
|
|
}"
|
|
@click="userGuessChange('5:1')"
|
|
>5:1</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '5:2',
|
|
active: userGuess === '5:2',
|
|
}"
|
|
@click="userGuessChange('5:2')"
|
|
>5:2</view
|
|
>
|
|
<view
|
|
class="table-td col-6"
|
|
:class="{
|
|
'result-active': gameScore === '胜其他',
|
|
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="{
|
|
'result-active': gameScore === '0:0',
|
|
active: userGuess === '0:0',
|
|
}"
|
|
@click="userGuessChange('0:0')"
|
|
>0:0</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '1:1',
|
|
active: userGuess === '1:1',
|
|
}"
|
|
@click="userGuessChange('1:1')"
|
|
>1:1</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '2:2',
|
|
active: userGuess === '2:2',
|
|
}"
|
|
@click="userGuessChange('2:2')"
|
|
>2:2</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '3:3',
|
|
active: userGuess === '3:3',
|
|
}"
|
|
@click="userGuessChange('3:3')"
|
|
>3:3</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '平其他',
|
|
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="{
|
|
'result-active': gameScore === '0:1',
|
|
active: userGuess === '0:1',
|
|
}"
|
|
@click="userGuessChange('0:1')"
|
|
>0:1</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '0:2',
|
|
active: userGuess === '0:2',
|
|
}"
|
|
@click="userGuessChange('0:2')"
|
|
>0:2</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '0:3',
|
|
active: userGuess === '0:3',
|
|
}"
|
|
@click="userGuessChange('0:3')"
|
|
>0:3</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '0:4',
|
|
active: userGuess === '0:4',
|
|
}"
|
|
@click="userGuessChange('0:4')"
|
|
>0:4</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '0:5',
|
|
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="{
|
|
'result-active': gameScore === '1:2',
|
|
active: userGuess === '1:2',
|
|
}"
|
|
@click="userGuessChange('1:2')"
|
|
>1:2</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '1:3',
|
|
active: userGuess === '1:3',
|
|
}"
|
|
@click="userGuessChange('1:3')"
|
|
>1:3</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '1:4',
|
|
active: userGuess === '1:4',
|
|
}"
|
|
@click="userGuessChange('1:4')"
|
|
>1:4</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '1:5',
|
|
active: userGuess === '1:5',
|
|
}"
|
|
@click="userGuessChange('1:5')"
|
|
>1:5</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '2:3',
|
|
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="{
|
|
'result-active': gameScore === '2:4',
|
|
active: userGuess === '2:4',
|
|
}"
|
|
@click="userGuessChange('2:4')"
|
|
>2:4</view
|
|
>
|
|
<view
|
|
class="table-td col-2"
|
|
:class="{
|
|
'result-active': gameScore === '2:5',
|
|
active: userGuess === '2:5',
|
|
}"
|
|
@click="userGuessChange('2:5')"
|
|
>2:5</view
|
|
>
|
|
<view
|
|
class="table-td col-6"
|
|
:class="{
|
|
'result-active': gameScore === '负其他',
|
|
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="type2 my-30px flex-center">
|
|
<view
|
|
class="h-44px flex bg-hex-eeeeef rounded-8px text-hex-303133"
|
|
>
|
|
<view
|
|
class="text-12px rounded-4px h-full flex"
|
|
:class="{
|
|
'active-a': gameScore === item,
|
|
active: userGuess === item,
|
|
}"
|
|
@click="userGuessChange(item)"
|
|
v-for="(item,index) in subsectionList"
|
|
:key="item"
|
|
>
|
|
<view class="w-80px flex-center h-full">
|
|
{{ item }}
|
|
</view>
|
|
<up-line v-if="index!=subsectionList.length-1" direction="col"></up-line>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<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 gameScore = computed(() => props.gameInfo?.game_score)
|
|
// const gameScore = computed(() => '负')
|
|
const isGuess = computed(() => !!props.gameInfo?.has_guess)
|
|
const isResult = computed(() => !!props.gameInfo?.game_score)
|
|
const successGuess = computed(
|
|
() => gameScore.value === props.gameInfo?.has_guess
|
|
)
|
|
const successGuessClass = computed(() => {
|
|
if (!isGuess.value) {
|
|
return ''
|
|
}
|
|
if (!isResult.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 = () => {
|
|
if (userGuess.value === '' || !userGuess.value) {
|
|
return uni.showToast({
|
|
title: '请选择竞猜结果',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
|
|
emit('submitGuessResult', userGuess.value)
|
|
}
|
|
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: #1d2b5c !important;
|
|
color: white;
|
|
}
|
|
}
|
|
.active-a {
|
|
background-color: red !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.result-active {
|
|
background-color: red;
|
|
color: #fff;
|
|
}
|
|
|
|
.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>
|