video_mini/pages/client/tuan/search.vue

<template>
  <view>
    <!-- <sub-tabnav :tabs="tabs" @change="changeIndex" :selectIndex="selectIndex" :scrollTop="scrollTop"></sub-tabnav> -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="searchBox">
      <uni-search-bar @confirm="search"
                      :focus="false"
                      placeholder="请输入搜索内容"
                      v-model="searchValue"
                      @focus="focus"
                      @cancel="cancel">
      </uni-search-bar>
    </view>
    <!-- #endif -->
    <view class="bannerBox">
      <home-banner :banners="banners"></home-banner>
    </view>
    <view class="flex space videoList">
      <block v-for="(value,key) in listData" :key="key">
        <view class="box pb10 mb15" style="width:47%; border-radius:20rpx;" @click="detail(value.id,0)">
          <image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
          <view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
        </view>
      </block>
    </view>
    <uni-load-more :status="status"/>
    <view style="width: 100%; height: 30upx;"></view>
  </view>
</template>

<script>
export default {

  data() {
    return {
      banners: [],
      isLogin: true,
      showLogin: false,
      datasa: [],
      dataconfig: [],
      searchValue: '',
      pages:{
        currentPage:1,
        pageSize: 20,
        isNextPage: true,
      },
      total: 0,
      pageSize: 10,


      type: '',
      keytext: '',
      listData: [],
      last_id: 0,
      reload: true,
      status: 'more',

    }
  },
  onLoad(e) {
    //console.log(111)
    if (e.selectIndex) {
      this.selectIndex = e.selectIndex
    }
    this.status = 'more';
    this.getList();
    this.banners = uni.getStorageSync("config").banner
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    this.status = 'more';
    this.getList();
  },
  //监听搜索框文本变化
  onNavigationBarSearchInputChanged(e) {
    let text = e.text;
    if (text) {
      this.keytext = text;
    }
    console.log(text)
  },
  //监听点击搜索按钮事件
  onNavigationBarSearchInputConfirmed(e) {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
    var this_ = this
    let text = e.text;
    if (!text) {
      uni.showModal({
        title: '',
        content: "请输入搜索内容",
        showCancel: false,
        confirmText: "确定",
        confirmColor: "#e19503",
        success: function (res) {
          this_.keytext = '';
          this_.getList(0)
        }
      });
      return;
    } else {
      this.keytext = text;
      this.listData = [];
      this.pages.currentPage = 1;
      this.pages.isNextPage = true;
      this.getList()
    }

  },
  methods: {
    detail(vid, mid) {
      var fxpid = 1
      if (uni.getStorageSync("userinfo")) {
        fxpid = uni.getStorageSync("userinfo").id
      }
      uni.navigateTo({
        url: '/pagesA/player/detailPlayer?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
      })
    },

    getList() {
      let that= this;
      if (that.pages.isNextPage) {
        that.status = 'loading';
        that.$httpRequest({
          url: "/api/video/wdxh",
          methods: "GET",
          data: {
            limit: that.pages.pageSize,
            page: that.pages.currentPage,
            lx:that.selectIndex,
            keytext:that.keytext
          }
        }).then(res => {
          that.status = '';
          if (that.pages.pageSize == 1) {
            that.listData = res;
          } else if (res.rows.length > 0) {
            that.listData = that.listData.concat(res.rows);
          } else {
            that.status = 'noMore';
            that.pages.isNextPage = false;
          }
          that.pages.currentPage += 1;
        }).catch(err => {
          that.status = '';
          console.log(err)
        })
      }
    },
    search(res) {
      this.listData = [];
      this.pages.currentPage = 1;
      this.pages.isNextPage = true;
      this.keytext = res.value;
      this.getList()
    },

    cancel(res) {
      this.keytext = '';
      this.pages.currentPage = 1;
      this.pages.isNextPage = true;
      this.getList()
    }
  }
}
</script>

<style  scoped>
.searchBox {
  background: #ffffff;
}

.bannerBox {
  margin: 10upx 30upx 0 30upx;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.04);
}
.videoList{
  display:flex; flex-wrap:wrap; padding: 30upx 30upx 0px 30upx;
}
.integral-mall-goods {
  width: 100%;
  background: #F2F2F2;
  border-radius: 16upx;
}

.user-not-vip {
  width: 100%;
  height: 80rpx;
  background: #FDF6EC;
  border-radius: 40rpx;
  border: 2rpx solid #EFC381;
  text-align: center;
  line-height: 76rpx;
  font-size: 24rpx;
  color: #000000;
  font-weight: bold;
}


.tuan-product-l {
  width: 320rpx;
  height: 240rpx;
  border-radius: 16rpx;
  background: #F2F2F2;
}

.tuan-product-r {
  width: calc(100% - 320rpx);
}

.search-result {
  padding-top: 10px;
  padding-bottom: 20px;
  text-align: center;
}

.search-result-text {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 0px;
}

.uni-mt-10 {
  margin-top: 10px;
}
</style>