studytour-front/pages_order/growing/achievement/recordsView.vue

<template>
  <view class="records__view">
    <uv-steps direction="column">
      <uv-steps-item v-for="(record, index) in list" :key="record.id">
        <template #icon>
          <view class="flex mark is-active" v-if="index === 0">
            <image class="icon" src="@/static/image/icon-mark-highlight.png" mode="widthFix"></image>
          </view>
          <view class="flex mark" v-else>
            <image class="icon" src="@/static/image/icon-mark.png" mode="widthFix"></image>
          </view>
        </template>
        <template #title>
          <view class="title">{{ record.name }}</view>
        </template>
        <template #desc>
          <view class="content">
            <view class="list">
              <view class="flex flex-column list-item" v-for="(child, cIdx) in record.children" :key="cIdx" @click="onLightMedal(child.medalId)">
                <image class="list-item-icon" :src="child.icon" mode="aspectFill"></image>
                <view class="list-item-title">{{ child.label }}</view>
                <view class="list-item-desc" v-if="child.createTime">{{ $dayjs(child.createTime).format('YYYY-MM-DD') }}</view>
              </view>
            </view>
          </view>
        </template>
      </uv-steps-item>
    </uv-steps>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    methods: {
      async onLightMedal(medalId) {
        try {
          await this.$fetch('lightMedal', { medalId })
          this.$emit('lighted')
        } catch (err) {

        }
      },
    },
  }
</script>

<style scoped lang="scss">

  .records__view {
    padding-left: 40rpx;
  }

  .mark {
    margin-top: 8rpx;
    width: 36rpx;
    height: 36rpx;
    background: #F3F3F3;
    border-radius: 50%;

    .icon {
      width: 24rpx;
      height: auto;
    }

    &.is-active {
      background: linear-gradient(to right, #21FEEC, #019AF9);
    }
  }

  .title {
    font-family: PingFang SC;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 1.4;
    color: #191919;
  }

  .content {
    width: calc(100vw - 92rpx);
  }

  .list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    font-family: PingFang SC;
    line-height: 1.4;

    &-item {
      flex: none;
      row-gap: 4rpx;
      width: 206rpx;
      height: 226rpx;

      &-icon {
        width: 110rpx;
        height: 110rpx;
      }

      &-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #080808;
      }

      &-desc {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }

</style>