添加

README-zh.md

@@ -70,6 +70,15 @@ npm run preview -- --report
 
 ```
 
+## 组件
+组件使用的文件统一放到：src/components 目录下，首字母大写
+
+Upload -- 目前只实现了图片上传
+QrCode -- 生成二维码弹窗
+Editor -- 富文本编辑器（如果要用到上传视屏，则需要在处理一下）
+Tooltip --
+
+
 ## 注意事项
 
 ```bash

src/components/QrCode/index.vue

@@ -0,0 +1,86 @@
+
+<template>
+    <div class="qrCode">
+        <el-dialog :title="title"
+               :visible.sync="status"
+               @close="onDialogClose"
+               width="300px">
+            <div class="left-code">
+                <vue-qr :text="codeUrl" style="width: 100%" :margin="0"></vue-qr>
+                <p class="code-url" v-if="codeUrl">{{ codeUrl }} <el-link @click="copyUrl(codeUrl)" class="link-btn" type="primary">复制</el-link></p>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import VueQr from 'vue-qr'
+import copy from 'copy-to-clipboard'
+export default {
+    data() {
+        return {
+            status: false
+        };
+    },
+    components: {
+        VueQr
+    },
+    props: {
+        value: {
+            // 组件状态
+            type: Boolean,
+            required: true,
+            default() {
+                return false
+            }
+        },
+        title: {
+            type: String,
+            default() {
+                return '查看二维码'
+            }
+        },
+        codeUrl: {
+            type: String
+        }
+    },
+    mounted() {
+        this.status = this.value
+    },
+    methods: {
+        onDialogClose() {
+            this.status = false
+            this.$emit('input', false)
+        },
+        copyUrl(url) {
+            copy(url)
+            this.$message.success('复制成功')
+        },
+    },
+    watch: {
+        value(newValue) {
+            this.status = newValue;
+        },
+        title(newValue, oldValue) {
+            if(newValue != oldValue) {
+                this.title = newValue
+            }
+        }
+    },
+    beforeDestroy() {},
+};
+</script>
+
+<style lang="scss">
+.left-code{
+    .code-url{
+        margin-top: 10px;
+        margin-bottom: 10px;
+        .link-btn{
+            margin-top: 0;
+            margin-bottom: 0;
+            font-size: 12px;
+        }
+    }
+}
+</style>

src/views/teamDetail/components/studentList.vue

@@ -244,7 +244,7 @@
                :visible.sync="addStudentVisible">
       <el-form :model="maskForm"
                label-position="right"
-               label-width="120px"
+               label-width="110px"
                ref="maskForm"
                :rules="maskRules"
                :inline="true">
@@ -326,11 +326,6 @@
                        :label="item.name"></el-option>
           </el-select>
         </el-form-item>
-
-        <!-- <el-form-item label="证件号"
-                      prop="id">
-          <el-input v-model.trim="maskForm.id"></el-input>
-        </el-form-item>-->
         <el-form-item label="出生日期"
                       style="margin-right: 0;"
                       prop="timer">
@@ -344,14 +339,13 @@
                             placeholder="选择日期"></el-date-picker>
           </el-col>
         </el-form-item>
-        <el-form-item label="课程费用"
+        <!-- <el-form-item label="课程费用"
                       prop="courseFee">
           <el-input v-model.trim="maskForm.courseFee"
                     type="number"
                     @mousewheel.native.prevent
                     placeholder="续费金额"></el-input>
-        </el-form-item>
-        <br />
+        </el-form-item> -->
         <el-form-item label="单技班">
           <el-select v-model.trim="maskForm.signClass"
                      filterable
@@ -416,83 +410,43 @@
           </el-select>
         </el-form-item>-->
 
-        <el-divider>首缴订单信息</el-divider>
-        <el-form-item label="课程费用"
-                      prop="temporaryCourseFee">
-          <el-input type="number"
-                    @mousewheel.native.prevent
-                    v-model.trim="maskForm.temporaryCourseFee"
-                    placeholder="首缴课程金额"></el-input>
-        </el-form-item>
-
-        <el-form-item label="乐器"
-                      class="instrList">
-          <el-col :span="11"
-                  style="width: auto;">
-            <el-form-item>
-              <el-select placeholder="选择乐器"
-                         filterable
-                         clearable
-                         @change="onInstrumentChange"
-                         v-model.trim="maskForm.musicGoodsIdList">
-                <el-option v-for="(item, index) in INSTRUMENTLIST"
-                           :key="index"
-                           :value="item.value"
-                           :label="item.label"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="1">&nbsp;</el-col>
-          <el-col :span="11">
-            <el-form-item>
-              <el-input type="number"
-                        @mousewheel.native.prevent
-                        :disabled="kitStatus"
-                        v-model.trim="maskForm.musicPrice"
-                        placeholder="输入金额">
-                <el-select v-model.trim="maskForm.kitGroupPurchaseType"
-                           style="width: 80px !important;"
-                           @change="onKitGroupChnage"
-                           slot="prepend">
-                  <el-option label="免费"
-                             value="FREE"></el-option>
-                  <el-option label="团购"
-                             value="GROUP"></el-option>
-                  <el-option label="租赁"
-                             value="LEASE"></el-option>
-                </el-select>
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-form-item>
-        <el-form-item label="辅件">
-          <el-col :span="11"
-                  style="width: auto;">
-            <el-form-item>
-              <el-select filterable
-                         clearable
-                         multiple
-                         placeholder="选择辅件"
-                         v-model.trim="maskForm.instrGoodsIdList">
-                <el-option v-for="(item, index) in ACCESSORIESLIST"
-                           :key="index"
-                           :value="item.value"
-                           :label="item.label"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="1">&nbsp;</el-col>
-          <el-col :span="11">
-            <el-form-item>
-              <el-input v-model.trim="maskForm.instrPrice"
-                        placeholder="输入金额"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-form-item>
+        <el-divider>缴费周期设置</el-divider>
+        <div class="section" v-for="(goodsList, index) in maskForm.goodsList" :key="index">
+          <p>缴费周期1</p>
+          <el-form-item label="缴费金额"
+                      :prop="'goodsList.' + index + '.money'"
+                      :rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]">
+            <el-input placeholder="请输入金额" style="width: 420px;">
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="缴费日期"
+                      :prop="'goodsList.' + index + '.date'"
+                      :rules="[{ required: true, message: '请选择缴费日期', trigger: 'change' }]">
+            <el-date-picker
+              style="width: 420px;"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="缴费开始日期"
+              end-placeholder="缴费结束日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="缴费有效期"
+                      :prop="'goodsList.' + index + '.date1'"
+                      :rules="[{ required: true, message: '请选择缴费有效期', trigger: 'change' }]">
+            <el-date-picker
+              style="width: 420px;"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="有效期开始日期"
+              end-placeholder="有效期结束日期">
+            </el-date-picker>
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer"
            class="dialog-footer">
-        <!-- <el-button @click="addStudentVisible = false">取 消</el-button> -->
+        <el-button @click="addStudentVisible = false">取 消</el-button>
         <el-button type="primary"
                    @click="addStudent">确 定</el-button>
       </div>
@@ -548,18 +502,6 @@
       </span>
     </el-dialog>
 
-    <el-dialog title="报名二维码"
-               :visible.sync="qrcodeStatus"
-               width="300px">
-      <div class="left-code">
-        <h2>学员报名连接</h2>
-        <div id="qrcode"
-             class="qrcode code"
-             ref="qrCodeUrl"></div>
-        <p class="code-url"
-           v-if="codeUrl">{{ codeUrl }}</p>
-      </div>
-    </el-dialog>
     <el-dialog title="修改缴费周期"
                :before-close="closePayVisible"
                width="600px"
@@ -670,8 +612,10 @@
                    @click="submitAddVisit">确 定</el-button>
       </span>
     </el-dialog>
+
+    <qrc v-model="codeStatus" title="学员报名二维码" :codeUrl="codeUrl" />
   </div>
-</template> 
+</template>
 <script>
 import {
   getTeamStudentList,
@@ -694,12 +638,12 @@ import {
 import { visitChiose } from '@/utils/searchArray'
 import pagination from "@/components/Pagination/index";
 import { vaildStudentUrl } from "@/utils/validate";
-import QRCode from "qrcodejs2";
 import axios from "axios";
 import { getToken } from "@/utils/auth";
 import { permission } from "@/utils/directivePage";
 import { addVisit } from "@/views/returnVisitManager/api.js"
 import cleanDeep from 'clean-deep'
+import qrc from '@/components/QrCode/index'
 export default {
   name: "tstudentList",
   data () {
@@ -775,13 +719,14 @@ export default {
         muiscnetwork: "",
         startClass: "",
         id: "",
-        courseFee: null, // 声部费用
-        temporaryCourseFee: null, // 本次课程费用
-        musicGoodsIdList: null, // 乐器商品编号
-        kitGroupPurchaseType: "GROUP", // 乐器购买方式
-        musicPrice: null, // 乐器购买金额
-        instrGoodsIdList: [], // 辅件商品编号
-        instrPrice: null // 辅件购买金额
+        goodsList: [1, 2, 3]
+        // courseFee: null, // 声部费用
+        // temporaryCourseFee: null, // 本次课程费用
+        // musicGoodsIdList: null, // 乐器商品编号
+        // kitGroupPurchaseType: "GROUP", // 乐器购买方式
+        // musicPrice: null, // 乐器购买金额
+        // instrGoodsIdList: [], // 辅件商品编号
+        // instrPrice: null // 辅件购买金额
       },
       remark: "", // 退团原因
       classList: [],
@@ -849,11 +794,13 @@ export default {
         visitTime: [{ required: true, message: "请输入回访时间" }],
         visitType: [{ required: true, message: "请选择回访类型" }]
       },
-      pickerOptions: null
+      pickerOptions: null,
+      codeStatus: false
     };
   },
   components: {
-    pagination
+    pagination,
+    qrc
   },
   created () {
     // 判断是否带缓存参数
@@ -1018,24 +965,9 @@ export default {
     },
     onCreateQRCode () {
       // 生成报名二维码
-      this.qrcodeStatus = true;
       let id = this.$route.query.id;
-      if (this.qrcodes) {
-        this.qrcodes = false;
-        setTimeout(() => {
-          this.qrcode = new QRCode("qrcode", {
-            width: 200,
-            height: 200,
-            colorDark: "#000000",
-            colorLight: "#ffffff",
-            correctLevel: QRCode.CorrectLevel.H
-          });
-          this.qrcode.makeCode(
-            vaildStudentUrl() + "/#/login?musicGroupId=" + id
-          );
-          this.codeUrl = vaildStudentUrl() + "/#/login?musicGroupId=" + id;
-        }, 500);
-      }
+      this.codeUrl = vaildStudentUrl() + "/#/login?musicGroupId=" + id
+      this.codeStatus = true
     },
     getList () {
       let obj = {
@@ -1453,7 +1385,7 @@ export default {
 //   }
 // }
 .el-select {
-  width: 180px !important;
+  width: 185px !important;
 }
 
 .headWrap {