路泰科技体检小程序UI设计新版本
1
wwl
2025-08-01 bac0a4521c776e1179d3a8dbe4d4cbb9d7e71118
pages/mine/index.vue
@@ -1,842 +1,637 @@
<template>
   <view class="page" >
      <image class="bg-image" src="/static/images/index/bg.png" mode="scaleToFill"></image>
      <view class="container">
         <!-- 用户信息区域 -->
         <view class="user-info">
            <view class="user-info__left">
               <view v-if="!avatar">
                  <image class="avatar" src="/static/images/index/tx.png" mode="scaleToFill"></image>
               </view>
               <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="avatar"
                  mode="widthFix">
               </image>
               <!-- <image class="avatar"
                  :src="avatar" /> -->
                  <view v-if="!name" @click="handleToLogin" class="user-info">
                     <view class="u_title">
                        登录
                     </view>
                  </view>
               <!--    <view v-else @click="handleToInfo" class="user-info">
                     <view class="u_title">
                        用户:{{name}}
                     </view>
                  </view> -->
               <view class="user-info__content" v-else @click="handleToInfo">
                  <view class="name-wrapper">
                     <text class="name">{{name}}</text>
                     <view class="certified">已认证</view>
                  </view>
                  <text class="phone">18408545566</text>
               </view>
            </view>
            <view class="user-info__right" @click="handleToInfo">
               <text class="personal-info">个人信息</text>
               <uni-icons type="right" size="16" color="#999" />
            </view>
         </view>
  <view class="page">
    <image class="bg-image" src="/static/images/index/bg.png" mode="scaleToFill"></image>
    <view class="container">
      <!-- 用户信息区域 -->
      <view class="user-info">
        <view class="user-info__left">
          <view v-if="!avatar">
            <image class="avatar" src="/static/images/index/tx.png" mode="scaleToFill"></image>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="avatar" mode="widthFix"></image>
          <view v-if="!name" @click="handleToLogin" class="user-info">
            <view class="u_title">登录</view>
          </view>
          <view class="user-info__content" v-else @click="handleToInfo">
            <view class="name-wrapper">
              <text class="name">{{name}}</text>
              <view class="certified">已认证</view>
            </view>
            <text class="phone">{{phone || '未绑定手机号'}}</text>
          </view>
        </view>
        <view class="user-info__right" @click="handleToInfo">
          <text class="personal-info">个人信息</text>
          <uni-icons type="right" size="16" color="#999" />
        </view>
      </view>
         <!-- 快捷功能区 -->
         <view class="quick-functions">
            <view class="function-item" @click="history('/pagesA/Examiner/Examiner')">
               <view class="icon-img">
                  <!-- <uni-icons type="calendar" size="28" color="#3AA0FF" /> -->
                  <image class="icon-img" src="/static/images/index/就诊记录.png" mode="scaleToFill"></image>
               </view>
               <text class="function-text">问诊记录</text>
            </view>
            <view class="function-item" @click="questionnaire">
               <!-- <view class="function-icon">
                  <uni-icons type="star" size="28" color="#FFB442" />
               </view> -->
               <view class="icon-img">
                  <!-- <uni-icons type="calendar" size="28" color="#3AA0FF" /> -->
                  <image class="icon-img" src="/static/images/index/满意度.png" mode="scaleToFill"></image>
               </view>
               <text class="function-text">问卷调查</text>
            </view>
            <view class="function-item" @click="handleBuilding">
               <view class="icon-img">
                  <image class="icon-img" src="/static/images/index/检查记录.png" mode="scaleToFill"></image>
               <!--    <uni-icons type="search" size="28" color="#3AA0FF" /> -->
               </view>
               <text class="function-text">我的体检</text>
            </view>
         </view>
      <!-- 快捷功能区 -->
      <view class="quick-functions">
        <view class="function-item" @click="history('/pagesA/Examiner/Examiner')">
          <view class="icon-img">
            <image class="icon-img" src="/static/images/index/就诊记录.png" mode="scaleToFill"></image>
          </view>
          <text class="function-text">问诊记录</text>
        </view>
        <view class="function-item" @click="questionnaire">
          <view class="icon-img">
            <image class="icon-img" src="/static/images/index/满意度.png" mode="scaleToFill"></image>
          </view>
          <text class="function-text">问卷调查</text>
        </view>
        <view class="function-item" @click="handleBuilding">
          <view class="icon-img">
            <image class="icon-img" src="/static/images/index/检查记录.png" mode="scaleToFill"></image>
          </view>
          <text class="function-text">我的体检</text>
        </view>
      </view>
         <!-- 常用工具区 -->
         <view class="tools-section">
            <view class="tools-title">常用工具</view>
            <view class="tools-list">
               <view class="tool-item">
                  <view class="tool-item__left">
                     <!-- <uni-icons type="phone" size="20" color="#666" /> -->
                     <image class="rt-image" src="/static/images/tabbar/phone.png" mode="scaleToFill"></image>
                     <text class="tool-text">手机号码</text>
                  </view>
                  <view class="tool-item__right" @click="getcusPhone">
                     <text class="status confirmed">确认</text>
                     <uni-icons type="right" size="16" color="#999" />
                  </view>
               </view>
      <!-- 常用工具区 -->
      <view class="tools-section">
        <view class="tools-title">常用工具</view>
        <view class="tools-list">
          <view class="tool-item">
            <view class="tool-item__left">
              <image class="rt-image" src="/static/images/tabbar/phone.png" mode="scaleToFill"></image>
              <text class="tool-text">手机号码</text>
            </view>
            <view class="tool-item__right" @click="getcusPhone">
              <text class="status confirmed">确认</text>
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
          <view class="tool-item">
            <view class="tool-item__left">
              <image class="rt-image" src="/static/images/index/xx.png" mode="scaleToFill"></image>
              <text class="tool-text">接受消息通知</text>
            </view>
            <view class="tool-item__right" @tap="subScriptionMessage">
              <text class="status allowed">允许</text>
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
          <view class="tool-item" @click="personnel('/pagesA/Examiner/Examiner')">
            <view class="tool-item__left">
              <image class="rt-image" src="/static/images/index/ry.png" mode="scaleToFill"></image>
              <text class="tool-text">体检人员</text>
            </view>
            <view class="tool-item__right">
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
          <view class="tool-item" @click="handleToPwd">
            <view class="tool-item__left">
              <image class="rt-image" src="/static/images/index/mm.png" mode="scaleToFill"></image>
              <text class="tool-text">修改密码</text>
            </view>
            <view class="tool-item__right">
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
          <view class="tool-item" @click="handleAbout">
            <view class="tool-item__left">
              <image class="rt-image" src="/static/images/index/all.png" mode="scaleToFill"></image>
              <text class="tool-text">关于我们</text>
            </view>
            <view class="tool-item__right">
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
          <view class="tool-item" @click="handleHelp">
            <view class="tool-item__left">
              <image class="rt-image" src="/static/images/index/wt.png" mode="scaleToFill"></image>
              <text class="tool-text">常见问题</text>
            </view>
            <view class="tool-item__right">
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
          <view class="tool-item">
            <view class="tool-item__left" @click="handleLogout">
              <image class="rt-image" src="/static/images/tabbar/cart.png" mode="scaleToFill"></image>
              <text class="tool-text">退出登录</text>
            </view>
            <view class="tool-item__right">
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
        </view>
      </view>
               <view class="tool-item">
                  <view class="tool-item__left">
                     <!-- <uni-icons type="notification" size="20" color="#666" /> -->
                     <image class="rt-image" src="/static/images/index/xx.png" mode="scaleToFill"></image>
                     <text class="tool-text">接受消息通知</text>
                  </view>
                  <view class="tool-item__right" @tap="subScriptionMessage">
                     <text class="status allowed">允许</text>
                     <uni-icons type="right" size="16" color="#999" />
                  </view>
               </view>
      <!-- 技术支持信息 -->
      <view class="tech-support">
        <text>@技术支持:路泰科技有限公司</text>
      </view>
               <view class="tool-item" @click="personnel('/pagesA/Examiner/Examiner')">
                  <view class="tool-item__left">
                     <!-- <uni-icons type="staff" size="20" color="#666" /> -->
                     <image class="rt-image" src="/static/images/index/ry.png" mode="scaleToFill"></image>
                     <text class="tool-text">体检人员</text>
                  </view>
                  <view class="tool-item__right">
                     <uni-icons type="right" size="16" color="#999" />
                  </view>
               </view>
               <view class="tool-item"  @click="handleToPwd">
                  <view class="tool-item__left">
                     <!-- <uni-icons type="locked" size="20" color="#666" /> -->
                     <image class="rt-image" src="/static/images/index/mm.png" mode="scaleToFill"></image>
                     <text class="tool-text">修改密码</text>
                  </view>
                  <view class="tool-item__right">
                     <uni-icons type="right" size="16" color="#999" />
                  </view>
               </view>
               <view class="tool-item" @click="handleAbout">
                  <view class="tool-item__left">
                     <image class="rt-image" src="/static/images/index/all.png" mode="scaleToFill"></image>
                     <!-- <uni-icons type="info" size="20" color="#666" /> -->
                     <text class="tool-text">关于我们</text>
                  </view>
                  <view class="tool-item__right">
                     <uni-icons type="right" size="16" color="#999" />
                  </view>
               </view>
               <view class="tool-item" @click="handleHelp">
                  <view class="tool-item__left">
                     <!-- <uni-icons type="help" size="20" color="#666" /> -->
                     <image class="rt-image" src="/static/images/index/wt.png" mode="scaleToFill"></image>
                     <text class="tool-text">常见问题</text>
                  </view>
                  <view class="tool-item__right">
                     <uni-icons type="right" size="16" color="#999" />
                  </view>
               </view>
               <view class="tool-item">
                  <view class="tool-item__left" @click="handleLogout">
                     <!-- <uni-icons type="logout" size="20" color="#666" /> -->
                        <image class="rt-image" src="/static/images/tabbar/cart.png" mode="scaleToFill"></image>
                     <text class="tool-text">退出登录</text>
                  </view>
                  <view class="tool-item__right">
                     <uni-icons type="right" size="16" color="#999" />
                  </view>
               </view>
            </view>
         </view>
         <!-- 技术支持信息 -->
         <view class="tech-support">
            <text>@技术支持:路泰科技有限公司</text>
         </view>
      </view>
      <!--顶部个人信息栏-->
      <!-- <view class="header-section">
         <view class="flex padding justify-between">
            <view class="flex align-center">
               <view v-if="!avatar" class="cu-avatar xl round bg-white">
                  <view class="iconfont icon-people text-gray icon"></view>
               </view>
               <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
                  mode="widthFix">
               </image>
               <view v-if="!name" @click="handleToLogin" class="user-info">
                  <view class="u_title">
                     登录
                  </view>
               </view>
               <view v-else @click="handleToInfo" class="user-info">
                  <view class="u_title">
                     用户:{{name}}
                  </view>
               </view>
            </view>
            <view @click="handleToInfo" class="flex align-center">
               <text>个人信息</text>
               <view class="iconfont icon-right"></view>
            </view>
         </view>
      </view>
      <view class="content-section">
         <view class="mine-actions grid col-4 text-center">
            <view class="action-item" @click="handleJiaoLiuQun" v-if="disapley == 'flase'">
               <view class="iconfont icon-friendfill text-pink icon"></view>
               <text class="text">我的预约</text>
            </view>
            <view class="action-item" @click="handleJiaoLiuQun" v-if="disapley == 'true'">
               <view class="iconfont icon-friendfill text-pink icon"></view>
               <text class="text">我的订单</text>
            </view>
            <view class="action-item" @click="history('/pagesA/Examiner/Examiner?id=1')">
               <view class="iconfont icon-service text-blue icon"></view>
               <text class="text">问诊记录</text>
            </view>
            <view class="action-item" @click="questionnaire">
               <view class="iconfont icon-community text-mauve icon"></view>
               <text class="text">问卷调查</text>
            </view>
            <view class="action-item" @click="handleBuilding">
               <view class="iconfont icon-dianzan text-green icon"></view>
               <text class="text">我的体检</text>
            </view>
         </view>
         <view class="menu-list">
            <view class="list-cell list-cell-arrow">
               <view class="menu-item-box">
                  <view class="iconfont icon-refresh menu-icon"></view>
                  <input class="input" v-model="cusPhone" placeholder="手机号码" />
                  <button style="background-color:#ff834c;color: #fff;width: 24%;" size="mini"
                     @click="getcusPhone">确认</button>
               </view>
            </view>
            <view class="list-cell list-cell-arrow">
               <view class="menu-item-box">
                  <view class="iconfont icon-refresh menu-icon"></view>
                  <text>接受通知消息 </text>
                  <button :disabled="disabled"
                     style="width: 24%;margin-left:101px ;background-color:#ff834c;color: #fff;" size="mini"
                     type="primary" @tap="subScriptionMessage">允许</button>
               </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="handleHelp">
               <view class="menu-item-box">
                  <view class="iconfont icon-help menu-icon"></view>
                  <view>常见问题</view>
               </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="handleAbout">
               <view class="menu-item-box">
                  <view class="iconfont icon-aixin menu-icon"></view>
                  <view>关于我们</view>
               </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="personnel('/pagesA/Examiner/Examiner')">
               <view class="menu-item-box">
                  <view class="iconfont icon-password menu-icon"></view>
                  <view>体检人员</view>
               </view>
            </view>
            <!-- 将setting/index挪过来-->
            <!--<view class="list-cell list-cell-arrow" @click="handleToPwd">
               <view class="menu-item-box">
                  <view class="iconfont icon-password menu-icon"></view>
                  <view>修改密码</view>
               </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="handleLogout">
               <view class="menu-item-box">
                  <view class="iconfont icon-clean menu-icon"></view>
                  <view>退出登录</view>
               </view>
            </view>
         </view>
      </view> -->
   </view>
      <!-- uView 弹窗 -->
      <u-modal
        :show="showPhonePopup"
        title="绑定手机号"
        @confirm="confirmPhone"
        @cancel="closePhonePopup"
        confirm-color="#3AA0FF"
        show-cancel-button
      >
        <view class="modal-content">
          <u-input
            v-model="inputPhone"
            placeholder="请输入手机号码"
            type="number"
            maxlength="11"
            :border="true"
            clearable
          />
        </view>
      </u-modal>
    </view>
  </view>
</template>
<script>
   import {
      getInfoById
   } from "@/api/system/history";
   import {
      getWxInfo
   } from '@/api/login'
   import {
      bindPhone,
      wxbindphone,
      getIdCardByPhone
   } from "@/api/login";
   import storage from '@/utils/storage'
   import {
      userInfo
   } from 'os'
   import {
import { getInfoById } from "@/api/system/history";
import { getWxInfo, bindPhone, wxbindphone, getIdCardByPhone } from "@/api/login";
import storage from '@/utils/storage';
var WXBizDataCrypt = require('../../utils/WXBizDataCrypt');
      getIsPay
   } from "@/api/system/cart";
   var WXBizDataCrypt = require('../../utils/WXBizDataCrypt')
export default {
  data() {
    return {
      phone: "", // 初始化为空,显示未绑定状态
      inputPhone: "", // 弹窗输入的手机号
      showPhonePopup: false, // 控制 uView 弹窗显示
      cusPhone: "", // 保留原数据(可移除)
      globalData: {
        codeitem: '',
        phone: '',
      },
      disapley: false,
      userInfo: {
        nickName: "",
        avatar: "",
      },
      name: this.$store.state.user.name,
      token: this.$store.state.user.token,
      version: getApp().globalData.config.appInfo.version
    }
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar;
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50;
    }
  },
  onLoad() {
    if (this.token) {
      this.getList();
      getWxInfo().then(res => {
        this.phone = res.data.phone || this.phone; // 初始化时获取手机号
      });
    }
  },
  methods: {
    getList() {
   export default {
      data() {
         return {
            phone: "",
            cusPhone: "",
            globalData: {
               codeitem: '', // code
               phone: '', //解密后的手机号
            },
            disapley: false,
            userInfo: {
               nickName: "",
               avatar: "",
            }, //存放用户信息
            name: this.$store.state.user.name,
            token: this.$store.state.user.token,
            version: getApp().globalData.config.appInfo.version
         }
      },
      computed: {
         avatar() {
            return this.$store.state.user.avatar
         },
         windowHeight() {
            return uni.getSystemInfoSync().windowHeight - 50
         }
      },
      onLoad: function() {
         if (this.token) {
            this.getList()
            getWxInfo().then(res => {
               this.cusPhone = res.data.phone
            })
         }
      },
      methods: {
         getList() {
            getIsPay().then((res) => {
               if (res) {
                  this.disapley = res.msg
               }
            })
         },
         /*
         授权该微信绑定的手机号
          */
         getPhoneNumber(e) {
            let that = this
            wx.login({
               success(res) {
                  console.log(res, 1111)
                  const sessionKey = uni.getStorageSync('sessionKey');
                  const openId = uni.getStorageSync('openId');
                  const iv = uni.getStorageSync('iv');
                  const encryptedData = uni.getStorageSync('encryptedData');
                  let data = {
                     code: e.detail.code,
                     sessionKey: sessionKey,
                     openId: openId,
                     iv: iv,
                     encryptedData: encryptedData,
                  }
                  bindPhone(data).then(response => {
                     uni.setStorageSync('msg', response.msg);
                     that.phone = response.msg
                  })
               }
            })
         },
         /**
          * 微信绑定的个人信息授权
          */
         getWxToken() {
            //申请授权
            uni.getUserProfile({
               desc: '用于完善资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
               success: res => {
                  // console.log(res);
                  const sessionKey = uni.getStorageSync('sessionKey');
                  const openId = uni.getStorageSync('openId');
                  const iv = uni.getStorageSync('iv');
                  const encryptedData = uni.getStorageSync('encryptedData');
                  let data = {
                     openId: openId,
                     iv: iv,
                     encryptedData: encryptedData,
                     sessionKey: sessionKey
                  }
                  bindPhone(data).then(response => {})
               }
            })
         },
         //调出 模板消息界面
         subScriptionMessage() {
            wx.requestSubscribeMessage({
               //模板id,可以写多个
               tmplIds: ['M4K_BNVG7g4hOAcrIDO18ux8KOTneHeNide5GdPW3kc',
                  'X467Xtd8HnFDNk-IoT0ChcdoBnClLZJQQwP7DMztYQ8',
                  'Gzc2BgzSsEY9uki6FThNQRLD1_An6uqpSve3PaU58PQ',
               ],
               //成功回调
               success(res) {
                  console.log(res);
               },
               //失败回调
               fail(res) {
                  console.log(res);
               }
            })
         },
         questionnaire() {
            const msg = uni.getStorageSync('msg');
            if (msg) {
               let phone = msg;
               getIdCardByPhone(phone).then(response => {
                  if (response.data) {
                     uni.setStorageSync('data', response.data);
                     const cusIdCard = uni.getStorageSync('data');
                     uni.navigateTo({
                        url: `/pages/visitrecord/visitrecord?cusIdCard=${cusIdCard}`
                     })
                  } else {
                     uni.navigateTo({
                        url: `/pages/questionnaire/questionnaire`
                     })
                  }
               })
            } else if (this.phone) {
               let phone = this.phone;
               getIdCardByPhone(phone).then(response => {
                  if (response.data) {
                     uni.setStorageSync('data', response.data);
                     const cusIdCard = uni.getStorageSync('data');
                     uni.navigateTo({
                        url: `/pages/visitrecord/visitrecord?cusIdCard=${cusIdCard}`
                     })
                  } else {
                     uni.navigateTo({
                        url: `/pages/questionnaire/questionnaire`
                     })
                  }
               })
            } else {
               uni.navigateTo({
                  url: `/pages/questionnaire/questionnaire`
               })
            }
         },
         getcusPhone() {
            if (this.token) {
               let data = {
                  openId: uni.getStorageSync('openId'),
                  phone: this.cusPhone
               }
               wxbindphone(data).then(res => {
                  this.$modal.showToast('绑定成功~')
               })
            } else {
               this.$tab.reLaunch('/pages/login')
            }
         },
         history(canshu) {
            uni.navigateTo({
               // url: `/pagesB/mine/myReservation/myReservation`
               url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}&id=1`
            })
         },
         handleToInfo() {
            this.$tab.navigateTo('/pagesB/mine/info/index')
         },
         handleToLogin() {
            this.$tab.reLaunch('/pages/login')
         },
         handleToAvatar() {
            this.$tab.navigateTo('/pagesB/mine/avatar/index')
         },
         handleLogout() {
            this.$modal.confirm('确定注销并退出系统吗?').then(() => {
               this.$store.dispatch('LogOut').then(() => {
                  this.$store.state.user.name = ''
                  this.$tab.reLaunch('/pages/index')
               })
            })
         },
         handleHelp() {
            this.$tab.navigateTo('/pagesB/mine/help/index')
         },
         handleAbout() {
            this.$tab.navigateTo('/pagesB/mine/about/index')
         },
         handleJiaoLiuQun() {
            this.$tab.navigateTo('/pagesB/mine/myReservation/myReservation')
         },
         handleBuilding() {
            const msg = uni.getStorageSync('msg');
            if (msg) {
               let phone = msg;
               getIdCardByPhone(phone).then(response => {
                  if (response.data) {
                     uni.setStorageSync('data', response.data);
                     const cusIdCard = uni.getStorageSync('data');
                     uni.navigateTo({
                        url: `/pages/tjrecord/tjrecord?cusIdCard=${cusIdCard}`
                     })
                  } else {
                     uni.navigateTo({
                        url: `/pagesA/Examiner/Examiner?id=2`
                     })
                  }
               })
            } else if (this.phone) {
               let phone = this.phone;
               getIdCardByPhone(phone).then(response => {
                  if (response.data) {
                     uni.setStorageSync('data', response.data);
                     const cusIdCard = uni.getStorageSync('data');
                     uni.navigateTo({
                        url: `/pages/tjrecord/tjrecord?cusIdCard=${cusIdCard}`
                     })
                  } else {
                     uni.navigateTo({
                        url: `/pagesA/Examiner/Examiner?id=2`
                     })
                  }
               })
            } else {
               uni.navigateTo({
                  url: `/pagesA/Examiner/Examiner?id=2`
               })
            }
         },
         personnel(canshu) {
            if (this.token) {
               // this.$tab.navigateTo('/pagesA/Examiner/Examiner')
               uni.navigateTo({
                  url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
               })
            } else {
               this.$tab.reLaunch('/pages/login')
            }
         },
         handleToPwd() {
            this.$tab.navigateTo('/pagesB/mine/pwd/index')
         },
         handleToUpgrade() {
            this.$modal.showToast('当前是最新版本哦~')
         },
         handleCleanTmp() {
            this.$modal.showToast('模块建设中~')
         },
      }
   }
    },
    getcusPhone() {
      if (!this.token) {
        this.$tab.reLaunch('/pages/login');
        return;
      }
      this.showPhonePopup = true; // 显示 uView 弹窗
    },
    closePhonePopup() {
      this.inputPhone = ''; // 清空输入
      this.showPhonePopup = false; // 关闭弹窗
    },
    confirmPhone() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.inputPhone)) {
        this.$u.toast('请输入有效的11位手机号码');
        return;
      }
      const data = { phone: this.inputPhone };
      wxbindphone(data).then(res => {
        this.phone = this.inputPhone; // 更新显示的手机号
        this.$u.toast('绑定成功~');
        this.closePhonePopup(); // 关闭弹窗
      }).catch(err => {
        this.$u.toast('绑定失败,请重试');
      });
    },
    getPhoneNumber(e) {
      let that = this;
      wx.login({
        success(res) {
          console.log(res, 1111);
          const sessionKey = uni.getStorageSync('sessionKey');
          const openId = uni.getStorageSync('openId');
          const iv = uni.getStorageSync('iv');
          const encryptedData = uni.getStorageSync('encryptedData');
          let data = {
            code: e.detail.code,
            sessionKey: sessionKey,
            openId: openId,
            iv: iv,
            encryptedData: encryptedData,
          };
          bindPhone(data).then(response => {
            uni.setStorageSync('msg', response.msg);
            that.phone = response.msg;
          });
        }
      });
    },
    getWxToken() {
      uni.getUserProfile({
        desc: '用于完善资料',
        success: res => {
          const sessionKey = uni.getStorageSync('sessionKey');
          const openId = uni.getStorageSync('openId');
          const iv = uni.getStorageSync('iv');
          const encryptedData = uni.getStorageSync('encryptedData');
          let data = {
            openId: openId,
            iv: iv,
            encryptedData: encryptedData,
            sessionKey: sessionKey
          };
          bindPhone(data).then(response => {});
        }
      });
    },
    subScriptionMessage() {
      wx.requestSubscribeMessage({
        tmplIds: [
          'M4K_BNVG7g4hOAcrIDO18ux8KOTneHeNide5GdPW3kc',
          'X467Xtd8HnFDNk-IoT0ChcdoBnClLZJQQwP7DMztYQ8',
          'Gzc2BgzSsEY9uki6FThNQRLD1_An6uqpSve3PaU58PQ',
        ],
        success(res) {
          console.log(res);
        },
        fail(res) {
          console.log(res);
        }
      });
    },
    questionnaire() {
      const msg = uni.getStorageSync('msg');
      if (msg) {
        let phone = msg;
        getIdCardByPhone(phone).then(response => {
          if (response.data) {
            uni.setStorageSync('data', response.data);
            const cusIdCard = uni.getStorageSync('data');
            uni.navigateTo({
              url: `/pages/visitrecord/visitrecord?cusIdCard=${cusIdCard}`
            });
          } else {
            uni.navigateTo({
              url: `/pages/questionnaire/questionnaire`
            });
          }
        });
      } else if (this.phone) {
        let phone = this.phone;
        getIdCardByPhone(phone).then(response => {
          if (response.data) {
            uni.setStorageSync('data', response.data);
            const cusIdCard = uni.getStorageSync('data');
            uni.navigateTo({
              url: `/pages/visitrecord/visitrecord?cusIdCard=${cusIdCard}`
            });
          } else {
            uni.navigateTo({
              url: `/pages/questionnaire/questionnaire`
            });
          }
        });
      } else {
        uni.navigateTo({
          url: `/pages/questionnaire/questionnaire`
        });
      }
    },
    history(canshu) {
      uni.navigateTo({
        url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}&id=1`
      });
    },
    handleToInfo() {
      this.$tab.navigateTo('/pagesB/mine/info/index');
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login');
    },
    handleToAvatar() {
      this.$tab.navigateTo('/pagesB/mine/avatar/index');
    },
    handleLogout() {
      this.$u.modal({
        content: '确定注销并退出系统吗?',
        showCancel: true,
        confirmText: '确定',
        cancelText: '取消'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$store.state.user.name = '';
          this.phone = ''; // 退出登录时清空手机号
          this.$tab.reLaunch('/pages/index');
        });
      });
    },
    handleHelp() {
      this.$tab.navigateTo('/pagesB/mine/help/index');
    },
    handleAbout() {
      this.$tab.navigateTo('/pagesB/mine/about/index');
    },
    handleJiaoLiuQun() {
      this.$tab.navigateTo('/pagesB/mine/myReservation/myReservation');
    },
    handleBuilding() {
      const msg = uni.getStorageSync('msg');
      if (msg) {
        let phone = msg;
        getIdCardByPhone(phone).then(response => {
          if (response.data) {
            uni.setStorageSync('data', response.data);
            const cusIdCard = uni.getStorageSync('data');
            uni.navigateTo({
              url: `/pages/tjrecord/tjrecord?cusIdCard=${cusIdCard}`
            });
          } else {
            uni.navigateTo({
              url: `/pagesA/Examiner/Examiner?id=2`
            });
          }
        });
      } else if (this.phone) {
        let phone = this.phone;
        getIdCardByPhone(phone).then(response => {
          if (response.data) {
            uni.setStorageSync('data', response.data);
            const cusIdCard = uni.getStorageSync('data');
            uni.navigateTo({
              url: `/pages/tjrecord/tjrecord?cusIdCard=${cusIdCard}`
            });
          } else {
            uni.navigateTo({
              url: `/pagesA/Examiner/Examiner?id=2`
            });
          }
        });
      } else {
        uni.navigateTo({
          url: `/pagesA/Examiner/Examiner?id=2`
        });
      }
    },
    personnel(canshu) {
      if (this.token) {
        uni.navigateTo({
          url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
        });
      } else {
        this.$tab.reLaunch('/pages/login');
      }
    },
    handleToPwd() {
      this.$tab.navigateTo('/pagesB/mine/pwd/index');
    },
    handleToUpgrade() {
      this.$u.toast('当前是最新版本哦~');
    },
    handleCleanTmp() {
      this.$u.toast('模块建设中~');
    },
  }
}
</script>
<style lang="scss">
   page {
     height: 100%;
     background-color: #F5F6FA;
   }
   .page {
     height: 100%;
   }
   .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      left: 50%;
      transform: translateX(-50%);
      object-fit: cover;
   }
   .container {
     min-height: 100%;
     display: flex;
     flex-direction: column;
     padding: 0 30rpx;
     box-sizing: border-box;
     padding-bottom: 120rpx;
   }
   /* 用户信息区域样式 */
   .user-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30rpx 0;
   }
   .user-info__left {
     display: flex;
     align-items: center;
   }
   .avatar {
     width: 120rpx;
     height: 120rpx;
     border-radius: 60rpx;
     margin-right: 20rpx;
   }
   .user-info__content {
     display: flex;
     flex-direction: column;
   }
   .name-wrapper {
     display: flex;
     align-items: center;
     margin-bottom: 10rpx;
   }
   .name {
     font-size: 32rpx;
     color: #333;
     font-weight: 500;
     margin-right: 16rpx;
   }
   .certified {
     background-color: #FFB442;
     color: #fff;
     font-size: 24rpx;
     padding: 4rpx 12rpx;
     border-radius: 4rpx;
   }
   .phone {
     font-size: 28rpx;
     color: #999;
   }
   .user-info__right {
     display: flex;
     align-items: center;
   }
   .personal-info {
     font-size: 28rpx;
     color: #3AA0FF;
     margin-right: 8rpx;
   }
   /* 快捷功能区样式 */
   .quick-functions {
     display: flex;
     justify-content: space-between;
     padding: 40rpx;
     background-color: #fff;
     border-radius: 16rpx;
     margin-bottom: 30rpx;
     width: 702rpx;
     height: 186rpx;
     background: linear-gradient( 90deg, #FFFFFF 0%, #FCFFFE 100%);
     box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(127,153,177,0.14);
     border-radius: 12rpx 12rpx 12rpx 12rpx;
   }
   .function-item {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   .function-icon {
     width: 96rpx;
     height: 96rpx;
     background-color: #F5F7FA;
     border-radius: 48rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 16rpx;
   }
   .icon-img{
      width: 45.03rpx;
      height: 52rpx;
      // background-color: #F5F7FA;
      // border-radius: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16rpx;
   }
   .function-text {
     font-size: 28rpx;
     color: #333;
   }
   /* 常用工具区样式 */
   .tools-section {
     background-color: #fff;
     border-radius: 16rpx;
     padding: 30rpx;
     margin-bottom: 30rpx;
   }
   .tools-title {
     font-size: 32rpx;
     color: #333;
     font-weight: 500;
     margin-bottom: 30rpx;
   }
   .tool-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 24rpx 0;
     // border-bottom: 1px solid #f5f5f5;
   }
   .tool-item:last-child {
     border-bottom: none;
   }
   .tool-item__left {
     display: flex;
     align-items: center;
   }
   .tool-text {
     font-size: 28rpx;
     color: #333;
     margin-left: 20rpx;
   }
   .tool-item__right {
     display: flex;
     align-items: center;
   }
   .status {
     font-size: 24rpx;
     margin-right: 8rpx;
   }
   .confirmed {
      width: 38px;
      line-height: 20px;
      background-color: #E8F8FA;
   text-align: center;
     border-radius: 10rpx;
     color: #3AA0FF;
   }
   .allowed {
      width: 38px;
         line-height: 20px;
         background-color: #E8F8FA;
      text-align: center;
        border-radius: 10rpx;
     color: #3AA0FF;
   }
   /* 技术支持信息样式 */
   .tech-support {
   font-weight: 300;
   font-size: 24rpx;
   color: #B4B4B4;
   line-height: 20rpx;
   text-align: center;
   }
   .rt-image{
      width: 28rpx;
      height: 26rpx;
      margin-left: 10rpx;
   }
   .tech-support text {
     font-size: 24rpx;
     color: #999;
   }
page {
  height: 100%;
  background-color: #F5F6FA;
}
   .mine-container {
      width: 100%;
      height: 100%;
.page {
  height: 100%;
}
      .header-section {
         width: 120rpx;
         height: 120rpx;
         // border-radius: 60rpx;
         // margin-right: 20rpx;
         padding: 15px 15px 45px 15px;
         background: linear-gradient(180deg, #fd8b4d, #f4f8f7, #f7f7f7 255%, );
         color: white;
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
}
         .login-tip {
            font-size: 18px;
            margin-left: 10px;
         }
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}
         .cu-avatar {
            border: 2px solid #eaeaea;
/* 用户信息区域样式 */
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
}
            .icon {
               font-size: 40px;
            }
         }
.user-info__left {
  display: flex;
  align-items: center;
}
         .user-info {
            margin-left: 15px;
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
}
            .u_title {
               font-size: 18px;
               line-height: 30px;
            }
         }
      }
.user-info__content {
  display: flex;
  flex-direction: column;
}
      .content-section {
         position: relative;
         top: -50px;
.name-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
         .mine-actions {
            margin: 15px 15px;
            padding: 20px 0px;
            border-radius: 8px;
            background-color: white;
.name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-right: 16rpx;
}
            .action-item {
               .icon {
                  font-size: 28px;
               }
.certified {
  background-color: #FFB442;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}
               .text {
                  display: block;
                  font-size: 13px;
                  margin: 8px 0px;
               }
            }
         }
      }
   }
.phone {
  font-size: 28rpx;
  color: #999;
}
.user-info__right {
  display: flex;
  align-items: center;
}
.personal-info {
  font-size: 28rpx;
  color: #3AA0FF;
  margin-right: 8rpx;
}
/* 快捷功能区样式 */
.quick-functions {
  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  width: 702rpx;
  height: 186rpx;
  background: linear-gradient(90deg, #FFFFFF 0%, #FCFFFE 100%);
  box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(127,153,177,0.14);
}
.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-img {
  width: 45.03rpx;
  height: 52rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}
.function-text {
  font-size: 28rpx;
  color: #333;
}
/* 常用工具区样式 */
.tools-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.tools-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 30rpx;
}
.tools-list {
  display: flex;
  flex-direction: column;
}
.tool-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
}
.tool-item:last-child {
  border-bottom: none;
}
.tool-item__left {
  display: flex;
  align-items: center;
}
.tool-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 20rpx;
}
.tool-item__right {
  display: flex;
  align-items: center;
}
.status {
  font-size: 24rpx;
  margin-right: 8rpx;
}
.confirmed {
  width: 38px;
  line-height: 20px;
  background-color: #E8F8FA;
  text-align: center;
  border-radius: 10rpx;
  color: #3AA0FF;
}
.allowed {
  width: 38px;
  line-height: 20px;
  background-color: #E8F8FA;
  text-align: center;
  border-radius: 10rpx;
  color: #3AA0FF;
}
/* 技术支持信息样式 */
.tech-support {
  font-weight: 300;
  font-size: 24rpx;
  color: #B4B4B4;
  line-height: 20rpx;
  text-align: center;
}
.rt-image {
  width: 28rpx;
  height: 26rpx;
  margin-left: 10rpx;
}
.tech-support text {
  font-size: 24rpx;
  color: #999;
}
/* uView 弹窗内容样式 */
.modal-content {
  padding: 20rpx;
}
</style>