yicangzongtai_app_240321/pages/product/search/productList.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>

    <view class="zdtopbox" :style="{ top: tabTop + 'px' }">
      <!-- <view class="" style="display: flex;align-items: center;">
				<text class="iconfont position-ab u-mt15 u-ml30 u-D1D9D4">&#xe7a6;</text>
				<input placeholder="请输入搜索关键字" @confirm="confirmSubmit" v-model="value" placeholder-class="pc" />
				<text style="color: #FFFFFF;font-size: 28rpx; font-weight: 500;margin-left: 20rpx;align-items: center;" @click="SearchContent">搜索</text>
			</view> -->
      <div class="search-box">
        <div class="search-wap">
          <text class="iconfont search-icon">&#xe7a6;</text>
          <input type="text" class="sput" placeholder-style="color: #ddd;" confirm-type="search" v-model="value"
            placeholder="请输入搜索关键字" @confirm="confirmSubmit" />
        </div>
        <div class="word" @click="SearchContent">搜索</div>
      </div>
      <view class="u-flex-center-sa u-mt30 u-font28 tabs">
        <view class="u-flex screen" @click="screening(1)">
          <view :class="screeningIndex == 1 ? 'activeColors' : ''">综合</view>
        </view>
        <view class="u-flex-center screen" @click="screening(4)">
          <view :class="screeningIndex == 4 ? 'activeColors' : ''">销量</view>
          <!-- <view class="u-flex-column-center ">
						<view class="iconfont u-font24 linge" :class="screeningIndex==2&&!selfNum?'activeColors':''">&#xeb20;</view>
						<view class="iconfont u-font24 linge" :class="screeningIndex==2&&selfNum?'activeColors':''">&#xeb1f;</view>
					</view> -->
        </view>
        <view class="u-flex-center screen" @click="screening(3)">
          <view :class="screeningIndex == 3 ? 'activeColors' : ''">价格</view>
          <view class="linge-box">
            <view class="iconfont u-font24 linge" :class="screeningIndex == 3 && !price ? 'activeColors' : ''">&#xe648;
            </view>
            <view class="iconfont u-font24 linge" :class="screeningIndex == 3 && price ? 'activeColors' : ''">&#xe645;
            </view>
          </view>
        </view>
        <view class="u-flex screen" @click="screening(2)">
          <view :class="screeningIndex == 2 ? 'activeColors' : ''">新品</view>
        </view>
      </view>
    </view>
    <view class="u-plr30 u-mt30 pt80">
      <view class="productItme">
        <view class="itemp u-flex-center-sb u-mt20" @click="goProductDetails(item, item.authorize_shop_id)"
          v-for="(item, index) in goodsList" :key="item.id">
          <view class="pImgs u-mr20">
            <image class="u-goods226" :src="item.cover" mode=""></image>
            <!-- <view class="tipsImg u-flex-center">
								<image src="../../../static/disbg.png" mode=""></image>
								<view class="u-FFF u-font24 textpiv">4.5折</view>
							</view> -->
          </view>
          <view class="u-flex1 u-flex-column-start">
            <view class="u-text2 proWidth u-flex1">
              <view class="tipsStatus" v-if="item.platform_store">自营</view>
              <text class="u-font28 u-181818">{{ item.title }}</text>
            </view>
            <view class="u-font20 u-999 u-mt5">
              已售
              <text class="u-FF0000">{{ item.result_sale_num }}</text>
              件
            </view>
            <view class="u-font32 u-bold u-flex-center u-flex1  u-FF0000" style="margin-top: 8rpx;">
              <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
              <text class="u-del u-999 u-font22 u-bold-normal u-ml20">￥{{ item.max_market_price }}</text>
            </view>
            <view class="good-praise" style="font-size: 20rpx; color: #999999;margin-top: 30rpx; ">
              <text style="color: #FF4E15;">{{ item.comment_num }}</text>
              条评论 评分:
              <text style="color: #FF4E15;margin-left: 2rpx;" v-if="item.average % 1 === 0">{{ item.average }}.0</text>
              <text v-else style="color: #FF4E15; margin-left: 2rpx;">{{ item.average }}</text>
            </view>
            <view></view>
            <view class="store" @click.stop="goTobusiness(item.shop_id)"
              style="color: #999999;font-size: 24rpx;font-weight: 500;align-items: center; margin-top: 5rpx; align-items: center;">
              {{ item.shop_name }}
              <text class="iconfont" style="font-size: 20rpx;">&#xe6c7;</text>
            </view>
          </view>
        </view>
        <nodata v-if="noData" :config="{ top: 20, content: '暂无商品~' }"></nodata>
        <loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
      </view>
    </view>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script>
  var app = getApp();
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '商品列表',
          color: '#1a1a1a',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          // statusBarFontColor: '#FFFFFF'
        },
        goodsList: [],
        score: null,
        loading: true,
        noData: false,
        value: '',
        status: 'more', //more|loading|noMore
        screeningIndex: 1,
        price: false,
        selfNum: false,
        tabTop: 0,
        params: {
          limit: 10,
          page: 1,
          order_type: 1, //1是综合（按发布时间），2是新品，3价格，4销量
          order_mode: '' //asc 或 desc
        }
      };
    },
    onLoad(options) {
      this.tabTop = app.globalData.barHeight + 44;
      if (options.keyword) {
        this.params.title = options.keyword;
        this.value = options.keyword || '';
      }
      // if (options.category_id) {
      //   this.params.category_id = options.category_id;
      // }
      this.getShopList();
      console.log(options)
    },
    onReachBottom(e) {
      this.status = 'loading';
      this.params.page++;
      this.getShopList();
    },
    onPullDownRefresh() {
      this.rest();
      this.getShopList();
    },
    methods: {
      //跳转商家店面
      goTobusiness(id) {
        console.log(id);
        uni.navigateTo({
          url: '/pages/convenienceService/shopDetails?shopId=' + id
        });
      },
      //普通商品详情页
      goProductDetails(item, shopid) {
        uni.navigateTo({
          url: `/pages/product/goods/goods?id=${item.id}`
        })
        // 积分商品
        // if (item.point_goods) {
        //   uni.navigateTo({
        //     url: `/pages/product/goods/IntegralGood?id=${item.id}`
        //   })
        //   // 免费商品
        // } else if (item.free) {
        //   uni.navigateTo({
        //     url: `/pages/product/goods/freeGoods?id=${item.id}`
        //   })
        //   // 普通商品
        // } else {
        //   uni.navigateTo({
        //     url: `/pages/product/goods/goods?id=${item.id}`
        //   })
        // }
      },

      screening(e) {
        this.loading = true;
        this.params.order_type = e;
        this.screeningIndex = e;
        // if(e==2){
        // 	this.selfNum =!this.selfNum
        // 	if(this.selfNum){
        // 		this.params.order_mode='asc'
        // 	}else{
        // 		this.params.order_mode='desc'
        // 	}
        // }else
        if (e == 3) {
          this.price = !this.price;
          if (this.price) {
            this.params.order_mode = 'asc';
          } else {
            this.params.order_mode = 'desc';
          }
        } else if (e == 4) {
          this.params.order_mode = 'desc';
        } else {
          this.params.order_mode = '';
        }
        this.rest();
        this.getShopList();
      },
      //搜索返回的数据
      confirmSubmit(e) {
        this.params.title = e.detail.value;
        this.value = e.detail.value;
        this.rest();
        this.getShopList();
      },
      SearchContent() {
        this.params.title = this.value;
        this.rest();
        this.getShopList();
      },
      rest() {
        this.params.page = 1;
        this.goodsList = [];
      },
      getShopList() {
        let shop = uni.getStorageSync('shop');
        let shopid = shop.id ? shop.id : '';
        this.$http.get(`/goods/all/pages`, this.params).then(res => {
          uni.stopPullDownRefresh();
          this.loading = false;
          this.triggered = false;
          if (res && res.code == 200) {
            if (res.page.list.length > 0) {
              if (this.params.title) {
                this.reset(this.params.title);
              }
            }
            this.goodsList = this.goodsList.concat(res.page.list);

            if (this.goodsList.length == 0) {
              this.noData = true;
            } else {
              this.noData = false;
            }
            if (res.page.totalPage <= res.page.currPage) {
              this.status = 'noMore';
            } else {
              this.status = 'more';
            }
          }
        });
      },
      reset(text) {
        let recordList = uni.getStorageSync('history') ? uni.getStorageSync('history') : [];
        recordList.unshift(text);
        let arr = JSON.parse(JSON.stringify(recordList));
        let newArr = Array.from(new Set(arr));
        recordList = newArr;
        uni.setStorageSync('history', JSON.parse(JSON.stringify(recordList)));
      }
    }
  };
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }

  .search-box {
    // height: 85rpx;
    // padding: 0 30rpx;
    width: 100%;
    display: flex;

    // align-items: center;
    .search-wap {
      width: 600rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.42);
      border-radius: 30rpx;
      position: relative;

      .search-icon {
        font-size: 18px;
        margin-left: 30rpx;
        // color: #fff;
      }

      .sput {
        margin-left: 25rpx;
        font-size: 22rpx;
        // color: #ffffff;
        width: 100%;
      }
    }

    .word {
      font-size: 28rpx;
      // color: #ffffff;
      margin-left: 24rpx;
      line-height: 60rpx;
    }
  }

  .linge-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 28rpx;
  }

  .linge {
    line-height: 14rpx;
    font-size: 15rpx;
  }

  .position-ab {
    position: absolute;
  }

  .pt80 {
    padding-top: 120rpx;
  }

  .zdtopbox {
    background-color: #fff;
    padding: 8rpx 30rpx 10rpx;
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 66;
    box-sizing: border-box;

    // input {
    // 	flex: 1;
    // 	height: 60rpx;
    // 	line-height: 60rpx;
    // 	border-radius: 50rpx;
    // 	background-color: rgba($color: #abc5b5, $alpha: 0.4);
    // 	color: #fff;
    // 	padding-left: 78rpx;
    // 	box-sizing: border-box;
    // }

    .pc {
      font-size: 22rpx;
      color: #abc5b5 !important;
    }

    .wt-ht8 {
      width: 16rpx;
      height: 16rpx;
    }
  }

  .oval {
    background-color: #f5f5f5;
    padding: 18rpx 38rpx;
    border-radius: 50rpx;
    margin-top: 30rpx;
    margin-right: 22rpx;
  }

  .itemp {
    padding: 30rpx 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  .pImgs {
    position: relative;
    width: 226rpx;
    height: 226rpx;

    .tipsImg {
      width: 96rpx;
      height: 44rpx;
      position: absolute;
      left: 0;
      bottom: 0;

      image {
        width: 96rpx;
        height: 44rpx;
        position: absolute;
        z-index: 0;
      }

      .textpiv {
        width: 96rpx;
        text-align: center;
        position: relative;
        z-index: 1;
      }
    }
  }

  .proWidth {
    .tipsStatus {
      display: inline-block;
      padding: -0 10rpx;
      background: #ff0000;
      border-radius: 10rpx 0px 10rpx 0px;
      line-height: 40rpx;
      text-align: center;
      margin-right: 10rpx;
      color: #fff;
      font-size: 20rpx;
    }
  }

  .activeColors {
    color: #FA6138;
    font-weight: bold;
  }
  .tabs{
	  padding-bottom: 10rpx;
  }
</style>