路泰科技体检小程序UI设计新版本
1
wwl
2025-08-01 bac0a4521c776e1179d3a8dbe4d4cbb9d7e71118
pages/mine/index.vue
@@ -8,27 +8,16 @@
               <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" /> -->
          <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 class="u_title">登录</view>
                     </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>
            <text class="phone">{{phone || '未绑定手机号'}}</text>
               </view>
            </view>
            <view class="user-info__right" @click="handleToInfo">
@@ -41,17 +30,12 @@
         <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>
@@ -59,7 +43,6 @@
            <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>
@@ -71,7 +54,6 @@
            <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>
@@ -80,10 +62,8 @@
                     <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>
@@ -92,10 +72,8 @@
                     <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>
@@ -103,10 +81,8 @@
                     <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>
@@ -114,21 +90,17 @@
                     <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>
@@ -136,10 +108,8 @@
                     <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>
@@ -154,197 +124,109 @@
         <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>
      <!-- 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>
               <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">
                     登录
      </u-modal>
                  </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')
import { getInfoById } from "@/api/system/history";
import { getWxInfo, bindPhone, wxbindphone, getIdCardByPhone } from "@/api/login";
import storage from '@/utils/storage';
var WXBizDataCrypt = require('../../utils/WXBizDataCrypt');
   export default {
      data() {
         return {
            phone: "",
            cusPhone: "",
      phone: "", // 初始化为空,显示未绑定状态
      inputPhone: "", // 弹窗输入的手机号
      showPhonePopup: false, // 控制 uView 弹窗显示
      cusPhone: "", // 保留原数据(可移除)
            globalData: {
               codeitem: '', // code
               phone: '', //解密后的手机号
        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
      return this.$store.state.user.avatar;
         },
         windowHeight() {
            return uni.getSystemInfoSync().windowHeight - 50
      return uni.getSystemInfoSync().windowHeight - 50;
         }
      },
      onLoad: function() {
  onLoad() {
         if (this.token) {
            this.getList()
      this.getList();
            getWxInfo().then(res => {
               this.cusPhone = res.data.phone
            })
        this.phone = res.data.phone || this.phone; // 初始化时获取手机号
      });
         }
      },
      methods: {
         getList() {
            getIsPay().then((res) => {
               if (res) {
                  this.disapley = res.msg
               }
            })
         },
         /*
         授权该微信绑定的手机号
          */
    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
      let that = this;
            wx.login({
               success(res) {
                  console.log(res, 1111)
          console.log(res, 1111);
                  const sessionKey = uni.getStorageSync('sessionKey');
                  const openId = uni.getStorageSync('openId');
                  const iv = uni.getStorageSync('iv');
@@ -355,23 +237,18 @@
                     openId: openId,
                     iv: iv,
                     encryptedData: encryptedData,
                  }
          };
                  bindPhone(data).then(response => {
                     uni.setStorageSync('msg', response.msg);
                     that.phone = response.msg
                  })
            that.phone = response.msg;
          });
               }
            })
      });
         },
         /**
          * 微信绑定的个人信息授权
          */
         getWxToken() {
            //申请授权
            uni.getUserProfile({
               desc: '用于完善资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
        desc: '用于完善资料',
               success: res => {
                  // console.log(res);
                  const sessionKey = uni.getStorageSync('sessionKey');
                  const openId = uni.getStorageSync('openId');
                  const iv = uni.getStorageSync('iv');
@@ -381,30 +258,25 @@
                     iv: iv,
                     encryptedData: encryptedData,
                     sessionKey: sessionKey
          };
          bindPhone(data).then(response => {});
                  }
                  bindPhone(data).then(response => {})
               }
            })
      });
         },
         //调出 模板消息界面
         subScriptionMessage() {
            wx.requestSubscribeMessage({
               //模板id,可以写多个
               tmplIds: ['M4K_BNVG7g4hOAcrIDO18ux8KOTneHeNide5GdPW3kc',
        tmplIds: [
          'M4K_BNVG7g4hOAcrIDO18ux8KOTneHeNide5GdPW3kc',
                  'X467Xtd8HnFDNk-IoT0ChcdoBnClLZJQQwP7DMztYQ8',
                  'Gzc2BgzSsEY9uki6FThNQRLD1_An6uqpSve3PaU58PQ',
               ],
               //成功回调
               success(res) {
                  console.log(res);
               },
               //失败回调
               fail(res) {
                  console.log(res);
               }
            })
      });
         },
         questionnaire() {
            const msg = uni.getStorageSync('msg');
@@ -416,13 +288,13 @@
                     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 => {
@@ -431,66 +303,55 @@
                     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')
      this.$tab.navigateTo('/pagesB/mine/info/index');
         },
         handleToLogin() {
            this.$tab.reLaunch('/pages/login')
      this.$tab.reLaunch('/pages/login');
         },
         handleToAvatar() {
            this.$tab.navigateTo('/pagesB/mine/avatar/index')
      this.$tab.navigateTo('/pagesB/mine/avatar/index');
         },
         handleLogout() {
            this.$modal.confirm('确定注销并退出系统吗?').then(() => {
      this.$u.modal({
        content: '确定注销并退出系统吗?',
        showCancel: true,
        confirmText: '确定',
        cancelText: '取消'
      }).then(() => {
               this.$store.dispatch('LogOut').then(() => {
                  this.$store.state.user.name = ''
                  this.$tab.reLaunch('/pages/index')
               })
            })
          this.$store.state.user.name = '';
          this.phone = ''; // 退出登录时清空手机号
          this.$tab.reLaunch('/pages/index');
        });
      });
         },
         handleHelp() {
            this.$tab.navigateTo('/pagesB/mine/help/index')
      this.$tab.navigateTo('/pagesB/mine/help/index');
         },
         handleAbout() {
            this.$tab.navigateTo('/pagesB/mine/about/index')
      this.$tab.navigateTo('/pagesB/mine/about/index');
         },
         handleJiaoLiuQun() {
            this.$tab.navigateTo('/pagesB/mine/myReservation/myReservation')
      this.$tab.navigateTo('/pagesB/mine/myReservation/myReservation');
         },
         handleBuilding() {
            const msg = uni.getStorageSync('msg');
@@ -502,13 +363,13 @@
                     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 => {
@@ -517,39 +378,36 @@
                     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')
        this.$tab.reLaunch('/pages/login');
            }
         },
         handleToPwd() {
            this.$tab.navigateTo('/pagesB/mine/pwd/index')
      this.$tab.navigateTo('/pagesB/mine/pwd/index');
         },
         handleToUpgrade() {
            this.$modal.showToast('当前是最新版本哦~')
      this.$u.toast('当前是最新版本哦~');
         },
         handleCleanTmp() {
            this.$modal.showToast('模块建设中~')
      this.$u.toast('模块建设中~');
         },
      }
   }
@@ -576,6 +434,7 @@
      transform: translateX(-50%);
      object-fit: cover;
   }
   .container {
     min-height: 100%;
     display: flex;
@@ -659,7 +518,6 @@
     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 {
@@ -668,26 +526,15 @@
     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;
@@ -708,12 +555,16 @@
     margin-bottom: 30rpx;
   }
   
.tools-list {
  display: flex;
  flex-direction: column;
}
   .tool-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 24rpx 0;
     // border-bottom: 1px solid #f5f5f5;
   }
   
   .tool-item:last-child {
@@ -779,64 +630,8 @@
     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;
               }
            }
         }
      }
/* uView 弹窗内容样式 */
.modal-content {
  padding: 20rpx;
   }
</style>