zy-pda/pages/personalCenter/personalCenter.vue

<template>
  <view class="personalCenter">
    <view class="p_header">
      个人信息
    </view>
    <view class="orderDetail_info">
      <scroll-view scroll-y class="orderDetail_infoItem">
        <view class="orderDetail_infoItem_header">
          <view class="orderDetail_infoItem_header_title">
            <view class="taskNameAndWorkerName">
              <text class="taskName">姓名:{{loginInfo.user?loginInfo.user.name:'暂无'}}</text>
            </view>
          </view>
          <text class="orderDetail_infoItem_header_more green">工号:{{loginInfo.user?loginInfo.user.account:'暂无'}}</text>
        </view>
        <view class="orderDetail_infoItem_item">
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">所属院区</text>
            <text
              class="orderDetail_infoItem_item_value">{{loginInfo.user?(loginInfo.user.currentHospital?loginInfo.user.currentHospital.hosName:'暂无'):'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">所属科室</text>
            <text
              class="orderDetail_infoItem_item_value">{{loginInfo.user?(deptDisplay == 2?loginInfo.user.dept.deptalias:loginInfo.user.dept.dept):'暂无'}}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="changeDept">
      <button type="primary" @click="showDeptModel">切换科室</button>
      <button type="primary" @click="checkUpdate">检测更新</button>
      <button type="primary" @click="changePwd">修改密码</button>
      <button type="primary" @click="logout">退出登录</button>
    </view>
    <seiminFooterNav></seiminFooterNav>
    <seiminModel ref="seiminModel"></seiminModel>
    <seiminPicker ref="sPicker" :title="pickerTitle" titleColor="#808080" titleFontSize="28rpx" confirmColor="#333"
      confirmFontSize="38rpx" confirmFontWeight="500" itemFontSize="32rpx" @onClose="closePicker"
      @onConfirm="confirmPicker" :pickerList="hospitalList">
    </seiminPicker>
  </view>
</template>

<script>
  import config from "../../request/config.js";
  import {
    mapState,
    mapMutations
  } from "vuex";
  import {
    reqLogout2,
    reqUppwd,
    reqFetchDataList,
  } from "../../request/api.js";
  export default {
    data() {
      return {
        hospitalList: [], //当前用户权限中的院区列表
        pickerTitle: "", //选择院区picker的title
      };
    },
    computed: {
      ...mapState("login", ["loginInfo"]),
      ...mapState("other", ["deptDisplay"]),
    },
    mounted() {
      //选择院区picker的title
      this.pickerTitle = `您当前所属科室为<b class="green">${this.loginInfo.user.dept.dept}</b>，请您先选择院区`;
      //权限中的院区修改数据结构
      this.hospitalList = this.loginInfo.infoPermission.hospitals.map((v) => ({
        value: v.id,
        label: v.hosName,
      }));
    },
    methods: {
      ...mapMutations('other', [
        "changeSearchDeptParams",
      ]),
      // 切换科室弹窗
      showDeptModel() {
        const {
          user, //当前登录用户
        } = this.loginInfo;
        const userDept =
          user && user.dept ?
          this.deptDisplay == 1 ?
          user.dept.dept :
          user.dept.deptalias :
          "";
        this.$refs.seiminModel.showChangeDept({
          content: `您当前所属科室为<text class="green">${userDept}</text>，如与您实际科室不符点击<text class="red">切换科室</text>。`,
          btns: [{
              name: "知道了",
              textColor: "#49B856",
              flex: 2,
            },
            {
              name: "前往切换科室",
              textColor: "#666",
              flex: 3,
              click: (e) => {
                this.$refs.seiminModel.close();
                this.openPicker();
              },
            },
          ],
        });
      },
      //关闭
      closePicker() {
        this.$refs.sPicker._close();
      },
      //打开
      openPicker() {
        this.$refs.sPicker._open();
        let index = this.hospitalList.findIndex(v => v.value == this.loginInfo.user.currentHospital.id);
        this.$refs.sPicker._changeValue(index);
      },
      //确定：接收子组件传来的参数
      confirmPicker(checkedObj) {
        this.changeSearchDeptParams({
          backUrl: "/pages/personalCenter/personalCenter", //返回的url
          type: "changeDept_index", //首页切换科室
          hospital: checkedObj, //先选择院区
        });
        uni.navigateTo({
          url: "/pages/searchDept/searchDept",
        });
      },
      // 退出登录
      logout() {
        this.$refs.seiminModel.show({
          icon: "warn",
          content: '确定退出登录？',
          btns: [{
            click: () => {
              this.$refs.seiminModel.close();
            },
          }, {
            click: () => {
              uni.showLoading({
                mask: true,
                title: '加载中'
              })
              reqLogout2()
                .then((data) => {
                  uni.hideLoading();
                  if (data.status == 200) {
                    this.$refs.seiminModel.close();
                    this.$refs.seiminModel.show({
                      skin: "toast",
                      icon: "success",
                      content: "退出成功",
                      btns: [{
                        click: () => {
                          uni.navigateTo({
                            url: '/pages/login/login'
                          })
                        }
                      }]
                    });
                  } else {
                    this.$refs.seiminModel.show({
                      skin: "toast",
                      icon: "error",
                      content: data.error || "退出失败",
                    });
                  }
                });
            },
          }, ],
        })
      },
      // 修改密码
      changePwd() {
        this.$refs.seiminModel.show({
          skin: 'changePwd',
          title: '修改密码',
          btns: [{
            click: () => {
              this.$refs.seiminModel.close();
            },
          }, {
            click: () => {
              uni.showLoading({
                mask: true,
                title: '加载中'
              })
              console.log(this)
              let postData = {
                "userid": this.loginInfo.user.id,
                "pwdOld": this.$refs.seiminModel.pwdOld,
                "newPwd": this.$refs.seiminModel.newPwd,
                "newPwd2": this.$refs.seiminModel.newPwd2,
              };
              reqUppwd(postData)
                .then((data) => {
                  uni.hideLoading();
                  if (data.status == 200) {
                    this.$refs.seiminModel.close();
                    this.$refs.seiminModel.show({
                      skin: "toast",
                      icon: "success",
                      content: "修改密码成功",
                      btns: [{
                        click: () => {
                          uni.navigateTo({
                            url: '/pages/login/login'
                          })
                        }
                      }]
                    });
                  } else {
                    this.$refs.seiminModel.show({
                      skin: "toast",
                      icon: "error",
                      content: data.error || "修改密码失败",
                    });
                  }
                });
            },
          }, ],
        })
      },
      // 检测更新
      checkUpdate() {
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        let postData = {
          "idx": 0,
          "sum": 1,
          "systemConfiguration": {
            "keyconfig": "pdaVersion"
          }
        };
        reqFetchDataList('simple/data', 'systemConfiguration', postData)
          .then((data) => {
            uni.hideLoading();
            if (data.status == 200) {
              const version = data.list[0].valueconfig;
              // #ifdef APP-PLUS
              plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
                console.log(wgtinfo.version); //应用版本号
                if (wgtinfo.version === version) {
                  this.$refs.seiminModel.show({
                    skin: "toast",
                    icon: "success",
                    content: "您所使用的已是最新版本",
                  });
                } else {
                  this.$refs.seiminModel.show({
                    icon: 'warn',
                    content: `发现新版本Version ${version}`,
                    btns: [{},
                      {
                        name: '立即下载更新',
                        click: () => {
                          this.downloadUrl(`${config.pdaDownloadUrl}/pda-v${version}.apk`);
                        }
                      }
                    ]
                  });
                }
              })
              // #endif
              // #ifndef APP-PLUS
              this.$refs.seiminModel.show({
                skin: "toast",
                icon: "error",
                content: "当前不是APP端",
              });
              // #endif
            } else {
              this.$refs.seiminModel.show({
                skin: "toast",
                icon: "error",
                content: data.error || "获取版本失败",
              });
            }
          });
      },
      // 下载更新
      downloadUrl(Url = '') {
        uni.showLoading({
          title: '更新中……',
          mask: true,
        })
        const downloadTask = uni.downloadFile({ //执行下载
          url: Url, //下载地址
          timeout: 1000 * 30, //30秒超时时间
          success: downloadResult => { //下载成功
            console.log(downloadResult)
            uni.hideLoading();
            if (downloadResult.statusCode == 200) {
              plus.runtime.install( //安装软件
                downloadResult.tempFilePath, {
                  force: true
                },
                function(res) {
                  plus.runtime.restart();
                }
              );
            }else{
              this.$refs.seiminModel.show({
                skin: "toast",
                icon: "error",
                content: "下载失败",
              });
            }
          },
          fail: err => {
            uni.hideLoading();
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: "更新失败",
            });
            console.log(err)
          },
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .personalCenter {
    ::v-deep uni-button[type=primary] {
      background-color: $defaultColor;
    }

    .p_header {
      height: 88rpx;
      font-size: 46rpx;
      color: #333;
      font-weight: bold;
      @include flex(center, center);
    }

    .changeDept {
      margin: 24rpx 24rpx 0;

      button {
        margin-bottom: 16rpx;
      }
    }

    .orderDetail_info {
      padding: 0 24rpx;

      .orderDetail_infoItem {
        width: 702rpx;
        height: 25vh;
        background-color: #fff;
        border-radius: 8rpx;
        position: relative;
        padding: 0 24rpx 24rpx;
        font-size: 32rpx;
        @include border;
        @include semicircle(#f9fafb, 82rpx);
        @include flex(flex-start, stretch, column);

        .ji,
        .jiaji {
          width: 60rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .orderDetail_infoItem_header {
          height: 86rpx;
          @include border($directive:bottom, $style:dashed);
          @include flex(space-between, center);

          .orderDetail_infoItem_header_title {
            color: #333;
            @include flex(flex-start, center);

            .taskNameAndWorkerName {
              flex: 1;
              @include flex;

              .taskName {
                max-width: 10em;
                font-size: 38rpx;
                font-weight: bold;
                @include clamp;
              }
            }
          }

          .orderDetail_infoItem_header_more {
            color: #333;
            font-weight: bold;
            font-size: 38rpx;
            @include clamp;
          }
        }

        .orderDetail_infoItem_item {
          padding-top: 12rpx;
          padding-bottom: 12rpx;
          color: #333;
          font-size: 30rpx;
          flex: 1;
          @include border(bottom);
          @include flex(flex-start, stretch, column);

          &.process {
            padding-top: 90rpx;
            padding-bottom: 90rpx;
          }

          &:last-of-type {
            border-bottom: none;
          }

          // 工单信息
          .orderDetail_infoItem_item_content {
            margin-top: 20rpx;
            @include flex(space-between, stretch);

            .orderDetail_infoItem_item_name {
              font-size: 34rpx;
              color: #666;
              max-width: 4em;
            }

            .orderDetail_infoItem_item_value {
              font-size: 38rpx;
              color: #333;
              font-weight: bold;
              max-width: 420rpx;
              text-align: justify;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
</style>