<template>
  <view style="background-color: #f5f5f5;">
    
    <view class='productList' :style="viewColor">
      <!-- 顶部 -->
      <view class="top">
        <view class="head_tit">
          <view class="" style="display: flex;align-items: center;width: 100%;justify-content: space-between;">
            <!-- 	<u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
							height="50.82rpx" @click='backjJump'></u--image> -->
            <view style="display: flex;align-items: center;">
              <i class="iconfont icon-xiangzuo" style="font-size: 31.54rpx;text-align: left;" @click='backjJump'></i>
              <view class=""
                style="font-size: 31.54rpx;font-weight: 700;margin-left: 20rpx;color: #F84221;">
                {{nav_title}}
              </view>
              <!-- <view class=""
                @click="navGoto(`/pages/nongKe/supply_chain/supplierA?tit=1&type_id=12&isDetail=1&product_type=98&cate_id=${userInfoData.mer_info.category_id}`)"
                style="font-size: 31.54rpx;font-weight: 700;margin-left: 22rpx;">
                供货采购市场
              </view> -->
            </view>
          </view>
        </view>

        <view class="sswz">
          <view style="position: relative;width: 694rpx;margin: 0 auto;">
            <u-search borderColor="#FF6D20" bgColor="white" :showAction="false" placeholder="搜索店铺或者名称"
              v-model="storeParam.keyword" @search="onInputConfirm" class="serch_cls"></u-search>
            <u--image @tap="searchSubmit" class="img_cls" :showLoading="true" src="/static/images/GXSC/SSBT.png"
              width="115.65rpx" height="56.82rpx"></u--image>
          </view>
        </view>

        <view class="flags">

        </view>
      </view>


      <view class="content">
        <view class="" :style="`height:${headTop}px`">

        </view>
        <view class="hot_serch">
          <!-- <text>热搜:</text> -->
        </view>

        <view class="menu_cls">
          <u-scroll-list indicatorActiveColor='#FF6D20' :indicator="true">
            <view class="menu_li" :class="{'menu_li_on': item.cate_name==merchant.cate_name}"
              @click="changeMerchant(item)" v-for="item,index in cloudList" :key="index">
              <u--image class="image" :showLoading="true" :src="item.pic" width="87.62rpx" height="87.62rpx"
                shape="circle"></u--image>
              <view class="li_text" style="display: block;font-size: 26.29rpx;margin-top: 10rpx;">{{item.cate_name}}
              </view>
            </view>
          </u-scroll-list>
          <view class="all" @click="showAllRef">
            <view>全</view>
            <view>部</view>
            <image src="@/static/images/icon/all.png"></image>
          </view>
        </view>

      </view>

      <view class="container">
        <scroll-view scroll-y class="left-panel" @scrolltolower="loadMoreLeft">
          <!-- 左侧内容 -->
          <view class="left-panel_item" v-for="(item, index) in merchant.children" :class="{'left-panel_item_active': item.cate_name==merchantTow.cate_name}" @click="changeMerchantTow(item)">{{item.cate_name}}</view>
          <view style="height: 200rpx;"></view>
        </scroll-view>
        <view class="right-panel">
          <view class="right-panel-head">
            <view :class="{'active': storeParam.order==''}" @click="set_where('')">综合</view>
            <view>
              <view :class="{'active': storeParam.order=='sales'}" @click="set_where('sales')">销量</view>
              <!-- <view :class="{'active': storeParam.order.includes('price')}" @click="set_where(price_order)">
                <text style="margin-right: 5rpx;">价格</text>
                <image class="icon" v-if="price_order=='procure_price_asc'&&storeParam.order.includes('price')" :src="domain+'/static/diy/up'+keyColor+'.png'"></image>
                <image class="icon" v-else-if="price_order=='procure_price_desc'&&storeParam.order.includes('price')" :src="domain+'/static/diy/down'+keyColor+'.png'"></image>
                <image class="icon" v-else src='/static/images/horn.png'></image>
              </view> -->
            </view>
          </view>
          <scroll-view scroll-y class="right-panel-view" @scrolltolower="loadMoreRight">
            <!-- 右侧内容 -->
            <view class='no-shop' v-if="goodsList.length==0 && !showLoading" v-cloak>
              <view class='pictrue' style="margin: 0 auto;">
                <!-- <image src='../../../static/images/noCart.png'></image> -->
                <image src='@/static/images/no_short.png'></image>
                <text>暂无商品，切换其他分类或地区试试</text>
              </view>
            </view>
            <block>
              <view v-if="item.product" v-for="(item, index) in goodsList" class="short_item" @click="clickProduct(item)">
                <image class="image" :src="item.product.image"></image>
                <view class="short_item_right">
                  <view class="r_name">{{item.product.store_name}}</view>
                  <view class="r_type">
                    <view v-if="item.product.store_info">{{item.product.store_info}}</view>
                    <view v-else-if="getSkuName(item)">{{getSkuName(item)}}</view>
                    <view v-else-if="item.unit_name">{{item.unit_name}}</view>
                  </view>
                  <view class="r_btn" v-if="getAttr(item)">
                    <view>￥<text style="font-size: 33rpx;">{{ getAttr(item).procure_price.split('.')[0] }}.</text>{{getAttr(item).procure_price.split('.')[1]}}</view>
                    <image src="@/static/images/icon/plus.png" style="width: 40rpx;height: 40rpx;border-radius: 40rpx;"></image>
                  </view>
                </view>
              </view>
            </block>
            <u-loadmore v-if="showLoading" status="loading"></u-loadmore>
            <view style="height: 200rpx;"></view>
          </scroll-view>
        </view>
      </view>

    </view>
    <!-- <u-loadmore v-if="storeParam.is_recommend==false && storeList.length != 0 || (storeParam.is_recommend==true)"
      :status="status" /> -->
      
    <!-- 购物车 -->
    <view class="card" :style="`bottom:${30}px`"
      @click="navgo(`/pages/nongKe/supply_chain/shopping_trolley_other?source=${storeParam.sys_labels}`)">
      <view class="left">
        <view class="cart" style="position: relative;z-index: 9999999;">
          <u--image :showLoading="true" src="/static/images/LHYC/GWC.png" width="63.09rpx"
            height="63.09rpx"></u--image>
    
         <view class="badge" v-show="goodsNum">
            {{goodsNum}}
          </view>
        </view>
        <view class="tot_price">
          <view class="">
            ￥{{totalMoney}}
          </view>
          <view class="">
            {{tips||'支持配送 售后无忧'}}
          </view>
        </view>
      </view>
      <view class="right">
        去结算
      </view>
    </view>
    
    <uni-popup ref="allRef" type="right" @change="changeAllRef">
      <view class="all_ref">
        <view class="header">请选择商品分类</view>
        <view class="all_list">
          <view class="menu_li" :class="{'menu_li_on': item.cate_name==merchant.cate_name}"
            @click="changeMerchant(item, true)" v-for="item,index in cloudList" :key="index">
            <u--image class="image" :showLoading="true" :src="item.pic" width="87.62rpx" height="87.62rpx"
              shape="circle"></u--image>
            <view class="li_text" style="display: block;font-size: 26.29rpx;margin-top: 10rpx;">{{item.cate_name}}
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    
    <shortPopup ref="shortPopupRef" @addCart="loadCart" :source="storeParam.sys_labels"></shortPopup>

  </view>
</template>

<script>
  import {
    getStoreList,
    getGeocoder,
  } from '@/api/store.js';
  import {
    supMenuApi
  } from '@/api/requesta.js';
  import recommend from '../supply_chain/component/recommend';
  import rightSlider from '../supply_chain/component/rightSlider';
  import {
    merClassifly,
    getStoreTypeApi,
    getProductslist,
  } from '@/api/store.js';
  import {
    mapGetters
  } from "vuex";
  import {
    goShopDetail
  } from '@/libs/order.js'
  import {
    configMap
  } from '@/utils';
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
  import {
    getArea,
    getStreet
  } from '@/api/article.js';
  import {
    getIndexData,
    getDiy
  } from '@/api/api.js'

  import {
    HTTP_REQUEST_URL
  } from '@/config/app';
  import {
    townCloud,
    getCityCloundShop,
    getCategoryListLevel
  } from '@/api/requesta.js'
  import {
    getCartCounts,
    getCartList,
  } from '@/api/requesta.js';

  import Cache from '@/utils/cache';
  import shortPopup from "@/components/shortPopup.vue"
  import { Toast } from '../../../libs/uniApi';
  const app = getApp();
  export default {
    components: {
      recommend,
      rightSlider,
      easyLoadimage,
      shortPopup
    },
    data() {
      return {
        domain: HTTP_REQUEST_URL,
        nav_title: '供货采购商品',
        defaInd: [0, 0],
        columnData: [],
        showSerch: false,
        headTop: 0,
        street_id: "",
        showSelect: false,
        price: 0,
        stock: 0,
        nows: false,
        loading: false,
        loadingIcon: true,
        loadTitle: '加载更多',
        title: '',
        hotPage: 1,
        hotLimit: 10,
        hotScroll: false,
        // 筛选框
        rightBox: false,
        //品牌列表
        brandList: [],
        downKey: 0,
        downStatus: false,
        cloudList: [],
        street: "",
        showPicker: false,
        status: "loadmore",
        price_order: 'procure_price_asc', //价格排序方式(升降), procure_price_asc, procure_price_desc
        // 下拉菜单
        downMenu: [{
            title: '默认',
            key: 0,
            order: ""
          },
          {
            title: '销量',
            key: 1,
            order: 'sales'
          },
          {
            title: '好评',
            key: 2,
            order: 'rate'
          },
          {
            title: '距离',
            key: 3,
            order: 'location'
          }
        ],
        // 商铺列表
        storeList: [],
        storeParam: {
          keyword: '',
          page: 1,
          limit: 10,
          order: '',
          category_id: '',
          type_id: '',
          street_id: '',
          sys_labels: '',
          is_recommend: false, // 是否为推荐的参数
        },
        storeKey: 0,
        storeScroll: true,
        merchant: '', // 当前选中一级分类
        merchantTow: '', //当前选中二级分类
        mer_id: '',
        sortId: '',
        price_on: '',
        price_off: '',
        detaile_address: "",
        recommend_address: "",
        location_address: "",
        latitude: "",
        longitude: "",
        count: 0,
        storeTypeArr: [], //店铺类型
        merList: [], //商户分类
        product_type: 0,
        show: false,
        image: '', //图片,
        credit_buy: '', //支持先货后款
        cloudList: [], // 类型列表
        trnList: [],
        goodsNum: 0,
        totalMoney: 0,
        goodsList: [], //商品列表
        showLoading: false, //是否显示加载
        allShow: false, //是否显示全部类型弹窗
        userInfoData: {
          mer_info: {
            type_id: 0
          }
        },
        tips: '', //底部提示
      };
    },
    async onLoad(options) {
      // console.log(options);
      this.storeParam.sys_labels = options.value;
      if(options.value==12)this.nav_title = '赊账进货'
      this.tips = options.tips;
      let userInfo = this.$store.state.app.userInfo;
      if(typeof userInfo == 'string') this.userInfoData = JSON.parse(userInfo);
      else this.userInfoData = userInfo;
      
      this.product_type = 98
      this.credit_buy = options.credit_buy
      this.storeParam.type_id = options.type_id
      this.storeParam.type_id = options.type_id && options.type_id.split(',').toString() || ''
      this.storeList = [];
      this.showLoading = true;
      
      await this.getCloundShop();
      let that = this
      setTimeout(() => {
        uni.createSelectorQuery()
          .in(this)
          .select('.flags')
          .boundingClientRect(rect => {
            // console.log(this.cartTagInfo, 6666)
            // that.cartTagInfo = rect
            that.headTop = rect.top
            // console.log(that.headTop)
          })
          .exec();
      }, 100)
      // this.$nextTick(()=>{
      //   this.$refs.shortPopupRef.open();
      // })
    },
    computed: {
      downMenus: function() {
        return this.downMenu.filter((item) => {
          if (this.mer_location) {
            return item
          } else {
            return item.key < 3
          }
        })
      },
      ...configMap({
        margin_ico_switch: 0,
        margin_ico: '',
        mer_location: 0,
        store_street_theme: 1,
        hide_mer_status: '',
      }, mapGetters(['viewColor', 'keyColor'])),
    },
    methods: {
      async getCloundShop() {
        const {
          data
        } = await getCategoryListLevel({
          type: 2
        })
        this.cloudList = data;
        this.cloudList.unshift({
          cate_name: '全部',
          children: [],
          pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/de2be202312151001024597.png",
          store_category_id: -1
        })
        this.cloudList.forEach((item)=>{
          item.children.unshift({
            cate_name: '全部',
            store_category_id: item.store_category_id,
          });
        })
        this.merchant = this.cloudList[0];
        this.merchantTow = this.merchant?.children[0];
        this.storeParam.category_id = this.merchantTow.store_category_id;
        this.getStoreList();
        return null;
      },
      selectLocation() {
        this.isSelectPlace ? this.showPicker = true : ''
      },
      confirm(e) {
        this.showPicker = false
        this.$emit('selectPlce', e)
        this.$emit('change', e)
        this.street = e.value[1].name
        this.$nextTick(() => {
          this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);
        })
        this.storeParam.street_id = e.value[1].code
        this.street_id = e.value[1].code
        this.getStoreList()
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values,
          index,
          picker = this.$refs.uPicker
        } = e;
        if (columnIndex === 0) {
          getStreet({
            area_code: value[0]['code']
          }).then(res => {
            picker.setColumnValues(1, res.data);
          });
        }
      },
      Area() {
        getArea({
          city_code: 510500
        }).then(res => {
          this.$refs.uPicker.setColumnValues(0, res.data);
          this.Street(res.data[0]['code']);
          // console.log(res.data, 66666)
        });
      },
      Street(code) {
        getStreet({
          area_code: code
        }).then(res => {
          this.$refs.uPicker.setColumnValues(1, res.data);

        });
      },

      onInputConfirm() {
        this.showSerch = false
        this.searchSubmit()
      },
      // 对象转数组
      objToArr(data) {
        let obj = Object.keys(data).sort();
        let m = obj.map(key => data[key]);
        return m;
      },
      hotSerchFn(keywords) {
        this.storeParam.keyword = keywords
        this.searchSubmit()
      },
      navGoto(url) {
        uni.redirectTo({
          url
        })
      },
      navgo(url) {
        uni.navigateTo({
          url
        })
      },
      // 获取商户分类
      getClassfication: function() {
        let temp = []
        merClassifly()
          .then(res => {
            temp = res.data.map(item => {
              return {
                ...item,
                check: false
              }
            })
            if (this.storeParam.category_id.length > 0) {
              this.storeParam.category_id.forEach((ids, index) => {
                temp.forEach(el => {
                  if (ids == el.category_id) {
                    el.check = true
                  }
                })
              })
            }
            this.merList = temp
          })
          .catch(res => {
            this.$util.Tips({
              title: res
            });
          });
      },
      // 获取店铺类型
      getStoreType: function() {
        let temp = []
        getStoreTypeApi().then(res => {
            res.data.forEach(item => {
              if (item.mer_type_id == this.storeParam.type_id) {
                temp.push({
                  ...item,
                  check: true
                })
              }
            })
            this.storeTypeArr = temp
          })
          .catch(res => {
            this.$util.Tips({
              title: res
            });
          });
      },
      /** 打开地图**/
      showMaoLocation(lat, long) {
        if (!lat || !long) return this.$util.Tips({
          title: '请设置允许商城访问您的位置！'
        });
        //#ifdef H5
        if (this.$wechat.isWeixin() === true) {
          this.$wechat.seeLocation({
            latitude: Number(lat),
            longitude: Number(long),
            name: '当前位置',
            address: this.location_address
          }).then(res => {
            // console.log('success');
          })
        } else {
          //#endif
          uni.openLocation({
            latitude: parseFloat(lat),
            longitude: parseFloat(long),
            name: '当前位置',
            address: this.location_address,
            scale: 8,
            success: function(res) {
              // console.log(res)
            },
          });
          // #ifdef H5
        }
        //#endif	
      },
      showStoreLocation(item) {
        if (!item.lat || !item.long) return this.$util.Tips({
          title: '请设置允许商城访问您的位置！'
        });
        //#ifdef H5
        if (this.$wechat.isWeixin() === true) {
          this.$wechat.seeLocation({
            latitude: Number(item.lat),
            longitude: Number(item.long),
            name: item.mer_name,
            address: item.mer_address ? item.mer_address : '',
          }).then(res => {
            // console.log('success');
          })
        } else {
          //#endif
          uni.openLocation({
            latitude: parseFloat(item.lat),
            longitude: parseFloat(item.long),
            scale: 8,
            name: item.mer_name,
            address: item.mer_address ? item.mer_address : '',
            success: function(res) {
              // console.log(res)
            },
          });
          // #ifdef H5
        }
        //#endif	
      },
      selfLocation() {
        let self = this
        if (uni.getStorageSync('RejectTarget')){
          this.getStoreList(); 
          return;
        }
        if (this.$store?.state?.storage?.location?.lat) {
          this.latitude = this.$store?.state?.storage?.location?.lat;
          this.longitude = this.$store?.state?.storage?.location?.long;
          getGeocoder({
            lat: this.latitude,
            long: this.longitude
          }).then(res => {
            // console.log(res)
            this.detaile_address = res.data.address;
            this.location_address = res.data.address;
            this.recommend_address = res.data.address.length > 4 ? res.data.address
              .slice(0, 4) + '...' :
              res.data.address;
            this.getStoreList();
          }).catch(err => {
            uni.showToast({
              title: err,
              icon: 'none'
            })
            this.getStoreList();
          })
        } else uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            console.log('定位');
            let latitude, longitude;
            latitude = res.latitude.toString();
            longitude = res.longitude.toString();
            this.latitude = res.latitude.toFixed(6);
            this.longitude = res.longitude.toFixed(6);
            this.$store.commit('setLocation', {
              lat: res.latitude.toFixed(6),
              long: res.longitude.toFixed(6),
            });
            getGeocoder({
              lat: latitude,
              long: longitude
            }).then(res => {
              // console.log(res)
              this.detaile_address = res.data.address;
              this.location_address = res.data.address;
              this.recommend_address = res.data.address.length > 4 ? res.data.address
                .slice(0, 4) + '...' :
                res.data.address
              this.getStoreList();
            }).catch(err => {
              uni.showToast({
                title: err,
                icon: 'none'
              })
              this.getStoreList();
            })
          },
          fail: (res) => {
            uni.showToast({
              title: res,
              icon: 'none',
              duration: 1000
            });
            this.getStoreList();
          },
        });
      },
      // 进店
      goStore(id) {
        if (this.storeParam.type_id == 12) {
          uni.navigateTo({
            url: `/pages/nongKe/supply_chain/merchant?id=${id}`
          })
        } else {
          if (this.hide_mer_status != 1) {
            uni.navigateTo({
              url: `/pages/store/home/index?id=${id}&type=7`
            })
          }
        }
      },
      // 搜索
      searchSubmit: function() {
        console.log('搜索', this.storeParam.keyword);
        let that = this;
        that.$set(that.storeParam, 'keyword', this.storeParam.keyword);
        this.set_where('')
        this.showSerch = false
      },
      //点击事件处理
      set_where: function(e) {
        if (this.loading) return
        this.storeList = []
        this.storeParam.page = 1
        // this.storeParam.order = this.downMenu[e].order
        // this.storeParam.order = 'location' //使用距离进行排序
        this.storeParam.order = e //选择排序方式
        this.getStoreList();
        if(e=='procure_price_asc') return this.price_order = 'procure_price_desc';
        if(e=='procure_price_desc') return this.price_order = 'procure_price_asc';
      },
      backjJump() {
        uni.navigateBack({
          delta: 1
        })
      },
      // 点击商品一级分类
      changeMerchant(item, type=false) {
        this.merchant = item;
        this.merchantTow = item.children[0];
        this.storeParam.category_id = item.children[0].store_category_id;
        this.storeParam.page = 1;
        this.goodsList = [];
        if(type) this.$refs.allRef.close();
        this.getStoreList()
      },
      // 点击商品二级分类
      changeMerchantTow(item){
        this.merchantTow = item;
        this.storeParam.category_id = this.merchantTow.store_category_id;
        this.storeParam.page = 1;
        this.getStoreList()
      },
      // 商品列表
      getStoreList(load=false) {
        this.showLoading = true
        this.status = "loading"
        if(!load) {
          this.storeParam.page = 1;
          this.goodsList = [];
        }
        // console.log({...this.userInfoData});
        let query = {
          product_type: this.product_type,
          // cate_pid: this.storeParam.category_id,
          page: this.storeParam.page,
          order: this.storeParam.order,
          // sys_labels: this.storeParam.sys_labels,
          keyword: this.storeParam.keyword
        };
        if(this.storeParam.category_id==-1) null;
        else if(!this.merchantTow.pid) query.cate_pid = this.storeParam.category_id; // 全部是查询一级分类pid
        else query.cate_id = this.storeParam.category_id; // 否则查询二级分类
        getProductslist(query).then((res)=>{
          // console.log(res);
          this.goodsList = [...this.goodsList, ...res.data.list]
          this.goodsList.forEach(item => {
            this.trnList.push({
              left: 0,
              bottom: 0
            })
          })
          this.showLoading = false;
        }).catch(e=>{
          console.log(e);
          Toast(e.msg||e.message||e)
          this.showLoading = false;
        })
        // townCloud({
        //   street_code: this.street_id,
        //   category_id: this.storeParam.category_id,
        //   order: this.storeParam.order,
        //   keyword: this.storeParam.keyword,
        //   page: this.storeParam.page,
        //   location: this.latitude+','+this.longitude,
        // }).then(res => {
        //   this.goodsList = [...this.goodsList, ...res.data.list]
        //   this.showLoading = false
        //   this.goodsList.forEach(item => {
        //     this.trnList.push({
        //       left: 0,
        //       bottom: 0
        //     })
        //   })
        // }).catch(e=>{
        //   Toast(e.msg||e.message||e)
        //   this.showLoading = false;
        // })
      },
      loadMoreLeft() {
        // 加载更多左侧内容的逻辑
      },
      loadMoreRight() {
        // 加载更多右侧内容的逻辑
        this.storeParam.page++;
        this.getStoreList(true);
      },
      // 购物车信息
      cartFn() {
        getCartList({
          product_type: 98,
          source: this.storeParam.sys_labels
        }).then(res => {
          this.totalMoney = 0
          this.cartList = res.data.list
          this.cartList.forEach(e => {
            e.list.forEach(item => {
              this.totalMoney += item.cart_num * item.productAttr.procure_price
            })
          })
          this.totalMoney = this.totalMoney.toFixed(2)
        })
        getCartCounts({
          product_type: 98,
          source: this.storeParam.sys_labels
        }).then(res => {
          this.goodsNum = res.data[0].count
        })
      },
      // 点击商品
      clickProduct(data){
        this.$refs.shortPopupRef.setDatas(data, this.goodsNum);
        this.$refs.shortPopupRef.open();
      },
      // 点击全部
      showAllRef(){
        this.$refs.allRef.open();
      },
      changeAllRef(e){
        this.allShow = e.show;
      },
      // 搜索
      navToSearch(){
        uni.navigateTo({
          url: `/pages/columnGoods/goods_search/index?back=${true}&searchVal=${this.storeParam.keyword}`,
          success:()=> {
            uni.$once('searchValue', (e)=>{
              this.storeParam.keyword = e;
              this.searchSubmit();
            })
          }
        })
      },
      // 刷新购物车
      loadCart(){
        this.cartFn();
      },
      // 获取规格名称
      getSkuName(data){
        try{
          let str = [];
          data?.product?.attrValue.forEach((e)=>{
            if(e.detail){
              Object.keys(e.detail).forEach((c)=>{
                str.push((e.detail[c]))
              })
            }
          })
          // return Object.keys(data?.sku)?.join('/')||null;
          return str.join('/') || '';
        }catch(e){
          return ''
        }
      },
      // 获取第一个规格
      getAttr(data){
        try{
          return data?.product?.attrValue[0]||{}
        }catch(e){
          return {}
        }
      },
      // 选择位置
      changeMap(){
        uni.navigateTo({
          url: `/pages/select_address/select_address_n`,
          success:()=> {
            uni.$once('changeAddress', (e)=>{
              this.street_id = e.street.code;
              this.storeParam.street_id = this.street_id;
              this.street = e.street.name;
              if (e.longitude) {
                this.longitude = e.longitude;
                this.latitude = e.latitude;
                this.$store.commit('setLocation', {
                  lat: e.longitude,
                  long: e.latitude,
                });
              }
              this.getStoreList(true);
            })
          }
        })
      }
    },
    //刷新
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    onShow() {
      this.showSelect = false;
      this.cartFn();
    },
    // 页面返回
    onBackPress() {
      if(this.$refs.shortPopupRef.isShow){
        this.$refs.shortPopupRef.close();
        return true;
      } else if(this.allShow){
        this.$refs.allRef.close();
        return true;
      }
      else return false;
    }

  }
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  page {
    background-color: #f5f5f5;
  }
  
  .all_ref{
    height: 100vh;
    width: 510rpx;
    background-color: #fff;
    padding: 30rpx;
    .header{
      height: 100rpx;
      font-size: 33rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .all_list{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .menu_li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 150rpx;
      height: 150rpx;
      overflow: hidden;
    
      // width: 120rpx;
      // display: inline-block;
      .image {
        border-radius: 50%;
        border: 5rpx solid #fff;
      }
    
      .li_text {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        padding: 4rpx 10rpx;
      }
    }
    
    .menu_li_on {
      .image {
        border: 5rpx solid #ff6d20;
        border-radius: 50%;
      }
    
      .li_text {
        background-color: #ff6d20;
        border-radius: 2em;
        color: #fff;
        padding: 4rpx 10rpx;
      }
    }
  }

  .com_name {
    font-size: 33.29rpx;
    // background-color: red;
    // max-width: 45vw;
    max-width: 40vw;
    white-space: nowrap;
    /* 防止文字换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 使用省略号表示溢出的内容 */
    // width: 200px;
    /* 可根据实际情况调整容器宽度 */
  }

  .head_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20rpx;

  }

  .productList {
    // padding-top: 50rpx;
    // padding: 0 20rpx 0;
    display: flex;
    flex-direction: column;

    .top {
    	padding-top: var(--status-bar-height);
    	/* #ifdef H5 */
    	padding-top: 30rpx;
    	/* #endif */
    	background-color: #F0F2F5;
    	position: fixed;
    	z-index: 10;
    	width: 100%;
    	top: 0;
    }
    

    .content {
      flex: 1;
      padding: 0 20rpx 10rpx 20rpx;
    }

    .menu_cls {
      // background-color: white;
      // height: 199.77rpx;
      border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
      padding: 10rpx 70rpx 0 0;
      font-size: 26.29rpx;
      height: 155rpx;
      overflow: hidden;
      position: relative;
      
      .all{
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 15rpx;   
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        background-color: #f5f5f5;
        image{
          width: 30rpx;
          height: 30rpx;
        }
      }

      .menu_li {
        // margin-right: 20rpx;
        // background-color: red;
        // width: 50vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 140rpx;
        height: auto;

        // width: 120rpx;
        // display: inline-block;
        .image {
          border-radius: 50%;
          border: 5rpx solid #fff;
        }

        .li_text {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
          padding: 1rpx 10rpx 4rpx 10rpx;
        }
      }

      .menu_li_on {
        .image {
          border: 5rpx solid #ff6d20;
          border-radius: 50%;
        }

        .li_text {
          background-color: #ff6d20;
          border-radius: 2em;
          color: #fff;
          padding: 1rpx 10rpx 4rpx 10rpx;
        }
      }

    }

    .container {
      display: flex;
      height: calc(100vh - 320rpx - var(--status-bar-height));

      .left-panel {
        width: 180rpx;
        height: 100%;
        font-size: 29.79rpx;
        flex-shrink: 0;

        .left-panel_item {
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          box-sizing: border-box;
          padding-left: 10rpx;
          max-width: 180rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .left-panel_item_active {
          color: #F84221;
          background-color: rgba(#F84221, 0.1);
          position: relative;

          &::before {
            content: '';
            display: inline-block;
            width: 10rpx;
            height: 40rpx;
            border-radius: 5rpx;
            background-color: #F84221;
            position: absolute;
            left: 0;
            top: 0;
            transform: translate(0, 75%);
          }
        }
      }

      .right-panel {
        width: calc(100vw - 180rpx);
        height: 100%;
        font-size: 26.29rpx;
        background-color: #fff;

        .right-panel-head {
          height: 70rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 30rpx;
          color: #737373;

          view {
            display: flex;
            align-items: center;
            margin-left: 40rpx;
          }

          .active {
            color: #333;
            font-weight: bold;
          }
          
          .icon{
            height: 22rpx;
            width: 18rpx;
          }
        }

        .right-panel-view {
          height: calc(100vh - 400rpx - var(--status-bar-height) - 100rpx);

          .short_item {
            padding: 20rpx;
            display: flex;

            .image {
              height: 145.23rpx;
              width: 145.23rpx;
              border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
              margin-right: 20rpx;
              flex-shrink: 0;
            }

            .short_item_right {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .r_name {
                width: 100%;
                height: 64rpx;
                line-height: 32rpx;
                text-overflow: ellipsis;
                display: -webkit-box; /* 使用弹性盒子布局 */
                -webkit-box-orient: vertical; /* 设置为垂直方向布局 */
                overflow: hidden; /* 隐藏超出部分 */
                -webkit-line-clamp: 2; /* 限制显示两行文本 */
              }

              .r_type {
                font-size: 22.78rpx;
                color: #737373;
                width: 300rpx;

                view {
                  height: 39rpx;
                  line-height: 39rpx;
                  background: #FEF5F3;
                  display: inline-block;
                  padding: 0 16rpx;
                  border-radius: 39rpx;
                  max-width: 100%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }

              .r_btn {
                display: flex;
                justify-content: space-between;
                font-size: 22.78rpx;
                color: #F84221;
                align-items: center;
              }
            }
          }
        }
      }
    }

    .common-hd {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60rpx;
      margin-top: 30rpx;

      .title {
        padding: 0 80rpx;
        font-size: 34rpx;
        color: $theme-color;
        font-weight: bold;
        background-image: url("~@/static/images/index-title.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left center;
      }
    }

    .goods_list {
      margin-top: 20rpx;

      .goods_card {
        margin-top: 20rpx;
        height: auto;
        background-color: white;
        padding: 20rpx;
        // border-radius: 20rpx;
        display: flex;
        // align-items: center;

        .left {
          margin-right: 20rpx;
          width: 158rpx;
          height: 158rpx;
          border-radius: 20rpx;
          overflow: hidden;
        }

        .right {
          flex: 1;
          color: #737373;

          .head {
            font-weight: bold;
            // color: red;
            color: #333;

          }

          .li {
            width: 100%;
            display: flex;
            font-size: 28.04rpx;
            margin-bottom: 10rpx;
            align-items: center;

            text {
              margin: 0 20rpx 0 5rpx;
            }
          }
        }
      }
    }

    .address {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 200px;
    }
  }

  .selects {
    transform: rotate(180deg);
  }



  .search-right.styleType2 .right-text,
  .search-right.styleType3 .right-text {
    color: #282828;
  }

  .search-right.styleType2 .icon-xiangyou,
  .search-right.styleType3 .icon-xiangyou {
    color: #999999;
  }

  .search-right.styleType2 .icon-dingwei,
  .search-right.styleType3 .icon-dingwei {
    color: #8A8A8A;
  }

  .productList .search .back {
    display: flex;
    align-items: center;
    width: 40rpx;
    height: 60rpx;

    .iconfont {
      color: #fff;
      font-size: 36rpx;
    }
  }

  .town_name {
    overflow: hidden;
    white-space: nowrap;
    /* 设置文本不换行 */
    text-overflow: ellipsis;
    max-width: 4.2em;
    font-size: 28rpx;
    /* 设置溢出文本为省略号 */
  }

  .hot_serch {
    height: 0rpx;
  }

  .productList .search .input {
    flex: 1;
    height: 60rpx;
    background-color: #fff;
    border-radius: 50rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .productList .search.styleType2 .input,
  .productList .search.styleType3 .input {
    background: #EDEDED;
  }

  .productList .search .input input {
    flex: 1;
    height: 100%;
    font-size: 26rpx;
    margin-left: 10rpx;
  }

  .productList .search .input .placeholder {
    color: #999;
  }

  .productList .search .input .iconfont {
    font-size: 35rpx;
    color: #555;
  }

  .productList .search .icon-pailie,
  .productList .search .icon-tupianpailie {
    color: #fff;
    width: 62rpx;
    font-size: 40rpx;
    height: 86rpx;
    line-height: 86rpx;
  }

  .productList .nav-wrapper {
    z-index: 9;
    position: fixed;
    left: 0;
    top: 25px;
    width: 100%;
    margin-top: 86rpx;
    background-color: #fff;

    &.styleType1 {
      background-color: var(--view-theme);
    }

    .tab-bar {
      display: flex;
      align-items: center;

      .tab-item {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8rpx 0 20rpx;
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;

        &::after {
          content: ' ';
          position: absolute;
          left: 50%;
          bottom: 18rpx;
          width: 30rpx;
          height: 3rpx;
          background: transparent;
          transform: translateX(-50%);
        }

        &.on {
          &::after {
            background: #fff;
          }
        }
      }
    }
  }

  .border-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat;
  }

  .productList .nav {
    height: 86rpx;
    color: #454545;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 28rpx;
  }

  .productList .nav .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #FFFFFF;
    flex: 1;
  }

  .productList .nav.styleType2 .item,
  .productList .nav.styleType3 .item {
    color: #282828;
  }

  .productList .nav .item.font-colors {
    font-weight: 500;
    color: #FFFFFF;
  }

  .productList .nav.styleType2 .item.font-colors,
  .productList .nav.styleType3 .item.font-colors {
    color: var(--view-theme);
  }

  .productList .nav .item .font-line {
    height: 4rpx;
    background-color: #fff;
    margin-top: 3rpx;
    width: 28rpx;
    animation: line 0.3s;
    -moz-animation: line 0.3s;
    /* Firefox */
    -webkit-animation: line 0.3s;
    /* Safari 和 Chrome */
    -o-animation: line 0.3s;
    /* Opera */
  }

  .productList .nav.styleType2 .item .font-line,
  .productList .nav.styleType3 .item .font-line {
    background-color: var(--view-theme);
  }

  @keyframes line {
    from {
      width: 0rpx;
    }

    to {
      width: 28rpx;
    }
  }

  .productList .nav .item image {
    width: 15rpx;
    height: 19rpx;
    margin-left: 10rpx;
  }

  .selected-list {
    padding: 24rpx 14rpx;
    border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
    background-color: #fff;
    position: absolute;
    left: 100rpx;
    font-size: 29.79rpx;
    opacity: 0;
    transition: 0.5s;
    height: 0;


    .triangle-up {
      width: 0;
      height: 0;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      border-bottom: 10rpx solid white;
      position: absolute;
      top: -10rpx;
    }

    .selected-li {
      margin-bottom: 35rpx;
      color: #F84221;
      display: flex;
      align-items: center;
    }
  }

  .actSel {
    opacity: 1;
    height: auto;
    // transform: translateX(100rpx);

  }

  .store-wrapper {
    margin-top: 235rpx;
    border-top: 1px solid #F6F6F6;

    .store-item {
      margin: 20rpx auto;

      .head {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;

        .zhezhao {
          position: absolute;
          width: 95%;
          height: 150px;
          border-radius: 20rpx;
          z-index: 0;
          opacity: 0.5;
          background-color: #999;
        }

        .bgc_img {
          position: absolute;
          width: 95%;
          height: 150px;
          background-size: cover;
          border-radius: 20rpx;
          z-index: 0;
        }

        .zhezhao1 {
          width: 100%;
          height: 150px;
          border-radius: 20rpx;
          z-index: 1;

          .title {
            display: flex;
            height: 50px;
            align-items: center;
            margin-left: 20px;
            z-index: 1;

            span {
              background-color: #F84221;
              color: white;
              font-size: 12px;
              padding: 3px;
              border-radius: 5px;
              margin-left: 5px;
            }
          }

          .coent {
            display: flex;
            margin-left: 20px;

            .avater {
              width: 60px;
              height: 80px;

              image {
                width: 60px;
                height: 80px;
              }
            }

            .text {
              .text_one {
                display: flex;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;

                image {
                  width: 20px;
                  height: 20px;
                  margin-right: 10px;
                }

                .text_one_r {
                  margin-left: 10px;
                }
              }

              .text_two {
                width: 270px;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                image {
                  width: 20px;
                  height: 20px;
                  margin-right: 10px;
                }
              }

              .text_three {
                width: 270px;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                image {
                  width: 20px;
                  height: 20px;
                  margin-right: 10px;
                }
              }
            }

          }
        }


      }

      .pro-box {
        white-space: nowrap;
        display: flex;
        align-items: center;
        padding: 20rpx 20rpx 30rpx;

        .pro-item {
          display: inline-block;
          width: 218rpx;
          margin-right: 14rpx;

          .picture,
          /deep/image,
          uni-image {
            width: 100%;
            height: 214rpx;
            border-radius: 8rpx;
            position: relative;
          }

          .price {
            margin-top: 5rpx;
            font-size: 28rpx;
            color: var(--view-priceColor);
            font-weight: bold;

            text {
              font-size: 28rpx;
            }
          }

          &:last-child {
            margin-right: 0;
          }
        }

        &.styleType3 {
          padding: 20rpx;

          .pro-item {
            display: inline-block;
            background-color: #fff;
            border-radius: 16rpx;
            text-align: center;
            padding: 10rpx 0 20rpx;

            .picture,
            /deep/image,
            uni-image {
              width: 194rpx;
              height: 194rpx;
              text-align: center;
              border-radius: 8rpx;
              position: relative;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }

  .mer-item2 {
    padding: 20rpx;
    background: #fff;
    margin-bottom: 20rpx;
    border-radius: 16rpx;

    .mer-shop-count {
      display: flex;

      .mer-avatar {
        width: 100rpx;
        height: 100rpx;
      }

      .mer-top {
        color: #282828;
      }

      .mer-shop-right {
        margin-left: 20rpx;

        .mer-btn {
          color: #666666;
        }

      }

      .pro-box {
        white-space: nowrap;
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .pro-item {
          display: inline-block;
          width: 170rpx;
          margin-right: 20rpx;

          .picture,
          /deep/image,
          uni-image,
          /deep/.easy-loadimage {
            width: 100%;
            height: 170rpx;
            border-radius: 8rpx;
            position: relative;
          }

          .price {
            margin-top: 5rpx;
            font-size: 28rpx;
            color: var(--view-priceColor);
            font-weight: bold;

            text {
              font-size: 28rpx;
            }
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

  }

  .no-shop {
    background-color: #fff;
    // padding-bottom: calc(100% - 176rpx);

    .pictrue {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $uni-nothing-text;

      image {
        width: 500rpx;
        height: 180rpx;
      }
    }
  }

  .guanbi {
    width: 20px;
    height: 20px;
    margin: 30px auto;
  }

  .img_cls {
    position: absolute;
    top: 50%;
    right: 7rpx;
    transform: translateY(-50%);

  }

  .pop {
    z-index: 1;
  }

  .sswz {
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20rpx;
  }

  .score {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 24rpx;
    line-height: 1;
    color: #000;

    .score-title {
      margin-right: 15rpx;

    }

    .score_text {
      color: #fd5d2e;
    }

    .star {
      position: relative;
      width: 111rpx;
      height: 19rpx;
      margin-right: 10rpx;
      background: url(../../columnGoods/images/star.png) left top/100% 100% no-repeat;
      overflow: hidden;

      view {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../../columnGoods/images/star_active.png) left top/111rpx 19rpx no-repeat;

        &.star_purple {
          background: url(../../columnGoods/images/star_active_purple.png) left top/111rpx 19rpx no-repeat;
        }
      }
    }
  }
  
  .card {
    width: 720rpx;
    z-index: 99;
    // margin:auto;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    // bottom: 0;
    background-color: #333333;
    height: 101.64rpx;
    border-radius: 50.82rpx;
    overflow: hidden;
    color: white;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  
    .left {
      display: flex;
      align-items: center;
      padding: 10rpx 35rpx;
      
      .badge {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #F84221;
        transform: translate(50%, -50%);
        // padding: 10rpx 10rpx;
        border-radius: 35rpx;
        text-align: center;
        width: 35rpx;
        line-height: 35rpx;
        height: 35rpx;
      }
  
      .tot_price {
        display: flex;
        margin-left: 42rpx;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  
    .right {
      font-size: 33.29rpx;
      line-height: 50px;
      background: linear-gradient(to right, #F84221, #FF6D20);
      width: 140.19rpx;
      text-align: center;
    }
  }
</style>