zsw-farm-bxg/pages/shop/GoodsList/index.vue

<template>
  <view class="productList" ref="container">
		<view class="header">
			<cu-custom :isBack="true">
				<block slot="backText">
					<image class="backImg" src="../../../static/images/back-btn.png" mode=""></image>
				</block>
				<block slot="content">
					<view class="search acea-row row-between-wrapper" :style="'width:calc('+CustomBarLeft+'px - 57px);'">
						<input v-if="where.keyword" type="text" v-model="where.keyword" :disabled="true">
						<input v-else type="text" v-model="title" :disabled="true">
						<view class="iconfont icon-guanbi" @click="close"></view>
						<!-- <view class="iconfont icon-guanbi" @click="submit"></view> -->
					</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="content" :style="'min-height:calc(100vh - '+CustomBar+'px);'">
			<view class="no-product" v-if="productList.length === 0 && where.page > 1">
				<image class="image" src="@/static/images/no-product.png" mode="widthFix"></image>
				<view class="">嗯？什么也没找到？</view>
				<view class="tip">请试一下其他关键词</view>
			</view>
			<view class="nav-box" :style="'top:'+ CustomBar +'px;'">
				<view class="nav acea-row row-around" v-if="productList.length > 0">
					<view class="item" @click="set_where(0)">
						<view :class="'title ' + (stock === 0 && price === 0? 'active' : '')">综合</view>
					</view>
					<view class="item" @click="set_where(2)">
						<view :class="'title ' + (stock === 2 ? 'active' : '')">销量</view>
					</view>
					<view class="item" @click="set_where(1)">
						<view :class="'title acea-row row-middle ' + (stock === 0 && price ? 'active' : '')">
							<view class="">价格</view>
							<view :class="'jiantou ' + (price?price === 1?'up':'down':'')"></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="list-box" v-if="productList.length > 0">
				<PromotionGood :benefit="productList" />
			
				<Loading :loaded="loadend" :loading="loading"></Loading>
			</view>
			
		</view>
		
		
    <!-- <form @submit.prevent="submitForm">
      <view class="search bg-color-red acea-row row-between-wrapper">
        <view class="input acea-row row-between-wrapper">
          <input placeholder="搜索商品信息" v-model="where.keyword" />
          <text class="iconfont icon-sousuo" @click="submitForm"></text>
        </view>
        <view class="iconfont" :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'" @click="switchTap"></view>
      </view>
    </form> -->
    <!-- <view class="nav acea-row row-middle">
      <view class="item" :class="title ? 'font-color-red' : ''" @click="set_where(0)">{{ title ? title : '默认' }}</view>
      <view class="item" @click="set_where(1)">
        价格
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/horn.png`" v-if="price === 0" />
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/up.png`" v-if="price === 1" />
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/down.png`" v-if="price === 2" />
      </view>
      <view class="item" @click="set_where(2)">
        销量
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/horn.png`" v-if="stock === 0" />
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/up.png`" v-if="stock === 1" />
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/down.png`" v-if="stock === 2" />
      </view>
      down
      <view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view>
    </view> -->
		
    <!-- <view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="!isIntegral">
      <view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'" v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
        <view class="pictrue" :class="Switch === true ? '' : 'on'">
          <image :src="item.image" :class="Switch === true ? '' : 'on'" />
        </view>
        <view class="text" :class="Switch === true ? '' : 'on'">
          <view class="name line1">{{ item.storeName }}</view>
          <view class="money font-color-red" :class="Switch === true ? '' : 'on'">
            ￥
            <text class="num">{{ item.price }}</text>
          </view>
          <view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
            <view class="vip-money">￥{{ item.otPrice }}</view>
            <view>已售{{ item.sales }}件</view>
          </view>
        </view>
      </view>
    </view>
    <view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="isIntegral == 'true'">
      <view @click="goIntegralGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'" v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
        <view class="pictrue" :class="Switch === true ? '' : 'on'">
          <image :src="item.image" :class="Switch === true ? '' : 'on'" />
        </view>
        <view class="text" :class="Switch === true ? '' : 'on'">
          <view class="name line1">{{ item.storeName }}</view>
          <view class="money font-color-red" :class="Switch === true ? '' : 'on'">
            <text class="num">{{ item.integral }}积分</text>
          </view>
          <view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
            <view class="vip-money">￥{{ item.otPrice }}</view> ???
            <view>已售{{ item.sales }}件</view>
          </view>
        </view>
      </view>
    </view> -->
    
    <!-- <view class="noCommodity" style="background-color: #fff" v-if="productList.length === 0 && where.page > 1">
      <view class="noPictrue">
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/noGood.png`" class="image" />
      </view>
    </view> -->
    <!-- <Recommend v-if="productList.length === 0 && where.page > 1" :recommendLoading="recommendLoading" @changeRecommendLoading="changeRecommendLoading"></Recommend> -->
  </view>
</template>
<script>
import Recommend from '@/components/Recommend'
import { getProducts, getProductsIntegral } from '@/api/store'
import Loading from '@/components/Loading'
import PromotionGood from '@/components/PromotionGood';

export default {
  name: 'GoodsList',
  components: {
    Recommend,
    Loading,
		PromotionGood
  },
  props: {},
  data: function() {
    const s = '',
      id = 0,
      title = ''
    return {
			CustomBar: this.CustomBar,
			CustomBarLeft: this.CustomBarLeft,
      hostProduct: [],
      productList: [],
      Switch: true,
      where: {
        page: 1,
        limit: 8,
        keyword: s,
        sid: id, //二级分类id
        news: 0,
        priceOrder: '',
        salesOrder: '',
      },
      title: title && id ? title : '',
      loadTitle: '',
      loading: false,
      loadend: false,
      price: 0,
      stock: 0,
      nows: false,
      recommendLoading: false,
      target: false,
      isIntegral: false
    }
  },
  watch: {
    title() {
      this.updateTitle()
    },
    isIntegral() {
      if (this.isIntegral) {
        uni.setNavigationBarTitle({
          title: '积分商品',
        })
      } else {
        uni.setNavigationBarTitle({
          title: '商品列表',
        })
      }
    },
    $yroute(to) {},
  },
  mounted: function() {
    const { s = '', id = 0, title = '', isIntegral = false } = this.$yroute.query

    this.where.keyword = s
    this.where.isIntegral = isIntegral == 'true' ? 1 : 0
    this.isIntegral = isIntegral
    this.updateTitle()
    this.getProductList()
  },
  onReachBottom() {
    this.recommendLoading = true
    !this.loading && this.getProductList()
  },
  onHide() {},
  methods: {
		close() {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; //上一个页面
			if (prevPage.route == 'pages/shop/GoodSearch/index') {
				prevPage.$vm.search = '';
			}
			this.$yrouter.back();
		},
    changeRecommendLoading(recommendLoading) {
      this.recommendLoading = recommendLoading
    },
    goGoodsCon(item) {
      this.$yrouter.push({
        path: '/pages/shop/GoodsCon/index',
        query: {
          id: item.id,
          isIntegral: this.isIntegral,
        },
      })
    },
    goIntegralGoodsCon(item) {
      this.$yrouter.push({
        path: '/pages/shop/IntegralGoodsCon/index',
        query: {
          id: item.id,
          isIntegral: this.isIntegral,
        },
      })
    },
    updateTitle() {
      uni.setNavigationBarTitle({
        title: this.title,
      })
    },
    getProductList() {
      if (this.loading) {
        return
      }
      this.loading = true
      var that = this
      this.setWhere()
      const { s = '', id = '', title = '' } = this.$yroute.query
      if (s !== this.where.keyword || id !== this.where.sid) {
        this.loadend = false
        this.loading = false
        this.where.page = 1
        this.where.sid = id
        this.title = title && id ? title : ''
        this.nows = false
        this.$set(this, 'productList', [])
        this.price = 0
        this.stock = 0
        // this.getProductList();
      }
      let q = this.where
      let getData = this.isIntegral !== 'true' ? getProducts : getProductsIntegral
      getData(q).then(res => {
        this.loading = false
        if (this.target) {
          this.productList = res.data
		  this.target = false
        } else {
          this.productList.push.apply(this.productList, res.data)
        }
		console.log(this.target)
        this.loadend = res.data.length < this.where.limit //判断所有数据是否加载完成；
        this.where.page = this.where.page + 1
      })
    },
    submitForm: function() {
      this.$set(this, 'productList', [])
      this.where.page = 1
      this.loadend = false
      this.loading = false
      this.getProductList()
    },
    //点击事件处理
    set_where(index) {
      const { s = '', id = 0, title = '', isIntegral = false } = this.$yroute.query;
      switch (index) {
        case 0:
					if(this.stock !== 0 || this.price !== 0) {
						this.price = 0;
						this.stock = 0;
					}
          break
        case 1:
          if (this.price === 0) this.price = 1
          else if (this.price === 1) this.price = 2
          else if (this.price === 2) this.price = 1
          // else if (that.price === 2) that.price = 0
          this.stock = 0
          this.where.keyword = s
          break
        case 2:
          if (this.stock === 0) this.stock = 2
          // if (that.stock === 0) that.stock = 1
          // else if (that.stock === 1) that.stock = 2
          // else if (that.stock === 2) that.stock = 0
          this.price = 0
          this.where.keyword = s
          break
        case 3:
          this.nows = !this.nows
          this.where.keyword = s
          break
        default:
          break
      }
      this.productList = []
      this.$set(this, 'productList', [])
      this.where.page = 1
      this.target = true
      this.loadend = false
      this.getProductList()
    },
    //设置where条件
    setWhere() {
      if (this.price === 0) {
        this.where.priceOrder = ''
      } else if (this.price === 1) {
        this.where.priceOrder = 'asc'
      } else if (this.price === 2) {
        this.where.priceOrder = 'desc'
      }
      if (this.stock === 0) {
        this.where.salesOrder = ''
      } else if (this.stock === 1) {
        this.where.salesOrder = 'asc'
      } else if (this.stock === 2) {
        this.where.salesOrder = 'desc'
      }
      this.where.news = this.nows ? '1' : '0'
    },
    switchTap() {
      this.Switch = !this.Switch
    },
  },
}
</script>
<style scoped lang="less">
// .noCommodity {
//   border-top: 3px solid #f5f5f5;
//   padding-bottom: 1px;
// }

	.productList {
		.backImg {
			height: 62rpx;
      width: 62rpx;
      margin-left: 26rpx;
		}
		.search {
			input {
				width: 376rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;	
			}
			.iconfont {
				font-size: 28rpx;
				color: #999999;
				font-weight: 600;
			}
		}
	}

	.content {
		width: 100%;
		overflow-y: scroll;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		.nav-box {
			width: 100vw;
			padding-top: 4rpx;
			position: fixed;
			left: 0;
			z-index: 5;
			background: #F1F1F1;
		}
		.nav {
			width: 100vw;
			height: 104rpx;
			padding: 32rpx 32rpx 26rpx;
			background: #FFFFFF;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			.item {
				min-width: 66rpx;
				text-align: center;
				position: relative;
				.title {
					font-size: 26rpx;
					font-family: SourceHanSansSCVF;
					font-weight: 400;
					color: #999999;
					line-height: 38rpx;
					.jiantou {
						width: 0rpx;
						height: 0rpx;
						border-top: 0rpx solid transparent;
						border-left: 6rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-right: 6rpx solid transparent;
						margin-left: 4rpx;
					}
					.up {
						border-top: 0rpx solid transparent;
						border-bottom: 10rpx solid #999999;
					}
					.down {
						border-top: 10rpx solid #999999;
						border-bottom: 0rpx solid transparent;
					}
				}
				.active {
					color: #3A3A3C;
					font-weight: 500;
				}
				.title::after {
					display: block;
					content: '';
					width: 100%;
					height: 4rpx;
					background: #2DB5AE;
					position: absolute;
					bottom: 0;
					left: 0;
					opacity: 0;
					transform:scaleX(0);
					transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease;
				}
				.active::after {
					opacity: 1;
					transform: scaleX(1);
				}
			}
		}
		.list-box {
			padding-top: 108rpx;
		}
	}
	
	.no-product {
		padding-top: 116rpx;
		font-size: 34rpx;
		font-weight: 600;
		color: #3A3A3C;
		line-height: 48rpx;
		text-align: center;
		.image {
			width: 446rpx;
			margin: 0rpx auto 24rpx;
		}
		.tip {
			font-size: 13px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #3A3A3C;
			line-height: 19px;
			margin-bottom: 76rpx;
		}
	}
</style>