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,
				// todo
				mixinsListApi: '',
			}
		},
    computed: {
			...mapState(['memberInfo']),
    },
    methods: {
      // todo: delete
      getData() {
        this.list = [
          {
            id: '001',
            name: '新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐',
            image: [
              '/static/image/temp-38.png',
              '/static/image/temp-39.png',
              '/static/image/temp-40.png',
            ],
            createTime: '2025-07-12',
          },
          {
            id: '002',
            name: '仙踪新昌·韩妃江古道｜邂逅“江南小桂林”',
            image: [
              '/static/image/temp-41.png',
              '/static/image/temp-42.png',
              '/static/image/temp-43.png',
            ],
            createTime: '2025-06-18',
          },
          {
            id: '003',
            name: '山水石窟·大佛寺｜江南佛窟造像，新昌山水轻徒',
            image: [
              '/static/image/temp-44.png',
              '/static/image/temp-45.png',
              '/static/image/temp-46.png',
            ],
            createTime: '2025-06-15',
          },
        ]
      },
			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">
  .page__view {

    /deep/ .tabbar-box {
      .tabbar {
        z-index: 10000;
      }
    }
  }

	.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>