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

<template>
  <view class="page__view highlight">

    <!-- 导航栏 -->
		<navbar title="我的成就" leftClick @leftClick="$utils.navigateBack" />

    <view class="main">

      <view class="flex summary">
        <view class="info">
          <view class="flex title">共获得<view class="highlight">{{ total }}</view>枚成就</view>
          <view class="tag">新获得</view>
        </view>
        <view class="icon">
          <image class="img" src="@/pages_order/static/temp-49.png" mode="widthFix"></image>
        </view>
      </view>
      
      <view class="list">
      	<recordsView :list="list" @lighted="getData"></recordsView>
      </view>
    </view>

  </view>
</template>

<script>
	import { mapState } from 'vuex'
	import mixinsList from '@/mixins/list.js'

	import recordsView from './recordsView.vue'

  export default {
		mixins: [mixinsList],
		components: {
      recordsView,
    },
    data() {
      return {
				keyword: '',
        mixinsListApi: 'queryMedalList',
      }
    },
    computed: {
      ...mapState(['userInfo', 'memberInfo']),
    },
    onLoad({ search }) {
      if (search) {
        this.keyword = search
				this.queryParams.title = search
			}

      this.queryParams.bindUserId = this.memberInfo?.id || this.userInfo.id
      
      this.getData()
    },
    methods: {
      getDataThen(records) {
        const list = records.reduce((arr, item) => {
          const { id, activityId, activityId_dictText, medalId, medal, lightDate, createTime, isLight: _isLight } = item

          const { title, icon1, icon2 } = medal
          const isLight = _isLight == '1'

          const obj = {
            medalId, 
            icon: isLight ? icon1 : icon2,
            label: title,
            createTime: lightDate || createTime,
            isLight,
          }

          let index = arr.findIndex(activity => activity.id === activityId)

          if (index === -1) {
            arr.push({
              id: activityId,
              name: activityId_dictText,
              createTime,
              children: [obj]
            })
          } else {
            arr[index].children.push(obj)
          }

          return arr
          
        }, [])

        list.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())

        list.forEach(item => {
          item.children.sort((a, b) => {
            if ((a.isLight && b.isLight) || (!a.isLight && !b.isLight)) {
              return new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
            }
            if (a.isLight) {
              return -1
            }
            return 1
          })
        })

        this.list = list
      },
    },
  }
</script>

<style scoped lang="scss">
  .summary {
    padding: 16rpx 72rpx 32rpx 64rpx;
    justify-content: space-between;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
   
    .info {
      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #000000;

        .highlight {
          margin: 0 8rpx;
          color: $uni-color;
        }
      }

      .tag {
        margin-top: 4rpx;
        display: inline-block;
        padding: 4rpx 16rpx;
        font-size: 26rpx;
        color: #21607D;
        background: #DBF4FF;
        border-radius: 22rpx;
      }
    }

    .icon {
      width: 160rpx;
      height: auto;

      .img {
        width: 100%;
        height: auto;
      }
    }
  }
</style>