pay-customer/src/pages/me/components/AreaFunctional.vue

<template>
  <view>
    <view class="area_functional">
      <view
        v-for="(i, index) in area_functional"
        :key="`items_${index}`"
        class="item"
        @click="handleToPage(i)"
      >
        <view class="icon">
          <image :src="`/static/svg/${i?.icon || ''}.svg`" mode="heightFix" />
        </view>
        <view class="label"> {{ i?.label || '' }} </view>
      </view>
    </view>
    <MyContactButler />
    <view class="house_wallet">
      <view class="item" @click="goToPage('/INDEX/archive_houses/index')">
        <view class="content">
          <view class="title">房屋管理</view>
          <view class="value">
            已绑定<text> {{ useModel?.countHouseData?.value?.house_count || 0 }} </text>个房屋
          </view>
        </view>
        <image src="/static/images/IconHouse.png" mode="heightFix" />
      </view>
      <view class="item" @click="goToPage('/ME/payment_pre_stored/index')">
        <view class="content">
          <view class="title">房屋预缴</view>
          <view class="value">
            已开通<text> {{ useModel?.countHouseData?.value?.prepayment_house_count || 0 }} </text
            >个房屋
          </view>
        </view>
        <image src="/static/images/IconWallet.png" mode="heightFix" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import useModel from '../model'
import MyContactButler from './ContactButler.vue'
import { getIsHouseExist } from '@/common/libraries/IsHouseExist'
const area_functional: any = [
  // {
  //   label: '房屋管理',
  //   icon: 'HouseIcon',
  //   url: '/INDEX/archive_houses/index'
  // },
  {
    label: '我的事项',
    icon: 'IconReview',
    url: '/INDEX/owner_audit_list/index'
  },
  {
    label: '我的活动',
    icon: 'IconEvent',
    url: '/ME/activities_list/index'
  },
  {
    label: '关于我们',
    icon: 'AboutUs',
    url: 'https://mp.weixin.qq.com/s/g-l92Xrzb5pRlGcyS99M3Q',
    type: 'H5'
  },
  {
    label: '意见反馈',
    icon: 'Feedback',
    url: '/ME/feedback/index'
  }
]
const goToPage = (url: string) => {
  if (!getIsHouseExist()) return
  uni.navigateTo({ url: url })
}

const handleToPage = (e: { url: string; type: string }) => {
  if (!getIsHouseExist()) return
  if (e?.type === 'H5' && e?.url) {
    uni.navigateTo({ url: `/pages/web_view/index?web_url=${encodeURIComponent(e?.url)}` })
    return
  }
  if (e?.url) {
    uni.navigateTo({ url: e?.url })
  } else {
    uni.showModal({
      title: '提示',
      content: '该功能在当前项目暂未开放，敬请期待',
      confirmColor: '#0082FA',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.area_functional {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30rpx;
  border-radius: 20rpx;
  color: #3d3d3d;
  font-size: 24rpx;
  padding: 10rpx 0 40rpx 0;
  .item {
    text-align: center;
    position: relative;
    padding-top: 30rpx;
    width: 25%;
    .icon {
      width: 100%;
      height: 42rpx;
      image {
        height: 42rpx;
      }
    }
    .label {
      padding-top: 10rpx;
    }
  }
}
.house_wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 30rpx;
  padding-bottom: 30rpx;
  .item {
    background-color: #fff;
    border-radius: 20rpx;
    width: 330rpx;
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .content {
      padding: 0 0 0 30rpx;
    }
    .title {
      color: #3d3d3d;
      font-size: 28rpx;
      font-weight: 500;
      padding-bottom: 10rpx;
    }
    image {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
    }
    .value {
      color: #999;
      font-size: 24rpx;
      text {
        color: #c45656;
      }
    }
  }
}
</style>