ruoyi-miniapp/pages/owner.vue

<template>
  <cs-page :selected="4" isTab title="个人中心">
    <scroll-view class="owner-container" scroll-y>
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center" @tap="edit">
        <view class="wd-flex wd-flex-col" style="gap: 4px">
          <view class="wd-flex wd-flex-row" style="gap: 8px">
            <text class="wd-font-800">{{ user.realName }}</text>
            <u-tag :text="user.dept.name" shape="circle" bgColor="#000" borderColor="#000" size="mini"></u-tag>
          </view>
          <view class="moblie">{{ user.mobile }}</view>
        </view>
        <view class="wd-flex wd-flex-row" style="gap: 10px">
          <u-avatar :src="user.avatar"></u-avatar>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="section wd-flex wd-flex-row wd-justify-between">
        <view class="wd-flex wd-flex-row" style="gap: 8px">
          <u--image src="/static/images/owner/message.png" width="20px" height="20px" mode="aspectFit"></u--image>
          <text class="wd-font-800">消息通知</text>
        </view>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="section wd-flex wd-flex-row wd-justify-between">
        <view class="wd-flex wd-flex-row" style="gap: 8px">
          <u--image src="/static/images/owner/edit.png" width="20px" height="20px" mode="aspectFit"></u--image>
          <text class="wd-font-800">执法记录</text>
        </view>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="section wd-flex wd-flex-row wd-justify-between">
        <view class="wd-flex wd-flex-row" style="gap: 8px">
          <u--image src="/static/images/owner/list.png" width="20px" height="20px" mode="aspectFit"></u--image>
          <text class="wd-font-800">政策法规</text>
        </view>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="section wd-flex wd-flex-row wd-justify-between" @click="invite">
        <view class="wd-flex wd-flex-row" style="gap: 8px">
          <u--image src="/static/images/owner/phone.png" width="20px" height="20px" mode="aspectFit"></u--image>
          <text class="wd-font-800">企业入驻</text>
        </view>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="section wd-flex wd-flex-row wd-justify-between">
        <view class="wd-flex wd-flex-row" style="gap: 8px">
          <u--image src="/static/images/owner/phone.png" width="20px" height="20px" mode="aspectFit"></u--image>
          <text class="wd-font-800">内部专线</text>
        </view>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <text>点击呼叫</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </scroll-view>
  </cs-page>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserProfile } from '@/api/system/user.js'
export default {
  data() {
    return {
      user: {}
    }
  },
  computed: {},
  onShow() {
    this.init()
  },
  methods: {
    init() {
      getUserProfile().then(res => {
        this.user = res.data
      })
    },
    edit() {
      uni.navigateTo({
        url: '/sub/owner/edit'
      })
    },
    invite() {
      uni.navigateTo({
        url: '/sub/owner/invite'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  .title {
    font-size: 16px;
  }
}
.owner-container {
  padding: 10px;
  height: 100%;
  .section {
    border-radius: $cs-border-radius;
    background: #fff;
    box-shadow: 0 0 4px 2px $cs-shadow-color;
    margin-bottom: $cs-gap;
    padding: 24px;
  }
  .moblie {
    color: $uni-text-color-grey;
  }
}
</style>