yunshengtai-uniapp/pages/life/index.vue

<template>
  <view class="productSort">
    <view class="page-top-box" :class="isFixed == true ? 'on' : ''">
      <view class="top-box acea-row row-between-wrapper">
        <view class="top-box-l acea-row row-middle">
          <image src="../../static/images/localtion.png"></image>
          <text>武汉</text>
        </view>
        <view class="cart-btn-box" @click="goShoppingCart()">
          <image src="../../static/images/cart.png"></image>
        </view>
      </view>
      <div class="index">
        <view class="header acea-row row-center-wrapper">
          <view @click="goGoodSearch()" class="search acea-row row-middle">
            <text class="iconfont icon-xiazai5"></text>搜索商品
          </view>
        </view>
      </div>
    </view>
    <view class="category-tab-box">
      <scroll-view class="scroll-view_H" scroll-x="true">
        <view
					v-for="item in categoryList" 
					:key="item.id"
					@click="tabClick(item)"
					:class="sid == item.id ? 'category-item category-item-active' : 'category-item'"
				>
				{{item.cateName}}
				</view>
      </scroll-view>
    </view>
    <view class="warter-box">
      <!-- <view class="headline">
				<image src="../../static/images/rec-title.png" mode=""></image>
			</view> -->
      <u-waterfall v-model="flowList" ref="uWaterfall">
        <template v-slot:left="{ leftList }">
          <view
            class="warter"
            v-for="(item, index) in leftList"
            :key="index"
            @tap="toGoodsDetail(item.id)"
          >
            <image
              class="warter-img"
              :src="item.image"
              :index="index"
              mode="widthFix"
            ></image>
            <view class="goodsinfo-box">
              <view class="title line2"> {{ item.storeName }} </view>
              <view class="price-box acea-row row-between-wrapper">
                <text class="price">￥{{ item.price }}</text>
                <text class="old-price">￥{{ item.price }}</text>
              </view>
            </view>
          </view>
        </template>
        <template v-slot:right="{ rightList }">
          <view
            class="warter"
						style="margin-left: 30rpx;"
            v-for="(item, index) in rightList"
            :key="index"
            @tap="toGoodsDetail(item.id)"
          >
            <image
              class="warter-img"
              :src="item.image"
              :index="index"
              mode="widthFix"
            ></image>
            <view class="goodsinfo-box">
              <view class="title line2"> {{ item.storeName }} </view>
              <view class="price-box acea-row row-between-wrapper">
                <text class="price">￥{{ item.price }}</text>
                <text class="old-price">￥{{ item.otPrice }}</text>
              </view>
            </view>
          </view>
        </template>
      </u-waterfall>
      <u-loadmore
        bg-color="rgb(240, 240, 240)"
        :status="loadStatus"
        @loadmore="addRandomData"
      ></u-loadmore>
    </view>
    <!-- <tabbar :current="currentTabIndex" @click="tabBarClick"></tabbar> -->
  </view>
</template>
<script>
import { getCategory, getProducts, getArticle, getActivity, getSecondCategory } from "@/api/store";
import { trim } from "@/utils";
import { mapGetters } from "vuex";
import tabbar from "../../tabbarComponent/tabbar";
import vSwiper from "@/components/vSwiper.vue";
const app = getApp();
export default {
  components: {
    tabbar,
    vSwiper,
  },
  name: "GoodsClass",
  computed: mapGetters(["userInfo"]),
  props: {},
  data: function () {
    return {
      category: [],
      navActive: 0,
      search: "",
      lock: false,
      menuHeight: app.globalData.menuHeight,
      navHeight: app.globalData.navHeight,
      menuTop: app.globalData.menuTop,
      currentTabIndex: 3,
      flowList: [],
      isFixed: false,
      loadStatus: "loadmore",
      page: 1,
      limit: 10,
      isLoad: true, //是否还有更多
			categoryList: [{id: 0, cateName: '全部'}], //分类列表
			sid: 0, //分类id
      articleList: [],
      active: 1,
      show: false,
      activity: [],
    };
  },
  watch: {
    "$yroute.query.id": function (n) {
      if (n) {
        this.activeCateId(n);
      }
    },
  },
  onShareAppMessage() {
  	return {
  		title: '禅易云生态',
  		path: '/pages/life/index',
  		success(res) {
  			uni.showToast({
  				title: '分享成功',
  			})
  		},
  		fail(res) {
  			uni.showToast({
  				title: '分享失败',
  				icon: 'none',
  			})
  		},
  	}
  },
  mounted: function () {
		this.getSecondCategory().then(()=>{
			this.getProducts();
		})
  },
  onReachBottom() {
    if (this.isLoad) {
      this.page = this.page + 1;
      this.getProducts();
    }
  },
  onPullDownRefresh() {
    wx.showNavigationBarLoading();
    this.isLoad = true;
    this.page = 1;
		this.sid = this.categoryList[0].id;
    // this.getActivity();
    this.clear().then(() => {
      this.getProducts();
    });
  },

  methods: {
    toAritcleList() {
      this.$yrouter.push("/pages/life/articleList/index");
    },
    async clear() {
      this.$refs.uWaterfall.clear();
    },
    tabBarClick(index) {
      this.currentTabIndex = index;
    },
    goShoppingCart() {
      this.$yrouter.push("/pages/shop/ShoppingCart/index");
    },
    goGoodSearch() {
      this.$yrouter.push("/pages/shop/GoodSearch/index");
    },
    goGoodsList(child) {
      this.$yrouter.push({
        path: "/pages/shop/GoodsList/index",
        query: { id: child.id, title: child.cateName },
      });
    },
    toGoodsDetail(id) {
      this.$yrouter.push({
        path: "/pages/shop/GoodsCon/index",
        query: { id: id },
      });
    },
    activeCateId(n) {
      let index = 0;
      n = parseInt(n);
      if (!n) return;
      this.category.forEach((cate, i) => {
        if (cate.id === n) index = i;
      });
      if (index !== this.navActive) {
        this.asideTap(index);
      }
    },
    loadCategoryData() {
      getCategory().then((res) => {
        this.category = res.data;
        this.$nextTick(() => {
          if (this.$yroute.query.id) {
            this.activeCateId(this.$yroute.query.id);
          }
        });
      });
    },
    getActivity() {
      getActivity().then((res) => {
        this.articleList = res.data.articleList;
        this.activity = res.data.activityList;
      });
    },
    toActiveDetail(e) {
      let id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: "/pages/activity/detail/index?id=" + id,
      });
    },
    tabClick(i) {
      this.sid = i.id;
			this.page = 1;
			this.isLoad = true;
			this.flowList = [];
			this.$refs.uWaterfall.clear();
			this.getProducts();
    },
    async getProducts() {
      this.loadStatus = "loading";
      getProducts(
				{ 
					page: this.page, 
					limit: this.limit ,
					sid: this.sid
				}
			).then((res) => {
        // console.log(res)
        if (this.page > 1) {
          this.flowList = this.flowList.concat(res.data);
        } else {
          this.flowList = res.data;
        }
        if (this.limit <= res.data.length) {
          //分页数等于返回值的length说明还有
          this.isLoad = true;
        } else {
          this.isLoad = false;
          this.loadStatus = "nomore";
        }
        wx.hideNavigationBarLoading();
        uni.stopPullDownRefresh();
				console.log(this.flowList,'flowList')
      });
    },
		async getSecondCategory(){
			let res = await getSecondCategory();
			this.categoryList = [ ...this.categoryList, ...res.data ]
			// console.log(this.categoryList,'categoryList')
		},
		
    submitForm: function () {
      var val = trim(this.search);
      if (val) {
        this.$yrouter.push({
          path: "/pages/shop/GoodsList/index",
          query: { s: val },
        });
        setTimeout(() => (this.search = ""), 500);
      }
    },
    asideTap(index) {
      this.navActive = index;
    },
    alertMessage(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
      });
    },
  },
  beforeDestroy: function () {
    // document.removeEventListener("scroll", this.onScroll, false);
  },
};
</script>
<style lang="scss" scoped>
</style>

<style lang="less" scoped>
.productSort {
  // height: 100%;
  // padding-bottom: 200rpx;
  background: #eeeeee !important;
  position: relative;
}

.page-top-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #fff;
  padding: 0 30rpx 20rpx;
  box-shadow: 0px -6px 20px rgba(0, 0, 0, 0.11);
  .top-box {
    .top-box-l {
      font-size: 32rpx;
      color: #000;
      font-weight: 500;
      image {
        width: 26rpx;
        height: 30rpx;
        display: block;
        margin-right: 10rpx;
      }
    }
    .cart-btn-box {
      width: 50rpx;
      height: 50rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .index {
    height: 96rpx;
    .header {
      height: 68rpx;
      position: static;
      padding: 0;
      margin-top: 34rpx;
      .search {
        background-color: #eeeeee;
        border-radius: 8rpx;
      }
    }
  }
}
.category-tab-box {
  width: 100%;
  height: 108rpx;
  line-height: 108rpx;
  // margin-bottom: 30rpx;
  padding-top: 160rpx;
	position: relative;
  .scroll-view_H {
    width: 100%;
		position: fixed;
		top: 160rpx;
		left: 0;
		padding-left: 30rpx;
		z-index: 999;
		background: #fff;
		white-space: nowrap;
    .category-item {
      display: inline-block;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #999;
      margin-right: 40rpx;
      &.category-item-active {
        color: #ff6d31;
        font-size: 32rpx;
        font-weight: 500;
        position: relative;
        &::after {
          content: "";
          width: 100%;
          height: 8rpx;
          border-radius: 6rpx;
          display: block;
          position: absolute;
          bottom: -24rpx;
          left: 0;
          background: #ff7942;
        }
      }
    }
  }
}
.warter-box {
  width: 100%;
  padding: 126rpx 24rpx 190rpx 24rpx;
  .u-waterfall {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .u-column {
      .warter {
        width: 336rpx !important;
        border-radius: 10rpx;
        background-color: #ffffff;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.06);
        margin-bottom: 20rpx;
        image {
          width: 100%;
          display: block;
        }
        .goodsinfo-box {
          width: 100%;
          padding: 12rpx 16rpx;
          .title {
            font-size: 28rpx;
            font-weight: 500;
            color: #1d1d1d;
            width: 100%;
            height: 80rpx;
          }
          .price {
            font-size: 28rpx;
            font-weight: bold;
            line-height: 40rpx;
            color: #ff7942;
          }
          .old-price {
            font-size: 20rpx;
            line-height: 28rpx;
            color: #bfbfbf;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
.banner-img-box {
  width: 100%;
  padding: 220rpx 40rpx 32rpx;
  .img-box-l {
    width: 324rpx;
    height: 400rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .img-box-r {
    width: 324rpx;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // align-items: ;
    image {
      width: 324rpx;
      height: 190rpx;
    }
  }
}
.goods-list-box {
  width: 100%;
  padding: 0 30rpx;
  .goods-list-item {
    width: 100%;
    .goods-type-box {
      image {
        width: 94rpx;
        height: 94rpx;
      }
      .t-word {
        font-size: 36rpx;
        color: #222;
        font-weight: 600;
      }
    }
    .goods-list {
      width: 100%;
      .goods-item {
        width: 335rpx;
        background: #fff;
        margin-right: 10rpx;
        margin-bottom: 30rpx;
        border-radius: 10rpx;
        overflow: hidden;
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);
        image {
          width: 100%;
          height: 278rpx;
        }
      }
      .goods-item:nth-child(2n) {
        margin-right: 0;
      }
      .goods-desc-box {
        width: 100%;
        padding: 16rpx;
        font-size: 24rpx;
        .goods-name {
          line-height: 34rpx;
        }
        .price {
          font-size: 28rpx;
          color: #e5270f;
          line-height: 40rpx;
          margin-bottom: 26rpx;
        }
      }
    }
  }
}
</style>