预览

src/views/main/index.vue

@@ -49,7 +49,7 @@
           <reminders v-if="activeKey === 'reminders'" />
         </el-tab-pane>
         <el-tab-pane
-          v-if="permission('inspectionItemPlan/queryPage')"
+          v-if="permission('inspectionItem/queryPage')"
           lazy
           label="【乐团主管】日程安排"
           name="teamSchedule"

src/views/resetTeaming/components/resetPayList.vue

@@ -216,8 +216,7 @@
                          v-if="!isNewGropu&&teamStatus&&scope.row.paymentType!='MUSIC_APPLY'"
                          @click="onCreateQRCode(scope.row)">续费二维码</el-button>
               <el-button type="text"
-                         v-if="isNewGropu"
-                         v-permission="'musicGroup/findMusicGroupSubjectInfo/966'"
+                         v-if="scope.row.payUserType === 'STUDENT' && scope.row.paymentType == 'MUSIC_APPLY' && $helpers.permission('musicGroup/findMusicGroupSubjectInfo/966')"
                          @click="onPreview(scope.row)">预览</el-button>
             </div>
           </template>

src/views/resetTeaming/modals/accessories.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="courseModel" style="margin-top: 12px;">
+    <h2
+      class="titles"
+      v-if="
+        accessOries.length > 0
+      "
+    >
+      <img :src="trainSmallBg" />
+      <span>辅件</span>
+    </h2>
+    <div
+      class="section"
+      v-if="
+        accessOries.length > 0
+      "
+      key="accessOries"
+    >
+      <!-- <h2 class="titles">辅件</h2> -->
+      <el-row class="title-row">
+        <el-col :span="12">辅件商品</el-col>
+        <!--  -->
+        <el-col :span="5" :offset="1" style="text-align: right">原价</el-col>
+        <el-col :span="5" :offset="1" style="text-align: right">现价</el-col>
+      </el-row>
+
+      <div v-for="(instr, index) in accessOries" :key="index">
+        <el-row class="option-row" @click.native="onAuxiliarie(instr)">
+          <el-col :span="12">
+            <i
+              class="check_default"
+              :class="[
+                instr.isStatus ? 'check_active' : ''
+              ]"
+            ></i
+            >{{ instr.name }}
+          </el-col>
+          <el-col :span="6">
+            <del style="color: #808080; font-size: 12px"
+              >￥{{
+                instr.goodsList[0]
+                  ? instr.goodsList[0].marketPrice
+                  : 0 | moneyFormat
+              }}</del
+            >
+          </el-col>
+          <el-col :span="6">
+            <span style="color: #1a1a1a" v-if="instr.price == 0">免费</span>
+            <span style="color: #1a1a1a" v-else>￥{{ instr.price | moneyFormat }}</span>
+          </el-col>
+        </el-row>
+        <el-row style="padding-left: 24px" v-if="instr.childGoodsList">
+          <el-col
+            v-for="(child, index) in instr.childGoodsList"
+            :key="child.id"
+          >
+            <span style="font-size: 12px; color: #808080"
+              >{{ child.name }}
+              {{ instr.childGoodsList.length - 1 == index ? "" : "、" }}</span
+            >
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'courseModel',
+    props: {
+			trainSmallBg: String,
+			accessOries: Array
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+        onAuxiliarie(item) {
+            this.$emit('onAuxiliarie', item)
+        },
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import url("./signUpPayment.less");
+</style>

src/views/resetTeaming/modals/activity.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="courseModel" style="margin-top: 12px">
+    <h2 class="titles">
+			<img :src="trainSmallBg" />
+			<span>小班课</span>
+		</h2>
+
+    <div class="section">
+      <el-row class="title-row">
+        <el-col :span="12">练习系统</el-col>
+        <el-col :span="5" :offset="1" style="text-align: right;">课程数</el-col>
+        <el-col :span="6" style="text-align: right;">价格</el-col>
+      </el-row>
+      <div v-for="(item, index) in activityList" :key="index">
+        <el-row class="option-row" @click.native="onCourseChange(item)">
+          <el-col :span="12">
+            <i class="check_default"  :class="[item.isStatus ? 'check_active' : '', item.optionalFlag ? 'disabled' : '']"></i>
+            <span style="display: flex; align-items: center;">
+              <template>{{ item.categoryName }}</template>
+            </span>
+          </el-col>
+          <el-col :span="6">
+						<span style="color: #AAA; font-size: 12px">{{ item.num }}节</span>
+					</el-col>
+          <el-col :span="6">
+            <span style="color: #1A1A1A">￥{{ item.actualAmount | moneyFormat }}</span>
+          </el-col>
+        </el-row>
+      </div>
+		</div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'courseModel',
+    props: {
+			trainSmallBg: String,
+			activityList: Array
+    },
+    methods: {
+      onCourseChange(item) {
+        this.$emit('onCheckItem', item)
+      }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.giveTitle {
+	margin-top: 16px;
+	padding-top: 8px;
+	color: #1A1A1A;
+	font-size: 14;
+	padding-left: 24;
+}
+.small_point {
+	position: absolute;
+	left: 8px;
+	top: 7px;
+	width: 6px;
+	height: 6px;
+	background: #01C1B5;
+	border-radius: 50%;
+}
+@import url("./signUpPayment.less");
+</style>

src/views/resetTeaming/modals/courseModel.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="courseModel" style="margin-top: 12px;">
+    <template v-if="courseViewType == 1 && courseShowInfo.length > 0">
+      <div class="yunTrain">
+        <img :src="trainBg" />
+        <div class="toolText">
+          <p class="toolTitle">服务</p>
+          <p class="toolDate" v-if="serviceValidDate">
+            服务有效期:{{ serviceValidDate }}
+          </p>
+        </div>
+      </div>
+    </template>
+
+    <h2
+      class="titles"
+      v-if="
+        (courseViewType == 0 || courseViewType == 2) && courseInfo.length > 0
+      "
+    >
+      <img :src="trainSmallBg" />
+      <span>乐团课程</span>
+    </h2>
+
+    <template v-if="courseInfo">
+      <!-- 可选课程信息集合 -->
+      <div
+        class="section"
+        v-if="
+          (courseViewType == 0 || courseViewType == 2) && courseInfo.length > 0
+        "
+      >
+        <el-row class="title-row">
+          <el-col :span="12">课程类型</el-col>
+          <!-- 原价 -->
+          <el-col :span="5" :offset="1" style="text-align: right;">时长</el-col>
+          <el-col :span="6" style="text-align: right;">价格</el-col>
+        </el-row>
+        <el-row
+          class="option-row"
+          @click.native="onCheckItem(item)"
+          v-for="(item, index) in courseInfo"
+          :key="index"
+        >
+          <el-col :span="12">
+            <i
+              class="check_default"
+              :class="[
+                item.isStatus ? 'check_active' : '',
+                !item.isStudentOptional ? 'disabled' : ''
+              ]"
+            ></i
+            ><template v-if="item.courseType == 'PROJECT'">{{
+              item.name
+            }}</template
+            ><template v-else>{{ item.courseType | coursesType }}</template>
+          </el-col>
+          <el-col :span="6">
+            <span style="color: #AAA; font-size: 12px;"
+              >{{ item.courseTotalMinuties }}分钟</span
+            >
+          </el-col>
+          <el-col :span="6">
+            <span style="color: #1A1A1A"
+              >￥{{ item.courseCurrentPrice | moneyFormat }}</span
+            >
+          </el-col>
+        </el-row>
+      </div>
+      <!-- 所有不可选的课程合集 courseShowStatus -->
+      <div
+        class="section"
+        v-if="courseViewType == 1 && courseShowInfo.length > 0"
+      >
+        <el-row
+          class="option-row"
+          v-for="(item, index) in courseShowInfo"
+          :key="index"
+          @click.native="onCheckItem(item)"
+        >
+          <el-col :span="16">
+            <i
+              class="check_default"
+              :class="[
+                item.isStatus ? 'check_active' : '',
+                !item.isStudentOptional ? 'disabled' : ''
+              ]"
+            ></i>
+            <span style="display: flex; align-items: center;">
+              <template v-if="item.courseType == 'PROJECT'"
+                >{{ chargeTypeName }} </template
+              ><template v-else>{{ item.courseType | coursesType }}</template>
+            </span>
+            <el-icon
+              v-if="item.courseType == 'PROJECT'"
+              name="question"
+              @click.stop="onQuestions('amr')"
+            />
+          </el-col>
+          <!-- <el-col :span="5">
+						<del style="color: #AAA; font-size: 12px;">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
+					</el-col> -->
+          <el-col :span="8">
+            <span style="color: #1A1A1A"
+              >￥{{ item.courseCurrentPrice | moneyFormat }}</span
+            >
+          </el-col>
+        </el-row>
+      </div>
+      <!-- 赠送课程 -->
+      <div class="section" v-if="memberCourseShowFlag && courseViewType == 2">
+        <el-row class="title-row">
+          <el-col :span="12">赠送课程</el-col>
+          <el-col :span="5" :offset="1" style="text-align: right;">原价</el-col>
+          <el-col :span="6" style="text-align: right;">现价</el-col>
+        </el-row>
+        <el-row
+          class="option-row"
+          style="line-height: 20px; padding-top: 8px; font-size: 12px;"
+          v-for="member in memberCoursePrice"
+          :key="member.name"
+        >
+          <el-col
+            :span="12"
+            style="padding-left: 24px;color: #808080; position: relative"
+            ><i class="small_point"></i> {{ member.name }}</el-col
+          >
+          <el-col :span="6"
+            ><del style="color: #AAA; font-size: 12px;"
+              >￥{{ member.price | moneyFormat }}</del
+            ></el-col
+          >
+          <el-col :span="6"
+            ><span style="color: #1A1A1A">￥{{ 0 | moneyFormat }}</span></el-col
+          >
+        </el-row>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+// import videoPlayer from '@/components/video'
+export default {
+  name: "courseModel",
+  props: {
+    courseViewType: [Number, String],
+    courseShowInfo: Array, // 无用
+    courseInfo: Array,
+    toolsPackage: Array, // 无用
+    trainSmallBg: String,
+    cloudTeacherFee: [Number, String], // 无用
+    serviceValidDate: String,
+    chargeTypeName: String,
+    memberCoursePrice: Array,
+    memberCourseShowFlag: Boolean
+  },
+  components: {
+    // videoPlayer
+  },
+  data() {
+    return {
+      trainBg: require("../../../assets/images/musicGroup/yunTrain_bg.png"),
+      videoStatus: false
+    };
+  },
+  methods: {
+    onCheckItem(item) {
+      this.$emit("onCourseChange", item);
+    },
+    onQuestions(item) {
+      this.$emit("onQuestions", item);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.giveTitle {
+  margin-top: 16px;
+  padding-top: 8px;
+  color: #1a1a1a;
+  font-size: 14px;
+  padding-left: 24px;
+}
+.small_point {
+  position: absolute;
+  left: 8px;
+  top: 7px;
+  width: 6px;
+  height: 6px;
+  background: #01c1b5;
+  border-radius: 50%;
+}
+@import url("./signUpPayment.less");
+</style>

src/views/resetTeaming/modals/instrumentModel.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="instrumentModel">
+    <h2 class="titles" v-if="instrumentResultList.length > 0">
+      <img :src="trainSmallBg" />
+      <span>乐器</span>
+    </h2>
+    <div class="section" v-if="instrumentResultList.length > 0">
+      <div v-for="(i, index) in instrumentResultList" :key="index">
+        <el-row class="title-row">
+          <el-col :span="13">
+            <template v-if="i[0]['kitType'] == 'GROUP'">
+              团购乐器{{ courseViewType == 2 ? "(赠送辅件一套)" : null }}
+            </template>
+            <template v-if="i[0]['kitType'] == 'LEASE'">
+              乐器租赁{{ courseViewType == 2 ? "(请自行购买辅件)" : null }}
+            </template>
+            <template v-if="i[0]['kitType'] == 'FREE'">
+              免费乐器{{ courseViewType == 2 ? "(请自行购买辅件)" : null }}
+            </template>
+            <template v-if="i[0]['kitType'] == 'owned'">
+              自备乐器{{ courseViewType == 2 ? "(请自行购买辅件)" : null }}
+            </template>
+          </el-col>
+          <el-col :span="5" style="text-align: right;">
+            <template
+              v-if="['GROUP', 'LEASE', 'FREE'].includes(i[0]['kitType'])"
+              >原价</template
+            >
+            <!-- <template v-if="i[0]['kitType'] == 'LEASE'">原价</template> -->
+          </el-col>
+          <el-col :span="5" :offset="1" style="text-align: right;">
+            <!-- <template v-if="i[0]['kitType'] == 'GROUP' || i[0]['kitType'] == 'FREE'">现价</template> -->
+            <template v-if="['GROUP', 'FREE'].includes(i[0]['kitType'])"
+              >现价</template
+            >
+            <template v-if="i[0]['kitType'] == 'LEASE'"
+              >租赁押金</template
+            >
+          </el-col>
+        </el-row>
+
+        <div v-for="(con, index) in i" :key="index">
+          <div @click="instrumentF(con)">
+            <el-row
+              class="option-row"
+              v-if="organId == 55 && courseViewType == 2 && !toolsPackages"
+            >
+              <el-col :span="12">
+                <i
+                  class="check_default"
+                  :class="[con.isStatus ? 'check_active' : '']"
+                ></i>
+                <div>
+                  {{ con.name }}
+                  <div
+                    v-if="con.goodsList"
+                    style="font-size: 12px; color: #808080"
+                  >
+                    {{ con.goodsList[0].specification }}
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <del
+                  style="color: #808080; font-size: 12px;"
+                  v-if="con.kitType != 'owned'"
+                  >￥{{ con.marketPrice | moneyFormat }}</del
+                >
+              </el-col>
+              <el-col :span="6">
+                <span style="color: #1A1A1A" v-if="con.kitType == 'LEASE'"
+                  >￥{{
+                    Number((con.depositFee - con.coupon).toFixed(2))
+                      | moneyFormat
+                  }}</span
+                >
+                <span style="color: #1A1A1A" v-if="con.kitType == 'FREE'"
+                  >￥{{ 0 | moneyFormat }}</span
+                >
+                <span style="color: #1A1A1A" v-if="con.kitType == 'GROUP'"
+                  >￥{{
+                    Number((con.discountPrice - con.coupon).toFixed(2))
+                      | moneyFormat
+                  }}</span
+                >
+              </el-col>
+            </el-row>
+            <el-row class="option-row" v-else>
+              <el-col :span="12">
+                <i
+                  class="check_default"
+                  :class="[con.isStatus ? 'check_active' : '']"
+                ></i>
+                <div>
+                  {{ con.name }}
+                  <div
+                    v-if="con.goodsList"
+                    style="font-size: 12px; color: #808080"
+                  >
+                    {{ con.goodsList[0].specification }}
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <del
+                  style="color: #808080; font-size: 12px;"
+                  v-if="con.kitType != 'owned'"
+                  >￥{{ con.marketPrice | moneyFormat }}</del
+                >
+              </el-col>
+              <el-col :span="6">
+                <span style="color: #1A1A1A" v-if="con.kitType == 'LEASE'"
+                  >￥{{
+                    Number((con.depositFee - con.coupon).toFixed(2))
+                      | moneyFormat
+                  }}</span
+                >
+                <span style="color: #1A1A1A" v-if="con.kitType == 'FREE'"
+                  >￥{{ 0 | moneyFormat }}</span
+                >
+                <span style="color: #1A1A1A" v-if="con.kitType == 'GROUP'"
+                  >￥{{
+                    Number((con.price - con.coupon).toFixed(2)) | moneyFormat
+                  }}</span
+                >
+              </el-col>
+            </el-row>
+
+            <el-row
+              style="padding: 8px 0 8px 24px; border-top: 1px solid #F0F0F0;"
+              v-if="con.childGoodsNames && con.kitType == 'GROUP'"
+            >
+              <el-col :span="24" style="font-size: 14px; color: #1A1A1A"
+                >赠送辅件</el-col
+              >
+              <el-col>
+                <span style="font-size: 12px; color: #808080;">{{
+                  con.childGoodsNames
+                }}</span>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "instrumentModel",
+  props: {
+    courseViewType: [Number, String],
+    instrumentResultList: Array,
+    buyMaintenance: Boolean,
+    trainSmallBg: String,
+    toolsPackage: Array,
+    organId: [Number, String, null]
+  },
+  methods: {
+    // onLeBao() {
+    //     this.$emit('onLeBao')
+    // },
+    instrumentF(item) {
+      console.log(item);
+      this.$emit("instrumentF", item);
+    },
+    onQuestions(item) {
+      this.$emit("onQuestions", item);
+    }
+  },
+  computed: {
+    toolsPackages() {
+      return this.toolsPackage[0].isStatus;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import url("./signUpPayment.less");
+</style>

src/views/resetTeaming/modals/member.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="courseModel" style="margin-top: 12px;">
+    <template>
+      <div class="yunTrain">
+        <img :src="trainBg" />
+        <div class="toolText">
+          <p class="toolTitle">
+            团练宝
+            <span @click="videoStatus = true"
+              >查看视频<i class="icon_video"></i
+            ></span>
+          </p>
+          <p class="toolDate">
+            购买后由机构根据教学情况，激活使用详细问题请咨询机构老师
+          </p>
+        </div>
+      </div>
+    </template>
+
+    <div class="section">
+      <el-row class="title-row">
+        <el-col :span="12">练习系统</el-col>
+        <el-col :span="5" :offset="1" style="text-align: right;">时长</el-col>
+        <el-col :span="6" style="text-align: right;">价格</el-col>
+      </el-row>
+      <div v-for="(item, index) in toolsPackage" :key="index">
+        <el-row class="option-row" @click.native="onTrainChange(item)">
+          <el-col :span="12">
+            <i
+              class="check_default"
+              :class="[
+                item.isStatus ? 'check_active' : '',
+                item.optionalFlag ? 'disabled' : ''
+              ]"
+            ></i>
+            <span style="display: flex; align-items: center;">
+              <template>{{ item.name }}</template>
+            </span>
+          </el-col>
+          <el-col :span="6">
+            <span style="color: #AAA; font-size: 12px;"
+              >{{ item.num }}{{ item.period | unitFormat }}</span
+            >
+          </el-col>
+          <el-col :span="6">
+            <span style="color: #1A1A1A"
+              >￥{{ item.actualAmount | moneyFormat }}</span
+            >
+          </el-col>
+        </el-row>
+        <el-row style="padding-left: 24px;" v-if="item.childGoodsList">
+          <el-col
+            v-for="(child, index) in item.childGoodsList"
+            :key="child.name"
+          >
+            <span style="font-size: 12px; color: #808080;"
+              >{{ child.name }}
+              {{ item.childGoodsList.length - 1 == index ? "" : "、" }}</span
+            >
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <el-dialog
+      title="视频"
+      :visible.sync="videoStatus"
+      :modal-append-to-body="false"
+      :append-to-body="true"
+      class="videoDialog"
+      width="30%"
+    >
+      <video
+        style="width: 100%"
+        v-if="videoStatus"
+        controls="controls"
+        class="ql-video"
+        :src="'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4'"
+        :poster="require('../../../assets/images/musicGroup/video_bg.png')"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "courseModel",
+  props: {
+    courseViewType: [Number, String],
+    toolsPackage: Array,
+    trainSmallBg: String
+  },
+  data() {
+    return {
+      trainBg: require("../../../assets/images/musicGroup/yunTrain_bg.png"),
+      videoStatus: false
+    };
+  },
+  methods: {
+    onTrainChange(item) {
+      // 乐器练习云教练点击时
+      this.$emit("onCheckItem", item);
+    },
+    onQuestions(item) {
+      this.$emit("onQuestions", item);
+    }
+  },
+  filters: {
+    unitFormat(val) {
+      let template = {
+        YEAR: "年",
+        MONTH: "个月",
+        QUARTERLY: "个季度",
+        YEAR_HALF: "半年"
+      };
+      return template[val];
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.giveTitle {
+  margin-top: 16px;
+  padding-top: 8px;
+  color: #1a1a1a;
+  font-size: 14;
+  padding-left: 24;
+}
+.small_point {
+  position: absolute;
+  left: 8px;
+  top: 7px;
+  width: 6px;
+  height: 6px;
+  background: #01c1b5;
+  border-radius: 50%;
+}
+@import url("./signUpPayment.less");
+</style>

src/views/resetTeaming/modals/signUpPayment.less

@@ -0,0 +1,364 @@
+.yunTrain {
+  position: relative;
+  font-size: 0;
+  margin: 0 12px;
+
+  img {
+    width: 100%;
+  }
+
+  .toolText {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 10px;
+  }
+
+  .toolTitle {
+    font-size: 18px;
+    color: #AC4C31;
+    display: flex;
+    font-weight: bold;
+    align-items: center;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    width: 100%;
+    justify-content: space-between;
+
+    .icon_video {
+      margin-left: 9px;
+      display: inline-block;
+      width: 15px;
+      height: 15px;
+      background: url('../../../assets/images/musicGroup/video_btn.png');
+      background-size: 100%;
+    }
+
+    >span {
+      display: flex;
+      font-size: 11px;
+      line-height: 1.5;
+      font-weight: 400;
+    }
+  }
+
+  .toolDate {
+    padding-top: 3px;
+    font-size: 12px;
+    color: #808080;
+  }
+}
+
+.title {
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: bold;
+  padding-bottom: 5px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+
+  &::before {
+    content: " ";
+    width: 4px;
+    height: 15px;
+    background: #01c1b5;
+    display: inline-block;
+    margin-right: 7px;
+    border-radius: 8px;
+  }
+}
+
+.titles {
+  position: relative;
+  font-size: 0;
+  margin: 0 12px;
+
+  img {
+    width: 100%;
+  }
+
+  &>span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 10px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #AC4C31;
+  }
+}
+
+.section {
+  margin: 0 12px;
+  padding: 12px 12px 10px;
+  background: #fff;
+  margin-bottom: 12px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.disabled {
+
+  // opacity: 0.5;
+  // .check_active {
+  //   opacity: 0.5;
+  // }
+  &::before {
+    background: url("../../../assets/images/icon_checkbox_disable.png") no-repeat center !important;
+    background-size: contain !important;
+  }
+
+  .check_active::before {
+    background: url("../../../assets/images/icon_checkbox_disable.png") no-repeat center;
+    background-size: contain;
+  }
+}
+
+.buy {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  border-top: 1px solid #ffe9e9e9;
+  color: #000000;
+  font-size: 12px;
+  background: #fff;
+
+  .price {
+    flex: 1;
+    font-size: 16px;
+  }
+
+  font-size: 16px;
+
+  span {
+    color: #fa101d;
+  }
+
+  .text {
+    font-size: 12px;
+    width: 60px;
+    display: inline-block;
+    color: #000;
+  }
+
+  del {
+    color: #b5b5b5;
+
+    &.text {
+      color: #b5b5b5;
+    }
+  }
+
+  .btn-submit {
+    display: inline-block;
+    font-size: 18px;
+    color: #fff;
+    background: #01c1b5;
+    border-radius: 100px;
+    padding: 8px 36px;
+  }
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: scroll;
+  border-top: none !important;
+  min-height: calc(100vh - 41px);
+}
+
+.countDownContent {
+  line-height: 40px;
+  text-align: center;
+  font-size: 14px;
+  border-bottom: 1px solid #ccc;
+
+  .el-count-down {
+    display: inline;
+    color: #f00;
+  }
+}
+
+.loadingOrder {
+  width: 90%;
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .el-loading__text {
+    color: #444;
+  }
+}
+
+.pay-section {
+  margin-bottom: 10px;
+  padding: 10px 8px;
+}
+
+.pay-name {
+  padding-left: 10px;
+  flex: 1 auto;
+  font-weight: bold;
+}
+
+.logo {
+  width: 24px;
+  height: 24px;
+}
+
+.el-checkbox {
+  float: right;
+
+  /deep/.el-checkbox__icon .el-icon {
+    border-color: #e9eaef;
+    background-color: #e9eaef;
+  }
+
+  /deep/.el-checkbox__icon--checked .el-icon {
+    background-color: #2dc7aa;
+    border-color: #2dc7aa;
+  }
+}
+
+.needprice {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 0;
+
+  del {
+    font-size: 14px;
+    color: #808080;
+    font-weight: bold;
+  }
+
+  span {
+    font-size: 18px;
+    color: #f85043;
+    font-weight: bold;
+  }
+}
+
+.couponprice {
+  display: flex;
+  justify-content: space-between;
+}
+
+.use_price {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: bold;
+
+  img {
+    padding-right: 8px;
+  }
+
+  span {
+    font-size: 16px;
+  }
+}
+
+.check_default {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  height: 26px;
+
+  &::before {
+    display: block;
+    content: " ";
+    width: 18px;
+    height: 18px;
+    background-color: #fff;
+    border: 1px solid #e9eaef;
+    border-radius: 50%;
+  }
+
+  &.check_active {
+    &::before {
+      display: block;
+      content: " ";
+      background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
+      border: 1px solid transparent;
+      background-size: contain;
+    }
+  }
+
+  &.radio_active {
+    &::before {
+      display: block;
+      content: " ";
+      background: url("../../../assets/images/icon_radio.png") no-repeat center;
+      border: 1px solid transparent;
+      background-size: contain;
+    }
+  }
+}
+
+.title-row {
+  background: #f3f4f8;
+  color: #1a1a1a;
+  padding: 5px 5px 3px;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.option-row {
+  line-height: 26px;
+  font-size: 14px;
+  display: flex;
+  // align-items: center;
+  position: relative;
+  padding: 10px 0 5px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  .el-col {
+    display: flex;
+    // align-items: center;
+  }
+
+  .el-col-6,
+  .el-col-8,
+  .el-col-11 {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &.lines {
+    margin-top: 5px;
+    border-top: 1px solid #ededed;
+  }
+}
+
+.el-icon-question {
+  font-size: 16px;
+  color: #4d4d4d;
+  padding-left: 5px;
+  padding-top: 5px;
+}
+
+.fontBold {
+  font-weight: bold;
+}
+
+.videoDialog {
+  /deep/.el-dialog__body {
+    padding: 0;
+    font-size: 0;
+  }
+}

src/views/resetTeaming/modals/tips.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="paymentTips">
+    <h2 class="titleTips" style="padding-top: 12px">注册说明</h2>
+    <div class="noticeInfo">
+      1、您注册时所选择的乐团声部，即为乐团录取最终确认的声部，请您务必仔细填写；<br />
+      2、为避免因部分已注册家长放弃名额导致乐团声部失衡，系统设定各声部限额放大20%比例开放注册，系统自动按照完全完成注册的先后顺序确认录取名单，因此，超员后有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，在您孩子的身体条件适合该乐器的前提下，我们将优先予以调配。
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.paymentTips {
+  background: #fff;
+  margin: 10px 12px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.titleTips {
+  font-size: 16px;
+  line-height: 28px;
+  font-weight: 500;
+  padding: 0 12px 12px;
+  padding-bottom: 5px;
+  display: flex;
+  align-items: center;
+  color: #1A1A1A;
+  margin-bottom: 0;
+
+  &::before {
+    content: " ";
+    width: 19px;
+    height: 19px;
+    display: inline-block;
+    margin-right: 7px;
+    margin-top: -3px;
+    background: url('../../../assets/images/musicGroup/icon_tips.png') no-repeat center;
+    background-size: contain;
+  }
+}
+.noticeInfo {
+  // margin: 0 012px;
+  position: relative;
+  background: #fff;
+  padding: 0 12px 10px;
+  font-size: 13px;
+  color: #696969;
+  line-height: 20px;
+}
+</style>