Skip to content

O
occloud-server
Commit c203b008 by liuliufashi
Options

push web

parent e16633ee
Showing with 1628 additions and 0 deletions
web-vue-admin/.env.dev 0 → 100644
VUE_APP_MODE = 'dev'
NODE_ENV = 'development'
VUE_APP_BASE_URL = ''
VUE_APP_TEXT = '测试环境'
\ No newline at end of file
web-vue-admin/.env.pro 0 → 100644
VUE_APP_MODE = 'prod'
NODE_ENV = 'production'
VUE_APP_BASE_URL = ''
VUE_APP_TEXT = '生产环境'
\ No newline at end of file
web-vue-admin/.eslintrc.js 0 → 100644
module.exports = {
overrides: [
{
files: ['src/views/**/*.vue'],
rules: {
'vue/multi-word-component-names': 0,
},
},
]
}
\ No newline at end of file
web-vue-admin/.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
web-vue-admin/README.md 0 → 100644
npm run serve
npm run build
<!-- 提交 -->
git add .
git commit -m "xxxx"
git commit -m "xx" --no-verify
\ No newline at end of file
web-vue-admin/babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
web-vue-admin/package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
web-vue-admin/package.json 0 → 100644
{
"name": "pay",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"dev": "vue-cli-service serve --mode dev --open",
"prod": "vue-cli-service serve --mode prod --open",
"local": "vue-cli-service serve --mode local --open"
},
"dependencies": {
"@ant-design/icons-vue": "^6.1.0",
"ant-design-vue": "^3.2.9",
"axios": "^0.27.2",
"core-js": "^3.8.3",
"echarts": "^5.3.3",
"register-service-worker": "^1.7.2",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-pwa": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.0.0",
"less-loader": "^8.0.0",
"lint-staged": "^11.1.2",
"typescript": "~4.5.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": "vue-cli-service lint"
}
}
web-vue-admin/public/img/icons/safari-pinned-tab.svg 0 → 100644
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
</svg>
web-vue-admin/public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
web-vue-admin/public/robots.txt 0 → 100644
User-agent: *
Disallow:
web-vue-admin/src/App.vue 0 → 100644
<template>
<a-config-provider :locale="locale">
<router-view></router-view>
</a-config-provider>
</template>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
<script lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { defineComponent} from 'vue';
dayjs.locale('zh-cn');
export default defineComponent({
name:'App',
setup() {
return {
locale:zhCN
};
},
});
</script>
\ No newline at end of file
web-vue-admin/src/api/index.ts 0 → 100644
import request from "@/utils/request";
// const Login = (params:any)=>{
// request({
// url: "/log",
// params
// });
// }
export const getRouters = async (params: any) => {
return await request({
url: "/api/init/list-menus",
method:'get',
params,
});
};
web-vue-admin/src/components/HelloWorld.vue 0 → 100644
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
props: {
msg: String
}
})
export default class HelloWorld extends Vue {
msg!: string
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
web-vue-admin/src/main.ts 0 → 100644
import { createApp } from 'vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(store).use(router).use(Antd).mount('#app')
// console.log(process.env.VUE_APP_TEXT)
web-vue-admin/src/registerServiceWorker.ts 0 → 100644
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
web-vue-admin/src/router/index.ts 0 → 100644
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/index.vue'
import Error from '@/views/404/index.vue'
const routes: Array<RouteRecordRaw> = [
{
path:'/',
redirect:'/404'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home,
children:[
{
path: '/paybind',
name: 'PayBind',
component: ()=>import('@/views/pay-bind/index.vue')
},
{
path: '/payconfig',
name: 'PayConfig',
component: ()=>import('@/views/pay-config/index.vue')
},{
path: '/b',
name: 'B',
component: ()=>import('@/views/B/index.vue')
}
]
},
{
path: '/404',
name: '404',
component: Error
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to,from,next)=>{
console.log(to,from,next,'to,from,next');
next()
})
export default router
web-vue-admin/src/shims-vue.d.ts 0 → 100644
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
web-vue-admin/src/store/index.ts 0 → 100644
import { createStore } from 'vuex'
export default createStore({
state: {
routerList:[]
},
getters: {
},
mutations: {
setRoutet (state,list:any) {
state.routerList = list
}
},
actions: {
},
modules: {
}
})
web-vue-admin/src/utils/request.ts 0 → 100644
import axios from "axios";
const token:any = "";
const cookie:any= ""
import { message } from "ant-design-vue";
// 创建axios实例
const instance = axios.create({
baseURL: "http://192.168.3.131:8080/",
// 设置相应的时间
timeout: 5000,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
});
// 请求拦截器
instance.interceptors.request.use(
function (config: any) {
// 这里判断localStorage里面是否存在token，如果有则在请求头里面设置
// if (localStorage.jwtToken) {
config.headers.Authorization = token;
config.headers.Cookies = cookie;
// }
return config;
},
function (error) {
return Promise.reject(error);
}
);
// 响应式拦截器
instance.interceptors.response.use(
function (response) {
if (response.status === 200 ) {
return response.data.data
} else {
message.error(response.data.message);
}
},
function (error) {
return Promise.reject(error);
}
);
export default instance;
web-vue-admin/src/views/404/index.vue 0 → 100644
<template>
<div class="erro">
<a-empty :image="simpleImage" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Empty } from 'ant-design-vue';
export default defineComponent({
name:'404',
setup() {
return {
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
};
},
});
</script>
<style scoped>
.erro{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
web-vue-admin/src/views/B/index.vue 0 → 100644
<template>
<div>13</div>
</template>
<script lang="ts" >
import { defineComponent } from "vue";
export default defineComponent({
})
</script>
\ No newline at end of file
web-vue-admin/src/views/home/index.vue 0 → 100644
<template>
<div class="home">
<a-layout class="home-page">
<a-layout-header class="header">
<div class="header-right">
<bell-outlined />
</div>
<div class="header-right">
<RadarChartOutlined /><span>{{ info.user }}</span>
</div>
<div class="header-right">
<DashOutlined />
</div>
</a-layout-header>
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
<a-menu-item v-for="item in store.state.routerList " :key="item.id" @click="goNewPage(item)">
<div style="display: flex;align-items: center;">
<AlipaySquareFilled v-if="item.id === 1" style="font-size: 25px;" />
<DatabaseFilled v-else style="font-size: 25px;" />
<span class="nav-text">{{ item.name }}</span>
</div>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout style="padding: 0 24px 24px">
<a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</div>
</template>
<script lang="ts">
interface FormUser {
user: String,
}
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
import { BellOutlined, RadarChartOutlined, DashOutlined, AlipaySquareFilled, DatabaseFilled } from '@ant-design/icons-vue';
import { getRouters } from '@/api/index'
export default defineComponent({
name: 'Home',
components: {
UserOutlined,
LaptopOutlined,
NotificationOutlined,
BellOutlined,
RadarChartOutlined,
DashOutlined,
AlipaySquareFilled,
DatabaseFilled
},
setup() {
const router = useRouter()
const store = useStore()
const info = reactive<FormUser>({
user: '小刘',
})
const goNewPage = (e: any) => {
const { path } = e
router.push({
path
})
}
const setRoutet = (list: any) => {
store.commit('setRoutet', list)
}
return {
selectedKeys: ref<string[]>(['1']),
openKeys: ref<string[]>(['sub1']),
goNewPage,
setRoutet,
info,
store
};
},
async mounted() {
const list: any = await getRouters({})
this.setRoutet(list)
}
});
</script>
<style >
#components-layout-demo-top-side-2 .logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top-side-2 .logo {
float: right;
margin: 16px 0 16px 24px;
}
.site-layout-background {
background: #fff;
}
.ant-menu-submenu-arrow {
display: none;
}
</style>
<style scoped>
.custom-icons-list :deep(.anticon) {
margin-right: 6px;
}
</style>
<style lang="less">
.home {
height: 100vh;
.ant-layout-has-side {
overflow-y: scroll;
}
.home-page {
height: 100%;
.header {
display: flex;
align-items: center;
justify-content: flex-end;
background-color: blueviolet;
.header-right {
margin-right: 40px;
}
}
}
}
</style>
\ No newline at end of file
web-vue-admin/src/views/login/index.vue 0 → 100644
<template>
<div class="page">
<h3 class="page-title">欧畅云支付</h3>
<div class="content">
<h3 class="left">请登录</h3>
<p class="title left">请登录欧畅云账号</p>
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<div class="left">登录账号</div>
<a-form-item
labelAlign="left"
name="username"
class="input"
:rules="[{ required: true, message: '请输入邮箱号' }]"
>
<a-input
v-model:value="formState.username"
placeholder="请输入邮箱号"
/>
</a-form-item>
<div class="left">登录密码</div>
<a-form-item
labelAlign="left"
name="password"
class="input"
:rules="[{ required: true, message: '请输入登录密码' }]"
>
<a-input-password
v-model:value="formState.password"
placeholder="请输入登录密码"
:bordered="false"
/>
</a-form-item>
<div class="left mb10">
<a-radio v-model:checked="checked"></a-radio>点击同意《<span
style="color: blueviolet"
>服务条款</span
>》
</div>
<a-form-item>
<a-button
type="primary"
html-type="submit"
@click="onSubmit"
style="
margin-left: 20px;
width: 350px;
height: 50px;
background-color: blueviolet;
border: blueviolet;
"
>确认</a-button
>
</a-form-item>
</a-form>
<div class="resg">
<div class="left">还没有账号?</div>
<div style="color: blueviolet">去注册</div>
</div>
</div>
<footer class="bottom">欧畅云提供技术支持</footer>
</div>
</template>
<script lang="ts">
interface FormState {
username: string;
password: string;
}
import { useRouter } from 'vue-router'
import { defineComponent, reactive, ref ,toRaw } from "vue";
export default defineComponent({
name:'Login',
setup() {
const checked = ref<boolean>(false);
const router = useRouter()
const formState = reactive<FormState>({
username: "",
password: "",
});
const onFinish = (values: object) => {
console.log("Success:", values);
};
const onFinishFailed = (errorInfo: object) => {
console.log("Failed:", errorInfo);
};
const onSubmit = () => {
console.log('submit!', toRaw(formState));
router.push({
path:'/home'
})
};
return {
formState,
checked,
onFinish,
onFinishFailed,
onSubmit
};
},
});
</script>
<style scoped lang="less">
.page {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
.page-title {
position: fixed;
top: 10%;
left: 30%;
font-family: SourceHanSansSC;
font-weight: 700;
font-size: 28px;
font-style: normal;
letter-spacing: 0px;
line-height: 41px;
text-decoration: none;
color: blueviolet;
}
.content {
width: 400px;
height: 450px;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
h3 {
line-height: 60px;
height: 50px;
font-weight: 900;
}
p {
opacity: 0.8;
}
.title {
height: 30px;
line-height: 30px;
font-size: 12px;
opacity: 0.67;
}
.input {
width: 530px;
margin-left: 20px;
height: 40px;
text-align: center;
margin-bottom: 20px;
.ant-input {
height: 40px;
background: rgb(245, 247, 250);
}
#basic_password {
height: 40px;
background: rgb(245, 247, 250);
}
.ant-input-password {
height: 40px;
background: rgb(245, 247, 250);
}
}
::placeholder {
text-align: center;
font-size: 14px;
}
}
.left {
text-indent: 20px;
text-align: left;
}
.resg {
display: flex;
}
.bottom {
position: fixed;
font-family: SourceHanSansSC;
font-weight: 400;
font-size: 14px;
color: rgba(153, 153, 153, 1);
font-style: normal;
letter-spacing: 0px;
line-height: 20px;
text-decoration: none;
bottom: 5%;
}
}
</style>
<style lang="less">
.page {
.ant-input-affix-wrapper > input.ant-input {
background: rgb(245, 247, 250);
}
span.ant-radio + * {
text-align: left;
margin-left: 0px;
}
.mb10 {
margin-bottom: 10px;
}
}
</style>
web-vue-admin/src/views/pay-bind/index.vue 0 → 100644
<template>
<div class="bind-page">
<div style="display: flex; align-items: center; justify-content: space-between">
<div>
<a-button class="small left" @click="onSetShowTable">
<template #icon>
<LeftOutlined />
</template>
</a-button>
<a-button class="small right">
<template #icon>
<MenuUnfoldOutlined />
</template>
</a-button>
</div>
<div>
<a-button type="primary" block @click="showModal">新建支付通道</a-button>
</div>
</div>
<div style="margin-top: 10px">
<a-table :columns="columns" :data-source="data" :pagination="false" v-if="isShowTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<a>
{{ record.name }}
</a>
</template>
<template v-else-if="column.key === 'tags'">
<span>
<a-tag v-for="tag in record.tags" :key="tag" :color="
tag === 'loser'
? 'volcano'
: tag.length > 5
? 'geekblue'
: 'green'
">
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key === 'action'">
<span>
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link">
More actions
<down-outlined />
</a>
</span>
</template>
<template v-else-if="column.key === 'ref'">
<span>
<a-button danger @click="onSetShowTable">编辑</a-button>
</span>
<span>
<a-button danger>禁用</a-button>
</span>
</template>
</template>
</a-table>
<div v-else>
<a-form :layout="appFormState.layout" :model="formState" v-bind="formItemLayout">
<a-form-item label="通道名称">
<a-input v-model:value="formState.name" placeholder="input placeholder" />
</a-form-item>
<a-form-item label="Field A">
<a-input v-model:value="formState.fieldA" placeholder="input placeholder" />
</a-form-item>
<a-form-item label="Field B">
<a-input v-model:value="formState.fieldB" placeholder="input placeholder" />
</a-form-item>
<a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
<a-button type="primary">Submit</a-button>
</a-form-item>
</a-form>
</div>
</div>
<a-modal v-model:visible="visible" title="支付通道名称" @ok="handleOk" :footer="null">
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
@finish="onFinish" @finishFailed="onFinishFailed">
<a-form-item label="支付通道名称" name="username"
:rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="formState.username" />
</a-form-item>
<p class="title">建议用该微信商户号主体名称作为通道名称</p>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script lang="ts">
interface FormState {
username: string;
}
interface AppFormState {
layout: 'horizontal' | 'vertical' | 'inline';
fieldA: string;
fieldB: string;
name:string;
}
import { defineComponent, ref, reactive,computed } from "vue";
import type { UnwrapRef } from 'vue';
import {
LeftOutlined,
MenuUnfoldOutlined,
SmileOutlined,
DownOutlined,
} from "@ant-design/icons-vue";
const columns = [
{
title: "支付通道名称",
dataIndex: "name",
key: "name",
},
{
title: "微信",
dataIndex: "age",
key: "age",
},
{
title: "支付宝",
dataIndex: "address",
key: "address",
},
{
title: "状态",
key: "tags",
dataIndex: "tags",
},
{
title: "权重",
key: "action",
},
{
title: "操作",
key: "ref",
},
];
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"],
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"],
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"],
},
];
export default defineComponent({
name: "PayBind",
components: {
LeftOutlined,
MenuUnfoldOutlined,
SmileOutlined,
DownOutlined,
},
setup() {
const appFormState: UnwrapRef<AppFormState> = reactive({
layout: 'horizontal',
fieldA: '',
fieldB: '',
name:''
});
const formItemLayout = computed(() => {
const { layout } = appFormState;
return layout === 'horizontal'
? {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
}
: {};
});
const buttonItemLayout = computed(() => {
const { layout } = appFormState;
return layout === 'horizontal'
? {
wrapperCol: { span: 14, offset: 4 },
}
: {};
});
const visible = ref<boolean>(false);
const isShowTable = ref<boolean>(true)
const showModal = () => {
visible.value = true;
};
const formState = reactive<FormState>({
username: ''
});
const handleOk = (e: MouseEvent) => {
console.log(e);
visible.value = false;
};
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const onSetShowTable = ()=>{
isShowTable.value = !isShowTable.value
}
return {
data,
columns,
visible,
showModal,
handleOk,
formState,
onFinish,
onFinishFailed,
isShowTable,
onSetShowTable,
appFormState,
formItemLayout,
buttonItemLayout,
};
},
});
</script>
<style lang="less" scoped>
.bind-page {
.small {
border: none;
height: 30px;
width: 50px;
}
.left {
border-left: 1px solid rgb(236, 236, 236);
border-top: 1px solid rgb(236, 236, 236);
border-bottom: 1px solid rgb(236, 236, 236);
border-right-width: 80%;
border-right: 1px solid rgb(236, 236, 236);
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}
.right {
border-right: 1px solid rgb(236, 236, 236);
border-top: 1px solid rgb(236, 236, 236);
border-bottom: 1px solid rgb(236, 236, 236);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
}
}
</style>
<style scoped>
.title{
text-align: center;
font-family: SourceHanSansSC;
font-weight: 400;
font-size: 13px;
color: rgba(190,190,190,1);
font-style: normal;
letter-spacing: 0px;
line-height: 19px;
text-decoration: none;
}
</style>
web-vue-admin/src/views/pay-config/compoents/body/index.vue 0 → 100644
<template>
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" >
<a-form-item label="支付宝域名配置" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" />
</a-form-item>
<a-form-item label="微信域名配置" v-bind="validateInfos['sub.name']">
<a-input v-model:value="modelRef.sub.name" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click.prevent="onSubmit">提交</a-button>
<a-button style="margin-left: 10px" @click="reset">重置</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default defineComponent({
name: "ContentBodys",
setup() {
const modelRef = reactive({
name: "",
sub: {
name: "",
},
});
const { resetFields, validate, validateInfos } = useForm(
modelRef,
reactive({
name: [
{
required: true,
message: "Please input name",
},
],
"sub.name": [
{
required: true,
message: "Please input sub name",
},
],
})
);
const onSubmit = () => {
validate()
.then((res) => {
console.log(res, toRaw(modelRef));
})
.catch((err) => {
console.log("error", err);
});
};
const reset = () => {
resetFields();
};
return {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
validateInfos,
reset,
modelRef,
onSubmit,
};
},
});
</script>
<style>
.dynamic-delete-button {
cursor: pointer;
position: relative;
top: 4px;
font-size: 24px;
color: #999;
transition: all 0.3s;
}
.dynamic-delete-button:hover {
color: #777;
}
.dynamic-delete-button[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
</style>
<style scoped lang="less">
.addform {
}
</style>
web-vue-admin/src/views/pay-config/compoents/footer/index.vue 0 → 100644
<template>
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="公众号配置" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click.prevent="onSubmit">提交</a-button>
<a-button style="margin-left: 10px" @click="reset">重置</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default defineComponent({
name:'ContentFooters',
setup() {
const modelRef = reactive({
name: "",
sub: {
name: "",
},
});
const { resetFields, validate, validateInfos } = useForm(
modelRef,
reactive({
name: [
{
required: true,
message: "Please input name",
},
],
"sub.name": [
{
required: true,
message: "Please input sub name",
},
],
})
);
const onSubmit = () => {
validate()
.then((res) => {
console.log(res, toRaw(modelRef));
})
.catch((err) => {
console.log("error", err);
});
};
const reset = () => {
resetFields();
};
return {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
validateInfos,
reset,
modelRef,
onSubmit,
};
},
})
</script>
\ No newline at end of file
web-vue-admin/src/views/pay-config/compoents/header/index.vue 0 → 100644
<template>
<a-table :columns="columns" :data-source="data" :pagination="false">
<template #bodyCell="{ text, record, index, column }">
<div v-if="column.key === 'name' && record.key === '1'">
<div class="flex">
<AlipaySquareFilled :style="{ fontSize: '24px' }"></AlipaySquareFilled
><span class="ml20">支付宝</span>
</div>
</div>
<div v-else-if="column.key === 'name' && record.key === '2'">
<div class="flex">
<WechatFilled :style="{ fontSize: '24px' }"></WechatFilled
><span class="ml20">微信支付</span>
</div>
</div>
<div v-else-if="column.key === 'name' && record.key === '3'">
<div class="flex">
<DollarCircleFilled :style="{ fontSize: '24px' }"></DollarCircleFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-else-if="column.key === 'name' && record.key === '4'">
<div class="flex">
<CreditCardFilled :style="{ fontSize: '24px' }"></CreditCardFilled
><span class="ml20">花呗</span>
</div>
</div>
<div v-else-if="column.key === 'name' && record.key === '5'">
<div class="flex">
<SkypeFilled :style="{ fontSize: '24px' }"></SkypeFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-if="column.key === 'tags'">
<a-button type="primary" @click="onOpenInfo(record)" shape="round"
>查看</a-button
>
</div>
</template>
</a-table>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
SmileOutlined,
DownOutlined,
AlipaySquareFilled,
WechatFilled,
DollarCircleFilled,
CreditCardFilled,
SkypeFilled,
} from "@ant-design/icons-vue";
const columns = [
{
title: "支付渠道",
name: "Name",
dataIndex: "name",
key: "name",
},
{
title: "绑定账户数",
dataIndex: "age",
key: "age",
},
{
title: "当前预警",
dataIndex: "address",
key: "address",
},
{
title: "操作",
key: "tags",
dataIndex: "tags",
},
];
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"],
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"],
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"],
},
];
export default defineComponent({
name: "ContentHeaders",
components: {
SmileOutlined,
DownOutlined,
AlipaySquareFilled,
WechatFilled,
DollarCircleFilled,
CreditCardFilled,
SkypeFilled,
},
setup() {
const onOpenInfo = (record: Object) => {
console.log(record, "record");
};
return {
data,
columns,
onOpenInfo,
};
},
});
</script>
<style lang="less" scoped>
.flex {
display: flex;
align-items: center;
}
.ml20 {
margin-left: 20px;
}
</style>
web-vue-admin/src/views/pay-config/index.vue 0 → 100644
<template>
<a-layout>
<a-layout-content class="header-content">
<div>
<div class="header-title">
<span>支付配置</span
><DownOutlined
v-if="ShowIcon.HeaderIcon"
@click="onHearder"
></DownOutlined>
<UpOutlined v-else @click="onHearder"></UpOutlined>
</div>
<ContentHeaders v-if="ShowIcon.HeaderIcon"></ContentHeaders>
</div>
</a-layout-content>
<a-layout-content class="body-content">
<div>
<div class="header-title">
<span>域名配置</span
><DownOutlined
v-if="ShowIcon.BodyIcon"
@click="onBody"
></DownOutlined>
<UpOutlined v-else @click="onBody"></UpOutlined>
</div>
<ContentBodys v-if="ShowIcon.BodyIcon"></ContentBodys>
</div>
</a-layout-content>
<a-layout-footer class="footer-content">
<div>
<div class="header-title">
<span>公众号配置</span
><DownOutlined
v-if="ShowIcon.FooterIcon"
@click="onFooter"
></DownOutlined>
<UpOutlined v-else @click="onFooter"></UpOutlined>
</div>
<ContentFooters v-if="ShowIcon.FooterIcon"></ContentFooters>
</div>
</a-layout-footer>
</a-layout>
</template>
<script lang="ts">
interface ShowIcon {
HeaderIcon: Boolean;
BodyIcon: Boolean;
FooterIcon: Boolean;
}
import { defineComponent, reactive } from "vue";
import ContentHeaders from "./compoents/header/index.vue";
import ContentBodys from "./compoents/body/index.vue";
import ContentFooters from "./compoents/footer/index.vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
export default defineComponent({
name: "PayConfig",
components: {
ContentHeaders,
ContentBodys,
ContentFooters,
DownOutlined,
UpOutlined,
},
setup() {
const ShowIcon = reactive<ShowIcon>({
HeaderIcon: true,
BodyIcon: true,
FooterIcon: true,
});
const onHearder = () => {
ShowIcon.HeaderIcon = !ShowIcon.HeaderIcon;
};
const onBody = () => {
ShowIcon.BodyIcon = !ShowIcon.BodyIcon;
};
const onFooter = () => {
ShowIcon.FooterIcon = !ShowIcon.FooterIcon;
};
return {
ShowIcon,
onHearder,
onBody,
onFooter,
};
},
});
</script>
<style lang="less" scoped>
.header-content {
background-color: white;
padding: 0px;
}
.body-content {
background-color: white;
}
.footer-content {
background-color: white;
padding: 0px;
}
.header-title {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
web-vue-admin/tsconfig.json 0 → 100644
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
web-vue-admin/vue.config.js 0 → 100644
module.exports = {
transpileDependencies: true,
lintOnSave:false,
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#1890ff', // 全局主色
'link-color': '#1890ff', // 链接色
'success-color': '#52c41a', // 成功色
'warning-color': '#faad14', // 警告色
'error-color': '#f5222d', // 错误色
'font-size-base': '14px', // 主字号
'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
'border-radius-base': '4px', // 组件/浮层圆角
'border-color-base': '#d9d9d9',// 边框色
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
},
javascriptEnabled: true,
},
},
},
},
devServer: {
proxy: {
'/api': {
target: 'http://47.102.211.197:8092', //请求对象
ws: true,//代理websocked
changeOrigin: true,
secure: false, //target是否为https接口
pathRewrite: {
'^/api': '' //更改请求URL
}
}
}
}
};
\ No newline at end of file
web-vue-admin/webpack.config.js 0 → 100644
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
'primary-color': '#1890ff', // 全局主色
'link-color': '#1890ff', // 链接色
'success-color': '#52c41a', // 成功色
'warning-color': '#faad14', // 警告色
'error-color': '#f5222d', // 错误色
'font-size-base': '14px', // 主字号
'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
'border-radius-base': '4px', // 组件/浮层圆角
'border-color-base': '#d9d9d9',// 边框色
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
},
javascriptEnabled: true,
}
},
}],
// ...other rules
}],
// ...other config
}
\ No newline at end of file
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