付款码

src/api/index.js

@@ -6,6 +6,7 @@ import application from "./application";
 import version from "./version";
 import vip from "./vipType";
 import file from "./file";
+import paymentCode from "./paymentCode";
 
 
 export default {
@@ -15,5 +16,6 @@ export default {
   ...application,
   ...version,
   ...vip,
-  ...file
+  ...file,
+  ...paymentCode
 }

src/api/paymentCode.js

@@ -0,0 +1,30 @@
+import axios from '@/utils/axios'
+
+export default {
+    /**
+     * 获取付费码
+     * @param {*} data 
+     * @returns 
+     */
+    getPaymentCode(data){
+        return axios.post('/permission/api/vipType/queryList',data)
+    },
+
+
+    //新增付费码
+    addPaymentCode(data){
+        return axios.post('/permission/api/paidCode/add', data)
+    },
+
+    //编辑付费码
+    updatePaymentCode(data){
+        return axios.post('/permission/api/paidCode/update', data)
+    },
+
+    //编辑付费码状态
+    updatePaymentCodeStatus(data){
+        return axios.post('/permission/api/paidCode/updateStatus', data)
+    },
+
+
+}

src/icons/iconfont/demo_index.html

@@ -47,7 +47,7 @@
         <li class="dib"><span>Symbol</span></li>
       </ul>
       
-      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4690301" target="_blank" class="nav-more">查看项目</a>
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4733871" target="_blank" class="nav-more">查看项目</a>
       
     </div>
     <div class="tab-container">
@@ -55,33 +55,39 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon iconfont">&#xe655;</span>
-                <div class="name">添加账号</div>
-                <div class="code-name">&amp;#xe655;</div>
+              <span class="icon iconfont">&#xe8ab;</span>
+                <div class="name">退款</div>
+                <div class="code-name">&amp;#xe8ab;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe62d;</span>
-                <div class="name">邮箱</div>
-                <div class="code-name">&amp;#xe62d;</div>
+              <span class="icon iconfont">&#xe668;</span>
+                <div class="name">代码</div>
+                <div class="code-name">&amp;#xe668;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe609;</span>
-                <div class="name">验证码</div>
-                <div class="code-name">&amp;#xe609;</div>
+              <span class="icon iconfont">&#xe6aa;</span>
+                <div class="name">版本</div>
+                <div class="code-name">&amp;#xe6aa;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe62c;</span>
-                <div class="name">密码</div>
-                <div class="code-name">&amp;#xe62c;</div>
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">会员</div>
+                <div class="code-name">&amp;#xe604;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe614;</span>
-                <div class="name">用户名</div>
-                <div class="code-name">&amp;#xe614;</div>
+              <span class="icon iconfont">&#xe780;</span>
+                <div class="name">功能清单</div>
+                <div class="code-name">&amp;#xe780;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">应用管理-2</div>
+                <div class="code-name">&amp;#xe630;</div>
               </li>
           
           </ul>
@@ -102,9 +108,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1730442227258') format('woff2'),
-       url('iconfont.woff?t=1730442227258') format('woff'),
-       url('iconfont.ttf?t=1730442227258') format('truetype');
+  src: url('iconfont.woff2?t=1733738645363') format('woff2'),
+       url('iconfont.woff?t=1733738645363') format('woff'),
+       url('iconfont.ttf?t=1733738645363') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -131,47 +137,56 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon iconfont icon-tianjiazhanghao"></span>
+            <span class="icon iconfont icon-tuikuan"></span>
+            <div class="name">
+              退款
+            </div>
+            <div class="code-name">.icon-tuikuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daima"></span>
             <div class="name">
-              添加账号
+              代码
             </div>
-            <div class="code-name">.icon-tianjiazhanghao
+            <div class="code-name">.icon-daima
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-youxiang"></span>
+            <span class="icon iconfont icon-banben"></span>
             <div class="name">
-              邮箱
+              版本
             </div>
-            <div class="code-name">.icon-youxiang
+            <div class="code-name">.icon-banben
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-yanzhengma"></span>
+            <span class="icon iconfont icon-huiyuan-"></span>
             <div class="name">
-              验证码
+              会员
             </div>
-            <div class="code-name">.icon-yanzhengma
+            <div class="code-name">.icon-huiyuan-
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-mima"></span>
+            <span class="icon iconfont icon-gongnengqingdan"></span>
             <div class="name">
-              密码
+              功能清单
             </div>
-            <div class="code-name">.icon-mima
+            <div class="code-name">.icon-gongnengqingdan
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-yonghuming"></span>
+            <span class="icon iconfont icon-yingyongguanli-2"></span>
             <div class="name">
-              用户名
+              应用管理-2
             </div>
-            <div class="code-name">.icon-yonghuming
+            <div class="code-name">.icon-yingyongguanli-2
             </div>
           </li>
           
@@ -204,42 +219,50 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-tianjiazhanghao"></use>
+                  <use xlink:href="#icon-tuikuan"></use>
+                </svg>
+                <div class="name">退款</div>
+                <div class="code-name">#icon-tuikuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daima"></use>
                 </svg>
-                <div class="name">添加账号</div>
-                <div class="code-name">#icon-tianjiazhanghao</div>
+                <div class="name">代码</div>
+                <div class="code-name">#icon-daima</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-youxiang"></use>
+                  <use xlink:href="#icon-banben"></use>
                 </svg>
-                <div class="name">邮箱</div>
-                <div class="code-name">#icon-youxiang</div>
+                <div class="name">版本</div>
+                <div class="code-name">#icon-banben</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-yanzhengma"></use>
+                  <use xlink:href="#icon-huiyuan-"></use>
                 </svg>
-                <div class="name">验证码</div>
-                <div class="code-name">#icon-yanzhengma</div>
+                <div class="name">会员</div>
+                <div class="code-name">#icon-huiyuan-</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-mima"></use>
+                  <use xlink:href="#icon-gongnengqingdan"></use>
                 </svg>
-                <div class="name">密码</div>
-                <div class="code-name">#icon-mima</div>
+                <div class="name">功能清单</div>
+                <div class="code-name">#icon-gongnengqingdan</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-yonghuming"></use>
+                  <use xlink:href="#icon-yingyongguanli-2"></use>
                 </svg>
-                <div class="name">用户名</div>
-                <div class="code-name">#icon-yonghuming</div>
+                <div class="name">应用管理-2</div>
+                <div class="code-name">#icon-yingyongguanli-2</div>
             </li>
           
           </ul>

src/icons/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 4690301 */
-  src: url('iconfont.woff2?t=1730442227258') format('woff2'),
-       url('iconfont.woff?t=1730442227258') format('woff'),
-       url('iconfont.ttf?t=1730442227258') format('truetype');
+  font-family: "iconfont"; /* Project id 4733871 */
+  src: url('iconfont.woff2?t=1733738645363') format('woff2'),
+       url('iconfont.woff?t=1733738645363') format('woff'),
+       url('iconfont.ttf?t=1733738645363') format('truetype');
 }
 
 .iconfont {
@@ -13,23 +13,27 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-tianjiazhanghao:before {
-  content: "\e655";
+.icon-tuikuan:before {
+  content: "\e8ab";
 }
 
-.icon-youxiang:before {
-  content: "\e62d";
+.icon-daima:before {
+  content: "\e668";
 }
 
-.icon-yanzhengma:before {
-  content: "\e609";
+.icon-banben:before {
+  content: "\e6aa";
 }
 
-.icon-mima:before {
-  content: "\e62c";
+.icon-huiyuan-:before {
+  content: "\e604";
 }
 
-.icon-yonghuming:before {
-  content: "\e614";
+.icon-gongnengqingdan:before {
+  content: "\e780";
+}
+
+.icon-yingyongguanli-2:before {
+  content: "\e630";
 }
 

src/icons/iconfont/iconfont.json

@@ -1,44 +1,51 @@
 {
-  "id": "4690301",
-  "name": "qiaoPen",
+  "id": "4733871",
+  "name": "qiaoBi_back",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
     {
-      "icon_id": "40332010",
-      "name": "添加账号",
-      "font_class": "tianjiazhanghao",
-      "unicode": "e655",
-      "unicode_decimal": 58965
+      "icon_id": "2076345",
+      "name": "退款",
+      "font_class": "tuikuan",
+      "unicode": "e8ab",
+      "unicode_decimal": 59563
     },
     {
-      "icon_id": "1235223",
-      "name": "邮箱",
-      "font_class": "youxiang",
-      "unicode": "e62d",
-      "unicode_decimal": 58925
+      "icon_id": "2471340",
+      "name": "代码",
+      "font_class": "daima",
+      "unicode": "e668",
+      "unicode_decimal": 58984
     },
     {
-      "icon_id": "12704884",
-      "name": "验证码",
-      "font_class": "yanzhengma",
-      "unicode": "e609",
-      "unicode_decimal": 58889
+      "icon_id": "2907151",
+      "name": "版本",
+      "font_class": "banben",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
     },
     {
-      "icon_id": "5532892",
-      "name": "密码",
-      "font_class": "mima",
-      "unicode": "e62c",
-      "unicode_decimal": 58924
+      "icon_id": "4657672",
+      "name": "会员",
+      "font_class": "huiyuan-",
+      "unicode": "e604",
+      "unicode_decimal": 58884
     },
     {
-      "icon_id": "6884425",
-      "name": "用户名",
-      "font_class": "yonghuming",
-      "unicode": "e614",
-      "unicode_decimal": 58900
+      "icon_id": "5451506",
+      "name": "功能清单",
+      "font_class": "gongnengqingdan",
+      "unicode": "e780",
+      "unicode_decimal": 59264
+    },
+    {
+      "icon_id": "42263605",
+      "name": "应用管理-2",
+      "font_class": "yingyongguanli-2",
+      "unicode": "e630",
+      "unicode_decimal": 58928
     }
   ]
 }

src/router/index.js

@@ -172,6 +172,42 @@ export const backStageManageRouterItem = [
   },
   {
     path: '/administrator',
+    name: 'Administrator_paymentCode',
+    component: administrator_layout,
+    redirect: '/administrator/paymentCode',
+    meta: { title: '付费码管理', icon: '付费'},
+    children: [
+      {
+        path: 'paymentCode',
+        name: 'Administrator_paymentCode',
+        component: () => import('@/views/backStageManage/paymentCode/paymentCode/index.vue'),
+        meta: {title: '付费码管理', icon: '付费'},
+      },
+      {
+        path: 'addPaymentCode',
+        name: 'Administrator_addPaymentCode',
+        component: () => import('@/views/backStageManage/paymentCode/paymentCode/addPaymentCode.vue'),
+        meta: {title: '添加付费码',keepAlive:true},
+        hidden:true
+      },
+      {
+        path: 'editPaymentCode',
+        name: 'Administrator_editPaymentCode',
+        component: () => import('@/views/backStageManage/paymentCode/paymentCode/editPaymentCode.vue'),
+        meta: {title: '编辑付费码', keepAlive:true},
+        hidden:true
+      },
+      {
+        path: 'paymentCodeDetail',
+        name: 'Administrator_paymentCodeDetail',
+        component: () => import('@/views/backStageManage/paymentCode/paymentCode/paymentCodeDetail.vue'),
+        meta: {title: '付费码详情'},
+        hidden:true
+      },
+    ]
+  },
+  {
+    path: '/administrator',
     name: 'Administrator_examine',
     component: administrator_layout,
     redirect: '/administrator/examine',

src/views/backStageManage/application/vipType/components/form/vipType.vue

@@ -29,7 +29,7 @@
                     <p>
                         {{model=='detail'?'功能清单':'选择功能'}}
                     </p>
-                    <funTable ref="functionTable" :tableData="tableData" :loading="loading" :reload="reload" :canChoose="model=='detail'?false:true" :defaultChecked="true"></funTable>
+                    <funTable ref="functionTable" :tableData="tableData" :loading="loading" :reload="reload" :expandAll="model=='edit'?true:false" :canChoose="model=='detail'?false:true" :defaultChecked="true"></funTable>
                 </div>
             </div>
         </div>
@@ -45,7 +45,7 @@ const currentForm = {
     applicationCode:'4e95e3d926a2a4befa5d913acc0aa9f5',
     applyId:14,
     remark:null,
-    enable:true,
+    enable:1,
     functionIds:[]
 }
 export default {

src/views/backStageManage/application/vipType/vipType.vue

@@ -4,7 +4,7 @@
       <el-header>
         <div class="header">
           <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
-            <el-form-item label="会员类型名称" prop="tenantVipName">
+            <el-form-item label="会员类型名称" prop="vipTypeName">
               <el-input
                 v-model="queryParams.vipTypeName"
                 placeholder="请输入会员类型名称"
@@ -165,7 +165,7 @@ export default {
     },
     handleDetail(row) {
       this.$router.push({ 
-        path: '/administrator/editVipType', 
+        path: '/administrator/vipTypeDetail', 
         query: {
             id: row.id
         }

src/views/backStageManage/application/vision/components/form/versionForm.vue

@@ -43,7 +43,7 @@
                         {{model=='detail'?'功能清单':'选择功能'}}
                         <el-button v-if="model != 'detail'" type="primary" size="small" @click="addFunction(1,form)">添加功能</el-button>
                     </p>
-                    <funTable ref="functionTable" :tableData="tableData" :loading="loading" :reload="reload" :canChoose="model=='detail'?false:true" :defaultChecked="true">
+                    <funTable ref="functionTable" :tableData="tableData" :loading="loading" :reload="reload" :expandAll="model=='edit'?true:false" :canChoose="model=='detail'?false:true" :defaultChecked="true">
                         <template slot="column">
                             <el-table-column label="授权代码" align="center">
                                 <template slot-scope="scope" v-if="!scope.row.children || scope.row.children == 0">

src/views/backStageManage/paymentCode/paymentCode/addPaymentCode.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <paymentCodeForm model="add"></paymentCodeForm>
+    </div>
+</template>
+
+<script>
+import paymentCodeForm from './components/form/paymentCode.vue';
+export default {
+    components: {
+        paymentCodeForm
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {},
+    created() {},
+    mounted() {},
+    methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/paymentCode/paymentCode/components/form/paymentCode.vue

@@ -0,0 +1,292 @@
+<template>
+    <div>
+        <div class="button-container" v-if="model != 'detail'">
+                <el-button type="primary" size="small" :loading="btnLoading" @click="submitForm">提 交</el-button>
+                <el-button size="small"  @click="init">重 置</el-button>
+        </div>
+        <div class="form_center" >
+            <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px" :class="model == 'detail'?'pointer_events_none':''">
+                <p class="form_item_title">企业信息：</p>
+                <el-row :gutter="24">
+                    <el-col :span="12">
+						<el-form-item label="名称：" prop="tenantName">
+							<el-input
+								v-model="form.tenantName"
+								placeholder="请输入企业名称"
+							></el-input>
+						</el-form-item>
+					</el-col>
+                    <el-col :span="12">
+						<el-form-item label="类型：" prop="tenantType">
+							<el-input
+								v-model="form.tenantType"
+								placeholder="请输入企业类型"
+							></el-input>
+						</el-form-item>
+					</el-col>
+                    <el-col :span="24">
+						<el-form-item label="地址：" prop="tenantAddress">
+							<el-input
+								v-model="form.tenantAddress"
+								placeholder="请输入企业地址"
+							></el-input>
+						</el-form-item>
+					</el-col>
+                </el-row>
+                <p class="form_item_title">人员信息：</p>
+                <el-row :gutter="24">
+                    <el-col :span="12">
+						<el-form-item label="姓名：" prop="personnelName">
+							<el-input
+								v-model="form.personnelName"
+								placeholder="请输入姓名"
+							></el-input>
+						</el-form-item>
+					</el-col>
+                    <el-col :span="12">
+						<el-form-item label="邮箱：" prop="personnelEmail">
+							<el-input
+								v-model="form.personnelEmail"
+								placeholder="请输入邮箱"
+							></el-input>
+						</el-form-item>
+					</el-col>
+                    <el-col :span="24">
+						<el-form-item label="手机号：" prop="personnelPhone">
+							<el-input
+								v-model="form.personnelPhone"
+								placeholder="请输入手机号"
+                                maxlength="11"
+							></el-input>
+						</el-form-item>
+					</el-col>
+                </el-row>
+                <p class="form_item_title">付费信息：</p>
+                <el-form-item label="付费码：" prop="code" v-if="form.code">
+                    <el-input v-model="form.code" placeholder="请输入付费码" disabled />
+                </el-form-item>
+                <div style="border:1px solid white;padding:10px;margin:10px 0;border-radius:8px;height:300px">
+                    <vipTypeTable :tableData="tableData"></vipTypeTable>
+                </div>
+                <el-form-item label="备注：" prop="remark">
+                    <el-input v-model="form.remark" placeholder="请输入备注" maxlength="50" />
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+const currentForm = {
+    id:null,
+    applicationCode:'4e95e3d926a2a4befa5d913acc0aa9f5',
+    applyId:14,
+    remark:null,
+    vipTypes:[],
+    tenantName:null,
+    tenantType:0,
+    tenantAddress:null,
+    personnelName:null,
+    personnelPhone:null,
+    personnelEmail:null,
+    personnelUserName:null,
+    personnelPassword:null,
+    remark:null
+}
+import vipTypeTable from '../table/vipType.vue'
+export default {
+    components: {
+        vipTypeTable
+    },
+    mixins:[],
+    props: {
+        id:"",
+        model:{
+            type:String,
+            default:"add"
+        },
+    },
+    data() {
+        return {
+            btnLoading: false,
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                personnelPhone: [
+                    { required: true, message: "请输入手机号码", trigger: "blur" },
+                    {
+                        pattern:
+                        /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
+                        message: "请输入正确的手机号码",
+                        trigger: "blur",
+                    },
+                ],
+                personnelEmail: [
+						{ required: false, message: "请输入邮箱", trigger: "blur" },
+						{
+							pattern:
+								/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
+							message: "请输入正确的邮箱格式",
+							trigger: "blur",
+						},
+					],
+            },
+            tableData:[]
+        };
+    },
+    watch: {
+        id(){
+            if(this.$route.path != '/administrator/editPaymentCode'){
+                return
+            }
+            this.init()
+        },
+    },
+    computed: {},
+    created() {},
+    mounted() {
+       this.init()
+    },
+    methods: {
+        //初始化当前页面
+        async init(){
+            if(this.model == 'add'){
+                this.resetForm()
+            }else if(this.model == 'edit' || this.model == 'detail'){
+                await this.getById()
+            }
+            if(this.model == 'detail'){
+                this.tableData = this.form.vipTypes || []
+            }else{
+                this.getVipType()
+            }
+        },
+        //查询数据并校验
+        getById(){
+            if(!this.id){
+                this.$message.error('编辑缺少参数')
+                return
+            }
+            var params = {
+                ids: [this.id],
+            };
+            this.$api.getPaymentCode(params).then(response=>{
+                if(response.code == 200){
+                    var data = response.data.records
+                    if(data && data.length>0){
+                        this.form = data[0]
+                    }
+                }
+            }).catch(error=>{
+                this.resetForm()
+            })
+        },
+        //重置表单
+        resetForm(){
+            this.form = Object.assign({}, currentForm)
+            this.$refs['form'].resetFields();
+        },
+        /** 提交按钮 */
+        submitForm: function() {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    this.form.vipTypes = this.tableData.map(item=>{
+                        return {
+                            vipTypeId:item.id,
+                            vipTypeNum:item.vipTypeNum,
+                            vipTypeName:item.vipTypeName
+                        }
+                    })
+                    this.btnLoading = true
+                    var a = '添加'
+                    var api = 'addPaymentCode'
+                    if(this.model == "edit"){
+                        a = '编辑'
+                        api = 'updatePaymentCode'
+                    }
+                    this.$api[api](this.form).then(response => {
+                        if (response.code === 200) {
+                            this.btnLoading = false
+                            this.$message.success( a + '成功');
+                            this.finish()
+                        }
+                    })
+                    .catch(error => {
+                        this.$message.error(a + '失败')
+                        this.btnLoading = false
+                    });
+                }
+            });
+        },
+        finish(){
+            if(this.model == 'add'){
+                this.resetForm();
+                this.init()
+            }else{
+                this.$store.commit('removeHistoryPath',this.$route.path);
+                this.$store.commit('removeHistory',this.$route.path);
+                this.$router.push(
+                    {
+                        path:'/administrator/paymentCode'
+                    }
+                )
+            }
+        },
+        //获取会员类型
+        getVipType(){
+            var params = {}
+            this.$api.getVipList(params).then(response=>{
+                if(response.code == 200){
+                    var data = response.data.records
+                    if(!data || data.length == 0){
+                        this.tableData = []
+                        return
+                    }
+                    if(this.model == 'add'){
+                        this.tableData = data
+                        return
+                    }
+                    var vipTypes = this.form.vipTypes
+                    if(!vipTypes || vipTypes.length == 0){
+                        this.tableData = data
+                        return
+                    }
+                    for(var i = 0;i<data.length;i++){
+                        var item = data[i]
+                        var obj = vipTypes.find(vip=>{
+                            return vip.vipTypeId == item.id
+                        })
+                        if(obj){
+                            this.$set(item,'vipTypeNum',obj.vipTypeNum || 0)
+                        }
+                    }
+                    this.tableData = data
+                }
+            })
+        },
+    },
+};
+</script>
+<style lang="scss">
+.form_center {
+    width: 800px;
+    margin: 30px auto;
+}
+
+.button-container {
+    max-width: 1200px;
+    display: flex;
+    justify-content:flex-end;
+    margin: 10px auto;
+    position:sticky;
+    top:10px,
+}
+.form_item_title{
+    color: black;
+    font-weight: bold;
+    font-size: 14px;
+    padding: 5px 0;
+    border-bottom: 1px solid white;
+}
+</style>

src/views/backStageManage/paymentCode/paymentCode/components/mixins/commonData.js

@@ -0,0 +1,12 @@
+export default{
+    data() {
+        return {
+            status:{
+                0:"未使用",
+                1:"锁定",
+                2:"已使用",
+                3:"已退款"
+            },
+        }
+    },
+}

src/views/backStageManage/paymentCode/paymentCode/components/paymentCode.vue

@@ -0,0 +1,230 @@
+<template>
+    <div class="height_100">
+      <el-container>
+        <el-header>
+          <div class="header">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+              <el-form-item label="付费码状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择">
+                    <el-option v-for="(item, key) in status" :key="key" :label="item" :value="key"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+            
+            <el-row :gutter="10">
+              <el-col :span="1.5">
+                <el-button icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </el-header>
+        <el-main class="padding_10">
+          <el-table 
+            :data="tableData"
+            border
+            row-key="id"
+            style="width: 100%"
+            max-height="calc(100% - 40px)"
+            v-loading="loading"
+        >
+            <el-table-column type="index" label="序号" align="center" width="120px">
+              <template slot-scope="scope">
+                  <div>
+                      {{(scope.$index + 1) + ((queryParams.current - 1) * queryParams.size)}}
+                  </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="code" label="付费码">
+              <template slot-scope="scope">
+                  <div>
+                    <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.code }}</el-link>
+                  </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="vipTypes" label="购买会员信息">
+              <template slot-scope="scope">
+                <div v-if="scope.row.vipTypes && scope.row.vipTypes.length">
+                    <div v-for="item in scope.row.vipTypes" :key="item.vipTypeId">
+                        {{ item.vipTypeName }} : {{ item.vipTypeNum }}
+                    </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="tenantMessage" label="企业信息">
+              <template slot-scope="scope">
+                <div>
+                  <div v-if="scope.row.tenantName">企业名称：{{ scope.row.tenantName }}</div>
+                  <div v-if="scope.row.tenantType">企业类型：{{ scope.row.tenantType }}</div>
+                  <div v-if="scope.row.tenantAddress">企业地址: {{ scope.row.tenantAddress }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="userMessage" label="用户信息">
+              <template slot-scope="scope">
+                <div>
+                  <div v-if="scope.row.personnelName">姓名：{{ scope.row.personnelName }}</div>
+                  <div v-if="scope.row.personnelPhone">电话：{{ scope.row.personnelPhone }}</div>
+                  <div v-if="scope.row.personnelEmail">邮箱: {{ scope.row.personnelEmail }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="状态">
+                <template slot-scope="scope">
+                    <div>
+                        {{status[scope.row.status]}}
+                    </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createName" label="创建人"></el-table-column>
+            <el-table-column prop="createTime" label="创建时间"></el-table-column>
+            <el-table-column prop="remark" label="备注"></el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleEdit(scope.row)"
+                >修改</el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="iconfont icon-tuikuan"
+                  @click="refund(scope.row)"
+                >退款</el-button>
+              </template>
+            </el-table-column>
+        </el-table>
+        </el-main>
+        <el-footer class="pagination">
+          <el-pagination background layout="total, sizes, prev, pager, next, jumper"
+            :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
+            @current-change="handleCurrentChange" @size-change="changeSize" :total="total">
+          </el-pagination>
+        </el-footer>
+      </el-container>
+    </div>
+</template>
+  
+<script>
+  const searchForm = {
+    status:null
+  }
+  import commonData from './mixins/commonData';
+  export default {
+    components: {},
+    props: {},
+    mixins:[commonData],
+    data() {
+      return {
+        // 遮罩层
+        loading: false,
+        tableData: [],
+        // 查询参数
+        queryParams: {
+          current: 1,
+          size: 10,
+          ...searchForm
+        },
+        total:0,
+        checkList:[],
+      };
+    },
+    watch: {},
+    computed: {},
+    created() {},
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      /** 查询vip类型列表 */
+      getList() {
+        this.loading = true;
+        this.$api.getPaymentCode(this.queryParams).then(response=>{
+          if(response.code == 200){
+              this.tableData = response.data.records
+              this.total = response.data.total || 0
+              this.loading = false
+          }
+        }).catch(error=>{
+            this.tableData = []
+            this.total = 0
+            this.loading = false
+        })
+      },
+      //切换分页
+      handleCurrentChange(value){
+        this.queryParams.current = value
+        this.getList()
+      },
+      //切换页大小
+      changeSize(value){
+        this.queryParams.size = value
+        this.queryParams.current = 1
+        this.getList()
+      },
+      /** 新增按钮操作 */
+      handleAdd(row) {
+        this.$router.push('/administrator/addPaymentCode');
+      },
+      handleEdit(row) {
+        this.$router.push({ 
+          path: '/administrator/editPaymentCode', 
+          query: {
+              id: row.id
+          }
+        });
+      },
+      handleDetail(row) {
+        this.$router.push({ 
+          path: '/administrator/paymentCodeDetail', 
+          query: {
+              id: row.id
+          }
+        });
+      },
+      //退款
+      refund(row){
+        var params = {
+            id:row.id,
+            status:3
+        }
+        this.$api.updatePaymentCodeStatus(params).then(response=>{
+            if(response.code == 200){
+                this.$message.success('状态修改成功')
+                this.$set(row,'status',3)
+            }
+        })
+      },
+      /** 搜索按钮操作 */
+      search() {
+        this.queryParams.current = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        for(let key in searchForm){
+          this.$set(this.queryParams,key,'')
+        }
+        this.search();
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  .header{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .foot{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+  }
+  </style>

src/views/backStageManage/paymentCode/paymentCode/components/table/vipType.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="height_100">
+    <el-table border :data="tableData" style="width: 100%" height="calc(100% - 30px)">
+        <el-table-column v-if="canChoose" type="index" align="center" width="50px">
+            <template slot-scope="scope">
+                <div>{{ scope.$index +1 }}</div>
+            </template>
+        </el-table-column>
+        <el-table-column prop="vipTypeName" label="会员类型名称" align="center" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="vipTypeNum" label="会员类型数量" align="center">
+            <el-input-number v-model="scope.row.vipTypeNum" controls-position="right" :min="0"></el-input-number>
+        </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    tableData:{
+        type:Array,
+        default:()=>{
+            return []
+        }
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/paymentCode/paymentCode/editPaymentCode.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <paymentCodeForm :id="id" model="edit"></paymentCodeForm>
+    </div>
+</template>
+
+<script>
+import paymentCodeForm from './components/form/paymentCode.vue';
+export default {
+    components: {
+        paymentCodeForm
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {
+        id() {
+            if(this.$route.path == '/administrator/editVersion'){
+                return this.$route.query.id;
+            }
+            
+        },
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/backStageManage/paymentCode/paymentCode/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="height_100">
+    <paymentCode></paymentCode>
+  </div>
+</template>
+
+<script>
+import paymentCode from './components/paymentCode.vue';
+export default {
+  components: {
+    paymentCode
+  },
+  props: {},
+  data() {
+    return {
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/paymentCode/paymentCode/paymentCodeDetail.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <paymentCodeForm :id="id" model="detail"></paymentCodeForm>
+    </div>
+</template>
+
+<script>
+import paymentCodeForm from './components/form/paymentCode.vue';
+export default {
+    components: {
+        paymentCodeForm
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {
+        id() {
+            return this.$route.query.id;
+        },
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+};
+</script>
+<style lang="scss" scoped>
+
+</style>