web-base-h5/pages/specialArea/haIndex.vue

<template>
  <view class="content"
    > 
    <backIcon :diff="diff"></backIcon>
    <cartBall :carLength="shopCarLength" :specialArea="specialArea"></cartBall>
    <view class="index_header">
      <view>{{ titLabel }}</view>
    </view>
    <!-- <view class="shareImg" v-if="specialArea == 21" @click="goShare">
      <img src="@/static/images/serach_999.png" alt="">
    </view> -->
    <view class="zhan"></view>
    <view class="contain">
      <view class="c_left">
        <view v-for="(item, index) in oneList" :key="index">
          <view
            :class="[oneId == item.pkId ? 'c_left_tt' : 'c_left_t']"
            class="c_left_t"
            @tap="getOclass(item.pkId)"
          >
            <view>{{ item.title }}</view>
            <u-icon
              name="arrow-right"
              v-show="oneId != item.pkId"
              size="13"
            ></u-icon>
            <u-icon
              name="arrow-down"
              v-show="oneId == item.pkId"
              color="#fff"
              size="13"
            ></u-icon>
          </view>
          <transition name="fade">
            <view class="c_left_b" v-show="oneId == item.pkId">
              <view
                v-for="(ctem, cndex) in twoList"
                :key="cndex"
                class="c_left_b_i"
              >
                <view
                  :class="[twoId == ctem.pkId ? 'actTab' : 'tab_i']"
                  @tap="getTwo(ctem)"
                >
                  <view>{{ ctem.title }}</view>
                </view>
              </view>
            </view>
          </transition>
        </view>
      </view>
      <view class="c_right">
        <view class="c_right_tt">
          <scroll-view
            :scroll-left="howLeft"
            scroll-x="true"
            @scroll="scroll"
            class="c_right_t"
          >
            <view
              v-for="item in threeList"
              :class="[threeId == item.pkId ? 'actTab1' : 'tab_i1']"
              @click="getThree(item)"
              :id="'a' + item.pkId"
              :key="item.pkId"
              >{{ item.title }}</view
            >
          </scroll-view>
          <view class="c_right_p" @tap="openPop">
            <u-icon name="arrow-down" size="18"></u-icon>
          </view>
        </view>
        <view class="typeList">
          <view class="typeL_l">
            <view @tap="selTab(0)" :class="[selVal == 0 ? 'actSel' : '']"
              >综合</view
            >
            <view
              @tap="selTab(1)"
              :class="['disFlex', selVal == 1 ? 'actSel' : '']"
              >{{ '价格' }}
              <u-icon
                :color="selVal == 1 ? '#E03030' : ''"
                :name="isDao ? 'arrow-down-fill' : 'arrow-up-fill'"
                size="12"
              ></u-icon>
            </view>
            <view
              @tap="selTab(2)"
              :class="['disFlex', selVal == 2 ? 'actSel' : '']"
              >{{ '销量' }}
              <u-icon
                :color="selVal == 2 ? '#E03030' : ''"
                :name="isDao1 ? 'arrow-down-fill' : 'arrow-up-fill'"
                size="12"
              ></u-icon>
            </view>
          </view>
          <view class="typeL_r">
            <view class="shareImg" v-if="specialArea == 21" @click="goShare">
              <img src="@/static/images/sx.png" alt="" />
            </view>
          </view>
        </view>
        <view class="goodList">
          <view
            v-for="item in goodList"
            :key="item.waresCode"
            class="goodList_i"
            @tap="goDetails(item)"
          >
            <img :src="item.cover1" class="cover" alt="" />
            <view class="goodList_ir">
              <view>
                {{ item.waresName }}
              </view>
              <view class="pv" v-if="specialArea != 18">
                业绩:{{ item.waresAchieve }}
              </view>
              <view class="pv" v-if="specialArea == 13">
                BV:{{ item.assAchieve }}
              </view>
              <view class="goodList_ib">
                <view>
                  {{ item.waresPrice | numberToCurrency | isLocal }}
                </view>
                <img
                  @click.stop="addCar(item)"
                  src="@/static/images/cart.png"
                  alt=""
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-popup :show="topShow" mode="top" @close="close">
        <view class="topFlex">
          <view>{{ twoTit }}</view>
          <view @tap="close"> <u-icon name="arrow-up" size="18"></u-icon></view>
        </view>
        <view class="btmFlex">
          <view
            v-for="item in threeList"
            :class="[threeId == item.pkId ? 'actTab2' : 'tab_i2']"
            @click="getThree(item)"
            :key="item.pkId"
            >{{ item.title }}</view
          >
        </view>
      </u-popup>

      <u-popup
        :show="rightShow"
        mode="right"
        @close="rightShow = false"
        :closeOnClickOverlay="false"
      >
        <view class="rightPopup">
          <view class="popup_top">
            <view>{{ '搜索' }}</view>
            <view class="top_red" @click="rightShow = false">{{ '返回' }}</view>
          </view>
          <view class="typesBox">
            <view class="typeTitle">
              {{ '商品名称' }}
            </view>
            <view class="choiceBox">
              <view class="flex_btn">
                <u--input
                  :placeholder="'请输入商品名称'"
                  v-model="waresName"
                  border="none"
                ></u--input> </view
            ></view>
          </view>
          <view class="typesBox">
            <view class="typeTitle">
              {{ '自定义价格区间' }}
            </view>
            <view class="choiceBox">
              <view class="flex_btn">
                <u--input
                  :placeholder="'最低价格'"
                  v-model="startPrice"
                  border="none"
                ></u--input>
              </view>
              <view style="color: #666"> — </view>
              <view class="flex_btn">
                <u--input
                  :placeholder="'最高价格'"
                  v-model="endPrice"
                  border="none"
                ></u--input>
              </view>
            </view>
          </view>
          <view class="footer">
            <view class="footer_l" @tap="reset">{{ '清空筛选条件' }}</view>
            <view class="footer_r" @tap="getAllGoods">{{ '确定' }}</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import backIcon from '@/components/backIcon.vue'
import clTabbar from '@/components/cl-tabbar.vue'
import * as api from '@/config/goods'
import cartBall from '@/components/cartBall.vue'

export default {
  components: {
    'cl-tabbar': clTabbar,
    backIcon,
    cartBall,
  },
  data() {
    return {
      isDao: true,
      isDao1: true,
      selVal: 0,
      waresName: '',
      startPrice: '',
      endPrice: '',
      howLeft: 0,
      topShow: false,
      rightShow: false,
      title: '',
      // 是否显示返回按钮
      isBack: true,
      backColor: 'rgba(165, 42, 42, 0)',
      isKong: false,
      shareImg: require('../../static/images/share.png'),
      addCarImg1: require('../../static/images/addCar1.png'),
      addCarImg2: require('../../static/images/addCar2.png'),
      specialArea: 21,
      goodsList: [],
      source: 0,
      sourceList: [],
      oneList: [],
      oneId: '',
      twoList: [],
      twoId: '',
      threeList: [],
      threeId: '',
      itemChildren: [],
      titLabel: '',
      twoTit: '',
      timeIndex: 0,
      dataShow: false,
      value1: '',
      goodList: [],
      diff: 0,

      shopCarLength: 0,
    }
  },
  onLoad(options) {
    console.log(
      '%c [ options ]-216',
      'font-size:13px; background:#31d3a2; color:#75ffe6;',
      options
    )
    // this.getAllGoods()
    // 获取海粉渠道
    // this.getSource()
    this.getClassIfy()
    // this.itemChildren = JSON.parse(options.children)
    this.titLabel = '直供专区'
    this.diff = Number(options.diff) || 0
    // let pages = getCurrentPages()
    //   let prevPage = pages[pages.length - 3]

    //   if (prevPage&&prevPage.route == 'pages/index/index') {
    //     this.diff = 1
    //   }else{
    //     this.diff =0
    //   }
  },
  onShow() {},
  methods: {
    addCar(item) {
      let carList = {
        specialArea: 21,
        number: 1,
        source: 0,
        productGroup: item.productGroup,
        pkId: item.pkId,
      }
      api.addShopping(carList).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: '购物车添加成功',
            icon: 'success',
            mask: true,
          })
          setTimeout(() => {
            this.$store.dispatch('getCarLength', this.specialArea).then(res => {
              this.shopCarLength = res.data.smallCount
            })
          }, 200)
        }
      })
    },
    getDate(e) {
      if (this.timeIndex == 1) {
        this.queryParams.endDate = formatMsToDate(e.value)
      } else {
        this.queryParams.startDate = formatMsToDate(e.value)
      }
      this.dataShow = false
    },
    openDate(index) {
      this.timeIndex = index
      this.dataShow = true
    },
    scroll() {
      // this.howLeft
    },
    reset() {
      this.isDao = true
      this.isDao1 = true
      this.selVal = 0
      this.waresName = ''
      this.startPrice = ''
      this.endPrice = ''
    },
    rightClose() {
      this.rightShow = false
    },
    rightOpen() {
      this.rightShow = true
    },
    close() {
      this.topShow = false
    },
    selTab(index) {
      if (index == 1 && this.selVal == index) {
        this.isDao = !this.isDao
      }
      if (index == 2 && this.selVal == index) {
        this.isDao1 = !this.isDao1
      } else {
        this.selVal = index
      }
      this.getAllGoods()
    },
    openPop() {
      console.log(
        '%c [ 11 ]-117',
        'font-size:13px; background:#9aac91; color:#def0d5;',
        11
      )
      this.topShow = true
    },
    goShare() {
      this.rightOpen()
      // uni.navigateTo({
      //   url: '/pages/specialArea/share?specialArea=21',
      // })
    },
    setSpecial(item) {
      if (item.value == 21) {
      } else {
        // uni.$emit('returnData', item)
        // uni.navigateBack(1)
      }
    },
    getSource() {
      api.jxhhSource(1).then(res => {
        this.sourceList = res.data
      })
    },
    goSeach() {},
    getOclass(pkId) {
      this.twoId = ''
      if (this.oneId == pkId) {
        this.oneId = ''
      } else {
        this.oneId = pkId

        this.twoList = []
        this.getClassIfyTwo(pkId)
      }
    },
    getTwo(item) {
      this.twoId = item.pkId
      this.twoTit = item.title
      this.threeId = ''
      let arr = []
      if (this.twoId == '') {
        let twoIds = this.twoList.map(item => {
          return item.pkId
        })
        this.trimSpace(twoIds).then(res => {
          arr = res
          console.log(
            '%c [ arr ]-348',
            'font-size:13px; background:#38190d; color:#7c5d51;',
            arr
          )
          this.getClassIfyThree(arr)
        })
      } else {
        console.log(2)
        arr = [this.twoId]
        console.log(
          '%c [ arr ]-348',
          'font-size:13px; background:#38190d; color:#7c5d51;',
          arr
        )
        this.getClassIfyThree(arr)
      }
    },
    getThree(item) {
      this.threeId = item.pkId
      // let local
      // var query = uni.createSelectorQuery().in(this).select(`#a${this.threeId}`)
      //   query.boundingClientRect(res => {
      //     local = res
      //   }).exec()
      //   this.$nextTick(function() {
      //     this.howLeft = local.left
      //   });
      this.getAllGoods()
      // this.getAllGoods1()
    },
    getClassIfy() {
      api
        .optionList({
          parentIds: [0],
        })
        .then(res => {
          this.oneList = res.data
          this.oneId = this.oneList[0].pkId
          this.getClassIfyTwo(this.oneList[0].pkId)
        })
    },
    // 获取分类二级
    getClassIfyTwo(pkId) {
      api
        .optionList({
          parentIds: [pkId],
        })
        .then(res => {
          res.data.unshift({
            title: '全部',
            pkId: '',
          })
          this.twoList = res.data
          let twoIds = res.data.map(item => {
            return item.pkId
          })
          this.twoTit = this.twoList[0].title
          this.trimSpace(twoIds).then(res => {
            this.getClassIfyThree(res)
          })
        })
    },
    // 获取分类三级
    getClassIfyThree(twoIds) {
      api
        .optionList({
          parentIds: twoIds,
        })
        .then(res => {
          res.data.unshift({
            title: '全部',
            pkId: '',
          })
          this.threeList = res.data
          this.threeId = this.threeList[0].pkId
          this.getAllGoods()
          // threeList
        })
    },
    getAllGoods() {
      this.rightShow = false
      api
        .sharingWares({
          pkCategoryOne: this.oneId,
          priceSorting: this.isDao ? 1 : 2,
          salesSorting: this.isDao1 ? 1 : 2,
          pkCategoryTwo: this.twoId,
          pkCategoryThree: this.threeId,
          waresName: this.waresName,
          startPrice: this.startPrice,
          endPrice: this.endPrice,
        })
        .then(res => {
          this.goodList = res.rows
          this.total = res.total
          this.goodList.forEach(item => {
            if (item.waresName.length > 13) {
              item.waresName = item.waresName.substring(0, 13) + '...'
            }
          })
        })
    },
    trimSpace(array) {
      return new Promise((resolve, reject) => {
        for (var i = 0; i < array.length; i++) {
          //这里为过滤的值
          if (
            array[i] == '' ||
            array[i] == null ||
            typeof array[i] == 'undefined' ||
            array[i] == ''
          ) {
            array.splice(i, 1)
            i = i - 1
          }
        }
        resolve(array)
      })
    },
    goDetails(item) {
      uni.navigateTo({
        url:
          '/pages/shareArea/haiDetails?source=' +
          this.source +
          '&specialArea=21' +
          '&pkId=' +
          item.pkId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.index_header {
  background: #fff;
  font-size: 18px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #333333;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  z-index: 100000000;
}
.content {
  background: #f9f9f9;
  // height: 100vh;
  display: flex;
  flex-direction: column;
}
.zhan {
  height: 50px;
}
.index_btm {
  flex: 1;
  display: flex;
  height: 78vh;
  .index_l {
    background: #f2f2f2;
    width: 180rpx;
    padding: 10rpx 0;
    font-size: 11px;
    font-family:
      PingFang SC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #000000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .index_r {
    flex: 1;
    background: #fff;
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
    view {
      display: inline-block;
      margin: 0 40rpx 20rpx 0;
    }
  }
}
.classIfy {
  padding: 0rpx 20rpx;
  margin: 20rpx 0;
  font-size: 26rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.actOne {
  color: #005bac;
  border-left: 6rpx solid #ed1d25;
}
.tabList {
}
.tab {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  margin-top: 10rpx;
  background-color: #f9f9f9;
}
.tab1 {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.heng {
  width: 24px;
  height: 2px;
  background: #ed1d25;
  border-radius: 1px 1px 1px 1px;
  margin-top: 4rpx;
}

.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 24rpx;
  .goods_item {
    background: #fff;
    margin-bottom: 20rpx;
    border-radius: 10px;
    overflow: hidden;
    width: 49%;
  }
  .goods_item_bom {
    padding: 6rpx 20rpx 10rpx 20rpx;
    min-height: 248rpx;
    box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
    // border-radius: 10px;
    margin-top: -8px;
  }
  .goodImg {
    height: 274rpx;
    width: 100%;
    display: block;
  }
  .shareImg {
    img {
      height: 54rpx;
      width: 54rpx;
    }
  }
  .tit1_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;
  }
  .tit1 {
    font-size: 24rpx;
    font-weight: 600;
    color: #333333;
  }
  .tit2 {
    font-size: 18px;
    font-weight: 400;
    color: #b42b2a;
  }
  .tit3 {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
  }
  .tit4 {
    font-size: 11px;
    font-weight: 600;
    color: #999999;
  }
  .disFlex {
    // width: 278px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6rpx;
  }
  .qzbq {
    color: #f33131;
  }
  .md {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    // padding-bottom: 10px;
    img {
      height: 22px;
      width: auto;
      margin-right: 10px;
      margin-bottom: 5px;
    }
  }
  .addCar {
    border: 1px solid #f33131;
    border-radius: 6px;
    font-size: 12px;
    font-family:
      PingFang SC-Semibold,
      PingFang SC;
    font-weight: 600;
    color: #f33131;
    text-align: center;
    padding: 6rpx 0;
  }
}
.shareImg {
  // position: fixed;
  // margin: 14rpx 24rpx;
  // z-index: 1000000000;
  // right: 10rpx;
  // top: 10rpx;
  padding-top: 10rpx;
  img {
    width: 36rpx;
    height: 36rpx;
  }
}
.contain {
  // display: flex;
  // height: 100%;
  position: relative;
}
.c_left {
  width: 188rpx;
  background: #f2f2f2;
  font-size: 14px;
  position: absolute;
  left: 0;
  height: 93vh;
  overflow-y: auto;
  .c_left_tt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 88rpx;
    padding: 10rpx 20rpx;
    background: #005bac;
    color: #fff;
  }
  .c_left_t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 88rpx;
    padding: 10rpx 20rpx;
  }
  .c_left_b {
    background: #fff;
    padding: 10rpx 20rpx;

    .c_left_b_i {
      margin: 10rpx 0;
    }
  }
}
.c_right {
  background: #fff;
  height: 93vh;
  padding-left: 188rpx;
  .c_right_t {
    white-space: nowrap;
    width: 80%;
    // display: flex;
    // align-items: center;
    padding: 18rpx;
  }
  .c_right_tt {
    position: relative;
    border-bottom: 2rpx solid #eeeeee;
  }
}
// .fade-enter-active,
// .fade-leave-active {
//   transition: .3s;
// }

// .fade-enter,
// .fade-leave-to {
//   opacity: 0;
// }
.tab_i {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.actTab {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #005bac;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 6rpx 0;
}
.tab_i1 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  display: inline-block;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 20rpx;
  margin-right: 10rpx;
  background: #f6f6f6;
  border-radius: 20px;
}
.actTab1 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #005bac;
  white-space: nowrap;
  display: inline-block;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 10rpx 20rpx;
  margin-right: 10rpx;
}
.c_right_p {
  position: absolute;
  padding: 18rpx;
  right: 10rpx;
  top: 10rpx;
  background: #f6f6f6;
  border-radius: 20px;
}

.contain ::v-deep .u-transition {
  top: 50px !important;
}
.contain ::v-deep .u-popup__content {
  // border-radius: 0 0 10px 10px;
}
.topFlex {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 20rpx 0 20rpx;
}
.btmFlex {
  display: flex;

  padding: 20rpx 20rpx 0 20rpx;
  flex-wrap: wrap;
}
.tab_i2 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background: #f6f6f6;
  border-radius: 20px;

  margin-bottom: 20rpx;
}
.actTab2 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #005bac;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.rightPopup {
  width: 645rpx;
  .popup_top {
    padding: 25rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    border-bottom: 2rpx solid #eeeeee;
    .top_red {
      color: #005bac;
    }
  }

  .typesBox {
    margin-top: 40rpx;

    .typeTitle {
      padding: 0 24rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
    }

    .choiceBox {
      padding: 0 12rpx;
      display: flex;
      margin-top: 17rpx;
      align-items: center;
      // flex-wrap: wrap;

      .flex_btn {
        background-color: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14rpx 20rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 17rpx 5rpx;
        width: 100%;
      }

      .selectbtn {
        background-color: #005bac;
        color: #ffffff;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;

    display: flex;
    align-items: center;
    width: 100%;
    .footer_l {
      width: 327rpx;
      text-align: center;
      background: #f3f3f3;
      height: 100rpx;
      line-height: 100rpx;
    }
    .footer_r {
      width: 327rpx;
      text-align: center;
      background: #005bac;
      height: 100rpx;
      line-height: 100rpx;
      color: #fff;
    }
  }
}
.goodList {
  padding: 0 20rpx;
  // height: 90vh;
  overflow-y: auto;
  .goodList_i {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20rpx 0;
    .goodList_ir {
      margin-left: 20rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      .goodList_ib {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #005bac;
        img {
          width: 56rpx;
          height: 56rpx;
        }
      }
    }
  }
  .cover {
    width: 152rpx;
    height: 152rpx;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10rpx;
  }
}
.typeList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 30rpx 10rpx 20rpx;
  color: #666;
  .typeL_l {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .typeL_r {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
  }
}
.disFlex {
  display: flex;
  align-items: center;
}
.actSel {
  color: #e03030;
}
</style>