路泰科技体检小程序UI设计新版本
qx
2025-08-06 fe97f78b9a343ee9fa45a3531d03d73dcd1df31b
pages/mine/index.vue
@@ -1,4 +1,658 @@
<template>
<<<<<<< HEAD
  <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">
            <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">
              <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="tech-support">
        <text>@技术支持:路泰科技有限公司</text>
      </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, bindPhone, wxbindphone, getIdCardByPhone } from "@/api/login";
import storage from '@/utils/storage';
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() {
    },
    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);
      const tmplIds = [
        'M4K_BNVG7g4hOAcrIDO18ux8KOTneHeNide5GdPW3kc',
        'X467Xtd8HnFDNk-IoT0ChcdoBnClLZJQQwP7DMztYQ8',
        'Gzc2BgzSsEY9uki6FThNQRLD1_An6uqpSve3PaU58PQ',
      ];
      let acceptedCount = 0;
      tmplIds.forEach(id => {
        if (res[id] === 'accept') {
          acceptedCount++;
        }
      });
      if (acceptedCount > 0) {
        this.$u.toast(`成功订阅`);
      } else {
        this.$u.toast('已取消');
      }
    },
    fail: (res) => {
      console.error('订阅消息失败:', res);
      this.$u.toast('订阅消息失败,请稍后重试');
    }
  });
},
    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);
}
.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;
}
=======
   <view class="page" >
      <image class="bg-image" src="/static/images/index/bg.png" mode="scaleToFill"></image>
      <view class="container">
@@ -854,4 +1508,5 @@
         }
      }
   }
>>>>>>> master
</style>