aslan-h5/src/views/AgencyCenter/components/workReportBox.vue

<template>
  <div style="position: relative; width: 100%">
    <img class="flipImg" :src="whiteBox" alt="" width="100%" style="display: block" />
    <div :style="{ backgroundImage }" class="status-background">
      <div
        style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
      >
        <div class="type" :style="{ fontSize }">{{ typeShowText }}</div>
      </div>
    </div>
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4%">
      <div
        style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
      >
        <div class="contentTime">{{ date }}</div>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
          <div class="contentText">{{ t('host_salary') }}: {{ hostSalary }}</div>
          <div class="contentText">{{ t('agent_salary') }}: ${{ agencySalary }}</div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
          <div class="contentText">{{ t('total') }}: {{ totalSalary }}</div>
        </div>
      </div>
      <div v-if="more" class="moreBt" @click="btMore">
        {{ t('more') }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useLangStore } from '@/stores/lang'

const { t } = useI18n()
const whiteBox = new URL('@/assets/images/HostCenter/whitebox.png', import.meta.url).href

const props = defineProps({
  type: {
    type: String,
    default: '',
  },

  date: {
    type: String,
    default: '',
  },

  hostSalary: {
    type: String,
    default: '',
  },

  agencySalary: {
    type: String,
    default: '',
  },

  totalSalary: {
    type: String,
    default: '',
  },

  more: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['showMore'])
const btMore = () => {
  emit('showMore')
}

const backgroundImage = ref('')
const fontSize = ref('')
const typeShowText = ref('')
const langStore = useLangStore()

// 监听语言变化，确保UI更新
watch(
  () => langStore.selectedLang,
  (newLang) => {
    console.log('Language changed in header:', newLang)
    updateTypeShowText()
  },
  { deep: true }
)

// 更新展示类型
const updateTypeShowText = () => {
  console.log('更新展示类型')

  if (props.type == 'In Progress') {
    typeShowText.value = t('in_progress')
  } else if (props.type == 'Pending') {
    typeShowText.value = t('pending')
  } else if (props.type == 'Completed') {
    typeShowText.value = t('completed')
  } else if (props.type == 'Out of account') {
    typeShowText.value = t('out_of_account')
  }
}

watch(
  () => props.type,
  (newType) => {
    console.log('newType:', newType)
    updateTypeShowText()
    if (newType == 'In Progress' || newType == t('in_progress')) {
      backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
      fontSize.value = '0.9em'
      typeShowText.value = t('in_progress')
    }
    if (newType == 'Pending' || newType == t('pending')) {
      backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
      fontSize.value = '1em'
      typeShowText.value = t('pending')
    }
    if (newType == 'Completed' || newType == t('completed')) {
      backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
      fontSize.value = '1em'
      typeShowText.value = t('completed')
    }
    if (newType == 'Out of account' || newType == t('out_of_account')) {
      backgroundImage.value = 'linear-gradient(112deg, #BDBDBD 5.66%, #AEAEAE 42.49%)'
      fontSize.value = '0.7em'
      typeShowText.value = t('out_of_account')
    }
    return
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
* {
  color: rgba(0, 0, 0, 0.8);
  font-weight: 700;
}

.type {
  color: #fff;
  font-weight: 600;
}

.contentTime {
  font-size: 1.1em;
}

.contentText {
  font-size: 1em;
}

.moreBt {
  font-size: 1em;

  position: absolute;
  bottom: 8%;
  right: 4%;
  color: #bb92ff;
  font-weight: 500;
}

.flipImg {
  width: 100%;
  height: auto;
}

.status-background {
  width: 48%;
  height: 46%;
  border-radius: 12px;
  margin: 2.5%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  display: flex;
  justify-content: flex-end;
}

[dir='rtl'] .flipImg {
  transform: scaleX(-1);
}

[dir='rtl'] .status-background {
  right: auto;
  left: 0;
}

/* RTL支持 */
[dir='rtl'] .contentText {
  text-align: right;
}

[dir='rtl'] .moreBt {
  right: auto;
  left: 4%;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}
</style>