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">
      <userCard @switchMember="jumpToChooseMember" @addRecord="onAdd"></userCard>
    </view>

    <view class="list" v-if="memberInfo">
      <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,
          userId: '',
        },
			}
		},
    computed: {
			...mapState(['memberInfo']),
      mixinsListApi() {
        return this.queryParams.userId ? 'queryExperienceList' : ''
      },
    },
		onLoad() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}
		},
    onShow() {
      // todo: set queryParams.userId by memberInfo

      if (!this.memberInfo && this.userInfo.id) {
        this.$store.commit('setMemberInfo', this.userInfo)
      }
      this.queryParams.userId = this.memberInfo.id
      this.getData()
    },
    methods: {
      getDataThen(records) {
        this.list = records.map(item => {
          const { id, name, image, createTime } = item

          return {
            id, 
            // todo: check key
            name, 
            image: image?.split?.(',') || [], 
            createTime
          }
        })
      },
			search() {
				console.log('search', this.keyword)
        uni.navigateTo({
					url: '/pages_order/growing/activity/search?search=' + this.keyword
				})
				// this.keyword = ''
			},
      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>