discounts-minapp/pages/index/searchResult.vue

<template>
  <view class="searchResult">
    <!-- <zs-choose-tab :tabList="tabList" @choose="chooseTab"></zs-choose-tab> -->
    <zs-choose-tab-union :level="2" :tabList="tabList" @choose="chooseTab">
    </zs-choose-tab-union>
    <view class="goods-list">
      <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
        <view class="left">
          <view
            class="store-item"
            v-for="(item, index) in list"
            :key="index"
            @click="goGoodsDetail(item)"
          >
            <zs-img
              :src="item.goodsImg"
              width="340rpx"
              height="340rpx"
              mode="widthFix"
            ></zs-img>
            <view class="info">
              <view class="title">
                {{ item.goodsName }}
              </view>
              <view class="goods-price">
                <view> ￥{{ item.realPrice }} </view>
                <view class="distance"> 销售{{ item.saleNum }} </view>
              </view>
            </view>
          </view>
        </view>
        <view class="right">
          <view
            class="store-item"
            v-for="(item, index) in list1"
            :key="index"
            @click="goGoodsDetail(item)"
          >
            <zs-img
              :src="item.goodsImg"
              width="340rpx"
              height="340rpx"
              mode="widthFix"
            ></zs-img>
            <view class="info">
              <view class="title">
                {{ item.goodsName }}
              </view>
              <view class="goods-price">
                <!-- <image
                  class="position"
                  src="../../static/position.png"
                  mode=""
                ></image> -->
                <view> ￥{{ item.realPrice }}</view>
                <view class="distance"> 销售{{ item.saleNum }} </view>
              </view>
            </view>
          </view>
        </view>
      </zs-list>
    </view>
  </view>
</template>

<script>
import { appSearch, getSearchTypeData } from "@/api/shop.js";
export default {
  data() {
    return {
      location: "",
      query: {
        district: "",
        pageCurrent: 1,
        pageSize: 10,
        "location.lat": 0,
        "location.lon": 0,
        range: "",
        goodsCateId: "",
        goodsName: "",
        realPriceOrder: "", //desc,asc
        shopId: "",
        status: 3,
        currentPage: 0,
      },
      status: "more",
      list: [],
      list1: [],
      tabList: [],
    };
  },
  methods: {
    goShopDetail(item) {
      uni.setStorageSync("shopInfo", JSON.stringify(item));
      uni.navigateTo({
        url: "/detail/shopDetail/shopDetail",
      });
    },
    goGoodsDetail(item, i) {
      uni.setStorageSync("shopInfo", JSON.stringify(item));
      uni.reLaunch({
        url: `/detail/goodsDetail/index?id=${item.goodsId}`,
      });
    },
    chooseTab(val) {
      this.query.goodsCateId = val[0].id;
      this.query.realPriceOrder = val[1].id || "";
      this.query.pageCurrent = 1;
      this.status = "more";
      this.list = [];
      this.list1 = [];
      this.search();
    },
    search() {
      // if(this.status == 'noMore') return
      this.status = "loading";
      let obj = JSON.parse(JSON.stringify(this.query));
      if (!obj.range) {
        delete obj.range;
      }
      appSearch(obj).then((res) => {
        if (res.state == "Success") {
          this.loading = false;
          let list = [];
          let list1 = [];
          res.content.records.map((item, index) => {
            if (index % 2) {
              list1.push(item);
            } else {
              list.push(item);
            }
          });
          this.list = this.list.concat(list);
          this.list1 = this.list1.concat(list1);
          let total = this.list.length + this.list1.length;
          console.log("list", this.list, this.list1);
          if (total >= res.content.total) {
            this.status = "noMore";
          } else {
            this.status = "more";
            this.query.currentPage++;
          }
        }
      });
    },
    loadMore() {
      this.search();
    },
    getTabList() {
      // 如果是栏目点进来则更新标题
      getSearchTypeData().then((res) => {
        this.tabList = [
          {
            id: 0,
            cateName: "全部分类",
            child: res.content,
          },
          {
            id: 1,
            cateName: "价格排序",
            child: [
              {
                id: "acs",
                cateName: "价格升序",
              },
              {
                id: "desc",
                cateName: "价格降序",
              },
            ],
          },
        ];
      });
    },
  },
  onLoad(options) {
    // let list = uni.getStorageSync("districtList") || "[]";
    // this.tabList[0].list = JSON.parse(list);
    this.location = JSON.parse(uni.getStorageSync("location"));
    this.query.shopId = uni.getStorageSync("gdShopId");
    this.query["location.lat"] = this.location.latitude;
    this.query["location.lon"] = this.location.longitude;
    this.query.goodsName = options?.search || "";

    if (!this.query.goodsName) {
      this.query.goodsCateId = options.columnId;
      uni.setNavigationBarTitle({
        title: options.column,
      });
    }
    this.search();
    this.getTabList();
  },
};
</script>

<style lang="scss" scoped>
.searchResult {
  padding: 100rpx 24rpx 20rpx;
  background: #f9f9f9;
  height: 100%;
  .goods-list {
    border-radius: 16rpx 16rpx 0 0;
    margin-bottom: 60rpx;
  }
}

::v-deep .zs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .left {
    .adv-swiper {
      width: 340rpx;
      height: 444rpx;
      margin-bottom: 25rpx;

      .adv-item {
        width: 340rpx;
        height: 444rpx;
      }
    }
  }

  .right {
  }

  .store-item {
    width: 340rpx;
    margin-bottom: 25rpx;
    // box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;
    background: #fff;

    .icon {
      width: 100%;
      height: 300rpx;
      border-radius: 16rpx 16rpx 0 0;
    }

    .info {
      padding: 20rpx;
      background: #fff;
      border-radius: 0 0 16rpx 16rpx;
      position: relative;

      .title {
        // font-weight: bold;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .tags {
        display: flex;
        align-items: center;

        .tag-item {
          line-height: 50rpx;
          border-radius: 8rpx;
          padding: 6rpx 0;
          font-size: 24rpx;
          margin-left: 10rpx;
          display: flex;

          .label {
            background: #fff;
            color: #fe5b47;
            padding: 0 10rpx;
            border-radius: 8rpx 0 0 8rpx;
          }

          .value {
            color: #fff;
            background: rgba(255, 255, 255, 0.2);
            padding: 0 14rpx;
            border-radius: 0 8rpx 8rpx 0;
          }
        }
      }

      .goods-price {
        display: flex;
        align-items: center;
        margin-top: 15rpx;
        justify-content: space-between;
        color: #ff4d3a;
        font-weight: bold;
        font-size: 30rpx;
        .distance {
          font-weight: normal;
          font-size: 20rpx;
          color: #999;
        }

        .position {
          color: 999;
          width: 25rpx;
          height: 29rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
}
</style>