|
|
@@ -34,58 +34,53 @@
|
|
|
>
|
|
|
<div class="section" v-if="toolsPackage.length > 0" key="toolsPackage">
|
|
|
<el-row class="title-row">
|
|
|
- <el-col :span="isShowSalePrice ? 9 : 14"
|
|
|
+ <el-col :span="12"
|
|
|
>练习系统{{
|
|
|
isGiveAccessories && accessStatus ? "(赠送辅件一套)" : null
|
|
|
}}</el-col
|
|
|
>
|
|
|
<el-col :span="5" style="text-align: right;">时长</el-col>
|
|
|
- <el-col :span="5" style="text-align: right;">原价</el-col>
|
|
|
- <el-col :span="5" style="text-align: right;" v-if="isShowSalePrice"
|
|
|
+ <el-col :span="7" style="text-align: right;">原价</el-col>
|
|
|
+ <!-- <el-col :span="5" style="text-align: right;" v-if="isShowSalePrice"
|
|
|
>售价</el-col
|
|
|
- >
|
|
|
+ > -->
|
|
|
</el-row>
|
|
|
<div v-for="(item, index) in toolsPackage" :key="index">
|
|
|
- <el-row class="option-row" @click.native="onCheckItem(item, 'train')">
|
|
|
- <el-col :span="isShowSalePrice ? 9 : 14">
|
|
|
- <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="5">
|
|
|
- <span style="color: #AAA; font-size: 12px;"
|
|
|
- >{{ item.num }}({{ item.period | unitFormat }})</span
|
|
|
- >
|
|
|
- </el-col>
|
|
|
- <el-col :span="5">
|
|
|
- <del style="color: #AAA; font-size: 12px;"
|
|
|
- >￥{{ item.originalAmount | moneyFormat }}</del
|
|
|
- >
|
|
|
- </el-col>
|
|
|
- <el-col :span="5" v-if="isShowSalePrice">
|
|
|
- <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>
|
|
|
+ <template v-for="(child, index) in formatList">
|
|
|
+ <el-row class="option-row" style="cursor: default;" :key="index">
|
|
|
+ <el-col :span="12" style="padding-left: 0.05rem">
|
|
|
+ <span style="display: flex; align-items: center;">
|
|
|
+ {{ child.title }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <span style="color: #AAA; font-size: 12px;"
|
|
|
+ >{{ item.num }}({{ item.period | unitFormat }})</span
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="7" style="text-align: right;">
|
|
|
+ <del style="color: #1A1A1A; font-size: 14px;width: 100%"
|
|
|
+ >￥{{
|
|
|
+ child.monthPrice | unitFormatPrice(item.period, item.num)
|
|
|
+ }}</del
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="paymentSection" @click="onCheckItem(item, 'train')">
|
|
|
+ <i
|
|
|
+ class="check_default"
|
|
|
+ :class="[
|
|
|
+ item.isStatus ? 'check_active' : '',
|
|
|
+ item.optionalFlag ? 'disabled' : ''
|
|
|
+ ]"
|
|
|
+ ></i>
|
|
|
+ <div class="paymentPrice">
|
|
|
+ <span>优惠价：￥{{ item.actualAmount | moneyFormat }}</span>
|
|
|
+ <del>原价：¥ {{ onCalcSinglePrice(item) }}</del>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</member>
|
|
|
@@ -205,6 +200,7 @@
|
|
|
import { permission } from "@/utils/directivePage";
|
|
|
import { getSubjectGoodsAndInfoPreview, getType } from "@/api/buildTeam";
|
|
|
import dayjs from "dayjs";
|
|
|
+import numeral from "numeral";
|
|
|
const paymentPatternType = {
|
|
|
0: "按月",
|
|
|
1: "按学期",
|
|
|
@@ -294,7 +290,29 @@ export default {
|
|
|
isShowVipCourseForPay: true,
|
|
|
isShowMusicCourseForPay: true
|
|
|
},
|
|
|
- isShowSalePrice: true // 是否显示原价
|
|
|
+ isShowSalePrice: true, // 是否显示原价
|
|
|
+ formatList: [
|
|
|
+ {
|
|
|
+ title: "声部云练",
|
|
|
+ monthPrice: 240
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "合奏云练",
|
|
|
+ monthPrice: 160
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "独奏云练",
|
|
|
+ monthPrice: 160
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "考级云练",
|
|
|
+ monthPrice: 160
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "云课程",
|
|
|
+ monthPrice: 240
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -874,6 +892,21 @@ export default {
|
|
|
},
|
|
|
permission(str) {
|
|
|
return permission(str);
|
|
|
+ },
|
|
|
+ onCalcSinglePrice(item) {
|
|
|
+ const tempNum = {
|
|
|
+ YEAR: 12,
|
|
|
+ MONTH: 1,
|
|
|
+ QUARTERLY: 3,
|
|
|
+ YEAR_HALF: 6
|
|
|
+ };
|
|
|
+ const num = (tempNum[item.period] || 1) * item.num;
|
|
|
+ let price = 0;
|
|
|
+ this.formatList.forEach(format => {
|
|
|
+ price += Number(format.monthPrice * num);
|
|
|
+ });
|
|
|
+
|
|
|
+ return numeral(Number(price)).format("0,0.00");
|
|
|
}
|
|
|
},
|
|
|
filters: {
|
|
|
@@ -885,10 +918,45 @@ export default {
|
|
|
YEAR_HALF: "半年"
|
|
|
};
|
|
|
return template[val];
|
|
|
+ },
|
|
|
+ unitFormatPrice(val, type, nums) {
|
|
|
+ const tempNum = {
|
|
|
+ YEAR: 12,
|
|
|
+ MONTH: 1,
|
|
|
+ QUARTERLY: 3,
|
|
|
+ YEAR_HALF: 6
|
|
|
+ };
|
|
|
+ const num = (tempNum[type] || 1) * nums;
|
|
|
+ return numeral(Number(val * num)).format("0,0.00");
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@import url("./signUpPayment.less");
|
|
|
+
|
|
|
+.paymentSection {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 13px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 10px 6px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .paymentPrice {
|
|
|
+ span {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #f10100;
|
|
|
+ line-height: 21px;
|
|
|
+ }
|
|
|
+
|
|
|
+ del {
|
|
|
+ padding-left: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
