shop-applet/pages/nongKe/supply_chain/supplier-copy.vue

<template>
  <view class="supplier" :style="{height: winHeight + 'px' }">
    <!-- <view class="head-wrapper" :style="'top:'+statusBarHeight">
      <view class="head-menu">
        <view class='iconfont icon-xiangzuo' @click="returns"></view>
        <view class="iconfont icon-shouye4" @click="goHome"></view>
      </view>
    </view> -->
    <view class="header_warpper">
      <!-- <u-swiper :list="swiperList" keyName="img" :autoplay="true" height="491.23rpx"></u-swiper> -->
      <!-- <view class="head_search flex_a_c">
        <view class="search_content flex_a_c_j_sb">
          <view class="flex_a_c">
            <view class="iconfont icon-sousuo"></view>
            <input type="text" v-model="sotreParam.keyword" placeholder="请搜索">
          </view>
          <button class="search_btn" @click="searchStoreMerchant">搜索</button>
        </view>
      </view> -->
    </view>

    <view class="con-box">
      <view class="left_classify">
        <scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'>
          <block v-for="(item,index) in merList" :key="item.merchant_category_id">
            <view class="clify_item" :class="activeTwo === index ? 'pictch' : ''" @click="classifyClick(item, index)">
              {{ item.category_name }}
            </view>
          </block>
        </scroll-view>
      </view>

      <view class="right_storee">
        <scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'
          @scrolltolower="scrolltolower" class="my-scroll-view">
          <image class="banner" :src="src" mode="aspectFit"></image>
          <view style="background-color: #fff;width: 100%;">
            <view class="tabs_box flex_a_c_j_sb">
              <view v-for="(item,index) in tabsList" :key="index" class="flex_a_c" :class="active==index?'active':''">
                <view @click="tabsChange(index)">{{item}}</view>
                <!-- <view class="iconfont icon-shaixuan" v-if="index==3"></view> -->
              </view>
            </view>
          </view>
          <block v-for="(item,index) in storeMerchant" :key="index">
            <storeCard :store_item="item" :category="item.category_name" :isDetail="isDetail"></storeCard>
          </block>
          <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
            :nomore-text="nomoreText" />
        </scroll-view>
      </view>

    </view>

    <!-- <u-action-sheet :show="show" @close="close" @select="select" :actions="actions" :closeOnClickOverlay="true">
    </u-action-sheet>
    <rightSlider v-if="rightBox" :status="rightBox" :merList="merList" :storeTypeArr="storeTypeArr" @confirm="confirm"
      @close="rightSliderClose"></rightSlider> -->
  </view>
</template>

<script>
  var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  import storeCard from './component/shop_card.vue'
  import rightSlider from './component/rightSlider';
  import { getDiy } from '@/api/api.js'
  import { storeMerchantList, merClassifly, getStoreTypeApi } from '@/api/store.js'
  import { storeClassifyDel } from '@/api/product.js'
  export default {
    components: {
      rightSlider,
      storeCard
    },
    data() {
      return {
        statusBarHeight: statusBarHeight, //系统导航条高度
        swiperList: [],
        activeTwo: 0,
        winHeight: 0,
        num: '',
        status: 'loadmore',
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '我也是有底线的~~',
        show: false,
        actions: [{
            name: '选项1',
          },
          {
            name: '选项2',
          },
          {
            name: '选项3',
          }, {
            name: '选项4',
          },
          {
            name: '选项5',
          },
        ],
        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
        search: '',
        tabsList: ['综合排序', '销量优先', '好评'],
        active: 0,
        storeMerchant: [],
        storeList: {
          page: 1,
          limit: 10
        },
        StoreType: [],
        rightBox: false,
        merList: [], //商户分类
        storeTypeArr: [], //店铺类型
        sotreParam: {
          keyword: '',
          page: 1,
          limit: 10,
          order: 'order', // 顺序
          category_id: '', // 分类
          type_id: '', // 类型
          street_id: '' // 位置
        },
        isDetail: 2
      }
    },
    onLoad(e) {
      this.sotreParam.street_id = e.street_id
      if (e.type_id) {
        this.sotreParam.type_id = e.type_id
      }
      if (e.isDetail) this.isDetail = e.isDetail
      this.getStoreMerchant()
      this.getStore()
      this.getClassfication()
      this.getStoreType()
      this.getBanner()
      uni.getSystemInfo({
        success: (res) => {
          this.winHeight = res.windowHeight
          this.$set(this, 'winHeight', res.windowHeight)
        },
      });
    },
    onShow() {},
    methods: {
      // 后退
      returns: function() {
        uni.navigateBack()
      },
      // 首页
      goHome() {
        uni.switchTab({
          url: '/pages/home/index'
        });
      },
      async getBanner() {
        const { data } = await getDiy({ id: 0 })
        if (data.value['1683638943100000']) {
          this.swiperList = data.value['1683638943100000'].swiperConfig.list
        } else {
          this.swiperList = data.value['1683875164005000'].swiperConfig.list
        }
      },
      classifyClick(item, index) {
        this.activeTwo = index
        this.storeMerchant = []
        this.sotreParam.page = 1
        this.sotreParam.category_id = item.merchant_category_id
        this.getStoreMerchant();
      },
      // 获取商户分类
      getClassfication: function() {
        let temp = []
        merClassifly()
          .then(res => {
            temp = res.data.map(item => {
              return {
                ...item,
                check: false
              }
            })
            if (this.sotreParam.category_id.length > 0) {
              this.sotreParam.category_id.forEach((ids, index) => {
                temp.forEach(el => {
                  if (ids == el.merchant_category_id) {
                    el.check = true
                  }
                })
              })
            }
            temp.unshift({
              category_name: '全部',
              merchant_category_id: ''
            })
            this.merList = temp
          })
          .catch(res => {
            this.$util.Tips({
              title: res
            });
          });
      },
      // 获取店铺类型
      getStoreType: function() {
        let temp = []
        getStoreTypeApi()
          .then(res => {
            temp = res.data.map(item => {
              return {
                ...item,
                check: false
              }
            })
            if (this.sotreParam.type_id.length > 0) {
              this.sotreParam.type_id.forEach((ids, index) => {
                temp.forEach(el => {
                  if (ids == el.mer_type_id) {
                    el.check = true
                  }
                })
              })
            }
            this.storeTypeArr = temp
          })
          .catch(res => {
            this.$util.Tips({
              title: res
            });
          });
      },

      // 组件确定
      confirm(data) {
        let arr1 = [],
          arr2 = []
        if (data.storeTypeArr.length == 0) {
          this.sotreParam.type_id = ''
        } else {
          data.storeTypeArr.forEach(item => {
            arr1.push(item.mer_type_id)
          })
          this.sotreParam.type_id = arr1.toString();
        }
        if (data.merList.length == 0) {
          this.sotreParam.category_id = ''
        } else {
          data.merList.forEach(item => {
            arr2.push(item.merchant_category_id)
          })
          this.sotreParam.category_id = arr2.toString();
        }
        this.rightBox = data.status
        this.loadend = false;
        this.$set(this.sotreParam, 'page', 1)
        this.storeList = [];
        this.getStoreMerchant();
      },
      // 组件关闭
      rightSliderClose() {
        this.rightBox = false
      },
      //获取商户
      async getStoreMerchant() {
        const res = await storeMerchantList(this.sotreParam)
        this.storeMerchant.push(...res.data.list)
        // console.log(this.storeMerchant);
        if (res.data.list.length < 10) this.status = 'nomore'
      },
      async searchStoreMerchant() {
        this.storeMerchant = []
        const res = await storeMerchantList(this.sotreParam)
        this.storeMerchant = res.data.list
      },
      navigator(id) {
        uni.navigateTo({
          url: `/pages/nongKe/supply_chain/merchant?id=${id}`
        })
      },
      //获取商户类型分类
      async getStore() {
        const res = await merClassifly()
        for (let i = 0; i < res.data.length; i++) {
          this.actions[i].name = res.data[i].category_name
          this.actions[i].index = res.data[i].merchant_category_id
        }
      },
      tabsChange(i) {
        this.active = i
        // this.sotreParam.category_id = ''
        // this.sotreParam.type_id = ''
        this.sotreParam.page = 1
        this.storeMerchant = []
        if (this.active == 0) {
          this.sotreParam.order = ''
          this.getStoreMerchant()
        }
        if (this.active == 1) {
          this.sotreParam.order = 'sales'
          this.getStoreMerchant()
        }
        if (this.active == 2) {
          this.sotreParam.order = 'rate'
          this.getStoreMerchant()
        }
        //筛选
        if (this.active == 3) {
          this.status = 'nomore'
          this.rightBox = true
          // this.sotreParam.order = ''
          // this.getStoreMerchant()
        }
      },
      close() {
        this.show = false
      },
      select(e) {
        // console.log('select', e);

      },
      scrolltolower() {
        if (this.status != 'nomore') {
          this.sotreParam.page++
          this.getStoreMerchant()
        }
      }
    },
    onReachBottom() {
      //如果状态为nomore 则不能在触发上拉事件
      if (this.status != 'nomore') {
        this.sotreParam.page++
        this.getStoreMerchant()
      }
    },
    onPullDownRefresh() {
      this.storeMerchant = []
      this.getStoreMerchant()
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .supplier {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .header_warpper {
    width: 100%;
  }

  .head_search {
    width: 100%;
    background-color: #fff;
    height: 108.77rpx;

    .search_content {
      margin: 0 auto;
      width: 694.74rpx;
      height: 66.67rpx;
      padding: 2px 2px 2px 21.05rpx;
      border: 1px solid $uni-theme-color;
      border-radius: 100px;

      .icon-sousuo {
        font-weight: bold;
        color: $uni-theme-color;
        margin-right: 17.54rpx;
      }

      .search_btn {
        color: #fff;
        width: 135.09rpx;
        height: 59.65rpx;
        line-height: 59.65rpx;
        background: $uni-theme-bg-color;
        border-radius: 100px;
      }
    }
  }

  .con-box {
    flex: 1;
    display: flex;
    overflow: hidden;
    margin-top: 28.07rpx;
  }

  .left_classify {
    width: 192.98rpx;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overflow: hidden;

    .clify_item {
      width: 192.98rpx;
      height: 112.28rpx;
      text-align: center;
      line-height: 112.28rpx;
    }

    .pictch {
      background: #fff;
      font-weight: 700;
      position: relative;

      &::before {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        display: inline-block;
        width: 3px;
        height: 100%;
        background-color: #F84221;
      }
    }
  }

  .right_storee {
    flex: 1;
    width: 557.89rpx;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overflow: hidden;
    padding: 0 12.28rpx;
    background-color: #fff;
  }

  .banner {
    width: 100%;
    height: 131.58rpx;
    border-radius: 5px;
  }

  .tabs_box {
    width: 100%;
    margin: 0 auto;
    height: 80.7rpx;
    border-top: 1px solid #E7E6E4;
    background-color: #fff;
    padding: 0 21.05rpx;
  }

  .active {
    font-weight: 700;
    color: #F84221;
  }

  .item_cont {
    width: 100%;
    // height: 147.37rpx;
    padding: 17.54rpx 28.07rpx;
    background-color: #fff;
    margin-top: 28.07rpx;
    border-radius: 8px;

    .item-left {
      .img {
        width: 98.25rpx;
        height: 98.25rpx;
        border-radius: 100px;
      }
    }

    .item-right {
      margin-left: 21.05rpx;

      .store_name {
        margin-bottom: 8.77rpx;

        .sales_volume {
          font-size: 28.07rpx;
          color: #666;
          margin-left: 52.63rpx;
        }

        .name {
          flex: 1;
          width: 245.61rpx;
          font-size: 31.58rpx;
          // font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .msg {

        .category_name {
          color: $uni-theme-color;
        }

        .scope {
          flex: 1;
          width: 350.88rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &::before {
            content: '|';
            margin: 0 10.53rpx;
          }
        }
      }
    }
  }

  .head-wrapper {
    z-index: 999;
    display: flex;
    align-items: center;
    position: fixed;
    left: 30rpx;
    top: 0;
    /* #ifdef MP */
    height: 43px;
    /* #endif */
    /* #ifdef H5 */
    height: 114rpx;
    /* #endif */
  }

  .head-menu {
    display: flex;
    align-items: center;
    height: 54rpx;
    width: 140rpx;
    background: rgba(0, 0, 0, .25);
    border-radius: 27rpx;

    .iconfont {
      flex: 1;
      text-align: center;
      color: #fff;
      box-sizing: border-box;

      &.icon-xiangzuo {
        border-right: 1px solid #fff;
      }
    }
  }
</style>