xiamen-sb-uniapp/pages/spare/spare-store.vue

<template>
  <view>
    <view class="u-wrap">
      <view class="fixed-box">
        <!-- 搜索 -->
        <view class="d-flex a-center mt-3 search ">
          <view class="pl-3 flex1">
            <u-input v-model="keyword" placeholder="名称/规格/原厂编号" :clearable="false" />
          </view>
          <view @click="search" class="main-linear d-flex a-center text-color-white f-size-26 j-center search-txt">
            搜索</view>
        </view>
        <!-- 筛选 -->
        <view class="d-flex j-end a-center flex1 my3 screen-box">
          <view class="ml-3  line1" style="" @click="handleScreen">
            <text style="color: #535B67;">类型筛选</text>
            <image src="/static/images/select.png" class="ml-1 w20"></image>
          </view>
        </view>
      </view>

      <view class="page-view">
        <view class="class-item">
          <view class="item-container">
            <!-- 列表 -->
            <view class="d-flex list-box border-radius-3 p3 mb-2" v-for="item in listData" :key="item.id">
              <view class="left d-flex j-center a-center mr-2">
                <image v-if="item.image" :src="$BaseTool.UserUtil.getFileUrl(item.image)" class="bg-color-light img"></image>
                <image v-else :src="spare_default" class="bg-color-light img"></image>
              </view>
              <view class="right d-flex f-column flex1">
                <view class="f-size-30 f-weight-6 one-ellipsis">{{ item.name }}</view>
                <view class="f-size-22 text-color-9 my2 one-ellipsis">
                  {{ item.no }} / {{ item.ggxh }}
                </view>
                <view class="f-size-20 ">
                  <text class="main-color-text mr-1 list-box-item">{{ selectTypeName }}</text>
                </view>
                <view class="d-flex j-between a-center mt-1 text-color-6">
                  <text>单价：￥{{ $BaseTool.Amount.formatter(item.initialValue) }} </text>
                  <text>当前库存：{{ item.num }} </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 弹出层 -->
      <u-popup v-model="show" mode="right" width="600rpx" safe-area-inset-bottom>
        <view class="mx2 py3 popup" style="padding-bottom: 120rpx;">
          <view class="wrap">
            <view class="f-size-30 f-weight-6 py3">一级类别</view>
            <view class="d-flex f-wrap  a-center box">
              <block v-for="item in parentTypeList" :key="item.id">
                <view class="col3">
                  <view class="d-flex j-center a-center border-radius-1 mb-2 py1 item f-size-22" @click="handleSelect(item)" :class="active == item.id?&quot;item_s&quot;:&quot;&quot;">{{ item.name }}
                  </view>
                </view>
              </block>
            </view>
          </view>

          <view class="wrap">
            <view class="f-size-30 f-weight-6 py3">二级类别</view>
            <view class="d-flex f-wrap  a-center box">
              <block v-for="item in middleTypeList" :key="item.id">
                <view class="col3">
                  <view class="d-flex j-center a-center border-radius-1 mb-2 py1 item f-size-22" @click="handleSelectTwo(item)" :class="activeTwo == item.id?&quot;item_s&quot;:&quot;&quot;">
                    {{ item.name }}</view>
                </view>
              </block>
            </view>
          </view>
          <view class="wrap">
            <view v-if="childTypeList.length > 0" class="f-size-30 f-weight-6 py3">三级类别</view>
            <view class="d-flex f-wrap  a-center box">
              <block v-for="item in childTypeList" :key="item.id">
                <view class="col3">
                  <view class="d-flex j-center a-center border-radius-1 mb-2 py1 item f-size-22" @click="handleSelectThree(item)" :class="activeThree == item.id?&quot;item_s&quot;:&quot;&quot;">
                    {{ item.name }}</view>
                </view>
              </block>
            </view>
          </view>
          <!-- 按钮 -->
          <view class="d-flex j-around a-center p-fixed left0 right0 bottom0 bg-color-white py2 button-box">
            <view @click="resetSelect()" class="main-color-text d-flex a-center j-center f-size-30" style="">重置</view>
            <view @click="search()" class="main-linear text-color-white d-flex a-center j-center f-size-30">确认</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import spareDefault from '@/static/images/spare_default.png'
export default {
  data() {
    return {
      goods: [],
      keyword: '',
      selectTypeName: '',
      listData: [],
      status: 'loadmore',
      page: 1,
      active: 0,
      activeTwo: 0,
      activeThree: 0,
      limit: 20,
      parentTypeId: '',
      middleTypeId: '',
      childTypeId: '',
      parentTypeName: '',
      middleTypeName: '',
      childTypeName: '',
      typeId: '',
      spare_default: spareDefault,
      parentTypeList: [],
      middleTypeList: [],
      childTypeList: [],
      storeId: null,
      spareId: null,
      spareName: null,
      price: 0,
      num: 0,
      loadMore: true,
      show: false
    }
  },
  onLoad(option) {
    // this.storeId = JSON.parse(decodeURIComponent(option.storeId))
    if (this.parentTypeList.length == 0) {
      this.$Http
        .querySpareType({
          filter: 1
        })
        .then(res => {
          this.parentTypeList = res.data
          this.parentTypeId = this.parentTypeList[0].id
          this.selectTypeName = this.parentTypeList[0].name
          this.initData()
        })
    }
  },
  onPullDownRefresh() {
    // 请求结束取消刷新
    this.page = 1
    this.loadMore = true
    this.listData = []
    this.initData()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    if (this.loadMore) {
      this.page++
      this.initData()
    }
  },
  methods: {
    /* handleSelect(item) {
				item.selected = !item.selected
			}, */
    handleScreen() {
      this.show = true
    },
    initData() {
      const that = this
      that.status = 'loading'
      this.$Http
        .getSpareBomRecordPage({
          pageNum: that.page,
          pageSize: that.limit,
          typeId: that.typeId,
          keyword: that.keyword,
          dataScope: {
            sortBy: 'desc',
            sortName: 'bom.created_time'
          }
        })
        .then(res => {
          const data = res.data.rows
          if (data && data.length > 0 && data.length < that.limit) {
            that.status = 'nomore'
            that.loadMore = false
          } else if (data.length == that.limit) {
            that.status = 'loadmore'
          } else {
            that.status = 'nomore'
          }
          that.listData = data
        })
    },
    handleSelect(item) {
      this.active = item.id
      this.parentTypeId = item.id
      this.parentTypeName = item.name
      this.selectTypeName = this.parentTypeName
      this.typeId = item.id
      this.$Http
        .querySpareType({
          filter: 2,
          parentId: item.id,
          dataScope: {
            sortBy: 'desc',
            sortName: 'name'
          }
        })
        .then(res => {
          this.middleTypeList = res.data
          this.middleTypeId = null
          this.activeTwo = 0
          this.childTypeList = []
        })
    },
    handleSelectTwo(item) {
      this.activeTwo = item.id
      this.middleTypeId = item.id
      this.middleTypeName = item.name
      this.selectTypeName = this.middleTypeName
      this.typeId = item.id
      this.$Http
        .querySpareType({
          filter: 2,
          parentId: item.id,
          dataScope: {
            sortBy: 'desc',
            sortName: 'name'
          }
        })
        .then(res => {
          this.childTypeList = res.data
        })
    },
    handleSelectThree(item) {
      this.activeThree = item.id
      this.childTypeId = item.id
      this.childTypeName = item.name
      this.selectTypeName = this.childTypeName
      this.typeId = item.id
    },
    search() {
      this.page = 1
      this.show = false
      this.loadMore = true
      this.listData = []
      this.initData()
    },
    resetSelect() {
      this.parentTypeId = ''
      this.middleTypeId = ''
      this.childTypeId = ''
      this.parentTypeName = ''
      this.middleTypeName = ''
      this.childTypeName = ''
      this.typeId = ''
      this.active = 0
      this.activeTwo = 0
      this.activeThree = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-box {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 0 16px;
  z-index: 1000;
}

.u-wrap {
  .list-box {
    box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
    width: 100%;

    .img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    &-item {
      padding: 2rpx 15rpx;
      border-radius: 10rpx;
      background-color: #ffeae5;
      color: #fa5445;
    }
  }

  .search {
    border-radius: 50rpx;
    height: 70rpx;
    width: 100%;
    border: 1px solid #0082ff;

    &-txt {
      height: 70rpx;
      border-radius: 50rpx;
      width: 120rpx;
    }
  }

  .screen-box {
    .line1 {
      background-color: #f2f3f4;
      padding: 3rpx 20rpx;
      border-radius: 10rpx;
    }

    .w20 {
      width: 20rpx;
      height: 16rpx;
    }
  }
}

.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
}

.u-search-box {
  padding: 18rpx 30rpx;
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.u-search-inner {
  background-color: rgb(234, 234, 234);
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
}

.u-search-text {
  font-size: 26rpx;
  color: $u-tips-color;
  margin-left: 10rpx;
}

.u-tab-view {
  width: 200rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #000;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.page-view {
  margin-top: 90px;
  padding: 16rpx;
}

.class-item {
  margin-bottom: 30rpx;
  background-color: #fff;
  padding: 16rpx;
  border-radius: 8rpx;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 24rpx;
  color: $u-main-color;
}

.item-container {
  display: flex;
  flex-wrap: wrap;
}

.thumb-box {
  width: 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20rpx;
}

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}

.main-linear {
  background-color: #0082ff;
}

.popup {
  .button-box {
    view {
      width: 230rpx;
      height: 80rpx;
      border-radius: 50rpx;
    }

    view.main-color-text {
      border: 1px solid #0082ff;
      color: #0082ff;
    }
  }

  .box {
    .item {
      width: 90%;
      background-color: #f2f3f4;
      color: #0f1021;
      height: 70rpx;
    }

    .item_s {
      width: 90%;
      background-color: #0082ff;
      color: #ffffff;
      height: 70rpx;
    }
  }
}
</style>