2020/01/20 15:13

111

src/views/teamBuild/components/teamSoundMoney.vue

@@ -217,15 +217,16 @@
             </div>
           </template>
         </el-table-column> -->
-        <!-- <el-table-column label="预览"
+        <el-table-column label="预览"
                          align="center"
                          prop="sound">
           <template slot-scope="scope">
             <div>
-              <el-button type="text">预览</el-button>
+              <el-button type="text"
+                         @click="lookPreview(scope.row)">预览</el-button>
             </div>
           </template>
-        </el-table-column> -->
+        </el-table-column>
       </el-table>
       <div class="floor">
         <div class="remove"
@@ -290,48 +291,219 @@
            @click="submitInfo(2)">提交</div>
     </div>
     <el-dialog title="乐团预览"
-               :visible.sync="previewVisible">
-      <div class="baseRight">
-        <header>乐团缴费</header>
-        <div class="section">
-          <h2 class="title line_bottom">课程</h2>
-          <p class="indate line_bottom"
-             key="indate-price">有效期至：2019年9月1号 <span>现价:￥580</span></p>
+               :visible.sync="previewVisible"
+               width="450px">
+      <div class="reductionWrap">
+        <header style="background:#14928A;color:#fff">乐团缴费</header>
+        <div class="noticeInfo">
+          <i class="trumpet_icon"></i>1、为确保声部平衡，请家长确认 注册声部为孩子的最终录取声部。<br />
+          2、为保障每个声部人数达标，我们都进行了超员20%的录取，系统将按照提交注册的先后顺序安排名额。超员后 有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，我们将优先调配您的孩子；
+        </div>
 
-          <div class="options"
-               key="class-list">
-            <div class="option">
+        <div class="section"
+             v-if="courseScheduleInfo && (courseScheduleStatus || musicGroupSubject.fee > 0)">
+          <h2 class="title line_bottom">课程</h2>
+          <div class="options classInfo">
+            <div class="option"
+                 v-if="courseScheduleInfo.soundInfo.ischeck">
               <div class="0_hd"><i class="check_default check_active"></i></div>
               <div class="o_bd">乐团声部训练</div>
+              <span class="o_ft">
+                现价:￥{{ courseScheduleInfo.soundInfo.value ? courseScheduleInfo.soundInfo.value : 0 }}
+              </span>
             </div>
-            <div class="option">
+            <div class="option"
+                 v-if="courseScheduleInfo.allInfo.ischeck">
               <div class="0_hd"><i class="check_default check_active"></i></div>
               <div class="o_bd">乐团合奏训练</div>
+              <span class="o_ft">
+                现价:￥{{ courseScheduleInfo.allInfo.value ? courseScheduleInfo.allInfo.value : 0 }}
+              </span>
             </div>
-            <div class="option">
+            <div class="option"
+                 v-if="courseScheduleInfo.baseInfo.ischeck">
               <div class="0_hd"><i class="check_default check_active"></i></div>
               <div class="o_bd">基础技能训练</div>
+              <span class="o_ft">
+                现价:￥{{ courseScheduleInfo.baseInfo.value ? courseScheduleInfo.baseInfo.value : 0 }}
+              </span>
             </div>
-            <div class="option">
+            <div class="option"
+                 v-if="courseScheduleInfo.holidayInfo.ischeck">
               <div class="0_hd"><i class="check_default check_active"></i></div>
               <div class="o_bd">假期集中训练</div>
+              <span class="o_ft">
+                现价:￥{{ courseScheduleInfo.holidayInfo.value ? courseScheduleInfo.holidayInfo.value : 0 }}
+              </span>
             </div>
           </div>
-          <div class="coutInfo">
-            <i class="trumpet_icon"></i>年度安排十个月训练，共计168课时，120元/课时，原价20160元，现仅支付560元/月（约合34.5元/课时）
+          <div class="options sale"
+               v-if="musicGroupSubject"
+               :class="[courseScheduleStatus?'lines':'']">
+            <div class="option">
+              <div class="o_bd">课程费用</div>
+              <span class="o_ft">
+                ￥{{ musicGroupSubject.fee }}
+              </span>
+            </div>
           </div>
-          <div class="buy">
-            <div class="price">
-              <p class="oldprice">
-                <del class="text">原价</del>
-                <del>{{  }}￥</del>
-              </p>
-              <p class="now_price">
-                <span class="text">仅需支付</span>
-                <span>{{}}￥</span>
-              </p>
+          <!-- <div class="options" v-else key="class-list">
+                <div class="option">
+                    <div class="0_hd"><i class="check_default check_active"></i></div>
+                    <div class="o_bd">乐团课</div>
+                    
+                    <span class="o_ft" v-if="result.payMethod == 21 || result.payMethod == 25" key="class-price">
+                        <del>原价:￥23520</del> 现价:免费
+                    </span>
+                    <span class="o_ft" v-else key="class-price">
+                        <del>原价:￥23520</del> 现价:￥{{ result.classAmount }}
+                    </span>
+                </div>
+            </div> -->
+          <div class="coutInfo"
+               v-if="courseScheduleInfo.submit.ischeck">
+            <i class="trumpet_icon"></i>{{ courseScheduleInfo.submit.value }}
+          </div>
+        </div>
+
+        <div class="section"
+             v-if="instrumentResult.length > 0">
+          <h2 class="title line_bottom">乐器</h2>
+          <div class="options">
+            <div v-for="(con, index) in instrumentResult"
+                 :key="index"
+                 @click="instrumentF(con)"
+                 :class="[ instrumentResult.length > 1 ? 'oc' : '' ]">
+              <div class="option">
+                <div class="o_"><i class="check_default"
+                     :class="[ con.checked ? 'check_active' : '' ]"></i></div>
+                <div class="o_bd">
+                  {{ con.name }}
+                </div>
+                <template v-if="(con.kitType == 'LEASE')">
+                  <span class="o_ft">
+                    押金:￥{{ con.depositFee }}
+                  </span>
+                </template>
+                <template v-if="con.kitType == 'FREE'">
+                  <span class="o_ft">
+                    <del>原价:￥{{ con.marketPrice }}</del> 免费领用
+                  </span>
+                </template>
+                <span class="o_ft"
+                      v-if="con.price && con.kitType == 'GROUP'">
+                  <del>原价:￥{{ con.marketPrice }}</del> 现价:￥{{ con.price }}
+                </span>
+              </div>
+              <div class="configuration"
+                   v-if="con.marketPrice">
+                <div class="config">
+                  <div class="title"><span>配置参数</span></div>
+                  <div class="content">
+                    <p>{{ con.goodsList[0].specification }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="section"
+             v-if="accessOries.length > 0"
+             key="accessOries">
+          <h2 class="title line_bottom">辅件</h2>
+          <div class="options"
+               v-for="(instr, index) in accessOries"
+               :key="index">
+            <div class="option">
+              <div class="o_hd"><i class="check_default"
+                   :class="[ instr.checked ? 'check_active' : '' ]"></i></div>
+              <div class="o_bd">{{ instr.name }}</div>
+              <span class="o_ft">
+                <!-- <del>原价:￥{{ instr.marketPrice }}</del> -->
+                {{ instr.price == 0 ? '免费' : '现价:￥' + instr.price }}
+              </span>
+            </div>
+            <div class="configuration">
+              <div class="config">
+                <div class="title"><span>配置</span></div>
+                <div class="content"
+                     v-for="item in instr.goodsList"
+                     :key="item.id">
+                  <div class="option">
+                    <div class="o_bd">{{ item.name }}</div>
+                    <span class="o_ft">￥{{ item.marketPrice }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="section"
+             v-else-if="accessGoods.length > 0"
+             key="accessOries">
+          <h2 class="title line_bottom">辅件</h2>
+          <div class="options"
+               v-for="(instr, index) in accessGoods"
+               :key="index">
+            <div class="option">
+              <div class="o_hd"><i class="check_default"
+                   :class="[ instr.checked ? 'check_active' : '' ]"></i></div>
+              <div class="o_bd">{{ instr.name }}</div>
+              <span class="o_ft">
+                <del>原价:￥{{ instr.marketPrice }}</del>
+                {{ instr.groupPurchasePrice == 0 ? '免费' : '现价:￥' + instr.groupPurchasePrice }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="section"
+             v-if="otherResult.length > 0"
+             key="otherResult">
+          <h2 class="title line_bottom">其它</h2>
+          <div class="options"
+               v-for="(base, index) in otherResult"
+               :key="index">
+            <div class="option">
+              <div class="o_hd"><i class="check_default check_active"></i></div>
+              <div class="o_bd">{{ base.name }}</div>
+              <span class="o_ft">
+                <del>原价:￥{{ base.marketPrice }}</del>
+                {{ base.price == 0 ? '免费' : '现价:￥' + base.price }}
+              </span>
+            </div>
+            <div class="configuration">
+              <div class="config">
+                <div class="title"><span>配置</span></div>
+                <div class="content"
+                     v-for="(item, index1) in base.goodsList"
+                     :key="index1">
+                  <div class="option">
+                    <div class="o_bd">{{ item.name }}</div>
+                    <span class="o_ft">￥{{ item.marketPrice }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="section"
+             v-else-if="otherGoods.length > 0"
+             key="otherResult">
+          <h2 class="title line_bottom">其它</h2>
+          <div class="options"
+               v-for="base in otherGoods"
+               :key="base.id">
+            <div class="option">
+              <div class="o_hd"><i class="check_default check_active"></i></div>
+              <div class="o_bd">{{ base.name }}</div>
+              <span class="o_ft">
+                <del>原价:￥{{ base.marketPrice }}</del>
+                {{ base.groupPurchasePrice == 0 ? '免费' : '现价:￥' + base.groupPurchasePrice }}
+              </span>
             </div>
-            <a>购买</a>
           </div>
         </div>
       </div>
@@ -450,7 +622,14 @@ export default {
       isNullFangshi: true,
       Fsearch: null,
       Frules: null,
-      editSound: null
+      editSound: null,
+      // 预览
+      courseScheduleInfo: null, // 课程组信息
+      instrumentResult: [], // 乐器信息
+      accessOries: [], // 辅件(打包)
+      accessGoods: [],
+      otherResult: [], // 其它打包
+      otherGoods: [], // 其它商品
     }
   },
   created () {
@@ -1086,6 +1265,11 @@ export default {
     },
     setDeposiInput (val, item) {
       item.mode.LEASE = 0;
+    },
+    // 查看预览
+    lookPreview (row) {
+      console.log(row)
+      this.previewVisible = true;
     }
   },
   filters: {
@@ -1563,5 +1747,274 @@ export default {
       text-align: left;
     }
   }
+  header {
+    height: 40px;
+    line-height: 40px;
+    color: #000;
+    font-size: 17px;
+    background: #fff;
+    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
+    text-align: center;
+    margin-bottom: 6px;
+  }
+
+  .noticeInfo {
+    position: relative;
+    margin-top: 7px;
+    margin-bottom: 10px;
+    background: #fff;
+    padding: 10px 22px 10px 32px;
+    font-size: 12px;
+    color: #fa101d;
+    .trumpet_icon {
+      width: 14px;
+      height: 12px;
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
+        no-repeat center;
+      background-size: contain;
+      position: absolute;
+      left: 10px;
+      top: 14px;
+    }
+  }
+  .protocolbtn {
+    margin: 35px 0;
+    background: #14928a;
+    color: #fff;
+    font-size: 18px;
+    border-radius: 50px;
+    text-align: center;
+    width: 100%;
+  }
+
+  .section {
+    padding: 16px 22px 10px;
+    background: #fff;
+    margin-bottom: 10px;
+    .line_bottom {
+      border-bottom: 1px solid #ededed;
+    }
+    > .title {
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: bold;
+      padding-bottom: 5px;
+      &::before {
+        content: " ";
+        width: 4px;
+        height: 15px;
+        background: #14928a;
+        display: inline-block;
+        margin-right: 7px;
+        border-radius: 8px;
+      }
+    }
+    .indate {
+      font-size: 14px;
+      padding: 6px 0;
+      display: flex;
+      // justify-content: space-between;
+      justify-content: flex-end;
+      span {
+        color: #fa101d;
+      }
+    }
+
+    .coutInfo {
+      font-size: 12px;
+      color: #f85043;
+      text-align: left;
+      border-top: 1px solid #ededed;
+      padding: 0.12rem 0 0 0.15rem;
+      margin-top: 0.1rem;
+      position: relative;
+      .trumpet_icon {
+        width: 14px;
+        height: 12px;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
+          no-repeat center;
+        background-size: contain;
+        position: absolute;
+        left: 0;
+        top: 14px;
+      }
+    }
+  }
+
+  .options {
+    padding-top: 8px;
+    .oc {
+      &:last-child {
+        border-top: 1px solid #ededed;
+        margin-top: 8px;
+        padding-top: 9px;
+      }
+    }
+    .protocol {
+      padding-left: 20px;
+      font-size: 10px;
+      line-height: 14px;
+    }
+    &.classInfo {
+      .option .o_ft {
+        color: #444444;
+      }
+    }
+    &.lines {
+      margin-top: 5px;
+      border-top: 1px solid #ededed;
+    }
+    &.sale {
+      .option {
+        .o_bd,
+        .o_ft {
+          font-size: 16px;
+          color: #f85043;
+          font-weight: bold;
+        }
+      }
+    }
+    .option {
+      line-height: 26px;
+      font-size: 15px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      .o_bd {
+        flex: 1;
+        .c {
+          font-size: 12px;
+        }
+      }
+      .o_ft {
+        font-size: 14px;
+        color: #fa101d;
+        del {
+          color: #aaaaaa;
+          font-size: 12px;
+        }
+      }
+      .check_default {
+        position: relative;
+        margin-right: 8px;
+        display: block;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 1px solid #d0cfcf;
+        &::before {
+          position: absolute;
+          top: 1px;
+          left: 1px;
+          content: " ";
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          background: #d0cfcf;
+          border-radius: 50%;
+        }
+        &.check_active {
+          border: 1px solid #f1111b;
+          &::before {
+            background: #f1111b;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+
+  .configuration {
+    padding-right: 5px;
+    padding-bottom: 9px;
+    .title {
+      background: rgba(246, 246, 246, 1);
+      height: 1px;
+      position: relative;
+      margin: 15px 0;
+      span {
+        position: absolute;
+        left: 12px;
+        top: -9px;
+        display: inline-block;
+        background-color: #fff;
+        font-size: 12px;
+        padding: 0 4px;
+      }
+    }
+
+    .content {
+      font-size: 12px;
+      padding-left: 16px;
+      line-height: 22px;
+      color: #acacac;
+      .o_ft {
+        color: #aaaaaa;
+        font-size: 12px;
+      }
+    }
+
+    .options {
+      padding-top: 0;
+      padding-left: 16px;
+      .option {
+        font-size: 14px;
+        color: #6f6f6f;
+      }
+    }
+  }
+
+  .buy {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    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: #f85043;
+      border-radius: 10px;
+      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
+      padding: 8px 46px;
+    }
+  }
+  .iframe {
+    width: 100%;
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+    border-top: none !important;
+    min-height: calc(100vh - 41px);
+  }
 }
 </style>