删除没用的东西

hejianhao

2025-01-08 d8f03af7716a636ca48b87da29bcd6ccb2e6b8c6

 src/App.vue

@@ -1,552 +1,26 @@
<template>
  <div id="app">
    <transition v-if="['BlueIndex', 'Green', 'Purple'].includes(subjectUI)">
      <component :is="subjectUI"></component>
    </transition>
    <div class="three_app" v-if="['darkBlue'].includes(subjectUI)">
      <div class="three_header" v-if="tokenFlag">
        <div>
          <img @click="goHome" src="./assets/img/DarkBlue/backHome.png" />
          <div @click="goBack">返回上一页</div>
        </div>
        <div @click="openDetail">
          <img :src="info.systemLogo || logoUrl" />
          <div>{{ info.shopName || '-' }}</div>
        </div>
      </div>
      <div class="three_UI oa" :class="tokenFlag && 'dark'" v-if="['darkBlue'].includes(subjectUI)">
        <router-view />
      </div>
      <el-drawer custom-class="drawer_class" :visible.sync="drawer" :with-header="false">
        <div class="drawer_content">
          <div class="fs--24 font-w500 mt--44 txt-center">店铺信息</div>
          <div class="flex mt--55 fs--18 font-w500 ml--127 color1">
            <div class="w--108 mr--30">
              <div>店铺名称：</div>
              <div class="mt--25">店铺类型：</div>
              <div class="mt--25">店铺负责人：</div>
              <div class="mt--25">店铺账号：</div>
              <div class="mt--25">初始密码：</div>
            </div>
            <div class="font-bold">
              <div>{{ info.shopName || '-' }}</div>
              <div class="mt--25">{{ info.shopType ? ['餐饮', '货物销售'][info.shopType - 1] : '-' }}</div>
              <div class="mt--25">{{ info.shopHead || '-' }}</div>
              <div class="mt--25">{{ info.account || '-' }}</div>
              <div class="mt--25 flex a-center">
                <div>123456</div>
                <div class="license" @click="showOpen = true">修改密码</div>
              </div>
            </div>
          </div>
          <div class="ml--127 mt--26 fs--18 font-w500 color1">
            <div>店铺营业执照：</div>
            <el-image style="width: 280px; height: 210px;margin-top: 24px;" :src="info.businessLicense"
              :preview-src-list="[info.businessLicense]">
            </el-image>
          </div>
        </div>
        <div class="logOut_class" @click="logOut">退出登录</div>
        <img class="close" src="./assets/img/DarkBlue/shouqi@2x.png" @click="drawer = false" />
      </el-drawer>

      <el-dialog custom-class="dialog_class" :visible.sync="showOpen" width="680px" :modal-append-to-body="false">
        <div class="reset_password">
          <div class="top-con">
            <div class="reset_password_title">修改密码</div>
            <img class="pointer" @click="close" src="./assets/img/DarkBlue/icon_close@2x.png" />
          </div>
          <el-input placeholder="请输入登录密码" v-model="ruleForm.account">
            <img slot="prefix" class="prefix" src="./assets/img/DarkBlue/icon_login_user@2x.png" />
          </el-input>
          <el-input placeholder="请输入原密码" v-model="ruleForm.oldPassword">
            <img slot="prefix" class="prefix" src="./assets/img/DarkBlue/icon_login_password@2x.png" />
          </el-input>
          <el-input placeholder="请输入新密码" v-model="ruleForm.password">
            <img slot="prefix" class="prefix" src="./assets/img/DarkBlue/icon_login_password@2x.png" />
          </el-input>
          <el-input placeholder="确认新密码" v-model="ruleForm.confirmPassword">
            <img slot="prefix" class="prefix" src="./assets/img/DarkBlue/icon_login_password@2x.png" />
          </el-input>
          <el-button :loading="loading" type="primary" @click="submit">确认修改</el-button>
        </div>
      </el-dialog>
    </div>
    <<router-view />
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { mapState, mapActions } from "vuex";
import "./assets/font.css";
import "./utils/basics.less";
import "./utils/app.css";

import autofit from "autofit.js";

import { login, getStoreDetail, reLogin } from "@/view/service";

export default {
  name: "app",
  components: {
    BlueIndex,
    Green,
    Purple
  },
  computed: {
    ...mapState(["subjectUI", "loginOrIndex"]),
  },
  data() {
    return {
      logoUrl: require('./assets/storeLogo.png'),
      tokenFlag: false,
      info: {},
      drawer: false,
      showOpen: false,
      loading: false,
      ruleForm: {
        account: '',
        oldPassword: '',
        password: '',
        confirmPassword: ''
      },
    };
  },
  created() {
    let path = this.$route.path;
    let query = this.$route.query;
    if (localStorage.getItem('token') && localStorage.getItem('token') != 'undefined') {
      if (this.subjectUI == 'BlueIndex' || this.subjectUI == 'Green' || this.subjectUI == 'Purple') {
        if (Object.keys(query).length == 0) {
          if (this.subjectUI == 'Green' || this.subjectUI == 'Purple') {
            this.setLoginOrIndex('Layout');
          } else {
            this.setLoginOrIndex('Blue');
          }
          if (localStorage.getItem('token') && localStorage.getItem('token') != 'undefined') {
            if (path == '/') {
              if (this.subjectUI == 'Purple') {
                this.$router.replace('/statistics')
              } else {
                if (localStorage.getItem('roleType') == 3) {
                  this.$router.replace('/goodsOrder')
                } else {
                  this.$router.replace('/buffetTable')
                }
              }
            } else {
              this.$router.replace(path)
            }
          } else {
            this.$router.replace('/')
          }
        } else {
          reLogin({ username: query.username }).then(resp => {
            localStorage.setItem('token', resp.data.token)
            getStoreDetail().then(res => {
              localStorage.setItem('userInfo', JSON.stringify(resp.data.userInfo))
              localStorage.setItem('roleType', resp.data.userInfo.roleType)
              localStorage.setItem('info', JSON.stringify(res.data))
              if (this.subjectUI == 'Green' || this.subjectUI == 'Purple') {
                this.setLoginOrIndex('Layout');
              } else {
                this.setLoginOrIndex('Blue');
              }
              if (this.subjectUI == 'Purple') {
                this.$router.replace('/statistics')
              } else {
                if (localStorage.getItem('roleType') == 3) {
                  this.$router.replace('/goodsOrder')
                } else {
                  this.$router.replace('/buffetTable')
                }
              }
            })
          })
        }
      }
    } else {
      if (this.subjectUI == 'BlueIndex' || this.subjectUI == 'Green' || this.subjectUI == 'Purple') {
        if (Object.keys(query).length == 0) {
          localStorage.clear();
          this.setLoginOrIndex("Login");
          this.$router.replace('/')
        } else {
          reLogin({ username: query.username }).then(resp => {
            localStorage.setItem('token', resp.data.token)
            getStoreDetail().then(res => {
              localStorage.setItem('userInfo', JSON.stringify(resp.data.userInfo))
              localStorage.setItem('roleType', resp.data.userInfo.roleType)
              localStorage.setItem('info', JSON.stringify(res.data))
              if (this.subjectUI == 'Green' || this.subjectUI == 'Purple') {
                this.setLoginOrIndex('Layout');
              } else {
                this.setLoginOrIndex('Blue');
              }
              if (this.subjectUI == 'Purple') {
                this.$router.replace('/statistics')
              } else {
                if (localStorage.getItem('roleType') == 3) {
                  this.$router.replace('/goodsOrder')
                } else {
                  this.$router.replace('/buffetTable')
                }
              }
            })
          })
        }
      }
    }
  },
  created() {},
  mounted() {
    autofit.init({
      designHeight: 900,
      designWidth: 1440,
      dh: 900,
      dw: 1440,
      el: "body",
      resize: true,
    }, false);
  },
  methods: {
    ...mapActions([
      "setLoginOrIndex",
    ]),
    close() {
      this.showOpen = false
      this.ruleForm = {
        account: '',
        oldPassword: '',
        password: '',
        confirmPassword: ''
      }
    },
    submit() {
      if (!this.ruleForm.account) {
        Message({
          message: "请输入账号",
          type: "warning",
          duration: 1500,
        })
        return
      }
      if (!this.ruleForm.oldPassword) {
        Message({
          message: "请输入原密码",
          type: "warning",
          duration: 1500,
        })
        return
      }
      if (!this.ruleForm.password) {
        Message({
          message: "请输入新密码",
          type: "warning",
          duration: 1500,
        })
        return
      }
      if (!this.ruleForm.confirmPassword) {
        Message({
          message: "请确认新密码",
          type: "warning",
          duration: 1500,
        })
        return
      }
      if (this.ruleForm.password != this.ruleForm.confirmPassword) {
        Message({
          message: "两次新密码不一致",
          type: "warning",
          duration: 1500,
        })
        return
      }
      this.loading = true
      updatePwd({
        account: this.ruleForm.account,
        confirmPassword: this.ruleForm.confirmPassword,
        oldPassword: this.ruleForm.oldPassword,
        password: this.ruleForm.password
      }).then(res => {
        this.loading = false
        this.ruleForm = {
          account: '',
          oldPassword: '',
          password: '',
          confirmPassword: ''
        }
        Message({
          message: res.msg,
          type: "success",
          duration: 1500,
        })
      }).catch(err => {
        this.loading = false
      })
    },
    logOut() {
      let obj = JSON.parse(localStorage.getItem('acountObj'))
      localStorage.clear();
      localStorage.setItem('acountObj', JSON.stringify(obj))
      this.drawer = false
      this.$router.replace('/');
    },
    openDetail() {
      this.drawer = true
    },
    goHome() {
      let path = this.$route.path
      if (path != '/home') {
        this.$router.replace('/home')
      }
    },
    goBack() {
      if (localStorage.getItem('token') && localStorage.getItem('token') != 'undefined') {
        let path = this.$route.path
        if (path == '/home') {
          let obj = JSON.parse(localStorage.getItem('acountObj'))
          localStorage.clear();
          if (obj) {
            localStorage.setItem('acountObj', JSON.stringify(obj))
          }
          this.$router.replace('/')
        } else {
          this.$router.go(-1)
        }
      }
    },
  },
  methods: {},
  beforeUpdate() {
    if (localStorage.getItem('token') && localStorage.getItem('token') != 'undefined') {
      this.info = JSON.parse(localStorage.getItem('info'))
      this.tokenFlag = true
    } else {
      this.info = {}
      this.tokenFlag = false
    }
  }
};
</script>

<style lang='less'>
::-webkit-scrollbar {
  // display: none;
}

.v-modal {
  z-index: 999 !important;
}

.el-dialog__wrapper {
  z-index: 1000 !important;
}

#app {
  width: 100%;
  height: 100%;
  font-family: 'PingFang SC Medium';
}

.color1 {
  color: rgba(0, 0, 0, .73);
}

.three_app {
  width: 100%;
  height: 100%;
  background-image: url('./assets/img/DarkBlue/DarkBlueBG.png');
  background-size: 100% 100%;

  .three_header {
    font-family: 'PingFang SC Medium';
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 30px;
    margin-bottom: 11px;

    div:nth-child(1) {
      display: flex;
      align-items: center;

      img {
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-right: 15px;
      }

      div {
        cursor: pointer;
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF;
      }
    }

    div:nth-child(2) {
      display: flex;
      align-items: center;

      img {
        cursor: pointer;
        width: 36px;
        height: 36px;
        margin-right: 8px;
        border-radius: 50%;
      }

      div {
        cursor: pointer;
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF;
      }
    }
  }

  .three_UI {
    height: calc(100% - 106px);

  }

  .drawer_class {
    width: 500px !important;
    border-radius: 56px 0px 0px 56px !important;

    .drawer_content {
      position: relative;

      .license {
        cursor: pointer;
        margin-left: 26px;
        padding: 4px 10px;
        font-weight: 400;
        font-size: 14px;
        color: rgba(95, 118, 248, 1);
        border-radius: 14px;
        border: 1px solid #5F76F8;
      }
    }
  }


  .logOut_class {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    padding: 14px 63px;
    border-radius: 4px;
    border: 1px solid #E8E8E8;
  }

  .close {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 13px;
    width: 22px;
    height: 16px;
  }

}

.four_app {
  width: 100%;
  height: 100%;
}

.dialog_class {
  border-radius: 16px;

  .el-dialog__body {
    padding: 41px 0 42px 0;
  }

  .el-dialog__header {
    display: none;
  }

  .reset_password {
    display: flex;
    flex-direction: column;
    align-items: center;

    .top-con {
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;

      .reset_password_title {
        font-family: 'PingFang SC Medium';
        font-weight: 600;
        font-size: 26px;
        color: #333333;
        margin-bottom: 49px;
      }

      img {
        position: absolute;
        right: 18px;
        width: 24px;
        height: 26px;
      }
    }

    .el-input>.el-input__inner::placeholder {
      font-family: 'PingFang SC-Regular';
      font-size: 15px;
      font-weight: 400;
      color: rgba(200, 202, 214, 1);
    }

    .el-input {
      width: 311px;
      margin-top: 20px;
    }

    .el-input:first-child {
      margin-top: unset;
    }

    .el-input>.el-input__inner {
      width: 311px;
      height: 45px;
      font-size: 17px;
      padding: 0 41px;
    }

    .el-input__prefix {
      display: flex;
      align-items: center;
      left: 16px;
    }

    .prefix {
      width: 16px;
      height: 16px;
    }

    .el-button {
      margin-top: 39px;
      font-family: 'PingFangSC-semibold';
      width: 311px;
      height: 50px;
      background: #5F76F8;
      border-radius: 4px;
      font-weight: 600;
      font-size: 18px;
      color: #FFFFFF;
      align-items: center;
      align-content: center;
      padding: unset;
      border: unset;
    }
  }
}
</style>
<style lang='less'></style>