discounts-minapp/pages/index/searchResult.vue

<template>
  <view class="searchResult">
    <zs-choose-tab :tabList="tabList" @choose="chooseTab"></zs-choose-tab>

    <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.toFixed(2) }}
                </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.toFixed(2) }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </zs-list>
    </view>
  </view>
</template>

<script>
import { appSearch } from "@/api/shop.js";
import { getMenu } from "@/api/common.js";
export default {
  data() {
    return {
      location: "",
      query: {
        district: "",
        pageCurrent: 1,
        pageSize: 10,
        "location.lat": 0,
        "location.lon": 0,
        range: "",
        goodsName: "",
        shopId: "",
        status: 3,
      },
      status: "more",
      list: [],
      list1: [],
      tabList: [
        // {
        // 	id: 1,
        // 	label: '区域',
        // 	list: [

        // 		{
        // 			id: 1,
        // 			label: '观山湖'
        // 		},
        // 		{
        // 			id: 2,
        // 			label: '白云区'
        // 		},
        // 		{
        // 			id: 3,
        // 			label: '花果山区'
        // 		}
        // 	]
        // },
        {
          id: 1,
          label: "全部分类",
          list: [],
        },

        // {
        // 	id: 1,
        // 	label: '附近',
        // 	list: [
        // 		{
        // 			id:5,
        // 			label: '5KM'
        // 		},
        // 		{
        // 			id:10,
        // 			label: '10KM'
        // 		},
        // 		{
        // 			id:20,
        // 			label: '20KM'
        // 		},
        // 		{
        // 			id:50,
        // 			label: '50KM'
        // 		}
        // 	]
        // },
      ],
    };
  },
  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) {
      console.log(val);
      this.query.range = val[2].id;
      if (val[0]) {
        this.query["location.lat"] = val[0].location.lat;
        this.query["location.lon"] = val[0].location.lng;
        this.query.range = 50;
        this.query.district = val[0].label;
      } else if (!val[0]) {
        this.query["location.lat"] = this.location.latitude;
        this.query["location.lon"] = this.location.longitude;
        this.query.district = "";
      }
      if (val[1]) {
        this.query.menuId = val[1].id;
      } else if (!val[1]) {
        this.query.menuId = "";
      }
      this.query.pageCurrent = 1;
      this.status = "more";
      this.list = [];
      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();
    },
    // 金刚区
    getMenu() {
      getMenu({ currentPage: 1, pageSize: 10, status: 2 }).then((res) => {
        if (res.state == "Success") {
          let list = [];
          res.content.records.map((item) => {
            list.push({
              id: item.id,
              label: item.menuName,
            });
          });
          // this.tabList[1].list = list;
        }
      });
    },
  },
  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;
    this.search();
    // this.getMenu();
  },
};
</script>

<style lang="scss" scoped>
.searchResult {
  padding: 100rpx 24rpx 20rpx;
  background: #f9f9f9;
  .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>