<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>
|
</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')
|
}
|
}
|
})
|
})
|
}
|
}
|
}
|
},
|
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)
|
}
|
}
|
},
|
},
|
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>
|
