初始化admin pc端

This commit is contained in:
Mrtangl
2022-04-08 10:42:44 +08:00
parent d9c9f27530
commit 19665b64fb
137 changed files with 11991 additions and 0 deletions

View File

@@ -0,0 +1,106 @@
<template>
<div class="admin">
<el-card shadow="never">
<el-alert
title="* 设置商城客服联系信息;小程序客服在微信小程序后台开通"
type="info"
:closable="false"
></el-alert>
</el-card>
<el-card class="m-t-15" shadow="never">
<el-form
ref="formRefs"
class="ls-form"
:model="formData"
:rules="rules"
label-width="150px"
size="small"
>
<el-form-item label="客服二维码:" prop="qr_code">
<material-select v-model="formData.qr_code" :limit="1"></material-select>
<div class="muted">建议尺寸240*200支持jpgpng格式</div>
</el-form-item>
<el-form-item label="客服微信号:" prop="wechat">
<el-input v-model="formData.wechat" placeholder="请输入微信号"></el-input>
</el-form-item>
<el-form-item label="客服电话:" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="服务时间:" prop="service_time">
<el-input v-model="formData.service_time" placeholder=""></el-input>
<div class="muted">服务时间例如周一至周六9:00-19:00</div>
</el-form-item>
</el-form>
</el-card>
<footer-btns>
<el-button type="primary" size="small" @click="onSubmit(formRefs)">保存</el-button>
</footer-btns>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'
import MaterialSelect from '@/components/material-select/index.vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import { apiCustomerServiceGetConfig, apiCustomerServiceSetConfig } from '@/api/setting'
type FormInstance = InstanceType<typeof ElForm>
const formRefs = ref<FormInstance>()
// 表单数据
const formData = ref({
qr_code: '', // 客服二维码
wechat: '', // 客服微信号
phone: '', // 客服手机号
service_time: '', // 服务时间
})
// 表单校验规则
const rules = reactive<object>({
qr_code: [
{
required: true,
message: '客服二维码不能为空',
trigger: ['blur'],
},
],
})
// 获取客服设置
const getCustomerServiceConfig = async (): Promise<void> => {
formData.value = await apiCustomerServiceGetConfig()
}
// 设置客服设置
const setCustomerServiceConfig = async ():Promise<void> => {
await apiCustomerServiceSetConfig({...formData.value})
getCustomerServiceConfig()
}
// 提交数据
const onSubmit = (formEl: FormInstance | undefined): void => {
if(!formEl) return
formEl.validate((valid): Boolean | undefined => {
if(!valid) return false
setCustomerServiceConfig()
})
}
getCustomerServiceConfig()
</script>
<style lang="scss" scoped>
.el-alert.el-alert--info {
background-color: $color-primary-light-9;
color: $color-primary;
}
</style>

View File

@@ -0,0 +1,90 @@
<!-- 系统环境 -->
<template>
<div class="system-environment">
<el-card shadow="never">
<div>服务器信息</div>
<div class="m-t-15">
<el-table :data="info.server" size="medium">
<el-table-column prop="param" label="参数"> </el-table-column>
<el-table-column prop="value" label="值"> </el-table-column>
</el-table>
</div>
</el-card>
<el-card shadow="never" class="m-t-15">
<div>PHP环境要求</div>
<div class="m-t-15">
<el-table :data="info.env" size="medium">
<el-table-column prop="option" label="选项"> </el-table-column>
<el-table-column prop="require" label="要求"> </el-table-column>
<el-table-column prop="status" label="状态">
<template #default="scope">
<el-icon v-show="scope.row.status" color="#67C23A">
<Select />
</el-icon>
<el-icon v-show="!scope.row.status" color="#DB2828">
<close-bold />
</el-icon>
</template>
</el-table-column>
<el-table-column prop="remark" label="说明及帮助"> </el-table-column>
</el-table>
</div>
</el-card>
<el-card shadow="never" class="m-t-15">
<div>目录权限</div>
<div class="m-t-15">
<el-table :data="info.auth" size="medium">
<el-table-column prop="dir" label="选项"> </el-table-column>
<el-table-column prop="require" label="要求"> </el-table-column>
<el-table-column prop="status" label="状态">
<template #default="scope">
<el-icon v-show="scope.row.status" color="#67C23A">
<Select />
</el-icon>
<el-icon v-show="!scope.row.status" color="#DB2828">
<close-bold />
</el-icon>
</template>
</el-table-column>
<el-table-column prop="remark" label="说明及帮助"> </el-table-column>
</el-table>
</div>
</el-card>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted } from 'vue'
import { apiSystemInfo } from '@/api/setting'
export default defineComponent({
setup() {
const info = reactive({
server: [], // 服务器信息
env: [], // PHP环境要求
auth: [] // 目录权限
})
const getSystemInfo = () => {
apiSystemInfo().then((res: any) => {
console.log('res', res)
info.server = res.server
info.env = res.env
info.auth = res.auth
})
}
onMounted(() => {
getSystemInfo()
})
return {
info,
getSystemInfo
}
}
})
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,59 @@
<!-- 用户设置 -->
<template>
<!-- 用户mortar Start -->
<el-card shadow="never" class="m-t-16">
<template #header>
<span> 基本设置 </span>
</template>
<el-form ref="formRef" :model="formData" label-width="100px" size="small">
<el-form-item label="用户默认头像" prop="default_avatar">
<material-select v-model="formData.default_avatar" :limit="1"></material-select>
<div class="muted">建议尺寸400*400支持jpgpng格式</div>
</el-form-item>
</el-form>
</el-card>
<!-- 用户mortar End -->
<!-- Footer Start -->
<footer-btns>
<el-button type="primary" size="small" @click="onSubmit">保存</el-button>
</footer-btns>
<!-- Footer End -->
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { apiUserConfigGet, apiUserConfigSet } from '@/api/setting'
import materialSelect from '@/components/material-select/index.vue'
import FooterBtns from '@/components/footer-btns/index.vue'
/** Data Start **/
const formData = ref<any>({
default_avatar: '', // string 客服二维码
wechat: '', // string 客服微信号
})
/** Data End **/
/** Methods Start **/
// 获取用户设置
const getUserConfig = async (): Promise<void> => {
formData.value = await apiUserConfigGet()
}
// 编辑用户设置
const handleUserConfigEdit = async (): Promise<void> => {
await apiUserConfigSet({ ...formData.value })
getUserConfig()
}
// 提交数据
const onSubmit = () => {
handleUserConfigEdit()
}
/** Methods End **/
/** LifeCycle Start **/
getUserConfig()
/** LifeCycle End **/
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,237 @@
<!-- 用户设置 -->
<template>
<div class="login-register">
<el-form ref="formRef" :model="formData" label-width="160px" size="small">
<!-- 通用设置 Start -->
<el-card shadow="never" class="m-t-15">
<template #header>
<span>通用设置</span>
</template>
<el-form-item label="注册方式" required>
<el-checkbox-group v-model="formData.register_way">
<el-checkbox :label="1">手机号码注册</el-checkbox>
</el-checkbox-group>
<div class="muted xs">
系统通用的注册用户方式至少勾选一项微信等渠道有其他授权注册方式请合理设置
</div>
</el-form-item>
<el-form-item label="手机号码注册需验证码" required>
<!-- switch开关 -->
<div class="flex col-center">
<el-switch v-model="formData.is_mobile_register_code" :active-value="1" :inactive-value="0" />
<span class="m-l-16">
{{ formData.is_mobile_register_code ? '开启' : '关闭' }}
</span>
</div>
<div class="muted xs">
1用户通过手机号码注册帐号时是否需要短信验证码验证填写的手机号码默认关闭
</div>
<div class="muted xs">2请开启对应短信验证码功能</div>
</el-form-item>
<el-form-item label="强制绑定手机">
<!-- switch开关 -->
<div class="flex col-center">
<el-switch v-model="formData.coerce_mobile" :active-value="1" :inactive-value="0" />
<span class="m-l-16">{{ formData.coerce_mobile ? '开启' : '关闭' }}</span>
</div>
<div class="muted xs">
用户无论通过何种方式注册用户时是否需要强制绑定手机绑定手机需要短信验证请开启对应短信验证码功能
</div>
</el-form-item>
<el-form-item label="登录方式" required>
<!-- 多选框 -->
<el-checkbox-group v-model="formData.login_way">
<el-checkbox :label="1">手机号密码登录</el-checkbox>
<el-checkbox :label="2">手机号验证码登录</el-checkbox>
</el-checkbox-group>
<div class="muted xs">
系统通用的登录方式至少勾选一项需要和通用注册方式匹配
微信等渠道有其他授权注册方式请合理设置
</div>
</el-form-item>
</el-card>
<!-- 通用设置 End -->
<!-- 微信公众号 Start -->
<el-card shadow="never" class="m-t-15">
<template #header>
<span>微信公众号</span>
</template>
<el-form-item label="微信公众号">
<a class="muted xs item-a" href="https://open.weixin.qq.com/">前往微信开放平台</a>
<div class="muted xs">
1商城在各渠道使用微信授权登录时强烈建议配置微信开放平台
</div>
<div class="muted xs">
2微信开放平台关联公众号小程序和APP后可实现各端用户账号统一识别买家唯一微信身份
</div>
<div class="muted xs">
3没有配置微信开放平台同一微信号会生成多个用户配置微信开放平台后已生成的用户账号无法合并
</div>
</el-form-item>
</el-card>
<!-- 微信公众号 End -->
<!-- 微信开放平台 Start -->
<el-card shadow="never" class="m-t-15">
<template #header>
<span>微信开放平台</span>
</template>
<el-form-item label="微信授权登录">
<!-- switch开关 -->
<div class="flex col-center">
<el-switch v-model="formData.h5_wechat_auth" :active-value="1" :inactive-value="0" />
<span class="m-l-16">{{ formData.h5_wechat_auth ? '开启' : '关闭' }}</span>
</div>
<div class="muted xs">
微信公众号是否支持微信授权登录方式关闭时使用注册设置里面的配置方法完成用户注册和登录
</div>
</el-form-item>
<el-form-item label="自动微信授权登录">
<div class="flex col-center">
<el-switch v-model="formData.h5_auto_wechat_auth" :active-value="1" :inactive-value="0" />
<span class="m-l-16">{{ formData.h5_auto_wechat_auth ? '开启' : '关闭' }}</span>
</div>
<div class="muted xs">
微信授权登录开启后可以勾选是否需要自动授权登录默认开启
</div>
</el-form-item>
</el-card>
<!-- 微信开放平台 End -->
<!-- 微信小程序 Start -->
<el-card shadow="never" class="m-t-15">
<template #header>
<span>微信小程序</span>
</template>
<el-form-item label="微信授权登录">
<!-- switch开关 -->
<div class="flex col-center">
<el-switch v-model="formData.mnp_wechat_auth" :active-value="1" :inactive-value="0" />
<span class="m-l-16">{{ formData.mnp_wechat_auth ? '开启' : '关闭' }}</span>
</div>
<div class="muted xs">
微信小程序是否支持微信授权登录方式关闭时使用注册设置里面的配置方法完成用户注册和登录
</div>
</el-form-item>
<el-form-item label="自动微信授权登录">
<div class="flex col-center">
<el-switch v-model="formData.mnp_auto_wechat_auth" :active-value="1" :inactive-value="0" />
<span class="m-l-16">{{
formData.mnp_auto_wechat_auth ? '开启' : '关闭'
}}</span>
</div>
<div class="muted xs">
微信授权登录开启后可以勾选是否需要自动授权登录默认开启
</div>
</el-form-item>
</el-card>
<!-- 微信小程序 End -->
<!-- H5 Start -->
<el-card shadow="never" class="m-t-15">
<template #header>
<span>H5</span>
</template>
<el-form-item label>
<div class="muted xs">
用户访问H5商城时使用注册设置里面的配置方法完成用户注册和登录
</div>
</el-form-item>
</el-card>
<!-- H5 End -->
<!-- APP设置 Start -->
<el-card shadow="never" class="m-t-15">
<template #header>
<span>APP设置</span>
</template>
<el-form-item label="微信授权登录">
<div class="flex col-center">
<el-switch v-model="formData.app_wechat_auth" :active-value="1" :inactive-value="0" />
<span class="m-l-16">{{ formData.app_wechat_auth ? '开启' : '关闭' }}</span>
</div>
<div class="muted xs">
APP是否支持微信授权登录方式关闭时使用注册设置里面的配置方法完成用户注册和登录
</div>
</el-form-item>
</el-card>
<!-- APP设置 End -->
</el-form>
<!-- Footer Start -->
<footer-btns>
<el-button type="primary" size="small" @click="onSubmit">保存</el-button>
</footer-btns>
<!-- Footer End -->
</div>
</template>
<script lang="ts" setup>
import {
reactive,
ref
} from 'vue'
import {
apiLoginConfigGet,
apiLoginConfigSet
} from '@/api/setting'
import FooterBtns from '@/components/footer-btns/index.vue'
/** Data Start **/
const formData = ref < any > ({
register_way: [], // 注册方式1-手机号码注册(注册设置必传)
login_way: [], //登录方式1-账号密码登录2-手机短信验证码登录
is_mobile_register_code: 0, // 手机号码注册需验证码0-关闭1-开启
coerce_mobile: 0, // 手机号码注册需验证码0-关闭1-开启
h5_wechat_auth: 0, // 微信公众号-微信授权登录0-关闭1-开启
h5_auto_wechat_auth: 1, // 微信公众号-自动微信授权登录:0-关闭1-开启;
mnp_wechat_auth: 0, // 小程序-微信授权登录 :0-关闭1-开启;
mnp_auto_wechat_auth: 1, // 小程序-自动微信授权登录:0-关闭1-开启;
app_wechat_auth: 0, // app-微信授权登录:0-关闭1-开启;
scene: '', // 场景user-用户设置register-注册设置withdraw-提现设置
toutiao_auth: 0,
toutiao_auto_auth: 0,
})
/** Data End **/
/** Methods Start **/
// 获取登录注册设置
const getLoginConfig = async (): Promise < void > => {
formData.value = await apiLoginConfigGet()
if(!formData.value.register_way) {
formData.value.register_way = []
}
if(!formData.value.login_way) {
formData.value.login_way = []
}
}
// 编辑登录注册设置
const handleLoginConfigEdit = async (): Promise < void > => {
await apiLoginConfigSet({
...formData.value
})
getLoginConfig()
}
// 提交数据
const onSubmit = () => {
handleLoginConfigEdit()
}
/** Methods End **/
/** LifeCycle Start **/
getLoginConfig()
/** LifeCycle End **/
</script>
<style lang="scss" scoped>
.login-register {
.item-a {
color: #1684FC;
text-decoration: underline;
}
}
</style>

View File

@@ -0,0 +1,138 @@
<!-- 备案信息 -->
<template>
<div class="website-filing">
<el-card shadow="never" class="">
<el-form
ref="form"
:rules="rules"
class="ls-form"
:model="formData"
label-width="150px"
size="small"
>
<!-- 版权信息输入框 -->
<el-form-item label="版权信息" prop="info">
<el-input v-model="formData.info" placeholder="请输入版权信息"></el-input>
<div class="muted xs m-r-16">例如填写Copyright © 2019-2020 公司名称</div>
</el-form-item>
<!-- ICP备案号输入框 -->
<el-form-item label="ICP备案号" prop="icp_number">
<el-input
v-model="formData.icp_number"
placeholder="请输入ICP备案号"
></el-input>
</el-form-item>
<!-- ICP备案号链接输入框 -->
<el-form-item label="ICP备案号链接" prop="icp_link">
<el-input
v-model="formData.icp_link"
placeholder="请输入ICP备案号链接"
></el-input>
<div class="muted xs m-r-16">
例如填写域名信息备案系统链接http://beian.miit.gov.cn
</div>
</el-form-item>
<!--公安备案号输入框 -->
<el-form-item label="公安备案号" prop="public_number">
<el-input
v-model="formData.public_number"
placeholder="请输入公安备案号"
></el-input>
</el-form-item>
<!-- 公安备案号链接输入框 -->
<el-form-item label="公安备案号链接" prop="public_link">
<el-input
v-model="formData.public_link"
placeholder="请输入公安备案号链接"
></el-input>
<div class="muted xs m-r-16">
例如填写公安信息备案系统链接http://www.beian.gov.cn
</div>
</el-form-item>
</el-form>
</el-card>
<footer-btns>
<el-button type="primary" size="small" @click="setCopyright">保存</el-button>
</footer-btns>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted } from 'vue'
import { apiGetCopyright, apiSetCopyright } from '@/api/setting'
import FooterBtns from '@/components/footer-btns/index.vue'
export default defineComponent({
components: {
FooterBtns
},
setup() {
// 表单数据
const formData = reactive({
info: '', // 版权信息
icp_number: '', // icp备案号
icp_link: '', // icp备案链接
public_number: '', // 公安备案号
public_link: '' // 公安备案链接
})
// 表单验证
const rules = {
// info: [
// {
// required: true,
// message: '请输入版权信息',
// trigger: ['blur'],
// },
// ],
}
// 获取备案信息
const getCopyright = () => {
apiGetCopyright().then((res: any) => {
console.log('res', res)
formData.info = res.info
formData.icp_number = res.icp_number
formData.icp_link = res.icp_link
formData.public_number = res.public_number
formData.public_link = res.public_link
})
}
// 设置备案信息
const setCopyright = () => {
apiSetCopyright({
info: formData.info,
icp_number: formData.icp_number,
icp_link: formData.icp_link,
public_number: formData.public_number,
public_link: formData.public_link
})
.then((res: any) => {
console.log('res', res)
getCopyright()
})
.catch((err: any) => {
console.log('err', err)
})
}
onMounted(() => {
getCopyright()
})
return {
formData,
rules,
getCopyright,
setCopyright
}
}
})
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,155 @@
<!-- 网站信息 -->
<template>
<div class="website-information">
<el-card shadow="never" class="m-t-15">
<el-form
ref="formRef"
:rules="rules"
class="ls-form"
:model="formData"
label-width="150px"
size="small"
>
<el-form-item label="网站名称" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入网站名称"
maxlength="12"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="网站图标" prop="web_favicon" required>
<material-select v-model="formData.web_favicon" :limit="1" />
<div class="flex">
<div class="muted xs m-r-16">
建议尺寸100*100像素支持jpgjpegpng格式
</div>
<el-popover placement="right" width="200" trigger="hover">
<el-image
src="https://img2.baidu.com/it/u=3357699356,1912406716&fm=26&fmt=auto&gp=0.jpg"
/>
<el-button slot="reference" type="text">查看示例</el-button>
</el-popover>
</div>
</el-form-item>
<el-form-item label="网站LOGO" prop="web_logo" required>
<material-select v-model="formData.web_logo" :limit="1" />
<div class="flex">
<div class="muted xs m-r-16">
建议尺寸100*100像素支持jpgjpegpng格式
</div>
<el-popover placement="right" width="200" trigger="hover">
<el-image
src="https://img2.baidu.com/it/u=3357699356,1912406716&fm=26&fmt=auto&gp=0.jpg"
/>
<el-button slot="reference" type="text">查看示例</el-button>
</el-popover>
</div>
</el-form-item>
<el-form-item label="登录页广告图" prop="login_image" required>
<material-select v-model="formData.login_image" :limit="1" />
<div class="flex">
<div class="muted xs m-r-16">
建议尺寸100*100像素支持jpgjpegpng格式
</div>
<el-popover placement="right" width="200" trigger="hover">
<el-image
src="https://img2.baidu.com/it/u=3357699356,1912406716&fm=26&fmt=auto&gp=0.jpg"
/>
<el-button slot="reference" type="text">查看示例</el-button>
</el-popover>
</div>
</el-form-item>
</el-form>
</el-card>
<footer-btns>
<el-button type="primary" size="small" @click="setWebsite">保存</el-button>
</footer-btns>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, Ref, ref } from 'vue'
import { ElInput, ElForm } from 'element-plus'
import MaterialSelect from '@/components/material-select/index.vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import { apiGetWebsite, apiSetWebsite } from '@/api/setting'
export default defineComponent({
components: {
MaterialSelect,
FooterBtns
},
setup() {
const formRef: Ref<typeof ElForm | null> = ref(null)
// 表单数据
const formData = reactive({
name: '', // 网站名称
web_favicon: '', // 网站图标
web_logo: '', // 网站logo
login_image: '' // 登录页广告图
})
// 表单验证
const rules = {
name: [
{
required: true,
message: '请输入网站名称',
trigger: ['blur']
}
]
}
// 获取备案信息
const getWebsite = () => {
apiGetWebsite().then((res: any) => {
console.log('res', res)
formData.name = res.name
formData.web_favicon = res.web_favicon
formData.web_logo = res.web_logo
formData.login_image = res.login_image
})
}
// 设置备案信息
const setWebsite = () => {
formRef.value?.validate((valid: boolean) => {
if (!valid) {
return
}
console.log('fasdfasd')
apiSetWebsite({
name: formData.name,
web_favicon: formData.web_favicon,
web_logo: formData.web_logo,
login_image: formData.login_image
})
.then((res: any) => {
console.log('res', res)
getWebsite()
})
.catch((err: any) => {
console.log('err', err)
})
})
}
onMounted(() => {
getWebsite()
})
return {
formData,
rules,
getWebsite,
setWebsite,
formRef
}
}
})
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,94 @@
<template>
<!-- 服务协议 Start -->
<el-card shadow="never">
<template #header>
<span class="md f-w-600">服务协议</span>
</template>
<!-- Header Form Start -->
<el-form :model="formData" label-width="80px" size="mini" inline>
<el-form-item label="协议名称">
<el-input class="ls-input" v-model="formData.service_title" />
</el-form-item>
</el-form>
<!-- Header Form End -->
<!-- Main Editor Start -->
<editor
v-model="formData.service_content"
width="1000"
height="664"
class="m-l-14"
></editor>
<!-- Main Editor End -->
</el-card>
<!-- 服务协议 End -->
<!-- 隐私协议 Start -->
<el-card shadow="never" class="m-t-15">
<template #header>
<span class="md f-w-600">隐私协议</span>
</template>
<!-- Header Form Start -->
<el-form :model="formData" label-width="80px" size="mini" inline>
<el-form-item label="协议名称">
<el-input class="ls-input" v-model="formData.privacy_title" />
</el-form-item>
</el-form>
<!-- Header Form End -->
<!-- Main Editor Start -->
<editor
v-model="formData.privacy_content"
width="1000"
height="664"
class="m-l-14"
></editor>
<!-- Main Editor End -->
</el-card>
<!-- 政策协议 End -->
<!-- Footer Start -->
<footer-btns>
<el-button type="primary" size="small" @click="handleProtocolEdit">保存</el-button>
</footer-btns>
<!-- Footer End -->
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { apiGetProtocol, apiSetProtocol } from '@/api/setting'
import Editor from '@/components/editor/index.vue'
import FooterBtns from '@/components/footer-btns/index.vue'
/** Interface Star **/
interface formDataObj {
service_title: string
service_content: string
privacy_title: string
privacy_content: string
}
/** Interface End **/
/** Data Start **/
let formData = ref<formDataObj>({
service_title: '',
service_content: '',
privacy_title: '',
privacy_content: '',
})
/** Data End **/
/** Methods Start **/
const protocolGet = async (): Promise<void> => {
;(formData.value as object) = await apiGetProtocol()
}
const handleProtocolEdit = async (): Promise<void> => {
await apiSetProtocol({ ...formData.value })
protocolGet()
}
/** Methods End **/
/** Life Cycle Start **/
protocolGet()
/** Life Cycle End **/
</script>