zhishifufei_uniapp/pages/special/search.vue

<template>
  <BaseContainer class="search-page">
    <NavBar title="搜索" />
    <view class="form">
      <view class="left flex-center-x">
        <i class="iconfont2 iconsousuo"></i>
        <input v-model.trim="search" confirm-type="search" @confirm="onSearch(search)" placeholder="搜索课程讲师" />
        <i v-show="search" class="iconfont iconguanbi2" @click="search = ''"></i>
      </view>
      <view class="right flex flex-center" @click="onSearch(search)">搜索</view>
    </view>
		<view v-if="specialList.length" class="special-section">
      <view>
        <navigator v-for="item in specialList" :key="item.id" :url="getJumpUrl(item)">
          <view class="image">
            <image :src="item.image" mode="aspectFill" :alt="item.title" />
            <view v-if="item.type == 1" class="type">图文</view>
            <view v-else-if="item.type == 2" class="type">音频</view>
            <view v-else-if="item.type == 3" class="type">视频</view>
            <view v-else-if="item.type == 5" class="type">专栏</view>
          </view>
          <view class="text">
            <view class="special-title">{{ item.title }}</view>
            <view class="label">
              <text v-for="(label, index) in item.label" :key="index">{{ label }}</text>
            </view>
            <view class="money-total">
              <view class="money">
                ￥<text>{{ item.money }}</text>
              </view>
              <view v-if="!item.is_light" class="total">共{{ item.count }}节</view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
    <image v-if="isEmpty" class="empty" mode="aspectFit" :src="getImgPath('/wap/first/zsff/images/no_search.png')"
      alt="暂无搜索结果" />
  </BaseContainer>
</template>

<script>
import {
  getSearchContent,
  clearSearchHistory,
} from "@/api/index";

export default {
  data() {
    return {
      search: "",
      specialList: [
  {
    "is_pink": 0,
    "pink_money": "49.00",
    "label": [
      "满分数学"
    ],
    "id": 92,
    "title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
    "abstract": "重视这件事，满分数学赢中考",
    "image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
    "type": 4,
    "money": "0.00",
    "is_light": 0,
    "light_type": 0,
    "pay_type": 0,
    "count": 19
  },
  {
    "is_pink": 0,
    "pink_money": "0.01",
    "label": [
      "阅读方法"
    ],
    "id": 132,
    "title": "高中语文词汇成语古诗阅读",
    "abstract": "高中语文词汇词根",
    "image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
    "type": 1,
    "money": "0.00",
    "is_light": 0,
    "light_type": 0,
    "pay_type": 0,
    "count": 6
  },
  {
    "is_pink": 0,
    "pink_money": "2.00",
    "label": [
      "女神七宝茶"
    ],
    "id": 129,
    "title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
    "abstract": "托福雅思助你完成出国梦",
    "image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
    "type": 3,
    "money": "28880.00",
    "is_light": 0,
    "light_type": 0,
    "pay_type": 1,
    "count": 3
  }
],
      limit: 10,
      singleDetailsURL: "/pages/special/single_details",
      detailsURL: "/pages/special/details",
      isEmpty: false,
    };
  },
  watch: {
    specialList(val) {
      this.isEmpty = !val.length;
    },
  },
  onShareAppMessage() {
    return {};
  },
  onShareTimeline() {
    return {};
  },
  methods: {
    getJumpUrl(item) {
      return item.is_light ? this.singleDetailsURL : this.detailsURL + "?id=" + item.id;
    },
    // 搜索内容
    async onSearch(search) {
      if (!search || this.loading) {
        return;
      }
      this.loading = true;
      uni.showLoading({
        mask: true,
      });

      try {
        const { data } = await getSearchContent(search, this.limit);
        this.specialList = data.special;
        if(this.specialList.length == 0){
          this.$util.showMsg("未查询到相关数据");
        }
        uni.hideLoading();
      } catch (err) {
        this.$util.showMsg(err.message);
        uni.hideLoading();
      }

      this.loading = false;
    },
  },
};
</script>