289 lines
7.7 KiB
Vue
289 lines
7.7 KiB
Vue
<template>
|
|
<view class="page-content">
|
|
<!--主要内容-->
|
|
<view class="main-content">
|
|
<!--顶部信息-->
|
|
<view class="top">
|
|
<view class="title">四川金牛区代理-万马奔鸿实业D</view>
|
|
<view class="identity-info">
|
|
<view class="identity">省公司发起人</view>
|
|
<view class="change-btn">切换</view>
|
|
</view>
|
|
</view>
|
|
<!--下级订单中心-->
|
|
<view class="block-content order">
|
|
<view class="title">
|
|
<view class="left">下级订单中心</view>
|
|
<view class="right">
|
|
<text class="iconfont icon-xiangyou"></text>
|
|
</view>
|
|
</view>
|
|
<view class="info-list">
|
|
<view v-for="(item,index) in order_list" :key="index" class="info-list-item">
|
|
<view class="item-num">{{ item.num }}</view>
|
|
<view class="item-title">{{ item.title }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--数据统计-->
|
|
<view class="block-content statistics">
|
|
<view class="title">
|
|
<view class="left">数据统计</view>
|
|
<view class="right"></view>
|
|
</view>
|
|
<view class="info-list">
|
|
<view v-for="(item,index) in statistics_list" :key="index" class="info-list-item">
|
|
<view class="item-num">{{ item.num }}</view>
|
|
<view class="item-title">{{ item.title }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--工作台-->
|
|
<view class="block-content staging">
|
|
<view class="title">
|
|
<view class="left">工作台</view>
|
|
<view class="right">
|
|
<view class="see-btn">查看补货申请</view>
|
|
</view>
|
|
</view>
|
|
<view class="info-list">
|
|
<view v-for="(item,index) in staging_list" :key="index" class="info-list-item">
|
|
<view class="item-icon">
|
|
<text :class="['iconfont', item.icon ]"></text>
|
|
</view>
|
|
<view class="item-title">{{ item.title }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!--授权登录-->
|
|
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from "vuex";
|
|
import authorize from '@/components/Authorize';
|
|
|
|
export default {
|
|
name: 'business',
|
|
components: {
|
|
authorize,
|
|
},
|
|
computed: {
|
|
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
|
|
},
|
|
data() {
|
|
return {
|
|
// 登录相关
|
|
isAuto: false, //没有授权的不会自动授权
|
|
isShowAuth: false,//是否隐藏授权
|
|
// 下级订单中心相关信息
|
|
order_list: {
|
|
'toBeShipped': {title: '待发货', num: 0},
|
|
'toBeReceived': {title: '待收货', num: 0},
|
|
'exchangeInProgress': {title: '换货中', num: 0},
|
|
'completed': {title: '已完成', num: 0}
|
|
},
|
|
// 数据统计相关信息
|
|
statistics_list: {
|
|
'transactionVolumeToday': {title: '今日成交额', num: 0},
|
|
'transactionVolumeYesterday': {title: '昨日成交额', num: 0},
|
|
'transactionVolumeThisMonth': {title: '本月成交额', num: 0},
|
|
'orderCountToday': {title: '今日订单数', num: 0},
|
|
'orderCountYesterday': {title: '昨日订单数', num: 0},
|
|
'orderCountThisMonth': {title: '本月订单数', num: 0},
|
|
},
|
|
// 工作台
|
|
staging_list:[
|
|
{title: '库存管理', icon: 'icon-dingdan1'},
|
|
{title: '立即进货', icon: 'icon-daifahuo1'},
|
|
{title: '收入管理', icon: 'icon-jinbi_o'},
|
|
{title: '管辖门店', icon: 'icon-dianpu1'},
|
|
{title: '代理资料', icon: 'icon-jiaoyidingdan'},
|
|
{title: '推广二维码', icon: 'icon-hexiaoma'},
|
|
{title: '我的进货', icon: 'icon-fenxiaodingdan'},
|
|
{title: '省分公司', icon: 'icon-gerentouxiang_o'},
|
|
{title: '下载物料', icon: 'icon-baoguo_shouna_o'},
|
|
{title: '扫码核销', icon: 'icon-saoma'},
|
|
{title: '我的申报', icon: 'icon-quanbudingdan-3'},
|
|
{title: '业务员管理', icon: 'icon-wodetuandui'},
|
|
]
|
|
|
|
|
|
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// 判断：是否登录
|
|
if (!this.isLogin) {
|
|
// 未登录 授权登录
|
|
this.isAuto = true;
|
|
this.isShowAuth = true
|
|
}else{
|
|
// 已登录 获取信息
|
|
this.init();
|
|
}
|
|
},
|
|
methods: {
|
|
// 授权回调
|
|
onLoadFun() {
|
|
if(this.isLogin){
|
|
this.isShowAuth = false;
|
|
this.init();
|
|
}
|
|
},
|
|
// 授权关闭
|
|
authClose(e) {
|
|
this.isShowAuth = e
|
|
},
|
|
// 授权成功 初始化
|
|
init () {},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page-content{
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-color: #f6f6f6;
|
|
|
|
.main-content{
|
|
background: linear-gradient( to bottom, #82201d 0%, #82201d 300rpx, #f6f6f6 300rpx, #f6f6f6 100% );
|
|
padding: 0 25rpx;
|
|
// 公共块样式
|
|
.block-content{
|
|
--info-list-content-width-: calc((100vw - (25rpx * 2) - (25rpx * 2)));
|
|
|
|
background-color: #FFFFFF;
|
|
padding: 25rpx;
|
|
border-radius: 10rpx;
|
|
|
|
.title{
|
|
width: 100%;
|
|
height: 55rpx;
|
|
margin-bottom: 15rpx;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left{
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.info-list{
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
align-content: flex-start;
|
|
.info-list-item{
|
|
width: var(--info-list-item-size-);
|
|
//height: var(--info-list-item-size-);
|
|
height: 150rpx;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
.item-num{
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
.item-title{
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.block-content:not(:last-child){
|
|
margin-bottom: 20rpx;
|
|
}
|
|
// 顶部内容
|
|
.top{
|
|
padding-top: 10rpx;
|
|
padding-bottom: 20rpx;
|
|
color: #f8d0a9;
|
|
.title{
|
|
width: 100%;
|
|
font-size: 35rpx;
|
|
font-weight: bold;
|
|
height: 55rpx;
|
|
line-height: 45rpx;
|
|
}
|
|
.identity-info{
|
|
height: 45rpx;
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.identity{
|
|
font-size: 26rpx;
|
|
}
|
|
.change-btn{
|
|
margin-left: 20rpx;
|
|
background: #f8d0a9;
|
|
color: #82201d;
|
|
height: 35rpx;
|
|
line-height: 35rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
width: 80rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
// 下级订单中心
|
|
.order{
|
|
.info-list{
|
|
--info-list-item-size-: calc(var(--info-list-content-width-) / 4);
|
|
}
|
|
}
|
|
// 数据统计
|
|
.statistics{
|
|
.info-list{
|
|
--info-list-item-size-: calc(var(--info-list-content-width-) / 3);
|
|
}
|
|
}
|
|
// 工作台
|
|
.staging{
|
|
.title{
|
|
.right{
|
|
.see-btn{
|
|
background: #82201d;
|
|
color: #FFFFFF;
|
|
font-size: 26rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
border-radius: 100rpx;
|
|
padding: 0 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.info-list{
|
|
--info-list-item-size-: calc(var(--info-list-content-width-) / 4);
|
|
.item-icon{
|
|
.iconfont{
|
|
font-size: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|