interest-purchase/src/pages/goods/goods.vue

<!--
 * @Descripttion: 订货tabber
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-03-25 15:55:15
 * @LastEditors: dream
 * @LastEditTime: 2021-03-31 14:10:13
-->
<template>
	<view class="goods-main">
    <iph-header />
    <view class="goods-search-area">
      <u-search
        v-model="keyword"
        placeholder="请输入商品名称"
        bg-color="#F5F5F5"
        search-icon-color="#BABABA"
        placeholder-color="#999999"
        :show-action="false"
      ></u-search>
    </view>
    <view class="main u-flex u-col-top" :style="{ height: `${mainHeight}px` }">
      <view class="main-left">
        <iph-left-mune v-model="currentCateVal" :list="cateList" />
      </view>
      <scroll-view class="main-right u-flex-1" scroll-y>
        <block v-for="(item, index) in goodList" :key="index">
          <view class="u-p-b-48">
            <iph-good-card
              :showType="1"
              :value="item"
              :isShowEmpty="!item.stock"
              @cardClick="toGoodDetail"
            />
          </view>
        </block>
        <iph-empty :show="!goodList.length" :type="1" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
import IphHeader from '@/components/iphHeader.vue'
import IphLeftMune from '@/components/iphLeftMenu.vue'
import IphGoodCard from '@/components/iphGoodCard.vue'
import IphEmpty from '@/components/iphEmpty.vue'

export default {
  components: { IphHeader, IphLeftMune, IphGoodCard, IphEmpty },
  name: 'goods',
  data () {
    return {
      searchHeight: 0, // 搜索区域高度
      currentCateVal: 1,
      cateList: [{
        value: 1,
        label: '包材'
      }, {
        value: 2,
        label: '调料'
      }, {
        value: 3,
        label: '面粉'
      }],
      goodList: [{
        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
        astrict: '1件起订',
        name: '华硕天选',
        spce: '一件',
        warehouse: '云东仓',
        salesPrice: 468,
        originalPrice: 480,
        stock: 400
      }, {
        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
        astrict: '1件起订',
        name: '两行文案两行文案两行文案两行文案两行文案两行文案两行文案两',
        spce: '一件',
        warehouse: '云东仓',
        salesPrice: 468,
        stock: 0
      }]
    }
  },
  computed: {
    mainHeight () {
      const system = this.$store.state.systemStore.systemInfo
      const height = system.windowHeight - system.statusBarHeight - this.searchHeight - 48
      return height
    }
  },
  onReady () {
    const view = uni.createSelectorQuery().in(this).select('.goods-search-area')
    view.fields({
      size: true
    }, data => {
      this.searchHeight = data.height
    }).exec()
  },
  methods: {
    toGoodDetail () {
      uni.navigateTo({
        url: '/pageSubs/goods/detail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-main {
  .goods-search-area {
    padding: 16px 24px 36px;
    background-color: $iph-standby-bg;
  }
  .main {
    box-sizing: border-box;
    width: 100%;
    .main-left {
      box-sizing: border-box;
      height: 100%;
    }
    .main-right {
      @extend .main-left;
      padding: 0 24px;
      background-color: $iph-standby-bg;
    }
  }
}
</style>