tjqPhone/pages/store_cate/store_cate2.vue

<template>
  <view class="one">
    <!-- 顶部搜索框 -->
    <view class="header">
      <image :src="imgHost+'/statics/images/store-header.png'" mode="" class="header-img"></image>
      <navigator url="/pages/goods/goods_search/index" class="input acea-row row-center-wrapper" hover-class="none">
				<!-- #ifndef MP  -->
				<view class="search">
				<!-- #endif -->	
				<!-- #ifdef MP  -->
				<view class="search on acea-row row-middle" style="height: 43px;" :style="'top:'+statusBarHeight+'px'">
        <view class="searchCon">
				<!-- #endif -->	
          <text class="iconfont icon-xiazai5"></text>
          搜索店内商品
        </view>
				<!-- #ifdef MP  -->
				</view>
				<!-- #endif -->	
      </navigator>
      <!-- 门店地址 -->
      <view class="address">
        <view class="left">
          <view class="left-title" @click="goMap">
						<text class="iconfont icon-mendian"></text>
            <text class="text line1">{{info.name || '暂无门店'}}</text>
            <text class="iconfont icon-xiangyou"></text>
          </view>
          <!-- 营业时间 -->
          <view class="time">
            营业时间：{{info.day_time || '-'}}
          </view>
          <view class="distance">
               <text class="iconfont icon-chakanditu"></text>
                 距您<text>{{info.range||0}}km</text>
                   <text class="distance-name">{{info.detailed_address}}</text>
          </view>
    
        </view>
        <!-- 客服 -->
        <view class="right">
          <view class="kefu" @click="goKefu()">
            <text class="iconfont icon-kefu-mendian" />
            <text>客服</text>
          </view>
          <view class="goods" @click="shoppCart">
            <view class="cartNum" v-if="cartNum>0">
              {{cartNum}}
            </view>
            <text class="iconfont icon-gouwuche-mendian" />
            <text>购物车</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品排序条件 -->
    <view class="content">
      <view class="nav">
        <view @click="set_where(1)" :class="{'activeColor':active == 1}">
          综合排序
        </view>
        <view @click='set_where(2)' :class="{'activeColor':active == 2}">
          价格
          <image v-if="price==1" src="../../static/images/up.png" alt="" class="nav-img"></image>
          <image v-else-if="price==2" src='../../static/images/down.png' class="nav-img"></image>
          <image v-else src='../../static/images/horn.png' class="nav-img"></image>
        </view>
        <view @click='set_where(3)' :class="{'activeColor':active == 3}">
          销量
          <image v-if="stock==1" src="../../static/images/up.png" alt="" class="nav-img"></image>
          <image v-else-if="stock==2" src='../../static/images/down.png' class="nav-img"></image>
          <image v-else src='../../static/images/horn.png' class="nav-img"></image>
        </view>
        <view @click="set_where(4)">
          <text class="iconfont icon-shaixuan"></text>
          筛选
        </view>
      </view>
    </view>
    <!-- 商品列表 -->
   	<view class="list waterList" >
    				<waterfallsFlow ref="waterfallsFlow" :list="productList" @wapper-lick="godDetail">
    					<!--  #ifdef  MP-WEIXIN -->
    					<view v-for="(item, index) of productList" :key="index" slot="slot{{index}}">
    						<view class="waterfalls">
    							<view class='name line2'>{{item.store_name}}</view>
    							<span class="label"
    								v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
    							<span class="label"
    								v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
    							<span class="label"
    								v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
    							<text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
    							<view class="vip acea-row row-middle">
    								<view class='money font-color'>
    									￥<text class='num'>{{item.price.toString().split(".")[0]}}</text>
    									<text class='nums'
    										v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
    								</view>
    								<view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
    									<view>￥{{item.vip_price}}</view>
    									<!-- 	<image src='../../static/images/vip.png' v-if="item.price_type == 'member'"></image> -->
    									<view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
    											class="iconfont icon-huangguan4"></text>SVIP</view>
    									<view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
    											class="iconfont icon-dengjitubiao"></text>{{item.level_name}}</view>
    								</view>
    							</view>
    							<view class='vip acea-row row-between-wrapper'>
    								<view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
    								<view>评分 {{item.star}}</view>
    							</view>
    						</view>
    					</view>
    					<!--  #endif -->
    
    					<!-- #ifndef  MP-WEIXIN -->
    					<template v-slot:default="item">
    						<view class="waterfalls">
    							<view class='name line2'>{{item.store_name}}</view>
    							<span class="label"
    								v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
    							<span class="label"
    								v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
    							<span class="label"
    								v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
    							<text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
    							<view class="vip acea-row row-middle">
    								<view class='money font-color'>
    									￥<text class='num'>{{item.price.toString().split(".")[0]}}</text>
    									<text class='nums'
    										v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
    								</view>
    								<view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
    									<view>￥{{item.vip_price}}</view>
    									<view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
    											class="iconfont icon-huangguan4"></text>SVIP</view>
    									<view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
    											class="iconfont icon-v"></text>{{item.level_name}}</view>
    								</view>
    							</view>
    							<view class='vip acea-row row-between-wrapper'>
    								<view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
    								<view>评分 {{item.star}}</view>
    							</view>
    						</view>
    					</template>
    					<!-- #endif -->
    				</waterfallsFlow>
    				<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
    								<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
    							</view>
    			</view>
    <!-- 商品列表 -->
   <view class="default" v-if="productList.length==0 && where.page > 1">
			<image :src="imgHost+'/statics/images/no-thing.png'" mode="" class="img"></image>
      <view class="text">
        暂无商品，去添加点什么吧
      </view>
    </view>
    <!-- 筛选弹窗 -->
    <filterPopup ref="popup" :storeCategory="storeCategory" :storeBrand="storeBrand" @brandChange="brandChange"
      @categoryChange="categoryChange" @submitFn="submitFn"></filterPopup>
    <!-- 客服弹窗 -->
    <Kefu ref="kefu" @closeKefu="closeKefu" :customerList="customerList" :customerType="customerType"></Kefu>
  </view>
</template>

<script>
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
  import filterPopup from "@/components/filterPopup/index.vue";
  import Kefu from "@/components/kefu/index.vue"
  import {
    mapState,
    mapGetters
  } from 'vuex';
  import {
    getProducts,
    getCustomerList,
    getStoreCategory,
    getStoreBrand
  } from '@/api/new_store.js';
  	import {
  		goShopDetail
  	} from '@/libs/order.js';
	import {
	  HTTP_REQUEST_URL
	} from '@/config/app';	
  export default {
    components: {
      filterPopup,
      waterfallsFlow,
      Kefu
    },
    props: {
      info: {
        type: Object,
        default: {}
      },
			customerType:{
				type:Number,
				default:1
			}
    },
    computed: {
      ...mapState({
        cartNum: state => state.indexData.cartNum
      }),
      ...mapGetters(['isLogin', 'uid', 'cartNum']),
    },
    data() {
      return {
				statusBarHeight:statusBarHeight,
				imgHost: HTTP_REQUEST_URL,
        price: 0,
        stock: 0,
        productList: [], // 商品数据
        customerList: [], // 客服数据
        storeCategory: [], // 分类数据
        storeBrand: [], // 品牌数据
        show: false,
        active: 1,
        where: {
          cid: 0,
          sid: 0,
          keyword: '',
          priceOrder: '',
          salesOrder: '',
          news: 0,
          page: 1,
          limit: 5,
          store_id: 0,
          brand_id: '',
        },
        loading: false,
        loadend: false,
        loadTitle: '加载更多',
      }
    },
    mounted() {
		},
    methods: {
      // 选择品牌
      brandChange(val) {
        this.where.brand_id=val
      },
      // 选择分类
      categoryChange(val) {
        this.where.cid = val.cid
        this.where.sid = val.sid
      },
      // 确认提交
      submitFn(val) {
        if (val == 1) {
          this.getProducts(true)
          this.$refs.popup.visible = false
        } else if (val == 2) {
          this.where.brand_id = ""
          this.where.cid = ""
          this.where.sid = ""
          this.getProducts(true)
            this.$refs.popup.visible = false
        }
      },
      // 打开附近门店
      goMap() {
        uni.navigateTo({
          url: "/pages/store/map/index?type=1&storeId="+this.info.id
        })
      },
      // 打开客服
      goKefu() {
        this.getCustomerList()
        this.$refs.kefu.show = true
      },
      // 购物车
      shoppCart() {
        uni.switchTab({
          url: "/pages/order_addcart/order_addcart"
        })
      },
      // 关闭客服
      closeKefu() {
        this.$refs.kefu.show = false
      },
      // 获取客服列表数据
      getCustomerList() {
        getCustomerList(this.where.store_id).then(res => {
          this.customerList = res.data
        })
      },
    	// 去详情页
    			godDetail(item) {
    				this.currentPage = false
    				if (this.promotions_type) {
    					uni.navigateTo({
    						url: `/pages/goods_details/index?id=${item.id}`
    					})
    				} else {
    					goShopDetail(item, this.uid).then(res => {
    						uni.navigateTo({
    							url: `/pages/goods_details/index?id=${item.id}`
    						})
    					})
    				}
    			},
      // 操作
      set_where: function(e) {
        switch (e) {
          case 1:
            this.active = 1
            this.where.priceOrder = ""
            this.where.salesOrder = ""
            this.where.brand_id = ""
            this.price= 0
            break;
          case 2:
            if (this.price == 0) this.price = 1;
            else if (this.price == 1) this.price = 2;
            else if (this.price == 2) this.price = 0;
            if (this.price == 1) {
              this.where.priceOrder = "asc"
            } else if (this.price == 2) {
              this.where.priceOrder = "desc"
            } else {
              this.where.priceOrder = ""
            }
            this.active = 2
            this.stock = 0;

            break;
          case 3:
            if (this.stock == 0) this.stock = 1;
            else if (this.stock == 1) this.stock = 2;
            else if (this.stock == 2) this.stock = 0;

            if (this.stock == 1) {
              this.where.priceOrder = ""
              this.where.salesOrder = "asc"
            } else if (this.stock == 2) {
              this.where.priceOrder = ""
              this.where.salesOrder = "desc"
            } else {
              this.where.salesOrder = ""
            }
            this.active = 3
            this.price = 0
            break;
          case 4:
					  console.log('1111111111');
            this.getStoreCategory()
            this.getStoreBrand()
            this.$refs.popup.visible = true
						this.loadend = false;
						this.loading = false;
            break;
        }
				if(e<4){
					this.loadend = false;
					this.$set(this.where, 'page', 1);
					this.getProducts(true)
				}
      },
      // 商品列表
      getProducts(isPage) {
        let that = this;
        if (that.loadend) return;
        if (that.loading) return;
        if (isPage === true) {
					 that.$refs.waterfallsFlow.refresh();
					 that.where.page = 1;
					 that.$set(that, 'productList', []);
        }
        that.loading = true;
        that.loadTitle = '';
        getProducts(this.where).then(res => {
            	let list = res.data;
      				let productList = that.$util.SplitArray(list, that.productList);
      				let loadend = list.length < that.where.limit;
      				that.loadend = loadend;
      				that.loading = false;
      				that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
      				that.$set(that, 'productList', productList);
      				that.$set(that.where, 'page', that.where.page + 1);
          
        }).catch(err => {
          that.loading = false;
          that.loadTitle = '加载更多'
        });
      },
      // 筛选-分类数据
      getStoreCategory() {
        let data = {
          pid: 0
        }
        getStoreCategory(data).then(res => {
          res.data.map(item => {
            this.$set(item, 'disabled', false)
            this.$set(item, 'current', -1)
            item.children.unshift({
              'id': 0,
              'cate_name': '全部'
            })
          })

          this.storeCategory = res.data
        })
      },
      // 筛选-品牌数据
      getStoreBrand() {
        getStoreBrand(this.where).then(res => {
          this.storeBrand = res.data
        })
      },
      // 触底刷新
      onReachBottom() {

        this.getProducts()

      }
    }
  }
</script>

<style lang="scss">
	page {
	  background-color: #F5F5F5;
	}

  .activeColor {
    color: var(--view-theme) !important;
  }

  .header {
    margin-bottom: 40rpx;

    .header-img {
      width: 100%;
      height: 300rpx;
			display: block;
    }

    .search {
      position: absolute;
			// #ifndef MP
      top: 56rpx;
			// #endif
      left: 20rpx;
			// #ifdef MP
			width: 520rpx;
			// #endif
      // #ifndef MP
      width: 710rpx;
      // #endif
      height: 64rpx;
      background: rgba(255, 255, 255, 0.2800);
      border-radius: 43rpx;
      font-weight: 400;
      color: #FFFFFF;
      font-size: 26rpx;
      line-height: 64rpx;
			&.on{
				background:unset;
			}
			.searchCon{
				width: 100%;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.2800);
				border-radius: 43rpx;
			}
      .icon-xiazai5 {
        margin-left: 32rpx;
        margin-right: 12rpx;
      }
    }

    .address {
      position: absolute;
      top: 160rpx;
      margin: 0 20rpx;
      width: 710rpx;
      height: 192rpx;
      background: #fff;
      border-radius: 14rpx;
      padding: 30rpx 20rpx;
      display: flex;
			justify-content: space-between;

      .left {
        .left-title {
          height: 30rpx;
          line-height: 30rpx;
          display: flex;

          image {
            width: 30rpx;
            height: 28rpx;
          }

          .text {
            font-weight: 600;
            color: #333333;
            font-size: 30rpx;
            margin: 0 10rpx;
						max-width: 390rpx;
          }

          .icon-xiangyou {
            color: #333;
            font-size: 24rpx;
          }
        }

        .time {
          margin: 20rpx 0;
          font-size: 22rpx;
          font-weight: 400;
          color: #666666;
        }

        .distance {
          width: 500rpx;
          font-size: 22rpx;
          color: #666666;
          font-weight: 400;
          .icon-chakanditu {
            margin-right: 8rpx;
            font-size: 28rpx;
            color: #ccc;
          }
          .distance-name {
            display: inline-block;
            width: 286rpx;
            height: 22rpx;
            border-left: 1px solid #000;
            margin-left: 16rpx;
            line-height: 22rpx;
            text-align: left;
            padding-left: 16rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

          }
        }
      }

      .right {
margin-top: 36rpx;
        display: flex;
        font-size: 20rpx;
        color: #333333;

        .kefu {
          margin-right: 30rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .icon-kefu-mendian {
            font-size: 36rpx;
          }
        }
      }

      .goods {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon-gouwuche-mendian {
          font-size: 36rpx;

        }

        .cartNum {
          position: absolute;
          top: -8rpx;
          right: 2rpx;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          font-weight: 500;
          color: #FFFFFF;
          border-radius: 50%;
          background: var(--view-theme);
          border: 1px solid #FFFFFF;
        }

      }
    }
  }

  .goods-list {
    padding: 0 30rpx;
    margin-bottom: 50rpx !important;

  }

  .content {
    height: 100%;

    // margin-bottom: 200rpx;
    .nav {
      padding: 40rpx 50rpx 40rpx 50rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;

      .nav-img {
        width: 15rpx;
        height: 18rpx;
        margin-left: 10rpx;
      }

      .icon-shaixuan {
        font-size: 24rpx;
        margin-right: 10rpx;
      }
    }
  }
  .vip {
    margin: 20rpx 0 10rpx 0;
    .price {
      font-size: 34rpx;
      font-weight: 600;
      color: var(--view-theme);
    }
    .sold {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
    }
  }
	.list {
		padding: 0  20rpx 90rpx 20rpx;
	}

.list .waterList {
  margin-bottom: 60rpx;
		// margin-top: 192rpx;
	}

  .default {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .img {
      width: 414rpx;
      height: 256rpx;
    }

    .text {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
    }
  }
  	.waterfalls {
  		padding: 10rpx 16rpx 16rpx 16rpx;
  		color: #222;
  
  		.name {
  			font-size: 28rpx;
  		}
  
  		.label {
  			font-size: 20rpx;
  			color: var(--view-theme);
  			border-radius: 4rpx;
  			border: 1px solid var(--view-theme);
  			padding: 0 6rpx;
  			display: inline-block;
  			margin-top: 10rpx;
  			margin-right: 10rpx;
  		}
  
  		.money {
  			font-size: 26rpx;
  			font-weight: 700;
  
  			.num {
  				font-size: 34rpx;
  			}
  
  			.nums {
  				font-size: 28rpx;
  			}
  		}
  
  		.vip {
  			font-size: 22rpx;
  			color: #aaa;
  			margin-top: 6rpx;
  
  			.vip-money {
  				font-size: 24rpx;
  				color: #282828;
  				font-weight: bold;
					.icon{
						font-size: 15rpx;
						background: #FF9500;
						color: #fff;
						border-radius: 18rpx;
						padding: 1rpx 6rpx;
						margin-left: 10rpx;
						min-width: 60rpx;
						
						.iconfont {
							font-size: 15rpx;
							margin-right: 5rpx;
						}
						
						&.on {
							background: #333;
							color: #FDDAA4;
							min-width: unset;
						}
					}
  
  				image {
  					width: 46rpx;
  					height: 21rpx;
  					margin-left: 4rpx;
  				}
  			}
  		}
  	}
</style>