mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-04 13:42:27 +08:00
fix Bug or add example
This commit is contained in:
Ah jung
88
src/views/setting/account/account.vue
Normal file
88
src/views/setting/account/account.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-grid :x-gap="24">
|
||||
<n-grid-item span="6">
|
||||
<n-card :bordered="false" size="small" class="proCard">
|
||||
<n-thing
|
||||
class="thing-cell"
|
||||
v-for="item in typeTabList" :key="item.key"
|
||||
:class="{'thing-cell-on':type===item.key}"
|
||||
@click="switchType(item)"
|
||||
>
|
||||
<template #header>{{ item.name }}</template>
|
||||
<template #description>{{ item.desc }}</template>
|
||||
</n-thing>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item span="18">
|
||||
<n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
|
||||
<BasicSetting v-if="type === 1"></BasicSetting>
|
||||
<SafetySetting v-if="type === 2"></SafetySetting>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs } from 'vue'
|
||||
import BasicSetting from "./BasicSetting.vue"
|
||||
import SafetySetting from "./SafetySetting.vue"
|
||||
|
||||
|
||||
const typeTabList = [
|
||||
{
|
||||
name: '基本设置',
|
||||
desc: '个人账户信息设置',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '安全设置',
|
||||
desc: '密码，邮箱等设置',
|
||||
key: 2
|
||||
}
|
||||
]
|
||||
export default defineComponent({
|
||||
components: { BasicSetting, SafetySetting },
|
||||
setup() {
|
||||
const state = reactive({
|
||||
type: 1,
|
||||
typeTitle: '基本设置'
|
||||
})
|
||||
|
||||
function switchType(e) {
|
||||
state.type = e.key
|
||||
state.typeTitle = e.name
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
switchType,
|
||||
typeTabList
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.thing-cell {
|
||||
margin: 0 -16px 10px;
|
||||
padding: 5px 16px;
|
||||
|
||||
&:hover {
|
||||
background: #f3f3f3;
|
||||
cursor: pointer
|
||||
}
|
||||
}
|
||||
|
||||
.thing-cell-on {
|
||||
background: #f0faff;
|
||||
color: #2d8cf0;
|
||||
|
||||
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
|
||||
color: #2d8cf0
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f0faff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/views/setting/system/BasicSetting.vue
Normal file
138
src/views/setting/system/BasicSetting.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
|
||||
<n-grid-item>
|
||||
<n-form
|
||||
:label-width="80"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<n-form-item label="网站名称" path="name">
|
||||
<n-input v-model:value="formValue.name" placeholder="请输入网站名称"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="备案编号" path="icpCode">
|
||||
<n-input placeholder="请输入备案编号" v-model:value="formValue.icpCode"/>
|
||||
</n-form-item>
|
||||
|
||||
|
||||
<n-form-item label="联系电话" path="mobile">
|
||||
<n-input placeholder="请输入联系电话" v-model:value="formValue.mobile"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="联系地址" path="address">
|
||||
<n-input
|
||||
v-model:value="formValue.address"
|
||||
type="textarea"
|
||||
placeholder="请输入联系地址"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="登录验证码" path="loginCode">
|
||||
<n-radio-group v-model:value="formValue.loginCode" name="loginCode">
|
||||
<n-space>
|
||||
<n-radio :value="1">开启</n-radio>
|
||||
<n-radio :value="0">关闭</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="网站开启访问" path="systemOpen">
|
||||
<n-switch size="large" v-model:value="formValue.systemOpen" @update:value="systemOpenChange"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="网站关闭提示" path="closeText">
|
||||
<n-input
|
||||
v-model:value="formValue.closeText"
|
||||
type="textarea"
|
||||
placeholder="请输入网站关闭提示"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<div>
|
||||
<n-space>
|
||||
<n-button type="primary" @click="formSubmit">更新基本信息</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-form>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs } from 'vue'
|
||||
import { useDialog, useMessage } from 'naive-ui'
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
required: true,
|
||||
message: '请输入网站名称',
|
||||
trigger: 'blur'
|
||||
},
|
||||
mobile: {
|
||||
required: true,
|
||||
message: '请输入联系电话',
|
||||
trigger: 'input'
|
||||
},
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const formRef = ref(null)
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
|
||||
const state = reactive({
|
||||
formValue: {
|
||||
name: '',
|
||||
mobile: '',
|
||||
icpCode: '',
|
||||
address: '',
|
||||
loginCode: 0,
|
||||
closeText: '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
|
||||
systemOpen: true
|
||||
}
|
||||
})
|
||||
|
||||
function systemOpenChange(value) {
|
||||
if (!value) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
message.success('操作成功')
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
state.formValue.systemOpen = true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function formSubmit(e) {
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
message.success('验证成功')
|
||||
} else {
|
||||
message.error('验证失败，请填写完整信息')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
formRef.value.restoreValidation()
|
||||
}
|
||||
|
||||
return {
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
rules,
|
||||
formSubmit,
|
||||
resetForm,
|
||||
systemOpenChange
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
85
src/views/setting/system/EmailSetting.vue
Normal file
85
src/views/setting/system/EmailSetting.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
|
||||
<n-grid-item>
|
||||
<n-form
|
||||
:label-width="120"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
|
||||
<n-form-item label="发件人邮箱" path="originator">
|
||||
<n-input v-model:value="formValue.originator" placeholder="请输入发件人邮箱"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="SMTP服务器地址">
|
||||
<n-input placeholder="请输入SMTP服务器地址"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="SMTP服务器端口">
|
||||
<n-input placeholder="请输入SMTP服务器端口"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="SMTP用户名">
|
||||
<n-input placeholder="请输入SMTP用户名"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="SMTP密码">
|
||||
<n-input type="password" placeholder="请输入SMTP密码"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="邮件测试">
|
||||
<n-button>邮件测试</n-button>
|
||||
</n-form-item>
|
||||
|
||||
<div>
|
||||
<n-space>
|
||||
<n-button type="primary" @click="formSubmit">更新邮件信息</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-form>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
const rules = {
|
||||
originator: {
|
||||
required: true,
|
||||
message: '请输入发件人邮箱',
|
||||
trigger: 'blur'
|
||||
}
|
||||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const formRef: any = ref(null)
|
||||
const message = useMessage()
|
||||
|
||||
const state = reactive({
|
||||
formValue: {
|
||||
originator: '',
|
||||
}
|
||||
})
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
message.success('验证成功')
|
||||
} else {
|
||||
message.error('验证失败，请填写完整信息')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
rules,
|
||||
formSubmit
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
200
src/views/setting/system/RevealSetting.vue
Normal file
200
src/views/setting/system/RevealSetting.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
|
||||
<n-grid-item>
|
||||
<n-form
|
||||
:label-width="120"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<n-form-item label="商品图片(大)">
|
||||
<n-space align="center">
|
||||
<span>宽度：</span>
|
||||
<n-input v-model:value="formValue.bigWidth" style="width:80px" placeholder="宽度像素"/>
|
||||
<span>高度：</span>
|
||||
<n-input v-model:value="formValue.bigHeight" style="width:80px" placeholder="高度像素"/>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="商品图片(小)">
|
||||
<n-space align="center">
|
||||
<span>宽度：</span>
|
||||
<n-input v-model:value="formValue.smallWidth" style="width:80px" placeholder="宽度像素"/>
|
||||
<span>高度：</span>
|
||||
<n-input v-model:value="formValue.smallHeight" style="width:80px" placeholder="高度像素"/>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="水印透明度" path="watermarkClarity">
|
||||
<n-input-number v-model:value="formValue.watermarkClarity" :show-button="false" placeholder="请输入水印透明度"/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="水印图片" path="watermarkClarity">
|
||||
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
|
||||
<n-button>上传文件</n-button>
|
||||
</n-upload>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="水印位置" path="watermarkPlace">
|
||||
<n-select placeholder="请选择价格精确方式"
|
||||
:options="watermarkPlaceList"
|
||||
v-model:value="formValue.watermarkPlace"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="价格精确位数" path="pricePreciseNum">
|
||||
<n-select placeholder="请选择价格精确位数"
|
||||
:options="pricePreciseNumList"
|
||||
v-model:value="formValue.pricePreciseNum"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="价格精确方式" path="pricePrecise">
|
||||
<n-select placeholder="请选择价格精确方式"
|
||||
:options="pricePreciseList"
|
||||
v-model:value="formValue.pricePrecise"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="前台显示市场价" path="isMarketPrice">
|
||||
<n-switch size="large" v-model:value="formValue.isMarketPrice"/>
|
||||
</n-form-item>
|
||||
|
||||
<div>
|
||||
<n-space>
|
||||
<n-button type="primary" @click="formSubmit">更新显示信息</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-form>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs } from 'vue'
|
||||
import { useDialog, useMessage } from 'naive-ui'
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
required: true,
|
||||
message: '请输入网站名称',
|
||||
trigger: 'blur'
|
||||
},
|
||||
mobile: {
|
||||
required: true,
|
||||
message: '请输入联系电话',
|
||||
trigger: 'input'
|
||||
},
|
||||
}
|
||||
const watermarkPlaceList = [
|
||||
{
|
||||
label: '左上',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '右上',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '居中',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '右下',
|
||||
value: 4
|
||||
},
|
||||
]
|
||||
|
||||
const pricePreciseNumList = [
|
||||
{
|
||||
label: '2位',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '3位',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '4位',
|
||||
value: 3
|
||||
},
|
||||
]
|
||||
const pricePreciseList = [
|
||||
{
|
||||
label: '四舍五入',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '向上取整',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '向下取整',
|
||||
value: 3
|
||||
},
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const formRef: any = ref(null)
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
|
||||
const state = reactive({
|
||||
formValue: {
|
||||
bigWidth: '',
|
||||
bigHeight: '',
|
||||
smallWidth: '',
|
||||
smallHeight: '',
|
||||
watermarkClarity: null,
|
||||
pricePrecise: 1,
|
||||
isMarketPrice: true,
|
||||
pricePreciseNum:null,
|
||||
}
|
||||
})
|
||||
|
||||
function systemOpenChange(value) {
|
||||
if (!value) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
message.success('操作成功')
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
state.formValue.systemOpen = true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function formSubmit(e) {
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
message.success('验证成功')
|
||||
} else {
|
||||
message.error('验证失败，请填写完整信息')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
formRef.value.restoreValidation()
|
||||
}
|
||||
|
||||
return {
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
pricePreciseList,
|
||||
watermarkPlaceList,
|
||||
pricePreciseNumList,
|
||||
rules,
|
||||
formSubmit,
|
||||
resetForm,
|
||||
systemOpenChange
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
96
src/views/setting/system/system.vue
Normal file
96
src/views/setting/system/system.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-grid :x-gap="24">
|
||||
<n-grid-item span="6">
|
||||
<n-card :bordered="false" size="small" class="proCard">
|
||||
<n-thing
|
||||
class="thing-cell"
|
||||
v-for="item in typeTabList" :key="item.key"
|
||||
:class="{'thing-cell-on':type===item.key}"
|
||||
@click="switchType(item)"
|
||||
>
|
||||
<template #header>{{ item.name }}</template>
|
||||
<template #description>{{ item.desc }}</template>
|
||||
</n-thing>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item span="18">
|
||||
<n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
|
||||
<BasicSetting v-if="type === 1"></BasicSetting>
|
||||
<RevealSetting v-if="type === 2"></RevealSetting>
|
||||
<EmailSetting v-if="type === 3"></EmailSetting>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import BasicSetting from "./BasicSetting.vue"
|
||||
import RevealSetting from "./RevealSetting.vue"
|
||||
import EmailSetting from "./EmailSetting.vue"
|
||||
|
||||
const typeTabList = [
|
||||
{
|
||||
name: '基本设置',
|
||||
desc: '系统常规设置',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '显示设置',
|
||||
desc: '系统显示设置',
|
||||
key: 2
|
||||
},
|
||||
{
|
||||
name: '邮件设置',
|
||||
desc: '系统邮件设置',
|
||||
key: 3
|
||||
}
|
||||
]
|
||||
export default defineComponent({
|
||||
components: { BasicSetting, RevealSetting, EmailSetting },
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const state = reactive({
|
||||
type: 1,
|
||||
typeTitle: '基本设置'
|
||||
})
|
||||
|
||||
function switchType(e) {
|
||||
state.type = e.key
|
||||
state.typeTitle = e.name
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
switchType,
|
||||
typeTabList
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.thing-cell {
|
||||
margin: 0 -16px 10px;
|
||||
padding: 5px 16px;
|
||||
|
||||
&:hover {
|
||||
background: #f3f3f3;
|
||||
cursor: pointer
|
||||
}
|
||||
}
|
||||
|
||||
.thing-cell-on {
|
||||
background: #f0faff;
|
||||
color: #2d8cf0;
|
||||
|
||||
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
|
||||
color: #2d8cf0
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f0faff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user