|
|
@@ -1,23 +1,316 @@
|
|
|
<template>
|
|
|
<div class="app-main app-content">
|
|
|
+ <!-- 用户信息 -->
|
|
|
+ <div class="user-wrap">
|
|
|
+ <div class="user-top">
|
|
|
+ <div>今日概况</div>
|
|
|
+ <app-avatar-module :width="80" />
|
|
|
+ </div>
|
|
|
+ <div class="income-amount">
|
|
|
+ <div>收入金额</div>
|
|
|
+ <div class="price">3279.5</div>
|
|
|
+ </div>
|
|
|
+ <div class="user-bottom">
|
|
|
+ <div class="info-list">
|
|
|
+ <div class="info-list-name">浏览量</div>
|
|
|
+ <div class="info-list-value">127</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-list">
|
|
|
+ <div class="info-list-name">新粉丝</div>
|
|
|
+ <div class="info-list-value">82</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-list">
|
|
|
+ <div class="info-list-name">新客户</div>
|
|
|
+ <div class="info-list-value">32</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 订单总览 -->
|
|
|
+ <!-- <div class="module-com order-wrap">
|
|
|
+ <div class="total-blo">
|
|
|
+ <div class="total-list" v-for="(item, index) in orderData" :key="index">
|
|
|
+ <div class="list-num">{{ item.value }}</div>
|
|
|
+ <div class="app-color-3">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- 消息 -->
|
|
|
+ <!-- <div class="module-com news-wrap">
|
|
|
+ <div class="news-list" v-for="(item, index) in 3" :key="index">
|
|
|
+ <div class="news-left">
|
|
|
+ <i class="iconfont iconxiaoxi2"></i>
|
|
|
+ <span>您还没有绑定公众号</span>
|
|
|
+ </div>
|
|
|
+ <div class="news-right">
|
|
|
+ <span>立即授权绑定</span>
|
|
|
+ <i class="iconfont iconxiangyou"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- 客户按钮 -->
|
|
|
+ <!-- <div class="module-com tabs-wrap">
|
|
|
+ <div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="$util.pageTo(item)">
|
|
|
+ <div class="tabs-img">
|
|
|
+ <img :src="item.img" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ <div class="tabs-name">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- 总览 -->
|
|
|
+ <!-- <div class="module-com total-wrap">
|
|
|
+ <div class="total-tit">总览</div>
|
|
|
+ <div class="total-blo">
|
|
|
+ <div class="total-list" v-for="(item, index) in totalData" :key="index">
|
|
|
+ <div class="list-num">{{ item.value }}</div>
|
|
|
+ <div class="app-color-3">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
<fab-module />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import FabModule from '@/components/plugin/fab'
|
|
|
+import appAvatarModule from '@/components/module/app-avatar'
|
|
|
+// img
|
|
|
+import tabIcon1 from '@/static/images/admin/tab-icon-1.png'
|
|
|
+import tabIcon2 from '@/static/images/admin/tab-icon-2.png'
|
|
|
+import tabIcon3 from '@/static/images/admin/tab-icon-3.png'
|
|
|
+import tabIcon4 from '@/static/images/admin/tab-icon-4.png'
|
|
|
+import tabIcon5 from '@/static/images/admin/tab-icon-5.png'
|
|
|
+import tabIcon6 from '@/static/images/admin/tab-icon-6.png'
|
|
|
+import tabIcon7 from '@/static/images/admin/tab-icon-7.png'
|
|
|
+import tabIcon8 from '@/static/images/admin/tab-icon-8.png'
|
|
|
export default {
|
|
|
name: 'admin-workbench',
|
|
|
components: {
|
|
|
- FabModule
|
|
|
+ FabModule,
|
|
|
+ appAvatarModule
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- constant: this.$constant
|
|
|
+ // 订单总览
|
|
|
+ orderData: [
|
|
|
+ {
|
|
|
+ name: '待付款',
|
|
|
+ value: 127
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待配送',
|
|
|
+ value: 42
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配送中',
|
|
|
+ value: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待通知',
|
|
|
+ value: 89
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已完结',
|
|
|
+ value: 489
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待退款',
|
|
|
+ value: 22
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // tab按钮
|
|
|
+ tabsData: [
|
|
|
+ {
|
|
|
+ name: '商品管理',
|
|
|
+ img: tabIcon1,
|
|
|
+ url: '/pages/coupon/list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '邀请有礼',
|
|
|
+ img: tabIcon2,
|
|
|
+ url: '/pages/coupon/list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '优惠券',
|
|
|
+ img: tabIcon3,
|
|
|
+ url: '/pages/coupon/list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '广告管理',
|
|
|
+ img: tabIcon4,
|
|
|
+ funtion: () => {
|
|
|
+ this.remarkModal = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '促销',
|
|
|
+ img: tabIcon5,
|
|
|
+ funtion: () => {
|
|
|
+ this.rechargeModal = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '员工管理',
|
|
|
+ img: tabIcon6,
|
|
|
+ funtion: () => {
|
|
|
+ this.passwordModal = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '我的邀请',
|
|
|
+ img: tabIcon7,
|
|
|
+ funtion: () => {
|
|
|
+ this.upgradeModal = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '设置',
|
|
|
+ img: tabIcon8,
|
|
|
+ url: '/pages/coupon/list'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 总览
|
|
|
+ totalData: [
|
|
|
+ {
|
|
|
+ name: '客户数',
|
|
|
+ value: 127
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '粉丝数',
|
|
|
+ value: 42
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '会员数',
|
|
|
+ value: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总收入（元）',
|
|
|
+ value: 8589
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总访问量',
|
|
|
+ value: 489
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '剩余短信',
|
|
|
+ value: 22
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ // 公共
|
|
|
+ .module-com {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ // padding: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ // box-shadow: 0px 6px 16px #ddd;
|
|
|
+ // border-radius: 10px;
|
|
|
+ }
|
|
|
+ // 用户信息
|
|
|
+ .user-wrap {
|
|
|
+ padding: 20px 40px 40px 30px;
|
|
|
+ .user-top {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ }
|
|
|
+ .income-amount {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .price {
|
|
|
+ font-size: 50px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 消息
|
|
|
+ .news-wrap {
|
|
|
+ .news-list {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ padding: 30px 24px 30px 30px;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ font-size: 26px;
|
|
|
+ color: $fontColor2;
|
|
|
+ &:active {
|
|
|
+ background-color: $backColor;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ }
|
|
|
+ .news-left {
|
|
|
+ .iconfont {
|
|
|
+ color: $mainColor;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .news-right {
|
|
|
+ font-size: 24px;
|
|
|
+ color: $mainColor;
|
|
|
+ transform: scale(0.9);
|
|
|
+ @include disFlex(flex-end, flex-start);
|
|
|
+ .iconfont {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 总览
|
|
|
+ .total-wrap, .order-wrap {
|
|
|
+ .total-tit {
|
|
|
+ padding: 18px 0 18px 20px;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .total-blo {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 30px 0 40px;
|
|
|
+ .total-list {
|
|
|
+ width: 33%;
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 54px;
|
|
|
+ border-right: 1px solid $borderColor;
|
|
|
+ .list-num {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total-list:nth-child(3n) {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ .total-list:nth-child(n + 4) {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // tabs
|
|
|
+ .tabs-wrap {
|
|
|
+ padding: 40px 10px;
|
|
|
+ @include disFlex(center, center);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .tabs-list {
|
|
|
+ width: 25%;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ text-align: center;
|
|
|
+ .tabs-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs-name {
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ &:nth-child(n + 5) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
liujd
