updatye

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

+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

+<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

+<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

+<template>
+<div>支付链接</div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file