|
|
@@ -1,254 +1,257 @@
|
|
|
-<template>
|
|
|
- <div v-loading="loading">
|
|
|
- <div>
|
|
|
- <div class="welcome" :style="getEmpBg(myEmpLv['ICON_TYPE'])">
|
|
|
- <h1>欢迎您,{{userName}}
|
|
|
-
|
|
|
- <b v-if="verified==='0'" class="text-danger"> 您未实名认证,请登录商城系统完善会员资料并上传身份证</b>
|
|
|
- </h1>
|
|
|
- <el-row :gutter="0" class="wel-info">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="12">当前系统时间:{{nowDateTime}}</el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="12">最高聘级:{{myEmpLv['LEVEL_NAME']!='无聘级'?myEmpLv['LEVEL_NAME']:''}}<span v-if="myEmpLv['ICON_TYPE']==0">无</span><img
|
|
|
- :src="getEmpIco(myEmpLv['ICON_TYPE'])" alt=""
|
|
|
- v-for="(o,key) in parseInt(myEmpLv['ICON_NUM'])"
|
|
|
- :key="key" v-if="myEmpLv['ICON_TYPE']>0">
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="12">会员级别:{{decLvName}}</el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="12">当前业绩期:{{periodNum}}</el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div style="display: none;">
|
|
|
-<!-- <el-button type="primary" @click="go('/config/base')">个人设置</el-button>-->
|
|
|
- <el-button type="success" @click="go('/user/index')">个人资料</el-button>
|
|
|
-<!-- <el-button type="danger" @click="go('/user/rec-user')">开拓会员</el-button>-->
|
|
|
- <el-button type="primary" @click="go('/finance/flow-bonus')">奖金流水</el-button>
|
|
|
- <el-button type="warning" @click="go('/finance/withdraw')">提现明细</el-button>
|
|
|
- <el-button type="success" @click="go('/finance/perf')">往期业绩</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-carousel trigger="click" :height="bannerHeight+'px'">
|
|
|
- <el-carousel-item v-for="(item,key) in slides" :key="key">
|
|
|
- <template v-if="item.TYPE==='1'">
|
|
|
- <a :href="item.CONTENT" target="_blank" class="islide">
|
|
|
- <img ref="bannerHeight" :src="item.IMAGE" alt="" @load="imgLoad">
|
|
|
- </a>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <router-link :to="`/article/detail/${item.CONTENT}`" target="_blank" class="islide"><img ref="bannerHeight" :src="item.IMAGE" alt="" @load="imgLoad"></router-link>
|
|
|
- </template>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
-
|
|
|
- <el-row :gutter="10" class="news-c">
|
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="(item,key) in news" :key="key">
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>{{item.CATE_NAME}}</span>
|
|
|
- <el-button type="text" class="box-card-more">
|
|
|
- <router-link :to="`/article/list/${item.ID}`">more+</router-link>
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- <div v-for="(o,k) in item.LISTS" :key="k" class="text item" v-if="item.LISTS.length>0">
|
|
|
- <router-link :to="`/article/detail/${o.ID}`" :title="o.TITLE">{{sub_str(o.TITLE)}}</router-link>
|
|
|
- <span>{{tool.formatDate(o.CREATED_AT,false)}}</span>
|
|
|
- </div>
|
|
|
- <div v-if="item.LISTS.length==0">暂无内容</div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import network from '@/utils/network'
|
|
|
- import tool from '@/utils/tool'
|
|
|
- import baseInfo from '@/utils/baseInfo'
|
|
|
- import userInfo from '@/utils/userInfo'
|
|
|
- import countUp from 'vue-countup-v2'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'dashboard_index',
|
|
|
- components: {
|
|
|
- countUp
|
|
|
- },
|
|
|
- mounted() {
|
|
|
+<template>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <div>
|
|
|
+ <div class="welcome" :style="getEmpBg(myEmpLv['ICON_TYPE'])">
|
|
|
+ <h1>欢迎您,{{userName}}
|
|
|
+
|
|
|
+ <b v-if="verified==='0'" class="text-danger"> 您未实名认证,请登录商城系统完善会员资料并上传身份证</b>
|
|
|
+ </h1>
|
|
|
+ <el-row :gutter="0" class="wel-info">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="12">当前系统时间:{{nowDateTime}}</el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="12">最高聘级:{{myEmpLv['LEVEL_NAME']!='无聘级'?myEmpLv['LEVEL_NAME']:''}}<span v-if="myEmpLv['ICON_TYPE']==0">无</span><img
|
|
|
+ :src="getEmpIco(myEmpLv['ICON_TYPE'])" alt=""
|
|
|
+ v-for="(o,key) in parseInt(myEmpLv['ICON_NUM'])"
|
|
|
+ :key="key" v-if="myEmpLv['ICON_TYPE']>0">
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="12">会员级别:{{decLvName}}</el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="12">当前业绩期:{{periodNum}}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div style="display: none;">
|
|
|
+<!-- <el-button type="primary" @click="go('/config/base')">个人设置</el-button>-->
|
|
|
+ <el-button type="success" @click="go('/user/index')">个人资料</el-button>
|
|
|
+<!-- <el-button type="danger" @click="go('/user/rec-user')">开拓会员</el-button>-->
|
|
|
+ <el-button type="primary" @click="go('/finance/flow-bonus')">奖金流水</el-button>
|
|
|
+ <el-button type="warning" @click="go('/finance/withdraw')">提现明细</el-button>
|
|
|
+ <el-button type="success" @click="go('/finance/perf')">往期业绩</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-carousel trigger="click" :height="bannerHeight+'px'">
|
|
|
+ <el-carousel-item v-for="(item,key) in slides" :key="key">
|
|
|
+ <template v-if="item.TYPE==='1'">
|
|
|
+ <a :href="item.CONTENT" target="_blank" class="islide">
|
|
|
+ <img ref="bannerHeight" :src="imageArticle(item.IMAGE)" alt="" @load="imgLoad">
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <router-link :to="`/article/detail/${item.CONTENT}`" target="_blank" class="islide"><img ref="bannerHeight" :src="imageArticle(item.IMAGE)" alt="" @load="imgLoad"></router-link>
|
|
|
+ </template>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="news-c">
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="(item,key) in news" :key="key">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>{{item.CATE_NAME}}</span>
|
|
|
+ <el-button type="text" class="box-card-more">
|
|
|
+ <router-link :to="`/article/list/${item.ID}`">more+</router-link>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div v-for="(o,k) in item.LISTS" :key="k" class="text item" v-if="item.LISTS.length>0">
|
|
|
+ <router-link :to="`/article/detail/${o.ID}`" :title="o.TITLE">{{sub_str(o.TITLE)}}</router-link>
|
|
|
+ <span>{{tool.formatDate(o.CREATED_AT,false)}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.LISTS.length==0">暂无内容</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import network from '@/utils/network'
|
|
|
+ import tool from '@/utils/tool'
|
|
|
+ import baseInfo from '@/utils/baseInfo'
|
|
|
+ import userInfo from '@/utils/userInfo'
|
|
|
+ import countUp from 'vue-countup-v2'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'dashboard_index',
|
|
|
+ components: {
|
|
|
+ countUp
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
network.getData(`dashboard/index`).then(response => {
|
|
|
- console.log(response);
|
|
|
- this.myEmpLv.ID = this.baseEmpLevels[response.empLv]['ID']
|
|
|
- this.myEmpLv.LEVEL_NAME = this.baseEmpLevels[response.empLv]['LEVEL_NAME']
|
|
|
- this.myEmpLv.ICON_TYPE = this.baseEmpLevels[response.empLv]['ICON_TYPE']
|
|
|
- this.myEmpLv.ICON_NUM = this.baseEmpLevels[response.empLv]['ICON_NUM']
|
|
|
- this.slides = response.slides
|
|
|
- this.news = response.news
|
|
|
- this.periodNum = response.periodNum
|
|
|
- this.decLvName = response.decLvName
|
|
|
- this.loading = false
|
|
|
- this.imgLoad()
|
|
|
- return network.getData(`dashboard/bonus-num`)
|
|
|
- })
|
|
|
- if(this.verified==='0'){
|
|
|
- this.$confirm('您未实名认证,请登录商城系统完善会员资料并上传身份证', '请注意', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- }).catch(() => {
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
- this.calcTime()
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- this.imgLoad()
|
|
|
- }, false)
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: true,
|
|
|
- tool: tool,
|
|
|
- nowTime: tool.getTimestamp(),
|
|
|
- userName: userInfo.userName(),
|
|
|
- verified: userInfo.baseData().VERIFIED,
|
|
|
- baseEmpLevels: baseInfo.empLevels(),
|
|
|
- myEmpLv: {'ID': 0, 'LEVEL_NAME': null, 'ICON_TYPE': 0, 'ICON_NUM': 0},
|
|
|
- slides: [],
|
|
|
- news: [],
|
|
|
- periodNum: '',
|
|
|
- decLvName: '',
|
|
|
- bannerHeight: '',
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- nowDateTime: function () {
|
|
|
- return tool.formatDate(this.nowTime)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getEmpIco(type) {
|
|
|
- if (type) return require('@/assets/emp-ico-' + type + '.png')
|
|
|
- },
|
|
|
- getEmpBg(type) {
|
|
|
- if (type != 0) return 'backgroundImage:url(' + require('@/assets/emp-bg-' + type + '.png') + ')'
|
|
|
- },
|
|
|
- sub_str(str, len = 15) {
|
|
|
- if (str) return str.slice(0, len)
|
|
|
- },
|
|
|
- calcTime() {
|
|
|
- let obj = this
|
|
|
- setInterval(function () {
|
|
|
- obj.nowTime += 1
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- go: function (url) {
|
|
|
- this.$router.push(url)
|
|
|
- },
|
|
|
- imgLoad() {
|
|
|
- let _this = this
|
|
|
- _this.$nextTick(function () {
|
|
|
- _this.bannerHeight = _this.$refs.bannerHeight[0].height
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- h1 {
|
|
|
- margin-top: 0
|
|
|
- }
|
|
|
-
|
|
|
- .welcome {
|
|
|
- padding-bottom: 10px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: right top;
|
|
|
- }
|
|
|
-
|
|
|
- .wel-info {
|
|
|
- line-height: 36px;
|
|
|
- }
|
|
|
-
|
|
|
- .wel-info img {
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- .news-c .el-col .box-card {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .news-c .el-col:nth-child(3n+1) .box-card {
|
|
|
- border-bottom: 4px solid #f34d14;
|
|
|
- }
|
|
|
-
|
|
|
- .news-c .el-col:nth-child(3n+2) .box-card {
|
|
|
- border-bottom: 4px solid #27a2d3;
|
|
|
- }
|
|
|
-
|
|
|
- .news-c .el-col:nth-child(3n+3) .box-card {
|
|
|
- border-bottom: 4px solid #1bbc61;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card-more {
|
|
|
- float: right;
|
|
|
- padding: 3px 10px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card-more a {
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card-more:hover {
|
|
|
- border-color: #409EFF;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card .item {
|
|
|
- position: relative;
|
|
|
- line-height: 30px;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card .item:before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- background: #f60;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card .item:after {
|
|
|
- content: '';
|
|
|
- display: table;
|
|
|
- clear: both;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card .item a {
|
|
|
- color: #333;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card .item a:hover {
|
|
|
- color: #f60;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card .item span {
|
|
|
- float: right;
|
|
|
- color: #999;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .islide {
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .islide img {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 330px;
|
|
|
- }
|
|
|
-</style>
|
|
|
+ console.log(response);
|
|
|
+ this.myEmpLv.ID = this.baseEmpLevels[response.empLv]['ID']
|
|
|
+ this.myEmpLv.LEVEL_NAME = this.baseEmpLevels[response.empLv]['LEVEL_NAME']
|
|
|
+ this.myEmpLv.ICON_TYPE = this.baseEmpLevels[response.empLv]['ICON_TYPE']
|
|
|
+ this.myEmpLv.ICON_NUM = this.baseEmpLevels[response.empLv]['ICON_NUM']
|
|
|
+ this.slides = response.slides
|
|
|
+ this.news = response.news
|
|
|
+ this.periodNum = response.periodNum
|
|
|
+ this.decLvName = response.decLvName
|
|
|
+ this.loading = false
|
|
|
+ this.imgLoad()
|
|
|
+ return network.getData(`dashboard/bonus-num`)
|
|
|
+ })
|
|
|
+ if(this.verified==='0'){
|
|
|
+ this.$confirm('您未实名认证,请登录商城系统完善会员资料并上传身份证', '请注意', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ }).catch(() => {
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.calcTime()
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ this.imgLoad()
|
|
|
+ }, false)
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ tool: tool,
|
|
|
+ nowTime: tool.getTimestamp(),
|
|
|
+ userName: userInfo.userName(),
|
|
|
+ verified: userInfo.baseData().VERIFIED,
|
|
|
+ baseEmpLevels: baseInfo.empLevels(),
|
|
|
+ myEmpLv: {'ID': 0, 'LEVEL_NAME': null, 'ICON_TYPE': 0, 'ICON_NUM': 0},
|
|
|
+ slides: [],
|
|
|
+ news: [],
|
|
|
+ periodNum: '',
|
|
|
+ decLvName: '',
|
|
|
+ bannerHeight: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ nowDateTime: function () {
|
|
|
+ return tool.formatDate(this.nowTime)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getEmpIco(type) {
|
|
|
+ if (type) return require('@/assets/emp-ico-' + type + '.png')
|
|
|
+ },
|
|
|
+ getEmpBg(type) {
|
|
|
+ if (type != 0) return 'backgroundImage:url(' + require('@/assets/emp-bg-' + type + '.png') + ')'
|
|
|
+ },
|
|
|
+ sub_str(str, len = 15) {
|
|
|
+ if (str) return str.slice(0, len)
|
|
|
+ },
|
|
|
+ calcTime() {
|
|
|
+ let obj = this
|
|
|
+ setInterval(function () {
|
|
|
+ obj.nowTime += 1
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ go: function (url) {
|
|
|
+ this.$router.push(url)
|
|
|
+ },
|
|
|
+ imgLoad() {
|
|
|
+ let _this = this
|
|
|
+ _this.$nextTick(function () {
|
|
|
+ _this.bannerHeight = _this.$refs.bannerHeight[0].height
|
|
|
+ })
|
|
|
+ },
|
|
|
+ imageArticle(imageUrl) {
|
|
|
+ return tool.getLocaleLink(imageUrl, '/files/');
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ h1 {
|
|
|
+ margin-top: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .welcome {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: right top;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wel-info {
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wel-info img {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-c .el-col .box-card {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-c .el-col:nth-child(3n+1) .box-card {
|
|
|
+ border-bottom: 4px solid #f34d14;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-c .el-col:nth-child(3n+2) .box-card {
|
|
|
+ border-bottom: 4px solid #27a2d3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-c .el-col:nth-child(3n+3) .box-card {
|
|
|
+ border-bottom: 4px solid #1bbc61;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card-more {
|
|
|
+ float: right;
|
|
|
+ padding: 3px 10px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card-more a {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card-more:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card .item {
|
|
|
+ position: relative;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card .item:before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background: #f60;
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ top: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card .item:after {
|
|
|
+ content: '';
|
|
|
+ display: table;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card .item a {
|
|
|
+ color: #333;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card .item a:hover {
|
|
|
+ color: #f60;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card .item span {
|
|
|
+ float: right;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .islide {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .islide img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 330px;
|
|
|
+ }
|
|
|
+</style>
|