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: 12rpx">
          <view
            class="wd-flex wd-flex-row"
            style="gap: 16rpx; align-items: center"
          >
            <text
              class="wd-font-800"
              style="font-size: 40rpx; color: #252f4a"
            >
              {{ user.realName }}
            </text>

            <text class="dept">{{ user.dept.name }}</text>
          </view>
          <view class="moblie">{{ user.mobile }}</view>
        </view>
        <view class="wd-flex wd-flex-row" style="gap: 16rpx">
          <u-avatar :src="user.avatar" size="126rpx"></u-avatar>
          <u-icon name="arrow-right" color="#C4CADA"></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: 8rpx">
          <u--image
            src="/static/images/owner/message.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text style="color: #252f4a">消息通知</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="row">
          <view class="notice-wrapper">
            <u-count-to
              :startVal="0"
              :endVal="policyTotal"
              fontSize="14px"
              separator=","
              color="#fff"
            ></u-count-to>
          </view>

          <u-icon name="arrow-right" color="#C4CADA"></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: 8rpx">
          <u--image
            src="/static/images/owner/list.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text style="color: #252f4a">政策法规</text>
        </view>
        <view class="row">
          <u-icon name="arrow-right" color="#C4CADA"></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: 8rpx">
          <u--image
            src="/static/images/owner/edit.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text style="color: #252f4a">企业入驻</text>
        </view>
        <view class="row">
          <u-icon name="arrow-right" color="#C4CADA"></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: 8rpx">
          <u--image
            src="/static/images/owner/phone.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text style="color: #252f4a">内部专线</text>
        </view>
        <view class="row">
          <view style="color: #78829d; line-height: 120%">点击拨打</view>
          <u-icon name="arrow-right" color="#C4CADA"></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: 8rpx">
          <u--image
            src="/static/images/owner/bill.png"
            width="40rpx"
            height="40rpx"
            mode="aspectFill"
          ></u--image>
          <text style="color: #252f4a">工作汇报</text>
        </view>
        <view class="row">
          <u-count-to
            :startVal="0"
            :endVal="jobCount"
            fontSize="28rpx"
            separator=","
            color="#17C653"
          ></u-count-to>
          <u-icon name="arrow-right" color="#C4CADA"></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'
import { JobInfoApi } from '@/api/jobinfo/index.js'
import { NoticApi } from '@/api/common/notic.js'
export default {
  data() {
    return {
      user: {},
      policyTotal: 0,
      jobCount: 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'
      })
    },

    async init() {
      getUserProfile().then(res => {
        this.user = res.data
      })
      const notic = await NoticApi.getListData({ readStatus: false })
      this.policyTotal = notic.data.total
      const job = await JobInfoApi.getJobInfoPage()
      this.jobCount = job.data.total
    },
    openSubMessage() {
      uni.requestSubscribeMessage({
        //此处填写刚才申请模板的模板ID
        tmplIds: [
          '2Mfm2TRKwEP4jF_wRaQQ6EfuhHO5c1CQhKiWAl-cm9g',
          'DcXH1Zo78EoG25771zxR0JcsUj8TTbG-Go3yT8YAszM',
          '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: 32rpx;
  height: 100%;
  .dept {
    font-size: 24rpx;
    background-color: #17c653;
    color: #fff;
    padding: 4rpx 16rpx;
    border-radius: 240rpx;
  }
  .section {
    border-radius: 16rpx;
    background: #fff;
    margin-bottom: 32rpx;
    padding: 48rpx;
    font-size: 28rpx;
  }
  .moblie {
    color: $uni-text-color-grey;
  }
  .notice-wrapper {
    height: 45rpx;
    width: 45rpx;
    background-color: #17c653;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8rpx;
  }
}

::v-deep .u-tag--mini {
  padding: 4rpx 16rpx;
}
</style>