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

添加竞猜记录

hui.zhou
ihzero 2024-06-25 00:08:38 +08:00
parent e7331af0e8
commit cffddd124c
8 changed files with 154 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -132,6 +132,12 @@ button::after {
margin-bottom: 16px;
}
.card-shadow {
background: #ffffff;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
border-radius: 20rpx;
}
// 公共样式封装
.board {
border-radius: 6px;

12
src/components/quiz/item-new.vue
View File

@ -9,9 +9,11 @@
})
"
>
<view class="w-84rpx h-84rpx rounded-full flex-none">
<up-avatar size="84rpx" mode="aspectFit" :src="data.avatar"></up-avatar>
</view>
<up-avatar
:size="`70rpx`"
mode="aspectFit"
:src="data.avatar"
></up-avatar>
<view class="ml-10rpx flex-1">
<view class="flex-1 flex justify-between items-center">
<view class="text-28rpx text-primary">{{ data.nick_name }}</view>
@ -20,8 +22,8 @@
<view class="flex items-center text-sm">
<view class="flex items-center flex-1">
<view>猜</view>
<view class="px-3">
{{ data.game_home_field }} VS {{ data.game_away }}
<view class="px-2">
<text class="font-medium">{{ data.game_home_field }}</text> vs <text class="font-medium">{{ data.game_away }}</text>
</view>
<view>{{ data.score }}</view>
</view>

31
src/components/quiz/item.vue
View File

@ -1,18 +1,25 @@
<template>
<view class="text-sm">
<view class="text-sm text-hex-333">
<view class="p-3">
<view>{{ data.game_day }} {{ data.game_name }}</view>
<view class="grid grid-cols-2 mt-2">
<view class="grid grid-cols-3 mr-20rpx">
<view>{{ data.game_home_field }}</view>
<view class="text-center">VS</view>
<view class="text-right">{{ data.game_away }}</view>
</view >
<view class="grid grid-cols-2 ml-40rpx">
<view>{{ data.score }}</view>
<view :style="{ color: currentStatus.color }" class="text-right">{{
currentStatus.label
}}</view>
<view class="flex mt-2">
<view class="flex-1">
<view class="flex">
<!-- <view >{{ data.game_home_field }}</view>
<view class="text-center mx-10rpx">vs</view>
<view class="text-right">{{ data.game_away }}</view> -->
<view class="flex-1 text-center">{{ data.game_home_field }}</view>
<view class="text-center mx-10rpx">vs</view>
<view class="flex-1 text-center">{{ data.game_away }}</view>
</view>
</view>
<view class="w-200rpx flex ml-20rpx">
<view class="w-100rpx text-center">{{ data.score }}</view>
<view
:style="{ color: currentStatus.color }"
class="text-right flex-1"
>{{ currentStatus.label }}</view
>
</view>
</view>
</view>

4
src/packages/pages/activeDetail/activeDetail.vue
View File

@ -216,6 +216,8 @@
:key="index"
:data="item"
></Item>
<mescroll-empty v-if="!activeLogs.length"></mescroll-empty>
</view>
</view>
</view>
@ -1018,7 +1020,7 @@ onLoad((query) => {
const handleGameRank = (e) => {
vm.proxy.$goToPage({
url: 'pages/quiz/logs',
params: { activity_id: detailId.value },
params: { activity_id: detailId.value, user_id: e.user_id },
})
}
</script>

2
src/pages.json
View File

@ -46,7 +46,7 @@
},{
"path":"pages/quiz/logs",
"style": {
"navigationBarTitleText": "活动详情"
"navigationBarTitleText": "竞猜记录"
}
}
],

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

@ -216,6 +216,8 @@
:key="index"
:data="item"
></Item>
<mescroll-empty v-if="!activeLogs.length"></mescroll-empty>
</view>
</view>
</view>
@ -1018,7 +1020,7 @@ onLoad((query) => {
const handleGameRank = (e) => {
vm.proxy.$goToPage({
url: 'pages/quiz/logs',
params: { activity_id: detailId.value },
params: { activity_id: detailId.value, user_id: e.user_id },
})
}
</script>

34
src/pages/my/index.vue
View File

@ -3,8 +3,8 @@
<view class="phone-warp">
<view class="text-sm">人工客服</view>
<view style="margin-top: 10rpx">
<up-text mode="phone" call text="400-9915-666"></up-text>
</view>
<up-text mode="phone" call text="400-9915-666"></up-text>
</view>
</view>
</view>
<mescroll-body
@ -42,8 +42,12 @@
/>
</div>
</view>
<view v-for="(block, index) in menus" :key="index">
<view class="block-box bg-white rounded-4px">
<view class="space-y-3">
<view
v-for="(block, index) in menus"
:key="index"
class="card-shadow overflow-hidden px-30rpx"
>
<view v-for="(item, index) in block" :key="index">
<view
class="flex text-primary items-center cell text-base"
@ -55,7 +59,10 @@
<text class="text">{{ item.text }}</text>
<text class="extra" v-if="item.extra">{{ item.extra }}</text>
</view>
<image class="icon" src="@/static/icons/arrow.svg" />
<image
class="w-30rpx h-30rpx opacity-50"
src="@/static/icons/arrow.svg"
/>
</view>
<view
@ -223,18 +230,17 @@ const upCallback = (mescroll) => {
// #ifdef H5
bottom: 180rpx;
// #endif
z-index: 9999;
z-index: 9999;
left: 0;
width: 100%;
&-warp{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
width: 100%;
&-warp {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.icon {
width: 20px;
height: 20px;

104
src/pages/quiz/logs.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="">
<view class="bg-hex-1b2f85">
<mescroll-body
@init="mescrollInit"
@down="downCallback"
@ -20,24 +20,65 @@
mode="widthFix"
:src="`${config.baseUrl}/images/mini-bg.jpg`"
></image>
<view class="relative text-white space-x-2">
<view class="text-base">{{ detail.name }}</view>
<view class="text-xs mt-3">{{
dayjs(detail.start_at).format('YYYY-MM-DD')
}}</view>
<view class="relative text-white">
<view class="flex justify-between">
<view class="text-base font-medium">{{ detail.name }}</view>
<view class="text-xs" @click="showRuleModal">活动规则</view>
</view>
<view class="text-sm mt-3 font-medium"
>{{ dayjs(detail.start_at).format('YYYY-MM-DD') }}至{{
dayjs(detail.end_at).format('YYYY-MM-DD')
}}
</view>
</view>
<view class="bg-white rounded-12px relative mt-4">
<view class="bg-white rounded-12px relative mt-4 min-h-40vh">
<view class="px-3 pt-16rpx">
<CTitle title="他的战绩"></CTitle>
<CTitle title="他的竞猜"></CTitle>
</view>
<view class="">
<Item v-for="(item, i) in list" :key="i" :data="item"></Item>
<mescroll-empty v-if="!list.length"></mescroll-empty>
<view class="flex-center py-30rpx" v-else> </view>
</view>
</view>
</view>
</view>
</mescroll-body>
<view class="h-160rpx">
<view
class="fixed bottom-50rpx h-100rpx flex left-0 w-full justify-center items-center box-content"
>
<up-button
class="guess-btn"
:disabled="false"
shape="circle"
:customStyle="{
margin: 0,
width: '132px',
backgroundColor: '#1D2B5C',
color: '#fff',
opacity: 1,
}"
@click="goActiveDetail"
>立即参与竞猜</up-button
>
</view>
</view>
<up-modal
:show="showRuleModalVisible"
:width="335"
:closeOnClickOverlay="true"
:showConfirmButton="false"
:showCancelButton="false"
@close="hideRuleModal"
>
<view class="slot-content-rule">
<view class="title">活动规则</view>
<view class="content">{{ detail.rules }}</view>
</view>
</up-modal>
</view>
</template>
<script setup>
@ -48,11 +89,14 @@ import { queryActivitiesDetail, activityGameLogs } from '@/api/xinjiang_guess'
import Item from '@/components/quiz/item.vue'
import CTitle from '@/components/c-title/index.vue'
import config from '@/common/config'
import { ref } from 'vue'
import { ref, getCurrentInstance } from 'vue';
import useAuthUser from '@/utils/hooks/useAuthUser';
const vm = getCurrentInstance();
const activityId = ref(null)
const userId = ref(null)
const detail = ref({})
const list = ref([])
const showRuleModalVisible = ref(false)
const { mescrollInit, downCallback, getMescroll } = useMescroll(
onPageScroll,
onReachBottom
@ -89,4 +133,46 @@ const getActiveDetail = async () => {
detail.value = resData.data
} catch (error) {}
}
const showRuleModal = async () => {
showRuleModalVisible.value = true
}
const hideRuleModal = async () => {
showRuleModalVisible.value = false
}
function goActiveDetail() {
const { user } = useAuthUser();
if (user.is_need_bind_phone) {
vm.proxy.$goToPage('packages/pages/login/login?previous=index');
return;
}
vm.proxy.$goToPage({
url: 'packages/pages/activeDetail/activeDetail',
params: {
id: activityId.value
}
})
}
</script>
<style lang="scss" scoped>
.slot-content-rule {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
.title {
font-size: 16px;
font-weight: 500;
}
.content {
font-size: 12px;
font-weight: 400;
white-space: pre-wrap;
}
}
</style>