From 19990ea7a0b79ed7449d2f277b0f1c256bb24dbb Mon Sep 17 00:00:00 2001
From: xvv <cccccc420590@163.com>
Date: Wed, 17 Jul 2024 16:08:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fuintAdmin_zt/src/views/Service/details.vue   |  26 +-
 .../src/views/components/Service/allOrder.vue |  60 ++---
 .../src/views/components/Service/index.vue    | 100 ++------
 .../src/views/components/Service/staff.vue    | 205 ++++++++-------
 .../src/views/components/Service/way.vue      | 234 ++++++++++++++++++
 5 files changed, 398 insertions(+), 227 deletions(-)
 create mode 100644 fuintAdmin_zt/src/views/components/Service/way.vue

diff --git a/fuintAdmin_zt/src/views/Service/details.vue b/fuintAdmin_zt/src/views/Service/details.vue
index af76131c6..580715b11 100644
--- a/fuintAdmin_zt/src/views/Service/details.vue
+++ b/fuintAdmin_zt/src/views/Service/details.vue
@@ -1,11 +1,18 @@
 <template>
   <div class="ap-container">
+    <div class="h-box">
+
+
   <div class="top_">
     <div class="tab-box" :class="tabindex == index ? 'active' : ''" v-for="(item,index) in tabList" :key="index" @click="gettab(index)" >
       {{item.title}}
     </div>
   </div>
+                 <jcindex :id="id" v-if="tabindex == 0"></jcindex>
                  <payment  :id="id" v-if="tabindex == 1" ></payment>
+                  <way :id="id" v-if="tabindex == 2"  ></way>
+                  <staff :id="id" v-if="tabindex == 3" ></staff>
+                    <allOrder :id="id" v-if="tabindex == 4"></allOrder>
 <!--    <el-card >-->
 <!--      <div class="top-box">-->
 <!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
@@ -25,7 +32,7 @@
 <!--        </el-tabs>-->
 <!--      </div>-->
 <!--    </el-card >-->
-
+    </div>
     </div>
 
 </template>
@@ -36,6 +43,7 @@
   import staff from '../components/Service/staff'
   import allOrder from '../components/Service/allOrder'
   import jcindex from '../components/Service/index'
+  import way from '../components/Service/way'
   export default {
     name: 'details',
     data() {
@@ -54,6 +62,11 @@
             title:'支付配置',
             component:payment
           },
+          {
+            name:'way',
+            title:'支付方式',
+            component:way
+          },
           {
             name:'staff',
             title:'员工管理',
@@ -71,7 +84,7 @@
 
     // peizhi
     components:{
-      jcindex,staff,payment,allOrder
+      jcindex,staff,payment,allOrder,way
     },
     created() {
       this.id = this.$route.query.id
@@ -95,9 +108,10 @@
 
 <style scoped>
   .ap-container{
-      height: 100vh;
+    height: 100vh;
+
       background: #f9f9f9;
-    box-sizing: border-box;
+      box-sizing: border-box;
 
   }
   .top-box{
@@ -129,5 +143,9 @@
     margin: 0px 25px;
     cursor: pointer;
   }
+  .h-box{
+    height: 100%;
+    background: #f9f9f9;
 
+  }
 </style>
diff --git a/fuintAdmin_zt/src/views/components/Service/allOrder.vue b/fuintAdmin_zt/src/views/components/Service/allOrder.vue
index be1920da0..3378f1f25 100644
--- a/fuintAdmin_zt/src/views/components/Service/allOrder.vue
+++ b/fuintAdmin_zt/src/views/components/Service/allOrder.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="app-container">
-    <el-card >
+
+    <div class="bai-box" style="margin-top: 20px" >
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 
-        <el-form-item label="订单类型" prop="type">
+        <el-form-item label="" prop="type">
           <el-select
             v-model="queryParams.type"
             placeholder="请选择订单类型"
@@ -18,9 +19,9 @@
             </el-option>
           </el-select>
 
-        
+
         </el-form-item>
-        <el-form-item label="订单号" prop="orderNo">
+        <el-form-item label="" prop="orderNo">
           <el-input
             v-model="queryParams.orderNo"
             placeholder="请输入订单号"
@@ -29,7 +30,7 @@
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item label="支付渠道" prop="payChannel">
+        <el-form-item label="" prop="payChannel">
           <el-select
             v-model="queryParams.payChannel"
             placeholder="请选择支付渠道"
@@ -45,14 +46,14 @@
           </el-select>
 
         </el-form-item>
-        <el-form-item label="付款方式" prop="payType">
+        <el-form-item label="" prop="payType">
           <el-select
             v-model="queryParams.payType"
             placeholder="状态"
             clearable
             style="width: 240px"
           >
-          <el-option
+            <el-option
               v-for="dict in dict.type.payment_type"
               :key="dict.value"
               :label="dict.label"
@@ -62,7 +63,7 @@
         </el-form-item>
 
 
-        <el-form-item label="支付时间">
+        <el-form-item label="">
           <el-date-picker
             v-model="dateRange"
             style="width: 240px"
@@ -77,25 +78,11 @@
 
         <el-form-item>
           <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
-                   <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
+          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
 
         </el-form-item>
       </el-form>
-    </el-card>
-
-    <el-card style="margin-top: 20px" >
-      <!-- <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            type="primary"
-            icon="el-icon-plus"
-            @click="handleAdd"
-          >新增员工</el-button>
-        </el-col>
-
-      </el-row> -->
-
-      <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+      <el-table ref="tables" border v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
         <el-table-column label="订单号" align="center" prop="orderNo" />
         <el-table-column label="订单类型" align="center" prop="type" width="100">
           <template slot-scope="scope">
@@ -116,9 +103,9 @@
             <dict-tag :options="dict.type.payment_type" :value="scope.row.payType"/>
           </template>
 
-        </el-table-column> 
-      
-      
+        </el-table-column>
+
+
         <el-table-column label="创建时间" align="center" prop="createTime" width="150">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -147,7 +134,7 @@
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
-    </el-card>
+    </div>
   </div>
 </template>
 
@@ -178,7 +165,7 @@
         categoryOptions: [],
         storeOptions: [],
         posPrem:'',
-      
+
         props: { multiple: true },
         appletPrem:'',
 
@@ -212,7 +199,7 @@
           page: 1,
           pageSize: 10,
         },
-        
+
         typeList:[
           { value: '1',label: '油品'},
           { value: '2',label: '商品'},
@@ -292,7 +279,7 @@
       toTarget(url) {
         this.$router.push( { path: url } );
       },
-     
+
       // 查询角色列表
       getDuty(){
         listDuty().then(response => {
@@ -322,7 +309,7 @@
         this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
         this.handleQuery();
       },
-    
+
       // 多选框选中数据
       handleSelectionChange(selection) {
         this.ids = selection.map(item => item.operId)
@@ -358,7 +345,7 @@
         this.open = false;
         this.reset();
       },
-  
+
     }
   };
 </script>
@@ -368,7 +355,7 @@
     width: 100%;
     height: 100%;
     /* height: 100vh; */
-    background: white;
+    background: #f9f9f9;
   }
   .pagin-box{
     background: white;
@@ -381,4 +368,9 @@
     padding: 20px;
     margin-bottom: 20px;
   }
+  .bai-box{
+    background: #fff;
+    box-sizing: border-box;
+    padding: 20px;
+  }
 </style>
diff --git a/fuintAdmin_zt/src/views/components/Service/index.vue b/fuintAdmin_zt/src/views/components/Service/index.vue
index 70bc25bed..dbd097aa0 100644
--- a/fuintAdmin_zt/src/views/components/Service/index.vue
+++ b/fuintAdmin_zt/src/views/components/Service/index.vue
@@ -1,15 +1,12 @@
 <template>
 
-      <div style="width: 100%;height: 72vh;position: relative ">
+      <div style="width: 100%;height: 100%;position: relative;background: #f9f9f9; ">
+        <div class="box-h">
         <div class="dis-box" style="align-items: center; margin-bottom: 15px">
           <div class="gang"></div>
           <div class="title">基本设置</div>
         </div>
         <div class="dis-box">
-<!--          <div class="img-box">-->
-<!--            <img src="../../assets/images/wl.png" style="width: 96px; height: 96px">-->
-<!--        -->
-<!--          </div>-->
           <div class="block">
             <el-avatar v-if="fullImagePath" shape="square" :size="96" :key="fullImagePath" :src="fullImagePath"></el-avatar>
             <el-avatar v-else shape="square" :size="96"  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-avatar>
@@ -47,10 +44,10 @@
                 <div>油站创建时间：</div>
                 <div>{{ parseTime(seeFrom.createTime) }}</div>
               </div>
-              <div class="threebox">
-                <div>套餐到期时间：</div>
-                <div>{{ from.expirationTime?parseTime(seeFrom.expirationTime):"--"  }}</div>
-              </div>
+<!--              <div class="threebox">-->
+<!--                <div>套餐到期时间：</div>-->
+<!--                <div>{{ from.expirationTime?parseTime(seeFrom.expirationTime):"&#45;&#45;"  }}</div>-->
+<!--              </div>-->
               <div class="threebox">
                 <div>地址：</div>
                 <div>{{ seeFrom.address }}</div>
@@ -58,11 +55,7 @@
             </div>
           </div>
         </div>
-
-
-        <!-- <div class="bottom-box2"> -->
         <div class="bottom-box2">
-
           <div style="height: 200px; width: 300px;">
             <span class="demonstration" >营业执照</span>
             <br/>
@@ -71,7 +64,6 @@
             <el-image v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" ></el-image>
 
           </div>
-
           <div style="height: 200px; width: 300px; margin-left: 100px;">
             <span class="demonstration">门头照</span>
             <br/>
@@ -81,17 +73,8 @@
 
           </div>
         </div>
-        <!-- <div class="bottom-box">
-          <div class="bott-box"><el-tag type="info">返回</el-tag></div>
-          <div class="bott-box"><el-tag>保存</el-tag></div>
-          <div class="bott-box"><el-tag type="danger">删除油站</el-tag></div>
-        </div> -->
-
         <el-dialog title="编辑油站" class="d-dialog"  :visible.sync="editDialog" width="900px" style="padding-right: 10px;">
           <el-form :model="from" ref="form" :rules="rules">
-
-
-
             <el-row>
                 <el-col :span="10">
                   <el-form-item label="油站名称" prop="name" :label-width="formLabelWidth">
@@ -125,8 +108,6 @@
 
                 </el-col>
             </el-row>
-
-
             <el-row>
                 <el-col :span="10">
                   <el-form-item label="联系电话" prop="phone" :label-width="formLabelWidth">
@@ -134,28 +115,13 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="10">
-<!--                  <el-form-item label="套餐到期时间" :label-width="formLabelWidth">-->
-<!--                  <el-date-picker-->
-<!--                    disabled-->
-<!--                    v-model="from.expirationTime"-->
-<!--                    type="date"-->
-<!--                    style="width:220px"-->
-<!--                    placeholder="选择日期">-->
-<!--                  </el-date-picker>-->
-<!--                </el-form-item>-->
-
                 </el-col>
             </el-row>
-
-
-
-
             <el-row>
               <el-col :span="10">
                 <el-form-item label="店铺地址" prop="address" :label-width="formLabelWidth">
                   <el-input
                   style="width:220px"
-
                     type="textarea"
                     :rows="2"
                     placeholder="请输入地址"
@@ -179,12 +145,6 @@
                 </el-form-item>
               </el-col>
             </el-row>
-
-
-
-
-
-
             <el-row>
               <el-col  :span="6">
                 <el-form-item label="上传营业执照" prop="name" :label-width="formLabelWidth">
@@ -232,22 +192,13 @@
               </el-col>
 
             </el-row>
-
-
-
-
-
-
-
-
           </el-form>
           <div slot="footer" class="dialog-footer">
             <el-button @click="editDialog = false">取 消</el-button>
             <el-button type="primary" @click=" edit">确 定</el-button>
           </div>
         </el-dialog>
-
-  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
     <el-form :model="form">
       <el-form-item label="活动名称" :label-width="formLabelWidth">
         <el-input v-model="form.name" autocomplete="off"></el-input>
@@ -265,6 +216,7 @@
     </div>
   </el-dialog>
       </div>
+      </div>
 </template>
 
 <script>
@@ -579,22 +531,18 @@
     font-size: 14px;
     margin-bottom: 20px;
   }
-
-
   .bottom-box2{
-    /* width: 1400px; */
-    /* position: absolute;
-    bottom: 0px; */
-    /* margin-top: 30px; */
-    /* margin-bottom: 30px; */
-    /* height: 350px; */
     background: rgb(255, 255, 255);
-    /* background-color: #006cff; */
     display: flex;
-    /* align-items: center; */
     justify-content: left;
   }
-
+  .box-h{
+    background: rgb(255, 255, 255);
+    width: 98%;
+    margin: 10px auto;
+    box-sizing: border-box;
+    padding: 20px;
+  }
   .bottom-box{
     width: 1600px;
     position: absolute;
@@ -613,21 +561,16 @@
   .block{
     margin-right: 20px;
   }
-
-
   /* 上传头像 */
   .list-img{
   width: 98px;
   height: 98px;
   }
-
-
 .d-dialog >>> .el-upload--picture-card {
   width: 100px;
   height: 100px;
   line-height: 100px;
 }
-
 .d-dialog >>> .avatar-uploader .el-upload {
   width: 100px;
   height: 100px;
@@ -641,19 +584,6 @@
   height: 50px;
   line-height: 60px;
 }
-.hide {
-    /deep/.el-upload--picture-card {
-      display: none !important;
-
-    }
 
 
-  }
-
-  /* //去掉过渡动画，不然删除操作的时候，布局会闪一下。 */
-
-/* /deep/ .el-upload-list__item {
-  transition: none !important
-
-}     */
 </style>
diff --git a/fuintAdmin_zt/src/views/components/Service/staff.vue b/fuintAdmin_zt/src/views/components/Service/staff.vue
index 8f6d3043b..c5ce29c78 100644
--- a/fuintAdmin_zt/src/views/components/Service/staff.vue
+++ b/fuintAdmin_zt/src/views/components/Service/staff.vue
@@ -1,80 +1,61 @@
 <template>
-  <div class="app-container">
-    <el-card >
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+  <div class="app-containers">
+    <div class="bai-box"  style="margin-top: 20px" >
+     <div class="top-box">
+       <div class="d-s">
+         <el-input v-model="input" placeholder="请输入内容" style="width: 240px;margin-right: 15px"></el-input>
+         <el-select v-model="value" placeholder="请选择状态">
+           <el-option
+             v-for="item in options"
+             :key="item.value"
+             :label="item.label"
+             :value="item.value">
+           </el-option>
+         </el-select>
+       </div>
+       <div>
+         <el-button
+           type="primary"
+           icon="el-icon-search"
 
-        <el-form-item label="姓名" prop="name">
-          <el-input
-            v-model="queryParams.realName"
-            placeholder="请输入姓名"
-            clearable
-            style="width: 240px;"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="手机号" prop="mobile">
-          <el-input
-            v-model="queryParams.mobile"
-            placeholder="请输入手机号"
-            clearable
-            style="width: 240px;"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="auditedStatus">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="状态"
-            clearable
-            style="width: 240px"
-          >
-            <el-option
-              v-for="dict in dict.type.zhzt"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
-          <!--          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>-->
+         >搜索</el-button>
+         <el-button
+           icon="el-icon-refresh-right"
+         >重置</el-button>
+         <el-button
+           type="primary"
+           icon="el-icon-plus"
+           @click="handleAdd"
+         >新增员工</el-button>
 
-        </el-form-item>
-      </el-form>
-    </el-card>
+       </div>
 
-    <el-card style="margin-top: 20px" >
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            type="primary"
-            icon="el-icon-plus"
-            @click="handleAdd"
-          >新增员工</el-button>
-        </el-col>
+     </div>
 
-      </el-row>
-
-      <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-        <el-table-column label="ID" align="center" prop="id" width="80" />
-        <el-table-column label="姓名" align="center" prop="realName" />
-        <el-table-column label="员工角色" align="center" prop="dutyName" >
+      <el-table ref="tables" border v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+        <el-table-column
+          type="index"
+          align="center"
+          label="序号"
+          width="50">
+        </el-table-column>
+        <el-table-column label="用户姓名" width="140" align="center" prop="realName" />
+        <el-table-column label="用户角色"  width="140" align="center" prop="dutyName" >
           <template slot-scope="scope">
             <span>{{scope.row.dutyName || "--"}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="手机号" align="center" prop="mobile" />
-        <el-table-column label="员工状态" align="center" prop="status">
+        <el-table-column label="登录账号" align="center" prop="mobile" />
+        <el-table-column label="员工状态" align="center" width="80" prop="status">
           <template slot-scope="scope">
-            <dict-tag :options="dict.type.zhzt" :value="scope.row.status"/>
+            <el-switch
+              v-model="scope.row.value"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+            </el-switch>
           </template>
         </el-table-column>
-<!--        <el-table-column label="公众号" align="center" prop="official">-->
-<!--          <template slot-scope="scope">-->
-<!--            <dict-tag :options="dict.type.official" :value="scope.row.official"/>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
+
         <el-table-column label="一键加油" align="center" prop="isRefuel">
           <template slot-scope="scope">
             <dict-tag :options="dict.type.display" :value="scope.row.isRefuel"/>
@@ -85,16 +66,12 @@
             <dict-tag :options="dict.type.notice" :value="scope.row.notice"/>
           </template>
         </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="createTime" width="150">
+        <el-table-column label="创建时间" align="center" prop="createTime" >
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
-<!--        <el-table-column label="更新时间" align="center" prop="updateTime" width="150">-->
-<!--          <template slot-scope="scope">-->
-<!--            <span>{{ parseTime(scope.row.updateTime) }}</span>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
+
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button
@@ -120,25 +97,21 @@
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
-    </el-card>
+    </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-row>
-          <el-col :span="8">
+
             <el-form-item label="姓名" prop="realName">
               <el-input v-model="form.realName" placeholder="请输入姓名" maxlength="30" style="width: 270px"/>
             </el-form-item>
-          </el-col>
-          <el-col :span="8">
+
             <el-form-item label="手机号" prop="mobile">
               <el-input v-model="form.mobile" placeholder="请输入联系人电话" maxlength="30" style="width: 270px"/>
             </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
+
+
             <el-form-item label="角色组" prop="roleId">
               <el-select v-model="form.roleId" placeholder="请选择角色" style="width: 270px">
                 <el-option
@@ -149,14 +122,7 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-          </el-col>
-<!--          <el-col :span="8">-->
-<!--            <el-form-item label="登录密码" prop="password">-->
-<!--              <el-input v-model="form.password" placeholder="请输入登录密码" maxlength="30"/>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
 
-          <el-col :span="8">
             <el-form-item label="账号状态" prop="status">
               <el-select v-model="form.status"style="width: 270px">
                 <el-option
@@ -175,10 +141,8 @@
                 <span>状态禁用后,当前账号则无法进行登...</span>
               </el-tooltip>
             </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
+
+
             <el-form-item label="一键加油" prop="isRefuel">
               <el-select v-model="form.isRefuel" style="width: 270px">
                 <el-option
@@ -197,8 +161,7 @@
                 <span>加油时选择加油员场景使用,选择...</span>
               </el-tooltip>
             </el-form-item>
-          </el-col>
-          <el-col :span="8">
+
             <el-form-item label="收款通知" prop="notice">
               <el-select v-model="form.notice" style="width: 270px">
                 <el-option
@@ -217,18 +180,17 @@
                 <span>收款成功接收的公众号模板消息...</span>
               </el-tooltip>
             </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
+
+
 
 <!--        </el-row>-->
 <!--        <el-row>-->
-          <el-col :span="17">
+
             <el-form-item label="备注信息">
-              <el-input v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
+              <el-input style="width: 270px" v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
             </el-form-item>
-          </el-col>
-        </el-row>
+
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -252,6 +214,24 @@
 
     data() {
       return {
+        options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        value: '',
+        input: '',
         drawer: false,
         // 标题
         title: "",
@@ -555,11 +535,17 @@
 </script>
 
 <style scoped>
-  .app-container{
-    width: 100%;
+  .app-containers{
+    width: 98%;
     height: 100%;
     /* height: 100vh; */
-    background: white;
+    background: #f9f9f9;
+    margin: 20px auto;
+  }
+  .bai-box{
+    background: #fff;
+    box-sizing: border-box;
+    padding: 20px;
   }
   .pagin-box{
     background: white;
@@ -572,4 +558,15 @@
     padding: 20px;
     margin-bottom: 20px;
   }
+  .top-box{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .d-s{
+    display: flex;
+    align-items: center;
+  }
 </style>
diff --git a/fuintAdmin_zt/src/views/components/Service/way.vue b/fuintAdmin_zt/src/views/components/Service/way.vue
new file mode 100644
index 000000000..843aa6692
--- /dev/null
+++ b/fuintAdmin_zt/src/views/components/Service/way.vue
@@ -0,0 +1,234 @@
+<script >
+export default {
+  data() {
+    return {
+      value: true,
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+</script>
+
+<template>
+    <div class="container-app">
+      <div class="d-s">
+        <div class="left-size">机构名称：</div>
+        <div>百业兴连锁加油站</div>
+      </div>
+      <div class="d-s">
+        <div class="left-size">负责人姓名：</div>
+        <div>xxxx</div>
+      </div>
+      <div class="d-s">
+        <div class="left-size">负责人电话：</div>
+        <div>15012345678</div>
+      </div>
+      <div class="d-s">
+        <div class="left-size">机构类型：</div>
+        <div>连锁店</div>
+      </div>
+      <div class="d-s">
+        <div class="left-size">计费方式：</div>
+        <div>年付费</div>
+        <div>预付费</div>
+        <div>后付费</div>
+        <div>无限制</div>
+      </div>
+<!--   年付费   -->
+      <el-table
+        :data="tableData"
+        border
+        style="width: 70%;margin-left: 20px;margin-bottom: 20px">
+        <el-table-column
+          type="index"
+          align="center"
+          label="序号"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          align="center"
+          label="价格（元）"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="付款金额（元）"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="系统生效时间">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="状态">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="创建时间">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="创建人">
+        </el-table-column>
+      </el-table>
+<!--    预付费  -->
+      <el-table
+        v-if="false"
+        :data="tableData"
+        border
+        style="width: 75%;margin-left: 20px;margin-bottom: 20px">
+        <el-table-column
+          type="index"
+          align="center"
+          label="序号"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          align="center"
+          label="预付金额（元）"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="扣点费率（‱）"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="预估交易流量（万元）">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="剩余交易流量（万元）">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="状态">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="创建时间">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="创建人">
+        </el-table-column>
+      </el-table>
+<!--    后付费  -->
+      <el-table
+        v-if="false"
+        :data="tableData"
+        border
+        style="width: 75%;margin-left: 20px;margin-bottom: 20px">
+        <el-table-column
+          type="index"
+          align="center"
+          label="序号"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          align="center"
+          label="预付金额（元）"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="已发生交易流量（万元）"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="系统服务费统计（元）">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="已付金额（元）">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="状态">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="创建时间">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="创建人">
+        </el-table-column>
+      </el-table>
+<!--    无限制  -->
+      <div class="d-s">
+        <div class="left-size">机构状态：</div>
+        <div><el-switch
+          v-model="value"
+          active-color="#13ce66"
+          inactive-color="#ff4949">
+        </el-switch>
+        </div>
+      </div>
+      <div class="d-s">
+        <div class="left-size">备注：</div>
+        <div>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+      </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.container-app{
+  background: #fff;
+  box-sizing: border-box;
+  padding: 20px;
+  width: 98%;
+  margin: 20px auto;
+}
+.d-s{
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #333333;
+}
+.left-size{
+  width: 100px;
+  text-align: right;
+}
+</style>