Skip to content

C
clique-web
Commit a8ca127a by 曾经
Options

集团后台 横栏提醒

parent 28565236
Showing with 336 additions and 1 deletions
src/components/notice/expire-dialog.vue 0 → 100644
<template>
<el-dialog title="查看服务到期时间" :visible.sync="visible" width="600px" @close="onClose">
<el-table :data="list" max-height="700">
<el-table-column label="服务" prop="serviceName"></el-table-column>
<el-table-column label="到期时间" prop="expireDayStr"></el-table-column>
</el-table>
</el-dialog>
</template>
<script>
export default {
name: 'ExpireDialog',
data() {
return {};
},
props: {
visible: false,
list: []
},
methods: {
onClose() {
this.$emit('update:visible', false);
}
}
};
</script>
<style scoped></style>
src/components/notice/notice.vue 0 → 100644
<template>
<div>
<el-alert v-if="showNotice" class="notice-box" type="warning" show-icon @close="onClose">
<div class="notice-content" slot="title">
<div
class="expire-tip"
v-if="expireTip.show"
:style="{
'max-width': rechargeTip.show ? 'calc(100% - 500px)' : '100%'
}"
>
{{ expireTip.content }}
<el-button type="text" class="more-btn" @click="showDialog = true" v-if="expireTip.showButton">更多到期时间<i class="iconfont-components3 icon-cp-right"></i></el-button>
</div>
<div v-if="expireTip.show && rechargeTip.show" class="separator"></div>
<div v-if="rechargeTip.show" class="recharge-tip">
当前账户已欠费，为不影响正常的通讯业务，请及时充值。
<el-button type="text" class="rechange-btn" @click="toRecharge">前往充值中心<i class="iconfont-components3 icon-cp-right"></i></el-button>
</div>
</div>
</el-alert>
<expire-dialog :visible.sync="showDialog" :list="otherExpireServices"></expire-dialog>
</div>
</template>
<script>
import ExpireDialog from './expire-dialog.vue';
import { getAccountStateInfo, getExpireData } from './request.js';
export default {
name: 'Notice',
inject: ['projectName'],
components: { ExpireDialog },
data() {
return {
showNotice: false,
expireTip: {
show: false,
content: ''
},
rechargeTip: {
show: false
},
showDialog: false,
otherExpireServices: []
};
},
created() {
// 关闭通知后，所有页面都不再显示
// 下次登录后，如果任然欠费，需要再次显示通知
// 所以关闭通知后，不再查询账户欠费状态
if (sessionStorage.getItem('dmShowNotice') != 0) {
this.loadData();
}
},
methods: {
loadData() {
// this.loadAccountStateInfo();
this.loadExpireData();
},
loadAccountStateInfo() {
getAccountStateInfo().then((res) => {
const { errorCode, result } = res.data || {};
if (errorCode != 0) return;
this.rechargeTip.show = result.accountBlance <= 0;
if (this.rechargeTip.show) {
this.updateNoticeShow();
}
});
},
loadExpireData() {
let service = {
serviceType: 11,
serviceName: '集团商户'
};
let serviceType = service.serviceType;
getExpireData({
serviceType
}).then((res) => {
console.log(res);
const { errorCode, result } = res.data || {};
if (errorCode != 0) return;
let { otherExpireServices, expireStatus, expireDayStr, allExpire, clique } = result;
otherExpireServices = otherExpireServices || [];
let name = serviceType == 11 ? (clique ? (allExpire ? '集团商户' : '集团下部分商户') : service.serviceName) : service.serviceName;
if (expireStatus == 1) {
this.expireTip.content = `${name}将于 ${expireDayStr || ''} 到期，到期后将被冻结无法登录，请及时联系运营人员续费。`;
this.expireTip.show = true;
} else if (otherExpireServices.length) {
this.expireTip.content = `${otherExpireServices[0].serviceName}将于 ${otherExpireServices[0].expireDayStr} 到期，到期后功能无法使用，请及时联系运营人员续费。`;
this.expireTip.show = true;
}
this.expireTip.showButton = otherExpireServices.length && serviceType == 11;
this.otherExpireServices = otherExpireServices || [];
let dmUserInfo = JSON.parse(localStorage.getItem('dmUserInfo')) || {};
if (serviceType == 11 && !dmUserInfo.superAdmin) {
this.expireTip.show = false;
}
if (this.expireTip.show) {
this.updateNoticeShow();
}
console.log('this.expireTip----->', this.expireTip);
});
},
updateNoticeShow() {
if (this.showNotice) return;
this.showNotice = true;
this.$emit('show');
},
onClose() {
sessionStorage.setItem('dmShowNotice', 0);
this.showNotice = false;
this.$emit('close');
},
toRecharge() {
window.open(location.origin + '/marketing/#/recharge/do');
}
}
};
</script>
<style scoped>
.notice-box {
flex-shrink: 0;
padding: 0 21px;
width: 100%;
height: 42px;
background: #fef3eb;
}
.notice-box /deep/ .el-alert__content {
width: 100%;
}
.notice-box .notice-content {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 42px;
}
.notice-box .recharge-tip {
flex-shrink: 0;
width: 500px;
}
.notice-box .recharge-tip .rechange-btn {
margin-left: 12px;
font-weight: 500;
color: #fa8c16;
}
.notice-box .recharge-tip .rechange-btn /deep/ span {
display: flex;
align-items: center;
}
.notice-box .separator {
margin: 0 25px;
width: 2px;
height: 28px;
background: linear-gradient(180deg, rgba(253, 192, 49, 0) 0%, #fa8c16 50%, rgba(253, 192, 49, 0) 100%);
}
.notice-box .expire-tip {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: 600;
}
.notice-box .more-btn {
margin-left: 12px;
font-weight: 500;
color: #fa8c16;
}
.notice-box .more-btn /deep/ span {
display: flex;
align-items: center;
}
.notice-box /deep/ .el-alert__closebtn {
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #606266;
}
</style>
src/components/notice/request.js 0 → 100644
import { getRequest } from '@/api/api'; // Vue.axios
// function getRequest(url, params) {
// return Vue.axios({
// method: 'get',
// url: `${window.origin}${url}`,
// data: {},
// params: params,
// headers: { 'content-type': 'application/x-www-form-urlencoded' } // "token": token
// });
// }
export function getAccountStateInfo() {
return getRequest('api-marketing/account-state-info', {
requestProject: 'gic-clique'
});
}
function getUserInfo() {
return new Promise((resolve, reject) => {
getRequest('/api-auth/get-login-user-info', {
requestProject: 'gic-clique'
})
.then(res => {
let resData = res.data;
if (resData.errorCode == 0) {
let result = resData.result || {};
window.localStorage.setItem(
'dmUserInfo',
JSON.stringify({
enterpriseId: result.enterpriseId,
cliqueId: result.enterpriseDTO.cliqueId,
clerkId: result.userId,
damoUser: result.operationUserId,
superAdmin: result.superAdmin
})
);
resolve(result);
} else {
reject(resData);
}
})
.catch(reject);
});
}
export function getExpireData(params) {
return new Promise((resolve, reject) => {
getUserInfo()
.then(() => {
params = params || {};
let dmUserInfo = JSON.parse(localStorage.getItem('dmUserInfo'));
let serviceType = 11;
return getRequest('/api-admin/enterprise_expirebar', {
requestProject: 'gic-clique',
serviceType: serviceType,
cliqueId: dmUserInfo.cliqueId,
clerkId: dmUserInfo.clerkId,
isSuperAdmin: dmUserInfo.superAdmin,
enterpriseId: dmUserInfo.enterpriseId,
...params
})
.then(resolve)
.catch(reject);
// resolve({
// params,
// data: {
// errorCode: 0,
// result: {
// expireStatus: 1,
// expireDayStr: '1111',
// allExpire: 1,
// clique: 1
// }
// }
// });
})
.catch(reject);
});
}
src/components/notice/serviceUtil.js 0 → 100644
// 1好办，2微盟，3取数平台，4观云台，5万象仪，6分享有礼，7付费会员，8会员通，9抖音 10云服务器 11商户后台
const config = {
'/api-auth/login-for-haoban?requestProject=1': {
serviceName: '好办',
serviceType: 1
},
'/data-hook-frontend/#/flat-query-list': {
serviceName: '取数平台',
serviceType: 3
},
'/gicweb/cloud/#/storelist': {
serviceName: '观云台',
serviceType: 4
},
'/share-config/shareIndex': {
serviceName: '分享有礼',
serviceType: 6
},
'/gic-web/#/memberCardSet': {
serviceName: '付费会员',
serviceType: 7
},
}
const defaultService = {
serviceType: 11,
serviceName: '商户'
}
function getService(key) {
return config[key] || defaultService
}
export function getCurrentService() {
return getService(window.location.pathname + window.location.hash)
}
src/view/index/index.vue
......@@ -8,6 +8,7 @@
<vue-gic-aside-menu :projectName="projectName" :leftModulesName="leftModulesName" :collapseFlag="collapseFlag"></vue-gic-aside-menu>
</div>
<div class="right-right" :class="{ margin64: collapseFlag }">
<notice></notice>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
......@@ -23,8 +24,10 @@
<script>
import * as types from '../../store/types';
import { log } from '@/utils/index.js';
import Notice from '../../components/notice/notice.vue';
export default {
name: 'App',
components: { Notice },
data() {
return {
projectName: 'gic-clique',
......@@ -67,7 +70,7 @@ export default {
that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
},
components: {}
components: { Notice }
};
</script>
<style lang="less">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment