391 lines
11 KiB
Vue
391 lines
11 KiB
Vue
<template>
|
|
<div class="admin">
|
|
<div class="admin-top">
|
|
<div class="logo">
|
|
<img src="../assets/images/logo.png" />
|
|
<span>v{{ version }}</span>
|
|
</div>
|
|
<div class="admin-right">
|
|
<el-tooltip class="item" effect="dark" content="用户激活" placement="top">
|
|
<div class="left" @click="toActive">
|
|
<span>会员信息:</span>
|
|
<div :style="{marginLeft: '10px', color: $store.state.userInfo.flag == 1? 'green': 'red'}">{{ getStateInfo }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<el-dropdown @command="handleClick">
|
|
<div class="userinfo">
|
|
<span>{{ $store.state.userInfo.name + "(" + $store.state.userInfo.phone + ")" }}</span>
|
|
<img src="../assets/images/bottom.png" />
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<!-- <el-dropdown-item command="phone">修改手机</el-dropdown-item> -->
|
|
<el-dropdown-item command="pwd">修改密码</el-dropdown-item>
|
|
<el-dropdown-item command="message">消息推送</el-dropdown-item>
|
|
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="admin-main">
|
|
<el-scrollbar class="left">
|
|
<el-menu
|
|
:default-active="activePath"
|
|
:collapse-transition="true"
|
|
unique-opened
|
|
background-color="#545c64"
|
|
router
|
|
text-color="#fff"
|
|
:collapse="isCollapse">
|
|
<el-menu-item index="/welcome">
|
|
<i class="el-icon-monitor"></i>
|
|
<span slot="title">工作台</span>
|
|
</el-menu-item>
|
|
<el-submenu index="/normalSendGoods">
|
|
<template slot="title">
|
|
<i class="el-icon-shopping-cart-2"></i>
|
|
<span slot="title">备货单管理</span>
|
|
</template>
|
|
<el-menu-item index="/normalSendGoods">抢仓发货</el-menu-item>
|
|
<el-menu-item index="/shippingDesk">发货台管理</el-menu-item>
|
|
<el-menu-item index="/waitPackageList">待装箱发货单</el-menu-item>
|
|
<el-menu-item index="/waitShippingList">待收货发货单</el-menu-item>
|
|
<el-menu-item index="/shippingList">已收货发货单</el-menu-item>
|
|
</el-submenu>
|
|
|
|
<el-submenu index="/copyProduct">
|
|
<template slot="title">
|
|
<i class="el-icon-goods"></i>
|
|
<span slot="title">商品管理</span>
|
|
</template>
|
|
<el-menu-item index="/copyProduct">商品复制</el-menu-item>
|
|
</el-submenu>
|
|
<el-submenu index="/niubiCopy">
|
|
<template slot="title">
|
|
<i class="el-icon-magic-stick"></i>
|
|
<span slot="title">选品采集</span>
|
|
</template>
|
|
<el-menu-item index="/niubiCopy">智能复制</el-menu-item>
|
|
</el-submenu>
|
|
|
|
<el-menu-item index="/saleData">
|
|
<i class="el-icon-s-data"></i>
|
|
<span slot="title">销售数据</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/learning">
|
|
<i class="el-icon-eleme"></i>
|
|
<span slot="title">新手园地</span>
|
|
</el-menu-item>
|
|
<!-- <el-menu-item index="/statistics">
|
|
<i class="el-icon-s-data"></i>
|
|
<span slot="title">数据统计</span>
|
|
</el-menu-item> -->
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
<div class="container">
|
|
<transition name="fade-transform" mode="out-in">
|
|
<keep-alive include="NormalSendGoods">
|
|
<router-view class="container-app"></router-view>
|
|
</keep-alive>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
<el-dialog
|
|
title="激活充值"
|
|
:visible="$store.state.activeDlgShow"
|
|
:close-on-click-modal="false"
|
|
width="1200"
|
|
:before-close="handleClose">
|
|
<ai-payment/>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapMutations, mapState} from 'vuex'
|
|
import AiPayment from "@/components/AiPayment.vue";
|
|
|
|
export default {
|
|
components: {AiPayment},
|
|
data () {
|
|
return {
|
|
isCollapse: false,
|
|
activePath: '/home',
|
|
form: {
|
|
mallId: this.$store.state.mallId,
|
|
mallName: this.$store.state.mallName,
|
|
code: ''
|
|
},
|
|
version: '',
|
|
vipType: ["体验会员","月会员","半年会员","年会员","年会员多店通用"]
|
|
}
|
|
},
|
|
computed: {
|
|
getStateInfo() {
|
|
if (this.$store.state.userInfo.flag == 0) {
|
|
return '未激活';
|
|
} else if (this.$store.state.userInfo.flag == 1) {
|
|
if (this.$store.state.userInfo.type != 4) {
|
|
return `(${this.$store.state.userInfo.mallName})` + this.vipType[this.$store.state.userInfo.type] + '/有效期至' + this.$store.state.userInfo.expireTime;
|
|
} else {
|
|
return this.vipType[this.$store.state.userInfo.type] + '/有效期至' + this.$store.state.userInfo.expireTime
|
|
}
|
|
|
|
} else {
|
|
return '已过期';
|
|
}
|
|
},
|
|
|
|
...mapState(['mallName', 'mallList'])
|
|
},
|
|
|
|
watch: {
|
|
$route (v) {
|
|
this.activePath = v.fullPath
|
|
}
|
|
},
|
|
|
|
created () {
|
|
const devVersion = require('../manifest.development.json').version
|
|
const prodVersion = require('../manifest.production.json').version
|
|
this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
|
|
this.activePath = this.$route.fullPath
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations(['setActiveDlgShow']),
|
|
handleClick (e) {
|
|
if (e === 'logout') {
|
|
this.$store.dispatch('SignOut', false)
|
|
} else if (e === 'pwd') {
|
|
this.$router.push('changePwd')
|
|
} else if (e === 'message') {
|
|
this.$router.push('message')
|
|
}
|
|
},
|
|
handleClose() {
|
|
this.form.mallId = "";
|
|
this.form.mallName = "";
|
|
this.form.code = "";
|
|
this.setActiveDlgShow(false)
|
|
},
|
|
toActive() {
|
|
this.setActiveDlgShow(true)
|
|
},
|
|
getMessage(type) {
|
|
return `你使用的是“${this.vipType[type]}”兑换券，确定兑换？`;
|
|
},
|
|
active() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
this.$http.post(`/api/coupon/getDetail`, null, {
|
|
params: {
|
|
code: this.form.code
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
let msg = this.getMessage(res.data.type);
|
|
this.$confirm(msg, '温馨提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'info'
|
|
}).then(() => {
|
|
this.$http.post(`/api/order/upgradeByCode`, null, {
|
|
params: {
|
|
...this.form
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('激活成功')
|
|
this.$store.dispatch('getUserInfo')
|
|
this.setActiveDlgShow(false)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
});
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.admin {
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: #f4f4f4;
|
|
|
|
.fade-transform-leave-active,
|
|
.fade-transform-enter-active {
|
|
transition: all .4s;
|
|
}
|
|
|
|
.fade-transform-enter {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
.fade-transform-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.admin-main {
|
|
display: flex;
|
|
align-items: center;
|
|
height: calc(100% - 64px);
|
|
overflow: hidden;
|
|
border-top: 1px solid rgba(0,0,0,0.15);
|
|
|
|
.container {
|
|
flex: 1;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.container-app {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.left {
|
|
width: 246px;
|
|
height: 100%;
|
|
background: #545c64;
|
|
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 10px;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 24px 0 36px;
|
|
// box-shadow: 0px 1px 0px 0px rgba(128, 128, 128, 0.1);
|
|
background: #fff;
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
span {
|
|
position: relative;
|
|
bottom: 12px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
img {
|
|
width: 60px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
h1 {
|
|
line-height: 25px;
|
|
color: #1F2635;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
p {
|
|
margin-top: 1px;
|
|
line-height: 17px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #A5A9BC;
|
|
}
|
|
}
|
|
|
|
.admin-middle {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 64px;
|
|
|
|
span {
|
|
position: relative;
|
|
margin-right: 60px;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
font-size: 16px;
|
|
color: #1F2635;
|
|
cursor: pointer;
|
|
transition: all ease 0.5s;
|
|
|
|
&.active::after {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 9px;
|
|
z-index: 1;
|
|
width: 52px;
|
|
height: 4px;
|
|
background: #00A971;
|
|
transform: translateX(-50%);
|
|
content: ' ';
|
|
}
|
|
|
|
&.active, &:hover {
|
|
color: #1FBAD6;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-right {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: all ease 0.3s;
|
|
|
|
&:hover {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.userinfo {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 56px;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
transition: all ease 0.3s;
|
|
|
|
&:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
span {
|
|
margin-right: 8px;
|
|
color: #1F2635;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|