gupiao_weixin_uniapp/pages/user/collectionSerch.vue

<template>
  <view class="collection_serch">
    <view class="center">
      <view class="serch">
        <u-input
          placeholder="请输入个股代码或名称"
          v-model="serchValue"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          shape="circle"
          @input="change"
          fontSize="24rpx"
        ></u-input>
        <view class="serch_text">搜索</view>
      </view>
      <view
        class="serch_list"
        v-for="(item, index) in serchList"
        :key="index"
        @tap="detail(item)"
      >
        <image
          src="../../static/serch.png"
          mode="scaleToFill"
          style="width: 26rpx; height: 26rpx"
        />
        <view style="margin-left: 10rpx">{{ item.name }}</view>
      </view>
    </view>
    <view class="private_table_head" v-if="list.length > 0">
      <view class="private_table_head_left">
        <view class="private_head_name">股票名称</view>
        <view class="private_head_price">价格</view>
        <view class="private_head_gains">涨幅</view>
      </view>
      <view class="private_table_head_right" @tap="privateBelong">
        <view>关注日期</view>
      </view>
    </view>
    <view class="private_table_list" v-for="(item, index) in list" :key="index">
      <view class="private_table_list_left">
        <view class="table_list_name">
          <view>{{ item.name }}</view>
          <view class="table_list_code">{{ item.code }}</view>
        </view>
        <view class="table_list_price" :style="{ color: item.color }">
          {{ item.price }}
        </view>
        <view class="table_list_gains" :style="{ color: item.color }">
          {{ item.gains }}
        </view>
      </view>
      <view>{{ item.suoshu }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        serchValue: '',
        serchList: [],
        list: [],
      }
    },
    methods: {
      change() {
        this.list = []
        // this.$api
        //   .post('/getHomeInfo', {
        //     keyword: this.serchValue,
        //   })
        //   .then(r => {
        //     if (r) {
        this.serchList = [
          {
            name: '长城汽车',
          },
          {
            name: '长城汽车',
          },
          {
            name: '长城汽车',
          },
        ]
        //     }
        //   })
        if (this.serchValue.length == 0) {
          this.serchList = []
        }
      },
      detail(item) {
        this.serchList = []
        // this.$api.post('/getHomeInfo', {}).then(r => {
        //   if (r) {
        this.list = [
          {
            code: '601633',
            name: '长城汽车',
            price: '33.21',
            gains: '10.12%',
            date: '2023-04-10',
          },
          {
            code: '601633',
            name: '泰永长征',
            price: '33.21',
            gains: '10.12%',
            date: '2023-04-10',
          },
        ]

        //     this.list = r
        //     this.list.forEach(item => {})
        //     this.list = [...this.list]
        //     this.showLoad = false
        //   }
        // })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 0 24rpx;
  }
  .serch {
    position: relative;
  }
  .serch_text {
    position: absolute;
    right: 0;
    top: 0;
    width: 120rpx;
    height: 75rpx;
    background-color: #ec7c00;
    color: white;
    border-radius: 36rpx;
    text-align: center;
    line-height: 75rpx;
    font-size: 28rpx;
    font-weight: bold;
  }
  /deep/.u-border {
    border-color: #ec7c00 !important;
  }
  .serch_list {
    padding: 32rpx 0;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    border-bottom: 1px solid #cfcfcf;
  }
  .table_head {
    padding: 20rpx 24rpx;
    background-color: #fff9f3;
    font-size: 24rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 34rpx;
  }
  .table_head view {
    width: 140rpx;
    text-align: center;
  }
  .table_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 24rpx 0 24rpx;
    font-size: 28rpx;
  }
  .table_list view {
    text-align: center;
    width: 140rpx;
  }
  .private_table_head {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    background-color: #fff9f3;
    padding: 20rpx 24rpx;
    justify-content: space-between;
    .private_table_head_right {
      display: flex;
      align-items: center;
    }
    .private_table_head_left {
      display: flex;
      align-items: center;
      .private_head_name {
        width: 200rpx;
      }
      .private_head_price {
        width: 150rpx;
        text-align: center;
      }
      .private_head_gains {
        width: 150rpx;
        text-align: center;
      }
    }
  }
  .private_table_list {
    padding: 24rpx 24rpx;
    border-bottom: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    .private_table_list_left {
      display: flex;
      align-items: center;
      .table_list_name {
        width: 200rpx;
      }
      .table_list_code {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
      .table_list_price {
        width: 150rpx;
        text-align: center;
      }
      .table_list_gains {
        width: 150rpx;
        text-align: center;
      }
    }
  }
  .private_screening_icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 24rpx;
  }
</style>