09/18 14:32

创建乐团 基本信息页面画完

package.json

@@ -24,6 +24,7 @@
     "path-to-regexp": "2.4.0",
     "qs": "^6.8.0",
     "vue": "2.6.10",
+    "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

src/App.vue

@@ -13,6 +13,7 @@ export default {
 * {
   margin: 0;
   padding: 0;
+  touch-action: none !important;
 }
 body {
   background-color: #eef4f9;
@@ -23,25 +24,35 @@ body {
 }
 </style>
 <style lang="scss">
+.el-tabs__content {
+  overflow: auto;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}
 .el-tabs__item.is-active {
-  color: #14928a;
+  color: #14928a !important;
   // font-size: 16px;
   font-weight: 600;
 }
 .el-tabs__item:hover {
-  color: #14928a;
+  color: #14928a !important;
   // font-size: 16px;
   font-weight: 600;
 }
 // 选择框组件
 .el-form-item__content {
-  font-size: 16px;
+  font-size: 16px !important;
 }
 .el-select {
-  width: 150px;
+  width: 150px !important;
 }
 .multiple.el-select {
-  width: 150px;
+  width: 150px !important;
 }
 .searchBtn {
   width: 100px;
@@ -127,7 +138,7 @@ body {
         font-size: 14px;
         line-height: 30px;
         span {
-          font-size: 16px;
+          font-size: 22px;
           line-height: 30px;
         }
       }
@@ -155,7 +166,7 @@ body {
   padding: 18px 95px 55px 60px;
   min-height: calc(100vh - 80px);
   .m-core {
-    margin-top: 30px;
+    margin-top: 10px;
     background-color: #fff;
 
     position: relative;
@@ -165,7 +176,9 @@ body {
     line-height: 48px;
     position: relative;
     // padding-left: 30px;
-    margin-bottom: 30px;
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 10px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;

src/api/buildTeam.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+export function getSection (data) {
+  return request({
+    url: '/web-server/organization/queryPage',
+    method: 'post',
+    data
+  })
+}

src/main.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import 'default-passive-events'
-
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

src/router/index.js

@@ -223,7 +223,19 @@ export const constantRoutes = [
       component: () => import('@/views/categroyManager/addressManager')
     }
     ]
-  },
+  }, {
+    path: '/mapDemo',
+    component: Layout,
+    meta: { title: '地图案例' },
+    children: [
+      {
+        path: 'map',
+        component: () => import('@/views/mapDemo/index'),
+        meta: { title: '地图' }
+      }
+    ]
+  }
+  ,
   {
     path: '/example',
     component: Layout,

src/views/main/index.vue

@@ -2,12 +2,20 @@
   <div class="m-container">
     <h2>乐团列表</h2>
     <div class="m-core">
-      <div class='newBand'>新建乐团</div>
+      <div class="btnList">
+        <div class='newBand'>新建乐团</div>
+        <div class='newBand'>声部调整</div>
+        <div class='newBand'>乐团合并</div>
+        <div class='newBand'>乐团加课</div>
+      </div>
+
       <el-form :inline="true"
                class="topForm"
-               v-model="topForm">
-        <el-form-item>
-          <el-select v-model="topForm.school">
+               ref="topForm"
+               :model="topForm">
+        <el-form-item prop='school'>
+          <el-select v-model="topForm.school"
+                     placeholder="请选择学校名称">
             <el-option v-for="(item,index) in schools"
                        :key="index"
                        :label="item.text"
@@ -15,9 +23,10 @@
           </el-select>
         </el-form-item>
         <!-- 多选 -->
-        <el-form-item>
+        <el-form-item prop='status'>
           <el-select class='multiple'
                      v-model="topForm.status"
+                     placeholder="请选择收费类型"
                      multiple
                      collapse-tags>
             <el-option v-for="(item,index) in nowStatus"
@@ -26,6 +35,26 @@
                        :value="item.value"></el-option>
           </el-select>
         </el-form-item>
+        <!-- 收费类型 -->
+        <el-form-item prop='payType'>
+          <el-select v-model="topForm.payType">
+            <el-option label="1.0"
+                       value="1"></el-option>
+            <el-option label="1.5"
+                       value="2"></el-option>
+            <el-option label="2.0"
+                       value="3"></el-option>
+            <el-option label="3.0"
+                       value="4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop='word'>
+          <el-input type="text"
+                    placeholder="请输入搜索关键字"
+                    suffix-icon="el-icon-search"
+                    @focus="gotoSearch"
+                    v-model="topForm.word" />
+        </el-form-item>
         <el-form-item>
           <div class='searchBtn'>搜索</div>
         </el-form-item>
@@ -50,6 +79,10 @@
                            align='center'
                            label="乐团名称">
           </el-table-column>
+          <el-table-column align='center'
+                           max-width='274'
+                           label="学校名称">
+          </el-table-column>
           <el-table-column prop="status"
                            align='center'
                            label="乐团状态">
@@ -109,6 +142,8 @@ export default {
       topForm: {
         school: '',
         status: [],
+        payType: '',
+        word: ''
       },
       schools: [{ // 学校数组
         value: 1, text: '张三团'
@@ -116,13 +151,24 @@ export default {
         value: 2, text: '李四团'
       }],
       nowStatus: [{ // 状态数组
-        value: 1, text: '缴费'
+        value: 1, text: '报名中'
       },
       {
-        value: 2, text: '未缴费'
+        value: 2, text: '缴费中'
       }, {
-        value: 3, text: '缴费中'
-      }],
+        value: 3, text: '筹备中'
+      },
+      {
+        value: 4, text: '进行中'
+      }, {
+        value: 5, text: '失败'
+      }, {
+        value: 6, text: '已结束'
+      },
+      {
+        value: 7, text: '暂停'
+      },
+      ],
       searchLsit: [], // 存储选择后的数组
       tableData: [], // table数据
       rules: {
@@ -199,8 +245,11 @@ export default {
 
 
       }
+    },
+    gotoSearch () {
+      this.$refs['topForm'].resetFields();
+      this.searchLsit = [];
     }
-
   },
   watch: {
     chioseSchool (val) {
@@ -208,7 +257,7 @@ export default {
         // 遍历获取文字
         for (let item in this.schools) {
           if (this.schools[item].value == val) {
-            this.setSearchList({ id: 'school', key: this.schools[item].text, value: val, type: 1 })
+            this.setSearchList({ id: 'school', key: this.schools[item].text, value: val, type: 2 })
           }
         }
       }
@@ -219,12 +268,19 @@ export default {
         // 遍历获取文字
         for (let i = 0; i < val.length; i++) {
           for (let item in this.nowStatus) {
+            // 判断是不是添加还是删除 只有添加才push  否则不管
             if (this.nowStatus[item].value == val[i] && val.length > oldval.length) {
               this.setSearchList({ id: 'status', key: this.nowStatus[item].text, value: val[i], type: 2 })
             }
           }
         }
       }
+    },
+    chiosePayType (val) {
+      if (val) {
+        let arr = ['', '1.0', '1.5', '2.0', '3.0']
+        this.setSearchList({ id: 'payType', key: arr[val], value: val, type: 1 })
+      }
     }
   },
   computed: {
@@ -233,6 +289,9 @@ export default {
     },
     chioseStauts () {
       return this.topForm.status
+    },
+    chiosePayType () {
+      return this.topForm.payType
     }
   }
 }
@@ -241,4 +300,13 @@ export default {
 .select {
   font-size: 16px;
 }
+.btnList {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  div {
+    margin-right: 15px;
+  }
+}
 </style>

src/views/mapDemo/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <baidu-map class="map"
+               ak="cpq3rAsODbEpnA8avGt0FWFI7vUIfzgr"
+               :center="center"
+               :zoom="zoom"
+               @ready="handler">
+    </baidu-map>
+  </div>
+</template>
+<script>
+import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
+export default {
+  data () {
+    return {
+      center: { lng: 116, lat: 116 },
+      zoom: 20
+
+    }
+  },
+  mounted () {
+  },
+  components: {
+    BaiduMap,
+  },
+  methods: {
+    handler () {
+      //{ BMap, map }
+      this.center.lng = 116.404
+      this.center.lat = 39.915
+      this.zoom = 15
+    }
+  }
+}
+</script>
+<style lang="scss">
+.map {
+  width: 100%;
+  height: 500px;
+}
+* {
+  touch-action: pan-y;
+}
+</style>

src/views/teamBuild/components/teamBaseInfo.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class='base-container'>
+    <div class="banseLeft">
+      <div class="head">乐团基本信息：</div>
+      <!-- <div class="num">乐团编号：dywh01</div> -->
+      <el-form :model="topFrom"
+               :inline="true"
+               style="margin-left:11px;">
+        <el-form-item label="收费类型">
+          <el-select v-model="topFrom.type">
+            <el-option label="哈哈哈"
+                       value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属分部">
+          <el-select v-model="topFrom.section">
+            <el-option label="哈哈哈"
+                       value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="合作单位">
+          <el-select v-model="topFrom.school">
+            <el-option label="哈哈哈"
+                       value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="乐团名称">
+          <el-input placeholder="请输入乐团名称"
+                    v-model="topFrom.name"></el-input>
+        </el-form-item>
+        <el-form-item label="运营主管">
+          <el-select v-model="topFrom.boss">
+            <el-option label="哈哈哈"
+                       value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="教务老师">
+          <el-select v-model="topFrom.teacher">
+            <el-option label="哈哈哈"
+                       value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="报名截止时间">
+          <el-date-picker v-model="topFrom.time"
+                          type="date"
+                          placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="招生年级">
+          <el-select placeholder="起始年级"
+                     v-model="topFrom.startClass">
+            <el-option value="1"
+                       label="一年级"></el-option>
+          </el-select>
+          至
+          <el-select placeholder="结束年级"
+                     v-model="topFrom.endClass">
+            <el-option value="1"
+                       label="六年级"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="checkList">
+        <div class="head noMargin">课程组成形态：</div>
+        <el-checkbox-group v-model="checkList">
+          <div class="checkRow">
+            <el-checkbox label="乐团声部训练"></el-checkbox>
+            <div class="inputWrap">
+              单价: <input type="text"
+                     placeholder="请输入">
+            </div>
+            <div class="inputWrap">
+              折后价: <input type="text"
+                     placeholder="请输入">
+            </div>
+          </div>
+          <div class="checkRow">
+            <el-checkbox label="乐团合奏训练"></el-checkbox>
+            <div class="inputWrap">
+              单价: <input type="text"
+                     placeholder="请输入">
+            </div>
+            <div class="inputWrap">
+              折后价: <input type="text"
+                     placeholder="请输入">
+            </div>
+          </div>
+          <div class="checkRow">
+            <el-checkbox label="基础技能训练"></el-checkbox>
+            <div class="inputWrap">
+              单价: <input type="number"
+                     placeholder="请输入">
+            </div>
+            <div class="inputWrap">
+              折后价: <input type="number"
+                     placeholder="请输入">
+            </div>
+          </div>
+          <div class="checkRow">
+            <el-checkbox label="假期集中训练"></el-checkbox>
+            <div class="inputWrap">
+              单价: <input type="number"
+                     placeholder="请输入">
+            </div>
+            <div class="inputWrap">
+              折后价: <input type="number"
+                     placeholder="请输入">
+            </div>
+          </div>
+          <div class="checkRow">
+            <el-checkbox label="课时"
+                         class='classCheckBox'></el-checkbox>
+            <div class="inputWrap">
+              <input type="number"
+                     placeholder="请输入">
+            </div>
+            <div class="textWrap">
+              <p>课程提示:</p>
+              <p>年度安排10个月共168课时,<span>100</span>/课时,原价<span>1000</span>元,现价<span>150</span>元/月(约 <span>5555</span>元/月 )</p>
+            </div>
+          </div>
+          <div class="head noMargin">付费方式：</div>
+          <div class="checkRow">
+            <el-checkbox label="学校"
+                         class='classCheckBox'></el-checkbox>
+            <div class="chioseList">
+              <div class="chioseItem">一次性</div>
+              <div class="chioseItem active">一学期</div>
+              <div class="chioseItem">一学年</div>
+            </div>
+            <div class="inputWrap rightFirst">
+              折后价: <input type="number"
+                     placeholder="请输入">
+            </div>
+            <div class="inputWrap">
+              备注: <input type="textarea"
+                     placeholder="请输入">
+            </div>
+          </div>
+          <div class="checkRow">
+            <el-checkbox label="公司"
+                         class='classCheckBox'></el-checkbox>
+            <div class="chioseList">
+              <div class="chioseItem">一次性</div>
+              <div class="chioseItem active">一学期</div>
+              <div class="chioseItem">一学年</div>
+            </div>
+            <div class="inputWrap rightFirst">
+              折后价: <input type="number"
+                     placeholder="请输入">
+            </div>
+            <div class="inputWrap">
+              备注: <input type="textarea"
+                     placeholder="请输入">
+            </div>
+          </div>
+          <div class="checkRow">
+            <el-checkbox label="公司"
+                         class='classCheckBox'></el-checkbox>
+            <div class="chioseList">
+              <div class="chioseItem">一次性</div>
+              <div class="chioseItem active">周期循环</div>
+            </div>
+            <div class="selectWrap">
+              月份
+              <el-select v-model="chioseMonth"
+                         class="rowSelect"
+                         multiple
+                         collapse-tags>
+                <el-option value="1"
+                           label="一月"></el-option>
+              </el-select>
+            </div>
+            <div class="inputWrap">
+              折后价: <input type="number"
+                     placeholder="请输入">
+            </div>
+            <div class="inputWrap">
+              备注: <input type="textarea"
+                     placeholder="请输入">
+            </div>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div class="baseRight">
+    </div>
+  </div>
+</template>
+<script>
+import { getSection } from '@/api/buildTeam'
+export default {
+  data () {
+    return {
+      topFrom: {
+        type: '', // 收费类型
+        section: '', //所属分部
+        school: '', // 合作单位
+        teacher: '', // 教务老师
+        name: '', //乐团名称
+        boss: '', // 运营主管
+        time: '', // 报名截止时间
+        startClass: '', // 招生年级起始
+        endClass: '' // 招生
+      },
+      checkList: [], // 选中的集合
+      chioseMonth: '', // 选中的月份
+    }
+  },
+  mounted () {
+    // 1.获取各个选项卡的数据内容
+  }
+}
+</script>
+<style lang="scss">
+.base-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  font-size: 16px;
+  color: #444;
+  .banseLeft {
+    overflow: auto;
+    width: 1117px;
+    .head {
+      height: 48px;
+      line-height: 48px;
+      background-color: #edeef0;
+      font-size: 16px;
+      font-weight: bold;
+      color: #444;
+      padding: 0 11px;
+      margin-bottom: 20px;
+    }
+    .noMargin.head {
+      margin-bottom: 0;
+    }
+    .num {
+      padding: 15px 11px;
+    }
+    .checkRow {
+      padding-left: 28px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      // height: 72px;
+      // line-height: 72px;
+      .el-checkbox {
+        line-height: 72px;
+        .el-checkbox__input.is-checked + .el-checkbox__label {
+          color: #444;
+        }
+        .el-checkbox__input.is-checked .el-checkbox__inner,
+        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+          background-color: #14928a;
+          border-color: #14928a;
+        }
+      }
+      .inputWrap {
+        line-height: 72px;
+        font-size: 14px;
+        color: #777;
+        input {
+          border: none;
+          width: 80px;
+          margin-right: 10px;
+          outline: none;
+        }
+      }
+      .inputWrap.rightFirst {
+        margin-left: 245px;
+      }
+      .textWrap {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        font-size: 14px;
+        color: #777;
+        padding-top: 16px;
+        line-height: 20px;
+        span {
+          color: #f97215;
+        }
+      }
+      .selectWrap {
+        font-size: 14px;
+        padding-top: 5px;
+        margin-left: 100px;
+        margin-right: 52px;
+        .rowSelect {
+          .el-input__inner {
+            min-height: 69px;
+          }
+        }
+      }
+
+      .chioseList {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 14px;
+        color: #777;
+        margin-left: 64px;
+        .chioseItem {
+          width: 80px;
+          height: 30px;
+          border-radius: 15px;
+          border: 1px solid #979797;
+          margin-right: 10px;
+          line-height: 30px;
+          text-align: center;
+          cursor: pointer;
+        }
+        .chioseItem.active {
+          background-color: #14928a;
+          border: 1px solid #14928a;
+          color: #fff;
+        }
+      }
+      &:nth-child(even) {
+        background-color: #c6cbd4;
+        input {
+          background-color: #c6cbd4;
+        }
+      }
+    }
+  }
+  .baseRight {
+  }
+  .classCheckBox {
+    margin-right: 10px;
+  }
+}
+</style>

src/views/teamBuild/index.vue

@@ -1,40 +1,48 @@
 <template>
-  <div class='cb-container'>
+  <div class='m-container'>
+    <div class="line"></div>
     <h2>
       <div class='squrt'></div> 建团申请
     </h2>
-    <div class="cb-core">
-      <!-- 面包屑导航 -->
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/' }">基本信息</el-breadcrumb-item>
-        <el-breadcrumb-item>声部设置</el-breadcrumb-item>
-        <el-breadcrumb-item>财务设置</el-breadcrumb-item>
-      </el-breadcrumb>
+    <div class="m-core">
+      <el-tabs type="border-card"
+               v-model="activeIndex">
+        <el-tab-pane label="基本信息"
+                     name='1'>
+          <teamBaseInfo />
+        </el-tab-pane>
+        <el-tab-pane label="声部费用"
+                     name='2'>声部费用</el-tab-pane>
+      </el-tabs>
     </div>
   </div>
 </template>
 <script>
+import teamBaseInfo from '@/views/teamBuild/components/teamBaseInfo'
 export default {
-  name: 'teamBuild'
+  components: { teamBaseInfo },
+  name: 'teamBuild',
+  data () {
+    return {
+      activeIndex: '1'
+    }
+  }
 }
 </script>
 <style lang="scss">
-.cb-container {
-  padding: 10px 30px 30px;
+.m-container {
   h2 {
     .squrt {
       position: absolute;
-      left: 0;
-      top: 0;
-      height: 40px;
-      width: 20px;
+      left: -25px;
+      top: 8px;
+      height: 34px;
+      width: 8px;
       background-color: #14928a;
     }
   }
-  .cb-core {
-    background-color: #fff;
-    min-height: calc(100vh - 160px);
-    padding: 20px 40px;
-  }
 }
+// .el-tabs--border-card {
+//   box-shadow: none;
+// }
 </style>

src/views/teamDetail/index.vue

@@ -70,16 +70,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .m-container {
-  h2 {
-    height: 48px;
-    line-height: 48px;
-    position: relative;
-    margin-bottom: 30px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
   .m-core {
     .msg {
       text-align: right;

vue.config.js

@@ -46,7 +46,13 @@ module.exports = {
           '^api-auth': ''
         }
       },
-
+      '/web-server': {
+        target: 'http://47.99.212.176:8000',
+        changeOrigin: true,
+        pathRewrite: {
+          '^web-server': ''
+        }
+      },
     },
   },
   configureWebpack: {