uniapp-ZHSQ/packages/localLife/classify/index.vue

<template>
  <view class="container">
    <view class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
      <u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
      <view class="header_tit">{{ headerTitle }}</view>
    </view>
    <view class="localBox">
      <view class="localBoxItem">
        <view class="local">
          <image id="local" src="https://static.hshuishang.com/property-img-file/local_localIcon.png" mode="aspectFill">
          </image>
          {{ address }}
          <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
        </view>

        <view class="search">
          <view class="searchBox">
            <image src="https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png" mode="aspectFill">
            </image>
            <input type="text" v-model="searchText" placeholder="请输入您想搜索的内容" @confirm="handleSearch" />
          </view>
        </view>
      </view>
    </view>
    <view class="merchantList" v-if="merchatList.length > 0">
      <view class="merchantItem" v-for="item in merchatList" :key="item.id" @click="Info(item)">
        <view class="merchantItem_left">
          <image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
        </view>
        <view class="merchantItem_right">
          <view class="merchantItem_right_tit">
            <view class="merchantItem_right_tit_left">
              {{ item.merchant_name }}
            </view>
            <view class="merchantItem_right_tit_right">
              {{ item.distances }}
            </view>
          </view>
          <view class="merchantItem_right_con">
            <view class="merchantItem_right_con_left">
              <view class="startList">
                <image v-for="index in 5" :key="index" :src="index < item.rating
                  ? 'https://static.hshuishang.com/property-img-file/local_start1.png'
                  : 'https://static.hshuishang.com/property-img-file/local_start2.png'
                  " mode="aspectFill"></image>
              </view>
              <view class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">
                买单返物业费
              </view>
              <view class="merchangtItem_tag" v-if="item.refund_user_points_ratio">
                买单返积分
              </view>
            </view>
            <view class="merchantItem_right_con_right" @click="toJump(item)">
              <image src="https://static.hshuishang.com/property-img-file/local_review.png" mode="aspectFill"></image>
              点评
            </view>
          </view>
          <view class="merchantItem_right_add">
            {{ item.comAddress }}
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="empty">
        <image src="https://static.hshuishang.com/property-img-file/com_nearbyList_empty.png" mode="aspectFill"></image>
        暂无数据
      </view>
    </view>


    <view class="btnList">
      <!-- <view class="btn_left">
        <image src="https://static.hshuishang.com/property-img-file/local_serverIcon.png"
          mode="aspectFill"></image>
        到店服务券
      </view> -->
      <view class="line"></view>
      <view class="btn_right" @click="toPayInfo">
        <image src="https://static.hshuishang.com/property-img-file/lcoal_payIcon.png" mode="aspectFill"></image>
        快捷支付记录
      </view>
    </view>
    <view class="btnList_after"></view>

    <!-- <nav-footer :current="2" /> -->
  </view>
</template>

<script>
import {
  request,
  picUrl,
  uniqueByField,
  menuButtonInfo,
  calculateDistance,
  NavgateTo,
} from "../../../utils";

import { apiArr } from "../../../api/v2local";

export default {
  data() {
    return {
      headerTitle: "",
      picUrl,
      top: "",
      localHeight: "",
      swiperList: [],
      currentIndex: 0,
      checkedItems: [false, false, false, false],
      address: "",
      page_size: 10,
      page_num: 1,
      flag: false,
      merchatList: [],

      changeId: "",
      searchText: ''
    };
  },
  onLoad(options) {
    this.changeId = JSON.parse(options.item).id;
    this.headerTitle = JSON.parse(options.item).cate_name;
    const meun = menuButtonInfo();
    this.top = meun.top;
    // this.top = meun.height + meun.top;
    this.localHeight = meun.height;
    this.getCateList();
    this.getMechantList();
    this.address = uni.getStorageSync("location").address;
    console.log(this.address);
  },

  onReachBottom() {
    if (this.flag) {
      this.getMechantList();
    }
  },

  methods: {
    // 跳转快捷支付记录
    toPayInfo() {
      NavgateTo("/packages/localLife/payInfo/index")
    },
    back() {
      NavgateTo("1");
    },
    swiperChange(e) {
      this.currentIndex = e.detail.current;
    },

    checkItem(index) {
      this.$set(this.checkedItems, index, !this.checkedItems[index]);
    },
    //查询商家分类
    async getCateList() {
      let that = this;
      const params = {
        isShop: 1,
      }
      await request(apiArr.getMerChantCateList, "POST", params).then((res) => {
        res.rows = res.rows.filter((item) => item.is_visible == 1)
        console.log(res);
        // 将数据分成每10个一组
        const chunkSize = 10;
        that.swiperList = [];
        for (let i = 0; i < res.rows.length; i += chunkSize) {
          that.swiperList.push(res.rows.slice(i, i + chunkSize));
        }
      });
    },
    //搜索商家
    handleSearch() {
      this.page_num = 1;
      this.merchatList = [];
      this.getMechantList();
    },
    //查询商家列表
    async getMechantList() {
      let that = this;
      const params = {
        merchant_cate_id: this.changeId,
        page_num: that.page_num,
        page_size: that.page_size,
        merchant_name: that.searchText
      }
      await request(apiArr.getMerchantList, "POST", params).then((res) => {
        let latitude = uni.getStorageSync("location").lat;
        let longitude = uni.getStorageSync("location").lng;
        res.rows.forEach((item) => {
          item.bigImg = item.album_images.split(",");
          const distanceInKm = calculateDistance(
            latitude,
            longitude,
            item.latitude,
            item.longitude
          );
          item.distances =
            distanceInKm >= 1
              ? `${distanceInKm.toFixed(1)}km`
              : `${(distanceInKm * 1000).toFixed(1)}m`;

          if (item.ad) {
            item.comAddress = item.ad.ad_name.replace(/,/g, "") + item.address;
          } else {
            item.comAddress = item.address;
          }
        });
        res.rows.sort((a, b) => {
          const valueA =
            parseFloat(a.distances.replace("km", "").replace("m", "")) *
            (a.distances.includes("km") ? 1000 : 1);
          const valueB =
            parseFloat(b.distances.replace("km", "").replace("m", "")) *
            (b.distances.includes("km") ? 1000 : 1);
          return valueA - valueB;
        });

        if (res.rows.length == this.page_size) {
          this.page_num = this.page_size + 10;
          this.flag = true;
        } else {
          this.flag = false;
        }
        this.merchatList = this.merchatList.concat(res.rows);
      });
    },
    //跳转商家详情
    Info(e) {
      uni.setStorageSync("merchantInfo", e);
      NavgateTo("../detail/index");
    },
    //跳转点评
    toJump(e) {
      NavgateTo('../comment/index');
    },

  },
};
</script>

<style>
@import url("./index.css");
</style>