studytour-front/pages/index/growing.vue

<template>
	<view class="page__view highlight">
    
    <!-- 搜索栏 -->
    <view :class="['flex', 'search', isFocusSearch ? 'is-focus' : '']" >
      <uv-search 
        v-model="keyword" 
        placeholder="请输入" 
        color="#181818"
        bgColor="transparent" 
        :showAction="isFocusSearch"
        @custom="search" 
        @search="search"
        @focus="isFocusSearch = true"
        @blur="isFocusSearch = false"
      >
        <template #prefix>
          <image class="search-icon" src="@/static/image/icon-search-dark.png" mode="widthFix"></image>
        </template>
      </uv-search>
    </view>
  
    <view class="archives" v-if="userInfo.id">
      <userCard :medalList="medalList" :medalCount="medalCount" :experienceCount="total" @switchMember="jumpToChooseMember" @addRecord="onAdd"></userCard>
    </view>

    <view class="list" v-if="userInfo.id">
      <recordsView :list="list"></recordsView>
    </view>
    <view class="flex" v-else>
      <button class="btn btn-choose" @click="jumpToChooseMember">请先选择人员</button>
    </view>

    <!-- <record-form-popup ref="recordFormPopup" @submitted="getData"></record-form-popup> -->

		<tabber select="growing" />
  
  </view>
</template>

<script>
	import { mapState } from 'vuex'

	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
	import userCard from '@/components/growing/userCard.vue'
	import recordsView from '@/components/growing/recordsView.vue'
	// import recordFormPopup from '@/pages_order/comment/recordFormPopup.vue'

  export default {
		mixins: [mixinsList],
    components: {
      userCard,
      recordsView,
      // recordFormPopup,
      tabber,
    },
		data() {
			return {
				keyword: '',
				isFocusSearch: false,
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          bindUserId: '',
        },
        mixinsListApi: '',
        medalList: [],
        medalCount: 0,
			}
		},
    computed: {
			...mapState(['userInfo', 'memberInfo']),
      bindUserId() {
        return this.memberInfo?.id || this.userInfo.id
      },
    },
		onLoad() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}
		},
    onShow() {
      console.log('bindUserId', this.bindUserId)
      this.queryParams.bindUserId = this.bindUserId
      this.mixinsListApi = this.queryParams.bindUserId ? 'queryExperienceList' : ''

			if(uni.getStorageSync('token')){
				this.fetchMedalList()
        this.getData()
			}
    },
    onHide() {
      this.mixinsListApi = ''
    },
    methods: {
      getDataThen(records) {
        this.list = records.map(item => {
          const { id, activityTitle, activityId_dictText, imageList, createTime } = item

          return {
            id, 
            name: activityTitle || activityId_dictText || '', 
            images: imageList?.split?.(',') || [], 
            createTime
          }
        })
      },
			search() {
				console.log('search', this.keyword)
        uni.navigateTo({
					url: '/pages_order/growing/activity/search?search=' + this.keyword
				})
				// this.keyword = ''
			},
      async fetchMedalList() {
        try {
          const result = await this.$fetch('queryMedalList', { pageNo: 1, pageSize: 1000, isLight: '1', bindUserId: this.bindUserId })
          const { records, total } = result

          this.medalList = records
          this.medalCount = total
        } catch (err) {

        }
      },
      // onAdd() {
      //   this.$refs.recordFormPopup.open()
      // },
      jumpToChooseMember() {
        uni.navigateTo({
          url: `/pages_order/member/switch`
        })
      },
    },
  }
</script>

<style scoped lang="scss">

	.search {
		$w: 474rpx;
		$h: 64rpx;
		$radius: 32rpx;
		$borderWidth: 4rpx;

		width: $w;
		height: $h;
		position: relative;
    padding: 94rpx 32rpx 6rpx 32rpx;
		border-radius: $radius;

		&-icon {
			margin: 0 13rpx 0 26rpx;
			width: 30rpx;
			height: auto;
		}

		/deep/ .uv-search__content {
			padding: 12rpx 0;
			border: 4rpx solid transparent;
		}

    /deep/ .uv-search__content {
      background: #FFFFFF !important;
      border-color: #CFEFFF !important;
    }

    &.is-focus {
      /deep/ .uv-search__action {
        padding: 19rpx 24rpx;
        font-size: 26rpx;
        font-weight: 500;
        line-height: 1;
        color: #FFFFFF;
        background: #00A9FF;
        border-radius: 32rpx;
      }
    }

	}

  .archives {
    padding: 32rpx 40rpx 16rpx 40rpx;
  }

  .btn-choose {
    margin-top: 84rpx;
    padding: 14rpx 125rpx;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 1.4;
    color: #FFFFFF;
    background: linear-gradient(to right, #21FEEC, #019AF9);
    border: 2rpx solid #00A9FF;
    border-radius: 41rpx;
  }

</style>