web-store-retail-h5/pages/specialArea/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <!-- <view class="kuang">
      <view class="kuang_i"
            v-for="(item, index) in zoneList"
            :key="index"
            @tap="goGoodList(item)"
            v-show="item.isShow">
        <view>{{ item.label }}</view>
        <img :src="item.img"
             alt="">
      </view>
    </view> -->
    <view class="goods-sort">
      <view class="goods-flexs">
        <view class="goods-view"
              @click="navTap(item)"
              v-for="item in goodsList.recommendSpecialAreaList "
              v-if="item.waresList!=false">
          <view class="bg-color"></view>
          <view class="goods-top">
            <view class="title">{{item.specialAreaName}}</view>
            <!-- <view class="lables">限时抢</view> -->
          </view>
          <template v-if="item.waresList">
            <view class="goods-cen">
              <view class="goods-list"
                    v-for="(items,indexs) in item.waresList"
                    v-if="indexs<2">
                <view class="goods-content">
                  <view class="goods">
                    <image :src="items.cover1"></image>
                  </view>
                  <!-- <view class="price">
                    {{items.waresPrice  | numberToCurrency | isLocal}}
                  </view> -->
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <cl-tabbar :current="2"></cl-tabbar>
  </view>
</template>

<script>
import * as api from '@/config/goods'
import * as apis from '@/config/index.js'
import clTabbar from '@/components/cl-tabbar.vue'
import * as ban from '@/config/balance.js'

export default {
  components: {
    'cl-tabbar': clTabbar,
  },
  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: 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')
      apis.userIndex().then((res) => {
        // if (userInfo.pkSettleCountry == 1) {
        //   res.data.recommendSpecialAreaList.unshift({
        //     specialArea: 21,
        //     isShare: 1,
        //     specialAreaName: '免费注册',
        //     waresList: res.data.recommendSpecialAreaList[0].waresList,
        //   })
        // }

        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 {
    display: flex;
    padding: 30rpx 30rpx 20rpx 35rpx;
    position: relative;
    flex-wrap: wrap;
    margin-left: -25rpx;
    .bg-color {
      width: 335rpx;
      height: 72rpx;
      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;
      width: 295rpx;
      // height: 180rpx;
      margin-left: 20rpx;
      background: #ffffff;
      border-radius: 15rpx;
      padding: 20rpx 20rpx 10rpx 20rpx;
      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>