vue 添加自选股判断输入股票筛选结果

先通过vant 框架 --》选择 Search 搜索 组件

<template>
<section class="search">
  <form action="/">
    <van-search
      v-model="queryCode"
      placeholder="请输入股票代码或名称"
      show-action
      @input="searchInputHandler"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
  <div class="stock-result" v-if="stockResult">
    <p v-for="item in searchStock" :key="item.id" @click="chooseStock(item)"><i class="van-icon van-icon-search"></i>{{item.code}} {{item.name}}</p>
  </div>
  <div v-if="addChoice">
    <div class="search-add" v-for="item in searchStock" :key="item.id">
      <div>{{item.name}} &nbsp;{{item.code}}</div>
      <div class="search-btn" @click='addContractFree(item)'>+ 自选</div>
    </div>
  </div>
</section>
</template>

<script>
import { queryStock, addContractFree, queryStockPin, queryStockName } from '@/http.js'
import { Search } from 'vant'
export default {
  name: 'searchFree',
  components: {
    VanSearch: Search
  },
  data () {
    return {
      queryCode: '',
      addChoice: false,
      stockResult: false,
      searchStock: []
    }
  },
  methods: {
    // 查询股票
    queryStock (code) {
      if (!isNaN(code)) {
        return queryStock({
          filter_code: code,
          filter_count: 10
        })
      } else if (/^[a-zA-Z]*$/.test(code)) {
        return queryStockPin({
          filter_pinyin: code,
          filter_count: 10
        })
      } else {
        return queryStockName({
          filter_name: code,
          filter_count: 10
        })
      }
    },
    async onSearch () {
      const res = await this.queryStock(this.queryCode)
      if (res && res.data.data.length) {
        this.addChoice = true
        this.searchStock = res.data.data
      }
    },
    async searchInputHandler () {
      const res = await this.queryStock(this.queryCode)
      if (res && res.data.data.length) {
        this.stockResult = true
        this.searchStock = res.data.data
      }
    },
    chooseStock (item) {
      this.stockResult = false
      this.queryCode = item.code
      this.onSearch()
    },
    onCancel () {
      // this.$router.go(-1)
      this.$router.replace({ name: 'Trade', params: { active: 4 } })
    },
    // 添加自选股
    addStock (item) {
      return addContractFree({
        stockcode: item.code
      })
    },
    async addContractFree (item) {
      const res = await this.addStock(item)
      if (res) {
        this.$toast('添加成功')
        this.$router.replace({ name: 'Trade', params: { active: 4 } })
      } else {
        this.$toast('已经添加了当前股票')
      }
    }
  }
}
</script>

axios 实现前后端接口交互

/* 股票 */
// 代码查询股票
const queryStock = (params = { filter_code: '', filter_count: '10' }) => axios.get('/stock/list/', {
  params
})
// 股票拼音首字母查询股票
const queryStockPin = (params = { filter_pinyin: '', filter_count: '10' }) => axios.get('/stock/list/', {
  params
})
// 股票名称查询股票
const queryStockName = (params = { filter_name: '', filter_count: '10' }) => axios.get('/stock/list/', {
  params
})