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">8</view>枚成就</view>
          <view class="tag">新获得</view>
        </view>
        <view class="icon">
          <image class="img" src="@/static/image/temp-49.png" mode="widthFix"></image>
        </view>
      </view>
      
      <view class="list">
      	<recordsView :list="list"></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: '',
        // todo
        mixinsListApi: '',
      }
    },
    onLoad({ search }) {
      if (search) {
        this.keyword = search
				this.queryParams.title = search
			}
      
      this.getData()
    },
    methods: {
      // todo: delete
      getData() {
        this.list = [
          {
            id: '001',
            name: '呼伦贝尔6/8日丨经典or环线 双套餐可选',
            children: [
              {
                id: '0011',
                icon: '/static/image/temp-47.png',
                label: '言值认证',
                createTime: '2025-07-12',
              },
              {
                id: '0012',
                icon: '/static/image/temp-48.png',
                label: '国际旅行',
                createTime: '2025-07-12',
              },
              {
                id: '0013',
                icon: '/static/image/temp-48.png',
                label: '萌新毕业证',
                createTime: '2025-07-12',
              },
            ],
          },
          {
            id: '002',
            name: '新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐',
            children: [
              {
                id: '0011',
                icon: '/static/image/temp-48.png',
                label: '言值认证',
                createTime: '2025-05-15',
              },
            ],
          },
          {
            id: '003',
            name: '呼伦贝尔6/8日丨经典or环线 双套餐可选',
            children: [
              {
                id: '0011',
                icon: '/static/image/temp-47.png',
                label: '言值认证',
                createTime: '2025-07-12',
              },
              {
                id: '0012',
                icon: '/static/image/temp-48.png',
                label: '国际旅行',
                createTime: '2025-07-12',
              },
            ],
          },
          {
            id: '004',
            name: '新丝路到敦煌7日丨甘青轻松穿越，沙漠+草原',
            children: [
              {
                id: '0012',
                icon: '/static/image/temp-48.png',
                label: '国际旅行',
                createTime: '2025-07-12',
              },
              {
                id: '0013',
                icon: '/static/image/temp-47.png',
                label: '萌新毕业证',
                createTime: '2025-07-12',
              },
            ],
          },
        ]
      },
    },
  }
</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>