Skip to content

O
occloud-server
Commit 74dd8590 by liuliufashi
Options

updatye

parent c203b008
Showing with 1024 additions and 289 deletions
web-vue-admin/package.json
......@@ -12,10 +12,12 @@
},
"dependencies": {
"@ant-design/icons-vue": "^6.1.0",
"@vueup/vue-quill": "^1.0.0-alpha.40",
"ant-design-vue": "^3.2.9",
"axios": "^0.27.2",
"core-js": "^3.8.3",
"echarts": "^5.3.3",
"quill": "^1.3.6",
"register-service-worker": "^1.7.2",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
......
web-vue-admin/src/App.vue
......@@ -4,6 +4,9 @@
</a-config-provider>
</template>
<style lang="less">
html{
overflow: hidden;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
......
web-vue-admin/src/api/index.ts
......@@ -10,7 +10,54 @@ import request from "@/utils/request";
export const getRouters = async (params: any) => {
return await request({
url: "/api/init/list-menus",
method:'get',
method:'post',
params,
});
};
export const createRegister = async(params: any)=>{
return await request({
url: "/api/user/register",
method:'post',
params,
});
}
export const onLogin = async(data: any)=>{
return await request({
url: "/api/pub/login",
method:'post',
data,
});
}
// /aaa/tt
export const onTest = async(data: any)=>{
return await request({
url: "/api/aaa/tt",
method:'post',
data,
});
}
export const payConfigGetSearch = async(id:number)=>{
return await request({
url: `/api/pay/select?uid=${id}`,
method:'post',
});
}
export const onZfbPay = async(data:any)=>{
return await request({
url: `/api/pay/createali`,
method:'post',
data
});
}
export const onWxPay = async(data:any)=>{
return await request({
url: `/api/pay/createwx`,
method:'post',
data
});
}
// /user/register
\ No newline at end of file
web-vue-admin/src/main.ts
......@@ -9,7 +9,8 @@ import 'ant-design-vue/dist/antd.css';
createApp(App).use(store).use(router).use(Antd).mount('#app')
const app= createApp(App).use(store).use(router).use(Antd).mount('#app')
// console.log(process.env.VUE_APP_TEXT)
web-vue-admin/src/router/index.ts
......@@ -2,10 +2,11 @@ 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'
import {getToken} from '@/utils/token'
const routes: Array<RouteRecordRaw> = [
{
path:'/',
redirect:'/404'
redirect:'/login'
},
{
path: '/login',
......@@ -16,21 +17,34 @@ const routes: Array<RouteRecordRaw> = [
path: '/home',
name: 'Home',
component: Home,
redirect:'/home/paybind',
children:[
{
path: '/paybind',
path: '/home/paybind',
name: 'PayBind',
component: ()=>import('@/views/pay-bind/index.vue')
},
{
path: '/payconfig',
path: '/home/payconfig',
name: 'PayConfig',
component: ()=>import('@/views/pay-config/index.vue')
},{
},
{
path: '/home/goodscabinet',
name: 'GoodsCabinet',
component: ()=>import('@/views/goods-cabinet/index.vue')
},
{
path: '/home/paylist',
name: 'PayList',
component: ()=>import('@/views/pay-list/index.vue')
},
{
path: '/b',
name: 'B',
component: ()=>import('@/views/B/index.vue')
}
},
]
},
{
......@@ -43,8 +57,14 @@ const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to,from,next)=>{
console.log(to,from,next,'to,from,next');
next()
})
// router.beforeEach((to,from,next)=>{
// console.log(to,from,next,'to,from,next');
// const token:any = getToken
// if(token){
// next()
// }else{
// next('/404')
// }
// })
export default router
web-vue-admin/src/store/index.ts
import { createStore } from 'vuex'
import {getUserInfo} from '@/utils/userInfo'
export default createStore({
state: {
routerList:[]
routerList:[],
userInfo:{}
},
getters: {
getUserInfo (state){
const userInfo:any =getUserInfo()
state.userInfo = JSON.parse(userInfo)
return state.userInfo
},
},
mutations: {
setRoutet (state,list:any) {
state.routerList = list
}
},
},
actions: {
},
......
web-vue-admin/src/utils/request.ts
import axios from "axios";
const token:any = "";
const cookie:any= ""
import { message } from "ant-design-vue";
import { getToken } from "./token";
// 创建axios实例
const instance = axios.create({
baseURL: "http://192.168.3.131:8080/",
......@@ -12,15 +11,15 @@ const instance = axios.create({
"Content-Type": "application/json",
},
});
const token:String = getToken();
// 请求拦截器
instance.interceptors.request.use(
function (config: any) {
// 这里判断localStorage里面是否存在token，如果有则在请求头里面设置
// if (localStorage.jwtToken) {
if (token) {
config.headers.Authorization = token;
config.headers.Cookies = cookie;
// }
}
return config;
},
function (error) {
......@@ -32,7 +31,7 @@ instance.interceptors.request.use(
instance.interceptors.response.use(
function (response) {
if (response.status === 200 ) {
return response.data.data
return response.data
} else {
message.error(response.data.message);
}
......
web-vue-admin/src/utils/token.ts
export const setToken = (token:String) =>{
if(localStorage.getItem('session_id')){
localStorage.removeItem('session_id')
localStorage.setItem('session_id',JSON.stringify(token))
}else{
localStorage.setItem('session_id',JSON.stringify(token))
}
}
export const getToken = () =>{
if(localStorage.getItem('session_id')){
const token:any = localStorage.getItem('session_id')
return JSON.parse(token)
}else{
return ''
}
}
\ No newline at end of file
web-vue-admin/src/utils/userInfo.ts 0 → 100644
export const setUserInfo = (user:Object)=>{
if(localStorage.getItem('userInfo')){
localStorage.removeItem('userInfo')
localStorage.setItem('userInfo',JSON.stringify(user))
}else{
localStorage.setItem('userInfo',JSON.stringify(user))
}
}
export const getUserInfo = ()=>{
if(localStorage.getItem('userInfo')){
return localStorage.getItem('userInfo')
}else{
return {}
}
}
\ No newline at end of file
web-vue-admin/src/views/404/index.vue
......@@ -4,24 +4,19 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Empty } from 'ant-design-vue';
<script lang="ts" setup>
import { defineExpose } from "vue";
import { Empty } from "ant-design-vue";
export default defineComponent({
name:'404',
setup() {
return {
defineExpose({
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
};
},
});
</script>
<style scoped>
.erro{
.erro {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
web-vue-admin/src/views/goods-cabinet/components/index.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">商品基础信息</div>
<a-form
style="margin-top: 30px"
:model="formState"
name="basic"
:label-col="{ span: 0 }"
:wrapper-col="{ span: 8 }"
autocomplete="off"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
:wrapper-col="{ offset: 0, span: 8 }"
class="Up"
>
<div class="clearfix">
<a-upload
class="clearfix-up"
v-model:file-list="fileList"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture-card"
@preview="handlePreview"
>
<div v-if="fileList.length < 8">
<plus-outlined />
<div style="margin-top: 8px">Upload</div>
</div>
</a-upload>
<a-modal
:visible="previewVisible"
:title="previewTitle"
:footer="null"
@cancel="handleCancel"
>
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<div>
<p class="warin">
建议图片比例为4:3,大小不超过200M,图片仅支持JPG、JPEG、PNG格式
</p>
</div>
</div>
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<div style="display: none">
<a-upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:multiple="true"
:file-list="fileList"
@change="handleChange"
>
<a-button>
<upload-outlined></upload-outlined>
Upload
</a-button>
</a-upload>
</div>
<QuillEditor
id="editorId"
ref="myQuillEditor"
v-model:content="content"
theme="snow"
contentType="html"
:options="options"
/>
<div class="editor-text">
<p>1、商品描述需符合《中华人民共和国广告法》</p>
<p>
2、详情图片宽度750,高度不超过5000,每张图片最大不超过1M,图片仅支持JPG、JPEG、PNG格式。
</p>
</div>
</a-form-item>
<a-form-item
name="remember"
:wrapper-col="{ offset: 0, span: 8 }"
label="Password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<div>
<a-radio-group v-model:value="value" @change="onSelectPlain">
<a-radio :value="1">免费</a-radio>
<a-radio :value="2">收费</a-radio>
</a-radio-group>
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }" v-if="value === 2">
<div>
<div>划线价</div>
<a-input-number
v-model:value="crossedPrice"
style="width: 200px"
:min="0"
:max="10"
:step="0.01"
string-mode
/>
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }" v-if="value === 2">
<div>
<div>售卖价</div>
<a-input-number
v-model:value="sellingPrice"
style="width: 200px"
:min="0"
:max="10"
:step="0.01"
string-mode
/>
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset:0 , span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">Submit</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref,defineEmits,shallowRef,defineExpose } from "vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import type { UploadProps, RadioGroupProps } from "ant-design-vue";
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
interface FormState {
username: string;
password: string;
remember: boolean;
}
interface Props {
props: Object;
}
function getBase64(file: File) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
const plainOptions = [
{ label: "免费", value: true },
{ label: "收费", value: true },
];
const props = defineProps<Props>();
const emit= defineEmits(['onBack']);
let content = ref("");
const myQuillEditor = ref(null);
const crossedPrice = ref<Number>(1);
const sellingPrice = ref<Number>(1);
const value = ref<number>(1);
const previewVisible = ref(false);
const previewImage = ref("");
const previewTitle = ref("");
const fileList = ref<UploadProps["fileList"]>([
{
uid: "-1",
name: "image.png",
status: "done",
url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
},
]);
const options = reactive({
modules: {
toolbar: {
container: [
[{ size: ["small", false, "large"] }],
["bold", "italic", "underline"],
[{ header: 1 }, { header: 2 }],
[{ list: "ordered" }, { list: "bullet" }],
["link", "image"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
],
handlers: {
image: function (value: any) {
if (value) {
// 调用element图片上传
// document.querySelector(".editor-img-uploader>.el-upload").click();
} else {
Quill.format("image", true);
}
},
},
},
history: {
delay: 1000,
maxStack: 50,
userOnly: false,
},
},
});
const handleCancel = () => {
previewVisible.value = false;
previewTitle.value = "";
};
const handlePreview = async (file: any) => {
if (!file.url && !file.preview) {
file.preview = (await getBase64(file.originFileObj)) as string;
}
previewImage.value = file.url || file.preview;
previewVisible.value = true;
previewTitle.value =
file.name || file.url.substring(file.url.lastIndexOf("/") + 1);
};
const formState = reactive<FormState>({
username: "",
password: "",
remember: true,
});
const onFinish = (values: any) => {
console.log("Success:", values);
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (info: any) => {
let resFileList = [...info.fileList];
// 1. Limit the number of uploaded files
// Only to show two recent uploaded files, and old ones will be replaced by the new
resFileList = resFileList.slice(-2);
// 2. read from response and show file link
resFileList = resFileList.map((file) => {
if (file.response) {
// Component will show file.url as link
file.url = file.response.url;
}
return file;
});
fileList.value = resFileList;
};
const onSelectPlain = (e: any) => {
value.value = e.target.value;
};
const onSubmit =()=>{
emit('onBack')
};
defineExpose({
formState,
onFinish,
onFinishFailed,
previewVisible,
previewImage,
fileList,
handleCancel,
handlePreview,
previewTitle,
options,
content,
handleChange,
plainOptions,
value,
onSelectPlain,
crossedPrice,
sellingPrice,
onSubmit,
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
text-align: left;
}
.clearfix {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
.ant-upload-picture-card-wrapper {
display: flex;
}
}
.Up {
display: flex;
.warin {
font-family: SourceHanSansSC;
font-weight: 400;
font-size: 12px;
color: rgb(154, 154, 154);
font-style: normal;
letter-spacing: 0px;
line-height: 17px;
text-decoration: none;
}
}
.editor-text {
border-radius: 3px;
font-size: 14px;
padding: 0px;
text-align: center;
background: rgb(239, 239, 239);
display: flex;
align-items: baseline;
flex-direction: column;
> p {
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: 400;
font-size: 12px;
color: rgb(154, 154, 154);
flex: 1;
}
}
}
</style>
web-vue-admin/src/views/goods-cabinet/index.vue 0 → 100644
<template>
<div class="good-page">
<div class="good-search" v-if="!isShowGoods">
<div>
<a-button danger class="ml10">全部</a-button>
<a-button danger class="ml10">正常</a-button>
<a-button danger class="ml10">已下架</a-button>
<a-input-search
v-model:value="value"
placeholder="input search text"
style="width: 200px; margin-left: 10px"
@search="onSearch"
/>
</div>
<div class="good-cad">
<a-button type="primary" class="mr10" @click="onGoods(0)"
>新建商品</a-button
>
<a-button type="primary" @click="onGoods(1)">新建商品包</a-button>
</div>
</div>
<div class="goods-list" v-if="!isShowGoods">
<a-table :columns="columns" :data-source="data">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span>
<smile-outlined />
Name
</span>
</template>
</template>
<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>
</a-table>
</div>
<div v-if="isShowGoods">
<GoodsBags :props="{ propsData }" @onBack="onBack"></GoodsBags>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose } from "vue";
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import GoodsBags from "./components/index.vue";
const columns = [
{
name: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Age",
dataIndex: "age",
key: "age",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
{
title: "Tags",
key: "tags",
dataIndex: "tags",
},
{
title: "Action",
key: "action",
},
];
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"],
},
];
interface props {
isCad: Number;
}
const value = ref<string>("");
const propsData = reactive<props>({
isCad: 0,
});
const isShowGoods = ref<Boolean>(false);
const onSearch = (searchValue: string) => {
console.log("use value", searchValue);
console.log("or use this.value", value.value);
};
const onGoods = (e: Number) => {
propsData.isCad = e;
isShowGoods.value = true;
};
const onBack = (e: Number) => {
isShowGoods.value = false;
};
defineExpose({
value,
onSearch,
data,
columns,
onGoods,
isShowGoods,
propsData,
onBack,
});
</script>
<style lang="less" scoped>
.good-page {
.good-search {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.ood-cad {
width: 100%;
}
.ml10 {
margin-left: 10px;
}
.mr10 {
margin-right: 10px;
}
}
.goods-list {
margin-top: 10px;
}
}
</style>
web-vue-admin/src/views/home/index.vue
......@@ -6,7 +6,7 @@
<bell-outlined />
</div>
<div class="header-right">
<RadarChartOutlined /><span>{{ info.user }}</span>
<RadarChartOutlined /><span>{{ info.name }}</span>
</div>
<div class="header-right">
<DashOutlined />
......@@ -14,18 +14,36 @@
</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>
<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' }">
<a-layout-content
:style="{
background: '#fff',
padding: '24px',
margin: 0,
minHeight: '280px',
}"
>
<router-view></router-view>
</a-layout-content>
</a-layout>
......@@ -33,60 +51,52 @@
</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,
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
BellOutlined,
RadarChartOutlined,
DashOutlined,
AlipaySquareFilled,
DatabaseFilled
},
setup() {
const router = useRouter()
const store = useStore()
const info = reactive<FormUser>({
user: '小刘',
})
const goNewPage = (e: any) => {
const { path } = e
DatabaseFilled,
} from "@ant-design/icons-vue";
import { getRouters } from "@/api/index";
interface FormUser {
name: String;
password: String;
}
const router = useRouter();
const store = useStore();
const info = reactive<FormUser>(store.getters.getUserInfo);
const goNewPage = (e: any) => {
const { path } = e;
router.push({
path
})
}
const setRoutet = (list: any) => {
store.commit('setRoutet', list)
path,
query:{
}
return {
selectedKeys: ref<string[]>(['1']),
openKeys: ref<string[]>(['sub1']),
});
};
const setRoutet = (list: any) => {
store.commit("setRoutet", list);
};
onMounted(async () => {
const list: any = await getRouters({});
setRoutet(list.data);
});
defineExpose({
selectedKeys: ref<string[]>(["1"]),
openKeys: ref<string[]>(["sub1"]),
goNewPage,
setRoutet,
info,
store
};
},
async mounted() {
const list: any = await getRouters({})
this.setRoutet(list)
}
store,
});
</script>
<style >
<style>
#components-layout-demo-top-side-2 .logo {
float: left;
width: 120px;
......@@ -115,14 +125,23 @@ export default defineComponent({
</style>
<style lang="less">
.home {
height: 100vh;
.ant-layout-has-side {
overflow-y: scroll;
width: 100%;
.ant-layout {
height: 871px;
overflow-y: hidden;
padding: 0px !important;
background-color: white;
}
.ant-layout-sider-children {
background: rgb(235, 235, 235);
}
.ant-layout-has-sider {
overflow: hidden;
}
.home-page {
height: 100%;
overflow: hidden;
.header {
display: flex;
......
web-vue-admin/src/views/login/index.vue
......@@ -40,6 +40,7 @@
</a-form-item>
<div class="left mb10">
<a-radio v-model:checked="checked"></a-radio>点击同意《<span
@click="onAgreement"
style="color: blueviolet"
>服务条款</span
>》
......@@ -62,50 +63,75 @@
</a-form>
<div class="resg">
<div class="left">还没有账号?</div>
<div style="color: blueviolet">去注册</div>
<div style="color: blueviolet" @click="onRegister">去注册</div>
</div>
</div>
<footer class="bottom">欧畅云提供技术支持</footer>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { defineExpose, reactive, ref, toRaw } from "vue";
import { onLogin } from "@/api/index";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
import { setToken } from "@/utils/token";
import { setUserInfo } from "@/utils/userInfo";
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>({
const checked = ref<boolean>(false);
const router = useRouter();
const store = useStore();
const formState = reactive<FormState>({
username: "",
password: "",
});
const onFinish = (values: object) => {
});
const onFinish = (values: object) => {
console.log("Success:", values);
};
};
const onFinishFailed = (errorInfo: object) => {
const onFinishFailed = (errorInfo: object) => {
console.log("Failed:", errorInfo);
};
const onSubmit = async () => {
const user = {
name: toRaw(formState).username,
password: toRaw(formState).password,
};
const onSubmit = () => {
console.log('submit!', toRaw(formState));
if (checked.value) {
const data: any = await onLogin(JSON.stringify(user));
if (data.message === "ok" && data.state === 1) {
setUserInfo(user);
setToken(data.data.session_id);
router.push({
path:'/home'
})
};
return {
path: "/home",
});
} else {
message.warning(data.data);
}
} else {
message.warning("请勾选同意下方的服务协议");
}
};
const onRegister = () => {
window.open("https://testmanager.finezb.com/#/./user/register", "_blank");
};
const onAgreement = () => {
window.open("https://xs-legal.finezb.com/service.html", "_blank");
};
defineExpose({
formState,
checked,
onFinish,
onFinishFailed,
onSubmit
};
},
onSubmit,
onRegister,
onAgreement,
});
</script>
<style scoped lang="less">
......@@ -114,6 +140,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
.page-title {
position: fixed;
top: 10%;
......@@ -127,6 +154,7 @@ export default defineComponent({
text-decoration: none;
color: blueviolet;
}
.content {
width: 400px;
height: 450px;
......@@ -183,9 +211,11 @@ export default defineComponent({
text-indent: 20px;
text-align: left;
}
.resg {
display: flex;
}
.bottom {
position: fixed;
font-family: SourceHanSansSC;
......@@ -205,10 +235,12 @@ export default defineComponent({
.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;
}
......
web-vue-admin/src/views/pay-bind/index.vue
......@@ -15,10 +15,10 @@
</div>
<div>
<a-button type="primary" block @click="showModal">新建支付通道</a-button>
<a-button type="primary" block @click="onSetShowTable" v-if="query && query.isShow">新建支付通道</a-button>
</div>
</div>
<div style="margin-top: 10px">
<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'">
......@@ -62,18 +62,24 @@
</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 :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
<a-form-item label="通道名称" has-feedback labelAlign="left" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入通道名称" />
</a-form-item>
<a-form-item label="Field A">
<a-input v-model:value="formState.fieldA" placeholder="input placeholder" />
<a-form-item label="uid:" has-feedback labelAlign="left" v-bind="validateInfos.uid" >
<a-input v-model:value="modelRef.uid" placeholder="请输入uid" />
</a-form-item>
<a-form-item label="Field B">
<a-input v-model:value="formState.fieldB" placeholder="input placeholder" />
<a-form-item label="appid:" has-feedback labelAlign="left" v-bind="validateInfos.appid">
<a-input v-model:value="modelRef.appid" placeholder="请输入appid" />
</a-form-item>
<a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
<a-button type="primary">Submit</a-button>
<a-form-item label="Appkey:" has-feedback labelAlign="left" v-bind="validateInfos.Appkey">
<a-input v-model:value="modelRef.Appkey" placeholder="请输入Appkey" />
</a-form-item>
<a-form-item label="Secretkey:" has-feedback labelAlign="left" v-bind="validateInfos.Secretkey">
<a-input v-model:value="modelRef.Secretkey" placeholder="请输入Secretkey" />
</a-form-item>
<a-form-item >
<a-button type="primary" @click="onSubmit">保存</a-button>
</a-form-item>
</a-form>
</div>
......@@ -93,24 +99,28 @@
</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';
<script lang="ts" setup>
import { defineExpose, ref, reactive, computed,toRaw } from "vue";
import { useRoute } from "vue-router";
import { Form } from 'ant-design-vue';
import {
LeftOutlined,
MenuUnfoldOutlined,
SmileOutlined,
DownOutlined,
} from "@ant-design/icons-vue";
import {onZfbPay,onWxPay,onTest} from '@/api/index'
import { message } from 'ant-design-vue';
interface FormState {
username: string;
}
interface AppFormState {
uid: string;
appid: string;
Appkey: string;
Secretkey: string;
name: string;
}
const useForm = Form.useForm;
const columns = [
{
title: "支付通道名称",
......@@ -165,62 +175,114 @@ const data = [
tags: ["cool", "teacher"],
},
];
export default defineComponent({
name: "PayBind",
components: {
LeftOutlined,
MenuUnfoldOutlined,
SmileOutlined,
DownOutlined,
const route = useRoute()
const query = computed({
get: () => {
return route.query
},
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 },
set: () => {
return route.query
}
: {};
});
const buttonItemLayout = computed(() => {
const { layout } = appFormState;
return layout === 'horizontal'
? {
wrapperCol: { span: 14, offset: 4 },
})
const modelRef = reactive<AppFormState>({
Secretkey: "",
Appkey: "",
uid: "",
appid: "",
name: "",
});
const rulesRef = reactive({
Secretkey: [
{
required: true,
message: '请输入Secretkey',
},
],
Appkey: [
{
required: true,
message: '请输入Appkey',
},
],
name: [
{
required: true,
message: '请输入通道名称',
},
],
uid: [
{
required: true,
message: '请输入uid',
},
],
appid: [
{
required: true,
message: '请输入appid',
},
],
});
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
const onSubmit =async () => {
// const data ={
// a:'a',
// b:{
// c:'c',
// d:'d'
// }
// }
// await onTest(JSON.stringify(data))
validate()
.then(async() => {
let data = {
}
if(query.value.mode === 'zfb'){
data = await onZfbPay(toRaw(modelRef))
}else if(query.value.mode === 'wx'){
data = await onWxPay(toRaw(modelRef))
}
if(data.state === 1){
message.success(data.message, 10,);
}else{
message.warning(data.message, 10,);
}
: {};
})
.catch(err => {
console.log('error', err);
});
const visible = ref<boolean>(false);
const isShowTable = ref<boolean>(true)
const showModal = () => {
};
const visible = ref<boolean>(false);
const isShowTable = ref<boolean>(true);
const showModal = () => {
visible.value = true;
};
const formState = reactive<FormState>({
username: ''
});
};
const formState = reactive<FormState>({
username: "",
});
const handleOk = (e: MouseEvent) => {
const handleOk = (e: MouseEvent) => {
console.log(e);
visible.value = false;
};
const onFinish = (values: any) => {
console.log('Success:', values);
};
};
const onFinish = (values: any) => {
console.log("Success:", values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const onSetShowTable = ()=>{
isShowTable.value = !isShowTable.value
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const onSetShowTable = () => {
isShowTable.value = !isShowTable.value;
};
const onCreatPay=async(data:Object) =>{
if(query.value.mode === 'zfb'){
await onZfbPay(data)
}
return {
}
defineExpose({
data,
columns,
visible,
......@@ -231,11 +293,12 @@ export default defineComponent({
onFinishFailed,
isShowTable,
onSetShowTable,
appFormState,
formItemLayout,
buttonItemLayout,
};
},
validateInfos,
resetFields,
modelRef,
onSubmit,
query,
onCreatPay
});
</script>
<style lang="less" scoped>
......@@ -263,19 +326,18 @@ export default defineComponent({
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
}
}
</style>
<style scoped>
.title{
.title {
text-align: center;
font-family: SourceHanSansSC;
font-weight: 400;
font-size: 13px;
color: rgba(190,190,190,1);
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
......@@ -12,14 +12,12 @@
</a-form-item>
</a-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw } from "vue";
<script lang="ts" setup>
import { defineExpose, 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: {
......@@ -55,16 +53,15 @@ export default defineComponent({
const reset = () => {
resetFields();
};
return {
defineExpose({
labelCol: { span: 4 },
wrapperCol: { span: 14 },
validateInfos,
reset,
modelRef,
onSubmit,
};
},
});
});
</script>
<style>
.dynamic-delete-button {
......
web-vue-admin/src/views/pay-config/compoents/footer/index.vue
......@@ -9,14 +9,12 @@
</a-form-item>
</a-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw } from "vue";
<script lang="ts" setup>
import { defineExpose, 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: {
......@@ -52,14 +50,13 @@ export default defineComponent({
const reset = () => {
resetFields();
};
return {
defineExpose({
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
<template>
<a-table :columns="columns" :data-source="data" :pagination="false">
<a-table :columns="columns" :data-source="props.list" :pagination="false">
<template #bodyCell="{ text, record, index, column }">
<div v-if="column.key === 'name' && record.key === '1'">
<div v-if="record.name === '1'&& column.key === 'name' ">
<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 v-else-if="record.name === '2'&& column.key === 'name' ">
<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 v-else-if="record.name === '3'&& column.key === 'name' ">
<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 v-else-if="record.name === '4'&& column.key === 'name' ">
<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 v-else-if="record.name === '5'&& column.key === 'name' ">
<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 v-if="record.status=== '0' &&column.key === 'status'">
<span class="ml20" style="color: rgba(12,191,33,1)">良好</span>
</div>
<div v-else-if="record.status=== '1' &&column.key === 'status'">
<span class="ml20" style="color: rgb(250, 116, 116)">预警</span>
</div>
<div v-else-if="column.key === 'tags'">
<a-button type="primary" @click="onOpenInfo(record, index, column)">查看</a-button>
</div>
</template>
</a-table>
</template>
<script lang="ts">
import { defineComponent } from "vue";
<script lang="ts" setup>
import { defineExpose,defineProps } from "vue";
import { useRouter } from "vue-router";
import {
SmileOutlined,
DownOutlined,
AlipaySquareFilled,
WechatFilled,
DollarCircleFilled,
CreditCardFilled,
SkypeFilled,
} from "@ant-design/icons-vue";
const columns = [
{
title: "支付渠道",
......@@ -59,13 +64,13 @@ const columns = [
},
{
title: "绑定账户数",
dataIndex: "age",
key: "age",
dataIndex: "num",
key: "num",
},
{
title: "当前预警",
dataIndex: "address",
key: "address",
dataIndex: "status",
key: "status",
},
{
title: "操作",
......@@ -74,50 +79,26 @@ const columns = [
},
];
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,
const router=useRouter()
const props = defineProps({
list:{
type:Object
}
})
console.log(props.list);
const onOpenInfo = (record:any, index:any, column:any) => {
console.log(record,index,column,"record");
router.push({
path:'/home/paybind',
query:{
isShow:1,
mode:record.mode
}
})
};
defineExpose({
props,
onOpenInfo,
};
},
});
</script>
<style lang="less" scoped>
......
web-vue-admin/src/views/pay-config/index.vue
......@@ -8,9 +8,9 @@
v-if="ShowIcon.HeaderIcon"
@click="onHearder"
></DownOutlined>
<UpOutlined v-else @click="onHearder"></UpOutlined>
<UpOutlined v-else @click="onHearder" ></UpOutlined>
</div>
<ContentHeaders v-if="ShowIcon.HeaderIcon"></ContentHeaders>
<ContentHeaders v-if="ShowIcon.HeaderIcon" :list="list" ></ContentHeaders>
</div>
</a-layout-content>
<a-layout-content class="body-content">
......@@ -41,27 +41,18 @@
</a-layout-footer>
</a-layout>
</template>
<script lang="ts">
interface ShowIcon {
HeaderIcon: Boolean;
BodyIcon: Boolean;
FooterIcon: Boolean;
}
import { defineComponent, reactive } from "vue";
<script lang="ts" setup>
import { defineExpose, reactive,ref} 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() {
interface ShowIcon {
HeaderIcon: Boolean;
BodyIcon: Boolean;
FooterIcon: Boolean;
}
let list = ref<Object>([{name:'1',num:2,status:'0',mode:'zfb'},{name:'2',num:2,status:'1',mode:'wx'},{name:'3',num:2,status:'0',mode:'jd'},{name:'4',num:2,status:'0',mode:'hb'},{name:'5',num:2,status:'0',mode:'yl'}])
const ShowIcon = reactive<ShowIcon>({
HeaderIcon: true,
BodyIcon: true,
......@@ -76,14 +67,20 @@ export default defineComponent({
const onFooter = () => {
ShowIcon.FooterIcon = !ShowIcon.FooterIcon;
};
return {
// onMounted(async()=>{
// const data:any =await payConfigGetSearch(1)
// list.value = data.data.alipay
// return list
// })
defineExpose({
ShowIcon,
list,
onHearder,
onBody,
onFooter,
};
},
});
});
</script>
<style lang="less" scoped>
.header-content {
......@@ -103,4 +100,9 @@ export default defineComponent({
justify-content: space-between;
}
</style>
<style lang="less">
.ant-layout{
overflow-y: hidden;
}
</style>
web-vue-admin/src/views/pay-list/index.vue 0 → 100644
<template>
<div>支付链接</div>
</template>
<script lang="ts" setup>
</script>
<style lang="less" scoped>
</style>
\ 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