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"
        @click="openSubMessage"
      >
        <view class="wd-flex wd-flex-row" style="gap: 16rpx">
          <u--image
            src="/static/images/owner/message.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></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: 16rpx"
        >
          <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> -->
      <button
        class="section wd-flex wd-flex-row wd-justify-between"
        @click="btnPolicy"
      >
        <view class="wd-flex wd-flex-row" style="gap: 16rpx">
          <u--image
            src="/static/images/owner/list.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text class="wd-font-800">政策法规</text>
        </view>
        <view
          class="wd-flex wd-flex-row wd-items-center"
          style="gap: 16rpx"
        >
          <u-count-to
            :startVal="0"
            :endVal="policyTotal"
            fontSize="14px"
            separator=","
          ></u-count-to>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </button>
      <button
        class="section wd-flex wd-flex-row wd-justify-between"
        open-type="share"
        @click="invite"
      >
        <view class="wd-flex wd-flex-row" style="gap: 16rpx">
          <u--image
            src="/static/images/owner/edit.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text class="wd-font-800">企业入驻</text>
        </view>
        <view
          class="wd-flex wd-flex-row wd-items-center"
          style="gap: 16rpx"
        >
          <u-icon name="arrow-right"></u-icon>
        </view>
      </button>
      <view
        class="section wd-flex wd-flex-row wd-justify-between"
        @click="callPhone"
      >
        <view class="wd-flex wd-flex-row" style="gap: 16rpx">
          <u--image
            src="/static/images/owner/phone.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text class="wd-font-800">内部专线</text>
        </view>
        <view
          class="wd-flex wd-flex-row wd-items-center"
          style="gap: 16rpx"
        >
          <text>点击呼叫</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <button
        class="section wd-flex wd-flex-row wd-justify-between"
        @click="btnJobInfo"
      >
        <view class="wd-flex wd-flex-row" style="gap: 16rpx">
          <u--image
            src="/static/images/owner/bill.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text class="wd-font-800">工作汇报</text>
        </view>
        <view
          class="wd-flex wd-flex-row wd-items-center"
          style="gap: 16rpx"
        >
          <u-icon name="arrow-right"></u-icon>
        </view>
      </button>
    </scroll-view>
  </cs-page>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserProfile } from '@/api/system/user.js'
import { PolicyApi, formatPolicyContext } from '@/api/policy/index.js'

export default {
  data() {
    return {
      user: {},
      policyTotal: 0,
      share: {}
    }
  },
  computed: {},
  onShow() {
    this.init()
  },
  onShareAppMessage() {
    return this.share
  },
  onShareTimeline() {
    return this.share
  },
  methods: {
    btnPolicy() {
      uni.navigateTo({
        url: '/sub/owner/policy'
      })
    },
    btnJobInfo() {
      uni.navigateTo({
        url: '/sub/owner/jobInfo'
      })
    },
    init() {
      getUserProfile().then(res => {
        this.user = res.data
      })
      PolicyApi.getPolicyPage({
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        this.policyTotal = res.data.total
      })
    },
    openSubMessage() {
      uni.requestSubscribeMessage({
        //此处填写刚才申请模板的模板ID
        tmplIds: ['E8RK91cPLMios6ZHoKx6FJOV4H2kodx6yPWYp7jpLJY'],
        complete(res) {
          uni.navigateTo({
            url: '/sub/owner/notic'
          })
        }
      })
    },
    edit() {
      uni.navigateTo({
        url: '/sub/owner/edit'
      })
    },

    invite() {
      this.share = {
        title: '邀请企业入驻', // 标题
        path: `/pages/login?inviteId=${this.$store.getters.userId}`,
        imageUrl: 'https://hb.jzce.com/fx_qyrz.png'
      }
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: '04167230123'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-flow: row nowrap;
  gap: 20rpx;
  align-items: center;
  .title {
    font-size: 32rpx;
  }
}
.owner-container {
  padding: 20rpx;
  height: 100%;
  .section {
    border-radius: $cs-border-radius;
    background: #fff;
    margin-bottom: $cs-gap;
    padding: 48rpx;
    font-size: 28rpx;
  }
  .moblie {
    color: $uni-text-color-grey;
  }
}
</style>