guessing-miniprogram-fortend/src/pages/quiz/logs.vue

<template>
  <view class="bg-hex-1b2f85">
    <mescroll-body
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :up="{
        empty: {
          use: false,
        },
      }"
    >
      <view>
        <view class="h-188px w-full" v-if="detail.cover">
          <image class="w-full" mode="aspectFill" :src="detail.cover" />
        </view>
        <view class="min-h-screen relative bg-hex-1b2f85 p-3">
          <image
            class="absolute left-0 w-full top-0"
            mode="widthFix"
            :src="`${config.baseUrl}/images/mini-bg.jpg`"
          ></image>
          <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 min-h-40vh">
            <view class="px-3 pt-16rpx">
              <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>
import dayjs from 'dayjs'
import { onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
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, 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
)

onLoad((query) => {
  activityId.value = query.activity_id
  userId.value = query.user_id
})

const upCallback = async (mescroll) => {
  const { size, num } = mescroll
  if (num === 1) getActiveDetail()
  try {
    const resData = await activityGameLogs({
      user_id: userId.value,
      activity_id: activityId.value,
      per_page: size,
      page: num,
    })
    const arr = resData.data.list || [] // 当前页数据
    if (num == 1) list.value = [] //如果是第一页需手动制空列表
    list.value = list.value.concat(arr) //追加新数据
    mescroll.endSuccess(arr.length) // 请求成功, 结束加载
  } catch (error) {
    mescroll.endErr()
    console.log(error)
  }
}

const getActiveDetail = async () => {
  try {
    const resData = await queryActivitiesDetail({ id: activityId.value })
    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>