版本迭代
This commit is contained in:
liuye
387
src/view/Home.vue
Normal file
387
src/view/Home.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="admin">
|
||||
<div class="admin-top">
|
||||
<div class="logo">
|
||||
<!-- <img src="../../assets/images/logo.png" /> -->
|
||||
<div>
|
||||
<h1>TEMU助手</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-right">
|
||||
<div class="left" @click="toActive">
|
||||
<span>{{ $store.state.userInfo.name + "(" + $store.state.userInfo.phone + ")" }}</span>
|
||||
<div :style="{marginLeft: '10px', color: $store.state.userInfo.flag == 1? 'green': 'red'}">({{ getStateInfo }})</div>
|
||||
</div>
|
||||
<el-dropdown @command="onMallChange" v-if="mallName">
|
||||
<div class="userinfo">
|
||||
<span>{{ mallName }}</span>
|
||||
<img src="../assets/images/bottom.png" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="(item, index) in mallList"
|
||||
:command="item"
|
||||
:key="index">
|
||||
{{ item.mallName }}
|
||||
</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-menu-item index="/normalSendGoods">
|
||||
<i class="el-icon-shopping-cart-2"></i>
|
||||
<span slot="title">普通备货单</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/copyProduct">
|
||||
<i class="el-icon-document-copy"></i>
|
||||
<span slot="title">商品复制</span>
|
||||
</el-menu-item>
|
||||
<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-s-data"></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>
|
||||
<div style="position: absolute; bottom: 20px; padding-left: 20px; ">
|
||||
<div style="cursor: pointer; font-size: 16px;" @click="$store.commit('SignOut', true)">
|
||||
<i class="el-icon-back" style="color: white; margin-right: 5px;"></i>
|
||||
<span style="color: white">退出</span>
|
||||
</div>
|
||||
</div>
|
||||
</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="30%"
|
||||
:before-close="handleClose">
|
||||
<el-form :model="form" label-position="top" ref="form" label-width="100px" class="form">
|
||||
<el-form-item
|
||||
prop="mallName"
|
||||
label="当前绑定账号"
|
||||
:rules="[{ required: true, message: '请先登录拼多多跨境卖家中心', trigger: 'blur' }]">
|
||||
<el-input readonly placeholder="请先登录拼多多跨境卖家中心" v-model="form.mallName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="mallId"
|
||||
v-show="false"
|
||||
:rules="[{ message: '请输入商城ID', trigger: 'blur' }]">
|
||||
<el-input placeholder="请输入商城ID" v-model="form.mallId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="code"
|
||||
label="激活码"
|
||||
:rules="[{ required: true, message: '请输入激活码', trigger: 'blur' }]">
|
||||
<el-input placeholder="请输入激活码" v-model="form.code"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="$store.commit('setActiveDlgShow', false)">取 消</el-button>
|
||||
<el-button type="primary" @click="active">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isCollapse: false,
|
||||
activePath: '/home',
|
||||
form: {
|
||||
mallId: this.$store.state.mallId,
|
||||
mallName: this.$store.state.mallName,
|
||||
code: ''
|
||||
},
|
||||
vipType: ["体验会员","月会员","半年会员","年会员","年会员多店通用"]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStateInfo() {
|
||||
if (this.$store.state.userInfo.flag == 0) {
|
||||
return '未激活';
|
||||
} else if (this.$store.state.userInfo.flag == 1) {
|
||||
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 () {
|
||||
this.activePath = this.$route.fullPath
|
||||
},
|
||||
|
||||
methods: {
|
||||
onMallChange (e) {
|
||||
this.$store.commit('setMallName', e.mallName)
|
||||
this.$store.commit('setMallId', e.mallId)
|
||||
location.reload()
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.form.mallId = "";
|
||||
this.form.mallName = "";
|
||||
this.form.code = "";
|
||||
this.$store.commit('setActiveDlgShow', false)
|
||||
},
|
||||
toActive() {
|
||||
this.$store.commit('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.$store.commit('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: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
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>
|
||||
Reference in New Issue
Block a user