Game-Backstage-Management-System/src/views/AppManage/BaseInfoView.vue

<script setup lang="ts">
import HeaderCard from '@/components/dataAnalysis/HeaderCard.vue'
import { reactive, onMounted, ref } from 'vue'
import { initLoadResouce } from '@/utils/resource'
import { copyText } from '@/utils/common'

interface AppInfo {
  name: string
  pf: string
  appType: string
  createDate: string
  AppletsID: string
  AppID: string
  img: string
}

// 返回的APP信息
const appInfo = reactive<AppInfo>({
  img: '/img/default/defaultGameImg.svg',
  name: '消消乐',
  pf: '微信',
  appType: '游戏娱乐',
  createDate: '2024-1-1',
  AppletsID: 'ASJDFJAHSJDF',
  AppID: 'A12312312412JAHSJDF'
})

// 信息对应的字段
const fieldsInfo = {
  name: '应用名称',
  pf: '应用平台',
  appType: '游戏平台',
  createDate: '创建日期',
  AppletsID: '小程序ID',
  AppID: 'App ID'
}

// 资源的加载路径
const resourceInfo: Record<string, string> = {
  defaultHead: `/img/default/defaultHead.png`
}

// 使用blob的资源路径信息
const blobUrlInfo = reactive<Record<string, string>>({})

const AppID = ref<Array<HTMLSpanElement> | null>(null)

const copyAppID = () => {
  copyText(appInfo.AppID).then(() => {
    if (AppID.value) {
      const range = document.createRange()
      range.selectNodeContents(AppID.value[0])

      const selection = window.getSelection()
      if (selection) {
        selection.removeAllRanges()
        selection.addRange(range)
      }
    }
  })
}

onMounted(() => {
  // 去加载所有需要的资源
  initLoadResouce(resourceInfo).then((data) => {
    Object.assign(blobUrlInfo, data)
  })
})
</script>

<template>
  <div class="baseInfo">
    <HeaderCard :title="'基本信息'"></HeaderCard>
    <div class="body">
      <div class="info">
        <div class="infoItem" v-for="[key, val] in Object.entries(fieldsInfo)">
          <span class="itmeTitle">{{ val }}</span>
          <span class="text" :ref="key">{{ appInfo[key as keyof AppInfo] }}</span>
          <span class="copy" v-if="key === 'AppID'" @click="copyAppID">复制</span>
        </div>
      </div>
      <div class="photo">
        <el-image :src="appInfo.img">
          <template #error>
            <el-image class="headPortrait" :src="blobUrlInfo.defaultHead"></el-image>
          </template>
        </el-image>
      </div>
    </div>
  </div>
</template>

<style scoped>
.baseInfo {
  width: 98%;
  margin: 1% auto;

  box-sizing: border-box;
}

.body {
  box-sizing: border-box;
  margin-top: 15px;
  /* padding: 0 24px; */
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.info {
  width: 100%;
  box-sizing: border-box;
  padding: 40px 40px 40px 144px;
  background: #fff;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.02),
    0 1px 3px 0 rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  position: relative;
}

.photo {
  position: absolute;
  left: 40px;
  top: 40px;
  border-radius: 16px;
  width: 64px;
  height: 64px;
}

.infoItem {
  margin-bottom: 15px;
}

.itmeTitle {
  display: inline-block;
  width: 80px;
  text-align: left;
  padding-right: 0;
  font-size: 14px;
  color: #808695;
  line-height: 2px;
}

.text {
  font-weight: 600;
  color: #1c2438;
  font-size: 14px;
  margin-left: 106px;
  line-height: 20px;
}

.copy {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #2285f0;
  cursor: pointer;
}
</style>