yf_xsn/discern/src/components/setting/setting.vue

<!--  -->
<template>
  <div class="setting_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="setting_head">
      <div class="setting_head_returnA" @click="FanHui()">
        <img
          src="../../assets/image/new/30.png"
          alt
          class="setting_head_returnA_img"
        />
      </div>

      <!-- 标题 -->
      <div class="head_title">
        <span class="head_title_text">设置</span>
      </div>
    </div>

    <!-- list列表 -->
    <ul class="setting_box_ul">
      <!-- 版本更新 -->
      <li class="setting_box_li" @click="update()">
        <div class="setting_box_li_account">
          <div class="li_account_box">
            <span class="li_account_text">版本更新</span>
          </div>
        </div>
      </li>

      <!-- 版本更新记录 -->
      <li class="setting_box_li" @click="versionsUpdateHistory()">
        <div class="setting_box_li_nickname">
          <div class="li_nickname_box">
            <span class="li_nickname_text">版本更新记录</span>
          </div>
          <div class="nickname_user_box"></div>
        </div>
      </li>

      <!-- 个人信息编辑 -->
      <li class="setting_box_li" @click="userMessage()">
        <div class="setting_box_li_password">
          <div class="li_password_box">
            <span class="li_password_text">个人信息编辑</span>
          </div>
        </div>
      </li>

      <!-- 登录退出 -->
      <li class="setting_box_li" @click="log_out()">
        <div class="setting_box_li_password" style="border: 0">
          <div class="li_password_box">
            <span class="li_password_text">退出登录</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      isClick: true, //版本更新开关
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    input: function () {
      this.input = this.input.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, "");
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回到home页面
    FanHui() {
      let _this = this;
      _this.$router.replace("/person");
    },

    // 点击进入个人信息编辑界面
    userMessage() {
      var that = this;
      that.$router.push("/mine");
    },

    // 点击进入版本更新记录界面
    versionsUpdateHistory() {
      var that = this;
      that.$router.push("/versions_updateHistory");
    },

    // 点击版本更新请求接口
    update() {
      var that = this;
      var isClick = that.isClick;
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "get",
            url: "http://192.168.1.8:8002/edition",
          })
          .then((res) => {
            console.log(res.data);
            let num = "115"; //当前版本
            var data = res.data.edition_num;
            var a = data.replace(/\./g, "");
            if (num === a) {
              this.$message({
                showClose: true,
                message: "当前已经是最新版本",
                duration: 1500,
              });
            } else if (num < a) {
              this.$notify({
                title: "成功",
                message: "检测到有新版本，需要更新",
                type: "success",
                duration: 1500,
              });
              const timerA = setInterval(() => {
                var wait = plus.nativeUI.showWaiting("下载更新中，请勿关闭");
                //创建一个下载任务
                var dtask = plus.downloader.createDownload(
                  "http://192.168.1.8:8002/down_app/deity.apk",
                  {
                    method: "GET",
                  },
                  function (d, status) {
                    if (status == 200) {
                      console.log("Download success: " + d.filename);
                      plus.runtime.install(d.filename); // 安装下载的apk文件
                    } else {
                      that.$message({
                        type: "info",
                        message: "更新失败",
                      });
                      //						plus.runtime.install('../H5B2852C7_0925104810.apk'); // 安装下载的apk文件
                    }
                    wait.close();
                  }
                );
                //开始下载
                dtask.start();
                clearInterval(timerA);
              }, 1500);
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 2000);
      }
    },

    // 点击退出登录
    //退出登录
    log_out() {
      this.$confirm("即将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: "http://192.168.1.8:8002/out_land",
          })
            .then((res) => {
              if (res.data === 0) {
                this.$message({
                  type: "success",
                  message: "退出成功!",
                });
                sessionStorage.removeItem("login");
                localStorage.removeItem("homeIndex");
                this.$router.replace("/");
              } else if (res.data === 1) {
                this.$message({
                  type: "info",
                  message: "退出失败，请重试",
                  duration: 1500,
                });
              }
            })
            .catch((err) => {
              this.$message({
                type: "info",
                message: "退出失败，请重试",
                duration: 1500,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出",
            duration: 1500,
          });
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    localStorage.removeItem("insect"); //删除本地的虫害值
    localStorage.removeItem("plant"); //删除本地的病害值
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.get_boderHeight();
  },
};
</script>
<style>
.el-message-box {
  width: 320px;
}
</style>
<style lang='scss' scoped>
@import "../../assets/scss/bus.scss";

.setting_box {
  background: #f6f6f6;
}

span {
  margin-left: 0;
}



// 头部
.setting_box .setting_head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
  height: 1.2rem;
}

// 返回图标
.setting_box .setting_head_returnA {
  padding: 0.3rem 0 0 0.5rem;
}

.setting_head_returnA_img {
  width: 0.5rem;
  height: 0.5rem;
}

// 标题
.setting_box .head_title {
  margin: 0.14rem 3.8rem 0 0;
}

.setting_box .head_title_text {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 0 -2rem;
  line-height: 0.95rem;
  color: #fff;
}

// list列表
.setting_box_ul {
  margin: -0.4rem 0 0 0;
  background: #fff;
}

.setting_box_li {
  margin: 0 0 0.2rem 0;
}

// 头像
.setting_box_li_portrait {
  border-bottom: 2px solid #f6f6f6;
  height: 1rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.li_portrait_box {
  margin: 0.35rem 0 0 0.45rem;
}

.li_portrait_text {
  color: #000;
  font-size: 13px;
  font-weight: 500;
}

.portrait_img_box {
  margin: 0.1rem 0.15rem 0 0;
}

.portrait_img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50px;
}

// 账号
.setting_box_li_account {
  border-bottom: 2px solid #f6f6f6;
  height: 1rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.li_account_box {
  margin: 0.35rem 0 0 0.45rem;
}

.li_account_text {
  //   color: #000;
  color: #5c5c5c;
  font-size: 13px;
  font-weight: 500;
}

.account_accountNumber_box {
  margin: 0.5rem 0 0 0;
}

.accountNumber_text {
  color: #999999;
}

// 账号
.setting_box_li_nickname {
  border-bottom: 5px solid #f6f6f6;
  height: 1rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.li_nickname_box {
  margin: 0.35rem 0 0 0.95rem;
}

.li_nickname_text {
  color: #5c5c5c;
  font-size: 13px;
  font-weight: 500;
}

.nickname_user_box {
  margin: 0.5rem 0.55rem 0 0;
}

.nickname_text {
  color: #999999;
}

//修改密码
.setting_box_li_password {
  height: 1rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #f6f6f6;
}

.li_password_box {
  //   margin: .35rem 0 0 .95rem;
  margin: 0.35rem 0 0 0.45rem;
}

.li_password_text {
  color: #5c5c5c;
  font-size: 13px;
  font-weight: 500;
}

// 修改头像弹框
.picture_box {
  position: relative;
  top: -6.409rem;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.setting_box .modification {
  width: 4rem;
}

.picture_box_div {
  border: 1px solid rgb(255, 255, 255);
  position: absolute;
  left: 23%;
  top: 20%;
  border-radius: 5px;
  background: #eeeded;
}

.picture_box_ul {
  width: 5.5rem;
}

.picture_box_li {
  border-bottom: 1px solid #fff;
}

.picture_box_li_text {
  font-size: 23px;
  padding: 0.2rem 0 0.2rem 0;
  color: rgb(146, 146, 146);
}

.picture_box_li_del {
  border-bottom: 1px solid #fff;
}

.picture_box_del_img {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0 0 4.8rem;
}

//修改昵称
.el-button--primary span {
  margin: 0;
}

.modify_the_picture {
  display: inline-block;
}

.avatar-uploader {
  position: absolute;
  left: 0;
  bottom: 0.5rem;
}

.el-icon-plus:before {
  font-size: 40px;
  color: #fff;
}
</style>