website/src/view/m_views/mine/index.vue

<template>
  <div class="wrap-outer">
    <div class="mob-wrap">
      <m-header/>
      <div v-if="token">
        <div v-if="mineGame.length > 0">
          <div style="padding:15px">
            <mob-list :gameLis="mineGame" :prefix="prefix">
              <template #custom-button="scope">
                <div>
                  <van-button round color="#ed8c0f" @click="showGifts(scope.row)">查看礼包</van-button>
                </div>
              </template>
            </mob-list>
          </div>
          <div style="padding: 10px;background-color: #f7f7f7;"
               class="df aic jcc"
               v-if="params.page * params.pagesize <= mineGame.length">
            <el-button class="df aic jcc" plain @click="loadMore">更多</el-button>
          </div>
          <div v-else>
            <div class="df aic jcc" style="color: #999;height: 100px;font-size: 16px;">----- 没有更多数据了 -----
            </div>
          </div>
        </div>
        <van-empty v-else description="No Data" />
      </div>
      <div v-else :style="{ height: viewWidth + 'px' }" class="df fdc aic jcc">
        <van-empty>
          <van-button color="#ed8c0f" @click="goLogin">去登录 &gt;&gt;</van-button>
        </van-empty>
      </div>
      <van-dialog v-model:show="dialogVisible" title="查看礼包" confirm-button-text="关闭">
        <van-collapse v-if="giftData.length" v-model="activeNames">
          <van-collapse-item v-for="(item, index) in giftData" :key="index" :title="item.gift_name" :name="item.id">
            <template #value>
              <van-button :disabled="item.user_get_at !== ''" round color="#ed8c0f" @click="receiveGift(item.id)">领取礼包</van-button>
            </template>
            <van-cell-group>
              <van-cell value-class="value-length" center size="large" title="礼包内容：" :value="item.gift_content">
                <template #value>
                  <div style="text-align: left;">
                    {{ item.gift_content }}
                  </div>
                </template>
              </van-cell>
              <van-cell value-class="value-length" center size="large" title="使用方法：" :value="item.usage">
                <template #value>
                  <div style="text-align: left;">
                    {{ item.usage }}
                  </div>
                </template>
              </van-cell>
              <van-cell value-class="value-length" center size="large" title="有效期：" :value="item.start_at+'-'+item.end_at">
                <template #value>
                  <div style="text-align: left;">
                    {{ item.start_at+'-'+item.end_at }}
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-collapse-item>

        </van-collapse>
        <van-empty v-else description="暂无礼包" />
      </van-dialog>
      <van-back-top style="background-color: #ed8c0f;" />
      <!-- <m_footer></m_footer> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { getMineGame, getGiftHttp, receiveGiftHttp } from '@/api/index'

import { useRouter, useRoute } from 'vue-router'
import MobList from '@/components/MobList.vue'
import { useStore } from '@/store/index'
import { showSuccessToast } from 'vant'

const router = useRouter()
const route = useRoute()

const mineGame: any = ref([])
const prefix = ref<string>('')
const total = ref<number>(0)
const isLoading = ref<boolean>(true)
const viewWidth = ref<number>(document.documentElement.clientHeight - 100)
const userAccount = ref<string | null>(localStorage.getItem('account'))
const token = ref<string | null>(localStorage.getItem('token'))
const user = useStore('user')

interface Params {
    page: number,
    pagesize: number,
    account: string | null
}
const params = reactive<Params>({
  page: 1,
  pagesize: 10,
  account: userAccount.value
})

onMounted(() => {
  // 进入页面刷新一次
  if (token.value) {
    if (route.query.account || userAccount.value) {
      // if (location.href.indexOf("#reloaded") === -1) {
      //     location.href = location.href + "#reloaded";
      //     location.reload();
      // }
      getMyGame(params)
    } else {
      userAccount.value = ''
    }
  }
  user.getUserProfile()
})

const getMyGame = async(params) => {
  // console.log('params', params);
  await getMineGame(params).then(res => {
    // console.log('res========>', res);
    if (res.data.code === 200 && res.data.data) {
      mineGame.value = mineGame.value.concat(res.data.data.lists)
      prefix.value = res.data.data.prefix
      total.value = res.data.data.total
      isLoading.value = false
    }
  }).catch(err => {
    // Message.error(err.data)
    console.log(err.data)
  })
}

// 加载更多
const loadMore = () => {
  params.page += 1
  getMyGame(params)
}

const goLogin = () => {
  router.push({ path: 'm_login' })
}
const giftData = ref<any[]>([])
const activeNames = ref(['1'])
const dialogVisible = ref<boolean>(false)
const showGifts = async(row:any) => {
  await getGiftHttp({ game_id: row.game_id }).then((res) => {
    // console.log(res.data.data)
    giftData.value = res.data.data || []
    dialogVisible.value = true
  }).catch((error) => {
    console.log(error)
    showSuccessToast(error.data.msg)
  })
}
const receiveGift = async(id:number) => {
  await receiveGiftHttp({ id }).then((res) => {
    console.log(res)
    showSuccessToast(res.data.msg)
    dialogVisible.value = false
  }).catch((error) => {
    console.log(error)
    showSuccessToast(error.data.msg)
  })
}
</script>

<style scoped lang="scss">
.game_list {
    box-sizing: border-box;
    padding: 20px;
    background-color: #fff;
    margin: 0 auto 20px;

    h3 {
        font-size: 22px;
        font-weight: normal;
        height: 30px;
    }
}

.more {
    margin: 20px auto 0;
    height: 60px;
    background-color: #f7f7f7;

    .el-button {
        width: 100px;
        height: 40px;
        background-color: transparent;
        color: #323332;
        border: 1px solid #c7c7c7;
    }
}

</style>
<style>
.value-length{
    flex: 2!important;
}
</style>