MrShi
2025-06-16 a5f75b8c4acff2ffd49d490c314d95a8c5f5db7e
wx/pages/index/index.vue
@@ -1,57 +1,75 @@
<template>
   <view class="content">
      <view class="content_head" :style="{backgroundImage: 'url(' + backgroundImg + ')'}">
         <view class="content_head_company" @click="show = true">
         <text>{{userInfo.company.name}}</text>
            <u-icon name="arrow-down-fill" color="#ffffff" size="16"></u-icon>
         </view>
         <text>当前在保:{{num}}人</text>
      </view>
      <view class="content_box">
         <view class="content_box_list">
            <view class="content_box_list_left" @click="jump(1)" :style="{backgroundImage: 'url(' + backgroundImg1 + ')'}">
            <view class="content_box_list_left" @click="jump(1)"
               :style="{backgroundImage: 'url(' + backgroundImg1 + ')'}">
               <text>投保申请</text>
               <text>简单便捷</text>
            </view>
            <view class="content_box_list_right">
               <view class="content_box_list_right_row" @click="jump(2)" :style="{backgroundImage: 'url(' + backgroundImg2 + ')'}">
               <view class="content_box_list_right_row" @click="jump(2)"
                  :style="{backgroundImage: 'url(' + backgroundImg2 + ')'}">
                  <text>我的保单</text>
                  <text>全面管保单</text>
               </view>
               <view class="content_box_list_right_row" @click="jump(3)" :style="{backgroundImage: 'url(' + backgroundImg3 + ')'}">
               <view class="content_box_list_right_row" @click="jump(3)"
                  :style="{backgroundImage: 'url(' + backgroundImg3 + ')'}">
                  <text>在线报案</text>
                  <text>方便迅速</text>
               </view>
            </view>
         </view>
         <view class="content_box_list1">
            <view class="content_box_list1_item" @click="jump(4)" :style="{backgroundImage: 'url(' + backgroundImg4 + ')'}">
            <view class="content_box_list1_item" @click="jump(4)"
               :style="{backgroundImage: 'url(' + backgroundImg4 + ')'}">
               <text>加减保申请</text>
               <text>增加/减少投保人</text>
            </view>
            <view class="content_box_list1_item" @click="jump(5)" :style="{backgroundImage: 'url(' + backgroundImg5 + ')'}">
            <view class="content_box_list1_item" @click="jump(5)"
               :style="{backgroundImage: 'url(' + backgroundImg5 + ')'}">
               <text>加减保记录</text>
               <text>查看记录</text>
            </view>
            <view class="content_box_list1_item" @click="jump(6)" :style="{backgroundImage: 'url(' + backgroundImg6 + ')'}">
            <view class="content_box_list1_item" @click="jump(6)"
               :style="{backgroundImage: 'url(' + backgroundImg6 + ')'}">
               <text>更换派遣\n单位</text>
               <!-- <text>更换派遣单位</text> -->
            </view>
            <view class="content_box_list1_item" @click="jump(7)" :style="{backgroundImage: 'url(' + backgroundImg7 + ')'}">
            <view class="content_box_list1_item" @click="jump(7)"
               :style="{backgroundImage: 'url(' + backgroundImg7 + ')'}">
               <text>更换派遣\n单位记录</text>
               <!-- <text>查看记录</text> -->
            </view>
            <view class="content_box_list1_item" @click="jump(8)" :style="{backgroundImage: 'url(' + backgroundImg8 + ')'}">
            <view class="content_box_list1_item" @click="jump(8)"
               :style="{backgroundImage: 'url(' + backgroundImg8 + ')'}">
               <text>员工管理</text>
               <text>查看人员投保信息</text>
            </view>
         </view>
         <!-- <button @click="test">身份证识别</button> -->
      </view>
      <view class="content_loginout">
         <u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="退出登录" @click="loginOut"></u-button>
         <u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="退出登录"
            @click="loginOut"></u-button>
      </view>
      <!-- 切换企业 -->
      <u-picker :show="show" keyName="companyName" @confirm="confirmCompany" @cancel="cancel"
         :columns="[userInfo.companyPermissionList || []]"></u-picker>
   </view>
</template>
<script>
   import { mapState } from 'vuex'
   import {
      mapState
   } from 'vuex'
   export default {
      computed: {
         ...mapState(['userInfo', 'cookies'])
@@ -59,6 +77,8 @@
      data() {
         return {
            num: 0,
            show: false,
            companyList: [],
            backgroundImg: require('@/static/background/home_bg@2x.png'),
            backgroundImg1: require('@/static/background/home_ic_toubao@2x.png'),
            backgroundImg2: require('@/static/background/home_ic_baodan@2x.png'),
@@ -74,6 +94,59 @@
         this.getNum()
      },
      methods: {
         test() {
            // 选择图片
            wx.chooseImage({
               count: 1,
               success: async function(res) {
                  console.log(new wx.serviceMarket.CDN({ type: 'filePath', filePath: res.tempFilePaths[0] }))
                  try {
                     const invokeRes = await wx.serviceMarket.invokeService({
                        service: 'wx79ac3de8be320b71',
                        api: 'OcrAllInOne',
                        data: {
                           // 用 CDN 方法标记要上传并转换成 HTTP URL 的文件
                           img_url: new wx.serviceMarket.CDN({
                              type: 'filePath',
                              filePath: res.tempFilePaths[0],
                           }),
                           data_type: 3,
                           ocr_type: 1
                        },
                     })
                     console.log('invokeService success', invokeRes)
                     wx.showModal({ title: 'success', content: JSON.stringify(invokeRes) })
                  } catch (err) {
                     console.log(JSON.stringify(err))
                     wx.showModal({ title: 'fail', content: err })
                  }
               },
               fail: function(res) {},
               complete: function(res) {},
            })
         },
         cancel() {
            this.show = false
         },
         confirmCompany(e) {
            if (e.value[0].companyId === this.userInfo.companyId) {
               uni.showToast({
                  title: '不能切换当前企业',
                  icon: 'none'
               })
               return
            }
            this.$u.api.switchCompany({
                  companyId: e.value[0].companyId
               })
               .then(async res => {
                  let user = await this.$u.api.getUserInfo()
                  if (user.code === 200) {
                     this.$store.commit('setUserInfo', user.data)
                     this.show = false
                  }
               })
         },
         getNum() {
            this.$u.api.guaranteeNum()
               .then(res => {
@@ -205,6 +278,7 @@
<style lang="scss" scoped>
   .content {
      width: 100%;
      .content_loginout {
         width: 200rpx;
         // margin: 0 auto;
@@ -213,6 +287,7 @@
         position: fixed;
         bottom: calc(env(safe-area-inset-bottom) + 40rpx);
      }
      .content_head {
         width: 100%;
         height: 292rpx;
@@ -223,26 +298,41 @@
         display: flex;
         flex-direction: column;
         position: relative;
         text {
            &:nth-child(1) {
         .content_head_company {
               width: 100%;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
            display: flex;
            align-items: center;
            text {
               font-weight: 600;
               font-size: 44rpx;
               color: #FFFFFF;
               font-style: normal;
               margin-right: 15rpx;
            }
            &:nth-child(2) {
         }
         text {
            // &:nth-child(1) {
            //    width: 100%;
            //    overflow: hidden;
            //    white-space: nowrap;
            //    text-overflow: ellipsis;
            //    font-weight: 600;
            //    font-size: 44rpx;
            //    color: #FFFFFF;
            //    font-style: normal;
            // }
            // &:nth-child(2) {
               font-weight: 500;
               font-size: 28rpx;
               color: #FFFFFF;
               font-style: normal;
               margin-top: 24rpx;
            // }
            }
         }
      }
      .content_box {
         width: 100%;
         padding: 0 30rpx;
@@ -250,6 +340,7 @@
         position: relative;
         top: -100rpx;
         left: 0;
         .content_box_list1 {
            width: 100%;
            margin-top: 20rpx;
@@ -257,6 +348,7 @@
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            .content_box_list1_item {
               width: 336rpx;
               height: 160rpx;
@@ -268,9 +360,11 @@
               background-size: 100% 100%;
               display: flex;
               flex-direction: column;
               &:nth-child(2n) {
                  margin-right: 0 !important;
               }
               text {
                  &:nth-child(1) {
                     font-weight: 500;
@@ -278,6 +372,7 @@
                     color: #222222;
                     font-style: normal;
                  }
                  &:nth-child(2) {
                     font-weight: 400;
                     font-size: 24rpx;
@@ -288,12 +383,14 @@
               }
            }
         }
         .content_box_list {
            width: 100%;
            height: 336rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .content_box_list_left {
               width: 336rpx;
               height: 100%;
@@ -303,6 +400,7 @@
               flex-direction: column;
               padding: 24rpx 28rpx;
               box-sizing: border-box;
               text {
                  &:nth-child(1) {
                     font-weight: 500;
@@ -310,6 +408,7 @@
                     color: #222222;
                     font-style: normal;
                  }
                  &:nth-child(2) {
                     font-weight: 400;
                     font-size: 24rpx;
@@ -319,12 +418,14 @@
                  }
               }
            }
            .content_box_list_right {
               width: 336rpx;
               height: 100%;
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               .content_box_list_right_row {
                  width: 100%;
                  height: 160rpx;
@@ -334,6 +435,7 @@
                  background-size: 100% 100%;
                  display: flex;
                  flex-direction: column;
                  text {
                     &:nth-child(1) {
                        font-weight: 500;
@@ -341,6 +443,7 @@
                        color: #222222;
                        font-style: normal;
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 24rpx;