index.vue

<template>
  <view class="s-c">
    <CustomNavBar
      :commonNav="false"
      :title="t('pholder.allMall')"
      :titleColor="'#ffffff'"
      :arrowLeftColor="'#ffffff'"
    >
      <template v-slot:right>
        <text style="color: #ffffff; font-size: 26rpx;" @tap="linkToAllStore">
          {{ t('maintenance.monitor.project.indexStatus.all') }}
        </text>
      </template>
    </CustomNavBar>
    <view style="padding: 28rpx;">
      <view class="tag" :style="`padding-top: ${navHeight}px`">
        <view class="search-b">
          <uv-input v-model="searchVal" :placeholder="t('app.common.search')" prefixIconStyle="color:#6d778f" prefixIcon="search" border="none"
            customStyle="background-color:#F2F3F6;border-radius:8rpx;padding:8rpx 20rpx"
            placeholder-style="font-size:26rpx;color:#6d778f;margin-top:3rpx" @change="searchValChange" />
          <text @tap="linkToTagPage" v-if="pageOptions.hasStore === '1'">+{{ t('table.tag') }}</text>
          <!-- #ifdef MP-WEIXIN -->
          <text style="color: #EEF0F3;" v-if="pageOptions.hasStore === '1'">|</text>
          <text @tap="linkToAllStore">{{ t('pholder.allMall') }}</text>
          <!-- #endif -->
        </view>
        <view class="tag_list" v-if="tagInfo.list.length > 0">
          <view class="tag_list_item" v-for="item in tagInfo.list" :key="item.id">
            <text>{{item.labelName}}</text>
            <uv-icon name="close-circle" size="14" color="#6d778f" @tap="handleTagClose(item.id)" />
          </view>
        </view>
  
        <view class="tag_title">
          <text v-for="(levelId, levelIndex) in levelList" :key="levelId" class="tag_title_text"
            @tap="handleBackLevel(levelIndex)">
            {{ getLevelText(levelId) }}
          </text>
        </view>
      </view>
      <view class="v-l">
        <scroll-view scroll-y="true" style="height: 100%;">
          <view class="v-l-item" v-for="item in displayList" :key="item.type + item.id" @tap="handleClickItem(item)">
            <!-- 					<view class="circle" :class="{'circle-active': checkedId === `${item.type}${item.id}` }"
              v-if="pageOptions.chooseGroup==='1'">
              <view class="circle-dot"></view>
            </view> -->
            <image class="v-l-item-img" :src="renderDisplayImage(item)" mode=""></image>
            <view class="v-l-item-text">
              <text>{{item.name}}</text>
              <text v-if="item.type !== 'store'"> ({{ item.mallNum }})</text>
            </view>
            <view class="v-l-item-next" v-if="item.children && item.children.length >0" @tap.stop="toNext(item)">
              <image class="v-l-item-next-img" src="/static/tabbar/next.png" mode=""></image>
              <text class="v-l-item-next-text">{{ t('app.common.nextLevel') }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- <uv-button v-if="pageOptions.chooseGroup==='1'" @tap="handleCheck" style="margin-top: 20rpx;" type="primary">确定</uv-button> -->
  </view>
</template>

<script setup>
  // @tap="handleLinkTo('/pages/mall-group/tag')"
  import CustomNavBar from '@/components/CustomNav.nvue';
    import {
    useNav
  } from '@/hooks'
  import accountImg from '@/static/tabbar/account.png'
  import storeImg from '@/static/tabbar/store.png'
  import moreImg from '@/static/tabbar/more.png'
  import levelImg from '@/static/tabbar/level.png'

  import {
    onLoad,
    onNavigationBarButtonTap,
    onPageScroll
  } from '@dcloudio/uni-app'
  import {
    computed,
    ref
  } from 'vue'
  import {
    getAccountGroupApi,
    getUserAccountGroupApi,
    getMallByGroupAndLabelApi
  } from '@/api'
  import {
    getStageObj
  } from '@/utils';
  import{
    t
  } from '@/plugins/index.js'

  // 获取group
  const account = getStageObj('account')
  const user = getStageObj('user')
  const {navHeight} = useNav()
  
  // 滚动相关
  const scrollTop = ref(0)
  
  // 监听页面滚动
  onPageScroll((e) => {
    scrollTop.value = e.scrollTop
    // #ifdef APP-NVUE
    scrollTop.value = e.detail.scrollTop
    // #endif
  })


  /******************  选择相关  ********************/
  const checkedId = ref('')
  const checkedItem = ref({})
  const handleCheck = () => {
    uni.$emit('mallSelect', checkedItem.value)
    uni.navigateBack({
      delta: 1
    })
  }
  const handleClickItem = (item) => {
    // 启用集团和分组选择功能时，点击选择
    if (pageOptions.value.chooseGroup === '1') {
      checkedId.value = `${item.type}${item.id}`
      checkedItem.value = item
      handleCheck()
    } else {
      // 否则直接跳到下一级
      handleTapDisplayItem(item)
    }
  }



  /******************  搜索功能相关  ********************/
  const searchVal = ref('')
  const searchValChange = () => {
    console.log(searchVal.value);
  }

  /******************  数据跳转相关  ********************/
  // 跳转到更多
  onNavigationBarButtonTap((e) => {
    linkToAllStore()
  })
  const linkToAllStore = ()=>{
    if (pageOptions.value.hasStore === '0') {
      return uni.showToast({
        icon: 'none',
        title: t('app.common.onlySelectAccountOrGroup')
      })
    }
    handleLinkTo('/subPackages/accountGroup/pages/mall-group/all')
  }
  
  // 跳转数据
  const handleLinkTo = (url) => {
    uni.navigateTo({
      url
    })
  }

  /******************  标签数据相关  ********************/
  /**
   * options 页面配置项数据
   * 	--chooseGroup:false  // 是否选择分组
   */
  const pageOptions = ref({
    chooseGroup: '0', // 0不选择，1:选择
    hasStore: '1' // 0:没有store数据，1:有store数据
  })

  onLoad((options) => {
    uni.setNavigationBarTitle({
      title: t('pholder.allMall')
    })
    // 判断是否使用默认数据
    if (options && Object.keys(options).length > 0) {
      // 启用开启的数据
      pageOptions.value = {
        ...pageOptions.value,
        ...options
      }
    }
    initStoreData()
    uni.$on('tagInfo', res => {
      tagInfo.value = res
      initStoreData()
    })
  })
  // 所有的标签数据
  const tagInfo = ref({
    list: [],
    idList: []
  })
  // 携带当前页面标签跳转到标签选择页
  const linkToTagPage = () => {
    const url = tagInfo.value.idList.length > 0 ? `?idList=${JSON.stringify(tagInfo.value.idList)}` : ''
    handleLinkTo('/subPackages/accountGroup/pages/mall-group/tag' + url)
  }
  // 关闭某个标签数据时，重置数据，重新调列表、组装
  const handleTagClose = (id) => {
    const index = tagInfo.value.idList.findIndex(elId => elId === id)
    tagInfo.value.list.splice(index, 1)
    tagInfo.value.idList.splice(index, 1)
    initStoreData()
  }

  /******************  大区、门店相关  ********************/
  const levelList = ref([-1])
  const displayList = computed(() => {
    const lastLevelIndex = levelList.value.length - 1
    const levelLast = levelList.value[lastLevelIndex] // id

    // 如果searchVal || 标签有值， 只展示门店列表
    if (searchVal.value || tagInfo.value.idList.length > 0) {
      return storeDataSource.value?.filter(item => item.name?.includes(searchVal.value)) || []
    }

    if (levelLast === -1) {
      return groupStoreSourceData.value
    } else {
      return storeDataMap.value[levelLast]?.children || []
    }
  })
  const getLevelText = (id) => {
    if (id === -1) {
      return t('app.title.enterprise')
    }
    return ` / ${storeDataMap.value[id]?.name}`
  }
  // 返回上层数据结构
  const handleBackLevel = (levelIndex) => {
    levelList.value.splice(levelIndex + 1)
  }
  // 到下一级
  const toNext = (item) => {
    levelList.value.push(`${item.type}_${item.id}`)
  }
  // 点击有下一级的大区时直接跳转，点击门店表示选中，点击没有下一级的大区弹出提示框
  const handleTapDisplayItem = (item) => {
    if (item.type === 'group' || item.type === 'account') {
      if (item.children && item.children.length > 0) {
        toNext(item)
      } else {
        uni.showToast({
          icon: 'none',
          title: t('app.common.noMoreNextLevel')
        })
      }
    } else {
      uni.$emit('mallSelect', item)
      uni.navigateBack({
        delta: 1
      })
      // 返回并且返回account数据
    }
  }
  // 展示图标
  const renderDisplayImage = (item) => {
    if (item.type === 'account') {
      return accountImg
    }
    if (item.type === 'store') {
      return storeImg
    }
    if (item.pid === -1) {
      return levelImg
    }
    return moreImg
  }
  // 全量原始数据
  const storeDataSource = ref([])
  const groupStoreSourceData = ref([])
  const initStoreData = async () => {
    try {
      uni.showLoading({
        title: t('echartsTitle.loading')
      })
      // 重置level
      levelList.value = [-1]
      const {
        data: groupData
      } = await getUserAccountGroupApi({
        accountId: account.id,
        userId: user.id
      })

      // 获取门店
      let {
        data: storeData
      } = await getMallByGroupAndLabelApi({
        accountId: account.id,
        labelIds: tagInfo.value.idList,
        groupId: -1
      })
      
      if (pageOptions.value.hasStore === '0') {
        storeData = []
      }

      storeData.forEach(sItem => {
        sItem.type = 'store'
      })
      storeDataSource.value = storeData

      // 单独设置门店管理员方式：
      const rootStore = groupData.length === 0 ? storeData: storeData.filter(sItem => sItem.groupId === -1)
      
      const allData = [...buildTree(groupData, storeData), ...rootStore]
      const mallNum = allData.reduce((sum, curr) => {
        return sum + (curr.type === 'group' ? curr.mallNum : 1)
      }, 0)
      

      // 设置原始数据
      groupStoreSourceData.value = [{
        ...account,
        mallNum,
        type: 'account',
        children: allData
      }]

      // 设置原始数据map结构
      storeDataMap.value = {}
      await getStoreDataMap(groupStoreSourceData.value)

    } catch (e) {
      console.log(e)
    } finally {
      uni.hideLoading()
    }
  }
  // 用来展示下一级数据
  const storeDataMap = ref({})
  const getStoreDataMap = (list) => {
    list.forEach(item => {
      if (item.type === 'group' || item.type === 'account') {
        storeDataMap.value[`${item.type}_${item.id}`] = item;
        if (item.children && item.children.length > 0) {
          getStoreDataMap(item.children);
        }
      }
    });
  }

  // 组装成新树
  function buildTree(regions, stores) {
    return regions.map(el => {
      const storeList = stores.filter(sEl => sEl.groupId === el.id)
      return {
        ...el,
        children: el.children && el.children.length > 0 ? [...buildTree(el.children, stores), ...
          storeList
        ] : [...
          storeList
        ]
      }
    })
  }
</script>

<style lang="scss" scoped>
  .s-c {
    /* #ifdef H5 */
    height: calc(100vh - 44px);
    /* #endif */
    /* #ifndef H5 */
    height: 100vh;
    /* #endif */
    // padding: 0rpx 0rpx 28rpx 0rpx;
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
  }

  .search-b {
    display: flex;
    align-items: center;
    justify-content: space-between;

    text {
      font-size: 28rpx;
      color: #3277FB;
      text-align: center;
      padding-left: 20rpx;
    }
  }

  .tag {
    background-color: #fff;

    &_title {
      margin-top: 28rpx;

      &_text {
        font-weight: bold;
        font-size: 28rpx;
        color: #202328;

        &:active {
          color: #3277FB;
        }
      }
    }

    &_list {
      padding-top: 28rpx;
      display: flex;
      gap: 16rpx;
      flex-wrap: wrap;

      &_item {
        display: flex;
        gap: 12rpx;
        background-color: #F2F3F6;
        border-radius: 6rpx;
        align-items: center;
        height: 48rpx;
        padding: 0 12rpx;

        text {
          color: #202328;
          font-size: 26rpx;
        }
      }
    }
  }

  .v-l {
    flex: 1;
    min-height: 0;

    &-item {
      height: 92rpx;
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #EEF0F3;

      &:active {
        background-color: #f2f3f6;
      }

      &-img {
        min-width: 40rpx;
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;

      }

      &-text {
        flex: 1;
        font-size: 28rpx;
        color: #202328;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &-next {
        min-width: 120rpx;
        margin-left: 16rpx;
        display: flex;
        align-items: center;

        &-img {
          width: 26rpx;
          height: 26rpx;
          margin-right: 12rpx;
        }

        &-text {
          font-size: 24rpx;
          color: #202328;
        }
      }
    }
  }

  .circle {
    border-radius: 50%;
    border: 2rpx solid #B6BBC7;
    padding: 6rpx;
    margin-right: 20rpx;

    .circle-dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
    }

  }

  .circle-active {
    border-color: #3277FB;

    .circle-dot {
      background-color: #3277FB;
    }
  }
</style>