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; align-items: center"
          >
            <text class="wd-font-800 wd-text-20">{{ 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
          class="wd-flex wd-flex-row wd-items-center"
          style="gap: 8px"
          @click="openSubMessage"
        >
          <text>点击开启</text>
          <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/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-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
      })
    },
    openSubMessage() {
      uni.requestSubscribeMessage({
        //此处填写刚才申请模板的模板ID
        tmplIds: ['E8RK91cPLMios6ZHoKx6FJOV4H2kodx6yPWYp7jpLJY'],
        success(res) {
          console.log('requestSubscribeMessage', res)
        }
      })
    },
    edit() {
      uni.navigateTo({
        url: '/sub/owner/edit'
      })
    },
    invite() {
      uni.navigateTo({
        url: '/sub/owner/invite'
        // url: '/sub/enterprise/edit'
      })
    }
  }
}
</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;
    margin-bottom: $cs-gap;
    padding: 24px;
  }
  .moblie {
    color: $uni-text-color-grey;
  }
}
</style>