旅游目的地搜索 - 洲/季节筛选

<template>
  <view class='header'>
    <view style='position: fixed; top: 0; width: 100%; background-color: rgb(242,242,242);'>
      <view class='search'>
        <view class='s-box'>
          <span class='iconfont icon-sousuo'></span>
          <input type='text' class='inp' name='' id='' placeholder='请输入您想去的国家或城市' :value='searchTxt' @input='changeTxt' />
        </view>
        <text @tap='goList'>搜索</text>
      </view>
      <view class='h-list'>
        <view class='ac1'>
          <view @tap='ActiveIndex' :class="{'acblak': active === 1}">洲</view>
          <view @tap='ActiveIndex1' :class="{'acblak': active === 0}">季节</view>
        </view>
      </view>
      <view class='h-place' v-if='active === 1'>
        <span v-for='(item, index) in arrCon' :key='index' :class="{'ac': index === activeIndex}" @tap='changeActiveIndex(item, index)'>{{item}}
        </span>
      </view>
<pre><code>  &lt;view class='h-place' v-else&gt;
    &lt;span v-for='(item, index) in arrSea' :key='index' :class=&quot;{'ac': index === activeIndex}&quot; @tap='changeActiveIndex(item, index)'&gt;{{item}}
    &lt;/span&gt;
  &lt;/view&gt;

&lt;/view&gt;
&lt;view class='btn'&gt;
  &lt;view class='content' id='search_country' v-if='active === 1'&gt;
  &lt;ul&gt;
    &lt;li v-for='(item, index) in list' :key='index'&gt; {{item.country}}&lt;/li&gt;
  &lt;/ul&gt;
&lt;/view&gt;

&lt;view v-else&gt;
  &lt;ul class='aa1'&gt;
    &lt;li v-for='(item, index) in list1' :key='index'&gt;
      &lt;image :src='item.pro_pic_url' mode='' class='aa' /&gt;
      &lt;view class='str1'&gt;{{item.pro_title}}&lt;/view&gt;
      &lt;view class='str2'&gt;
          &lt;text&gt;{{item.country}}&lt;/text&gt;
          &lt;text&gt;|&lt;/text&gt;
          &lt;text&gt;
            &lt;text&gt;{{item.routing_data}}天&lt;/text&gt;
            &lt;text&gt;{{item.routing_nigth}}晚&lt;/text&gt;
          &lt;/text&gt;
          &lt;text&gt;|&lt;/text&gt;
          &lt;text&gt;{{item.collection_num}}&lt;/text&gt;
      &lt;/view&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/view&gt;
&lt;/view&gt;
</code></pre>
  </view>
</template>
<script>
  import http from '../../utils/http.js'
  export default {
    data() {
      return {
        searchTxt: '',
        arrCon: ['欧洲', '亚洲', '大洋洲', '非洲', '北美洲', '南美洲'],
        arrSea: ['春意阑珊', '盛夏果实', '秋来秋去', '冬之恋曲'],
        activeIndex: 0,
        active: 1,
        list: [],
        list1: [],
        activeitem: '',
        activNm: ''
      }
    },
    changeTxt(ev) {
      console.log('111', ev);
      this.searchTxt = ev.detail.value;
    },

    goList() {
      uni.navigateTo({
        url: '/pages/list/list?searchTxt=' + this.searchTxt,
      })
    },

    changeActiveIndex(e, index) {
      console.log(e);
      this.activeIndex = index;
      this.activeitem = e;
      this.activNm = e;
      this.req(this.activeitem);
      this.req2(this.activNm);
    },

    ActiveIndex() {
      this.active = 1;
    },
    ActiveIndex1() {
      this.active = 0;
    },
    onLoad(){
      this.req('欧洲');
      this.req2('春意阑珊');
    }, 
    methods: {
      req(e) {
        http.request('requirement/destination/countries/' + e, 'GET', '').then(res => {
          // console.log(res);
          this.list = res.data;
        })
      },

      req2(ev) {
        // console.log(ev);
        http.request('requirement/request/getMatchedProducts', 'POST', {
          'request_season': [ev],
          'product_type': 1
        }).then(res => {
          // console.log('2222', res);
          this.list1 = res.data.matchedProducts;
          console.log(this.list1);
        })
      },
    }
  }
</script>
<style>
</style>