首页配置

李婷婷
Showing 6 changed files with 132 additions and 58 deletions
src/viewsPc/components/bookingSearch.vue
src/viewsPc/components/masterClass.vue
src/viewsPc/home.vue
src/viewsPc/index.vue
src/viewsPc/index_en.vue
vite.config.js
--- a/src/viewsPc/components/bookingSearch.vue 0 → 100644
View file @00bdea3
+++ b/src/viewsPc/components/bookingSearch.vue 0 → 100644
View file @00bdea3
--- a/src/viewsPc/components/masterClass.vue
View file @00bdea3
+++ b/src/viewsPc/components/masterClass.vue
View file @00bdea3
@@ -3,7 +3,7 @@
    v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
    class="pcloginpop"
    close-icon="CircleClose" destroy-on-close
-    width="600px"
+    :width="isMobile ? '90%' : '600px'"
  >
    <div class="boxInvitation pd20">
      <el-steps :active="activeStep" align-center class="mb20">
@@ -183,7 +183,7 @@
 <script setup>
 import { useStorage } from '@vueuse/core/index'
-import { getCurrentInstance, watch } from 'vue'
+import { getCurrentInstance, watch ,onMounted} from 'vue'
 import { nextTick } from '@vue/runtime-core'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { addInvitation, countryList } from '@/apiPc/match'
@@ -203,6 +203,7 @@ const countrys = ref([])
 const courseList = ref([])
 const loading = ref(false)
 const cptId = ref('')
+const isMobile = ref(false)
 const rules = ref(
  {
    nationality: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
@@ -221,6 +222,13 @@ const open = (params) => {
  cptId.value = params.cptId
  getCourse()
 }
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 768
+}
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
 defineExpose({ open })
 watch(show, (value) => {
  if (!value) {
@@ -251,6 +259,10 @@ function setActive(n) {
    return
  }
  activeStep.value = n
+  // 在移动设备上，切换步骤时滚动到顶部
+  if (isMobile.value) {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
 }
 function courseChange(e) {
--- a/src/viewsPc/home.vue
View file @00bdea3
+++ b/src/viewsPc/home.vue
View file @00bdea3
@@ -2,9 +2,9 @@
  <div>
    <index-Ch
      v-if="language ==0" @backNumber="openBackNumber" @pickup="openPickup" @pop="openMaster"
-      @schSearch="openSchSearch"
+      @schSearch="openSchSearch" @reserveSearch="bookingSearchOpen"
    />
-    <index-En v-else @backNumber="openBackNumber" @pickup="openPickup" @pop="openMaster" @schSearch="openSchSearch" />
+    <index-En v-else @backNumber="openBackNumber" @pickup="openPickup" @pop="openMaster" @reserveSearch="bookingSearchOpen" @schSearch="openSchSearch" />
    <div v-if="showgg" class="fixed_gg">
      <!--天气-->
      <el-icon class="cclose" @click.stop="showgg=false">
@@ -80,6 +80,7 @@
    <pick-up ref="pickupRef" />
    <back-number ref="backNumberRef" />
    <sch-search ref="schSearchRef" />
+    <bookingSearch ref="bookingSearchRef" />
  </div>
 </template>
@@ -92,6 +93,7 @@ import DialogMasterClass from '@/viewsPc/components/masterClass'
 import PickUp from '@/viewsPc/components/pickup'
 import BackNumber from '@/viewsPc/components/querybackNumber'
 import SchSearch from '@/viewsPc/components/schSearch'
+import bookingSearch from '@/viewsPc/components/bookingSearch'
 import { useStorage } from '@vueuse/core/index'
 import { ref } from 'vue'
 import { getWeather } from '@/apiPc/webSite'
@@ -152,6 +154,14 @@ const openSchSearch = (params) => {
  }
  proxy.$refs['schSearchRef'].open(obj)
 }
+const bookingSearchOpen= (params) => {
+  console.log(params)
+  const obj = {
+    title: '日程查询',
+    cptId: params.cptId
+  }
+  proxy.$refs['bookingSearchRef'].open(obj)
+}
 </script>
 <style lang="scss" scoped>
--- a/src/viewsPc/index.vue
View file @00bdea3
+++ b/src/viewsPc/index.vue
View file @00bdea3
@@ -48,14 +48,13 @@
                  style="position: absolute;bottom:22%;right:5%;z-index: 999;display: flex;width: 580px;justify-content: space-around"
                >
                  <a
-                    v-if="matchData.liveQrcode"
                    class=" btn2"
                    style="z-index: 999999"
-                    @click.stop="liveQrcodeShow=true"
+                    @click.stop="liveQrcodeShowBtn"
                  >赛事直播
                  </a>
                  <a
-                    v-if="matchData.isCourseView==1"
                    class=" btn2"
                    @click.stop="popMaster"
                  >公益课
@@ -73,7 +72,7 @@
            <div class="h100" style="position: relative">
              <img v-if="n.bgImgUrl" :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
              <img v-else class="bannerImg" src="@/assets/dance/banner.png">
-              <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
+              <div style="position: absolute;left: 0;right: 0;top: 100px;margin: auto;">
                <div v-if="n.time>0" class="banner-count" @click="goMatch(n)">
                  距离开始还有
                  <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
@@ -97,31 +96,7 @@
                  </van-count-down>
                </div>
                <div v-if="n.timeEnd<0">
-                  <!--                  <a target="_blank" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698" class="banner-count" v-if="time>0&&n.id=='1778253367748993026'"  @click="goMatch(n)">-->
-                  <!--                    <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">-->
-                  <!--                      <template #default="timeData">-->
-                  <!--                        <div class="block">{{ timeData.days }}-->
-                  <!--                          <span class="colon">天</span>-->
-                  <!--                        </div>-->
-                  <!--                        ：-->
-                  <!--                        <div class="block">{{ timeData.hours }}-->
-                  <!--                          <span class="colon">时</span>-->
-                  <!--                        </div>-->
-                  <!--                        ：-->
-                  <!--                        <div class="block">{{ timeData.minutes }}-->
-                  <!--                          <span class="colon">分</span>-->
-                  <!--                        </div>-->
-                  <!--                        ：-->
-                  <!--                        <div class="block">{{ timeData.seconds }}-->
-                  <!--                          <span class="colon">秒</span>-->
-                  <!--                        </div>-->
-                  <!--                      </template>-->
-                  <!--                    </van-count-down>-->
-                  <!--                    开始直播-->
-                  <!--                  </a>-->
-                  <!--                  <a target="_blank" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698" class="banner-count bb" v-else-if="time<=0&&n.id=='1778253367748993026'"  @click="goMatch(n)">-->
-                  <!--                    直播进行中-->
-                  <!--                  </a>-->
                  <div class="banner-count bb" @click="goMatch(n)">
                    报名已结束
                  </div>
@@ -129,7 +104,24 @@
                <div v-if="n.time<=0 && n.timeEnd>=0" class="banner-count bb" @click="goMatch(n)">
                  开始报名
                </div>
              </div>
+              <div
+                  style="position: absolute;bottom:20px;z-index: 999;display: flex;width: 380px;justify-content: space-around"
+                >
+                  <a
+                    class=" btn2-phone"
+                    style="z-index: 999999"
+                    @click.stop="liveQrcodeShowBtn"
+                  >赛事直播
+                  </a>
+                  <a
+                    class=" btn2-phone"
+                    @click.stop="popMaster"
+                  >公益课
+                  </a>
+                </div>
            </div>
          </div>
        </el-carousel-item>
@@ -148,12 +140,13 @@
                  <download />
                </el-icon>
              </a>
-              <!--              <a-->
-              <!--                v-if="matchData.isCourseView==1" class="zn-btn ml20 btn-q forPc"-->
-              <!--                @click="popMaster"-->
-              <!--              >青少年公益课报名</a>-->
              <a
-                v-show="matchData?.id" class="zn-btn ml20 btn-q"
+                class="zn-btn ml20 btn-q"
+                @click="reserveSearch"
+              >预定查询</a>
+              <br/>
+              <a
+                v-show="matchData?.id" class="zn-btn  btn-q mt20"
                @click="backNumberSearch"
              >背号查询</a>
              <a v-show="matchData?.id" class="zn-btn ml20 btn-q" @click="schSearch">日程查询</a>
@@ -440,8 +433,10 @@
    <!--    邀请函-->
    <div class="fixed_gg_l yaoQing">
-      <img src="@/assets/logo/Invitation_c.png" @click="applyInvitation">
+      <!-- v-if="maList.invitationSw == '1'" -->
-      <div v-if="clubImage" style="padding-left: 7px;">
+      <img src="@/assets/logo/Invitation_c.png" @click="applyInvitation" v-if="matchData.invitationSw == '1'">
+      <!-- && maList.invitationSw == '1' -->
+      <div v-if="clubImage && matchData.visaSw == '1'" style="padding-left: 7px;">
        <el-image
          :preview-src-list="[clubImage]"
          :src="clubImage"
@@ -465,12 +460,12 @@
    </div>
    <affix-invitation ref="dialogInvitationRef" />
-    <el-dialog v-model="liveQrcodeShow" :title="language==0?'赛事直播' :'Live QR Code'" width="500px">
+    <el-dialog v-model="liveQrcodeShow" :title="language==0?'赛事直播' :'Live QR Code'" width="350px">
      <div v-if="matchData.liveQrcode" style="display: flex;justify-content: space-between">
        <el-image
          :src="fillImgUrl(matchData.liveQrcode)"
          fit="cover"
-          style="width: 450px;"
+          style="width: 350px;"
        />
      </div>
@@ -510,7 +505,7 @@ const navigationPic = ref({
 })
 const router = useRouter()
 const { proxy } = getCurrentInstance()
-const emit = defineEmits(['pop', 'pickup', 'backNumber', 'schSearch'])
+const emit = defineEmits(['pop', 'pickup', 'backNumber', 'schSearch','reserveSearch'])
 const time = ref(0)
 const etime = ref(0)
 const personList = ref([
@@ -589,6 +584,7 @@ const init = () => {
  })
  match.getMaList({ topFlag: 1 }).then((res) => {
    maList.value = res.rows
+    console.log(333,maList.value)
    for (const n of maList.value) {
      const today = dayjs().format('YYYY-MM-DD HH:mm:ss')
      if (n.signBeginTime) {
@@ -668,6 +664,14 @@ const goGuide = () => {
    }
  })
 }
+const liveQrcodeShowBtn = () => { 
+  if(!matchData.value.liveQrcode){
+     ElMessage.warning('当前赛事暂无直播')
+     return
+  }else{
+    liveQrcodeShow.value=true
+  }
+}
 const popMaster = () => {
  var params = {
    cptId: matchData.value.id
@@ -680,6 +684,12 @@ const backNumberSearch = () => {
  }
  emit('backNumber', params)
 }
+const reserveSearch = () => {
+   var params = {
+    cptId: matchData.value.id
+  }
+  emit('reserveSearch', params); // 向父组件发射事件+参数
+};
 const schSearch = () => {
  var params = {
    cptId: matchData.value.id
@@ -1326,6 +1336,22 @@ function applyInvitation() {
  flex-wrap: nowrap;
  right: 5%;
  color: #fff;
+  border-radius: 20px;
+}
+.btn2-phone {
+  cursor: pointer;
+  padding: 10px 20px;
+  font-size: 14px;
+  align-items: center;
+  overflow: hidden;
+  background: url(/src/assets/dance/time_bg.png) no-repeat center;
+  background-size: 100% 100%;
+  border-radius: 20px;
+  // bottom: 40%;
+  display: flex;
+  flex-wrap: nowrap;
+  // right: 5%;
+  color: #fff;
 }
 @media (max-width: 767px) {
--- a/src/viewsPc/index_en.vue
View file @00bdea3
+++ b/src/viewsPc/index_en.vue
View file @00bdea3
@@ -48,15 +48,13 @@
                  style="position: absolute;bottom:22%;right:5%;z-index: 999;display: flex;width: 580px;justify-content: space-around"
                >
                  <a
-                    v-if="matchData.liveQrcode"
                    class=" btn2"
-                    style="z-index: 999999" @click.stop="liveQrcodeShow=true"
+                    style="z-index: 999999" @click.stop="liveQrcodeShowBtn"
                  >
                    <!--                    赛事直播-->
                    Live Qrcode
                  </a>
                  <a
-                    v-if="matchData.isCourseView==1"
                    class=" btn2"
                    @click.stop="popMaster"
                  >Junior &Youth Camp REGISTER
@@ -73,7 +71,7 @@
            <div class="h100" style="position: relative">
              <img v-if="n.bgImgUrl" :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
              <img v-else class="bannerImg" src="@/assets/dance/banner.png">
-              <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
+              <div style="position: absolute;left: 0;right: 0;top: 100px;margin: auto;">
                <div v-if="n.time>0" class="banner-count">
                  Countdown
                  <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
@@ -107,6 +105,22 @@
                </div>
              </div>
+              <div
+                  style="position: absolute;bottom:20px;z-index: 999;display: flex;width: 380px;justify-content: space-around"
+                >
+                   <a
+                    class=" btn2-phone"
+                    style="z-index: 999999" @click.stop="liveQrcodeShowBtn"
+                  >
+                    Live Qrcode
+                  </a>
+                  <a
+                    class=" btn2-phone"
+                    @click.stop="popMaster"
+                  >Junior &Youth Camp REGISTER
+                  </a>
+                </div>
            </div>
          </div>
        </el-carousel-item>
@@ -127,7 +141,8 @@
                    <download />
                  </el-icon>
                </a>
-                <a
+                 <a class="zn-btn ml20 btn-q" @click="popMaster">Booking Inquiry</a>
+                <!-- <a
                  v-if="matchData.isCourseView==1" class="zn-btn ml20 btn-q forPc"
                  style="font-size: 15px;margin-right: 20px" @click="popMaster"
                >
@@ -135,7 +150,8 @@
                  <el-icon>
                    <Edit />
                  </el-icon>
-                </a>
+                </a> -->
                <a class="zn-btn ml20 btn-q" @click="backNumberSearch">Competition
                  Number</a>
                <a class="zn-btn ml20 btn-q" @click="schSearchSearch">Schedule
@@ -421,10 +437,11 @@
    <!--    邀请函-->
    <div class="fixed_gg_l yaoQing">
-      <img src="@/assets/logo/Invitation_e.png" @click="applyInvitation">
+      <img src="@/assets/logo/Invitation_e.png" @click="applyInvitation" v-if="matchData.invitationSw == '1'">
      <div style="padding-left: 7px;">
        <el-image
-          v-if="clubImage"
+          v-if="clubImage && matchData.visaSw == '1'"
          :preview-src-list="[clubImage]"
          :src="clubImage"
          fit="cover"
@@ -445,13 +462,13 @@
    </div>
    <affix-invitation ref="dialogInvitationRef" />
-    <el-dialog v-model="liveQrcodeShow" :title="language==0?'赛事直播' :'Live QR Code'" width="500px">
+    <el-dialog v-model="liveQrcodeShow" :title="language==0?'赛事直播' :'Live QR Code'" width="350px">
      <div style="display: flex;justify-content: space-between">
        <el-image
          v-if="matchData.liveQrcode"
          :src="fillImgUrl(matchData.liveQrcode)"
          fit="cover"
-          style="width: 450px;"
+          style="max-width: 350px;"
        />
      </div>
@@ -641,6 +658,14 @@ const goGuide = () => {
    }
  })
 }
+const liveQrcodeShowBtn = () => { 
+  if(!matchData.value.liveQrcode){
+     ElMessage.warning('There is currently no live broadcast of the event')
+     return
+  }else{
+    liveQrcodeShow.value=true
+  }
+}
 const popMaster = () => {
  var params = {
@@ -779,7 +804,7 @@ function applyInvitation() {
  .banner-count {
    position: absolute;
-    padding: 20px 40px;
+    padding: 20px;
    font-size: 20px;
    align-items: center;
    overflow: hidden;
@@ -1450,6 +1475,7 @@ function applyInvitation() {
  flex-wrap: nowrap;
  right: 5%;
  color: #fff;
+  border-radius: 20px;
 }
--- a/vite.config.js
View file @00bdea3
+++ b/vite.config.js
View file @00bdea3
@@ -65,20 +65,20 @@ export default defineConfig(({ mode, command }) => {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api/ztx-train': {
          // target: 'http://192.168.1.118:1896/stage-api',
-          target: 'https://jijin.wtwuxicenter.com/stage-api',
+          target: 'https://wdsfwuxicenter.com/stage-api',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api\/ztx-train/, '')
        },
        '/dev-api/ztx-match': {
          // target: 'http://192.168.1.118:8081',
-          target: 'https://jijin.wtwuxicenter.com/stage-api',
+          target: 'https://wdsfwuxicenter.com/stage-api',
          // target: 'https://wdsfwuxicenter.com/stage-api/',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '')
        },
        '/dev-api/ztx-webSite': {
          // target: 'http://192.168.1.118:8081',
-          target: 'https://jijin.wtwuxicenter.com/stage-api',
+          target: 'https://wdsfwuxicenter.com/stage-api',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
        },
@@ -92,7 +92,7 @@ export default defineConfig(({ mode, command }) => {
        },
        '/ticket': {
          // target: 'http://192.168.1.242:8081/',
-          target: 'https://jijin.wtwuxicenter.com/h5/',
+          target: 'https://wdsfwuxicenter.com/h5/',
          // target: 'https://ticketh5.wdsfwuxicenter.com/h5/',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/ticket/, '')