'设置banner图'

gst4base
JayChou 3 weeks ago
parent b0d9ffd4e4
commit 20452ecc0f
  1. 4
      jeecgboot-vue3-master/src/api/sys/setting.ts
  2. 246
      jeecgboot-vue3-master/src/views/setPath/index.vue
  3. 203
      jeecgboot-vue3-master/src/views/system/loginmini/MiniLogin.vue

@ -0,0 +1,4 @@
import { defHttp } from '/@/utils/http/axios';
export const getConfig = () => {
return defHttp.post({ url: '/sysconfiguration/sysConfiguration/findconfig' });
};

@ -1,90 +1,94 @@
<template> <template>
<a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish" <a-form
@validate="handleValidate" @finishFailed="handleFinishFailed"> ref="formRef"
<a-form-item label="名称" name="name"> name="custom-validation"
<a-input v-model:value="formState.name" /> :model="formState"
</a-form-item> v-bind="layout"
<a-form-item label="新闻首页" name="newsPage"> @finish="handleFinish"
<a-input v-model:value="formState.newsPage" /> @validate="handleValidate"
</a-form-item> @finishFailed="handleFinishFailed"
<a-form-item label="备案号" name="recordNumber"> >
<a-textarea v-model:value="formState.recordNumber" placeholder="Basic usage" :rows="4" /> <a-form-item label="名称" name="name">
</a-form-item> <a-input v-model:value="formState.name" />
<a-form-item label="版权信息" name="copyright"> </a-form-item>
<a-textarea v-model:value="formState.copyright" placeholder="Basic usage" :rows="4" /> <a-form-item label="新闻首页" name="newsPage">
</a-form-item> <a-input v-model:value="formState.newsPage" />
</a-form-item>
<a-form-item has-feedback label="LOGO" name="logo"> <a-form-item label="备案号" name="recordNumber">
<j-image-upload v-model:value="formState.logo" /> <a-textarea v-model:value="formState.recordNumber" placeholder="Basic usage" :rows="4" />
</a-form-item> </a-form-item>
<a-form-item class="h-item" has-feedback label="作品上传路径" name="composition"> <a-form-item label="版权信息" name="copyright">
<a-input v-model:value="formState.composition" type="text" autocomplete="off" /> <a-textarea v-model:value="formState.copyright" placeholder="Basic usage" :rows="4" />
<a-button :icon="h(FolderOpenOutlined)" </a-form-item>
@click="openModal(true, { path: 'sadsad', target: 'composition' })">浏览</a-button>
</a-form-item> <a-form-item has-feedback label="LOGO" name="logo">
<a-form-item class="h-item" has-feedback label="比赛证书上传路径" name="certificate"> <j-image-upload v-model:value="formState.logo" />
<a-input v-model:value="formState.certificate" type="text" autocomplete="off" /> </a-form-item>
<a-button :icon="h(FolderOpenOutlined)" <a-form-item has-feedback label="banner" name="banner">
@click="openModal(true, { path: 'sadsad', target: 'certificate' })">浏览</a-button> <j-image-upload v-model:value="formState.banner" />
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }"> <a-form-item class="h-item" has-feedback label="作品上传路径" name="composition">
<a-button type="primary" html-type="submit" @click="submit">保存</a-button> <a-input v-model:value="formState.composition" type="text" autocomplete="off" />
</a-form-item> <a-button :icon="h(FolderOpenOutlined)" @click="openModal(true, { path: 'sadsad', target: 'composition' })">浏览</a-button>
</a-form> </a-form-item>
<div class="px-10"> <a-form-item class="h-item" has-feedback label="比赛证书上传路径" name="certificate">
<Modal @register="register" @confirmPath="hanConPat" /> <a-input v-model:value="formState.certificate" type="text" autocomplete="off" />
</div> <a-button :icon="h(FolderOpenOutlined)" @click="openModal(true, { path: 'sadsad', target: 'certificate' })">浏览</a-button>
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" html-type="submit" @click="submit">保存</a-button>
</a-form-item>
</a-form>
<div class="px-10">
<Modal @register="register" @confirmPath="hanConPat" />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue'; import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import Modal from './Modal.vue'; import Modal from './Modal.vue';
import { PlusOutlined } from '@ant-design/icons-vue'; import { PlusOutlined } from '@ant-design/icons-vue';
import type { UploadProps } from 'ant-design-vue'; import type { UploadProps } from 'ant-design-vue';
import { FolderOpenOutlined } from '@ant-design/icons-vue'; import { FolderOpenOutlined } from '@ant-design/icons-vue';
import { reactive, ref, h } from 'vue'; import { reactive, ref, h } from 'vue';
import type { Rule } from 'ant-design-vue/es/form'; import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue'; import type { FormInstance } from 'ant-design-vue';
import { getDataListApi, updPathApi } from '/@/api/sys/user'; import { getDataListApi, updPathApi } from '/@/api/sys/user';
getDataListApi().then(res => { getDataListApi().then((res) => {
Object.assign(formState, res.records[0]); Object.assign(formState, res.records[0]);
}) });
const fileList = ref<UploadProps['fileList']>([]); const fileList = ref<UploadProps['fileList']>([]);
const handleCancel = () => { const handleCancel = () => {
previewVisible.value = false; previewVisible.value = false;
previewTitle.value = ''; previewTitle.value = '';
}; };
const handlePreview = async (file: UploadProps['fileList'][number]) => { const handlePreview = async (file: UploadProps['fileList'][number]) => {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
file.preview = (await getBase64(file.originFileObj)) as string; file.preview = (await getBase64(file.originFileObj)) as string;
} }
previewImage.value = file.url || file.preview; previewImage.value = file.url || file.preview;
previewVisible.value = true; previewVisible.value = true;
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1); previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
}; };
// LOGO upload // LOGO upload
function getBase64(file: File) { function getBase64(file: File) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result); reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error); reader.onerror = (error) => reject(error);
}); });
} }
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
interface FormState { interface FormState {
name: string; name: string;
logo: any; logo: any;
newsPage: string; newsPage: string;
@ -92,9 +96,10 @@ interface FormState {
copyright: string; copyright: string;
certificate: string; certificate: string;
composition: string; composition: string;
} banner: string;
const formRef = ref<FormInstance>(); }
const formState = reactive<FormState>({ const formRef = ref<FormInstance>();
const formState = reactive<FormState>({
name: '', name: '',
logo: previewImage.value, logo: previewImage.value,
newsPage: '', newsPage: '',
@ -102,80 +107,81 @@ const formState = reactive<FormState>({
copyright: '', copyright: '',
certificate: '', certificate: '',
composition: '', composition: '',
}); banner: '',
const checkAge = async (_rule: Rule, value: number) => { });
const checkAge = async (_rule: Rule, value: number) => {
if (!value) { if (!value) {
return Promise.reject('Please input the age'); return Promise.reject('Please input the age');
} }
if (!Number.isInteger(value)) { if (!Number.isInteger(value)) {
return Promise.reject('Please input digits'); return Promise.reject('Please input digits');
} else { } else {
if (value < 18) { if (value < 18) {
return Promise.reject('Age must be greater than 18'); return Promise.reject('Age must be greater than 18');
} else { } else {
return Promise.resolve(); return Promise.resolve();
} }
} }
}; };
function submit() { function submit() {
updPathApi(formState).then(res => { console.log(formState);
console.log(res, 'res'); // return
}) updPathApi(formState).then((res) => {
} console.log(res, 'res');
const validatePass = async (_rule: Rule, value: string) => { });
}
const validatePass = async (_rule: Rule, value: string) => {
if (value === '') { if (value === '') {
return Promise.reject('Please input the password'); return Promise.reject('Please input the password');
} else { } else {
if (formState.checkPass !== '') { if (formState.checkPass !== '') {
formRef.value.validateFields('checkPass'); formRef.value.validateFields('checkPass');
} }
return Promise.resolve(); return Promise.resolve();
} }
}; };
const validatePass2 = async (_rule: Rule, value: string) => { const validatePass2 = async (_rule: Rule, value: string) => {
if (value === '') { if (value === '') {
return Promise.reject('Please input the password again'); return Promise.reject('Please input the password again');
} else if (value !== formState.pass) { } else if (value !== formState.pass) {
return Promise.reject("Two inputs don't match!"); return Promise.reject("Two inputs don't match!");
} else { } else {
return Promise.resolve(); return Promise.resolve();
} }
}; };
const layout = { const layout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 14 }, wrapperCol: { span: 14 },
}; };
const handleFinish = (values: FormState) => { const handleFinish = (values: FormState) => {
console.log(values, formState); console.log(values, formState);
}; };
const handleFinishFailed = errors => { const handleFinishFailed = (errors) => {
console.log(errors); console.log(errors);
}; };
const resetForm = () => { const resetForm = () => {
formRef.value.resetFields(); formRef.value.resetFields();
}; };
const handleValidate = (...args) => { const handleValidate = (...args) => {
console.log(args); console.log(args);
}; };
// //
const [register, { openModal }] = useModal(); const [register, { openModal }] = useModal();
function hanConPat(currentlySelecte, target) { function hanConPat(currentlySelecte, target) {
formState[target] = currentlySelecte; formState[target] = currentlySelecte;
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.h-item { .h-item {
.ant-input { .ant-input {
width: 90%; width: 90%;
} }
.ant-btn { .ant-btn {
width: 10%; width: 10%;
} }
} }
</style> </style>

@ -1,9 +1,6 @@
<template> <template>
<div :class="prefixCls" class="login-background-img"> <div :class="prefixCls" class="login-background-img">
<AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false" />
<AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
<AppDarkModeToggle class="absolute top-3 right-7 enter-x" /> <AppDarkModeToggle class="absolute top-3 right-7 enter-x" />
<div class="aui-logo" v-if="!getIsMobile"> <div class="aui-logo" v-if="!getIsMobile">
<div> <div>
@ -19,30 +16,26 @@
<div class="aui-content"> <div class="aui-content">
<div class="aui-container"> <div class="aui-container">
<div class="aui-form"> <div class="aui-form">
<div class="aui-formBox"> <div class="aui-formBox">
<div class="aui-formWell"> <div class="aui-formWell">
<div class="login-title">{{ t('sys.login.signInFormTitle') }}</div> <div class="login-title">{{ t('sys.login.signInFormTitle') }}</div>
<div class="aui-form-box"> <div class="aui-form-box">
<a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick"> <a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick">
<div class="aui-account"> <div class="aui-account">
<div class="aui-inputClear"> <div class="aui-inputClear">
<a-form-item> <a-form-item>
<div>账号</div> <div>账号</div>
<a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')" v-model:value="formData.username" /> <a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
</a-form-item> </a-form-item>
</div> </div>
<div class="aui-inputClear"> <div class="aui-inputClear">
<a-form-item> <a-form-item>
<div>密码</div> <div>密码</div>
<a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" /> <a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
</a-form-item> </a-form-item>
</div> </div>
<div class="aui-inputClear"> <div class="aui-inputClear">
<a-form-item> <a-form-item>
<div>验证码</div> <div>验证码</div>
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" /> <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
@ -85,9 +78,10 @@
<div class="aui-formButton"> <div class="aui-formButton">
<div class="aui-flex"> <div class="aui-flex">
<a-button :loading="loginLoading" class="aui-link-login aui-flex-box" type="primary" @click="loginHandleClick"> <a-button :loading="loginLoading" class="aui-link-login aui-flex-box" type="primary" @click="loginHandleClick">
{{ t('sys.login.loginButton') }}</a-button> {{ t('sys.login.loginButton') }}</a-button
>
</div> </div>
<!-- <div class="aui-flex"> <!-- <div class="aui-flex">
<a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a> <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
</div>--> </div>-->
<!-- <div class="aui-flex"> <!-- <div class="aui-flex">
@ -117,19 +111,19 @@
<a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a> <a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
</div> </div>
</div>--> </div>-->
<div class="aui-flex-box" style="display: flex; align-items: center;justify-content: center;"> <div class="aui-flex-box" style="display: flex; align-items: center; justify-content: center">
<div class="aui-third-login" style="margin: 0;margin-right: 40px;"> <div class="aui-third-login" style="margin: 0; margin-right: 40px">
<!-- <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a> --> <!-- <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a> -->
<SvgIcon name="phone" :size="28"/> <SvgIcon name="phone" :size="28" />
</div> </div>
<div class="aui-third-login" style="margin: 0;margin-left: 40px;"> <div class="aui-third-login" style="margin: 0; margin-left: 40px">
<SvgIcon name="weiChart" :size="28" /> <SvgIcon name="weiChart" :size="28" />
<!-- <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a> --> <!-- <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a> -->
</div> </div>
</div> </div>
</div> </div>
<div style="display: flex;justify-content: center;margin-top: 20px;"> <div style="display: flex; justify-content: center; margin-top: 20px">
还没账号?&nbsp;&nbsp;<span style="color: #02DDDD;cursor: pointer;" @click="registerHandleClick">点击注册</span> 还没账号?&nbsp;&nbsp;<span style="color: #02dddd; cursor: pointer" @click="registerHandleClick">点击注册</span>
</div> </div>
</a-form> </a-form>
</div> </div>
@ -164,15 +158,22 @@
import MiniRegister from './MiniRegister.vue'; import MiniRegister from './MiniRegister.vue';
import MiniCodelogin from './MiniCodelogin.vue'; import MiniCodelogin from './MiniCodelogin.vue';
// import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png'; // import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
import logoImg from '/public/resource/img/comp/comp_logo.png'; // import logoImg from '/public/resource/img/comp/comp_logo.png';
import SvgIcon from '/@/components/Icon/src/SvgIcon.vue'; import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
// import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png'; // import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import { useLocaleStore } from '/@/store/modules/locale'; import { useLocaleStore } from '/@/store/modules/locale';
import { useDesign } from "/@/hooks/web/useDesign"; import { useDesign } from '/@/hooks/web/useDesign';
import { useAppInject } from "/@/hooks/web/useAppInject"; import { useAppInject } from '/@/hooks/web/useAppInject';
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue'; import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
import { getConfig } from '/@/api/sys/setting';
const logoImg = ref('');
const getConfigEvent = async () => {
const res = await getConfig();
console.log(res, 'res');
logoImg.value = `${import.meta.env.VITE_GLOB_DOMAIN_URL}/${res.logo}`;
};
getConfigEvent();
const IconFont = createFromIconfontCN({ const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js', scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
}); });
@ -393,7 +394,7 @@
*/ */
function handleSuccess(value) { function handleSuccess(value) {
Object.assign(formData, value); Object.assign(formData, value);
Object.assign(phoneFormData, { mobile: "", smscode: "" }); Object.assign(phoneFormData, { mobile: '', smscode: '' });
type.value = 'login'; type.value = 'login';
activeIndex.value = 'accountLogin'; activeIndex.value = 'accountLogin';
handleChangeCheckCode(); handleChangeCheckCode();
@ -437,7 +438,6 @@
right: 0px; right: 0px;
z-index: 9; z-index: 9;
.card { .card {
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -463,13 +463,12 @@
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
color: #FFFFFF; color: #ffffff;
line-height: 17px; line-height: 17px;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
} }
.bas { .bas {
@ -479,12 +478,11 @@
} }
.bot { .bot {
background: #A7B2C6; background: #a7b2c6;
border-bottom-left-radius: 20px; border-bottom-left-radius: 20px;
} }
} }
:deep(.ant-input:focus) { :deep(.ant-input:focus) {
box-shadow: none; box-shadow: none;
} }
@ -510,112 +508,115 @@
color: #aaa !important; color: #aaa !important;
} }
:deep(.jeecg-dark-switch){ :deep(.jeecg-dark-switch) {
position:absolute; position: absolute;
margin-right: 10px; margin-right: 10px;
} }
.aui-link-login{ .aui-link-login {
height: 42px; height: 42px;
padding: 10px 15px; padding: 10px 15px;
font-size: 14px; font-size: 14px;
border-radius: 8px; border-radius: 8px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 8px; margin-bottom: 8px;
background: linear-gradient(90deg, rgba(102,249,205,1) 0%, rgba(2,221,221,1) 100%); background: linear-gradient(90deg, rgba(102, 249, 205, 1) 0%, rgba(2, 221, 221, 1) 100%);
border: none; border: none;
} }
.aui-phone-logo{ .aui-phone-logo {
position: absolute; position: absolute;
margin-left: 10px; margin-left: 10px;
width: 60px; width: 60px;
top:2px; top: 2px;
z-index: 4; z-index: 4;
} }
.top-3{ .top-3 {
top: 0.45rem; top: 0.45rem;
} }
</style> </style>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-mini-login'; @prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146; @dark-bg: #293146;
html[data-theme='dark'] { html[data-theme='dark'] {
.@{prefix-cls} { .@{prefix-cls} {
background-color: @dark-bg !important; background-color: @dark-bg !important;
background-image: none; background-image: none;
&::before { &::before {
background-image: url(/@/assets/svg/login-bg-dark.svg); background-image: url(/@/assets/svg/login-bg-dark.svg);
} }
.aui-inputClear{ .aui-inputClear {
background-color: #232a3b !important; background-color: #232a3b !important;
} }
.ant-input, .ant-input,
.ant-input-password { .ant-input-password {
background-color: #232a3b !important; background-color: #232a3b !important;
} }
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) { .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
border: 1px solid #4a5569 !important; border: 1px solid #4a5569 !important;
} }
&-form { &-form {
background: @dark-bg !important; background: @dark-bg !important;
} }
.app-iconify { .app-iconify {
color: #fff !important; color: #fff !important;
} }
.aui-inputClear input,.aui-input-line input,.aui-choice{ .aui-inputClear input,
color: #c9d1d9 !important; .aui-input-line input,
} .aui-choice {
color: #c9d1d9 !important;
}
.aui-formBox{ .aui-formBox {
background-color: @dark-bg !important; background-color: @dark-bg !important;
} }
.aui-third-text span{ .aui-third-text span {
background-color: @dark-bg !important; background-color: @dark-bg !important;
} }
.aui-form-nav .aui-flex-box{ .aui-form-nav .aui-flex-box {
color: #c9d1d9 !important; color: #c9d1d9 !important;
} }
.aui-formButton .aui-linek-code{ .aui-formButton .aui-linek-code {
background: @dark-bg !important; background: @dark-bg !important;
color: white !important; color: white !important;
} }
.aui-code-line{ .aui-code-line {
border-left: none !important; border-left: none !important;
} }
.ant-checkbox-inner,.aui-success h3{ .ant-checkbox-inner,
border-color: #c9d1d9; .aui-success h3 {
border-color: #c9d1d9;
}
} }
}
input.fix-auto-fill, input.fix-auto-fill,
.fix-auto-fill input { .fix-auto-fill input {
-webkit-text-fill-color: #c9d1d9 !important; -webkit-text-fill-color: #c9d1d9 !important;
box-shadow: inherit !important; box-shadow: inherit !important;
} }
&-sign-in-way { &-sign-in-way {
.anticon { .anticon {
font-size: 22px !important; font-size: 22px !important;
color: #888 !important; color: #888 !important;
cursor: pointer !important; cursor: pointer !important;
&:hover { &:hover {
color: @primary-color !important; color: @primary-color !important;
}
} }
} }
.ant-divider-inner-text {
font-size: 12px !important;
color: @text-color-secondary !important;
}
.aui-third-login a {
background: transparent;
}
} }
.ant-divider-inner-text {
font-size: 12px !important;
color: @text-color-secondary !important;
}
.aui-third-login a{
background: transparent;
}
}
</style> </style>

Loading…
Cancel
Save