旅游目的地搜索 - 选择洲际或季节，探索精彩旅程

<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=&quot;h-place&quot; v-else&gt;
    &lt;span v-for=&quot;(item, index) in arrSea&quot; :key=&quot;index&quot; :class=&quot;{ 'ac': index === activeIndex }&quot; @tap=&quot;changeActiveIndex(item, index)&quot;&gt;{{item}}&lt;/span&gt;
  &lt;/view&gt;

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

  &lt;view v-else&gt;
    &lt;ul class=&quot;aa1&quot;&gt;
      &lt;li v-for=&quot;(item, index) in list1&quot; :key=&quot;index&quot;&gt;
        &lt;image :src=&quot;item.pro_pic_url&quot; mode=&quot;&quot; class=&quot;aa&quot; /&gt;
        &lt;view class=&quot;str1&quot;&gt;{{item.pro_title}}&lt;/view&gt;
        &lt;view class=&quot;str2&quot;&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>