路泰科技体检小程序UI设计新版本
qx
2025-08-06 fe97f78b9a343ee9fa45a3531d03d73dcd1df31b
pages/mine/index.vue
@@ -1,4 +1,5 @@
<template>
<<<<<<< HEAD
  <view class="page">
    <image class="bg-image" src="/static/images/index/bg.png" mode="scaleToFill"></image>
    <view class="container">
@@ -651,4 +652,861 @@
.modal-content {
  padding: 20rpx;
}
=======
   <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="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="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="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="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" @click="handleerweima">
                  <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>
</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 {
      getIsPay
   } from "@/api/system/cart";
   var WXBizDataCrypt = require('../../utils/WXBizDataCrypt')
   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`
               })
            }
         },
         handleerweima(){
            uni.navigateTo({
               url: `/pages/mine/erweima`
            })
         },
         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('模块建设中~')
         },
      }
   }
</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;
   }
   .mine-container {
      width: 100%;
      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;
         .login-tip {
            font-size: 18px;
            margin-left: 10px;
         }
         .cu-avatar {
            border: 2px solid #eaeaea;
            .icon {
               font-size: 40px;
            }
         }
         .user-info {
            margin-left: 15px;
            .u_title {
               font-size: 18px;
               line-height: 30px;
            }
         }
      }
      .content-section {
         position: relative;
         top: -50px;
         .mine-actions {
            margin: 15px 15px;
            padding: 20px 0px;
            border-radius: 8px;
            background-color: white;
            .action-item {
               .icon {
                  font-size: 28px;
               }
               .text {
                  display: block;
                  font-size: 13px;
                  margin: 8px 0px;
               }
            }
         }
      }
   }
>>>>>>> master
</style>