ESLINT FIX

.env.development

@@ -1,5 +1,6 @@
 ENV = development,
 VITE_PROJECT_NAME = 朱雀游戏中心
-VITE_API_HOST = http://gm.coolpad.nkfzs.com/api/web
+# VITE_API_HOST = http://gm.coolpad.nkfzs.com/api/web
+VITE_API_HOST = http://gm.rose.nei.nkfzs.com/api/web
 VITE_LOGO_VISIBLE: 'QingQue'
 # VITE_LOGO_VISIBLE: 'KuPai'

.env.production

@@ -1,5 +1,6 @@
 ENV = production,
 VITE_PROJECT_NAME = 朱雀游戏中心
 VITE_API_HOST = http://gm.nkfzs.com/api/web
+# VITE_API_HOST = http://gm.rose.nei.nkfzs.com/api/web
 VITE_LOGO_VISIBLE: 'QingQue'
 # VITE_LOGO_VISIBLE: 'KuPai'

.eslintrc.cjs

@@ -9,9 +9,10 @@ module.exports = {
     'plugin:@typescript-eslint/recommended'
   ],
   'overrides': [],
-  'parser': '@typescript-eslint/parser',
+  'parser': 'vue-eslint-parser',
   'parserOptions': {
     'ecmaVersion': 'latest',
+    'parser':'@typescript-eslint/parser',
     'sourceType': 'module'
   },
   'plugins': [

prettier.config.js

@@ -1,20 +1,19 @@
 module.exports = {
-    printWidth: 100,
-    tabWidth: 2,
-    semi: true,
-    vueIndentScriptAndStyle: true,
-    singleQuote: false,
-    quoteProps: "as-needed",
-    bracketSpacing: true,
-    jsxBracketSameLine: false,
-    jsxSingleQuote: false,
-    arrowParens: "always",
-    insertPragma: false,
-    requirePragma: false,
-    proseWrap: "never",
-    htmlWhitespaceSensitivity: "strict",
-    endOfLine: "auto",
-    rangeStart: 0,
-  };
-  
-  
+  printWidth: 100,
+  tabWidth: 2,
+  semi: true,
+  vueIndentScriptAndStyle: true,
+  singleQuote: false,
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+  rangeStart: 0
+}
+

src/App.vue

@@ -1,11 +1,11 @@
 <template>
-  <router-view></router-view>
+  <router-view/>
 
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router'
 import { throttle } from './utils/throttle'
 
 const route = useRoute()
@@ -16,7 +16,7 @@ onMounted(() => {
   // 计算屏幕宽度决定pc还是移动端
   throttle(resizeChange(), 200)
   window.addEventListener('resize', resizeChange, false)
-  window.addEventListener("resize", setRem, false)
+  window.addEventListener('resize', setRem, false)
 })
 
 const resizeChange = () => {
@@ -33,16 +33,16 @@ const resizeChange = () => {
   }
 }
 const setRem = () => {
-  const pWidth = 750;
-  const pre = 100;
-  const windowWidth = document.documentElement.clientWidth;
-  document.documentElement.style.fontSize = (windowWidth / pWidth) * pre + 'px';
+  const pWidth = 750
+  const pre = 100
+  const windowWidth = document.documentElement.clientWidth
+  document.documentElement.style.fontSize = (windowWidth / pWidth) * pre + 'px'
   // console.log('rem适配：', windowWidth, (windowWidth / pWidth) * pre + 'px');
 }
 
 onUnmounted(() => {
   window.removeEventListener('resize', resizeChange, false)
-  window.removeEventListener("resize", setRem, false)
+  window.removeEventListener('resize', setRem, false)
 })
 </script>
 
@@ -64,4 +64,4 @@ input::-webkit-outer-spin-button,
    input[type="number"] {
     -moz-appearance: textfield;
    }
-</style>
+</style>

src/api/index.ts

@@ -3,185 +3,185 @@ import request from '@/common/request'
 
 // 热门游戏（有参数）
 export const getGameHot = (params:any) => {
-    return request({
-        url: '/game/hot',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/game/hot',
+    method: 'get',
+    params
+  })
 }
 export const getIndexGameHot = () => {
-    return request({
-        url: '/game/hot',
-        method: 'get'
-    })
+  return request({
+    url: '/game/hot',
+    method: 'get'
+  })
 }
 // 游戏推荐（有参数）
 export const getGameRecommand = (params:any) => {
-    return request({
-        url: '/game/recommand',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/game/recommand',
+    method: 'get',
+    params
+  })
 }
 export const getIndexGameRecommand = () => {
-    return request({
-        url: '/game/recommand',
-        method: 'get'
-    })
+  return request({
+    url: '/game/recommand',
+    method: 'get'
+  })
 }
 // 游戏列表
 export const getGameList = (params:any) => {
-    return request({
-        url: '/game/list',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/game/list',
+    method: 'get',
+    params
+  })
 }
 export const getGameLis = () => {
-    return request({
-        url: '/game/list',
-        method: 'get'
-    })
+  return request({
+    url: '/game/list',
+    method: 'get'
+  })
 }
 // 用户登录
 export const getUserLogin = (data:any) => {
-    return request({
-        url: '/user/login',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/user/login',
+    method: 'post',
+    data
+  })
 }
 // 我的游戏
 export const getMineGame = (params:any) => {
-    return request({
-        url: '/game/mine',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/game/mine',
+    method: 'get',
+    params
+  })
 }
 // 游戏标签
 export const getGameTag = () => {
-    return request({
-        url: '/game/tag',
-        method: 'get',
-    })
+  return request({
+    url: '/game/tag',
+    method: 'get'
+  })
 }
 // 游戏类型
 export const getGameType = () => {
-    return request({
-        url: '/game/type',
-        method: 'get',
-    })
+  return request({
+    url: '/game/type',
+    method: 'get'
+  })
 }
 // 验证码
 export const getCaptchaHttp = <T>(data:T) => {
-    return request({
-        url: '/user/captcha',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/user/captcha',
+    method: 'post',
+    data
+  })
 }
 // 验证码登录
 export const captchaLogin = <T>(data:T) => {
-    return request({
-        url: 'user/captcha_login',
-        method: 'post',
-        data
-    })
+  return request({
+    url: 'user/captcha_login',
+    method: 'post',
+    data
+  })
 }
 // 用户信息
 export const userProfile = <T>(params:T) => {
-    return request({
-        url: 'user/profile',
-        method: 'get',
-        params
-    })
+  return request({
+    url: 'user/profile',
+    method: 'get',
+    params
+  })
 }
 // 更改密码
 export const resetPassword = <T>(data:T) => {
-    return request({
-        url: '/user/reset_password',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/user/reset_password',
+    method: 'post',
+    data
+  })
 }
 // 更改密码
 export const setPassword = <T>(data:T) => {
-    return request({
-        url: '/user/set_password',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/user/set_password',
+    method: 'post',
+    data
+  })
 }
 // 用户名更改
 export const userAccount = <T>(data:T) => {
-    return request({
-        url: '/user/account',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/user/account',
+    method: 'post',
+    data
+  })
 }
 // 用户名更改
 export const getGiftHttp = <T>(params:T) => {
-    return request({
-        url: '/game/gift',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/game/gift',
+    method: 'get',
+    params
+  })
 }
 export const receiveGiftHttp = <T>(data:T) => {
-    return request({
-        url: '/game/tera',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/game/tera',
+    method: 'post',
+    data
+  })
 }
 export const userOrder = <T>(params:T) => {
-    return request({
-        url: '/user/order',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/user/order',
+    method: 'get',
+    params
+  })
 }
 export const userEcoin = <T>(params:T) => {
-    return request({
-        url: '/user/ecoin',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/user/ecoin',
+    method: 'get',
+    params
+  })
 }
 export const userNcoin = <T>(params:T) => {
-    return request({
-        url: '/user/ncoin',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/user/ncoin',
+    method: 'get',
+    params
+  })
 }
 export const unbindCaptcha = <T>(params?:T) => {
-    return request({
-        url: '/user/unbind_captcha',
-        method: 'get',
-        params
-    })
+  return request({
+    url: '/user/unbind_captcha',
+    method: 'get',
+    params
+  })
 }
 export const clearMobile = <T>(data:T) => {
-    return request({
-        url: '/user/clear_mobile',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/user/clear_mobile',
+    method: 'post',
+    data
+  })
 }
 export const bindCaptcha = <T>(data:T) => {
-    return request({
-        url: '/user/bind_captcha',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/user/bind_captcha',
+    method: 'post',
+    data
+  })
 }
 export const bindMobile = <T>(data:T) => {
-    return request({
-        url: '/user/bind_mobile',
-        method: 'post',
-        data
-    })
-}
+  return request({
+    url: '/user/bind_mobile',
+    method: 'post',
+    data
+  })
+}

src/common/request.ts

@@ -5,31 +5,31 @@ import Message from '@/utils/Message'
 const api = import.meta.env.VITE_API_HOST
 
 const instance = axios.create({
-    baseURL: api
+  baseURL: api
 })
 
 // 请求拦截器
 instance.interceptors.request.use((config:any) => {
-    config.headers['Authorization'] = localStorage.getItem('token')
-    return config
+  config.headers['Authorization'] = localStorage.getItem('token')
+  return config
 }, err => {
-    return Promise.reject(err)
+  return Promise.reject(err)
 })
 
 // 响应拦截器
 instance.interceptors.response.use(response => {
-    return response
+  return response
 }, err => {
-    if (err.response.status === 401) {
-        localStorage.removeItem('token')
-        Message.error('登录状态已失效！请重新登录！')
-        setTimeout(() => {
-            let isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)
-            router.push({ path: isMobile?'/m_login':'/p_login' })
-        }, 1000)
-    }
-    return Promise.reject(err.response)
+  if (err.response.status === 401) {
+    localStorage.removeItem('token')
+    Message.error('登录状态已失效！请重新登录！')
+    setTimeout(() => {
+      const isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)
+      router.push({ path: isMobile ? '/m_login' : '/p_login' })
+    }, 1000)
+  }
+  return Promise.reject(err.response)
 })
 
 // 导出工具函数
-export default instance
+export default instance

src/components/Footer.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="footer df aic jcc">
-        尾部内容
-    </div>
+  <div class="footer df aic jcc">
+    尾部内容
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -13,4 +13,4 @@
     height: 60px;
     background-color: #ddd;
 }
-</style>
+</style>

src/components/IndexList.vue

@@ -1,34 +1,36 @@
 <template>
-    <div v-if="(props.list?.length > 0)" class="list_cont">
-        <div v-for="(item, index) in props.list" :key="('' + item.game_id + index)" class="list df aic jcsb"
-            :class="{ lastStyle: index === props.list.length - 1 }">
-            <div class="left_cont df aic" style="width: 65%;">
-                <img class="left_img" :src="props.prefix + item.logopic">
-                <div class="right_content" style="width:70%">
-                    <h3 class="title df">
-                        <span class="game_title elli">{{ item.screen_name }}
-                        </span>
-                        <span class="game_rate">{{ (item.game_score / 10) > 5 ? '5.0' : (item.game_score /
-                                10).toFixed(1)
-                        }}</span>
-                    </h3>
-                    <p class="elli">{{ item.sketch || '暂无简介' }}</p>
-                    
-                    <div>
-                        <el-button :disabled="item.download_url === '' ? true : false" @click="downGame(item.download_url)" color="#ed8c0f" class="downMB" :icon="Download">
-                        {{ bytesChange(item.size) }}
-                        </el-button>
-                        <slot name="custom-button" :row="item"></slot>
-                    </div>
-                </div>
-            </div>
-            <img class="right_img" :src="props.prefix + item.screenshot" />
+  <div v-if="(props.list?.length > 0)" class="list_cont">
+    <div v-for="(item, index) in props.list"
+         :key="('' + item.game_id + index)"
+         class="list df aic jcsb"
+         :class="{ lastStyle: index === props.list.length - 1 }">
+      <div class="left_cont df aic" style="width: 65%;">
+        <img class="left_img" :src="props.prefix + item.logopic"/>
+        <div class="right_content" style="width:70%">
+          <h3 class="title df">
+            <span class="game_title elli">{{ item.screen_name }}
+            </span>
+            <span class="game_rate">{{ (item.game_score / 10) > 5 ? '5.0' : (item.game_score /
+              10).toFixed(1)
+            }}</span>
+          </h3>
+          <p class="elli">{{ item.sketch || '暂无简介' }}</p>
 
+          <div>
+            <el-button :disabled="item.download_url === '' ? true : false" @click="downGame(item.download_url)" color="#ed8c0f" class="downMB" :icon="Download">
+              {{ bytesChange(item.size) }}
+            </el-button>
+            <slot name="custom-button" :row="item"/>
+          </div>
         </div>
+      </div>
+      <img class="right_img" :src="props.prefix + item.screenshot" />
+
     </div>
-    <div v-else>
-        <el-empty description="No Data" />
-    </div>
+  </div>
+  <div v-else>
+    <el-empty description="No Data" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -36,14 +38,14 @@ import { Download } from '@element-plus/icons-vue'
 import { bytesChange } from '@/utils/bytesFormatter'
 
 const props: any = defineProps({
-    list: Array,
-    prefix: String
+  list: Array,
+  prefix: String
 })
 
 const downGame = (url: string) => {
-    // 下载游戏
-    window.open(url)
-    // window.location.href = url;
+  // 下载游戏
+  window.open(url)
+  // window.location.href = url;
 }
 </script>
 
@@ -71,19 +73,19 @@ const downGame = (url: string) => {
                     font-size: 20px;
                     font-weight: normal;
                     margin-bottom: 20px;
-    
+
                     .game_rate {
                         color: #ed8c0f;
                         margin-left: 10px;
                     }
                 }
-    
+
                 p {
                     font-size: 14px;
                     margin-bottom: 20px;
                     color: #666;
                 }
-    
+
                 .downMB {
                     width: 100px;
                     padding: 0;
@@ -93,7 +95,6 @@ const downGame = (url: string) => {
             }
         }
 
-
     }
 
     .right_img {
@@ -109,4 +110,4 @@ const downGame = (url: string) => {
     padding-bottom: 0 !important;
     margin-bottom: 10px !important;
 }
-</style>
+</style>

src/components/MobCateList.vue

@@ -1,120 +1,135 @@
-<template>
-    <div v-if="(props.gameLis?.length > 0)" class="game_lis">
-        <div class="list_cont df aic jcsb" v-for="(item, index) in props.gameLis" :key="index"
-            :class="{ lastStyle: index === props.gameLis.length - 1 }">
-            <div class="df aic" style="width:80%">
-                <img :src="props.prefix + item.logopic">
-                <div class="game_list df jcsb aic">
-                    <div class=" df fdc" style="width:100%">
-                        <p class="title df aic" style="width:80%">
-                            <span class="title_name elli">{{ item.screen_name }}</span>
-                            <span class="score">{{ (item.game_score / 10) > 5 ? '5.0' : (item.game_score /
-                                    10).toFixed(1)
-                            }}</span>
-                        </p>
-                        <p class="info elli" style="width:80%">{{ item.sketch || '暂无简介' }}</p>
-                        <div class="df fw">
-                            <van-button plain size="mini" class="game_tag" round
-                                v-for="tag in item.tags"><span
-                                    v-for="subTag in props.tagArr.filter(v => { return v.id === tag })">{{ subTag.name
-                                    }}</span>
-                            </van-button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <van-button round :disabled="item.download_url === '' ? true : false" @click="downGame(item.download_url)"
-                color="#ed8c0f" class="downMB">
-                下载
-            </van-button>
-        </div>
-        <!-- <div class="more df aic jcc" style="padding-bottom: 10px;background-color: transparent;" v-if="props.total >= 10">
-            <van-button class="df aic jcc" style="height: 35px;" @click="props.more">更多</van-button>
-        </div> -->
-    </div>
-    <!-- <div v-else>
-        <div class="df aic jcc" style="color: #666;height: 200px;font-size: 22px;">暂无数据</div>
-    </div> -->
-</template>
-
-<script setup lang="ts">
-const props: any = defineProps({
-    gameLis: Array<any>,
-    tagArr: Array<any | undefined>,
-    prefix: String,
-    rank: Boolean,
-    more: Function,
-    total: Number
-})
-const downGame = (url: string) => {
-    // 下载游戏
-    window.open(url)
-    // window.location.href = url;
-}
-</script>
-
-<style scoped lang="scss">
-.game_lis {
-    padding: 10px 15px;
-    box-sizing: border-box;
-}
-
-.list_cont {
-    box-sizing: border-box;
-    margin: 20px 0;
-    border-bottom: 1px solid #eee;
-    padding: 0;
-    padding-bottom: 15px;
-
-    img {
-        width: 80px !important;
-        height: 80px !important;
-        margin-right: 20px;
-    }
-
-    .game_list {
-        width: 90%;
-
-        .title {
-            font-size: 18px;
-            color: #323232;
-
-            .title_name {
-                display: inline-block;
-                margin-right: 10px;
-            }
-
-            .score {
-                color: #ed8c0f;
-            }
-        }
-
-        .info {
-            color: rgba(0, 0, 0, .6);
-            margin: 5px 0;
-            font-size: 14px;
-        }
-
-        .game_tag {
-            // margin-right: 3px;
-            color: #ed8c0f;
-            border-color: #ed8c0f;
-            transform: scale(.8);
-            // padding: 2px 3px;
-        }
-    }
-
-    .downMB {
-        width: 60px;
-        height: 30px;
-        color: #fff;
-        border-color: #ed8c0f;
-    }
-}
-
-.lastStyle {
-    border: none !important;
-    padding-bottom: 0 !important;
-    margin-bottom: 10px !important;
-}
-</style>
+<template>
+  <div v-if="(props.gameLis?.length > 0)" class="game_lis">
+    <div class="list_cont df aic jcsb"
+         v-for="(item, index) in props.gameLis"
+         :key="index"
+         :class="{ lastStyle: index === props.gameLis.length - 1 }">
+      <div class="df aic" style="width:80%">
+        <img :src="props.prefix + item.logopic"/>
+        <div class="game_list df jcsb aic">
+          <div class=" df fdc" style="width:100%">
+            <p class="title df aic" style="width:80%">
+              <span class="title_name elli">{{ item.screen_name }}</span>
+              <span class="score">{{ (item.game_score / 10) > 5 ? '5.0' : (item.game_score /
+                10).toFixed(1)
+              }}</span>
+            </p>
+            <p class="info elli" style="width:80%">{{ item.sketch || '暂无简介' }}</p>
+            <div class="df fw">
+              <van-button
+                plain
+                size="mini"
+                class="game_tag"
+                round
+                v-for="tag in item.tags"
+                :key="tag"
+              >
+                <span
+                  v-for="subTag in props.tagArr.filter(v => { return v.id === tag })"
+                  :key="subTag">
+                  {{ subTag.name}}</span>
+              </van-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <van-button
+        round
+        :disabled="item.download_url === '' ? true : false"
+        @click="downGame(item.download_url)"
+        color="#ed8c0f"
+        class="downMB"
+      >
+        下载
+      </van-button>
+    </div>
+    <!-- <div class="more df aic jcc" style="padding-bottom: 10px;background-color: transparent;" v-if="props.total >= 10">
+            <van-button class="df aic jcc" style="height: 35px;" @click="props.more">更多</van-button>
+        </div> -->
+  </div>
+  <!-- <div v-else>
+        <div class="df aic jcc" style="color: #666;height: 200px;font-size: 22px;">暂无数据</div>
+    </div> -->
+</template>
+
+<script setup lang="ts">
+const props: any = defineProps({
+  gameLis: Array<any>,
+  tagArr: Array<any | undefined>,
+  prefix: String,
+  rank: Boolean,
+  more: Function,
+  total: Number
+})
+const downGame = (url: string) => {
+  // 下载游戏
+  window.open(url)
+  // window.location.href = url;
+}
+</script>
+
+<style scoped lang="scss">
+.game_lis {
+    padding: 10px 15px;
+    box-sizing: border-box;
+}
+
+.list_cont {
+    box-sizing: border-box;
+    margin: 20px 0;
+    border-bottom: 1px solid #eee;
+    padding: 0;
+    padding-bottom: 15px;
+
+    img {
+        width: 80px !important;
+        height: 80px !important;
+        margin-right: 20px;
+    }
+
+    .game_list {
+        width: 90%;
+
+        .title {
+            font-size: 18px;
+            color: #323232;
+
+            .title_name {
+                display: inline-block;
+                margin-right: 10px;
+            }
+
+            .score {
+                color: #ed8c0f;
+            }
+        }
+
+        .info {
+            color: rgba(0, 0, 0, .6);
+            margin: 5px 0;
+            font-size: 14px;
+        }
+
+        .game_tag {
+            // margin-right: 3px;
+            color: #ed8c0f;
+            border-color: #ed8c0f;
+            transform: scale(.8);
+            // padding: 2px 3px;
+        }
+    }
+
+    .downMB {
+        width: 60px;
+        height: 30px;
+        color: #fff;
+        border-color: #ed8c0f;
+    }
+}
+
+.lastStyle {
+    border: none !important;
+    padding-bottom: 0 !important;
+    margin-bottom: 10px !important;
+}
+</style>

src/components/MobList.vue

@@ -1,69 +1,69 @@
-<template>
-    <div class="list df aic jcsb" v-for="item in props.gameLis" :key="item.game_id">
-        <div class="df aic" style="width:70%">
-            <img :src="props.prefix + item.logopic">
-            <div class="right_cont" style="width:73%">
-                <p class="title elli">{{ item.screen_name }}</p>
-                <p class="info elli">{{ item.sketch || '暂无简介' }}</p>
-                <p class="down_msg">下载 | <span style="color: #ed8c0f;">{{ bytesChange(item.size) }}</span></p>
-            </div>
-        </div>
-        <div>
-            <van-button :disabled="item.download_url === '' ? true : false"  round color="#ed8c0f" @click="downGame(item.download_url)">下载</van-button>
-            <slot name="custom-button" :row="item"></slot>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { bytesChange } from '@/utils/bytesFormatter'
-
-const props: any = defineProps({
-    gameLis: Array,
-    prefix: String
-})
-
-const downGame = (url: string) => {
-    // 下载游戏
-    window.open(url)
-    // window.location.href = url;
-}
-</script>
-
-<style lang="scss" scoped>
-.list {
-    height: 100px;
-    margin-bottom: 0;
-    // padding: 20px 15px 15px;
-
-    img {
-        width: 80px !important;
-        height: 80px !important;
-        // background-color: #a00;
-        border-radius: 20px;
-        margin-right: 20px;
-    }
-
-    .right_cont {
-        color: #666;
-
-        .title {
-            font-size: 18px;
-            // font-weight: 600;
-            color: #323332;
-
-        }
-
-        .info {
-            font-size: 14px;
-            margin: 5px 0;
-        }
-
-    }
-}
-
-// .van-button {
-//     width: 60px;
-//     height: 30px;
-// }
-</style>
+<template>
+  <div class="list df aic jcsb" v-for="item in props.gameLis" :key="item.game_id">
+    <div class="df aic" style="width:70%">
+      <img :src="props.prefix + item.logopic"/>
+      <div class="right_cont" style="width:73%">
+        <p class="title elli">{{ item.screen_name }}</p>
+        <p class="info elli">{{ item.sketch || '暂无简介' }}</p>
+        <p class="down_msg">下载 | <span style="color: #ed8c0f;">{{ bytesChange(item.size) }}</span></p>
+      </div>
+    </div>
+    <div>
+      <van-button :disabled="item.download_url === '' ? true : false"  round color="#ed8c0f" @click="downGame(item.download_url)">下载</van-button>
+      <slot name="custom-button" :row="item"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { bytesChange } from '@/utils/bytesFormatter'
+
+const props: any = defineProps({
+  gameLis: Array,
+  prefix: String
+})
+
+const downGame = (url: string) => {
+  // 下载游戏
+  window.open(url)
+  // window.location.href = url;
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+    height: 100px;
+    margin-bottom: 0;
+    // padding: 20px 15px 15px;
+
+    img {
+        width: 80px !important;
+        height: 80px !important;
+        // background-color: #a00;
+        border-radius: 20px;
+        margin-right: 20px;
+    }
+
+    .right_cont {
+        color: #666;
+
+        .title {
+            font-size: 18px;
+            // font-weight: 600;
+            color: #323332;
+
+        }
+
+        .info {
+            font-size: 14px;
+            margin: 5px 0;
+        }
+
+    }
+}
+
+// .van-button {
+//     width: 60px;
+//     height: 30px;
+// }
+</style>

src/components/MobileCom.vue

@@ -1,115 +1,114 @@
-<template>
-    <div class="common df aic">
-        <div class="left_title df jcsb aic psr">
-            <h1 class="df aic" @click="router.push({ path: 'm_index' })">
-                <img v-if="VITEPLA === 'QingQue'" src="http://gm.nkfzs.com/favicon.ico" />
-                <span v-if="VITEPLA === 'QingQue'">朱雀游戏中心</span>
-                <span v-else>游戏中心</span>
-            </h1>
-            <p><van-icon name="search" size="26" @click="router.push({
-                path
-                    : 'm_search'
-            })" /></p>
-
-            <div v-if="VITEPLA === 'QingQue'" class="psa" style="bottom: 0;left: 0; z-index: 1;color: #ed8c0f;">客服qq：2885393309</div>
-        </div>
-        <div class="right_menu df aic jcc psr">
-            <van-icon name="bars" size="26" />
-            <!-- <van-icon name="apps-o" size="26" /> -->
-            <van-dropdown-menu class="psa" style="left: 30px;">
-                <van-dropdown-item ref="item">
-                    <van-cell class="menu_title" v-for="item in user.menuPath" :key="item" :title="item.text"
-                        @click="toPath(item.url)"></van-cell>
-                    <van-cell title="设置" @click="setPwd"></van-cell>
-                    <van-cell v-if="hasToken" title="退出登录" @click="logOut"></van-cell>
-                </van-dropdown-item>
-            </van-dropdown-menu>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useStore } from '@/store/index'
-
-const router = useRouter()
-const hasToken = ref(localStorage.getItem('token'))
-const item:any = ref(null)
-const user = useStore('user')
-
-const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE
-
-const menuPath: any = ref([
-    { text: '首页', value: 1, url: 'm_index' },
-    // { text: '排行', value: 2, url: 'm_rank' },
-    { text: '分类', value: 3, url: 'm_categroy' },
-    { text: '我的游戏', value: 4, url: 'm_mine' },
-])
-
-const toPath = (url: any) => {
-    router.push({ path: url })
-    item.value.toggle()
-}
-const logOut = () => {
-    localStorage.removeItem('token')
-    router.push({ path: 'm_login' })
-}
-const setPwd = () => {
-    router.push({ path: 'm_reset' })
-}
-onMounted(() => {
-  let token = localStorage.getItem('token')
-    if(token){
-        user.getUserProfile()
-    }  
-})
-</script>
-
-<style lang="scss" scoped>
-.common {
-    box-sizing: border-box;
-    height: 70px;
-    min-height: 50px;
-    background-color: #fff;
-    padding: 0 15px;
-    border-bottom: 1px solid transparent;
-
-    .left_title {
-        box-sizing: border-box;
-        width: 80%;
-        height: 100%;
-        padding-right: 15px;
-        border-right: 1px dashed #999;
-
-        h1 {
-            font-size: 20px;
-            font-weight: normal;
-        }
-    }
-
-    .right_menu {
-        // padding: 0 20px;
-        padding-left: 25px;
-
-        .menu_title {
-            color: #666;
-            font-size: 16px;
-        }
-    }
-}
-
-:deep(.van-dropdown-menu__bar) {
-    box-shadow: none;
-    background-color: #fff;
-    opacity: -1;
-    width: 0;
-}
-
-@media screen and (max-width: 767px) {
-    .common {
-        border-bottom: 1px solid rgba(0, 0, 0, .1);
-    }
-}
-
-</style>
+<template>
+  <div class="common df aic">
+    <div class="left_title df jcsb aic psr">
+      <h1 class="df aic" @click="router.push({ path: 'm_index' })">
+        <img v-if="VITEPLA === 'QingQue'" src="http://gm.nkfzs.com/favicon.ico" />
+        <span v-if="VITEPLA === 'QingQue'">朱雀游戏中心</span>
+        <span v-else>游戏中心</span>
+      </h1>
+      <p>
+        <van-icon
+          name="search"
+          size="26"
+          @click="router.push({path : 'm_search'})" />
+      </p>
+
+      <div v-if="VITEPLA === 'QingQue'" class="psa" style="bottom: 0;left: 0; z-index: 1;color: #ed8c0f;">客服qq：2885393309</div>
+    </div>
+    <div class="right_menu df aic jcc psr">
+      <van-icon name="bars" size="26" />
+      <!-- <van-icon name="apps-o" size="26" /> -->
+      <van-dropdown-menu class="psa" style="left: 30px;">
+        <van-dropdown-item ref="item">
+          <van-cell
+            class="menu_title"
+            v-for="item in user.menuPath"
+            :key="item"
+            :title="item.text"
+            @click="toPath(item.url)"/>
+          <van-cell title="设置" @click="setPwd"/>
+          <van-cell v-if="hasToken" title="退出登录" @click="logOut"/>
+        </van-dropdown-item>
+      </van-dropdown-menu>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from '@/store/index'
+
+const router = useRouter()
+const hasToken = ref(localStorage.getItem('token'))
+const item:any = ref(null)
+const user = useStore('user')
+
+const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE
+
+const toPath = (url: any) => {
+  router.push({ path: url })
+  item.value.toggle()
+}
+const logOut = () => {
+  localStorage.removeItem('token')
+  router.push({ path: 'm_login' })
+}
+const setPwd = () => {
+  router.push({ path: 'm_reset' })
+}
+onMounted(() => {
+  const token = localStorage.getItem('token')
+  if (token) {
+    user.getUserProfile()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.common {
+    box-sizing: border-box;
+    height: 70px;
+    min-height: 50px;
+    background-color: #fff;
+    padding: 0 15px;
+    border-bottom: 1px solid transparent;
+
+    .left_title {
+        box-sizing: border-box;
+        width: 80%;
+        height: 100%;
+        padding-right: 15px;
+        border-right: 1px dashed #999;
+
+        h1 {
+            font-size: 20px;
+            font-weight: normal;
+        }
+    }
+
+    .right_menu {
+        // padding: 0 20px;
+        padding-left: 25px;
+
+        .menu_title {
+            color: #666;
+            font-size: 16px;
+        }
+    }
+}
+
+:deep(.van-dropdown-menu__bar) {
+    box-shadow: none;
+    background-color: #fff;
+    opacity: -1;
+    width: 0;
+}
+
+@media screen and (max-width: 767px) {
+    .common {
+        border-bottom: 1px solid rgba(0, 0, 0, .1);
+    }
+}
+
+</style>

src/components/RankList.vue

@@ -1,32 +1,38 @@
 <template>
-    <div v-if="(props.gameLis?.length > 0)" class="list_cont">
-        <div v-for="(item, index) in props.gameLis" :key="index" class="list df aic jcsb"
-            :class="{ lastStyle: index === props.gameLis.length - 1 }">
-            <!-- <div v-if="props.rank" class="category_icon psr"
+  <div v-if="(props.gameLis?.length > 0)" class="list_cont">
+    <div v-for="(item, index) in props.gameLis"
+         :key="index"
+         class="list df aic jcsb"
+         :class="{ lastStyle: index === props.gameLis.length - 1 }">
+      <!-- <div v-if="props.rank" class="category_icon psr"
                 :class="{ firstBg: index === 0, secondBg: index === 1, threeBg: index === 2 }">
                 <span class="num psa">{{ index + 1 }}</span>
             </div> -->
-            <div class="df aic" style="width: 75%;">
-                <img class="left_img" :src="props.prefix + item.logopic">
-                <div class="right_content" style="width:75%;">
-                    <h3 class="title df">
-                        <span class="game_title elli">{{ item.screen_name }}</span>
-                        <span class="game_rate">{{ (item.game_score / 10) > 5 ? '5.0' : (item.game_score /
-                                10).toFixed(1)
-                        }}</span>
-                    </h3>
-                    <p class="elli">{{ item.sketch || '暂无简介' }}</p>
-                    <el-button plain size="small" class="game_tag" round v-for="tag in item.tags"><span
-                            v-for="subTag in props.tagArr.filter(v => { return v.id === tag })">{{ subTag.name }}</span>
-                    </el-button>
-                </div>
-            </div>
-            <el-button :disabled="item.download_url === '' ? true : false" @click="downGame(item.download_url)"
-                color="#ed8c0f" class="downMB" :icon="Download" >
-                {{ bytesChange(item.size) }}
-            </el-button>
+      <div class="df aic" style="width: 75%;">
+        <img class="left_img" :src="props.prefix + item.logopic"/>
+        <div class="right_content" style="width:75%;">
+          <h3 class="title df">
+            <span class="game_title elli">{{ item.screen_name }}</span>
+            <span class="game_rate">{{ (item.game_score / 10) > 5 ? '5.0' : (item.game_score /
+              10).toFixed(1)
+            }}</span>
+          </h3>
+          <p class="elli">{{ item.sketch || '暂无简介' }}</p>
+          <el-button plain size="small" class="game_tag" round v-for="tag in item.tags"><span
+            v-for="subTag in props.tagArr.filter(v => { return v.id === tag })">{{ subTag.name }}</span>
+          </el-button>
         </div>
+      </div>
+      <el-button
+        :disabled="item.download_url === '' ? true : false"
+        @click="downGame(item.download_url)"
+        color="#ed8c0f"
+        class="downMB"
+        :icon="Download" >
+        {{ bytesChange(item.size) }}
+      </el-button>
     </div>
+  </div>
 
 </template>
 
@@ -35,18 +41,18 @@ import { Download } from '@element-plus/icons-vue'
 import { bytesChange } from '@/utils/bytesFormatter'
 
 const props: any = defineProps({
-    gameLis: Array<any>,
-    tagArr: Array<any | undefined>,
-    prefix: String,
-    rank: Boolean,
-    more: Function,
-    total: Number
+  gameLis: Array<any>,
+  tagArr: Array<any | undefined>,
+  prefix: String,
+  rank: Boolean,
+  more: Function,
+  total: Number
 })
 
 const downGame = (url: string) => {
-    // 下载游戏
-    window.open(url)
-    // window.location.href = url;
+  // 下载游戏
+  window.open(url)
+  // window.location.href = url;
 }
 </script>
 
@@ -93,7 +99,6 @@ const downGame = (url: string) => {
             background-color: rgb(209, 175, 55);
         }
 
-
         img {
             height: 130px;
             width: 130px;
@@ -128,7 +133,7 @@ const downGame = (url: string) => {
 
         }
     }
-    
+
 }
 .downMB {
     width: 100px;
@@ -163,4 +168,4 @@ const downGame = (url: string) => {
     padding-bottom: 0 !important;
     margin-bottom: 10px !important;
 }
-</style>
+</style>

src/components/loading.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class='loading df jcc aic'>
-        <div class="loader"></div>
-    </div>
+  <div class='loading df jcc aic'>
+    <div class="loader"/>
+  </div>
 </template>
 <style scoped lang="scss">
 .loading {

src/layout/Layout.vue

@@ -1,51 +1,51 @@
-<template>
-    <div class="gameIndex df fdc psr">
-        <!-- 头部 -->
-        <header-vue class="header psf"></header-vue>
-        <div style="height: 120px;background-color: #ed8c0f;"></div>
-        <!-- 内容 -->
-        <section-vue></section-vue>
-        <!-- 尾部 -->
-        <!-- <footer-vue class="footer"></footer-vue> -->
-        <el-backtop :bottom="100">
-            <div class="df aic jcc" style="
-        height: 100%;
-        width: 100%;
-        background-color: var(--el-bg-color-overlay);
-        box-shadow: var(--el-box-shadow-lighter);
-        color: #ed8c0f;
-        border-radius: 50%;
-      ">
-                <!-- <el-icon><Top /></el-icon> -->
-                UP
-            </div>
-        </el-backtop>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { Top } from '@element-plus/icons-vue';
-import footerVue from './footer.vue';
-import headerVue from './header.vue';
-import sectionVue from './section.vue';
-
-</script>
-
-<style scoped lang="scss">
-.gameIndex {
-    // background-color: #f7f7f7;
-    .header {
-        width: 100%;
-        height: 120px;
-        top: 0;
-        left: 0;
-        background-color: rgba($color: #fff, $alpha: 1);
-        z-index: 999;
-    }
-
-    .footer {
-        height: 40px;
-        background-color: #e7e7e7;
-    }
-}
-</style>
+<template>
+  <div class="gameIndex df fdc psr">
+    <!-- 头部 -->
+    <header-vue class="header psf"/>
+    <div style="height: 120px;background-color: #ed8c0f;"/>
+    <!-- 内容 -->
+    <section-vue/>
+    <!-- 尾部 -->
+    <!-- <footer-vue class="footer"></footer-vue> -->
+    <el-backtop :bottom="100">
+      <div
+        class="df aic jcc"
+        style="
+        height: 100%;
+        width: 100%;
+        background-color: var(--el-bg-color-overlay);
+        box-shadow: var(--el-box-shadow-lighter);
+        color: #ed8c0f;
+        border-radius: 50%;
+      ">
+        <!-- <el-icon><Top /></el-icon> -->
+        UP
+      </div>
+    </el-backtop>
+  </div>
+</template>
+
+<script setup lang="ts">
+import headerVue from './header.vue'
+import sectionVue from './section.vue'
+
+</script>
+
+<style scoped lang="scss">
+.gameIndex {
+    // background-color: #f7f7f7;
+    .header {
+        width: 100%;
+        height: 120px;
+        top: 0;
+        left: 0;
+        background-color: rgba($color: #fff, $alpha: 1);
+        z-index: 999;
+    }
+
+    .footer {
+        height: 40px;
+        background-color: #e7e7e7;
+    }
+}
+</style>

src/layout/footer.vue

@@ -1,9 +1,7 @@
 <template>
-    <div class="foot">
-        <div class="footer_cont df aic jcc">
-            
-        </div>
-    </div>
+  <div class="foot">
+    <div class="footer_cont df aic jcc"/>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,4 +13,4 @@
     height: 100%;
     /* background-color: rgb(152, 227, 152); */
 }
-</style>
+</style>

src/layout/header.vue

@@ -1,232 +1,241 @@
-<template>
-  <div class="header_nav" >
-    <nav class="w1000 df jcsb aic" >
-      <!-- 网站title -->
-      <h1 class="game_logo df aic" @click="clearAct">
-        <a class="logo" :class=" VITEPLA === 'QingQue'? 'with-logo':''" href="/p_index" alt="游戏官网" title="游戏官网">{{VITEPLA === 'QingQue'? '朱雀游戏中心':'游戏中心'}} </a>
-      </h1>
-
-      <!-- 首页、分类、排行 -->
-      <router-link v-for="(item, index) in user.routes" :key="index" class="nav_title" :to="item.path"
-        @click="changeIndex(item.title)" :class="{ active: currentIndex === item.title }">
-        {{ item.title }}
-      </router-link>
-
-      <!-- 搜索框 -->
-      <el-autocomplete v-model="game_name" :fetch-suggestions="searchChange" placeholder="请输入游戏名称" :prefix-icon="Search"
-        clearable @select="handleSelect" @keyup.native.enter="handleKeyEnter" maxlength="30" />
-
-      <!-- 登录 -->
-      <router-link class="nav_title" :to="hasToken ? '' : 'p_login'" @click="clearActive">
-        <img v-if="!hasToken" src="https://static.g.mi.com/game/websites/public/img/portrait_default.06318944.png" />
-        <el-dropdown trigger="click" v-else>
-          <span class="el-dropdown-link">
-            <img src="https://static.g.mi.com/game/websites/public/img/portrait_default.06318944.png" />
-          </span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item class="clearfix" @click="resetPWD">
-                设置
-              </el-dropdown-item>
-              <el-dropdown-item class="clearfix" @click="logOut">
-                退出登录
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </router-link>
-    </nav>
-    <div v-if="VITEPLA === 'QingQue'" class="w1000 df aic jcc" style="padding-top: 8px;padding: 10px 0;height: 40px;font-size: 16px;color: #ed8c0f;">客服qq：2885393309</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, watch, onMounted } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-import { useRouter, useRoute } from 'vue-router'
-import { getGameList, userAccount } from '@/api/index'
-import Message from '@/utils/Message'
-import local from '@/utils/local'
-import { useStore } from '@/store'
-import { on } from 'events'
-
-const router = useRouter()
-const route = useRoute()
-const search = useStore('search')
-const header = useStore('header')
-const user = useStore('user')
-const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE
-// 搜索内容
-const game_name = ref(local.get('searchText') || '')
-// 绑定el-autocomplete组件
-const myAutocomplete = ref(null)
-const hasToken = ref(localStorage.getItem('token'))
-
-const currentIndex = ref(local.get('headerPath') || header.getHeaderTitle)   //取保存的title
-console.log('currentIndex', currentIndex.value);
-
-if (route.query.account) {
-  currentIndex.value = '我的'
-  console.log('1234567', currentIndex.value);
-}
-
-// 顶部导航栏
-onMounted(() => {
-  let token = localStorage.getItem('token')
-  if(token){
-    user.getUserProfile()
-  }
-})
-// 改变字体颜色
-const changeIndex = (val: string) => {
-  currentIndex.value = val
-  local.set('headerPath', currentIndex.value)  //保存当前title
-  local.remove('searchText')
-  game_name.value = ''
-}
-
-// 点击登录清除本地存储
-const clearActive = () => {
-  currentIndex.value = ''
-  local.remove('headerPath')           //删除保存的title
-  local.remove('searchText')
-  game_name.value = ''
-}
-// 点击网页title清除本地存储
-const clearAct = () => {
-  local.remove('headerPath')
-  currentIndex.value = '首页'
-  local.set('headerPath', currentIndex.value)
-  local.remove('searchText')
-  game_name.value = ''
-}
-
-// 退出登录
-const logOut = () => {
-  // console.log(22);
-  localStorage.removeItem('token')
-  router.push({ path: 'p_login' })
-  hasToken.value = ''
-}
-const resetPWD = () => {
-   router.push('/p_reset')
-}
-interface LinkItem {
-  id: string
-  value: string
-}
-const links: any = ref<LinkItem[]>([])
-
-const searchChange = async (str: string, cb: (arg: any) => void) => {
-  currentIndex.value = ''
-  local.remove('headerPath')
-  if (str && str.length > 0) {
-    game_name.value = str
-    try {
-      var params = reactive({
-        type: 0,
-        tag_id: 0,
-        page: 1,
-        pagesize: 10,
-        keywords: str
-      })
-      var { data } = await getGameList(params)
-      links.value = data.data.lists
-        links.value = links.value.map((item, index) => {
-          return {
-            id: `${index}`,
-            value: `${item.screen_name}`
-          }
-        })
-        links.value = links.value.filter(item => {
-          return item.value.indexOf(str) > -1
-        })
-        cb(links.value)
-
-    } catch (error: any) {
-      // links.value.push({
-      //   id: '-1',
-      //   value: '暂无匹配数据'
-      // })
-      // cb(links.value)
-      console.log(error)
-      Message.error(error.data.msg)
-    }
-  } else {
-    cb([])
-  }
-}
-
-const handleSelect = (item: LinkItem) => {
-  if (item) {
-    let { value } = item
-    router.push({ path: '/p_search', query: { screen_name: value } })
-    search.setSearchText(game_name.value)
-    local.set('searchText', game_name.value)
-    search.setSearchLis(game_name.value)
-  }
-}
-
-// 手动回车跳转搜索页
-const handleKeyEnter = () => {
-  router.push({ path: '/p_search', query: { screen_name: game_name.value } })
-  search.setSearchText(game_name.value)
-  local.set('searchText', game_name.value)
-  search.setSearchLis(game_name.value)
-}
-
-watch(currentIndex, (iold, inew) => { }, { deep: true, immediate: true })
-</script>
-
-<style scoped lang="scss">
-.header_nav{
-  margin: auto;
-  height: 100%;
-}
-nav {
-
-  .game_logo {
-    height: 100%;
-    line-height: 80px;
-    font-weight: normal;
-
-    .logo {
-      font-size: 24px;
-      color: #000;
-      
-      background-size: 30px 30px;
-      height: 100%;
-      padding-left: 37px;
-    }
-    .with-logo{
-      background: url('http://gm.nkfzs.com/favicon.ico') no-repeat center left;
-    }
-  }
-
-  .nav_title {
-    font-size: 20px;
-    text-align: center;
-
-    &:hover {
-      color: #ed8c0f
-    }
-  }
-
-  .active {
-    color: #ed8c0f
-  }
-
-}
-
-:deep(.el-input) {
-  width: 200px;
-}
-
-:deep(.el-input__wrapper) {
-  border-radius: 20px;
-}
-
-// .el-dropdown {
-//   margin-top: 1.1rem;
-// }
-</style>
+<template>
+  <div class="header_nav" >
+    <nav class="w1000 df jcsb aic" >
+      <!-- 网站title -->
+      <h1 class="game_logo df aic" @click="clearAct">
+        <a class="logo" :class=" VITEPLA === 'QingQue'? 'with-logo':''" href="/p_index" alt="游戏官网" title="游戏官网">{{VITEPLA === 'QingQue'? '朱雀游戏中心':'游戏中心'}} </a>
+      </h1>
+
+      <!-- 首页、分类、排行 -->
+      <router-link v-for="(item, index) in user.routes"
+                   :key="index"
+                   class="nav_title"
+                   :to="item.path"
+                   @click="changeIndex(item.title)"
+                   :class="{ active: currentIndex === item.title }">
+        {{ item.title }}
+      </router-link>
+
+      <!-- 搜索框 -->
+      <el-autocomplete
+        v-model="game_name"
+        :fetch-suggestions="searchChange"
+        placeholder="请输入游戏名称"
+        :prefix-icon="Search"
+        clearable
+        @select="handleSelect"
+        @keyup.native.enter="handleKeyEnter"
+        maxlength="30"
+      />
+
+      <!-- 登录 -->
+      <router-link class="nav_title" :to="hasToken ? '' : 'p_login'" @click="clearActive">
+        <img v-if="!hasToken" src="https://static.g.mi.com/game/websites/public/img/portrait_default.06318944.png" />
+        <el-dropdown trigger="click" v-else>
+          <span class="el-dropdown-link">
+            <img src="https://static.g.mi.com/game/websites/public/img/portrait_default.06318944.png" />
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item class="clearfix" @click="resetPWD">
+                设置
+              </el-dropdown-item>
+              <el-dropdown-item class="clearfix" @click="logOut">
+                退出登录
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </router-link>
+    </nav>
+    <div v-if="VITEPLA === 'QingQue'" class="w1000 df aic jcc" style="padding-top: 8px;padding: 10px 0;height: 40px;font-size: 16px;color: #ed8c0f;">客服qq：2885393309</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import { useRouter, useRoute } from 'vue-router'
+import { getGameList } from '@/api/index'
+import Message from '@/utils/Message'
+import local from '@/utils/local'
+import { useStore } from '@/store'
+
+const router = useRouter()
+const route = useRoute()
+const search = useStore('search')
+const header = useStore('header')
+const user = useStore('user')
+const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE
+// 搜索内容
+const game_name = ref(local.get('searchText') || '')
+// 绑定el-autocomplete组件
+const hasToken = ref(localStorage.getItem('token'))
+
+const currentIndex = ref(local.get('headerPath') || header.getHeaderTitle) // 取保存的title
+console.log('currentIndex', currentIndex.value)
+
+if (route.query.account) {
+  currentIndex.value = '我的'
+  console.log('1234567', currentIndex.value)
+}
+
+// 顶部导航栏
+onMounted(() => {
+  const token = localStorage.getItem('token')
+  if (token) {
+    user.getUserProfile()
+  }
+})
+// 改变字体颜色
+const changeIndex = (val: string) => {
+  currentIndex.value = val
+  local.set('headerPath', currentIndex.value) // 保存当前title
+  local.remove('searchText')
+  game_name.value = ''
+}
+
+// 点击登录清除本地存储
+const clearActive = () => {
+  currentIndex.value = ''
+  local.remove('headerPath') // 删除保存的title
+  local.remove('searchText')
+  game_name.value = ''
+}
+// 点击网页title清除本地存储
+const clearAct = () => {
+  local.remove('headerPath')
+  currentIndex.value = '首页'
+  local.set('headerPath', currentIndex.value)
+  local.remove('searchText')
+  game_name.value = ''
+}
+
+// 退出登录
+const logOut = () => {
+  // console.log(22);
+  localStorage.removeItem('token')
+  router.push({ path: 'p_login' })
+  hasToken.value = ''
+}
+const resetPWD = () => {
+  router.push('/p_reset')
+}
+interface LinkItem {
+  id: string
+  value: string
+}
+const links: any = ref<LinkItem[]>([])
+
+const searchChange = async(str: string, cb: (arg: any) => void) => {
+  currentIndex.value = ''
+  local.remove('headerPath')
+  if (str && str.length > 0) {
+    game_name.value = str
+    try {
+      var params = reactive({
+        type: 0,
+        tag_id: 0,
+        page: 1,
+        pagesize: 10,
+        keywords: str
+      })
+      var { data } = await getGameList(params)
+      links.value = data.data.lists
+      links.value = links.value.map((item, index) => {
+        return {
+          id: `${index}`,
+          value: `${item.screen_name}`
+        }
+      })
+      links.value = links.value.filter(item => {
+        return item.value.indexOf(str) > -1
+      })
+      cb(links.value)
+    } catch (error: any) {
+      // links.value.push({
+      //   id: '-1',
+      //   value: '暂无匹配数据'
+      // })
+      // cb(links.value)
+      console.log(error)
+      Message.error(error.data.msg)
+    }
+  } else {
+    cb([])
+  }
+}
+
+const handleSelect = (item: LinkItem) => {
+  if (item) {
+    const { value } = item
+    router.push({ path: '/p_search', query: { screen_name: value }})
+    search.setSearchText(game_name.value)
+    local.set('searchText', game_name.value)
+    search.setSearchLis(game_name.value)
+  }
+}
+
+// 手动回车跳转搜索页
+const handleKeyEnter = () => {
+  router.push({ path: '/p_search', query: { screen_name: game_name.value }})
+  search.setSearchText(game_name.value)
+  local.set('searchText', game_name.value)
+  search.setSearchLis(game_name.value)
+}
+
+watch(currentIndex, () => { }, { deep: true, immediate: true })
+</script>
+
+<style scoped lang="scss">
+.header_nav{
+  margin: auto;
+  height: 100%;
+}
+nav {
+
+  .game_logo {
+    height: 100%;
+    line-height: 80px;
+    font-weight: normal;
+
+    .logo {
+      font-size: 24px;
+      color: #000;
+
+      background-size: 30px 30px;
+      height: 100%;
+      padding-left: 37px;
+    }
+    .with-logo{
+      background: url('http://gm.nkfzs.com/favicon.ico') no-repeat center left;
+    }
+  }
+
+  .nav_title {
+    font-size: 20px;
+    text-align: center;
+
+    &:hover {
+      color: #ed8c0f
+    }
+  }
+
+  .active {
+    color: #ed8c0f
+  }
+
+}
+
+:deep(.el-input) {
+  width: 200px;
+}
+
+:deep(.el-input__wrapper) {
+  border-radius: 20px;
+}
+
+// .el-dropdown {
+//   margin-top: 1.1rem;
+// }
+</style>

src/layout/section.vue

@@ -1,10 +1,10 @@
 <template>
-    <!-- 二级路由出口 -->
-    <div class="main">
-        <div class="body-wrapper">
-            <router-view></router-view>
-        </div>
+  <!-- 二级路由出口 -->
+  <div class="main">
+    <div class="body-wrapper">
+      <router-view/>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -32,4 +32,4 @@
 
     }
 }
-</style>
+</style>

src/main.ts

@@ -7,11 +7,11 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
-//引入样式
+// 引入样式
 import './assets/css/normalize.css'
 import './assets/css/property.css'
 import './assets/css/reset.css'
-import 'vant/es/toast/style';
+import 'vant/es/toast/style'
 // 引入pinia状态管理工具
 import { store } from './store'
 
@@ -26,12 +26,12 @@ import Footer from './components/Footer.vue'
 const app = createApp(App)
 
 app
-.use(ElementPlus,{
-    locale: zhCn,
+  .use(ElementPlus, {
+    locale: zhCn
   })
-.use(router)
-.use(store)
-.component('loading', loading)
-.component('m_header', MobileCom)
-.component('m_footer', Footer)
-.mount('#app')
+  .use(router)
+  .use(store)
+  .component('loading', loading)
+  .component('m-header', MobileCom)
+  .component('m-footer', Footer)
+  .mount('#app')

src/store/header.ts

@@ -1,20 +1,20 @@
 import { defineStore } from 'pinia'
 
 const userHeader = defineStore({
-    id: 'userHeader',
-    state: () => ({
-        headerTitle:''
-    }),
-    actions: {
-        setHeaderTitle(data){
-            this.headerTitle = data
-        }
-    },
-    getters: {
-        getHeaderTitle(state){
-            return state.headerTitle
-        }
+  id: 'userHeader',
+  state: () => ({
+    headerTitle: ''
+  }),
+  actions: {
+    setHeaderTitle(data) {
+      this.headerTitle = data
     }
+  },
+  getters: {
+    getHeaderTitle(state) {
+      return state.headerTitle
+    }
+  }
 })
 
-export { userHeader }
+export { userHeader }

src/store/search.ts

@@ -3,87 +3,86 @@ import { getGameList } from '@/api/index'
 import Message from '@/utils/Message'
 
 const useSearch = defineStore({
-    id: 'search',
-    state: (): any => ({
-        searchText: '',
-        searchLis: [],
-        type: 0,
-        tag_id: 0,
-        page: 1,
-        pagesize: 10,
-        q: '',
-        prefix: '',
-        total: 0,
-        isClean: true
-    }),
-    actions: {
-        setSearchText(data) {
-            this.searchText = data
-            // console.log('this.searchText', this.searchText);
-        },
-        setSearchPage(){
-            this.page += 1
-            this.setSearchLis()
-        },
-        setClean(data){
-            this.isClean = data
-        },
-        async setSearchLis(data) {
-            this.q = data
-            // console.log('5555', this.page);
+  id: 'search',
+  state: (): any => ({
+    searchText: '',
+    searchLis: [],
+    type: 0,
+    tag_id: 0,
+    page: 1,
+    pagesize: 10,
+    q: '',
+    prefix: '',
+    total: 0,
+    isClean: true
+  }),
+  actions: {
+    setSearchText(data) {
+      this.searchText = data
+      // console.log('this.searchText', this.searchText);
+    },
+    setSearchPage() {
+      this.page += 1
+      this.setSearchLis()
+    },
+    setClean(data) {
+      this.isClean = data
+    },
+    async setSearchLis(data) {
+      this.q = data
+      // console.log('5555', this.page);
 
-            if (this.searchText.length > 0) {
-                this.page = 1
-                await getGameList({ type: this.type, tag_id: this.tag_id, page: this.page, pagesize: this.pagesize, keywords: this.q }).then(res => {
-                    if (res.data.code === 200 && res.data.data) {
-                        // console.log('res', res);
-                        this.prefix = res.data.data.prefix
-                        this.total = res.data.data.total
-                        this.searchLis = []
-                        this.searchLis = this.searchLis.concat(res.data.data.lists.filter(item => item.screen_name.includes(this.q)))
-                        // console.log('this.searchLis', this.searchLis);
-                    }
-                }).catch(err => {
-                    Message.error(err.data.msg)
-                })
-            }
-            else {
-                // console.log(222);
-                await getGameList({ type: this.type, tag_id: this.tag_id, page: this.page, pagesize: this.pagesize, keywords: this.q }).then(res => {
-                    if (res.data.code === 200 && res.data.data) {
-                        // console.log('res', res);
-                        this.prefix = res.data.data.prefix
-                        this.total = res.data.data.total
-                        if(this.isClean) this.searchLis = [] 
-                        this.searchLis = this.searchLis.concat(res.data.data.lists)
-                        // console.log('searchLis====>', this.searchLis);
-                    }
-                }).catch(err => {
-                    Message.error(err.data.msg)
-                })
-            }
-        }
+      if (this.searchText.length > 0) {
+        this.page = 1
+        await getGameList({ type: this.type, tag_id: this.tag_id, page: this.page, pagesize: this.pagesize, keywords: this.q }).then(res => {
+          if (res.data.code === 200 && res.data.data) {
+            // console.log('res', res);
+            this.prefix = res.data.data.prefix
+            this.total = res.data.data.total
+            this.searchLis = []
+            this.searchLis = this.searchLis.concat(res.data.data.lists.filter(item => item.screen_name.includes(this.q)))
+            // console.log('this.searchLis', this.searchLis);
+          }
+        }).catch(err => {
+          Message.error(err.data.msg)
+        })
+      } else {
+        // console.log(222);
+        await getGameList({ type: this.type, tag_id: this.tag_id, page: this.page, pagesize: this.pagesize, keywords: this.q }).then(res => {
+          if (res.data.code === 200 && res.data.data) {
+            // console.log('res', res);
+            this.prefix = res.data.data.prefix
+            this.total = res.data.data.total
+            if (this.isClean) this.searchLis = []
+            this.searchLis = this.searchLis.concat(res.data.data.lists)
+            // console.log('searchLis====>', this.searchLis);
+          }
+        }).catch(err => {
+          Message.error(err.data.msg)
+        })
+      }
+    }
+  },
+  getters: {
+    getSearchText(state) {
+      return state.searchText
+    },
+    getSearchLis(state) {
+      return state.searchLis
+    },
+    getPrefix(state) {
+      return state.prefix
+    },
+    getPage(state) {
+      return state.page
+    },
+    getPagesize(state) {
+      return state.pagesize
     },
-    getters: {
-        getSearchText(state) {
-            return state.searchText
-        },
-        getSearchLis(state) {
-            return state.searchLis
-        },
-        getPrefix(state) {
-            return state.prefix
-        },
-        getPage(state){
-            return state.page
-        },
-        getPagesize(state){
-            return state.pagesize
-        },
-        getTotal(state){
-            return state.total
-        }
+    getTotal(state) {
+      return state.total
     }
+  }
 })
 
 export { useSearch }

src/utils/bytesFormatter.ts

@@ -1,20 +1,20 @@
 export const bytesChange = (limit:number) => {
-    var size = "";
-    if(limit < 1 * 1024){                            //小于1KB，则转化成B
-        size = limit.toFixed(2) + "B"
-    }else if(limit < 1 * 1024 * 1024){            //小于1MB，则转化成KB
-        size = (limit/1024).toFixed(2) + "KB"
-    }else if(limit < 1 * 1024 * 1024 * 1024){        //小于1GB，则转化成MB
-        size = (limit/(1024 * 1024)).toFixed(2) + "MB"
-    }else{                                            //其他转化成GB
-        size = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB"
-    }
- 
-    var sizeStr = size + "";                        //转成字符串
-    var index = sizeStr.indexOf(".");                    //获取小数点处的索引
-    var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
-    if(dou == "00"){                                //判断后两位是否为00，如果是则删除00               
-        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
-    }
-    return size;
-}
+  let size = ''
+  if (limit < 1 * 1024) { // 小于1KB，则转化成B
+    size = limit.toFixed(2) + 'B'
+  } else if (limit < 1 * 1024 * 1024) { // 小于1MB，则转化成KB
+    size = (limit / 1024).toFixed(2) + 'KB'
+  } else if (limit < 1 * 1024 * 1024 * 1024) { // 小于1GB，则转化成MB
+    size = (limit / (1024 * 1024)).toFixed(2) + 'MB'
+  } else { // 其他转化成GB
+    size = (limit / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
+  }
+
+  const sizeStr = size + '' // 转成字符串
+  const index = sizeStr.indexOf('.') // 获取小数点处的索引
+  const dou = sizeStr.substr(index + 1, 2) // 获取小数点后两位的值
+  if (dou == '00') { // 判断后两位是否为00，如果是则删除00
+    return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
+  }
+  return size
+}

src/utils/captcha.ts

@@ -1,21 +1,20 @@
-const checkRestTime = (sessionItem:string, validTime:number = 60) => {
-    let LASTTIME:number, restTime:number
-
-    let hasRecord = sessionStorage.getItem(sessionItem)
-    const nowTime = Math.round(new Date().getTime() / 1000)
-    if(hasRecord){
-        LASTTIME = Math.round(Number(hasRecord))
-    }else{
-        return null
-    }
-    
-    if(LASTTIME && nowTime - LASTTIME < validTime){
-        restTime = validTime - (nowTime - LASTTIME)
-        return restTime
-    }else if (LASTTIME && nowTime - LASTTIME >= 60) {
-        sessionStorage.removeItem(sessionItem)
-        return null
-    }
-
-}
-export default checkRestTime
+const checkRestTime = (sessionItem:string, validTime:number = 60) => {
+  let LASTTIME:number, restTime:number
+
+  const hasRecord = sessionStorage.getItem(sessionItem)
+  const nowTime = Math.round(new Date().getTime() / 1000)
+  if (hasRecord) {
+    LASTTIME = Math.round(Number(hasRecord))
+  } else {
+    return null
+  }
+
+  if (LASTTIME && nowTime - LASTTIME < validTime) {
+    restTime = validTime - (nowTime - LASTTIME)
+    return restTime
+  } else if (LASTTIME && nowTime - LASTTIME >= 60) {
+    sessionStorage.removeItem(sessionItem)
+    return null
+  }
+}
+export default checkRestTime

src/utils/index.ts

@@ -1,31 +1,31 @@
-export function parseTime (time, cFormat) {
-    if (arguments.length === 0) {
-      return null
-    }
-    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-    let date
-    if (typeof time === 'object') {
-      date = time
-    } else {
-      if (('' + time).length === 10) time = parseInt(time) * 1000
-      date = new Date(time)
-    }
-    const formatObj = {
-      y: date.getFullYear(),
-      m: date.getMonth() + 1,
-      d: date.getDate(),
-      h: date.getHours(),
-      i: date.getMinutes(),
-      s: date.getSeconds(),
-      a: date.getDay()
-    }
-    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-      let value = formatObj[key]
-      if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
-      if (result.length > 0 && value < 10) {
-        value = '0' + value
-      }
-      return value || 0
-    })
-    return time_str
-  }
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}

src/utils/local.ts

@@ -3,21 +3,21 @@
 */
 
 export default {
-    //存
-    set(key:string, val:any){
-        sessionStorage.setItem(key, JSON.stringify(val))
-    },
-    //取
-    get(key:string){
-        const json:any =  sessionStorage.getItem(key)
-        return JSON.parse(json)
-    },
-    //删除
-    remove(key:string){
-        sessionStorage.removeItem(key)
-    },
-    //清空
-    clear(){
-        sessionStorage.clear()
-    }
-}
+  // 存
+  set(key:string, val:any) {
+    sessionStorage.setItem(key, JSON.stringify(val))
+  },
+  // 取
+  get(key:string) {
+    const json:any = sessionStorage.getItem(key)
+    return JSON.parse(json)
+  },
+  // 删除
+  remove(key:string) {
+    sessionStorage.removeItem(key)
+  },
+  // 清空
+  clear() {
+    sessionStorage.clear()
+  }
+}

src/utils/md5.ts

@@ -1,251 +1,229 @@
-var KEY = "!@#QWERT";
+const KEY = '!@#QWERT'
 /*
  * Configurable variables. You may need to tweak these to be compatible with
  * the server-side, but the defaults work in most cases.
  */
-var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
-var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */
-var chrsz   = 8;  /* bits per input character. 8 - ASCII; 16 - Unicode      */
+const hexcase = 0 /* hex output format. 0 - lowercase; 1 - uppercase        */
+const b64pad = '' /* base-64 pad character. "=" for strict RFC compliance   */
+const chrsz = 8 /* bits per input character. 8 - ASCII; 16 - Unicode      */
 
 /*
  * These are the functions you'll usually want to call
  * They take string arguments and return either hex or base-64 encoded strings
  */
 function md5(s) {
-    return hex_md5(s);
+  return hex_md5(s)
 }
-function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
-function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
-function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
-function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
-function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
-function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
+function hex_md5(s) { return binl2hex(core_md5(str2binl(s), s.length * chrsz)) }
+function b64_md5(s) { return binl2b64(core_md5(str2binl(s), s.length * chrsz)) }
+function str_md5(s) { return binl2str(core_md5(str2binl(s), s.length * chrsz)) }
+function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)) }
+function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)) }
+function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)) }
 
 /*
  * Perform a simple self-test to see if the VM is working
  */
-function md5_vm_test()
-{
-    return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
+function md5_vm_test() {
+  return hex_md5('abc') == '900150983cd24fb0d6963f7d28e17f72'
 }
 
 /*
  * Calculate the MD5 of an array of little-endian words, and a bit length
  */
-function core_md5(x, len)
-{
-    /* append padding */
-    x[len >> 5] |= 0x80 << ((len) % 32);
-    x[(((len + 64) >>> 9) << 4) + 14] = len;
-
-    var a =  1732584193;
-    var b = -271733879;
-    var c = -1732584194;
-    var d =  271733878;
-
-    for(var i = 0; i < x.length; i += 16)
-    {
-        var olda = a;
-        var oldb = b;
-        var oldc = c;
-        var oldd = d;
-
-        a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
-        d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
-        c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
-        b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
-        a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
-        d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
-        c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
-        b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
-        a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
-        d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
-        c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
-        b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
-        a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
-        d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
-        c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
-        b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
-
-        a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
-        d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
-        c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
-        b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
-        a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
-        d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
-        c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
-        b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
-        a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
-        d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
-        c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
-        b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
-        a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
-        d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
-        c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
-        b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
-
-        a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
-        d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
-        c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
-        b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
-        a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
-        d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
-        c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
-        b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
-        a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
-        d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
-        c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
-        b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
-        a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
-        d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
-        c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
-        b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
-
-        a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
-        d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
-        c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
-        b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
-        a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
-        d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
-        c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
-        b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
-        a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
-        d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
-        c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
-        b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
-        a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
-        d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
-        c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
-        b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
-
-        a = safe_add(a, olda);
-        b = safe_add(b, oldb);
-        c = safe_add(c, oldc);
-        d = safe_add(d, oldd);
-    }
-    return Array(a, b, c, d);
-
+function core_md5(x, len) {
+  /* append padding */
+  x[len >> 5] |= 0x80 << ((len) % 32)
+  x[(((len + 64) >>> 9) << 4) + 14] = len
+
+  let a = 1732584193
+  let b = -271733879
+  let c = -1732584194
+  let d = 271733878
+
+  for (let i = 0; i < x.length; i += 16) {
+    const olda = a
+    const oldb = b
+    const oldc = c
+    const oldd = d
+
+    a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936)
+    d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586)
+    c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819)
+    b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330)
+    a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897)
+    d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426)
+    c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341)
+    b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983)
+    a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416)
+    d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417)
+    c = md5_ff(c, d, a, b, x[i + 10], 17, -42063)
+    b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162)
+    a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682)
+    d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101)
+    c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290)
+    b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329)
+
+    a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510)
+    d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632)
+    c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713)
+    b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302)
+    a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691)
+    d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083)
+    c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335)
+    b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848)
+    a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438)
+    d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690)
+    c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961)
+    b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501)
+    a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467)
+    d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784)
+    c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473)
+    b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734)
+
+    a = md5_hh(a, b, c, d, x[i + 5], 4, -378558)
+    d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463)
+    c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562)
+    b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556)
+    a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060)
+    d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353)
+    c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632)
+    b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640)
+    a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174)
+    d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222)
+    c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979)
+    b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189)
+    a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487)
+    d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835)
+    c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520)
+    b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651)
+
+    a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844)
+    d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415)
+    c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905)
+    b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055)
+    a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571)
+    d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606)
+    c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523)
+    b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799)
+    a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359)
+    d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744)
+    c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380)
+    b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649)
+    a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070)
+    d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379)
+    c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259)
+    b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551)
+
+    a = safe_add(a, olda)
+    b = safe_add(b, oldb)
+    c = safe_add(c, oldc)
+    d = safe_add(d, oldd)
+  }
+  return [a, b, c, d]
 }
 
 /*
  * These functions implement the four basic operations the algorithm uses.
  */
-function md5_cmn(q, a, b, x, s, t)
-{
-    return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
+function md5_cmn(q, a, b, x, s, t) {
+  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)
 }
-function md5_ff(a, b, c, d, x, s, t)
-{
-    return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
+function md5_ff(a, b, c, d, x, s, t) {
+  return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t)
 }
-function md5_gg(a, b, c, d, x, s, t)
-{
-    return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
+function md5_gg(a, b, c, d, x, s, t) {
+  return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t)
 }
-function md5_hh(a, b, c, d, x, s, t)
-{
-    return md5_cmn(b ^ c ^ d, a, b, x, s, t);
+function md5_hh(a, b, c, d, x, s, t) {
+  return md5_cmn(b ^ c ^ d, a, b, x, s, t)
 }
-function md5_ii(a, b, c, d, x, s, t)
-{
-    return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
+function md5_ii(a, b, c, d, x, s, t) {
+  return md5_cmn(c ^ (b | (~d)), a, b, x, s, t)
 }
 
 /*
  * Calculate the HMAC-MD5, of a key and some data
  */
-function core_hmac_md5(key, data)
-{
-    var bkey = str2binl(key);
-    if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
-
-    var ipad = Array(16), opad = Array(16);
-    for(var i = 0; i < 16; i++)
-    {
-        ipad[i] = bkey[i] ^ 0x36363636;
-        opad[i] = bkey[i] ^ 0x5C5C5C5C;
-    }
-
-    var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
-    return core_md5(opad.concat(hash), 512 + 128);
+function core_hmac_md5(key, data) {
+  let bkey = str2binl(key)
+  if (bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz)
+
+  const ipad = Array(16); const opad = Array(16)
+  for (let i = 0; i < 16; i++) {
+    ipad[i] = bkey[i] ^ 0x36363636
+    opad[i] = bkey[i] ^ 0x5C5C5C5C
+  }
+
+  const hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz)
+  return core_md5(opad.concat(hash), 512 + 128)
 }
 
 /*
  * Add integers, wrapping at 2^32. This uses 16-bit operations internally
  * to work around bugs in some JS interpreters.
  */
-function safe_add(x, y)
-{
-    var lsw = (x & 0xFFFF) + (y & 0xFFFF);
-    var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
-    return (msw << 16) | (lsw & 0xFFFF);
+function safe_add(x, y) {
+  const lsw = (x & 0xFFFF) + (y & 0xFFFF)
+  const msw = (x >> 16) + (y >> 16) + (lsw >> 16)
+  return (msw << 16) | (lsw & 0xFFFF)
 }
 
 /*
  * Bitwise rotate a 32-bit number to the left.
  */
-function bit_rol(num, cnt)
-{
-    return (num << cnt) | (num >>> (32 - cnt));
+function bit_rol(num, cnt) {
+  return (num << cnt) | (num >>> (32 - cnt))
 }
 
 /*
  * Convert a string to an array of little-endian words
  * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
  */
-function str2binl(str)
-{
-    var bin = Array();
-    var mask = (1 << chrsz) - 1;
-    for(var i = 0; i < str.length * chrsz; i += chrsz)
-        bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
-    return bin;
+function str2binl(str) {
+  const bin = []
+  const mask = (1 << chrsz) - 1
+  for (let i = 0; i < str.length * chrsz; i += chrsz) { bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32) }
+  return bin
 }
 
 /*
  * Convert an array of little-endian words to a string
  */
-function binl2str(bin)
-{
-    var str = "";
-    var mask = (1 << chrsz) - 1;
-    for(var i = 0; i < bin.length * 32; i += chrsz)
-        str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
-    return str;
+function binl2str(bin) {
+  let str = ''
+  const mask = (1 << chrsz) - 1
+  for (let i = 0; i < bin.length * 32; i += chrsz) { str += String.fromCharCode((bin[i >> 5] >>> (i % 32)) & mask) }
+  return str
 }
 
 /*
  * Convert an array of little-endian words to a hex string.
  */
-function binl2hex(binarray)
-{
-    var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
-    var str = "";
-    for(var i = 0; i < binarray.length * 4; i++)
-    {
-        str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
-            hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
-    }
-    return str;
+function binl2hex(binarray) {
+  const hex_tab = hexcase ? '0123456789ABCDEF' : '0123456789abcdef'
+  let str = ''
+  for (let i = 0; i < binarray.length * 4; i++) {
+    str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
+            hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF)
+  }
+  return str
 }
 
 /*
  * Convert an array of little-endian words to a base-64 string
  */
-function binl2b64(binarray)
-{
-    var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-    var str = "";
-    for(var i = 0; i < binarray.length * 4; i += 3)
-    {
-        var triplet = (((binarray[i   >> 2] >> 8 * ( i   %4)) & 0xFF) << 16)
-            | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
-            |  ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
-        for(var j = 0; j < 4; j++)
-        {
-            if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
-            else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
-        }
+function binl2b64(binarray) {
+  const tab = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+  let str = ''
+  for (let i = 0; i < binarray.length * 4; i += 3) {
+    const triplet = (((binarray[i >> 2] >> 8 * (i % 4)) & 0xFF) << 16) |
+            (((binarray[i + 1 >> 2] >> 8 * ((i + 1) % 4)) & 0xFF) << 8) |
+            ((binarray[i + 2 >> 2] >> 8 * ((i + 2) % 4)) & 0xFF)
+    for (let j = 0; j < 4; j++) {
+      if (i * 8 + j * 6 > binarray.length * 32) str += b64pad
+      else str += tab.charAt((triplet >> 6 * (3 - j)) & 0x3F)
     }
-    return str;
+  }
+  return str
 }

src/utils/throttle.ts

@@ -1,12 +1,12 @@
-export const throttle = (fu:any,time:number) => {
-    let loading = false
-    return function(){
-        if(loading){
-            fu()
-            loading = true
-            setTimeout(() => {
-                loading = false
-            }, time);
-        }
+export const throttle = (fu:any, time:number) => {
+  let loading = false
+  return function() {
+    if (loading) {
+      fu()
+      loading = true
+      setTimeout(() => {
+        loading = false
+      }, time)
     }
-}
+  }
+}

src/view/m_views/categroy/index.vue

@@ -1,43 +1,49 @@
 <template>
-    <m_header></m_header>
-    <div class="top_select">
-        <van-dropdown-menu>
-            <van-dropdown-item title="类型" ref="item">
-                <van-cell v-for="item in typeArr" :key="item.id" :title="item.name"
-                    :class="{ active: typeIndex === item.id }" @click="selectType('type', item.id)"></van-cell>
-            </van-dropdown-item>
-            <van-dropdown-item title="标签" ref="tag">
-                <van-cell v-for="item in tagArr" :key="item.id" :title="item.name"
-                    :class="{ active: tag_idIndex === item.id }" @click="selectType('tag_id', item.id)"></van-cell>
-            </van-dropdown-item>
-            <!-- <van-dropdown-item title="排序" ref="order">
+  <m-header/>
+  <div class="top_select">
+    <van-dropdown-menu>
+      <van-dropdown-item title="类型" ref="item">
+        <van-cell v-for="item in typeArr"
+                  :key="item.id"
+                  :title="item.name"
+                  :class="{ active: typeIndex === item.id }"
+                  @click="selectType('type', item.id)"/>
+      </van-dropdown-item>
+      <van-dropdown-item title="标签" ref="tag">
+        <van-cell v-for="item in tagArr"
+                  :key="item.id"
+                  :title="item.name"
+                  :class="{ active: tag_idIndex === item.id }"
+                  @click="selectType('tag_id', item.id)"/>
+      </van-dropdown-item>
+      <!-- <van-dropdown-item title="排序" ref="order">
                 <van-cell v-for="(item, index) in categoryList" :key="index" :title="item.title"
                     :class="{ active: orderIndex === item.id }" @click="selectType('order', index)"></van-cell>
             </van-dropdown-item> -->
-        </van-dropdown-menu>
-    </div>
-    <!-- <MobCateList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" :more="loadMore" :total="total">
+    </van-dropdown-menu>
+  </div>
+  <!-- <MobCateList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" :more="loadMore" :total="total">
     </MobCateList> -->
-    <div v-if="(gameLis.length > 0)">
-        <MobCateList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr">
-        </MobCateList>
-        <div style="padding: 10px;background-color: #f7f7f7;" class="df aic jcc"
-            v-if="params.page * params.pagesize <= gameLis.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 v-if="(gameLis.length > 0)">
+    <mob-cate-list :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr"/>
+    <div style="padding: 10px;background-color: #f7f7f7;"
+         class="df aic jcc"
+         v-if="params.page * params.pagesize <= gameLis.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>
-    <van-empty v-else description="No Data" />
+  </div>
+  <van-empty v-else description="No Data" />
 
-    <van-back-top style="background-color: #ed8c0f;" />
-    <!-- <m_footer></m_footer> -->
+  <van-back-top style="background-color: #ed8c0f;" />
+  <!-- <m_footer></m_footer> -->
 
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { getGameType, getGameTag, getGameList } from '@/api/index'
 import MobCateList from '@/components/MobCateList.vue'
 import Message from '@/utils/Message'
@@ -49,7 +55,6 @@ const typeArr: any = ref([])
 const tagArr: any = ref([])
 const prefix = ref<string>('')
 const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
 const total = ref<number>(0)
 const item: any = ref(null)
 const tag: any = ref(null)
@@ -61,90 +66,88 @@ interface Params {
     pagesize: number
 }
 const params = reactive<Params>({
-    type: 0,
-    tag_id: 0,
-    page: 1,
-    pagesize: 15
+  type: 0,
+  tag_id: 0,
+  page: 1,
+  pagesize: 15
 })
 
-onMounted(async () => {
-    await getGameType().then(res => {
-        // console.log('类型', res);
-        typeArr.value = res.data.data
-        typeArr.value.unshift({ id: 0, name: '全部' })
-    })
-    await getGameTag().then(res => {
-        // console.log('标签', res);
-        tagArr.value = res.data.data
-        tagArr.value.unshift({ id: 0, name: '全部' })
-    })
-    getGameLists(params)
+onMounted(async() => {
+  await getGameType().then(res => {
+    // console.log('类型', res);
+    typeArr.value = res.data.data
+    typeArr.value.unshift({ id: 0, name: '全部' })
+  })
+  await getGameTag().then(res => {
+    // console.log('标签', res);
+    tagArr.value = res.data.data
+    tagArr.value.unshift({ id: 0, name: '全部' })
+  })
+  getGameLists(params)
 })
 
 // 初始化列表数据
-const getGameLists = async (params) => {
-    // console.log('参数', params);
+const getGameLists = async(params) => {
+  // console.log('参数', params);
 
-    await getGameList(params).then(res => {
-        // console.log('数据', res);
-        if (res.data.code === 200 && res.data.data) {
-            gameLis.value = gameLis.value.concat(res.data.data.lists)
-            total.value = res.data.data.total
-            prefix.value = res.data.data.prefix
-            isLoading.value = false
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
+  await getGameList(params).then(res => {
+    // console.log('数据', res);
+    if (res.data.code === 200 && res.data.data) {
+      gameLis.value = gameLis.value.concat(res.data.data.lists)
+      total.value = res.data.data.total
+      prefix.value = res.data.data.prefix
+      isLoading.value = false
+    }
+  }).catch(err => {
+    Message.error(err.data.msg)
+  })
 }
 
 // 点击类型、标签、排序
 const selectType = (type: any, index: any) => {
-    gameLis.value = []
-    params.page = 1
-    if (type === 'type') {
-        typeIndex.value = index
-        params.type = index
-        item.value.toggle()
-    }
-    if (type === 'tag_id') {
-        tag_idIndex.value = index
-        params.tag_id = index
-        tag.value.toggle()
-    }
-    if (params.type === 0 && params.tag_id === 0) {
-        params.pagesize = 15
-        getGameLists(params)
-    } else {
-        allData()
-    }
+  gameLis.value = []
+  params.page = 1
+  if (type === 'type') {
+    typeIndex.value = index
+    params.type = index
+    item.value.toggle()
+  }
+  if (type === 'tag_id') {
+    tag_idIndex.value = index
+    params.tag_id = index
+    tag.value.toggle()
+  }
+  if (params.type === 0 && params.tag_id === 0) {
+    params.pagesize = 15
+    getGameLists(params)
+  } else {
+    allData()
+  }
 }
 // 全部数据
-const allData = async () => {
-    params.pagesize = total.value
-    // console.log('params', params);
-    await getGameList(params).then(resp => {
-        // console.log('resp===>', resp);
-        if (resp.data.code === 200 && resp.data.data) {
-            gameLis.value = resp.data.data.lists.filter(item => {
-                if (params.tag_id === 0) {
-                    return item.type === params.type
-                }
-                else if (params.type === 0) {
-                    return item.tags.includes(params.tag_id)
-                }
-                else return item.type === params.type && item.tags.includes(params.tag_id)
-            })
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
+const allData = async() => {
+  params.pagesize = total.value
+  // console.log('params', params);
+  await getGameList(params).then(resp => {
+    // console.log('resp===>', resp);
+    if (resp.data.code === 200 && resp.data.data) {
+      gameLis.value = resp.data.data.lists.filter(item => {
+        if (params.tag_id === 0) {
+          return item.type === params.type
+        } else if (params.type === 0) {
+          return item.tags.includes(params.tag_id)
+        } else return item.type === params.type && item.tags.includes(params.tag_id)
+      })
+    }
+  }).catch(err => {
+    Message.error(err.data.msg)
+  })
 }
 
 // 加载更多
 const loadMore = () => {
-    params.page += 1
-    getGameLists(params)
+  params.page += 1
+  getGameLists(params)
 }
 </script>
 
@@ -160,4 +163,4 @@ const loadMore = () => {
 :deep(.van-dropdown-menu) {
     width: 100%
 }
-</style>
+</style>

src/view/m_views/ecoin/index.vue

@@ -1,124 +1,119 @@
-<template>
-    <m_header></m_header>
-    <div v-if="token">
-        <div v-if="gameHot.length > 0">
-            <el-table :data="gameHot" style="width: 100%">
-            <el-table-column prop="game_name" label="游戏名称"  />
-           
-            <el-table-column prop="total_ecoin" label="余额" />
-            <el-table-column prop="created_at" label="创建时间" width="180" />
-            <el-table-column prop="modified_at" label="修改时间" width="180" />
-        </el-table>
-            <div class="demo-pagination-block">
-                <el-pagination
-                    v-model:current-page="pageConfig.page"
-                    hide-on-single-page
-                    v-model:page-size="pageConfig.pagesize"
-                    layout="prev, pager, next, jumper,total"
-                    :total="pageConfig.total"
-                    @current-change="handleCurrentChange"
-                />
-            </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-back-top style="background-color: #ed8c0f;" />
-    <!-- <m_footer></m_footer> -->
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue'
-import { userEcoin } from '@/api/index'
-import Message from '@/utils/Message'
-import IndexList from '@/components/IndexList.vue'
-import {parseTime } from '@/utils/index'
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const token = ref<string | null>(localStorage.getItem('token'))
-
-const pageConfig = reactive({
-    page: 1,
-    pagesize: 10,
-    total: 0
-})
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  pageConfig.page = val
-  getTableData()
-}
-const status = ref<any[]>([])
-const getTableData = async() => {
-   const params = {
-    page:pageConfig.page,
-    pagesize: pageConfig.pagesize
-   }
-   await userEcoin(params).then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists || []
-            isLoading.value = false
-            pageConfig.total = res.data.data.total.total || 0
-            status.value = res.data.data.status
-        }
-    }).catch(err => {
-        console.log(err);
-        
-        Message.error(err.data.msg)
-    })
-}
-onMounted(async() => {
-    getTableData()
-})
-const goLogin = () => {
-    router.push({ path: 'm_login' })
-}
-
-</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;
-    }
-}
-.title-length{
-    // flex: ;
-}
-
-</style>
-<style>
-.value-length{
-    flex: 2!important;
-}
-</style>
+<template>
+  <m-header/>
+  <div v-if="token">
+    <div v-if="gameHot.length > 0">
+      <el-table :data="gameHot" style="width: 100%">
+        <el-table-column prop="game_name" label="游戏名称"  />
+
+        <el-table-column prop="total_ecoin" label="余额" />
+        <el-table-column prop="created_at" label="创建时间" width="180" />
+        <el-table-column prop="modified_at" label="修改时间" width="180" />
+      </el-table>
+      <div class="demo-pagination-block">
+        <el-pagination
+          v-model:current-page="pageConfig.page"
+          hide-on-single-page
+          v-model:page-size="pageConfig.pagesize"
+          layout="prev, pager, next, jumper,total"
+          :total="pageConfig.total"
+          @current-change="handleCurrentChange"
+        />
+      </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-back-top style="background-color: #ed8c0f;" />
+  <!-- <m_footer></m_footer> -->
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue'
+import { userEcoin } from '@/api/index'
+import Message from '@/utils/Message'
+import { useRouter } from 'vue-router'
+
+const gameHot: any = ref([])
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const token = ref<string | null>(localStorage.getItem('token'))
+const router = useRouter()
+
+const pageConfig = reactive({
+  page: 1,
+  pagesize: 10,
+  total: 0
+})
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  pageConfig.page = val
+  getTableData()
+}
+const status = ref<any[]>([])
+const getTableData = async() => {
+  const params = {
+    page: pageConfig.page,
+    pagesize: pageConfig.pagesize
+  }
+  await userEcoin(params).then(res => {
+    console.log('热门游戏', res.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameHot.value = res.data.data.lists || []
+      isLoading.value = false
+      pageConfig.total = res.data.data.total.total || 0
+      status.value = res.data.data.status
+    }
+  }).catch(err => {
+    console.log(err)
+
+    Message.error(err.data.msg)
+  })
+}
+onMounted(async() => {
+  getTableData()
+})
+const goLogin = () => {
+  router.push({ path: 'm_login' })
+}
+
+</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>

src/view/m_views/index/index.vue

@@ -1,221 +1,227 @@
-<template>
-    <div id="index">
-        <!-- 顶部搜索栏 -->
-        <div class="top_nav df aic jcsb">
-            <div class="left_title df aic">
-                <img v-if="VITEPLA === 'QingQue'" src="http://gm.nkfzs.com/favicon.ico" />
-                <span v-if="VITEPLA === 'QingQue'">朱雀游戏中心</span>
-                <span v-else>游戏中心</span>
-            </div>
-            <van-search shape='round' @click="router.push({ path: 'm_search' })" />
-        </div>
-
-        <div v-if="VITEPLA === 'QingQue'" class="df aic jcc" style="color: #ed8c0f;margin: 10px auto; font-size: 14px;">客服qq：2885393309</div>
-
-        <!-- 轮播图 -->
-        <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
-            <van-swipe-item v-for="item in listSwiper" :key="item.game_id" class="psr">
-                <img :src="prefix + item.screenshot">
-                <div class="game_card psa df fdc aic">
-                    <img :src="prefix + item.logopic">
-                    <p class="title elli">{{ item.screen_name }}</p>
-                    <van-button :disabled="item.download_url === '' ? true : false" round color="#ed8c0f"
-                        @click="downGame(item.download_url)">下载</van-button>
-                </div>
-            </van-swipe-item>
-        </van-swipe>
-
-
-
-        <!-- 菜单栏 -->
-        <div class="menu_cate df aic jcsa">
-            <div v-for="(item, index) in cateList" :key="index" class="cate_card df fdc aic jcc"
-                @click="toPath(item.pathUrl)">
-                <van-icon :name="item.icon" size="20" class="icon"></van-icon>
-                <span class="title">{{ item.title }}</span>
-            </div>
-        </div>
-
-        <!-- 游戏列表 -->
-        <div class="games">
-            <h3>热门游戏</h3>
-            <MobList :gameLis="list" :prefix="prefix"></MobList>
-            <h3 style="margin-top: 30px;">推荐游戏</h3>
-            <MobList :gameLis="listRecommand" :prefix="prefix"></MobList>
-        </div>
-
-    </div>
-    <van-back-top style="background-color: #ed8c0f;" />
-    <!-- <m_footer></m_footer> -->
-</template>
-
-<script setup lang="ts">
-import { getIndexGameHot, getIndexGameRecommand } from '@/api/index';
-import MobList from '@/components/MobList.vue';
-import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import Message from '@/utils/Message'
-
-const router = useRouter()
-const list: any = ref([])
-const listRecommand: any = ref([])
-const listSwiper: any = ref([])
-const prefix = ref<string>('')
-const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE
-
-interface ICate {
-    title: string,
-    icon: string,
-    pathUrl: string
-}
-const cateList = ref<Array<ICate>>([
-    // { title: '排行', icon: 'medal-o', pathUrl: 'm_rank' },
-    { title: '分类', icon: 'description', pathUrl: 'm_categroy' },
-    { title: '我的游戏', icon: 'user-o', pathUrl: 'm_mine' }
-])
-
-onMounted(async () => {
-    // 热门游戏
-    await getIndexGameHot().then(res => {
-        if (res.data.code === 200 && res.data.data) {
-            list.value = res.data.data.lists
-            prefix.value = res.data.data.prefix
-        }
-    }).catch(err => {
-        Message.error(err.data)
-    })
-
-    // 推荐游戏
-    await getIndexGameRecommand().then(res => {
-        if (res.data.code === 200 && res.data.data) {
-            listRecommand.value = res.data.data.lists
-            prefix.value = res.data.data.prefix
-        }
-    }).catch(err => {
-        Message.error(err.data)
-    })
-
-    // 轮播图数据
-    await getIndexGameHot().then(res => {
-        // console.log(res);
-        if (res.data.code === 200 && res.data.data) {
-            prefix.value = res.data.data.prefix
-            listSwiper.value = res.data.data.lists.splice(0, 5)
-            // console.log('listSwiper.value', listSwiper.value);
-        }
-    }).catch(err => {
-        Message.error(err.data)
-    })
-})
-
-const toPath = (url: string) => {
-    router.push({ path: url })
-}
-
-const downGame = (url: string) => {
-    // 下载游戏
-    window.open(url)
-    // window.location.href = url;
-}
-</script>
-
-<style lang="scss" scoped>
-#index {
-    box-sizing: border-box;
-    padding: 15px;
-    // background: radial-gradient(circle at 0 -10%,#dcf4f7,rgba(220,244,247,0) 50%),radial-gradient(circle at 100% 10%,#e8ebfc,rgba(232,235,252,0) 50%);
-    background: radial-gradient(circle at 0 -20%, #ed8c0f, rgba(255, 255, 255, .6) 25%), radial-gradient(circle at 100% 10%, #eabf85, rgba(255, 255, 255, .6) 50%);
-
-    .top_nav {
-        margin-bottom: 10px;
-
-        .left_title {
-            font-size: 22px;
-        }
-    }
-
-    .game_card {
-        bottom: 10px;
-        right: 10px;
-        width: 80px;
-        box-sizing: border-box;
-
-        img {
-            width: 35px;
-            height: 35px;
-            border-radius: 10px;
-        }
-
-        .title {
-            font-size: 12px;
-            color: #323332;
-            line-height: 14px;
-            margin: 5px 0;
-            width: 95%;
-        }
-
-        .van-button {
-            width: 60px;
-            height: 25px;
-            font-size: 12px;
-        }
-    }
-
-    .menu_cate {
-        margin-top: 10px;
-
-        .cate_card {
-            height: 80px;
-
-            .icon {
-                margin-bottom: 10px;
-            }
-
-            .title {
-                font-size: 16px;
-            }
-        }
-    }
-
-    .games {
-        margin-top: 10px;
-        box-sizing: border-box;
-
-        h3 {
-            font-size: 20px;
-            font-weight: normal;
-            margin-bottom: 8px;
-        }
-    }
-}
-
-:deep(.van-search) {
-    width: 50%;
-    background-color: transparent;
-    border-color: #b1d5ec;
-}
-
-.my-swipe {
-    border-radius: 20px;
-}
-
-.van-swipe-item {
-    color: #fff;
-    font-size: 20px;
-    line-height: 150px;
-    text-align: center;
-    background-color: rgba(237, 140, 15, .3);
-    width: 100%;
-    height: 180px;
-
-    img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: 20px;
-        // background-size: cover;
-        // background-position: center;
-        // background-repeat: no-repeat;
-    }
-}
-</style>
+<template>
+  <div id="index">
+    <!-- 顶部搜索栏 -->
+    <div class="top_nav df aic jcsb">
+      <div class="left_title df aic">
+        <img v-if="VITEPLA === 'QingQue'" src="http://gm.nkfzs.com/favicon.ico" />
+        <span v-if="VITEPLA === 'QingQue'">朱雀游戏中心</span>
+        <span v-else>游戏中心</span>
+      </div>
+      <van-search shape='round' @click="router.push({ path: 'm_search' })" />
+    </div>
+
+    <div v-if="VITEPLA === 'QingQue'" class="df aic jcc" style="color: #ed8c0f;margin: 10px auto; font-size: 14px;">客服qq：2885393309</div>
+
+    <!-- 轮播图 -->
+    <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+      <van-swipe-item v-for="item in listSwiper" :key="item.game_id" class="psr">
+        <img :src="prefix + item.screenshot"/>
+        <div class="game_card psa df fdc aic">
+          <img :src="prefix + item.logopic"/>
+          <p class="title elli">{{ item.screen_name }}</p>
+          <van-button
+            :disabled="item.download_url === '' ? true : false"
+            round
+            color="#ed8c0f"
+            @click="downGame(item.download_url)"
+          >
+            下载
+          </van-button>
+        </div>
+      </van-swipe-item>
+    </van-swipe>
+
+    <!-- 菜单栏 -->
+    <div class="menu_cate df aic jcsa">
+      <div v-for="(item, index) in cateList"
+           :key="index"
+           class="cate_card df fdc aic jcc"
+           @click="toPath(item.pathUrl)">
+        <van-icon :name="item.icon" size="20" class="icon"/>
+        <span class="title">{{ item.title }}</span>
+      </div>
+    </div>
+
+    <!-- 游戏列表 -->
+    <div class="games">
+      <h3>热门游戏</h3>
+      <mob-list :gameLis="list" :prefix="prefix"/>
+      <h3 style="margin-top: 30px;">推荐游戏</h3>
+      <mob-list :gameLis="listRecommand" :prefix="prefix"/>
+    </div>
+
+  </div>
+  <van-back-top style="background-color: #ed8c0f;" />
+  <!-- <m_footer></m_footer> -->
+</template>
+
+<script setup lang="ts">
+import { getIndexGameHot, getIndexGameRecommand } from '@/api/index'
+import MobList from '@/components/MobList.vue'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import Message from '@/utils/Message'
+
+const router = useRouter()
+const list: any = ref([])
+const listRecommand: any = ref([])
+const listSwiper: any = ref([])
+const prefix = ref<string>('')
+const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE
+
+interface ICate {
+    title: string,
+    icon: string,
+    pathUrl: string
+}
+const cateList = ref<Array<ICate>>([
+  // { title: '排行', icon: 'medal-o', pathUrl: 'm_rank' },
+  { title: '分类', icon: 'description', pathUrl: 'm_categroy' },
+  { title: '我的游戏', icon: 'user-o', pathUrl: 'm_mine' }
+])
+
+onMounted(async() => {
+  // 热门游戏
+  await getIndexGameHot().then(res => {
+    if (res.data.code === 200 && res.data.data) {
+      list.value = res.data.data.lists
+      prefix.value = res.data.data.prefix
+    }
+  }).catch(err => {
+    Message.error(err.data)
+  })
+
+  // 推荐游戏
+  await getIndexGameRecommand().then(res => {
+    if (res.data.code === 200 && res.data.data) {
+      listRecommand.value = res.data.data.lists
+      prefix.value = res.data.data.prefix
+    }
+  }).catch(err => {
+    Message.error(err.data)
+  })
+
+  // 轮播图数据
+  await getIndexGameHot().then(res => {
+    // console.log(res);
+    if (res.data.code === 200 && res.data.data) {
+      prefix.value = res.data.data.prefix
+      listSwiper.value = res.data.data.lists.splice(0, 5)
+      // console.log('listSwiper.value', listSwiper.value);
+    }
+  }).catch(err => {
+    Message.error(err.data)
+  })
+})
+
+const toPath = (url: string) => {
+  router.push({ path: url })
+}
+
+const downGame = (url: string) => {
+  // 下载游戏
+  window.open(url)
+  // window.location.href = url;
+}
+</script>
+
+<style lang="scss" scoped>
+#index {
+    box-sizing: border-box;
+    padding: 15px;
+    // background: radial-gradient(circle at 0 -10%,#dcf4f7,rgba(220,244,247,0) 50%),radial-gradient(circle at 100% 10%,#e8ebfc,rgba(232,235,252,0) 50%);
+    background: radial-gradient(circle at 0 -20%, #ed8c0f, rgba(255, 255, 255, .6) 25%), radial-gradient(circle at 100% 10%, #eabf85, rgba(255, 255, 255, .6) 50%);
+
+    .top_nav {
+        margin-bottom: 10px;
+
+        .left_title {
+            font-size: 22px;
+        }
+    }
+
+    .game_card {
+        bottom: 10px;
+        right: 10px;
+        width: 80px;
+        box-sizing: border-box;
+
+        img {
+            width: 35px;
+            height: 35px;
+            border-radius: 10px;
+        }
+
+        .title {
+            font-size: 12px;
+            color: #323332;
+            line-height: 14px;
+            margin: 5px 0;
+            width: 95%;
+        }
+
+        .van-button {
+            width: 60px;
+            height: 25px;
+            font-size: 12px;
+        }
+    }
+
+    .menu_cate {
+        margin-top: 10px;
+
+        .cate_card {
+            height: 80px;
+
+            .icon {
+                margin-bottom: 10px;
+            }
+
+            .title {
+                font-size: 16px;
+            }
+        }
+    }
+
+    .games {
+        margin-top: 10px;
+        box-sizing: border-box;
+
+        h3 {
+            font-size: 20px;
+            font-weight: normal;
+            margin-bottom: 8px;
+        }
+    }
+}
+
+:deep(.van-search) {
+    width: 50%;
+    background-color: transparent;
+    border-color: #b1d5ec;
+}
+
+.my-swipe {
+    border-radius: 20px;
+}
+
+.van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+    background-color: rgba(237, 140, 15, .3);
+    width: 100%;
+    height: 180px;
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+        // background-size: cover;
+        // background-position: center;
+        // background-repeat: no-repeat;
+    }
+}
+</style>

src/view/m_views/login/index.vue

@@ -1,48 +1,84 @@
 <template>
-    <div class="login">
-        <div  class="logo">
-            <img v-if="VITEPLA === 'QingQue'" src="@/assets/img/logo.png" class="img">
-        </div>
-        <div class="input">
-            <van-form @submit="submitForm" >
-                <van-tabs v-model:active="login_typ" @change="resetForm">
-                    <van-tab title="密码登录" name="pwd"></van-tab>
-                    <van-tab title="验证码登录" name="sms"></van-tab>
-                </van-tabs>
-                <van-field v-if="login_typ === 'pwd'" style="font-size: 16px;" v-model="loginForm.account" name="用户名" label="用户名"
-                    placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
-                <van-field v-else-if="login_typ === 'sms'" type="tel" style="font-size: 16px;" v-model="loginForm.account" name="手机号" label="手机号"
-                    placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
-                <van-field v-if="login_typ === 'pwd'" style="font-size: 16px;" v-model="loginForm.password" type="password" name="密码"
-                    label="密&emsp;码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
-                <van-field v-else-if="login_typ === 'sms'" style="font-size: 16px;" v-model="loginForm.smsCaptcha" type="number" name="密码"
-                    label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]">
-                    <template #button>
-                        <van-button size="small" type="primary" style="width: 20vw;" :disabled="!can_send || loginForm.account.length!==11" @click="getCaptcha">{{ smsMessage }}</van-button>
-                    </template>
-                </van-field>
-                <van-field style="font-size: 16px;" v-model="loginForm.password" type="hidden" id="md5_password" />
-                <div style="margin: 20px;" class="df jcsb aic">
-                    <van-button round type="primary" color="rgba(25, 137, 250, .7)" plain
-                        style=" width: 45%;height: 38px;font-size: 16px;background-color: rgba(25, 137, 250, .1);"
-                        @click="resetForm">重&emsp;置</van-button>
-                    <van-button type="primary" color="rgba(237, 140, 15, .7)" plain round native-type="submit"
-                        style="width: 45%;height: 38px;font-size: 16px;background-color: rgba(237, 140, 15, .1);">登&emsp;录</van-button>
-                </div>
-            </van-form>
+  <div class="login">
+    <div  class="logo">
+      <img v-if="VITEPLA === 'QingQue'" src="@/assets/img/logo.png" class="img"/>
+    </div>
+    <div class="input">
+      <van-form @submit="submitForm" >
+        <van-tabs v-model:active="login_typ" @change="resetForm">
+          <van-tab title="密码登录" name="pwd"/>
+          <van-tab title="验证码登录" name="sms"/>
+        </van-tabs>
+        <van-field
+          v-if="login_typ === 'pwd'"
+          style="font-size: 16px;"
+          v-model="loginForm.account"
+          name="用户名"
+          label="用户名"
+          placeholder="请输入用户名"
+          :rules="[{ required: true, message: '请填写用户名' }]" />
+        <van-field
+          v-else-if="login_typ === 'sms'"
+          type="tel"
+          style="font-size: 16px;"
+          v-model="loginForm.account"
+          name="手机号"
+          label="手机号"
+          placeholder="请输入手机号"
+          :rules="[{ required: true, message: '请填写手机号' }]" />
+        <van-field
+          v-if="login_typ === 'pwd'"
+          style="font-size: 16px;"
+          v-model="loginForm.password"
+          type="password"
+          name="密码"
+          label="密&emsp;码"
+          placeholder="请输入密码"
+          :rules="[{ required: true, message: '请填写密码' }]" />
+        <van-field
+          v-else-if="login_typ === 'sms'"
+          style="font-size: 16px;"
+          v-model="loginForm.smsCaptcha"
+          type="number"
+          name="密码"
+          label="验证码"
+          placeholder="请输入验证码"
+          :rules="[{ required: true, message: '请填写验证码' }]">
+          <template #button>
+            <van-button size="small" type="primary" style="width: 20vw;" :disabled="!can_send || loginForm.account.length!==11" @click="getCaptcha">{{ smsMessage }}</van-button>
+          </template>
+        </van-field>
+        <van-field style="font-size: 16px;" v-model="loginForm.password" type="hidden" id="md5_password" />
+        <div style="margin: 20px;" class="df jcsb aic">
+          <van-button
+            round
+            type="primary"
+            color="rgba(25, 137, 250, .7)"
+            plain
+            style=" width: 45%;height: 38px;font-size: 16px;background-color: rgba(25, 137, 250, .1);"
+            @click="resetForm">重&emsp;置</van-button>
+          <van-button
+            type="primary"
+            color="rgba(237, 140, 15, .7)"
+            plain
+            round
+            native-type="submit"
+            style="width: 45%;height: 38px;font-size: 16px;background-color: rgba(237, 140, 15, .1);">登&emsp;录</van-button>
         </div>
+      </van-form>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onMounted } from 'vue';
-import { getUserLogin, captchaLogin, getCaptchaHttp, userProfile } from '@/api/index'
+import { reactive, ref, onMounted } from 'vue'
+import { getUserLogin, captchaLogin, getCaptchaHttp } from '@/api/index'
 import Message from '@/utils/Message'
 import { useRouter } from 'vue-router'
 import { useStore } from '@/store/index'
-import local from '@/utils/local';
+import local from '@/utils/local'
 import checkRestTime from '@/utils/captcha'
-import { showSuccessToast, showFailToast } from 'vant';
+import { showSuccessToast, showFailToast } from 'vant'
 const user = useStore('user')
 const router = useRouter()
 const login_typ = ref<'pwd'| 'sms'>('pwd')
@@ -58,118 +94,114 @@ interface login {
     smsCaptcha:number | undefined
 }
 const loginForm = reactive<login>({
-    account: '',
-    password: '',
-    timestamp: parseInt(`${Date.now() / 1000}`),
-    smsCaptcha: undefined
+  account: '',
+  password: '',
+  timestamp: parseInt(`${Date.now() / 1000}`),
+  smsCaptcha: undefined
 })
-const from = ref<1 | 2>(1)
-const submitForm = async () => {
-    console.log(login_typ.value);
-    
-    if(login_typ.value === 'pwd'){
-        // 登录密码加密
-        let md5Pwd: any = document.querySelector('#md5_password')
-        md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
+const submitForm = async() => {
+  console.log(login_typ.value)
 
-        const params = {
-            account: loginForm.account,
-            password: md5Pwd,
-            timestamp: loginForm.timestamp
-        }
-        await getUserLogin(params).then(async(res) => {
-            // console.log('res---->', res);
-            if (res.data.code === 200) {
-                Message.success('登录成功')
-                // 保存用户信息 和 token
-                localStorage.setItem('token', res.data.data.token)
-                localStorage.setItem('account', loginForm.account)
-                localStorage.setItem('from', '1')
-                await user.getUserProfile()
+  if (login_typ.value === 'pwd') {
+    // 登录密码加密
+    let md5Pwd: any = document.querySelector('#md5_password')
+    md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
 
-                // 浏览器记住账户和密码
-                // window.sessionStorage.setItem('token', res.data.data.token)
-                // window.sessionStorage.setItem('account', loginForm.account)
-                // window.sessionStorage.setItem('password', loginForm.password)
-                // 跳转我的游戏页面
-                setTimeout(() => {
-                    router.push({ path: '/m_mine', query: { account: loginForm.account } })
-                    local.set('headerPath', '我的')
-                }, 1000);
-            }
-        }).catch(err => {
-            // console.log('err===>', err);
-            Message.error(err.data.msg)
-        })
-    }else if(login_typ.value === 'sms'){
-        const params = {
-            mobile: loginForm.account,
-            captcha: loginForm.smsCaptcha
-        }
-        console.log(params);
-        
-        await captchaLogin(params).then(async(res) => {
-            console.log(res)
-            if (res.data.code === 200) {
-                showSuccessToast('登录成功');
-                localStorage.setItem('token', res.data.data.token)
-                localStorage.setItem('account', loginForm.account)
-                localStorage.setItem('from', '2')
-                await user.getUserProfile()
-                setTimeout(() => {
-                    router.push({ path: '/m_mine', query: { account: loginForm.account } })
-                    local.set('headerPath', '我的')
-                }, 1000);
-            }
-            
-        }).catch((error) => {
-            console.log(error)
-            showFailToast(error.data.msg)
-        })
+    const params = {
+      account: loginForm.account,
+      password: md5Pwd,
+      timestamp: loginForm.timestamp
+    }
+    await getUserLogin(params).then(async(res) => {
+      // console.log('res---->', res);
+      if (res.data.code === 200) {
+        Message.success('登录成功')
+        // 保存用户信息 和 token
+        localStorage.setItem('token', res.data.data.token)
+        localStorage.setItem('account', loginForm.account)
+        localStorage.setItem('from', '1')
+        await user.getUserProfile()
+
+        // 浏览器记住账户和密码
+        // window.sessionStorage.setItem('token', res.data.data.token)
+        // window.sessionStorage.setItem('account', loginForm.account)
+        // window.sessionStorage.setItem('password', loginForm.password)
+        // 跳转我的游戏页面
+        setTimeout(() => {
+          router.push({ path: '/m_mine', query: { account: loginForm.account }})
+          local.set('headerPath', '我的')
+        }, 1000)
+      }
+    }).catch(err => {
+      // console.log('err===>', err);
+      Message.error(err.data.msg)
+    })
+  } else if (login_typ.value === 'sms') {
+    const params = {
+      mobile: loginForm.account,
+      captcha: loginForm.smsCaptcha
     }
-    
+    console.log(params)
+
+    await captchaLogin(params).then(async(res) => {
+      console.log(res)
+      if (res.data.code === 200) {
+        showSuccessToast('登录成功')
+        localStorage.setItem('token', res.data.data.token)
+        localStorage.setItem('account', loginForm.account)
+        localStorage.setItem('from', '2')
+        await user.getUserProfile()
+        setTimeout(() => {
+          router.push({ path: '/m_mine', query: { account: loginForm.account }})
+          local.set('headerPath', '我的')
+        }, 1000)
+      }
+    }).catch((error) => {
+      console.log(error)
+      showFailToast(error.data.msg)
+    })
+  }
 }
 
 const resetForm = () => {
-    loginForm.account = ''
-    loginForm.password = '',
-    loginForm.smsCaptcha = undefined
+  loginForm.account = ''
+  loginForm.password = '',
+  loginForm.smsCaptcha = undefined
 }
 const getCaptcha = async() => {
-    await getCaptchaHttp({mobile: loginForm.account}).then((res) => {
-        console.log(res)
-        can_send.value = false
-        smsMessage.value = VALID
-        settimes()
-        sessionStorage.setItem('LOGIN_CAPTCHA', Math.round(new Date().getTime() / 1000).toString())
-        showSuccessToast('验证码已发送，请注意查收');
-    }).catch((error) => {
-        console.log(error)
-        showFailToast(error.data.msg)
-    })
-   
+  await getCaptchaHttp({ mobile: loginForm.account }).then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    sessionStorage.setItem('LOGIN_CAPTCHA', Math.round(new Date().getTime() / 1000).toString())
+    showSuccessToast('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
 }
 const settimes = () => {
-    var interval
-    const setTimeFn = () => {
-        (smsMessage.value as number)--
-        if (smsMessage.value as number < 0 || can_send.value === true) {
-            clearInterval(interval)
-            can_send.value = true
-            smsMessage.value = '获取验证码'
-        }
+  var interval
+  const setTimeFn = () => {
+    (smsMessage.value as number)--
+    if (smsMessage.value as number < 0 || can_send.value === true) {
+      clearInterval(interval)
+      can_send.value = true
+      smsMessage.value = '获取验证码'
     }
-    interval = setInterval(function() {
-        setTimeFn()
-    }, 1000)
+  }
+  interval = setInterval(function() {
+    setTimeFn()
+  }, 1000)
 }
 onMounted(() => {
-    let res = checkRestTime('LOGIN_CAPTCHA', VALID)
-    if(res){
-        smsMessage.value = res
-        can_send.value = false
-        settimes()
-    }
+  const res = checkRestTime('LOGIN_CAPTCHA', VALID)
+  if (res) {
+    smsMessage.value = res
+    can_send.value = false
+    settimes()
+  }
 })
 </script>
 
@@ -194,4 +226,4 @@ onMounted(() => {
         margin-top: 10vw;
     }
 }
-</style>
+</style>

src/view/m_views/mine/index.vue

@@ -1,204 +1,200 @@
-<template>
-    <m_header></m_header>
-    <div v-if="token">
-        <div v-if="mineGame.length > 0">
-            <div style="padding:15px">
-                <MobList :gameLis="mineGame" :prefix="prefix">
-                    <template #custom-button="scope">
-                        <div>
-                            <van-button round color="#ed8c0f" @click="showGifts(scope.row)">查看礼包</van-button>
-                        </div>
-                    </template>
-                </MobList>
-            </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> -->
-</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 Message from '@/utils/Message'
-import MobList from '@/components/MobList.vue';
-import { useStore } from '@/store/index'
-import { showSuccessToast, showFailToast } 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;
-    }
-}
-.title-length{
-    // flex: ;
-}
-
-</style>
-<style>
-.value-length{
-    flex: 2!important;
-}
-</style>
+<template>
+  <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> -->
+</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>

src/view/m_views/ncoin/index.vue

@@ -1,127 +1,118 @@
-<template>
-    <m_header></m_header>
-    <div v-if="token">
-        <div v-if="gameHot.length > 0">
-            <el-table :data="gameHot" style="width: 100%">
-            <el-table-column prop="game_name" label="游戏名称"  />
-           
-            <el-table-column prop="total_coin" label="余额" />
-            <el-table-column prop="created_at" label="创建时间" width="180" />
-            <el-table-column prop="modified_at" label="修改时间" width="180" />
-        </el-table>
-            <div class="demo-pagination-block">
-                <el-pagination
-                    v-model:current-page="pageConfig.page"
-                    hide-on-single-page
-                    v-model:page-size="pageConfig.pagesize"
-                    layout="prev, pager, next, jumper,total"
-                    :total="pageConfig.total"
-                    @current-change="handleCurrentChange"
-                />
-            </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-back-top style="background-color: #ed8c0f;" />
-    <!-- <m_footer></m_footer> -->
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue'
-import { userNcoin } from '@/api/index'
-import Message from '@/utils/Message'
-import {parseTime } from '@/utils/index'
-import { useStore } from '@/store/index'
-import { useRouter } from 'vue-router'
-
-
-const token = ref<string | null>(localStorage.getItem('token'))
-const user = useStore('user')
-const router = useRouter()
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const pageConfig = reactive({
-    page: 1,
-    pagesize: 10,
-    total: 0
-})
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  pageConfig.page = val
-  getTableData()
-}
-const getTableData = async() => {
-   const params = {
-    page:pageConfig.page,
-    pagesize: pageConfig.pagesize
-   }
-   await userNcoin(params).then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists || []
-            isLoading.value = false
-            pageConfig.total = res.data.data.total || 0
-        }
-    }).catch(err => {
-        console.log(err);
-        
-        Message.error(err.data.msg)
-    })
-}
-onMounted(async() => {
-    getTableData()
-})
-const goLogin = () => {
-    router.push({ path: 'm_login' })
-}
-
-
-</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;
-    }
-}
-.title-length{
-    // flex: ;
-}
-
-</style>
-<style>
-.value-length{
-    flex: 2!important;
-}
-</style>
+<template>
+  <m-header/>
+  <div v-if="token">
+    <div v-if="gameHot.length > 0">
+      <el-table :data="gameHot" style="width: 100%">
+        <el-table-column prop="game_name" label="游戏名称"  />
+
+        <el-table-column prop="total_coin" label="余额" />
+        <el-table-column prop="created_at" label="创建时间" width="180" />
+        <el-table-column prop="modified_at" label="修改时间" width="180" />
+      </el-table>
+      <div class="demo-pagination-block">
+        <el-pagination
+          v-model:current-page="pageConfig.page"
+          hide-on-single-page
+          v-model:page-size="pageConfig.pagesize"
+          layout="prev, pager, next, jumper,total"
+          :total="pageConfig.total"
+          @current-change="handleCurrentChange"
+        />
+      </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-back-top style="background-color: #ed8c0f;" />
+  <!-- <m_footer></m_footer> -->
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue'
+import { userNcoin } from '@/api/index'
+import Message from '@/utils/Message'
+// import { useStore } from '@/store/index'
+import { useRouter } from 'vue-router'
+
+const token = ref<string | null>(localStorage.getItem('token'))
+const router = useRouter()
+
+const gameHot: any = ref([])
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const pageConfig = reactive({
+  page: 1,
+  pagesize: 10,
+  total: 0
+})
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  pageConfig.page = val
+  getTableData()
+}
+const getTableData = async() => {
+  const params = {
+    page: pageConfig.page,
+    pagesize: pageConfig.pagesize
+  }
+  await userNcoin(params).then(res => {
+    console.log('热门游戏', res.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameHot.value = res.data.data.lists || []
+      isLoading.value = false
+      pageConfig.total = res.data.data.total || 0
+    }
+  }).catch(err => {
+    console.log(err)
+
+    Message.error(err.data.msg)
+  })
+}
+onMounted(async() => {
+  getTableData()
+})
+const goLogin = () => {
+  router.push({ path: 'm_login' })
+}
+
+</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>

src/view/m_views/order/index.vue

@@ -1,156 +1,146 @@
-<template>
-    <m_header></m_header>
-    <div v-if="token">
-        <div v-if="gameHot.length > 0">
-            <el-table :data="gameHot" style="width: 100%">
-                <el-table-column prop="order_number" label="订单号" width="180"/>
-                <el-table-column prop="appname" label="游戏名称"  />
-                <el-table-column prop="game_product_name" label="道具名称"  />
-                <el-table-column prop="order_amount" label="道具数量" />
-                <el-table-column prop="order_submit_time" label="创建时间" width="180">
-                    <template #default="scope">
-                        <div>
-                            {{ parseTime(scope.row.order_submit_time) }}
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="order_asynch_time" label="付款时间" width="180">
-                    <template #default="scope">
-                        <div>
-                            {{ scope.row.order_asynch_time? parseTime(scope.row.order_asynch_time):'-' }}
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="channel_name" label="支付方式" />
-                <el-table-column prop="order_submit_time" label="订单状态" >
-                    <template #default="scope">
-                        <div>
-                            {{ status[scope.row.order_status] }}
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="target_role_id" label="游戏订单号" width="180"/>
-                <el-table-column prop="out_trade_no" label="支付平台订单号" width="180" />
-            </el-table>
-            <div class="demo-pagination-block">
-                <el-pagination
-                    v-model:current-page="pageConfig.page"
-                    hide-on-single-page
-                    v-model:page-size="pageConfig.pagesize"
-                    layout="prev, pager, next, jumper,total"
-                    :total="pageConfig.total"
-                    @current-change="handleCurrentChange"
-                />
-            </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-back-top style="background-color: #ed8c0f;" />
-    <!-- <m_footer></m_footer> -->
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import Message from '@/utils/Message'
-import { useStore } from '@/store/index'
-import { showSuccessToast, showFailToast } from 'vant';
-import { userOrder } from '@/api/index'
-import {parseTime } from '@/utils/index'
-
-const router = useRouter()
-const route = useRoute()
-
-const mineGame: any = ref([])
-const total = ref<number>(0)
-const userAccount = ref<string | null>(localStorage.getItem('account'))
-const token = ref<string | null>(localStorage.getItem('token'))
-const user = useStore('user')
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const pageConfig = reactive({
-    page: 1,
-    pagesize: 10,
-    total: 0
-})
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  pageConfig.page = val
-  getTableData()
-}
-const status = ref<any[]>([])
-const getTableData = async() => {
-   const params = {
-    page:pageConfig.page,
-    pagesize: pageConfig.pagesize
-   }
-   await userOrder(params).then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists || []
-            isLoading.value = false
-            pageConfig.total = res.data.data.total.total || 0
-            status.value = res.data.data.status
-        }
-    }).catch(err => {
-        console.log(err);
-        
-        Message.error(err.data.msg)
-    })
-}
-const goLogin = () => {
-    router.push({ path: 'm_login' })
-}
-onMounted(async() => {
-    getTableData()
-})
-
-</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;
-    }
-}
-.title-length{
-    // flex: ;
-}
-
-</style>
-<style>
-.value-length{
-    flex: 2!important;
-}
-</style>
+<template>
+  <m-header/>
+  <div v-if="token">
+    <div v-if="gameHot.length > 0">
+      <el-table :data="gameHot" style="width: 100%">
+        <el-table-column prop="order_number" label="订单号" width="180"/>
+        <el-table-column prop="appname" label="游戏名称"  />
+        <el-table-column prop="game_product_name" label="道具名称"  />
+        <el-table-column prop="order_amount" label="道具数量" />
+        <el-table-column prop="order_submit_time" label="创建时间" width="180">
+          <template #default="scope">
+            <div>
+              {{ parseTime(scope.row.order_submit_time) }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="order_asynch_time" label="付款时间" width="180">
+          <template #default="scope">
+            <div>
+              {{ scope.row.order_asynch_time? parseTime(scope.row.order_asynch_time):'-' }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="channel_name" label="支付方式" />
+        <el-table-column prop="order_submit_time" label="订单状态" >
+          <template #default="scope">
+            <div>
+              {{ status[scope.row.order_status] }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="target_role_id" label="游戏订单号" width="180"/>
+        <el-table-column prop="out_trade_no" label="支付平台订单号" width="180" />
+      </el-table>
+      <div class="demo-pagination-block">
+        <el-pagination
+          v-model:current-page="pageConfig.page"
+          hide-on-single-page
+          v-model:page-size="pageConfig.pagesize"
+          layout="prev, pager, next, jumper,total"
+          :total="pageConfig.total"
+          @current-change="handleCurrentChange"
+        />
+      </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-back-top style="background-color: #ed8c0f;" />
+  <!-- <m_footer></m_footer> -->
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import Message from '@/utils/Message'
+// import { useStore } from '@/store/index'
+import { userOrder } from '@/api/index'
+import { parseTime } from '@/utils/index'
+
+const router = useRouter()
+
+const token = ref<string | null>(localStorage.getItem('token'))
+// const user = useStore('user')
+
+const gameHot: any = ref([])
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const pageConfig = reactive({
+  page: 1,
+  pagesize: 10,
+  total: 0
+})
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  pageConfig.page = val
+  getTableData()
+}
+const status = ref<any[]>([])
+const getTableData = async() => {
+  const params = {
+    page: pageConfig.page,
+    pagesize: pageConfig.pagesize
+  }
+  await userOrder(params).then(res => {
+    console.log('热门游戏', res.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameHot.value = res.data.data.lists || []
+      isLoading.value = false
+      pageConfig.total = res.data.data.total.total || 0
+      status.value = res.data.data.status
+    }
+  }).catch(err => {
+    console.log(err)
+
+    Message.error(err.data.msg)
+  })
+}
+const goLogin = () => {
+  router.push({ path: 'm_login' })
+}
+onMounted(async() => {
+  getTableData()
+})
+
+</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>

src/view/m_views/rank/index.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
-        <m_header></m_header>
-    </div>
+  <div>
+    <m-header/>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -10,4 +10,4 @@
 
 <style scoped>
 
-</style>
+</style>

src/view/m_views/resetPwd/resetPwd.vue

@@ -1,266 +1,264 @@
-<template>
-  <m_header></m_header>
-  <div>
-    <van-divider>设置</van-divider>.
-    <van-tabs>
-      <van-tab title="密码设置">
-        <van-form @submit="onSubmit">
-          <van-cell-group inset>
-            <van-field
-              v-if="from === 1"
-              v-model="ruleForm.old_password"
-              name="旧密码"
-              label="旧密码"
-              type="password"
-              placeholder="请填写旧密码"
-              :rules="[{ required: true, message: '请填写旧密码' },{ validator: checkAge}]"
-            />
-            <van-field
-              v-model="ruleForm.new_password"
-              type="password"
-              name="新密码"
-              label="新密码"
-              placeholder="请填写新密码"
-              :rules="[{ required: true, message: '请填写新密码' },{ validator: checkAge}]"
-            />
-            <van-field
-              v-model="ruleForm.new_password2"
-              type="password"
-              name="新密码"
-              label="新密码"
-              placeholder="请再次填写新密码"
-              :rules="[{ required: true, message: '请再次填写新密码' },{ validator: checkAge}]"
-            />
-          </van-cell-group>
-          <div style="margin: 16px;display: flex;flex-direction: row-reverse;">
-            <van-button style="width: 100%;padding: 10px;" round block type="primary" color="#ed8c0f" native-type="submit">
-              提交
-            </van-button>
-          </div>
-        </van-form>
-      </van-tab>
-      <van-tab title="用户名设置">
-        <van-form @submit="onSubmit2">
-          <van-field
-            v-model="account"
-            type="text"
-            name="用户名"
-            :readonly="!!user.profile.user_name"
-            label="用户名"
-            placeholder="请填写用户名"
-            :rules="[{ required: true, message: '请填写用户名',trigger: 'onBlur' },{ pattern: pattern, message: '请输入以字母为开头，长度为6-20位的用户名'}]"
-          />
-          <div v-if="!user.profile.user_name" style="margin: 16px;display: flex;flex-direction: row-reverse;">
-            <van-button round block style="width: 100%;padding: 10px;" type="primary" color="#ed8c0f" native-type="submit">
-              提交
-            </van-button>
-          </div>
-        </van-form>
-      </van-tab>
-      <van-tab title="手机号设置">
-        <van-form>
-          <van-field
-            v-model="ruleForm3.mobile"
-            type="text"
-            name="手机号"
-            :readonly="!!user.profile.mobile"
-            label="手机号"
-            placeholder="请填写手机号"
-            :rules="[{ required: true, message: '请填写手机号',trigger: 'onBlur' },{ pattern: pattern2, message: '请输入正确手机号'}]"
-          />
-          <van-field  v-model="ruleForm3.captcha" type="number" name="验证码"
-                    label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]">
-              <template #button>
-                  <van-button v-if="!!user.profile.mobile" color="#ed8c0f" size="small" type="primary" style="width: 20vw;" :disabled="!can_send" @click="getCaptcha">{{ smsMessage }}</van-button>
-                  <van-button v-else size="small" color="#ed8c0f" type="primary" style="width: 20vw;" :disabled="!can_send" @click="getCaptcha2">{{ smsMessage }}</van-button>
-              </template>
-          </van-field>
-          <div style="margin: 16px;">
-            <van-button v-if="!!user.profile.mobile" style="width: 100%;padding: 10px;" round block type="primary" color="#ed8c0f" @click="onSubmit3">
-              解绑
-            </van-button>
-            <van-button v-else round block type="primary" style="width: 100%;padding: 10px;" color="#ed8c0f" @click="onSubmit4">
-              绑定
-            </van-button>
-          </div>
-        </van-form>
-      </van-tab>
-    </van-tabs>
-    
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, computed, onBeforeUnmount } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { showSuccessToast, showFailToast } from 'vant';
-import type { FormInstance, FormRules } from 'element-plus'
-import {resetPassword,setPassword, userAccount, unbindCaptcha, clearMobile, bindCaptcha, bindMobile } from '@/api/index'
-import Message from '@/utils/Message'
-import { useStore } from '@/store/index'
-import { ElMessage, ElMessageBox } from 'element-plus'
-const user = useStore('user')
-
-const router = useRouter()
-const route = useRoute()
-// showSuccessToast('成功文案')
-// showFailToast('失败文案')
-const ruleFormRef = ref<FormInstance>()
-interface RuleForm {
-  old_password: string
-  new_password: string
-  new_password2: string
-}
-const ruleForm = reactive<RuleForm>({
-  old_password: '',
-  new_password: '',
-  new_password2: ''
-})
-
-const checkAge = (value:any, rule:any) => {
-  console.log(value, rule);
-  if(value.length < 6 || value.length > 20){
-    return '请输入6-20位密码'
-  }
-  return ''
-}
-
-const onSubmit = async() => {
-  if(ruleForm.new_password2 !== ruleForm.new_password){
-    return showFailToast('两次输入的密码不一致！')
-  }
-  if(from.value === 1){
-    // 账号密码登录
-    await resetPassword({old_pass:ruleForm.old_password, new_pass: ruleForm.new_password}).then((res) => {
-      console.log(res)
-      showSuccessToast(res.data.msg)
-    }).catch((error) => {
-      console.log(error)
-      showFailToast(error.data.msg)
-    })
-  }else if(from.value === 2){
-    await setPassword({new_pass: ruleForm.new_password}).then((res) => {
-      console.log(res)
-      showSuccessToast(res.data.msg)
-    }).catch((error) => {
-      console.log(error)
-      showFailToast(error.data.msg)
-    })
-  }
-};
-const onSubmit2 = async() => {
-  await userAccount({account: account.value.toLowerCase()}).then((res) => {
-    console.log(res)
-    showSuccessToast(res.data.msg)
-    user.getUserProfile()
-  }).catch((error) => {
-    console.log(error)
-    showFailToast(error.data.msg)
-  })
-}
-const pattern = ref<RegExp>(/^[a-zA-Z][a-zA-Z0-9]{5,19}$/)
-const pattern2 = ref<RegExp>(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)
-const from = ref<1 | 2>(1)
-const account = ref<string>('')
-
-const ruleForm3 = reactive({
-  mobile: '',
-  captcha: '',
-})
-const can_send = ref<boolean>(true)
-const smsMessage = ref<'获取验证码' | number>('获取验证码')
-const VALID = 60
-let interval
-const settimes = () => {
-    const setTimeFn = () => {
-        (smsMessage.value as number)--
-        if (smsMessage.value as number < 0 || can_send.value === true) {
-            clearInterval(interval)
-            can_send.value = true
-            smsMessage.value = '获取验证码'
-        }
-    }
-    interval = setInterval(function() {
-        setTimeFn()
-    }, 1000)
-}
-const getCaptcha = async() => {
-  await unbindCaptcha().then((res) => {
-      console.log(res)
-      can_send.value = false
-      smsMessage.value = VALID
-      settimes()
-      showSuccessToast('验证码已发送，请注意查收')
-  }).catch((error) => {
-      console.log(error)
-      showFailToast(error.data.msg)
-
-  })
-}
-const getCaptcha2 = async() => {
-  await bindCaptcha({mobile:ruleForm3.mobile}).then((res) => {
-      console.log(res)
-      can_send.value = false
-      smsMessage.value = VALID
-      settimes()
-      showSuccessToast('验证码已发送，请注意查收')
-  }).catch((error) => {
-      console.log(error)
-      showFailToast(error.data.msg)
-  })
-}
-const onSubmit3 = async() => {
-  await clearMobile({captcha: ruleForm3.captcha}).then(async(res) => {
-    console.log(res)
-    showSuccessToast(res.data.msg)
-    await user.getUserProfile()
-    ruleForm3.mobile = user.profile.mobile
-    ruleForm3.captcha = ''
-    clearInterval(interval)
-    smsMessage.value = '获取验证码'
-    can_send.value = true
-  }).catch((error) => {
-    console.log(error)
-    showFailToast(error.data.msg)
-  })
-}
-const onSubmit4 = async() => {
-  await bindMobile({mobile:ruleForm3.mobile, captcha: ruleForm3.captcha}).then(async(res) => {
-    console.log(res)
-    showSuccessToast(res.data.msg)
-    await user.getUserProfile()
-    ruleForm3.mobile = user.profile.mobile
-    ruleForm3.captcha = ''
-    clearInterval(interval)
-    smsMessage.value = '获取验证码'
-    can_send.value = true
-  }).catch((error) => {
-    console.log(error)
-    showFailToast(error.data.msg)
-  })
-}
-onMounted(async()=>{
-  from.value = parseInt(localStorage.getItem('from') as string)as 1 | 2
-  await user.getUserProfile()
-  account.value = user.profile?.user_name
-  ruleForm3.mobile = user.profile.mobile
-})
-
-
-</script>
-
-
-<style lang="scss" scoped>
-.wrapper{
-  width: 1000px;
-  background-color: #fff;
-  min-height: 500px;
-  margin: 30px auto;
-  border-radius: 15px;
-  box-sizing: border-box;
-  padding: 30px;
-  .form-wrapper{
-    width: 60%;
-  }
-}
-</style>
+<template>
+  <m-header/>
+  <div>
+    <van-divider>设置</van-divider>.
+    <van-tabs>
+      <van-tab title="密码设置">
+        <van-form @submit="onSubmit">
+          <van-cell-group inset>
+            <van-field
+              v-if="from === 1"
+              v-model="ruleForm.old_password"
+              name="旧密码"
+              label="旧密码"
+              type="password"
+              placeholder="请填写旧密码"
+              :rules="[{ required: true, message: '请填写旧密码' },{ validator: checkAge}]"
+            />
+            <van-field
+              v-model="ruleForm.new_password"
+              type="password"
+              name="新密码"
+              label="新密码"
+              placeholder="请填写新密码"
+              :rules="[{ required: true, message: '请填写新密码' },{ validator: checkAge}]"
+            />
+            <van-field
+              v-model="ruleForm.new_password2"
+              type="password"
+              name="新密码"
+              label="新密码"
+              placeholder="请再次填写新密码"
+              :rules="[{ required: true, message: '请再次填写新密码' },{ validator: checkAge}]"
+            />
+          </van-cell-group>
+          <div style="margin: 16px;display: flex;flex-direction: row-reverse;">
+            <van-button style="width: 100%;padding: 10px;" round block type="primary" color="#ed8c0f" native-type="submit">
+              提交
+            </van-button>
+          </div>
+        </van-form>
+      </van-tab>
+      <van-tab title="用户名设置">
+        <van-form @submit="onSubmit2">
+          <van-field
+            v-model="account"
+            type="text"
+            name="用户名"
+            :readonly="!!user.profile.user_name"
+            label="用户名"
+            placeholder="请填写用户名"
+            :rules="[{ required: true, message: '请填写用户名',trigger: 'onBlur' },{ pattern: pattern, message: '请输入以字母为开头，长度为6-20位的用户名'}]"
+          />
+          <div v-if="!user.profile.user_name" style="margin: 16px;display: flex;flex-direction: row-reverse;">
+            <van-button round block style="width: 100%;padding: 10px;" type="primary" color="#ed8c0f" native-type="submit">
+              提交
+            </van-button>
+          </div>
+        </van-form>
+      </van-tab>
+      <van-tab title="手机号设置">
+        <van-form>
+          <van-field
+            v-model="ruleForm3.mobile"
+            type="text"
+            name="手机号"
+            :readonly="!!user.profile.mobile"
+            label="手机号"
+            placeholder="请填写手机号"
+            :rules="[{ required: true, message: '请填写手机号',trigger: 'onBlur' },{ pattern: pattern2, message: '请输入正确手机号'}]"
+          />
+          <van-field
+            v-model="ruleForm3.captcha"
+            type="number"
+            name="验证码"
+            label="验证码"
+            placeholder="请输入验证码"
+            :rules="[{ required: true, message: '请填写验证码' }]">
+            <template #button>
+              <van-button v-if="!!user.profile.mobile" color="#ed8c0f" size="small" type="primary" style="width: 20vw;" :disabled="!can_send" @click="getCaptcha">{{ smsMessage }}</van-button>
+              <van-button v-else size="small" color="#ed8c0f" type="primary" style="width: 20vw;" :disabled="!can_send" @click="getCaptcha2">{{ smsMessage }}</van-button>
+            </template>
+          </van-field>
+          <div style="margin: 16px;">
+            <van-button v-if="!!user.profile.mobile" style="width: 100%;padding: 10px;" round block type="primary" color="#ed8c0f" @click="onSubmit3">
+              解绑
+            </van-button>
+            <van-button v-else round block type="primary" style="width: 100%;padding: 10px;" color="#ed8c0f" @click="onSubmit4">
+              绑定
+            </van-button>
+          </div>
+        </van-form>
+      </van-tab>
+    </van-tabs>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+// import { useRouter, useRoute } from 'vue-router'
+import { showSuccessToast, showFailToast } from 'vant'
+import { resetPassword, setPassword, userAccount, unbindCaptcha, clearMobile, bindCaptcha, bindMobile } from '@/api/index'
+// import Message from '@/utils/Message'
+import { useStore } from '@/store/index'
+const user = useStore('user')
+
+// const router = useRouter()
+// showSuccessToast('成功文案')
+// showFailToast('失败文案')
+interface RuleForm {
+  old_password: string
+  new_password: string
+  new_password2: string
+}
+const ruleForm = reactive<RuleForm>({
+  old_password: '',
+  new_password: '',
+  new_password2: ''
+})
+
+const checkAge = (value:any, rule:any) => {
+  console.log(value, rule)
+  if (value.length < 6 || value.length > 20) {
+    return '请输入6-20位密码'
+  }
+  return ''
+}
+
+const onSubmit = async() => {
+  if (ruleForm.new_password2 !== ruleForm.new_password) {
+    return showFailToast('两次输入的密码不一致！')
+  }
+  if (from.value === 1) {
+    // 账号密码登录
+    await resetPassword({ old_pass: ruleForm.old_password, new_pass: ruleForm.new_password }).then((res) => {
+      console.log(res)
+      showSuccessToast(res.data.msg)
+    }).catch((error) => {
+      console.log(error)
+      showFailToast(error.data.msg)
+    })
+  } else if (from.value === 2) {
+    await setPassword({ new_pass: ruleForm.new_password }).then((res) => {
+      console.log(res)
+      showSuccessToast(res.data.msg)
+    }).catch((error) => {
+      console.log(error)
+      showFailToast(error.data.msg)
+    })
+  }
+}
+const onSubmit2 = async() => {
+  await userAccount({ account: account.value.toLowerCase() }).then((res) => {
+    console.log(res)
+    showSuccessToast(res.data.msg)
+    user.getUserProfile()
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+const pattern = ref<RegExp>(/^[a-zA-Z][a-zA-Z0-9]{5,19}$/)
+const pattern2 = ref<RegExp>(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)
+const from = ref<1 | 2>(1)
+const account = ref<string>('')
+
+const ruleForm3 = reactive({
+  mobile: '',
+  captcha: ''
+})
+const can_send = ref<boolean>(true)
+const smsMessage = ref<'获取验证码' | number>('获取验证码')
+const VALID = 60
+let interval
+const settimes = () => {
+  const setTimeFn = () => {
+    (smsMessage.value as number)--
+    if (smsMessage.value as number < 0 || can_send.value === true) {
+      clearInterval(interval)
+      can_send.value = true
+      smsMessage.value = '获取验证码'
+    }
+  }
+  interval = setInterval(function() {
+    setTimeFn()
+  }, 1000)
+}
+const getCaptcha = async() => {
+  await unbindCaptcha().then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    showSuccessToast('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+const getCaptcha2 = async() => {
+  await bindCaptcha({ mobile: ruleForm3.mobile }).then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    showSuccessToast('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+const onSubmit3 = async() => {
+  await clearMobile({ captcha: ruleForm3.captcha }).then(async(res) => {
+    console.log(res)
+    showSuccessToast(res.data.msg)
+    await user.getUserProfile()
+    ruleForm3.mobile = user.profile.mobile
+    ruleForm3.captcha = ''
+    clearInterval(interval)
+    smsMessage.value = '获取验证码'
+    can_send.value = true
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+const onSubmit4 = async() => {
+  await bindMobile({ mobile: ruleForm3.mobile, captcha: ruleForm3.captcha }).then(async(res) => {
+    console.log(res)
+    showSuccessToast(res.data.msg)
+    await user.getUserProfile()
+    ruleForm3.mobile = user.profile.mobile
+    ruleForm3.captcha = ''
+    clearInterval(interval)
+    smsMessage.value = '获取验证码'
+    can_send.value = true
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+onMounted(async() => {
+  from.value = parseInt(localStorage.getItem('from') as string)as 1 | 2
+  await user.getUserProfile()
+  account.value = user.profile?.user_name
+  ruleForm3.mobile = user.profile.mobile
+})
+
+</script>
+
+<style lang="scss" scoped>
+.wrapper{
+  width: 1000px;
+  background-color: #fff;
+  min-height: 500px;
+  margin: 30px auto;
+  border-radius: 15px;
+  box-sizing: border-box;
+  padding: 30px;
+  .form-wrapper{
+    width: 60%;
+  }
+}
+</style>

src/view/m_views/search/index.vue

@@ -1,107 +1,111 @@
-<template>
-    <div class="search_cont">
-        <van-search class="search_key" v-model="searchText" placeholder="请输入游戏关键词" shape="round" clearable
-            @search="onSearch" @clear="onClear">
-            <template #left>
-                <van-icon name="arrow-left" @click="onCancel" size="large" style="margin-right: 10px;" />
-            </template>
-        </van-search>
-
-        <div v-if="list.length > 0" style="padding: 0 10px;">
-            <MobList :gameLis="list" :prefix="prefix"></MobList>
-            <div style="margin: 10px;" class="more df aic jcc" v-if="params.page * params.pagesize <= list.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>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, watch, onMounted } from 'vue';
-import MobList from '@/components/MobList.vue';
-import { getGameList } from '@/api/index'
-import Message from '@/utils/Message'
-import { useRouter } from 'vue-router';
-
-const router = useRouter()
-const searchText = ref<string>('')
-const list: any = ref([])
-const prefix = ref<string>('')
-const total = ref<number>(0)
-
-interface IParams {
-    type: number,
-    tag_id: number,
-    page: number,
-    pagesize: number
-}
-const params = reactive<IParams>({
-    type: 0,
-    tag_id: 0,
-    page: 1,
-    pagesize: 10
-})
-
-onMounted(() => { getSearchLis(params) })
-
-const getSearchLis = async (params) => {
-    await getGameList(params).then(res => {
-        if (res.data.code === 200 && res.data.data) {
-            prefix.value = res.data.data.prefix
-            total.value = res.data.data.total
-            if (searchText.value.length < 1) {
-                list.value = list.value.concat(res.data.data.lists)
-                console.log('list===>', list.value);
-
-            } else {
-                params.pagesize = total.value
-                getGameList(params).then(resp => {
-                    if (resp.data.code === 200 && resp.data.data) {
-                        list.value = resp.data.data.lists.filter(item => {
-                            return item.screen_name.indexOf(searchText.value) > -1
-                        })
-                    }
-                })
-            }
-
-        }
-    }).catch(err => {
-        Message.error(err.data)
-    })
-}
-
-const onSearch = () => {
-    params.page = 1
-    list.value = []
-    getSearchLis(params)
-}
-
-const onCancel = () => {
-    router.go(-1)
-}
-
-const onClear = () => {
-    list.value = []
-}
-
-// 加载更多
-const loadMore = () => {
-    params.page += 1
-}
-
-// watch(searchText, (nval, oval) => { getSearchLis(params) }, { deep: true })
-</script>
-
-<style scoped lang="scss">
-.search_cont {
-    padding: 5px;
-
-    .search_key {
-        margin-bottom: 10px;
-    }
-}
-</style>
+<template>
+  <div class="search_cont">
+    <van-search
+      class="search_key"
+      v-model="searchText"
+      placeholder="请输入游戏关键词"
+      shape="round"
+      clearable
+      @search="onSearch"
+      @clear="onClear">
+      <template #left>
+        <van-icon name="arrow-left" @click="onCancel" size="large" style="margin-right: 10px;" />
+      </template>
+    </van-search>
+
+    <div v-if="list.length > 0" style="padding: 0 10px;">
+      <mob-list :gameLis="list" :prefix="prefix"/>
+      <div style="margin: 10px;" class="more df aic jcc" v-if="params.page * params.pagesize <= list.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>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from 'vue'
+import MobList from '@/components/MobList.vue'
+import { getGameList } from '@/api/index'
+import Message from '@/utils/Message'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const searchText = ref<string>('')
+const list: any = ref([])
+const prefix = ref<string>('')
+const total = ref<number>(0)
+
+interface IParams {
+    type: number,
+    tag_id: number,
+    page: number,
+    pagesize: number
+}
+const params = reactive<IParams>({
+  type: 0,
+  tag_id: 0,
+  page: 1,
+  pagesize: 10
+})
+
+onMounted(() => { getSearchLis(params) })
+
+const getSearchLis = async(params) => {
+  await getGameList(params).then(res => {
+    if (res.data.code === 200 && res.data.data) {
+      prefix.value = res.data.data.prefix
+      total.value = res.data.data.total
+      if (searchText.value.length < 1) {
+        list.value = list.value.concat(res.data.data.lists)
+        console.log('list===>', list.value)
+      } else {
+        params.pagesize = total.value
+        getGameList(params).then(resp => {
+          if (resp.data.code === 200 && resp.data.data) {
+            list.value = resp.data.data.lists.filter(item => {
+              return item.screen_name.indexOf(searchText.value) > -1
+            })
+          }
+        })
+      }
+    }
+  }).catch(err => {
+    Message.error(err.data)
+  })
+}
+
+const onSearch = () => {
+  params.page = 1
+  list.value = []
+  getSearchLis(params)
+}
+
+const onCancel = () => {
+  router.go(-1)
+}
+
+const onClear = () => {
+  list.value = []
+}
+
+// 加载更多
+const loadMore = () => {
+  params.page += 1
+}
+
+// watch(searchText, (nval, oval) => { getSearchLis(params) }, { deep: true })
+</script>
+
+<style scoped lang="scss">
+.search_cont {
+    padding: 5px;
+
+    .search_key {
+        margin-bottom: 10px;
+    }
+}
+</style>

src/view/p_views/categroy/index.vue

@@ -1,203 +1,205 @@
-<template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-    <div v-else class="category">
-        <div class="header_list">
-            <div class="top_type">
-                <div class="type df aic">
-                    <div class="left_title">类型</div>
-                    <div class="right_type f1 df fw">
-                        <span v-for="item in typeArr" :key="item.id" class="cont"
-                            :class="{ active: typeIndex === item.id }" @click="selectType('type', item.id)">
-                            {{ item.name }}
-                        </span>
-                    </div>
-                </div>
-                <div class="size df aic">
-                    <div class="left_title">标签</div>
-                    <div class="right_type f1 df fw">
-                        <span v-for="item in tagArr" :key="item.id" class="cont"
-                            :class="{ active: tag_idIndex === item.id }" @click="selectType('tag_id', item.id)">
-                            {{ item.name }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <!-- 按最xxx排序 -->
-            <!-- <el-button :plain="true" round v-for="(item, index) in categoryList" :key="index"
-                @click="selectType('order', index)">
-                <span :class="{ active: orderIndex === index }">{{ item.title }}</span>
-            </el-button> -->
-        </div>
-        <!-- 游戏列表 -->
-        <div v-if="(gameLis.length > 0)">
-            <RankList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" />
-            <div class="more df aic jcc" v-if="params.page * params.pagesize <= gameLis.length">
-                <el-button class="df aic jcc" @click="loadMore">更多</el-button>
-            </div>
-            <div v-else>
-                <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----</div>
-            </div>
-        </div>
-        <el-empty v-else></el-empty>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { getGameType, getGameTag, getGameList } from '@/api/index'
-import RankList from '@/components/RankList.vue';
-import Message from '@/utils/Message'
-
-const typeIndex = ref<number>(0)
-const tag_idIndex = ref<number>(0)
-const gameLis: any = ref([])
-const typeArr: any = ref([])
-const tagArr: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const total = ref<number>(0)
-interface Params {
-    type: number,
-    tag_id: number,
-    page: number,
-    pagesize: number
-}
-const params = reactive<Params>({
-    type: 0,
-    tag_id: 0,
-    page: 1,
-    pagesize: 15
-})
-
-onMounted(async () => {
-    await getGameType().then(res => {
-        // console.log('类型', res);
-        typeArr.value = res.data.data
-        typeArr.value.unshift({ id: 0, name: '全部' })
-    })
-    await getGameTag().then(res => {
-        // console.log('标签', res);
-        tagArr.value = res.data.data
-        tagArr.value.unshift({ id: 0, name: '全部' })
-    })
-    getGameLists(params)
-})
-
-// 初始化列表数据
-const getGameLists = async (params) => {
-    // console.log('参数', params);
-
-    await getGameList(params).then(res => {
-        // console.log('数据', res);
-        if (res.data.code === 200 && res.data.data) {
-            gameLis.value = gameLis.value.concat(res.data.data.lists)
-            total.value = res.data.data.total
-            prefix.value = res.data.data.prefix
-            isLoading.value = false
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-}
-
-// 点击类型、标签、排序
-const selectType = (type: any, index: any) => {
-    gameLis.value = []
-    params.page = 1
-
-    if (type === 'type') {
-        typeIndex.value = index
-        params.type = index
-    }
-    if (type === 'tag_id') {
-        tag_idIndex.value = index
-        params.tag_id = index
-    }
-    // 如果都为 全部  则发起请求 页面显示15条数据
-    if (params.type === 0 && params.tag_id === 0) {
-        params.pagesize = 15
-        getGameLists(params)
-    } else {
-        allData()
-    }
-
-}
-// 全部数据
-const allData = async () => {
-    params.pagesize = total.value
-    // console.log('params', params);
-    await getGameList(params).then(resp => {
-        // console.log('resp===>', resp);
-        if (resp.data.code === 200 && resp.data.data) {
-            gameLis.value = resp.data.data.lists.filter(item => {
-                // 如果标签为全部  类型不为全部 返回匹配的类型数据
-                if (params.tag_id === 0) {
-                    return item.type === params.type
-                }
-                // 如果类型为全部  标签不为全部 返回匹配的标签数据
-                else if (params.type === 0) {
-                    return item.tags.includes(params.tag_id)
-                }
-                // 否则返回匹配的标签和类型数据
-                else return item.type === params.type && item.tags.includes(params.tag_id)
-            })
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-}
-
-// 加载更多
-const loadMore = () => {
-    params.page += 1
-    getGameLists(params)
-}
-
-</script>
-
-<style scoped lang="scss">
-.header_list {
-    .top_type {
-        margin: 15px 0 10px;
-        background-color: #fff;
-        padding: 20px 50px 20px 20px;
-        box-sizing: border-box;
-
-        .left_title {
-            width: 50px;
-            font-size: 14px;
-            color: #666;
-        }
-
-        .right_type {
-
-            // background-color: #ed8c0f;
-            .cont {
-                margin-right: 20px;
-                padding: 3px 5px;
-                cursor: pointer;
-
-                &:hover {
-                    color: #ed8c0f;
-                }
-            }
-        }
-
-        .type {
-            margin-bottom: 20px;
-        }
-    }
-
-    .el-button {
-        margin: 5px 20px 15px 0;
-        padding: 0 20px;
-        border: 0;
-        color: #999;
-    }
-}
-
-.active {
-    color: #ed8c0f
-}
-</style>
+<template>
+  <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+  <div v-else class="category">
+    <div class="header_list">
+      <div class="top_type">
+        <div class="type df aic">
+          <div class="left_title">类型</div>
+          <div class="right_type f1 df fw">
+            <span v-for="item in typeArr"
+                  :key="item.id"
+                  class="cont"
+                  :class="{ active: typeIndex === item.id }"
+                  @click="selectType('type', item.id)">
+              {{ item.name }}
+            </span>
+          </div>
+        </div>
+        <div class="size df aic">
+          <div class="left_title">标签</div>
+          <div class="right_type f1 df fw">
+            <span v-for="item in tagArr"
+                  :key="item.id"
+                  class="cont"
+                  :class="{ active: tag_idIndex === item.id }"
+                  @click="selectType('tag_id', item.id)">
+              {{ item.name }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <!-- 按最xxx排序 -->
+      <!-- <el-button :plain="true" round v-for="(item, index) in categoryList" :key="index"
+                @click="selectType('order', index)">
+                <span :class="{ active: orderIndex === index }">{{ item.title }}</span>
+            </el-button> -->
+    </div>
+    <!-- 游戏列表 -->
+    <div v-if="(gameLis.length > 0)">
+      <rank-list :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" />
+      <div class="more df aic jcc" v-if="params.page * params.pagesize <= gameLis.length">
+        <el-button class="df aic jcc" @click="loadMore">更多</el-button>
+      </div>
+      <div v-else>
+        <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----</div>
+      </div>
+    </div>
+    <el-empty v-else/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { getGameType, getGameTag, getGameList } from '@/api/index'
+import RankList from '@/components/RankList.vue'
+import Message from '@/utils/Message'
+
+const typeIndex = ref<number>(0)
+const tag_idIndex = ref<number>(0)
+const gameLis: any = ref([])
+const typeArr: any = ref([])
+const tagArr: any = ref([])
+const prefix = ref<string>('')
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const total = ref<number>(0)
+interface Params {
+    type: number,
+    tag_id: number,
+    page: number,
+    pagesize: number
+}
+const params = reactive<Params>({
+  type: 0,
+  tag_id: 0,
+  page: 1,
+  pagesize: 15
+})
+
+onMounted(async() => {
+  await getGameType().then(res => {
+    // console.log('类型', res);
+    typeArr.value = res.data.data
+    typeArr.value.unshift({ id: 0, name: '全部' })
+  })
+  await getGameTag().then(res => {
+    // console.log('标签', res);
+    tagArr.value = res.data.data
+    tagArr.value.unshift({ id: 0, name: '全部' })
+  })
+  getGameLists(params)
+})
+
+// 初始化列表数据
+const getGameLists = async(params) => {
+  // console.log('参数', params);
+
+  await getGameList(params).then(res => {
+    // console.log('数据', res);
+    if (res.data.code === 200 && res.data.data) {
+      gameLis.value = gameLis.value.concat(res.data.data.lists)
+      total.value = res.data.data.total
+      prefix.value = res.data.data.prefix
+      isLoading.value = false
+    }
+  }).catch(err => {
+    Message.error(err.data.msg)
+  })
+}
+
+// 点击类型、标签、排序
+const selectType = (type: any, index: any) => {
+  gameLis.value = []
+  params.page = 1
+
+  if (type === 'type') {
+    typeIndex.value = index
+    params.type = index
+  }
+  if (type === 'tag_id') {
+    tag_idIndex.value = index
+    params.tag_id = index
+  }
+  // 如果都为 全部  则发起请求 页面显示15条数据
+  if (params.type === 0 && params.tag_id === 0) {
+    params.pagesize = 15
+    getGameLists(params)
+  } else {
+    allData()
+  }
+}
+// 全部数据
+const allData = async() => {
+  params.pagesize = total.value
+  // console.log('params', params);
+  await getGameList(params).then(resp => {
+    // console.log('resp===>', resp);
+    if (resp.data.code === 200 && resp.data.data) {
+      gameLis.value = resp.data.data.lists.filter(item => {
+        // 如果标签为全部  类型不为全部 返回匹配的类型数据
+        if (params.tag_id === 0) {
+          return item.type === params.type
+        } else if (params.type === 0) {
+          // 如果类型为全部  标签不为全部 返回匹配的标签数据
+          return item.tags.includes(params.tag_id)
+        } else return item.type === params.type && item.tags.includes(params.tag_id) // 否则返回匹配的标签和类型数据
+      })
+    }
+  }).catch(err => {
+    Message.error(err.data.msg)
+  })
+}
+
+// 加载更多
+const loadMore = () => {
+  params.page += 1
+  getGameLists(params)
+}
+
+</script>
+
+<style scoped lang="scss">
+.header_list {
+    .top_type {
+        margin: 15px 0 10px;
+        background-color: #fff;
+        padding: 20px 50px 20px 20px;
+        box-sizing: border-box;
+
+        .left_title {
+            width: 50px;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .right_type {
+
+            // background-color: #ed8c0f;
+            .cont {
+                margin-right: 20px;
+                padding: 3px 5px;
+                cursor: pointer;
+
+                &:hover {
+                    color: #ed8c0f;
+                }
+            }
+        }
+
+        .type {
+            margin-bottom: 20px;
+        }
+    }
+
+    .el-button {
+        margin: 5px 20px 15px 0;
+        padding: 0 20px;
+        border: 0;
+        color: #999;
+    }
+}
+
+.active {
+    color: #ed8c0f
+}
+</style>

src/view/p_views/ecoin/index.vue

@@ -1,86 +1,82 @@
-<template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-    <div v-else>
-        <el-table :data="gameHot" style="width: 100%">
-            <el-table-column prop="game_name" label="游戏名称"  />
-           
-            <el-table-column prop="total_ecoin" label="余额" />
-            <el-table-column prop="created_at" label="创建时间" width="180" />
-            <el-table-column prop="modified_at" label="修改时间" width="180" />
-        </el-table>
-        <div class="demo-pagination-block">
-            <el-pagination
-                v-model:current-page="pageConfig.page"
-                hide-on-single-page
-                v-model:page-size="pageConfig.pagesize"
-                layout="prev, pager, next, jumper,total"
-                :total="pageConfig.total"
-                @current-change="handleCurrentChange"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue'
-import { userEcoin } from '@/api/index'
-import Message from '@/utils/Message'
-import IndexList from '@/components/IndexList.vue'
-import {parseTime } from '@/utils/index'
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const pageConfig = reactive({
-    page: 1,
-    pagesize: 10,
-    total: 0
-})
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  pageConfig.page = val
-  getTableData()
-}
-const status = ref<any[]>([])
-const getTableData = async() => {
-   const params = {
-    page:pageConfig.page,
-    pagesize: pageConfig.pagesize
-   }
-   await userEcoin(params).then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists || []
-            isLoading.value = false
-            pageConfig.total = res.data.data.total.total || 0
-            status.value = res.data.data.status
-        }
-    }).catch(err => {
-        console.log(err);
-        
-        Message.error(err.data.msg)
-    })
-}
-onMounted(async() => {
-    getTableData()
-})
-
-</script>
-
-<style scoped lang="scss">
-.game_list {
-    box-sizing: border-box;
-    // padding: 20px;
-    background-color: #fff;
-    margin: 15px auto 20px;
-
-    h2 {
-        font-size: 28px;
-        font-weight: normal;
-        height: 30px;
-        padding: 30px;
-    }
-}
-</style>
+<template>
+  <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+  <div v-else>
+    <el-table :data="gameHot" style="width: 100%">
+      <el-table-column prop="game_name" label="游戏名称"  />
+
+      <el-table-column prop="total_ecoin" label="余额" />
+      <el-table-column prop="created_at" label="创建时间" width="180" />
+      <el-table-column prop="modified_at" label="修改时间" width="180" />
+    </el-table>
+    <div class="demo-pagination-block">
+      <el-pagination
+        v-model:current-page="pageConfig.page"
+        hide-on-single-page
+        v-model:page-size="pageConfig.pagesize"
+        layout="prev, pager, next, jumper,total"
+        :total="pageConfig.total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue'
+import { userEcoin } from '@/api/index'
+import Message from '@/utils/Message'
+
+const gameHot: any = ref([])
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const pageConfig = reactive({
+  page: 1,
+  pagesize: 10,
+  total: 0
+})
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  pageConfig.page = val
+  getTableData()
+}
+const status = ref<any[]>([])
+const getTableData = async() => {
+  const params = {
+    page: pageConfig.page,
+    pagesize: pageConfig.pagesize
+  }
+  await userEcoin(params).then(res => {
+    console.log('热门游戏', res.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameHot.value = res.data.data.lists || []
+      isLoading.value = false
+      pageConfig.total = res.data.data.total.total || 0
+      status.value = res.data.data.status
+    }
+  }).catch(err => {
+    console.log(err)
+
+    Message.error(err.data.msg)
+  })
+}
+onMounted(async() => {
+  getTableData()
+})
+
+</script>
+
+<style scoped lang="scss">
+.game_list {
+    box-sizing: border-box;
+    // padding: 20px;
+    background-color: #fff;
+    margin: 15px auto 20px;
+
+    h2 {
+        font-size: 28px;
+        font-weight: normal;
+        height: 30px;
+        padding: 30px;
+    }
+}
+</style>

src/view/p_views/index/index.vue

@@ -1,70 +1,70 @@
-<template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-
-    <div v-else >
-        <!-- 热门游戏 -->
-        <div v-if="gameHot.length > 0" class="game_list">
-            <h2>热门游戏</h2>
-            <IndexList :list="gameHot" :prefix="prefix"></IndexList>
-        </div>
-        <!-- 推荐游戏 -->
-        <div v-if="gameRecommand.length > 0" class="game_list">
-            <h2>推荐游戏</h2>
-            <IndexList :list="gameRecommand" :prefix="prefix"></IndexList>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { getIndexGameHot, getIndexGameRecommand } from '@/api/index'
-import Message from '@/utils/Message'
-import IndexList from '@/components/IndexList.vue'
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-
-onMounted(async () => {
-    await getIndexGameHot().then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists
-            prefix.value = res.data.data.prefix
-            isLoading.value = false
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-
-    await getIndexGameRecommand().then(res => {
-        console.log('推荐游戏', res.data.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameRecommand.value = res.data.data.lists
-            prefix.value = res.data.data.prefix
-            isLoading.value = false
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-})
-
-</script>
-
-<style scoped lang="scss">
-.game_list {
-    box-sizing: border-box;
-    // padding: 20px;
-    background-color: #fff;
-    margin: 15px auto 20px;
-
-    h2 {
-        font-size: 28px;
-        font-weight: normal;
-        height: 30px;
-        padding: 30px;
-    }
-}
-</style>
+<template>
+  <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+
+  <div v-else >
+    <!-- 热门游戏 -->
+    <div v-if="gameHot.length > 0" class="game_list">
+      <h2>热门游戏</h2>
+      <index-list :list="gameHot" :prefix="prefix"/>
+    </div>
+    <!-- 推荐游戏 -->
+    <div v-if="gameRecommand.length > 0" class="game_list">
+      <h2>推荐游戏</h2>
+      <index-list :list="gameRecommand" :prefix="prefix"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getIndexGameHot, getIndexGameRecommand } from '@/api/index'
+import Message from '@/utils/Message'
+import IndexList from '@/components/IndexList.vue'
+
+const gameHot: any = ref([])
+const gameRecommand: any = ref([])
+const prefix = ref<string>('')
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+
+onMounted(async() => {
+  await getIndexGameHot().then(res => {
+    console.log('热门游戏', res.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameHot.value = res.data.data.lists
+      prefix.value = res.data.data.prefix
+      isLoading.value = false
+    }
+  }).catch(err => {
+    Message.error(err.data.msg)
+  })
+
+  await getIndexGameRecommand().then(res => {
+    console.log('推荐游戏', res.data.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameRecommand.value = res.data.data.lists
+      prefix.value = res.data.data.prefix
+      isLoading.value = false
+    }
+  }).catch(err => {
+    Message.error(err.data.msg)
+  })
+})
+
+</script>
+
+<style scoped lang="scss">
+.game_list {
+    box-sizing: border-box;
+    // padding: 20px;
+    background-color: #fff;
+    margin: 15px auto 20px;
+
+    h2 {
+        font-size: 28px;
+        font-weight: normal;
+        height: 30px;
+        padding: 30px;
+    }
+}
+</style>

src/view/p_views/login/index.vue

@@ -1,64 +1,84 @@
 <template>
-    <div class="login df fdc aic" :style="{height: viewWidth + 'px'}">
-        <div class="login_logo">
-            <!-- <img src="http://gm.nkfzs.com/favicon.ico"> -->
-            <img v-if="VITEPLA === 'QingQue'" src="@/assets/img/logo.png">
-        </div>
-        
-        <el-form ref="ruleFormRef" :rules="rules" class="login_from df fdc aic jcc" label-position="left"
-            label-width="80px" :model="loginForm" style="max-width: 400px" @submit.prevent="submitForm(ruleFormRef)">
-            <el-tabs v-model="login_typ" style="" @tab-change="resetForm(ruleFormRef)">
-                <el-tab-pane label="密码登录" name="pwd" />
-                <el-tab-pane label="验证码登录" name="sms" />
-            </el-tabs>
-            <template v-if="login_typ === 'pwd'">
-                <el-form-item label="用户名" prop="account">
-                    <el-input v-model="loginForm.account" type="text" placeholder="请输入账号" clearable :prefix-icon="User" />
-                </el-form-item>
-                <el-form-item label="密&emsp;码" prop="password">
-                    <el-input v-model="loginForm.password" type="password" show-password placeholder="请输入密码"
-                        :prefix-icon="Lock" />
-                    <el-input v-model="loginForm.password" type="hidden" id="md5_password" show-password placeholder="请输入密码"
-                        :prefix-icon="Lock" />
-                </el-form-item>
-            </template>
-            <template v-else-if="login_typ === 'sms'">
-                <el-form-item label="手机号" prop="account">
-                <el-input v-model="loginForm.account" type="text" placeholder="请输入账号" clearable :prefix-icon="User" />
-                </el-form-item>
-                <el-form-item label="验证码" prop="smsCaptcha">
-                    <el-input v-model="loginForm.smsCaptcha" type="number" placeholder="请输入验证码" :prefix-icon="Lock">
-                        <template #append>
-                            <div>
-                                <el-button @click="getCaptcha" color="#ed8c0f" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
-                            </div>
-                        </template>
-                    </el-input>
-                </el-form-item>
+  <div class="login df fdc aic" :style="{height: viewWidth + 'px'}">
+    <div class="login_logo">
+      <!-- <img src="http://gm.nkfzs.com/favicon.ico"> -->
+      <img v-if="VITEPLA === 'QingQue'" src="@/assets/img/logo.png"/>
+    </div>
+
+    <el-form
+      ref="ruleFormRef"
+      :rules="rules"
+      class="login_from df fdc aic jcc"
+      label-position="left"
+      label-width="80px"
+      :model="loginForm"
+      style="max-width: 400px"
+      @submit.prevent="submitForm(ruleFormRef)">
+      <el-tabs v-model="login_typ" style="" @tab-change="resetForm(ruleFormRef)">
+        <el-tab-pane label="密码登录" name="pwd" />
+        <el-tab-pane label="验证码登录" name="sms" />
+      </el-tabs>
+      <template v-if="login_typ === 'pwd'">
+        <el-form-item label="用户名" prop="account">
+          <el-input v-model="loginForm.account" type="text" placeholder="请输入账号" clearable :prefix-icon="User" />
+        </el-form-item>
+        <el-form-item label="密&emsp;码" prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            show-password
+            placeholder="请输入密码"
+            :prefix-icon="Lock" />
+          <el-input
+            v-model="loginForm.password"
+            type="hidden"
+            id="md5_password"
+            show-password
+            placeholder="请输入密码"
+            :prefix-icon="Lock" />
+        </el-form-item>
+      </template>
+      <template v-else-if="login_typ === 'sms'">
+        <el-form-item label="手机号" prop="account">
+          <el-input v-model="loginForm.account" type="text" placeholder="请输入账号" clearable :prefix-icon="User" />
+        </el-form-item>
+        <el-form-item label="验证码" prop="smsCaptcha">
+          <el-input v-model="loginForm.smsCaptcha" type="number" placeholder="请输入验证码" :prefix-icon="Lock">
+            <template #append>
+              <div>
+                <el-button @click="getCaptcha" color="#ed8c0f" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
+              </div>
             </template>
-            <!-- <el-form-item style="margin-top:-10px;margin-bottom:-5px;">
+          </el-input>
+        </el-form-item>
+      </template>
+      <!-- <el-form-item style="margin-top:-10px;margin-bottom:-5px;">
                     <el-checkbox v-model="checked" style="color:#a0a0a0;margin-top:-10px;">记住我</el-checkbox>
                 </el-form-item> -->
-            <div class="btn df aic jcsb">
-                <el-button type="primary" plain round class="submit_btn" @click="resetForm(ruleFormRef)">重&emsp;置</el-button>
-                <el-button color="#ed8c0f" plain round class="submit_btn"
-                    native-type="submit">登&emsp;录</el-button>
-            </div>
-        </el-form>
-    </div>
+      <div class="btn df aic jcsb">
+        <el-button type="primary" plain round class="submit_btn" @click="resetForm(ruleFormRef)">重&emsp;置</el-button>
+        <el-button
+          color="#ed8c0f"
+          plain
+          round
+          class="submit_btn"
+          native-type="submit">登&emsp;录</el-button>
+      </div>
+    </el-form>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onMounted } from 'vue';
+import { reactive, ref, onMounted } from 'vue'
 import { Lock, User } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
-import { getUserLogin, captchaLogin, getCaptchaHttp, userProfile } from '@/api/index'
+import { getUserLogin, captchaLogin, getCaptchaHttp } from '@/api/index'
 // import '@/utils/md5'
 import Message from '@/utils/Message'
 import checkRestTime from '@/utils/captcha'
 import { useRouter } from 'vue-router'
 import { useStore } from '@/store/index'
-import local from '@/utils/local';
+import local from '@/utils/local'
 
 const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE
 
@@ -77,135 +97,131 @@ interface login {
     smsCaptcha:number | null
 }
 const loginForm = reactive<login>({
-    account: '',
-    password: '',
-    timestamp: parseInt(`${Date.now() / 1000}`),
-    smsCaptcha: null
+  account: '',
+  password: '',
+  timestamp: parseInt(`${Date.now() / 1000}`),
+  smsCaptcha: null
 })
-const from = ref<1 | 2>(1)
 
 const rules = reactive<FormRules>({
-    account: [
-        { required: true, message: '请输入账号', trigger: 'blur' },
-        { min: 3, max: 255, message: '请正确输入账号', trigger: 'blur' }
-    ],
-    password: [
-        { required: true, message: '请输入密码', trigger: 'blur' },
-        { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur,change' }
-    ],
-    smsCaptcha:[
-        { required: true, message: '请输入验证码', trigger: 'blur' }
-    ]
+  account: [
+    { required: true, message: '请输入账号', trigger: 'blur' },
+    { min: 3, max: 255, message: '请正确输入账号', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur,change' }
+  ],
+  smsCaptcha: [
+    { required: true, message: '请输入验证码', trigger: 'blur' }
+  ]
 })
 
-const submitForm = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    await formEl.validate(async (valid, fields) => {
-        if (valid) {
-            if(login_typ.value === 'pwd'){
-                // 登录密码加密
-                let md5Pwd: any = document.querySelector('#md5_password')
-                md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
+const submitForm = async(formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      if (login_typ.value === 'pwd') {
+        // 登录密码加密
+        let md5Pwd: any = document.querySelector('#md5_password')
+        md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
 
-                const params = {
-                    account: loginForm.account,
-                    password: md5Pwd,
-                    timestamp: loginForm.timestamp
-                }
-                getUserLogin(params).then(async(res) => {
-                    // console.log('res---->', res);
-                    if (res.data.code === 200) {
-                        Message.success('登录成功')
-                        // 保存用户信息 和 token
-                        localStorage.setItem('token', res.data.data.token)
-                        localStorage.setItem('account', loginForm.account)
-                        localStorage.setItem('from', '1')
-                        await user.getUserProfile()
-                        // 跳转我的游戏页面
-                        setTimeout(() => {
-                            router.push({ path: '/p_mine', query: { account: loginForm.account } })
-                            local.set('headerPath', '我的')
-                        }, 1000);
-                    }
-                }).catch(err => {
-                    // console.log('err===>', err);
-                    Message.error(err.data.msg)
-                })
-            }else if (login_typ.value === 'sms'){
-                const params = {
-                    mobile: loginForm.account,
-                    captcha: loginForm.smsCaptcha
-                }
-                console.log(params);
-                
-                await captchaLogin(params).then(async(res) => {
-                    console.log(res)
-                    if (res.data.code === 200) {
-                        Message.success('登录成功')
-                        localStorage.setItem('token', res.data.data.token)
-                        localStorage.setItem('account', loginForm.account)
-                        localStorage.setItem('from', '2')
-                        await user.getUserProfile()
-                        setTimeout(() => {
-                            router.push({ path: '/p_mine', query: { account: loginForm.account } })
-                            local.set('headerPath', '我的')
-                        }, 1000);
-                    }
-                    
-                }).catch((error) => {
-                    console.log(error)
-                    Message.error(error.data.msg)
-                })
-            }
-            
-        } else {
-            console.log('登录失败', fields)
+        const params = {
+          account: loginForm.account,
+          password: md5Pwd,
+          timestamp: loginForm.timestamp
+        }
+        getUserLogin(params).then(async(res) => {
+          // console.log('res---->', res);
+          if (res.data.code === 200) {
+            Message.success('登录成功')
+            // 保存用户信息 和 token
+            localStorage.setItem('token', res.data.data.token)
+            localStorage.setItem('account', loginForm.account)
+            localStorage.setItem('from', '1')
+            await user.getUserProfile()
+            // 跳转我的游戏页面
+            setTimeout(() => {
+              router.push({ path: '/p_mine', query: { account: loginForm.account }})
+              local.set('headerPath', '我的')
+            }, 1000)
+          }
+        }).catch(err => {
+          // console.log('err===>', err);
+          Message.error(err.data.msg)
+        })
+      } else if (login_typ.value === 'sms') {
+        const params = {
+          mobile: loginForm.account,
+          captcha: loginForm.smsCaptcha
         }
-    })
+        console.log(params)
+
+        await captchaLogin(params).then(async(res) => {
+          console.log(res)
+          if (res.data.code === 200) {
+            Message.success('登录成功')
+            localStorage.setItem('token', res.data.data.token)
+            localStorage.setItem('account', loginForm.account)
+            localStorage.setItem('from', '2')
+            await user.getUserProfile()
+            setTimeout(() => {
+              router.push({ path: '/p_mine', query: { account: loginForm.account }})
+              local.set('headerPath', '我的')
+            }, 1000)
+          }
+        }).catch((error) => {
+          console.log(error)
+          Message.error(error.data.msg)
+        })
+      }
+    } else {
+      console.log('登录失败', fields)
+    }
+  })
 }
 const resetForm = (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    formEl.resetFields()
+  if (!formEl) return
+  formEl.resetFields()
 }
 
 const getCaptcha = async() => {
-    if(loginForm.account.length !== 11){
-        return Message.error('请输入有效手机号！')
-    }
-    await getCaptchaHttp({mobile: loginForm.account}).then((res) => {
-        console.log(res)
-        can_send.value = false
-        smsMessage.value = VALID
-        settimes()
-        sessionStorage.setItem('LOGIN_CAPTCHA', Math.round(new Date().getTime() / 1000).toString())
-        Message.success('验证码已发送，请注意查收')
-    }).catch((error) => {
-        console.log(error)
-        Message.error(error.data.msg)
-
-    })
+  if (loginForm.account.length !== 11) {
+    return Message.error('请输入有效手机号！')
+  }
+  await getCaptchaHttp({ mobile: loginForm.account }).then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    sessionStorage.setItem('LOGIN_CAPTCHA', Math.round(new Date().getTime() / 1000).toString())
+    Message.success('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    Message.error(error.data.msg)
+  })
 }
 const settimes = () => {
-    var interval
-    const setTimeFn = () => {
-        (smsMessage.value as number)--
-        if (smsMessage.value as number < 0 || can_send.value === true) {
-            clearInterval(interval)
-            can_send.value = true
-            smsMessage.value = '获取验证码'
-        }
+  var interval
+  const setTimeFn = () => {
+    (smsMessage.value as number)--
+    if (smsMessage.value as number < 0 || can_send.value === true) {
+      clearInterval(interval)
+      can_send.value = true
+      smsMessage.value = '获取验证码'
     }
-    interval = setInterval(function() {
-        setTimeFn()
-    }, 1000)
+  }
+  interval = setInterval(function() {
+    setTimeFn()
+  }, 1000)
 }
 onMounted(() => {
-    let res = checkRestTime('LOGIN_CAPTCHA', VALID)
-    if(res){
-        smsMessage.value = res
-        can_send.value = false
-        settimes()
-    }
+  const res = checkRestTime('LOGIN_CAPTCHA', VALID)
+  if (res) {
+    smsMessage.value = res
+    can_send.value = false
+    settimes()
+  }
 })
 </script>
 
@@ -257,4 +273,4 @@ onMounted(() => {
     align-items: center;
     height: 50px;
 }
-</style>
+</style>

src/view/p_views/mine/index.vue

@@ -1,64 +1,64 @@
 <template>
-    <div>
+  <div>
 
     <div v-if="token">
-        <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-        <div v-else  >
-                <!-- <h2>我的游戏</h2> -->
-                <!-- <IndexList :list="mineGame" :prefix="prefix"></IndexList>
+      <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+      <div v-else  >
+        <!-- <h2>我的游戏</h2> -->
+        <!-- <IndexList :list="mineGame" :prefix="prefix"></IndexList>
                 <div class="more df aic jcc" v-if="(total > 10 ? true : false)">
                     <el-button class="df aic jcc" @click="loadMore">更多</el-button>
                 </div> -->
-                <div v-if="mineGame.length > 0">
-                    <IndexList :list="mineGame" :prefix="prefix">
-                        <template #custom-button="scope">
-                            <el-button style="color: #fff;" color="#ed8c0f" @click="showGifts(scope.row)">查看礼包</el-button>
-                        </template>
-                    </IndexList>
-                    <div class="more df aic jcc" v-if="params.page * params.pagesize <= mineGame.length">
-                        <el-button class="df aic jcc" @click="loadMore">更多</el-button>
-                    </div>
-                    <div v-else>
-                        <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----
-                        </div>
-                    </div>
-                </div>
-                <el-empty v-else></el-empty>
+        <div v-if="mineGame.length > 0">
+          <index-list :list="mineGame" :prefix="prefix">
+            <template #custom-button="scope">
+              <el-button style="color: #fff;" color="#ed8c0f" @click="showGifts(scope.row)">查看礼包</el-button>
+            </template>
+          </index-list>
+          <div class="more df aic jcc" v-if="params.page * params.pagesize <= mineGame.length">
+            <el-button class="df aic jcc" @click="loadMore">更多</el-button>
+          </div>
+          <div v-else>
+            <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----
+            </div>
+          </div>
         </div>
+        <el-empty v-else/>
+      </div>
     </div>
     <div v-else :style="{ height: viewWidth + 'px' }" class="df fdc aic jcc">
-        <el-empty description="您还未登录！登录后可查询数据！">
-            <el-button style="color:#fff" color="#ed8c0f" @click="goLogin">去登录 &gt;&gt;</el-button>
-        </el-empty>
+      <el-empty description="您还未登录！登录后可查询数据！">
+        <el-button style="color:#fff" color="#ed8c0f" @click="goLogin">去登录 &gt;&gt;</el-button>
+      </el-empty>
     </div>
     <el-dialog  v-model="dialogVisible" title="游戏礼包">
-        <el-collapse v-if="giftData.length" v-model="activeName" accordion>
-            <div v-for="(item, index) in giftData" :key="index" style="display: flex;justify-content: space-between; align-items: center;">
-                <el-collapse-item :title="item.gift_name" :name="item.id" style="width: 70%;">
-                    <el-form label-width="120px">
-                        <el-form-item label="礼包内容：">{{ item.gift_content }}</el-form-item>
-                        <el-form-item label="使用方法：">{{ item.usage }}</el-form-item>
-                        <el-form-item label="有效期：">{{ item.start_at+'-'+item.end_at }}</el-form-item>
-                    </el-form>
-                </el-collapse-item>
-                <div style="width: 20%;">
-                    <el-button :disabled="item.user_get_at !== ''" color="#ed8c0f" style="color: #fff;" @click="receiveGift(item.id)">领取礼包</el-button>
-                </div>
-            </div>
-            
-        </el-collapse>
-        <el-empty v-else description="暂无礼包" />
-        
+      <el-collapse v-if="giftData.length" v-model="activeName" accordion>
+        <div v-for="(item, index) in giftData" :key="index" style="display: flex;justify-content: space-between; align-items: center;">
+          <el-collapse-item :title="item.gift_name" :name="item.id" style="width: 70%;">
+            <el-form label-width="120px">
+              <el-form-item label="礼包内容：">{{ item.gift_content }}</el-form-item>
+              <el-form-item label="使用方法：">{{ item.usage }}</el-form-item>
+              <el-form-item label="有效期：">{{ item.start_at+'-'+item.end_at }}</el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <div style="width: 20%;">
+            <el-button :disabled="item.user_get_at !== ''" color="#ed8c0f" style="color: #fff;" @click="receiveGift(item.id)">领取礼包</el-button>
+          </div>
+        </div>
+
+      </el-collapse>
+      <el-empty v-else description="暂无礼包" />
+
     </el-dialog>
-</div>
+  </div>
 
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, reactive, watch } from 'vue'
+import { onMounted, ref, reactive } from 'vue'
 import { getMineGame, getGiftHttp, receiveGiftHttp } from '@/api/index'
 import { useStore } from '@/store/index'
-import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import Message from '@/utils/Message'
 import IndexList from '@/components/IndexList.vue'
 import local from '@/utils/local'
@@ -76,77 +76,75 @@ const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
 const userAccount = ref<string | null>(localStorage.getItem('account'))
 const token = ref<string | null>(localStorage.getItem('token'))
 const activeName = ref('1')
-interface params {
+interface Params {
     page: number,
     pagesize: number,
     account: string | null
 }
-const params = reactive<params>({
-    page: 1,
-    pagesize: 10,
-    account: userAccount.value
+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)
-        }
+  // 进入页面刷新一次
+  if (token.value) {
+    if (route.query.account || userAccount.value) {
+      if (location.href.indexOf('#reloaded') === -1) {
+        location.href = location.href + '#reloaded'
+        location.reload()
+      }
+      getMyGame(params)
     }
-    user.getUserProfile()
-
+  }
+  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.msg)
-    })
+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.msg)
+  })
 }
 
 // 加载更多
 const loadMore = () => {
-    params.page += 1
-    getMyGame(params)
+  params.page += 1
+  getMyGame(params)
 }
 
 const goLogin = () => {
-    router.push({ path: 'p_login' })
-    local.remove('headerPath')
+  router.push({ path: 'p_login' })
+  local.remove('headerPath')
 }
 const giftData = ref<any[]>([])
 const showGifts = async(row:any) => {
 //    console.log(row);
-   await getGiftHttp({game_id: row.game_id}).then((res) => {
+  await getGiftHttp({ game_id: row.game_id }).then((res) => {
     // console.log(res.data.data)
     giftData.value = res.data.data || []
     dialogVisible.value = true
-   }).catch((error) => {
+  }).catch((error) => {
     console.log(error)
-   })
-   
+  })
 }
 const receiveGift = async(id:number) => {
-   await receiveGiftHttp({id}).then((res) => {
+  await receiveGiftHttp({ id }).then((res) => {
     console.log(res)
     Message.error(res.data.msg)
     dialogVisible.value = false
-   }).catch((error) => {
+  }).catch((error) => {
     console.log(error)
     Message.error(error.data.msg)
-   })
+  })
 }
 
 </script>
@@ -165,4 +163,4 @@ const receiveGift = async(id:number) => {
         border: 1px solid #c7c7c7;
     }
 }
-</style>
+</style>

src/view/p_views/ncoin/index.vue

@@ -1,84 +1,80 @@
-<template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-    <div v-else>
-        <el-table :data="gameHot" style="width: 100%">
-            <el-table-column prop="game_name" label="游戏名称"  />
-           
-            <el-table-column prop="total_coin" label="余额" />
-            <el-table-column prop="created_at" label="创建时间" width="180" />
-            <el-table-column prop="modified_at" label="修改时间" width="180" />
-        </el-table>
-        <div class="demo-pagination-block">
-            <el-pagination
-                v-model:current-page="pageConfig.page"
-                hide-on-single-page
-                v-model:page-size="pageConfig.pagesize"
-                layout="prev, pager, next, jumper,total"
-                :total="pageConfig.total"
-                @current-change="handleCurrentChange"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue'
-import { userNcoin } from '@/api/index'
-import Message from '@/utils/Message'
-import IndexList from '@/components/IndexList.vue'
-import {parseTime } from '@/utils/index'
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const pageConfig = reactive({
-    page: 1,
-    pagesize: 10,
-    total: 0
-})
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  pageConfig.page = val
-  getTableData()
-}
-const getTableData = async() => {
-   const params = {
-    page:pageConfig.page,
-    pagesize: pageConfig.pagesize
-   }
-   await userNcoin(params).then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists || []
-            isLoading.value = false
-            pageConfig.total = res.data.data.total || 0
-        }
-    }).catch(err => {
-        console.log(err);
-        
-        Message.error(err.data.msg)
-    })
-}
-onMounted(async() => {
-    getTableData()
-})
-
-</script>
-
-<style scoped lang="scss">
-.game_list {
-    box-sizing: border-box;
-    // padding: 20px;
-    background-color: #fff;
-    margin: 15px auto 20px;
-
-    h2 {
-        font-size: 28px;
-        font-weight: normal;
-        height: 30px;
-        padding: 30px;
-    }
-}
-</style>
+<template>
+  <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+  <div v-else>
+    <el-table :data="gameHot" style="width: 100%">
+      <el-table-column prop="game_name" label="游戏名称"  />
+
+      <el-table-column prop="total_coin" label="余额" />
+      <el-table-column prop="created_at" label="创建时间" width="180" />
+      <el-table-column prop="modified_at" label="修改时间" width="180" />
+    </el-table>
+    <div class="demo-pagination-block">
+      <el-pagination
+        v-model:current-page="pageConfig.page"
+        hide-on-single-page
+        v-model:page-size="pageConfig.pagesize"
+        layout="prev, pager, next, jumper,total"
+        :total="pageConfig.total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue'
+import { userNcoin } from '@/api/index'
+import Message from '@/utils/Message'
+
+const gameHot: any = ref([])
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const pageConfig = reactive({
+  page: 1,
+  pagesize: 10,
+  total: 0
+})
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  pageConfig.page = val
+  getTableData()
+}
+const getTableData = async() => {
+  const params = {
+    page: pageConfig.page,
+    pagesize: pageConfig.pagesize
+  }
+  await userNcoin(params).then(res => {
+    console.log('热门游戏', res.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameHot.value = res.data.data.lists || []
+      isLoading.value = false
+      pageConfig.total = res.data.data.total || 0
+    }
+  }).catch(err => {
+    console.log(err)
+
+    Message.error(err.data.msg)
+  })
+}
+onMounted(async() => {
+  getTableData()
+})
+
+</script>
+
+<style scoped lang="scss">
+.game_list {
+    box-sizing: border-box;
+    // padding: 20px;
+    background-color: #fff;
+    margin: 15px auto 20px;
+
+    h2 {
+        font-size: 28px;
+        font-weight: normal;
+        height: 30px;
+        padding: 30px;
+    }
+}
+</style>

src/view/p_views/order/index.vue

@@ -1,109 +1,106 @@
-<template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-    <div v-else>
-        <el-table :data="gameHot" style="width: 100%">
-            <el-table-column prop="order_number" label="订单号" width="180"/>
-            <el-table-column prop="appname" label="游戏名称"  />
-            <el-table-column prop="game_product_name" label="道具名称"  />
-            <el-table-column prop="order_amount" label="道具数量" />
-            <el-table-column prop="order_submit_time" label="创建时间" width="180">
-                <template #default="scope">
-                    <div>
-                        {{ parseTime(scope.row.order_submit_time) }}
-                    </div>
-                </template>
-            </el-table-column>
-            <el-table-column prop="order_asynch_time" label="付款时间" width="180">
-                <template #default="scope">
-                    <div>
-                        {{ scope.row.order_asynch_time? parseTime(scope.row.order_asynch_time):'-' }}
-                    </div>
-                </template>
-            </el-table-column>
-            <el-table-column prop="channel_name" label="支付方式" />
-            <el-table-column prop="order_submit_time" label="订单状态" >
-                <template #default="scope">
-                    <div>
-                        {{ status[scope.row.order_status] }}
-                    </div>
-                </template>
-            </el-table-column>
-            <el-table-column prop="target_role_id" label="游戏订单号" width="180"/>
-            <el-table-column prop="out_trade_no" label="支付平台订单号" width="180" />
-        </el-table>
-        <div class="demo-pagination-block">
-            <el-pagination
-                v-model:current-page="pageConfig.page"
-                hide-on-single-page
-                v-model:page-size="pageConfig.pagesize"
-                layout="prev, pager, next, jumper,total"
-                :total="pageConfig.total"
-                @current-change="handleCurrentChange"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue'
-import { userOrder } from '@/api/index'
-import Message from '@/utils/Message'
-import IndexList from '@/components/IndexList.vue'
-import {parseTime } from '@/utils/index'
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const pageConfig = reactive({
-    page: 1,
-    pagesize: 10,
-    total: 0
-})
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  pageConfig.page = val
-  getTableData()
-}
-const status = ref<any[]>([])
-const getTableData = async() => {
-   const params = {
-    page:pageConfig.page,
-    pagesize: pageConfig.pagesize
-   }
-   await userOrder(params).then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists || []
-            isLoading.value = false
-            pageConfig.total = res.data.data.total.total || 0
-            status.value = res.data.data.status
-        }
-    }).catch(err => {
-        console.log(err);
-        
-        Message.error(err.data.msg)
-    })
-}
-onMounted(async() => {
-    getTableData()
-})
-
-</script>
-
-<style scoped lang="scss">
-.game_list {
-    box-sizing: border-box;
-    // padding: 20px;
-    background-color: #fff;
-    margin: 15px auto 20px;
-
-    h2 {
-        font-size: 28px;
-        font-weight: normal;
-        height: 30px;
-        padding: 30px;
-    }
-}
-</style>
+<template>
+  <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+  <div v-else>
+    <el-table :data="gameHot" style="width: 100%">
+      <el-table-column prop="order_number" label="订单号" width="180"/>
+      <el-table-column prop="appname" label="游戏名称"  />
+      <el-table-column prop="game_product_name" label="道具名称"  />
+      <el-table-column prop="order_amount" label="道具数量" />
+      <el-table-column prop="order_submit_time" label="创建时间" width="180">
+        <template #default="scope">
+          <div>
+            {{ parseTime(scope.row.order_submit_time) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="order_asynch_time" label="付款时间" width="180">
+        <template #default="scope">
+          <div>
+            {{ scope.row.order_asynch_time? parseTime(scope.row.order_asynch_time):'-' }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="channel_name" label="支付方式" />
+      <el-table-column prop="order_submit_time" label="订单状态" >
+        <template #default="scope">
+          <div>
+            {{ status[scope.row.order_status] }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="target_role_id" label="游戏订单号" width="180"/>
+      <el-table-column prop="out_trade_no" label="支付平台订单号" width="180" />
+    </el-table>
+    <div class="demo-pagination-block">
+      <el-pagination
+        v-model:current-page="pageConfig.page"
+        hide-on-single-page
+        v-model:page-size="pageConfig.pagesize"
+        layout="prev, pager, next, jumper,total"
+        :total="pageConfig.total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue'
+import { userOrder } from '@/api/index'
+import Message from '@/utils/Message'
+import { parseTime } from '@/utils/index'
+
+const gameHot: any = ref([])
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const pageConfig = reactive({
+  page: 1,
+  pagesize: 10,
+  total: 0
+})
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  pageConfig.page = val
+  getTableData()
+}
+const status = ref<any[]>([])
+const getTableData = async() => {
+  const params = {
+    page: pageConfig.page,
+    pagesize: pageConfig.pagesize
+  }
+  await userOrder(params).then(res => {
+    console.log('热门游戏', res.data)
+    if (res.data.code === 200 && res.data.data) {
+      gameHot.value = res.data.data.lists || []
+      isLoading.value = false
+      pageConfig.total = res.data.data.total.total || 0
+      status.value = res.data.data.status
+    }
+  }).catch(err => {
+    console.log(err)
+
+    Message.error(err.data.msg)
+  })
+}
+onMounted(async() => {
+  getTableData()
+})
+
+</script>
+
+<style scoped lang="scss">
+.game_list {
+    box-sizing: border-box;
+    // padding: 20px;
+    background-color: #fff;
+    margin: 15px auto 20px;
+
+    h2 {
+        font-size: 28px;
+        font-weight: normal;
+        height: 30px;
+        padding: 30px;
+    }
+}
+</style>

src/view/p_views/rank/index.vue

@@ -1,29 +1,36 @@
 <template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-    <div v-else class="w1000 rank">
-        <div class="header_list">
-            <el-button :plain="true" round v-for="(item, index) in rankList" :key="item.id"
-                @click="selectType('rank', index)">
-                <span :class="{ active: currentIndex === index }">{{ item.title }}</span>
-            </el-button>
-            <el-select v-model="value" class="select_rank" placeholder="请选择分类" size="large">
-                <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.name"
-                    @click="selectType('category', item.id)" />
-            </el-select>
-        </div>
-        <!-- 游戏列表 -->
-        <RankList :gameLis="gameLis" :prefix="prefix" :rank="true" :tagArr="tagArr" :more="loadMore" :total="total"  />
+  <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+  <div v-else class="w1000 rank">
+    <div class="header_list">
+      <el-button
+        :plain="true"
+        round
+        v-for="(item, index) in rankList"
+        :key="item.id"
+        @click="selectType('rank', index)">
+        <span :class="{ active: currentIndex === index }">{{ item.title }}</span>
+      </el-button>
+      <el-select v-model="value" class="select_rank" placeholder="请选择分类" size="large">
+        <el-option
+          v-for="item in category"
+          :key="item.id"
+          :label="item.name"
+          :value="item.name"
+          @click="selectType('category', item.id)" />
+      </el-select>
     </div>
+    <!-- 游戏列表 -->
+    <rank-list :gameLis="gameLis" :prefix="prefix" :rank="true" :tagArr="tagArr" :more="loadMore" :total="total"  />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, reactive, onMounted, watch } from 'vue'
+// import { useRouter } from 'vue-router'
 import { getGameList, getGameTag, getGameType } from '@/api/index'
-import RankList from '@/components/RankList.vue';
 import Message from '@/utils/Message'
 
-const router = useRouter()
+// const router = useRouter()
 const currentIndex = ref(0)
 const value = ref('')
 const gameLis: any = ref([])
@@ -32,97 +39,95 @@ const tagArr: any = ref([])
 const isLoading = ref(true)
 const viewWidth = ref(document.documentElement.clientHeight - 80)
 const params = reactive({
-    type: 0,
-    tag_id: 0,
-    page: 2,
-    pagesize: 10
+  type: 0,
+  tag_id: 0,
+  page: 2,
+  pagesize: 10
 })
 const total = ref()
 const category: any = ref([])
 
 const rankList = reactive([
-    { id: 0, title: '下载榜' },
-    { id: 1, title: '高分榜' }
+  { id: 0, title: '下载榜' },
+  { id: 1, title: '高分榜' }
 ])
 
-
-
 // 数组对象排序
 const gameLisSort = (arr: Array<object | any>, key: string) => {
-    return arr.sort((a, b) => {
-        let x = a[key]
-        let y = b[key]
-        return ((x > y) ? -1 : (x < y) ? 1 : 0)     //从大到小
-        // return ((x < y) ? -1 : (x > y) ? 1 : 0)     //从小到大
-    })
+  return arr.sort((a, b) => {
+    const x = a[key]
+    const y = b[key]
+    return ((x > y) ? -1 : (x < y) ? 1 : 0) // 从大到小
+    // return ((x < y) ? -1 : (x > y) ? 1 : 0)     //从小到大
+  })
 }
 
-onMounted(async () => {
-    await getGameTag().then(res => {
-        console.log('标签', res);
-        tagArr.value = res.data.data
-    }).catch(err => {
-        Message.error(err.data)
-    })
-
-    await getGameType().then(res => {
-        console.log('类型', res);
-        category.value = res.data.data
-    }).catch(err => {
-        Message.error(err.data)
-    })
-    // selectType('rank', 0)      //默认初始下载榜为初始数据
-    getGameLists(params)
+onMounted(async() => {
+  await getGameTag().then(res => {
+    console.log('标签', res)
+    tagArr.value = res.data.data
+  }).catch(err => {
+    Message.error(err.data)
+  })
+
+  await getGameType().then(res => {
+    console.log('类型', res)
+    category.value = res.data.data
+  }).catch(err => {
+    Message.error(err.data)
+  })
+  // selectType('rank', 0)      //默认初始下载榜为初始数据
+  getGameLists(params)
 })
 
-const getGameLists = async (params) => {
+const getGameLists = async(params) => {
+  await getGameList(params).then(res => {
+    console.log('游戏列表', res)
+    if (res.data.code === 200 && res.data.data) {
+      gameLis.value = gameLis.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)
+  })
+}
+const selectType = async(type: string, index: number) => {
+  if (type === 'rank') {
+    currentIndex.value = index
+    if (index === 0) {
+      gameLis.value = []
+      getGameLists(params)
+    } else {
+      gameLis.value = gameLisSort(gameLis.value, 'game_score')
+    }
+  }
+  if (type === 'category') {
+    currentIndex.value = index
+    params.type = index
+    gameLis.value = []
     await getGameList(params).then(res => {
-        console.log('游戏列表', res);
-        if (res.data.code === 200 && res.data.data) {
-            gameLis.value = gameLis.value.concat(res.data.data.lists)
-            prefix.value = res.data.data.prefix
-            total.value = res.data.data.total
-            isLoading.value = false
-        }
+      if (res.data.code === 200 && res.data.data) {
+        gameLis.value = gameLis.value.concat(res.data.data.lists.filter(item => item.type === params.type))
+        console.log('gameLis.value', gameLis.value)
+        total.value = res.data.data.total
+        prefix.value = res.data.data.prefix
+        isLoading.value = false
+      }
     }).catch(err => {
-        Message.error(err.data)
+      Message.error(err.data)
     })
-}
-const selectType = async (type: string, index: number) => {
-    if (type === 'rank') {
-        currentIndex.value = index
-        if (index === 0) {
-            gameLis.value = []
-            getGameLists(params)
-        } else {
-            gameLis.value = gameLisSort(gameLis.value, 'game_score')
-        }
-    }
-    if (type === 'category') {
-        currentIndex.value = index
-        params.type = index
-        gameLis.value = []
-        await getGameList(params).then(res => {
-            if (res.data.code === 200 && res.data.data) {
-                gameLis.value = gameLis.value.concat(res.data.data.lists.filter(item => item.type === params.type))
-                console.log('gameLis.value', gameLis.value);
-                total.value = res.data.data.total
-                prefix.value = res.data.data.prefix
-                isLoading.value = false
-            }
-        }).catch(err => {
-            Message.error(err.data)
-        })
-    }
+  }
 }
 
-watch((type: string, index: number) => selectType(type, index), (vold, vnew) => { })
+watch((type: string, index: number) => selectType(type, index), () => { })
 // watch(params, (vold, vnew) => { getGameLists(params) })
 
 // 加载更多
 const loadMore = () => {
-    params.page += 1
-    getGameLists(params)
+  params.page += 1
+  getGameLists(params)
 }
 </script>
 
@@ -186,7 +191,6 @@ const loadMore = () => {
             background-color: rgb(209, 175, 55);
         }
 
-
         img {
             height: 130px;
             width: 130px;
@@ -235,4 +239,4 @@ const loadMore = () => {
 .active {
     color: #ed8c0f
 }
-</style>
+</style>

src/view/p_views/resetPwd/resetPwd.vue

@@ -1,339 +1,328 @@
-<template>
-  <div>
-    <div class="wrapper">
-        <el-tabs>
-            <el-tab-pane label="密码设置">
-              <div class="form-wrapper">
-                <el-form
-                  ref="ruleFormRef"
-                  :model="ruleForm"
-                  :rules="rules"
-                  label-width="140px"
-                  class="demo-ruleForm"
-                  status-icon
-                >
-                  <el-form-item label="旧密码：" v-if="from === 1" prop="old_password">
-                    <el-input type="password" v-model="ruleForm.old_password" placeholder="请输入旧密码" />
-                  </el-form-item>
-                  <el-form-item label="新密码：" prop="new_password">
-                    <el-input type="password" v-model="ruleForm.new_password" placeholder="请输入新密码" @input="blurValidate(ruleFormRef)" />
-                  </el-form-item>
-                  <el-form-item label="再次输入新密码：" prop="new_password2">
-                    <el-input type="password" v-model="ruleForm.new_password2" placeholder="请再次输入新密码" @input="blurValidate(ruleFormRef)" />
-                  </el-form-item>
-                  <el-form-item>
-                    <el-button type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm(ruleFormRef)">
-                      提交
-                    </el-button>
-                  </el-form-item>
-                </el-form>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="用户名设置">
-              <div class="form-wrapper">
-                <el-form
-                  ref="ruleFormRef2"
-                  :model="ruleForm2"
-                  :rules="rules2"
-                  label-width="140px"
-                  class="demo-ruleForm"
-                  status-icon
-                >
-                  <el-form-item label="用户名：" prop="account">
-                    <el-input type="text" :disabled="!!user.profile.user_name" v-model="ruleForm2.account" placeholder="请输入用户名" />
-                  </el-form-item>
-                  <el-form-item v-if="!user.profile.user_name">
-                    <el-button type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm2(ruleFormRef2)">
-                      提交
-                    </el-button>
-                  </el-form-item>
-                </el-form>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="手机号设置">
-              <div class="form-wrapper">
-                <el-form
-                  ref="ruleFormRef3"
-                  :model="ruleForm3"
-                  :rules="rules3"
-                  label-width="140px"
-                  class="demo-ruleForm"
-                  status-icon
-                >
-                  <el-form-item label="手机号：" prop="mobile">
-                    <el-input type="text" :disabled="!!user.profile.mobile" v-model="ruleForm3.mobile" placeholder="请输入手机号" />
-                  </el-form-item>
-                  <el-form-item label="验证码：" prop="captcha">
-                    <el-input type="text" :disabled="ruleForm3.mobile.length !== 11" v-model="ruleForm3.captcha" placeholder="请输入验证码" >
-                      <template #append>
-                          <el-button v-if="!!user.profile.mobile" @click="getCaptcha" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
-                          <el-button v-else @click="getCaptcha2" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
-                      </template>
-                    </el-input>
-                  </el-form-item>
-                  <el-form-item >
-                    <el-button v-if="!!user.profile.mobile" type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm3(ruleFormRef3)">
-                      解绑
-                    </el-button>
-                    <el-button v-else type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm4(ruleFormRef3)">
-                      绑定
-                    </el-button>
-                  </el-form-item>
-                </el-form>
-              </div>
-            </el-tab-pane>
-        </el-tabs>
-        
-      </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, computed, inject , onBeforeUnmount} from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { showSuccessToast, showFailToast } from 'vant';
-import type { FormInstance, FormRules } from 'element-plus'
-import {resetPassword,setPassword, userAccount, unbindCaptcha, clearMobile, bindCaptcha, bindMobile } from '@/api/index'
-import Message from '@/utils/Message'
-import { useStore } from '@/store/index'
-import checkRestTime from '@/utils/captcha'
-import { ElMessage, ElMessageBox } from 'element-plus'
-const user = useStore('user')
-
-const router = useRouter()
-const route = useRoute()
-// showSuccessToast('成功文案')
-// showFailToast('失败文案')
-const ruleFormRef = ref<FormInstance>()
-const ruleFormRef2 = ref<FormInstance>()
-const ruleFormRef3 = ref<FormInstance>()
-interface RuleForm {
-  old_password: string
-  new_password: string
-  new_password2: string
-  account?:string
-}
-const ruleForm = reactive<RuleForm>({
-  old_password: '',
-  new_password: '',
-  new_password2: ''
-})
-const ruleForm2 = reactive({
-  account: ''
-})
-const ruleForm3 = reactive({
-  mobile: '',
-  captcha: '',
-})
-const blurValidate = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  if(!ruleForm.new_password || !ruleForm.new_password2) return
-  formEl.validateField(['new_password', 'new_password2']).then((res) => {
-    console.log(res)
-  }).catch((error) => {
-    console.log(error)
-  })
-}
-const checkAge = (rule: any, value: any, callback: any) => {
-  if(!ruleForm.new_password2.length || !ruleForm.new_password.length){
-    return callback()
-  }
-  if(ruleForm.new_password2 !== ruleForm.new_password){
-    callback(new Error('两次输入的新密码不一致'))
-  }else{
-    callback()
-  }
-}
-const rules2 = reactive<FormRules>({
-  account:[
-    {required: true, message: '请输入用户名', trigger: 'blur'},
-    {pattern:'^[a-zA-Z][a-zA-Z0-9]{5,19}$', message: '请输入以字母为开头，长度为6-20位的用户名', trigger: 'blur'}
-  ]
-})
-const rules3 = reactive<FormRules>({
-  mobile:[
-    {required: true, message: '请输入手机号', trigger: 'blur'},
-    {pattern:/^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur'}
-  ],
-  captcha:[
-    {required: true, message: '请输入验证码', trigger: 'blur'},
-  ]
-})
-const rules = reactive<FormRules>({
-  old_password: [
-    { required: true, message: '请输入旧密码', trigger: 'blur' },
-    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' },
-  ],
-  new_password:[
-    { required: true, message: '请输入新密码', trigger: 'blur' },
-    {validator: checkAge},
-    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' },
-  ],
-  new_password2:[
-    { required: true, message: '请再次输入新密码', trigger: 'blur' },
-    {validator: checkAge},
-    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' },
-  ]
-})
-
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate(async(valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-      if(from.value === 1){
-        // 账号密码登录
-        await resetPassword({old_pass:ruleForm.old_password, new_pass: ruleForm.new_password}).then((res) => {
-          console.log(res)
-          Message.success(res.data.msg)
-        }).catch((error) => {
-          console.log(error)
-          Message.error(error.data.msg)
-        })
-      }else if(from.value === 2){
-        await setPassword({new_pass: ruleForm.new_password}).then((res) => {
-          console.log(res)
-          Message.success(res.data.msg)
-        }).catch((error) => {
-          console.log(error)
-          Message.error(error.data.msg)
-        })
-      }
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-const submitForm2 = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate(async(valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-      await userAccount({account: ruleForm2.account.toLowerCase()}).then((res) => {
-        console.log(res)
-        Message.success(res.data.msg)
-        user.getUserProfile()
-      }).catch((error) => {
-        console.log(error)
-        Message.error(error.data.msg)
-      })
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-const submitForm3 = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate(async(valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-      await clearMobile({captcha: ruleForm3.captcha}).then(async(res) => {
-        console.log(res)
-        Message.success(res.data.msg)
-        await user.getUserProfile()
-        ruleForm3.mobile = user.profile.mobile
-        ruleForm3.captcha = ''
-        clearInterval(interval)
-        smsMessage.value = '获取验证码'
-        can_send.value = true
-      }).catch((error) => {
-        console.log(error)
-        Message.error(error.data.msg)
-      })
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-const submitForm4 = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate(async(valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-      await bindMobile({mobile:ruleForm3.mobile, captcha: ruleForm3.captcha}).then(async(res) => {
-        console.log(res)
-        Message.success(res.data.msg)
-        await user.getUserProfile()
-        ruleForm3.mobile = user.profile.mobile
-        ruleForm3.captcha = ''
-        clearInterval(interval)
-        smsMessage.value = '获取验证码'
-        can_send.value = true
-      }).catch((error) => {
-        console.log(error)
-        Message.error(error.data.msg)
-      })
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-const can_send = ref<boolean>(true)
-const smsMessage = ref<'获取验证码' | number>('获取验证码')
-const VALID = 60
-
-const from = ref<1 | 2>(1)
-const getCaptcha = async() => {
-  await unbindCaptcha().then((res) => {
-      console.log(res)
-      can_send.value = false
-      smsMessage.value = VALID
-      settimes()
-      Message.success('验证码已发送，请注意查收')
-  }).catch((error) => {
-      console.log(error)
-      Message.error(error.data.msg)
-
-  })
-}
-const getCaptcha2 = async() => {
-  await bindCaptcha({mobile:ruleForm3.mobile}).then((res) => {
-      console.log(res)
-      can_send.value = false
-      smsMessage.value = VALID
-      settimes()
-      Message.success('验证码已发送，请注意查收')
-  }).catch((error) => {
-      console.log(error)
-      Message.error(error.data.msg)
-
-  })
-}
-let interval
-const settimes = () => {
-    const setTimeFn = () => {
-        (smsMessage.value as number)--
-        if (smsMessage.value as number < 0 || can_send.value === true) {
-            clearInterval(interval)
-            can_send.value = true
-            smsMessage.value = '获取验证码'
-        }
-    }
-    interval = setInterval(function() {
-        setTimeFn()
-    }, 1000)
-}
-onMounted(async()=>{
-  from.value = parseInt(localStorage.getItem('from') as string)as 1 | 2
-  await user.getUserProfile()
-  ruleForm2.account = user.profile?.user_name
-  ruleForm3.mobile = user.profile?.mobile
-})
-
-</script>
-
-
-<style lang="scss" scoped>
-.wrapper{
-  width: 1000px;
-  background-color: #fff;
-  margin: 0px auto;
-  border-radius: 15px;
-  box-sizing: border-box;
-  padding: 0px;
-  .form-wrapper{
-    width: 60%;
-    // height: 100%;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="wrapper">
+      <el-tabs>
+        <el-tab-pane label="密码设置">
+          <div class="form-wrapper">
+            <el-form
+              ref="ruleFormRef"
+              :model="ruleForm"
+              :rules="rules"
+              label-width="140px"
+              class="demo-ruleForm"
+              status-icon
+            >
+              <el-form-item label="旧密码：" v-if="from === 1" prop="old_password">
+                <el-input type="password" v-model="ruleForm.old_password" placeholder="请输入旧密码" />
+              </el-form-item>
+              <el-form-item label="新密码：" prop="new_password">
+                <el-input type="password" v-model="ruleForm.new_password" placeholder="请输入新密码" @input="blurValidate(ruleFormRef)" />
+              </el-form-item>
+              <el-form-item label="再次输入新密码：" prop="new_password2">
+                <el-input type="password" v-model="ruleForm.new_password2" placeholder="请再次输入新密码" @input="blurValidate(ruleFormRef)" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm(ruleFormRef)">
+                  提交
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="用户名设置">
+          <div class="form-wrapper">
+            <el-form
+              ref="ruleFormRef2"
+              :model="ruleForm2"
+              :rules="rules2"
+              label-width="140px"
+              class="demo-ruleForm"
+              status-icon
+            >
+              <el-form-item label="用户名：" prop="account">
+                <el-input type="text" :disabled="!!user.profile.user_name" v-model="ruleForm2.account" placeholder="请输入用户名" />
+              </el-form-item>
+              <el-form-item v-if="!user.profile.user_name">
+                <el-button type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm2(ruleFormRef2)">
+                  提交
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="手机号设置">
+          <div class="form-wrapper">
+            <el-form
+              ref="ruleFormRef3"
+              :model="ruleForm3"
+              :rules="rules3"
+              label-width="140px"
+              class="demo-ruleForm"
+              status-icon
+            >
+              <el-form-item label="手机号：" prop="mobile">
+                <el-input type="text" :disabled="!!user.profile.mobile" v-model="ruleForm3.mobile" placeholder="请输入手机号" />
+              </el-form-item>
+              <el-form-item label="验证码：" prop="captcha">
+                <el-input type="text" :disabled="ruleForm3.mobile.length !== 11" v-model="ruleForm3.captcha" placeholder="请输入验证码" >
+                  <template #append>
+                    <el-button v-if="!!user.profile.mobile" @click="getCaptcha" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
+                    <el-button v-else @click="getCaptcha2" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item >
+                <el-button v-if="!!user.profile.mobile" type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm3(ruleFormRef3)">
+                  解绑
+                </el-button>
+                <el-button v-else type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm4(ruleFormRef3)">
+                  绑定
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { resetPassword, setPassword, userAccount, unbindCaptcha, clearMobile, bindCaptcha, bindMobile } from '@/api/index'
+import Message from '@/utils/Message'
+import { useStore } from '@/store/index'
+const user = useStore('user')
+
+const ruleFormRef = ref<FormInstance>()
+const ruleFormRef2 = ref<FormInstance>()
+const ruleFormRef3 = ref<FormInstance>()
+interface RuleForm {
+  old_password: string
+  new_password: string
+  new_password2: string
+  account?:string
+}
+const ruleForm = reactive<RuleForm>({
+  old_password: '',
+  new_password: '',
+  new_password2: ''
+})
+const ruleForm2 = reactive({
+  account: ''
+})
+const ruleForm3 = reactive({
+  mobile: '',
+  captcha: ''
+})
+const blurValidate = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  if (!ruleForm.new_password || !ruleForm.new_password2) return
+  formEl.validateField(['new_password', 'new_password2']).then((res) => {
+    console.log(res)
+  }).catch((error) => {
+    console.log(error)
+  })
+}
+const checkAge = (rule: any, value: any, callback: any) => {
+  if (!ruleForm.new_password2.length || !ruleForm.new_password.length) {
+    return callback()
+  }
+  if (ruleForm.new_password2 !== ruleForm.new_password) {
+    callback(new Error('两次输入的新密码不一致'))
+  } else {
+    callback()
+  }
+}
+const rules2 = reactive<FormRules>({
+  account: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { pattern: '^[a-zA-Z][a-zA-Z0-9]{5,19}$', message: '请输入以字母为开头，长度为6-20位的用户名', trigger: 'blur' }
+  ]
+})
+const rules3 = reactive<FormRules>({
+  mobile: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
+  ],
+  captcha: [
+    { required: true, message: '请输入验证码', trigger: 'blur' }
+  ]
+})
+const rules = reactive<FormRules>({
+  old_password: [
+    { required: true, message: '请输入旧密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' }
+  ],
+  new_password: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { validator: checkAge },
+    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' }
+  ],
+  new_password2: [
+    { required: true, message: '请再次输入新密码', trigger: 'blur' },
+    { validator: checkAge },
+    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' }
+  ]
+})
+
+const submitForm = async(formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      if (from.value === 1) {
+        // 账号密码登录
+        await resetPassword({ old_pass: ruleForm.old_password, new_pass: ruleForm.new_password }).then((res) => {
+          console.log(res)
+          Message.success(res.data.msg)
+        }).catch((error) => {
+          console.log(error)
+          Message.error(error.data.msg)
+        })
+      } else if (from.value === 2) {
+        await setPassword({ new_pass: ruleForm.new_password }).then((res) => {
+          console.log(res)
+          Message.success(res.data.msg)
+        }).catch((error) => {
+          console.log(error)
+          Message.error(error.data.msg)
+        })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const submitForm2 = async(formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      await userAccount({ account: ruleForm2.account.toLowerCase() }).then((res) => {
+        console.log(res)
+        Message.success(res.data.msg)
+        user.getUserProfile()
+      }).catch((error) => {
+        console.log(error)
+        Message.error(error.data.msg)
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const submitForm3 = async(formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      await clearMobile({ captcha: ruleForm3.captcha }).then(async(res) => {
+        console.log(res)
+        Message.success(res.data.msg)
+        await user.getUserProfile()
+        ruleForm3.mobile = user.profile.mobile
+        ruleForm3.captcha = ''
+        clearInterval(interval)
+        smsMessage.value = '获取验证码'
+        can_send.value = true
+      }).catch((error) => {
+        console.log(error)
+        Message.error(error.data.msg)
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const submitForm4 = async(formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      await bindMobile({ mobile: ruleForm3.mobile, captcha: ruleForm3.captcha }).then(async(res) => {
+        console.log(res)
+        Message.success(res.data.msg)
+        await user.getUserProfile()
+        ruleForm3.mobile = user.profile.mobile
+        ruleForm3.captcha = ''
+        clearInterval(interval)
+        smsMessage.value = '获取验证码'
+        can_send.value = true
+      }).catch((error) => {
+        console.log(error)
+        Message.error(error.data.msg)
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const can_send = ref<boolean>(true)
+const smsMessage = ref<'获取验证码' | number>('获取验证码')
+const VALID = 60
+
+const from = ref<1 | 2>(1)
+const getCaptcha = async() => {
+  await unbindCaptcha().then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    Message.success('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    Message.error(error.data.msg)
+  })
+}
+const getCaptcha2 = async() => {
+  await bindCaptcha({ mobile: ruleForm3.mobile }).then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    Message.success('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    Message.error(error.data.msg)
+  })
+}
+let interval
+const settimes = () => {
+  const setTimeFn = () => {
+    (smsMessage.value as number)--
+    if (smsMessage.value as number < 0 || can_send.value === true) {
+      clearInterval(interval)
+      can_send.value = true
+      smsMessage.value = '获取验证码'
+    }
+  }
+  interval = setInterval(function() {
+    setTimeFn()
+  }, 1000)
+}
+onMounted(async() => {
+  from.value = parseInt(localStorage.getItem('from') as string)as 1 | 2
+  await user.getUserProfile()
+  ruleForm2.account = user.profile?.user_name
+  ruleForm3.mobile = user.profile?.mobile
+})
+
+</script>
+
+<style lang="scss" scoped>
+.wrapper{
+  width: 1000px;
+  background-color: #fff;
+  margin: 0px auto;
+  border-radius: 15px;
+  box-sizing: border-box;
+  padding: 0px;
+  .form-wrapper{
+    width: 60%;
+    // height: 100%;
+  }
+}
+</style>

src/view/p_views/search/index.vue

@@ -1,51 +1,50 @@
-<template>
-    <!-- <loading v-if="search.getLoading" :style="{ height: viewWidth + 'px' }" /> -->
-    <div class="w1000">
-        <!-- <el-button @click="loadMore">page加加</el-button> -->
-        <div class="game_list" v-if="search.searchLis.length > 0">
-            <IndexList :list="search.searchLis" :prefix="search.getPrefix"></IndexList>
-            <div class="more df aic jcc" v-if="search.getPage * search.getPagesize <= search.getTotal">
-                <el-button class="df aic jcc" @click="loadMore">更多</el-button>
-            </div>
-            <div v-else>
-                <div class="df aic jcc" style="color: #999;height: 100px;font-size: 18px;">----- 没有更多数据了 -----</div>
-            </div>
-        </div>
-        <el-empty v-else></el-empty>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import IndexList from '@/components/IndexList.vue'
-import { useStore } from '@/store'
-
-const search = useStore('search')
-const route = useRoute()
-
-search.setSearchLis(route.query.screen_name)
-
-// 加载更多
-const loadMore = () => {
-    search.setSearchPage()
-    search.setClean(false)
-}
-
-// watch(() => loadMore, (v,i) => {}, {deep: true, immediate:true})
-
-</script>
-
-<style scoped>
-.game_list {
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #fff;
-    margin: 15px auto 20px;
-}
-
-.list_cont .list img {
-    width: 0;
-    height: 0;
-}
-</style>
+<template>
+  <!-- <loading v-if="search.getLoading" :style="{ height: viewWidth + 'px' }" /> -->
+  <div class="w1000">
+    <!-- <el-button @click="loadMore">page加加</el-button> -->
+    <div class="game_list" v-if="search.searchLis.length > 0">
+      <index-list :list="search.searchLis" :prefix="search.getPrefix"/>
+      <div class="more df aic jcc" v-if="search.getPage * search.getPagesize <= search.getTotal">
+        <el-button class="df aic jcc" @click="loadMore">更多</el-button>
+      </div>
+      <div v-else>
+        <div class="df aic jcc" style="color: #999;height: 100px;font-size: 18px;">----- 没有更多数据了 -----</div>
+      </div>
+    </div>
+    <el-empty v-else/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import IndexList from '@/components/IndexList.vue'
+import { useStore } from '@/store'
+
+const search = useStore('search')
+const route = useRoute()
+
+search.setSearchLis(route.query.screen_name)
+
+// 加载更多
+const loadMore = () => {
+  search.setSearchPage()
+  search.setClean(false)
+}
+
+// watch(() => loadMore, (v,i) => {}, {deep: true, immediate:true})
+
+</script>
+
+<style scoped>
+.game_list {
+    box-sizing: border-box;
+    padding: 20px;
+    background-color: #fff;
+    margin: 15px auto 20px;
+}
+
+.list_cont .list img {
+    width: 0;
+    height: 0;
+}
+</style>

src/vite-env.d.ts

@@ -1,7 +1,22 @@
-/// <reference types="vite/client" />
+// / <reference types="vite/client" />
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+interface ImportMetaEnv {
+  // 端口
+  readonly VITE_LOGO_VISIBLE: 'QingQue'|'KuPai'
+  // 标题
+  readonly VITE_API_HOST: string
+  // 超时时间
+  readonly VITE_PROJECT_NAME: string
+  // 删除console.log
+  readonly ENV: any
+  // 更多环境变量...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

vite.config.ts

@@ -1,69 +1,69 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path'
-// vant插件
-import Components from "unplugin-vue-components/vite";
-import { VantResolver } from "unplugin-vue-components/resolvers";
-// 引入vite兼容浏览器插件
-import legacy from '@vitejs/plugin-legacy'
-
-function pathResolve(dir) {
-  return resolve(__dirname, '.', dir)
-}
-
-export default defineConfig({
-  base: './',
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [VantResolver()],
-    }),
-    // vite兼容低版本浏览器 如UC浏览器 内核55
-    legacy({
-      targets: ['chrome 50', 'ie >= 11'],
-      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // regenerator-runtime/runtime   @dian/polyfill
-      renderLegacyChunks: true,
-      polyfills: [
-        'es.symbol',
-        'es.array.filter',
-        'es.promise',
-        'es.promise.finally',
-        'es/map',
-        'es/set',
-        'es.array.for-each',
-        'es.object.define-properties',
-        'es.object.define-property',
-        'es.object.get-own-property-descriptor',
-        'es.object.get-own-property-descriptors',
-        'es.object.keys',
-        'es.object.to-string',
-        'web.dom-collections.for-each',
-        'esnext.global-this',
-        'esnext.string.match-all',
-        // // 这个无法处理
-        // 'es.string.replace-all'
-      ],
-      // 在polyfills外可以执行
-      modernPolyfills: ['es.string.replace-all']
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': pathResolve('src')
-    },
-  },
-  
-  server: {
-    host: '0.0.0.0',
-    cors: true,
-    open: true,
-    proxy: {
-      // 跨域前缀写法 
-      '/api': {
-        target: 'http://192.168.99.223:3000',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
-      },
-    },
-  },
-})
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+// vant插件
+import Components from 'unplugin-vue-components/vite'
+import { VantResolver } from 'unplugin-vue-components/resolvers'
+// 引入vite兼容浏览器插件
+import legacy from '@vitejs/plugin-legacy'
+
+function pathResolve(dir) {
+  return resolve(__dirname, '.', dir)
+}
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [VantResolver()]
+    }),
+    // vite兼容低版本浏览器 如UC浏览器 内核55
+    legacy({
+      targets: ['chrome 50', 'ie >= 11'],
+      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // regenerator-runtime/runtime   @dian/polyfill
+      renderLegacyChunks: true,
+      polyfills: [
+        'es.symbol',
+        'es.array.filter',
+        'es.promise',
+        'es.promise.finally',
+        'es/map',
+        'es/set',
+        'es.array.for-each',
+        'es.object.define-properties',
+        'es.object.define-property',
+        'es.object.get-own-property-descriptor',
+        'es.object.get-own-property-descriptors',
+        'es.object.keys',
+        'es.object.to-string',
+        'web.dom-collections.for-each',
+        'esnext.global-this',
+        'esnext.string.match-all'
+        // // 这个无法处理
+        // 'es.string.replace-all'
+      ],
+      // 在polyfills外可以执行
+      modernPolyfills: ['es.string.replace-all']
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': pathResolve('src')
+    }
+  },
+
+  server: {
+    host: '0.0.0.0',
+    cors: true,
+    open: true,
+    proxy: {
+      // 跨域前缀写法
+      '/api': {
+        target: 'http://192.168.99.223:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
+})