xiangan/pages/service/index.vue

<template>
  <view class="service-page">
    <!-- 物业管家 -->
    <view class="service-section">
      <view class="section-header">
        <text class="section-title">物业管家</text>
      </view>
      <view class="service-grid">
        <view
          v-for="(service, index) in propertyServices"
          :key="index"
          class="service-item"
          @click="navToWithLogin(service)"
        >
          <view class="service-icon">
            <u-icon :name="service.icon" size="60rpx"/>
          </view>
          <text class="service-name">{{ service.name }}</text>
        </view>
      </view>
    </view>
    <!-- 便民服务 -->
    <view class="service-section">
      <view class="section-header">
        <text class="section-title">便民服务</text>
      </view>
      <view class="service-grid">
        <view
          v-for="(service, index) in lifeServices"
          :key="index"
          class="service-item"
          @click="handleServiceClick(service)"
        >
          <view class="service-icon">
            <u-icon :name="service.icon" size="60rpx"/>
          </view>
          <text class="service-name">{{ service.name }}</text>
        </view>
      </view>
    </view>
    <Login ref="Login" @done="getUserData"/>
    <custom-tabbar :current="1"/>
  </view>
</template>

<script>
import CustomTabbar from "@/components/customTabbar.vue";
import {getUserInfo} from "@/util/user";
import {userInfoReq} from "@/api/user";
import Login from "@/components/Login.vue";

export default {
  components: {Login, CustomTabbar},
  data() {
    return {
      propertyServices: [
        {id: 1, name: '物业缴费', icon: '/static/物业费.png', path: '/pages/user/property-bill'},
        {id: 2, name: '远程开门', icon: '/static/一键开门.png', path: '/userPages/pages/remote-door'},
        {id: 3, name: '报事报修', icon: '/static/报修管理备份2x.png', path: '/servicePages/pages/fix'},
        {id: 4, name: '投诉建议', icon: '/static/物业费.png', path: '/servicePages/pages/suggest'}
      ],
      lifeServices: [
        {name: '生活缴费', icon: '/static/20-缴费记录.png', path: '/servicePages/pages/pay'},
        {name: '社区育儿', icon: '/static/亲子活动.png', appId: 'wx40a5129e2d1158dd'},
        {name: '交管12123', icon: '/static/交警.png', appId: 'wx49a80525eebd2583'},
        // {id: 4, name: '租赁中心', icon: '/static/租赁资产.png', appId: 'wx40a5129e2d1158dd'},
        {name: '餐饮服务', icon: '/static/餐饮.png', path: '/servicePages/pages/food'},
        {name: '常用快递', icon: '/static/快递.png', path: '/servicePages/pages/express'},
        {name: '掌上银行', icon: '/static/银行卡-01.png', path: '/servicePages/pages/bank'},
        {name: '保险服务', icon: '/static/保险.png', appId: 'wx276554f0da6b6589'},
        {name: '安居客', icon: '/static/物业费.png', appId: 'wx099e0647f9a4717d'},
        {name: 'e出行', icon: '/static/交通出行.png', path: '/servicePages/pages/car'},
        {name: '常用工具', icon: '/static/工具.png', path: '/servicePages/pages/tools'},
        {name: '健康运动', icon: '/static/跑步.png', appId: 'wxc96dc7ebd9bf61e8'},
        {name: '国务院客户端', icon: '/static/服务.png', appId: 'wxbebb3cdd9b331046'},
        {name: '快装小哥', icon: '/static/快装小哥.png', appId: 'wx9ff023eedfe35bd8'}
      ],
      isLogin: false,
      userData: null,
    }
  },
  methods: {
    handleServiceClick(service) {
      if (service.path) {
        uni.navigateTo({url: service.path})
      } else if (service.appId) {
        uni.navigateToMiniProgram({
          appId: service.appId
        })
      } else {
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        })
      }
    },
    navToWithLogin(item) {
      if (this.isLogin) {
        if (this.userData.wechatUser.isAudit === 3) {
          this.$toast('请先完成认证')
          setTimeout(() => {
            this.$jump('/pages/user/auth')
          }, 1500)
        } else {
          if (this.userData.wechatUser.isAudit === 0)
            this.$toast('认证审核中')
          else {
            if (item.dev) return this.$toast('功能维护中')
            else this.$jump(item.path)
          }
        }
      } else {
        this.$refs.Login.open()
      }
    },
    async getUserData() {
      const {data} = await userInfoReq()
      this.userData = data
      this.isLogin = true
    }
  },
  onShow() {
    if (getUserInfo().token) this.getUserData()
  },
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>