|
|
@@ -0,0 +1,535 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="noticeInfo">
|
|
|
+ <h2>缴费说明</h2>
|
|
|
+ 1、为确保声部平衡，请家长确认 注册声部为孩子的最终录取声部。<br />
|
|
|
+ 2、为保障每个声部人数达标，我们都进行了超员20%的录取，系统将按照提交注册的先后顺序安排名额。超员后 有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，我们将优先调配您的孩子；
|
|
|
+ <div class="line_bottom" style="margin: .2rem 0 0;"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <h2 class="title">乐团课程</h2>
|
|
|
+ <div class="options">
|
|
|
+ <div class="option" :class="[!item.isStudentOptional ? 'disabled' : '']" v-for="(item, index) in courseInfo" :key="index" @click="onCourseChange(item)">
|
|
|
+ <div class="o_hd"><i class="check_default" :class="[item.isStatus ? 'check_active' : '']"></i></div>
|
|
|
+ <div class="o_bd">{{ item.courseType | coursesType }}</div>
|
|
|
+ <span class="o_ft" style="color: #1a1a1a;">
|
|
|
+ 原价:<del style=" font-size: .16rem; color: #1a1a1a">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options sale lines">
|
|
|
+ <div class="option">
|
|
|
+ <div class="o_bd"></div>
|
|
|
+ <span class="o_ft">
|
|
|
+ 现价 ￥<span style="font-size: .2rem">{{ orderInfo.musicClassFee | moneyFormat }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section" v-if="instrumentResult.length > 0">
|
|
|
+ <h2 class="title">乐器</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_hd"><i class="check_default" :class="[ con.checked ? 'check_active' : '' ]"></i></div>
|
|
|
+ <div class="o_bd">
|
|
|
+ {{ con.name }}
|
|
|
+ </div>
|
|
|
+ <span class="o_ft o_ft_price" v-if="con.price && con.kitType == 'FREE'">
|
|
|
+ 原价<del>:￥{{ con.marketPrice | moneyFormat }}</del>
|
|
|
+ </span>
|
|
|
+ <span class="o_ft o_ft_price" v-if="con.price && con.kitType == 'GROUP'">
|
|
|
+ 原价<del>:￥{{ con.marketPrice | moneyFormat }}</del>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="configuration" v-if="con.marketPrice">
|
|
|
+ <div class="config config_line">
|
|
|
+ <div class="title"><span>配置</span></div>
|
|
|
+ <div class="content">
|
|
|
+ <p>{{ con.goodsList[0].specification }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options sale" style="margin-bottom: .05rem;" v-if="con.marketPrice">
|
|
|
+ <div class="option">
|
|
|
+ <div class="o_bd"></div>
|
|
|
+ <template v-if="(con.kitType == 'LEASE')">
|
|
|
+ <span class="o_ft">
|
|
|
+ 押金:￥<span style="font-size: .2rem">{{ Number((con.depositFee - con.coupon).toFixed(2)) | moneyFormat }}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="con.price && con.kitType == 'FREE'">
|
|
|
+ <span class="o_ft">
|
|
|
+ 免费领用
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <span class="o_ft" v-if="con.price && con.kitType == 'GROUP'">
|
|
|
+ 现价:￥<span style="font-size: .2rem">{{ Number((con.price - con.coupon).toFixed(2)) | moneyFormat }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section" v-if="accessOries.length > 0" key="accessOries">
|
|
|
+ <h2 class="title">辅件</h2>
|
|
|
+ <div class="options" v-for="(instr, index) in accessOries" :key="index" @click="onAuxiliarie(instr)">
|
|
|
+ <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" style="font-size: .14rem;">
|
|
|
+ <!-- <del>原价:￥{{ instr.marketPrice }}</del> -->
|
|
|
+ <template v-if="instr.price == 0">免费</template>
|
|
|
+ <template v-else>现价:￥{{ instr.price | moneyFormat }}</template>
|
|
|
+ <!-- {{ instr.price == 0 ? '免费' : '现价:￥' + instr.price | moneyFormat }} -->
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="configuration" v-if="instr.goodsList.length > 1">
|
|
|
+ <div class="config config_other">
|
|
|
+ <div class="title"><span>配置</span></div>
|
|
|
+ <div class="content" v-for="item in instr.goodsList" :key="item.id">
|
|
|
+ <div class="option" style="padding: 0 .05rem;">
|
|
|
+ <div class="o_bd" style="font-size: .14rem">{{ item.name }}</div>
|
|
|
+ <!-- <span class="o_ft">￥{{ item.marketPrice }}</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 原价现价 -->
|
|
|
+ <div class="section">
|
|
|
+ <div class="needprice markerprice">
|
|
|
+ <del>原价</del>
|
|
|
+ <del>￥{{ orderInfo.marketPrice | moneyFormat }}</del>
|
|
|
+ </div>
|
|
|
+ <div class="needprice grouopprice">
|
|
|
+ <span>仅需支付</span>
|
|
|
+ <span>￥{{ orderInfo.amount | moneyFormat }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="buy">
|
|
|
+ <div class="price">
|
|
|
+ <p class="use_price">
|
|
|
+ <img class="logo" src="@/assets/images/mycard.png" alt="">
|
|
|
+ <span>￥{{ needPrice | moneyFormat }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <a class="btn-submit" @click="onCheckSubmit">购买</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { permission } from '@/utils/directivePage'
|
|
|
+export default {
|
|
|
+ props: ["subjectId"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ remark: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ permission(str){
|
|
|
+ return permission(str)
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.musicGroupPayment {
|
|
|
+ padding-bottom: 0.7rem;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noticeInfo {
|
|
|
+ h2 {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ color: #1a1a1a;
|
|
|
+ padding-bottom: 0.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ // margin-bottom: .1rem;
|
|
|
+ background: #fff;
|
|
|
+ padding: 0.15rem 0.16rem 0.1rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+
|
|
|
+ .protocolbtn {
|
|
|
+ margin: 0.35rem 0;
|
|
|
+ background: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.18rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line_bottom {
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line_top {
|
|
|
+ border-top: 1px solid #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section {
|
|
|
+ padding: 0.16rem 0.16rem 0.1rem;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+
|
|
|
+ >.title {
|
|
|
+ font-size: 0.2rem;
|
|
|
+ line-height: 0.28rem;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 0.05rem;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: " ";
|
|
|
+ width: 0.04rem;
|
|
|
+ height: 0.15rem;
|
|
|
+ background: #14928a;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 0.07rem;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .indate {
|
|
|
+ font-size: 0.14rem;
|
|
|
+ padding: 0.06rem 0;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #fa101d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .options {
|
|
|
+
|
|
|
+ // padding-top: .08rem;
|
|
|
+ .oc {
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+ // margin-top: 0.08rem;
|
|
|
+ padding-top: 0.09rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .protocol {
|
|
|
+ padding-left: 0.2rem;
|
|
|
+ font-size: 0.1rem;
|
|
|
+ line-height: 0.14rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.classInfo {
|
|
|
+ .option .o_ft {
|
|
|
+ color: #1a1a1a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.lines {
|
|
|
+ margin-top: 0.05rem;
|
|
|
+ border-top: 1px solid #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sale {
|
|
|
+ .option {
|
|
|
+
|
|
|
+ .o_bd,
|
|
|
+ .o_ft {
|
|
|
+ font-size: 0.16rem;
|
|
|
+ color: #f85043;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .option {
|
|
|
+ line-height: 0.26rem;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 0.1rem 0.05rem 0.05rem;
|
|
|
+
|
|
|
+ .o_hd {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .o_bd {
|
|
|
+ color: #1a1a1a;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 0.16rem;
|
|
|
+
|
|
|
+ .c {
|
|
|
+ font-size: 0.12rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .o_ft {
|
|
|
+ font-size: 0.16rem;
|
|
|
+ color: #fa101d;
|
|
|
+
|
|
|
+ del {
|
|
|
+ color: #aaaaaa;
|
|
|
+ font-size: 0.12rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .o_ft_price,
|
|
|
+ .o_ft_price del {
|
|
|
+ font-size: 0.16rem;
|
|
|
+ color: #1a1a1a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check_default {
|
|
|
+ margin-right: 0.08rem;
|
|
|
+ display: block;
|
|
|
+ width: 0.18rem;
|
|
|
+ height: 0.18rem;
|
|
|
+ background-color: #e9eaef;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ &.check_active {
|
|
|
+ background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .configuration {
|
|
|
+ padding-bottom: 0.09rem;
|
|
|
+
|
|
|
+ .config_line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 70%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #808080;
|
|
|
+
|
|
|
+ span {
|
|
|
+ padding-left: 0.26rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .config_other {
|
|
|
+ .title {
|
|
|
+ // background:rgba(246,246,246,1);
|
|
|
+ // height: 1px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // margin: .15rem 0;
|
|
|
+ span {
|
|
|
+ // position: absolute;
|
|
|
+ // left: .12rem;
|
|
|
+ // top: -.09rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #808080;
|
|
|
+ margin-left: 0.17rem;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 0.04rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: 0.12rem;
|
|
|
+ padding-left: 0.16rem;
|
|
|
+ line-height: 0.22rem;
|
|
|
+ color: #acacac;
|
|
|
+
|
|
|
+ .o_ft {
|
|
|
+ color: #aaaaaa;
|
|
|
+ font-size: 0.12rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .options {
|
|
|
+ padding-top: 0;
|
|
|
+ padding-left: 0.16rem;
|
|
|
+
|
|
|
+ .option {
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #6f6f6f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .disabled {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buy {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 0.6rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 0.2rem;
|
|
|
+ border-top: 1px solid #ffe9e9e9;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 0.12rem;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 0.16rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-size: 0.16rem;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #fa101d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 0.12rem;
|
|
|
+ width: 0.6rem;
|
|
|
+ display: inline-block;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ del {
|
|
|
+ color: #b5b5b5;
|
|
|
+
|
|
|
+ &.text {
|
|
|
+ color: #b5b5b5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-submit {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 0.18rem;
|
|
|
+ color: #fff;
|
|
|
+ background: #f85043;
|
|
|
+ border-radius: 1rem;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
|
|
|
+ padding: 0.08rem 0.46rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ overflow-y: scroll;
|
|
|
+ border-top: none !important;
|
|
|
+ min-height: calc(100vh - 0.41rem);
|
|
|
+ }
|
|
|
+
|
|
|
+ .countDownContent {
|
|
|
+ line-height: 0.4rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ border-bottom: 0.01rem solid #ccc;
|
|
|
+
|
|
|
+ .van-count-down {
|
|
|
+ display: inline;
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .loadingOrder {
|
|
|
+ width: 90%;
|
|
|
+ height: 1.8rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .van-loading__text {
|
|
|
+ color: #444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-section {
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+ padding: 0.1rem 0.08rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-name {
|
|
|
+ padding-left: 0.1rem;
|
|
|
+ flex: 1 auto;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 0.24rem;
|
|
|
+ height: 0.24rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-checkbox {
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ /deep/.van-checkbox__icon .van-icon {
|
|
|
+ border-color: #e9eaef;
|
|
|
+ background-color: #e9eaef;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.van-checkbox__icon--checked .van-icon {
|
|
|
+ background-color: #2dc7aa;
|
|
|
+ border-color: #2dc7aa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .needprice {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0.02rem 0;
|
|
|
+
|
|
|
+ del {
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #aaa;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ color: #f85043;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .couponprice {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use_price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ img {
|
|
|
+ padding-right: 0.08rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 0.16rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
