education-front/pages_order/search/index.vue

<template>
  <view class="page__view">
    
		<!-- 导航栏 -->
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" bgColor="#4883F9" color="#FFFFFF" />

    
    <view class="top">
      <!-- 搜索栏 -->
      <view class="search">
				<uv-search v-model="keyword" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
          <template #prefix>
            <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
          </template>
        </uv-search>
      </view>
    </view>

    <view class="main">
      <view class="flex card" v-for="item in list" :key="item.id">
        <view class="left">
          <view class="title">{{ item.title }}</view>
          <view class="content">{{ item.content }}</view>
        </view>
        <view class="right">
          <image class="img" :src="item.image" mode="aspectFill"></image>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

  export default {
		mixins: [mixinsList],
    data() {
      return {
        title: '搜索',
				keyword: '',
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: null,
					cid: null,
				},
        // todo
        mixinsListApi: '',
      }
    },
    onLoad({ search, cid, title }) {
      if (search) {
        this.keyword = search
				this.queryParams.title = search
			}
      if (cid) {
				this.queryParams.cid = cid
			}
      if (title) {
        this.title = title
      }
      
      this.getData()
    },
    methods: {
      search() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
				this.queryParams.title = this.keyword
        this.getData()
      },
      // todo: delete
      getData() {

        this.list = [
          {
            id: '001',
            title: '建筑学',
            content: `
              <h>建筑学</h>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
            `,
            image: '/static/image/temp-1.png',
          },
          {
            id: '002',
            title: '建筑学',
            content: `
              <h>建筑学</h>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
              <p>文字说明</p>
            `,
            image: '/static/image/temp-2.png',
          },
        ]

        this.getDataThen(this.list)
      },
      getDataThen(list) {
        const reg = /\<[^>]*\>/g

        this.list = list.map(item => {
          const content = item.content.replace(reg, '')

          return { ...item, content }
        })
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    background: $uni-bg-color-grey;
  }

  .top {
    padding: 49rpx 0 17rpx 0;
    box-sizing: border-box;
    background: $uni-color;
  }

	.search {
    margin: 0 19rpx;
    width: calc(100% - 20rpx * 2);
		background-color: #FFFFFF;
		border-radius: 37rpx;
		padding: 13rpx 0 13rpx 18rpx;
    box-sizing: border-box;
		display: flex;
		align-items: center;

		/deep/ .uv-search__action {
			color: $uni-color;
			padding: 10rpx 18rpx;
		}

    &-icon {
      width: 26rpx;
      height: auto;
    }
	}

  .main {
    padding: 17rpx;
    box-sizing: border-box;
  }

  .card {
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 

    & + & {
      margin-top: 27rpx;
    }

    .left {
      flex: 1;
      padding: 13rpx 32rpx 35rpx 20rpx;
      box-sizing: border-box;

      .title {
        font-size: 32rpx;
        font-weight: 700;
        color: #000000;
      }

      .content {
        font-size: 28rpx;
        font-weight: 400;
        color: #0F2248;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp:7; //显示的行
      }
    }

    .right {
      padding: 23rpx 17rpx 23rpx 0;
      box-sizing: border-box;

      .img {
        width: 225rpx;
        height: 325rpx;
      }
    }
  }

</style>