gupiao_weixin_uniapp/pages/home/private/serch.vue

<template>
  <view>
    <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"
          style="margin-right: "
        ></u-input>
        <view class="serch_text" @tap="submit">搜索</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="table_head" v-if="this.list.length > 0">
      <view class="head_code">股票代码</view>
      <view class="head_name">股票名称</view>
      <view class="head_price">价格</view>
      <view class="head_gains">涨幅</view>
    </view>
    <view class="table_list" v-for="(item, index) in list" :key="index">
      <view>{{ item.securityCode }}</view>
      <view>{{ item.securityName }}</view>
      <view
        class="list_price"
        :class="{ list_price1: item.riseLossesCurrentDay < 0 }"
        >{{ item.closingPrice }}</view
      >
      <view
        class="list_price"
        :class="{ list_price1: item.riseLossesCurrentDay < 0 }"
        >{{ item.riseLossesCurrentDay.toFixed(2) }}</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 = []
        //     }
        //   })
        if (this.serchValue.length == 0) {
          this.serchList = []
        }
      },
      detail(item) {
        this.serchList = []
        // this.$api.post('/getHomeInfo', {}).then(r => {
        //   if (r) {
        // this.isMarket = false

        //     this.list = r
        //     this.list.forEach(item => {})
        //     this.list = [...this.list]
        //     this.showLoad = false
        //   }
        // })
      },
      submit() {
        console.log(111)
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: '',
            keyWord: this.serchValue,
            market: '',
            pageModel: {
              pageNo: 1,
              pageSize: 30,
              sortField: '',
              sortWay: '',
            },
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.list = r.list
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
    },
  }
</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;
  }
  .list_price {
    color: #d9001b;
  }
  .list_price1 {
    color: #6fbb60;
  }
  /deep/ .u-input__content__field-wrapper {
    margin-right: 120rpx !important;
  }
</style>