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

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="goods-sort">
      <view class="goods-flexs">
        <view
          class="goods-view"
          @click="navTap(item)"
          v-for="item in goodsList.recommendSpecialAreaList"
          :key="item.pkWares"
        >
          <view class="bg-color"></view>

          <area-product-list
            v-if="item.waresList && item.waresList.length > 0"
            :list="item.waresList"
            :title="item.specialAreaName"
          ></area-product-list>
        </view>
      </view>
    </view>
    <cl-tabbar :current="1"></cl-tabbar>
  </view>
</template>

<script>
import * as api from '@/config/goods'
import { getAreaGoods } from '@/config/special-area'
import * as apis from '@/config/index.js'
import clTabbar from '@/components/cl-tabbar.vue'
import * as ban from '@/config/balance.js'
import areaProductList from '@/components/area-product-list/index.vue'
import RaisedTabbar from '@/components/raised-tabbar.vue'
export default {
  components: {
    'cl-tabbar': RaisedTabbar,
    'area-product-list': areaProductList,
  },
  data() {
    return {
      user: '',
      goodsList: [],
      specialImg: require('@/static/images/two2.jpg'),
      zoneList: [
        {
          label: '注册专区',
          value: 1,
          name: 'regiest',
          children: [
            {
              label: '自营专区',
              value: 1,
              name: 'regiestArea',
              isShow: true,
            },
            {
              label: '注册专区',
              value: 24,
              name: 'ezLearnReg',
              isShow: true,
            },
          ],
        },
        {
          label: '升级专区',
          value: 2,
          name: 'upgrade',
          children: [
            {
              label: '自营专区',
              value: 2,
              name: 'upgradeArea',
              isShow: true,
            },
            {
              label: '升级专区',
              value: 25,
              name: 'ezLearnUp',
              isShow: true,
            },
            {
              label: '海粉专区',
              value: 27,
              name: 'haiFunUpd',
              isShow: true,
            },
          ],
        },
        {
          label: '秒杀专区',
          value: 14,
          name: 'live',
          isShow: true,
          children: [],
        },
        {
          label: '复购专区',
          value: 3,
          name: 'repurchase',
          children: [
            {
              label: '自营专区',
              value: 3,
              name: 'self',
              isShow: true,
            },
            {
              label: '乐学甄选',
              value: 26,
              name: 'ezLearnRep',
              isShow: true,
            },
            {
              label: '免费注册',
              value: 21,
              name: 'haiFans',
              isShow: true,
            },

            {
              label: '复购合作',
              value: 22,
              name: 'cooperation',
              isShow: true,
            },
            {
              label: '秒杀专区',
              value: 14,
              name: 'live',
              isShow: true,
            },
            {
              label: '工具流',
              value: 12,
              name: 'gongju',
              isShow: true,
            },
          ],
        },
        {
          label: '福利专区',
          value: 13,
          children: [],
          name: 'welfare',
        },
        {
          label: '积分专区',
          value: 11,
          children: [],
          name: 'integral',
        },
        {
          label: '重消专区',
          value: 10,
          children: [],
          name: 'rescission',
        },
        {
          label: '专供专区',
          value: 31,
          children: [],
          name: 'wolesaleArea',
        },
        {
          label: '续约专区',
          value: 30,
          children: [],
          name: 'renewalArea',
        },
        {
          label: '创客空间专区',
          value: 28,
          children: [],
          isShow: true,
          name: 'makerArea',
        },
        {
          label: '架构管理',
          value: 6,
          name: 'frame',
          children: [
            {
              label: '安置架构',
              value: 6,
              name: 'architecture',
              isShow: true,
            },
            {
              label: '推荐架构',
              value: 7,
              name: 'recommend',
              isShow: true,
            },
          ],
        },
        {
          label: '分享专区',
          value: 7,
          name: 'share',
          children: [
            {
              label: '海粉分享',
              value: 7,
              name: 'hiFans',
              isShow: true,
            },
            {
              label: '免费注册',
              value: 21,
              name: 'haiFans',
              isShow: true,
            },
          ],
        },
        {
          label: '创客礼包',
          value: 18,
          isShow: true,
          children: [
            {
              label: '创客礼包',
              value: 18,
              isShow: true,
              children: [],
            },
            {
              label: '赋能礼包',
              value: 19,
              isShow: true,
              children: [],
            },
          ],
        },
      ],
    }
  },
  onLoad() {
    // this.getMenuList()
    this.getGoodsInfo()
  },
  onShow() {
    this.user = uni.getStorageSync('User')
    // user.registerShare
  },
  methods: {
    goUrl() {
      ban.agreementName().then(res => {
        if (res.data == 0) {
          uni.navigateTo({
            url:
              '/pages/specialArea/list?label=续约专区' +
              '&specialArea=30' +
              '&children=[]',
          })
        } else {
          uni.showModal({
            title: '提示',
            content: '请先进行实名认证',
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/pages/selfService/realName/realName',
                })
              }
            },
          })
        }
      })
    },
    navTap(item) {
      if (item.isShare) {
        uni.navigateTo({
          url: '/pages/specialArea/share?specialArea=21',
        })
        return false
      } else {
        let tapx = -1
        this.zoneList.forEach((items, index) => {
          if (items.value == item.specialArea) {
            tapx = index
          }
        })
        if (tapx == -1) {
          this.zoneList.forEach((items, index) => {
            items.children.forEach(ctem => {
              if (ctem.value == item.specialArea) {
                if (item.specialArea == 21) {
                  uni.navigateTo({
                    url:
                      '/pages/specialArea/haIndex?label=' +
                      item.specialAreaName +
                      '&specialArea=21',
                  })
                } else {
                  uni.navigateTo({
                    url:
                      '/pages/specialArea/list?label=' +
                      items.label +
                      '&specialArea=' +
                      items.value +
                      '&childArea=' +
                      item.specialArea +
                      '&children=' +
                      JSON.stringify(items.children),
                  })
                }
              }
            })
          })
        } else {
          if (item.specialArea == 30) {
            this.goUrl()
          } else {
            uni.navigateTo({
              url:
                '/pages/specialArea/list?label=' +
                item.specialAreaName +
                '&specialArea=' +
                item.specialArea +
                '&children=' +
                JSON.stringify(this.zoneList[tapx].children),
            })
          }
        }
      }
    },
    getGoodsInfo() {
      let userInfo = uni.getStorageSync('User')
      getAreaGoods().then(res => {
        this.goodsList = res.data
        this.$forceUpdate()
      })
    },
    getMenuList() {
      api.menuList().then(res => {
        res.data.forEach(item => {
          this.zoneList.forEach(ctem => {
            if (ctem.name == item.menuKey) {
              ctem.isShow = true
            }
            if (ctem.children.length > 0) {
              ctem.children.forEach(stem => {
                if (stem.name == item.menuKey) {
                  stem.isShow = true
                }
              })
            }
          })
        })
        this.$forceUpdate()
      })
    },
    goGoodList(item) {
      uni.navigateTo({
        url:
          '/pages/specialArea/list?specialArea=' +
          item.value +
          '&label=' +
          item.label +
          '&children=' +
          JSON.stringify(item.children),
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f2f2f2;
  // padding: 0 20rpx;
  min-height: 94vh;
}
.kuang {
  padding-top: 28rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.kuang_i {
  background: #ffffff;
  border-radius: 20px;
  padding: 46rpx 23rpx;
  margin-bottom: 25rpx;
  width: 42%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    width: 55rpx;
    height: 55rpx;
  }
}

.goods-sort {
  padding-bottom: 130rpx;
  .goods-flexs {
    padding: 30rpx 20rpx 20rpx;
    position: relative;
    .bg-color {
      width: 100%;
      background: linear-gradient(
        -180deg,
        rgba(255, 226, 226, 0.85) 0%,
        rgba(254, 240, 229, 0.45) 38%
      );
      border-radius: 15rpx 15rpx 0 0;
      position: absolute;
      top: 0;
      left: 0rpx;
    }
    .goods-view {
      position: relative;
      background: #ffffff;
      border-radius: 15rpx;
      margin-bottom: 20rpx;
      .goods-top {
        z-index: 1;
        position: relative;
        display: flex;
        .title {
          color: #333;
          font-size: 32rpx;
          font-weight: bold;
        }
        .lables {
          height: 28rpx;
          background: #f82c1a;
          border-radius: 10rpx;
          line-height: 24rpx;
          font-size: 22rpx;
          padding: 5rpx 15rpx;
          color: #fff;
          max-width: 100rpx;
          margin: 5rpx 0 0 10rpx;
        }
      }
    }
    .lefts {
      margin-left: 15rpx;
    }
  }
  .goods-cen {
    display: flex;
    margin-top: 20rpx;
    justify-content: space-between;
  }
  .goods-list {
    // display: flex;
    margin-right: 20rpx;
  }
  .goods-content {
    width: 140rpx;
    text-align: center;
    .goods {
      image {
        width: 140rpx;
        height: 140rpx;
      }
    }
  }
  .price {
    height: 40rpx;
    line-height: 40rpx;
    background: #fde9e9;
    border-radius: 14rpx;
    color: #e7141a;
    font-size: 22rpx;
    text-align: center;
    width: max-content;
    padding: 0 10rpx;
    margin: 0 auto;
  }
}
</style>