From 3cb7a7f54f69ba160db8cf1b1d5321f0d29140ef Mon Sep 17 00:00:00 2001
From: Ah jung <735878602@qq.com>
Date: Fri, 16 Jul 2021 21:14:40 +0800
Subject: [PATCH] fix Bug or add example

---
 src/views/setting/account/account.vue      |  88 +++++++++
 src/views/setting/system/BasicSetting.vue  | 138 ++++++++++++++
 src/views/setting/system/EmailSetting.vue  |  85 +++++++++
 src/views/setting/system/RevealSetting.vue | 200 +++++++++++++++++++++
 src/views/setting/system/system.vue        |  96 ++++++++++
 5 files changed, 607 insertions(+)
 create mode 100644 src/views/setting/account/account.vue
 create mode 100644 src/views/setting/system/BasicSetting.vue
 create mode 100644 src/views/setting/system/EmailSetting.vue
 create mode 100644 src/views/setting/system/RevealSetting.vue
 create mode 100644 src/views/setting/system/system.vue

diff --git a/src/views/setting/account/account.vue b/src/views/setting/account/account.vue
new file mode 100644
index 0000000..cd03d8e
--- /dev/null
+++ b/src/views/setting/account/account.vue
@@ -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>
diff --git a/src/views/setting/system/BasicSetting.vue b/src/views/setting/system/BasicSetting.vue
new file mode 100644
index 0000000..a3dea32
--- /dev/null
+++ b/src/views/setting/system/BasicSetting.vue
@@ -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>
diff --git a/src/views/setting/system/EmailSetting.vue b/src/views/setting/system/EmailSetting.vue
new file mode 100644
index 0000000..1f3ee1e
--- /dev/null
+++ b/src/views/setting/system/EmailSetting.vue
@@ -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>
diff --git a/src/views/setting/system/RevealSetting.vue b/src/views/setting/system/RevealSetting.vue
new file mode 100644
index 0000000..1d52bed
--- /dev/null
+++ b/src/views/setting/system/RevealSetting.vue
@@ -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>
diff --git a/src/views/setting/system/system.vue b/src/views/setting/system/system.vue
new file mode 100644
index 0000000..f128894
--- /dev/null
+++ b/src/views/setting/system/system.vue
@@ -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>