web-retail-h5/pages/specialArea/list.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <backIcon :diff="diff"></backIcon>
    <view class="index_header">
      <view>{{ titLabel }}</view>
    </view>
    <u-scroll-list
      :indicator="false"
      v-if="itemChildren.length > 1"
      class="tabList_a"
    >
      <view class="tab">
        <view
          v-for="(item, index) in itemChildren"
          :key="index"
          @click="setSpecial(item)"
          v-show="item.isShow"
          :class="[specialArea == item.value ? 'actTab' : 'tab_i']"
        >
          <view>{{ item.label }}</view>
        </view>
      </view>
    </u-scroll-list>
    <view class="index_btm">
      <view class="index_l">
        <view
          v-for="item in oneList"
          :class="['classIfy', oneId == item.pkId ? 'actOne' : '']"
          @click="
            ((oneId = item.pkId),
            getAllGoods(item.pkId),
            getClassIfyTwo(item.pkId))
          "
          :key="item.pkId"
          >{{ item.classifyName }}</view
        >
      </view>
      <view class="index_r">
        <u-scroll-list :indicator="false" class="tabList">
          <view class="tab">
            <view
              v-for="(item, index) in twoList"
              :key="index"
              @click="((twoId = item.pkId), getAllGoods1(item.pkId))"
              :class="[twoId == item.pkId ? 'actTab' : 'tab_i']"
            >
              <view>{{ item.classifyName }}</view>
              <!-- <view :class="[twoId == item.pkId ? 'heng' : 'heng1']"></view> -->
            </view>
          </view>
        </u-scroll-list>
        <view class="search">
          <u--input
            placeholder="请输入商品名称"
            placeholderStyle="font-size:14px;"
            prefixIcon="search"
            shape="circle"
            v-model="waresName"
            border="none"
            @confirm="getAllGoods1()"
            prefixIconStyle="font-size: 22px;color: #909399"
          ></u--input>
        </view>
        <view class="goodList">
          <view
            v-for="item in goodList"
            :key="item.waresCode"
            class="goodList_i"
            @tap="goDetails(item)"
          >
            <view
              class="fly"
              v-show="item.preSaleStatus == 3 || item.isSale == 1"
            ></view>
            <view class="image-container">
              <img :src="item.cover1" class="cover" alt="" />
              <!-- 三角形角标 -->
              <view class="triangle-badge" v-if="item.warnMessage">
                <view
                  class="triangle-badge-text"
                  :class="{
                    'text-2': item.warnMessage.length === 2,
                    'text-3': item.warnMessage.length === 3,
                    'text-4': item.warnMessage.length === 4,
                  }"
                >
                  {{ item.warnMessage }}
                </view>
              </view>
            </view>
            <view class="goodList_ir">
              <view>
                <span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{
                  item.prefixLabelTarget.label
                }}</span>
                {{ item.waresName }}
              </view>
              <view
                class="pv"
                v-if="
                  specialArea != 18 &&
                  specialArea != 13 &&
                  specialArea != 31 &&
                  specialArea != 10
                "
              >
                业绩:{{ item.waresAchieve | numberToCurrency }}
              </view>
              <view class="pv" v-if="specialArea == 10">
                积分可抵扣:{{ item.deductMoney | numberToCurrency }}
              </view>
              <view class="pv" v-if="specialArea == 13">
                BV:{{ item.assAchieve | numberToCurrency }}
              </view>
              <!-- <view class="pv"> 销量:{{ item.sales | seles }} </view> -->
              <view class="goodList_ib">
                <view v-if="specialArea == 31 && userInfo.isMakerSpace == 1">
                  {{ item.vipPrice | numberToCurrency }}
                </view>
                <view
                  v-if="
                    (specialArea == 31 && userInfo.isMakerSpace == 0) ||
                    specialArea != 31
                  "
                >
                  {{ item.waresPrice | numberToCurrency }}
                </view>
                <img
                  @click.stop="addCar(item)"
                  v-show="
                    item.preSaleStatus != 3 &&
                    item.isSale != 1 &&
                    specialArea != 31
                  "
                  src="@/static/images/cart.png"
                  alt=""
                />
                <img
                  @click.stop="addCar(item)"
                  v-show="
                    item.preSaleStatus != 3 &&
                    item.isSale != 1 &&
                    specialArea == 31 &&
                    userInfo.isMakerSpace == 0
                  "
                  src="@/static/images/cart.png"
                  alt=""
                />
              </view>
              <!-- <view class="pv" v-show="specialArea == 31"> 统一零售价:{{ item.retailPrice| numberToCurrency | isLocal}} </view> -->
            </view>
          </view>
          <view class="zhan"></view>
        </view>
      </view>
    </view>
    <u-picker
      :show="isCountry"
      @cancel="isCountry = false"
      @confirm="sureCountry"
      :columns="countryList"
      keyName="label"
    ></u-picker>
    <selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
    <cartBall
      ref="cart"
      :carLength="shopCarLength"
      :specialArea="specialArea"
    ></cartBall>
  </view>
</template>

<script>
import backIcon from '@/components/backIcon.vue'
import cartBall from '@/components/cartBall.vue'
import { mapGetters, mapActions } from 'vuex'
import * as api from '@/config/goods'
import clTabbar from '@/components/cl-tabbar.vue'
import selSpaceGoods from '@/components/selSpaceGoods.vue'
import {
  REGIEST_AREA,
  UPGRADE_AREA,
  REPURCHASE_AREA,
  REISSUE_AREA,
} from '@/util/specialAreaMap'
import { MEMBER_SIGN } from '@/util/common'
import areaProductList from '@/components/area-product-list/index.vue'
import { getAreaGoods } from '@/config/special-area'

export default {
  components: {
    'cl-tabbar': clTabbar,
    backIcon,
    cartBall,
    selSpaceGoods,
  },
  computed: {},
  filters: {
    seles(value) {
      if (value > 999) {
        return 999 + '+'
      } else {
        return value
      }
    },
  },
  data() {
    return {
      specialArea: 1,
      oneList: [],
      oneId: '',
      twoList: [],
      twoId: '',
      goodList: [],
      titLabel: '',
      itemChildren: [],
      diff: 0,
      shopCarLength: false,
      userInfo: {},
      pkCountry: 1,
      pkCountryLabel: '',
      pkCountryImg: '',
      countryList: [],
      isCountry: false,
      waresName: '',
    }
  },
  onLoad(options) {
    if (JSON.parse(options?.children || '[]').length > 0) {
      let arr = []
      if (options.childArea) {
        this.specialArea = options.childArea
        // this.diff = 1
      } else {
        JSON.parse(options?.children || '[]').forEach(item => {
          if (item.isShow) {
            arr.push(item.value)
          }
        })
        this.specialArea = arr[0]
        // this.diff = 0
      }
      if (options.diff) {
        this.diff = options.diff
      }
    } else {
      this.specialArea = options.specialArea
    }

    // this.titLabel = options.label
    // let tempArr = JSON.parse(options?.children || '[]')
    // if (this.specialArea != 18) {
    //   api.menuList().then(res => {
    //     tempArr = tempArr.filter(item =>
    //       res.data.find(ctem => ctem.menuKey == item.name)
    //     )
    //     this.itemChildren = tempArr
    //   })
    // }
    // 修改标题

    // 获取一级分类并获取商品列表
    // this.getClassIfy()

    this.userInfo = uni.getStorageSync('User')
    const areaMap = {
      [REGIEST_AREA.id]: REGIEST_AREA.name,
      [UPGRADE_AREA.id]:
        this.userInfo.memberSign == MEMBER_SIGN.ZERO_LEVEL
          ? '会员专区'
          : UPGRADE_AREA.name,
      [REPURCHASE_AREA.id]: REPURCHASE_AREA.name,
      [REISSUE_AREA.id]: REISSUE_AREA.name,
    }
    this.titLabel = areaMap[this.specialArea]
    uni.setNavigationBarTitle({
      title: this.titLabel,
      success: () => {},
    })
    this.pkCountry = this.userInfo.pkCountry || 1
    this.setSpecial({
      value: this.specialArea,
    })
  },
  onShow() {
    let that = this
    uni.$on('returnData', function (data) {
      that.specialArea = data.value
      that.setSpecial({
        value: data.value,
      })
    })
    // 获取国家
    this.getJScountry()
    this.$nextTick(() => {
      this.$refs.cart.getCar()
    })
  },
  onHide() {
    this.$refs.cart.close()
    this.setSmallCarLength(0)
  },
  beforeDestroy() {
    this.setSmallCarLength(0)
  },
  methods: {
    ...mapActions(['setSmallCarLength', 'setShopCarLength']),
    changeCountry() {
      this.isCountry = true
    },
    sureCountry(e) {
      const { value } = e
      this.pkCountry = value[0].id
      this.pkCountryLabel = value[0].label
      this.pkCountryImg = value[0].img
      this.isCountry = false
      uni.setStorageSync('pkCountry', this.pkCountry + '')
      // 获取分类一级
      this.getClassIfy()
      this.$refs.cart.getCar()
    },
    getJScountry() {
      api.currencyList().then(res => {
        let data = res.data.map(item => {
          return {
            img: item.nationalFlag2,
            id: item.pkId,
            label: item.shortName,
          }
        })
        this.countryList = [data]
        this.countryList[0].forEach(item => {
          if (item.id == this.pkCountry) {
            this.pkCountryLabel = item.label
            this.pkCountryImg = item.img
          }
        })
      })
    },
    goShare() {
      uni.navigateTo({
        url: '/pages/specialArea/share?specialArea=7',
      })
    },
    setSpecial(item) {
      this.specialArea = item.value
      this.getClassIfy()
    },
    addCar(item) {
      let carList = {
        pkCountry: this.pkCountry,
        specialArea: item.specialArea,
        number: 1,
        waresCode: item.waresCode,
        productGroup: item.productGroup,
      }
      api.addShopping(carList).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: '购物车添加成功',
            icon: 'success',
            mask: true,
            duration: 500,
          })
          setTimeout(() => {
            this.$store.dispatch('getCarLength', this.specialArea).then(res => {
              this.shopCarLength = res.data.smallCount
            })
          }, 200)
        }
      })
    },
    getCatLength() {
      this.$store.dispatch('getCarLength', this.specialArea).then(res => {
        this.shopCarLength = res.data.smallCount
      })
    },
    getClassIfy() {
      api
        .classifyList({
          pkCountry: this.pkCountry,
          specialArea: this.specialArea,
          hierarchy: 0,
        })
        .then(res => {
          res.data.unshift({
            classifyName: '全部',
            pkId: '',
          })
          this.oneList = res.data
          this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
          this.getClassIfyTwo(this.oneList[0].pkId)
          this.getAllGoods(this.oneList[0].pkId)
        })
    },
    // 获取分类二级
    getClassIfyTwo(pkId) {
      api
        .classifyList({
          specialArea: this.specialArea,
          pkParent: pkId,
          hierarchy: 1,
          pkCountry: this.pkCountry,
        })
        .then(res => {
          res.data.unshift({
            classifyName: '全部',
            pkId: pkId,
          })
          this.twoList = res.data
          this.twoId = pkId
        })
    },
    getAllGoods(id) {
      getAreaGoods({
        pkCountry: this.pkCountry,
        specialArea: Number(this.specialArea),
        pkAreaClassify: id ? id : '',
      }).then(res => {
        this.goodList = res.data || []
        this.goodList.forEach(item => {
          if (item.waresName.length > 11) {
            item.waresName = item.waresName.substring(0, 11) + '...'
          }
        })
      })
    },
    getAllGoods1(id) {
      getAreaGoods({
        pkCountry: this.pkCountry,
        specialArea: this.specialArea,
        waresName: this.waresName,
        pkAreaClassify: id ? id : this.oneId,
      }).then(res => {
        this.goodList = res.data
        this.goodList.forEach(item => {
          if (item.waresName.length > 11) {
            item.waresName = item.waresName.substring(0, 11) + '...'
          }
        })
      })
    },
    goDetails(item) {
      if (item.preSaleStatus != 3 && item.isSale != 1) {
        uni.navigateTo({
          url:
            '/pages/specialArea/details?waresCode=' +
            item.waresCode +
            '&specialArea=' +
            item.specialArea,
        })
      }
    },
  },
}
</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;
}

.content {
  background: #f9f9f9;
  height: 93vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tabList_a {
}

.index_btm {
  flex: 1; // display: flex;

  .index_l {
    width: 198rpx;
    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;
    position: absolute;
    height: 86vh;
    background: #f2f2f2;
  }

  .index_r {
    // flex: 1;
    background: #fff;
    margin-left: 198rpx; // padding: 20rpx;
    // display: flex;
  }
}

.classIfy {
  padding: 20rpx 20rpx;
  margin: 20rpx 0;
  font-size: 26rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}

.actOne {
  // border-left: 6rpx solid #005BAC;
  color: #fff;
  background: #005bac;
}

.tab {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  margin-top: 20rpx;
}

.tab_i {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #999999;
  margin-right: 28rpx;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f6f6f6;
  color: #666;
  border-radius: 200rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 58rpx;
  box-sizing: border-box;
}

.actTab {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  // color: #005BAC;
  background-color: #005bac;
  color: #fff;
  margin-right: 28rpx;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 200rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 58rpx;
  box-sizing: border-box;
}

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

.heng1 {
  width: 24px;
  height: 2px;
  background: f9f9f9;
  border-radius: 1px 1px 1px 1px;
  margin-top: 4rpx;
}

.heng2 {
  width: 24px;
  height: 2px;
  background: f9f9f9;
  border-radius: 1px 1px 1px 1px;
  margin-top: 4rpx;
}

::v-deep .u-scroll-list {
  padding-bottom: 10rpx;
}

.zhan {
  height: 200px;
}

.goodList {
  padding: 0 20rpx;
  height: 95vh;
  overflow-y: auto;

  .goodList_i {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20rpx 0;
    position: relative;

    .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: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #f82c1a;

        img {
          width: 56rpx;
          height: 56rpx;
        }
      }
    }

    .fly {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      background: #eee;
      opacity: 0.5;
    }
  }

  .cover {
    width: 152rpx;
    height: 152rpx;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10rpx;
  }
}

.pv {
  font-size: 22rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.shareImg {
  position: fixed;
  margin: 14rpx 24rpx;
  z-index: 9999;
  right: 20rpx;
  top: 5rpx;
}

.shareImg1 {
  position: fixed;
  margin: 14rpx 24rpx;
  z-index: 1;
  right: 10rpx;
  top: 10rpx;
  display: flex;
  align-items: center;

  img {
    width: 40rpx;
    height: 30rpx;
    margin-right: 20rpx;
  }
}

.qzbq {
  background: #d61820;
  border-radius: 2px 2px 2px 2px;
  font-size: 10px;
  // font-family: PingFang SC-Semibold, PingFang SC;
  // font-weight: 600;
  color: #ffffff;
  padding: 0px 5px;
  margin-right: 5px;
}

.search {
  margin: 10rpx 20rpx;
  padding: 10rpx;
  background: #eeeeee;
  border-radius: 20px;
  font-size: 14px;
}

.image-container {
  position: relative;
}

.triangle-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 90rpx solid #005bac;
  border-right: 90rpx solid transparent;
  border-radius: 10rpx 0 0 0;
  z-index: 10;
}

.triangle-badge-text {
  position: absolute;
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
  transform: rotate(-45deg);
  transform-origin: center;
  white-space: nowrap;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

/* 2个字样式 */
.triangle-badge-text.text-2 {
  top: -68rpx;
  left: 10rpx;
  font-size: 22rpx;
}

/* 3个字样式 */
.triangle-badge-text.text-3 {
  top: -68rpx;
  left: 4rpx;
  font-size: 20rpx;
}

/* 4个字样式 */
.triangle-badge-text.text-4 {
  top: -64rpx;
  left: 0rpx;
  font-size: 18rpx;
}
</style>