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 mixinsList from '@/mixins/list.js'

	import recordsView from './recordsView.vue'

  export default {
		mixins: [mixinsList],
		components: {
      recordsView,
    },
    data() {
      return {
				keyword: '',
        mixinsListApi: 'queryMedalList',
      }
    },
    onLoad({ search }) {
      if (search) {
        this.keyword = search
				this.queryParams.title = search
			}
      
      this.getData()
    },
    methods: {
      getDataThen(records) {
        this.list = records.map(item => {
          const { id, activityId_dictText, medalId, medal, createTime, isLight: _isLight } = item

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

          return {
            id,
            name: activityId_dictText,
            children: [
              {
                medalId, 
                icon: isLight ? icon1 : icon2,
                label: title,
                createTime,
                isLight,
              },
            ]
          }
        })
      },
    },
  }
</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>