zhxy-jsd/src/pages/view/routine/JiFenPingJia/JiFenPingJia.vue

<template>
  <BasicLayout>
    <view class="container">
      <uni-card :is-shadow="false" is-full>
        <view class="header">
          <text class="score">我的得分: 84</text>
          <view class="status">
            <text>我的状态: </text>
            <view class="status-indicator"></view>
            <view class="review-count" v-if="reviewingCount > 0">
              {{ reviewingCount }}项在审核
            </view>
          </view>
        </view>
      </uni-card>

      <uni-card :is-shadow="false" is-full margin="10px 0 0 0">
        <view class="list-header">
          <text class="category-header">分类</text>
          <text class="value-header">分值</text>
        </view>
        <view
          class="list-item"
          v-for="(item, index) in evaluationItems"
          :key="index"
        >
          <view
            class="flex-row items-center justify-between w-full"
            @click="handleItemClick(item)"
          >
            <view class="category-name">{{ item.category }}</view>
            <view class="flex-row items-center">
              <text class="value">{{ item.value }}</text>
              <view class="review-badge" v-if="item.isUnderReview">审</view>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon
            ></view>
          </view>
        </view>
      </uni-card>
    </view>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="flex-row items-center pb-10 pt-5">
          <u-button
            text="上传个人荣誉"
            class="ml-15 mr-7"
            :plain="true"
            @click="scgrry"
          />
          <u-button
            text="上传公开课获奖"
            class="mr-15 mr-7"
            type="primary"
            @click="scgkkhj"
          />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

const evaluationItems = ref([
  { category: "师德师风", value: 8, isUnderReview: false },
  { category: "考勤管理", value: 4, isUnderReview: true },
  { category: "资料上交", value: 1, isUnderReview: false },
  { category: "教学质量", value: 1, isUnderReview: true },
  { category: "教育科研课题", value: 8, isUnderReview: false },
  { category: "个人材料发表和获奖", value: 9, isUnderReview: true },
  { category: "展示交流和比赛", value: 4, isUnderReview: false },
  { category: "工作室活动", value: 5, isUnderReview: false },
  { category: "荣誉", value: 6, isUnderReview: true },
  { category: "辅导学生", value: 7, isUnderReview: false },
  { category: "安全管理", value: 2, isUnderReview: false },
  { category: "班级常规管理", value: 7, isUnderReview: true },
]);

// 计算正在审核的项目数量
const reviewingCount = computed(() => {
  return evaluationItems.value.filter(item => item.isUnderReview).length;
});

function handleItemClick(item: any) {
  uni.navigateTo({
    url: `/pages/view/routine/JiFenPingJia/detail?id=${item.id}`,
  });
}

function scgrry() {
  uni.navigateTo({
    url: `/pages/view/hr/teacherProfile/PersonalHonor`,
  });
}

function scgkkhj() {
  uni.navigateTo({
    url: `/pages/view/hr/teacherProfile/PublicClassAwards`,
  });
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0; // Adjusted padding
  font-size: 16px;
}

.score {
  color: #333;
  font-weight: bold;
}

.status {
  display: flex;
  align-items: center;
  color: #666;
}

.status-indicator {
  width: 12px;
  height: 12px;
  background-color: #4caf50; // Green color from the image
  margin-left: 8px;
  border-radius: 2px; // Slightly rounded corners
}

.review-count {
  background-color: #fff2e8;
  color: #ff6b35;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 12px;
  border: 1px solid #ff6b35;
  font-weight: bold;
}

// Remove default card padding if needed
::v-deep .uni-card .uni-card__content {
  padding: 10px 15px !important; // Overwrite default padding
}

.list-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 0; // Adjust padding as needed
  border-bottom: 1px solid #eee;
  color: #666;
  font-size: 14px;
}

.category-header {
  flex: 3; // Give more space to category
}

.value-header {
  flex: 1;
  text-align: right;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0; // Vertical padding for spacing
  border-bottom: 1px solid #eee;
  font-size: 14px;

  &:last-child {
    border-bottom: none; // Remove border for the last item
  }
}

.category-name {
  flex: 3; // Corresponds to header
  color: #333;
}

.value {
  flex: 1; // Corresponds to header
  text-align: right;
  color: #333;
  font-weight: 500;
}

.review-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #ff6b35;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  margin-left: 8px;
  margin-right: 8px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
  }
}
</style>