querybackNumber.vue 3.18 KB
<template>
  <el-dialog
      v-model="show" :close-on-click-modal="false" :title="language==0?'背号查询':'Back Number'" append-to-body
      center class="pcloginpop"
      close-icon="CircleClose" destroy-on-close
      width="460px"
  >
    <div style="min-height: 300px">

      <div class="flex mt30">
        <el-input :placeholder="language==0?'输入会员号 / 姓名查询':'Enter WDSF MIN / Name to Query'" v-model="query" clearable
        @enter="search" @blur="search" @empty="search"/>
        <el-button @click="search" class="btn-lineG" style="color: #fff">{{
            language == 0 ? '查询' : 'Search'
          }}
        </el-button>
      </div>

      <div v-if="list.length>0">
        <div class="nowteamItem" v-for="(form, index) in list" :key="index">
          <div class="info">
            <div class="nowName text-center">
              <span class="text-primary">{{ form.number }}</span>
            </div>
            <div>
              <label>{{ language==0?'选手1':'Name1' }}</label>{{ form.maleName }}
              <span v-if="form.maleWdsf"> - {{ form.maleWdsf }}</span>
            </div>
            <div>
              <label>{{ language==0?'选手2':'Name2' }}</label>{{ form.femaleName }}
              <span v-if="form.femaleWdsf"> - {{ form.femaleWdsf }}</span>
            </div>
            <div>
              <label>{{ language==0?'代表队':'Represent' }}</label>
              {{ form.groupName }}
            </div>
            <div v-if="form.zuInfo">
              <label> {{  language==0?'组别':'Event' }}</label>{{ form.zuInfo }}
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty/>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {getBackNumber} from "@/apiPc/common";
import {useStorage} from "@vueuse/core/index";

const language = useStorage('language', 0)
const show = ref(false)
// const form = ref({})
const list = ref([])
const query = ref('')
const search = () => {
  if (!query.value) {
    ElMessage.warning(language.value == 0 ? '请输入会员号/姓名' : 'Please enter WDSF MIN / Name')
    return
  }
  getBackNumber({query: query.value}).then(res => {
    if (!res.data||res.data.length==0) {
      list.value = []
      //提示 '未找到结果,请重新查询'
      ElMessage.warning(language.value == 0 ? '未找到结果,请重新查询' : 'No result')
      return
    }
    list.value = res.data
  })

}

const open = (param) => {
  show.value = true
  list.value = []
  query.value = ''
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.nowteamItem {
  width: 100%;border: 1px solid #c8c5ff; margin-top: 20px;
  position: relative;border-radius: 4px;padding: 0 0 20px;
  background: #FFFFFF;
  box-sizing: border-box;

  .info {
    .nowName {
      font-family: "DIN Alternate";
      font-size: 60px;
      font-weight: bold;
      overflow: hidden;
      display: block;
      margin: 10px;
    }

    label {
      text-align: right;
      font-size: 14px;
      padding-left: 7%
    }

    div {
      font-size: 14px;
      color: #333;
      margin: 6px 0 0;
    }
  }
}
</style>