dy-admin-manager/src/views/resetTeaming/modals/subject-preview.vue

<template>
    <div style="background: #F3F4F8;">
        <div class="noticeInfo">
			<h2>缴费说明</h2>
			1、为确保声部平衡，请家长确认 注册声部为孩子的最终录取声部。<br />
			2、为保障每个声部人数达标，我们都进行了超员20%的录取，系统将按照提交注册的先后顺序安排名额。超员后 有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，我们将优先调配您的孩子；
			<div class="line_bottom" style="margin: 20px 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: 16px; 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: 20px">{{ 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: 5px;" 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: 20px">{{ 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: 20px">{{ 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: 14px;">
						<!-- <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 5px;">
								<div class="o_bd" style="font-size: 14px">{{ 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">购买</a>
		</div>
    </div>
</template>
<script>
import { permission } from '@/utils/directivePage'
import { getSubjectGoodsAndInfoPreview } from '@/api/buildTeam'

const paymentPatternType = {
    0: '按月',
    1: '按学期',
    2: '一次性'
}
export default {
    props: ["subjectId"],
    data() {
        const query = this.$route.query
        return {
            musicGroupId: query.id,
            result: {}, // 返回结果
            instrument: {}, // 乐器类型
            baseInfo: {}, // 其它类
            money: 580,
            balance: 0, // 余额
            needPrice: 0, // 还需支付
            payType: false, // 是否余额支付
            orderInfo: {
                marketPrice: 0,
                amount: 0, // 现价总金额
                groupPurchasePrice: 0, // 现价
                goodsGroupIds: null,
                goodsIds: null,
                contractGoodsIds: null, // 选中所有商品ID
                couponPrice: 0, //
                musicClassFee: 0
            }, // 金额列表，金额计算
            courseInfo: null, // 课程信息
            courseScheduleStatus: false, // 课程状态
            musicGroupSubject: null, // 基本信息
            instrumentResult: [], //乐器
            accessOries: [], // 辅件(打包)
            agreeStatus: true,
            authStatus: false,
            buyList: [], // 信息列表
            ids: [],
            chargeTypeId: null,
            paymentStatus: null,
            paymentPattern: null,
        };
    },
    mounted() {
        this.__init()
    },
    methods: {
        async __init() {
            // 获取数据
            let params = {
                musicGroupId: this.musicGroupId,
                subjectId: this.subjectId
            }
            await getSubjectGoodsAndInfoPreview(params).then(res => {
                let result = res
                if (result.code == 200) {
                    let tempResult = result.data
                    this.paymentPattern = tempResult.musicGroupPaymentCalender ? tempResult.musicGroupPaymentCalender.paymentPattern : 2
                    let tempInfo = tempResult.musicGroupPaymentCalender? tempResult.musicGroupPaymentCalender.musicGroupPaymentCalenderCourseSettingsList : null
                    // 判断是否有课程
                    if (tempInfo && tempInfo.length > 0) {
                        // 默认课程都选中
                        this.courseInfo = tempInfo
                    } else {
                        // 判断是否有课程，如果没有课程则默认显示0
                        this.courseInfo = [{
                            id: -1,
                            courseCurrentPrice: 0,
                            courseOriginalPrice: 0,
                            isStudentOptional: false,
                            courseType: 'MUSIC'
                        }]
                    }
                    this.courseInfo.forEach(item => {
                        item.isStatus = true
                    })

                    this.musicGroupSubject = tempResult.musicGroupSubjectPlan
                    let instrumentInfo = {}
                    tempResult.musicGroupSubjectGoodsGroupList.forEach((item) => {
                        if (item.type == "INSTRUMENT") {
                            // 获取乐器所有提供方式
                            let KGPTJ = item.kitGroupPurchaseTypeJson ? JSON.parse(item.kitGroupPurchaseTypeJson) : {}
                            for (let single in KGPTJ) {
                                let tempItem = Object.assign({}, item) // 深拷贝
                                tempItem.marketPrice = tempItem.goodsList[0].marketPrice
                                tempItem.kitType = single // 优惠模式
                                tempItem.coupon = KGPTJ[single] // 优惠金额
                                if (instrumentInfo.id) {
                                    tempItem.checked = false
                                    if (single == 'GROUP') { // 团购
                                        if ((instrumentInfo.kitType == 'GROUP' && instrumentInfo.price < tempItem.price) || instrumentInfo.kitType ==
                                            'LEASE' || instrumentInfo.kitType == 'FREE') {
                                            this.instrumentResult.forEach(instrRes => {
                                                instrRes.checked = false
                                            })
                                            tempItem.checked = true
                                            instrumentInfo = {
                                                id: tempItem.id,
                                                price: tempItem.price,
                                                kitType: single
                                            }
                                        }
                                    } else if (single == 'LEASE') { // 租赁
                                        if (instrumentInfo.kitType == 'LEASE' && instrumentInfo.price < tempItem.price) {
                                            this.instrumentResult.forEach(instrRes => {
                                                instrRes.checked = false
                                            })
                                            tempItem.checked = true
                                            instrumentInfo = {
                                                id: tempItem.id,
                                                price: tempItem.price,
                                                kitType: single
                                            }
                                        }
                                    } else if (single == 'FREE') { // 免费
                                        if (instrumentInfo.kitType == 'FREE' && instrumentInfo.price < tempItem.price) {
                                            this.instrumentResult.forEach(instrRes => {
                                                instrRes.checked = false
                                            })
                                            tempItem.checked = true
                                            instrumentInfo = {
                                                id: tempItem.id,
                                                price: tempItem.price,
                                                kitType: single
                                            }
                                        }
                                    }
                                } else {
                                    tempItem.checked = true
                                    instrumentInfo = {
                                        id: tempItem.id,
                                        price: tempItem.price,
                                        kitType: single
                                    }
                                }
                                this.instrumentResult.push(tempItem)
                            }
                        } else if (item.type == "ACCESSORIES") {
                            item.checked = true
                            this.accessOries.push(item)
                        }
                    })
                    // 添加自备选项
                    if (this.instrumentResult.length > 0) {
                        this.instrumentResult.push({
                            id: -1,
                            kitType: 'owned',
                            name: '自备',
                            price: 0,
                            marketPrice: 0,
                            checked: false
                        })
                    }
                }
                // 初始化计算金额
                this.calcPrice()
            })
        },
        onCourseChange(item) {
            // 判断用户是否可以选择
            if (item.isStudentOptional) {
                item.isStatus = !item.isStatus
                this.calcPrice()
            }
        },
        onClickCheckbox() { //是否使用余额支付
            if (!this.payType) {
                if (this.orderInfo.amount >= this.balance) {
                    this.needPrice = Number((this.orderInfo.amount - this.balance).toFixed(2))
                } else {
                    this.needPrice = 0
                }
            } else {
                this.needPrice = this.orderInfo.amount
            }
            this.payType = !this.payType
        },
        onAuxiliarie(item) {
            // 辅件切换状态
            item.checked = !item.checked
            // 重新计算金额
            this.calcPrice()
        },
        instrumentF(item) {
            // 乐器切换状态
            this.instrumentResult.forEach(item => {
                item.checked = false
            })
            item.checked = true
            // 重新计算金额
            this.calcPrice()
        },
        calcPrice() {
            let buyList = [],
                ids = []
            let amount = 0,
                marketPrice = 0,
                goodsGroupIds = {},
                courseKeys = [],
                couponPrice = 0, // 优惠金额
                goodsIds = [],
                tempCourseFee = 0,
                musicClassFee = 0,
                contractGoodsIds = '' // 合同所需要的商品Id （只需要乐器编号）
            // 课程
            let mgs = this.musicGroupSubject
            let csi = this.courseInfo
            // 加上判断是否有课程信息
            if (mgs) {
                csi.forEach(item => {
                    if (item.isStatus) {
                        musicClassFee += parseFloat(item.courseCurrentPrice)
                        marketPrice += parseFloat(item.courseOriginalPrice)
                        if (item.id > 0) {
                            courseKeys.push(item.id)
                        }
                    }
                })
            }

            // 乐器
            let ir = this.instrumentResult
            if (ir.length > 0) {
                ir.forEach(item => {
                    if (item.checked) {
                        if (item.name != '自备') {
                            contractGoodsIds += item.goodsIdList
                        }
                        if (item.kitType == 'FREE') {
                            amount += 0
                            couponPrice = 0 // 优惠金额
                        } else if (item.kitType == 'LEASE') {
                            couponPrice = item.coupon // 优惠金额
                            if (item.name != '自备') {
                                amount += item.depositFee
                            } else {
                                amount += 0
                            }
                        } else {
                            amount += parseFloat(item.price)
                            couponPrice = item.coupon ? item.coupon : 0
                        }
                        if (item.kitType == 'LEASE') {
                            if (item.name != '自备') {
                                marketPrice += item.depositFee
                            }
                        } else {
                            marketPrice += parseFloat(item.marketPrice)
                        }
                        // item.id ? goodsGroupIds[item.id] : null
                        if (item.id) {
                            goodsGroupIds[item.id] = item.kitType
                        }
                        if (item.kitType == 'LEASE') {
                            buyList.push({
                                name: item.name,
                                type: '租赁',
                                price: item.depositFee
                            })
                        } else if (item.kitType == 'GROUP' && parseFloat(item.price - couponPrice) > 0) {
                            buyList.push({
                                name: item.name,
                                type: '团购',
                                price: parseFloat(item.price - couponPrice)
                            })
                        }
                    }
                })
            }
            amount += parseFloat(tempCourseFee + musicClassFee)
            if (!this.courseScheduleStatus) {
                marketPrice += parseFloat(musicClassFee)
            }
            if (parseFloat(tempCourseFee + musicClassFee) > 0) {
                buyList.unshift({
                    name: '乐团课',
                    type: paymentPatternType[this.paymentPattern],
                    price: Number((tempCourseFee + musicClassFee).toFixed(2))
                })
            }
            // 辅件
            if (this.accessOries.length > 0) {
                let tempAccessPrice = 0
                this.accessOries.forEach(item => {
                    if (item.checked) {
                        tempAccessPrice += parseFloat(item.price)
                        amount += parseFloat(item.price)
                        if (item.goodsList && item.goodsList.length > 0) {
                            item.goodsList.forEach(childGoods => {
                                marketPrice += parseFloat(childGoods.marketPrice)
                            })
                        }
                        goodsGroupIds[item.id] = 'ACCESSORIES'
                    }
                })
                if (tempAccessPrice > 0) {
                    buyList.push({
                        name: '辅件',
                        type: '团购',
                        price: tempAccessPrice
                    })
                }
            }
            // console.log(amount)
            let tempGroupPurchasePrice = amount
            // 判断减去优惠金额，是否大于0(这里有可能出现负数)
            if (amount - couponPrice >= 0) {
                amount = Number((amount - couponPrice).toFixed(2))
                this.errorPrice = false
            } else {
                amount = 0
                this.errorPrice = true // 订单金额是否异常
            }

            if (amount - tempCourseFee - musicClassFee > 0) {
                ids.push(1, 2)
            }
            if (parseFloat(tempCourseFee + musicClassFee) > 0) {
                ids.push(3, 4, 5)
            }
            this.ids = ids
            // 计算是否使用过余额
            if (this.payType) {
                let tempPrice = Number((amount - this.balance).toFixed(2))
                if (tempPrice > 0) {
                    this.needPrice = tempPrice
                } else {
                    this.needPrice = 0
                }
            } else {
                this.needPrice = Number(amount.toFixed(2))
            }
            this.buyList = buyList
            this.orderInfo = {
                amount: Number(amount.toFixed(2)),
                marketPrice: Number(marketPrice.toFixed(2)),
                groupPurchasePrice: tempGroupPurchasePrice,
                couponPrice: couponPrice,
                goodsGroupIds: goodsGroupIds,
                goodsIds: goodsIds.join(','),
                contractGoodsIds: contractGoodsIds,
                courseKeys: courseKeys,
                musicClassFee: musicClassFee
            }
        },
        permission(str){
            return permission(str)
        }
    },
};
</script>
<style lang="less" scoped>

.noticeInfo {
    h2 {
        font-size: 18px;
        color: #1a1a1a;
        padding-bottom: 10px;
    }

    position: relative;
    background: #fff;
    padding: 15px 16px 10px;
    font-size: 14px;
    color: #808080;
}

.protocolbtn {
    margin: 35px 0;
    background: #14928a;
    color: #fff;
    font-size: 18px;
    border-radius: 50px;
    text-align: center;
    width: 100%;
}

.line_bottom {
    border-bottom: 1px solid #ededed;
}

.line_top {
    border-top: 1px solid #ededed;
}

.section {
    padding: 16px 16px 10px;
    background: #fff;
    margin-bottom: 10px;

    >.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;
        }
    }
}

.options {

    // padding-top: .08px;
    .oc {
        border-bottom: 1px solid #ededed;

        &:last-child {
            border-bottom: 0;
            // margin-top: 0.08px;
            padding-top: 9px;
        }
    }

    .protocol {
        padding-left: 20px;
        font-size: 10px;
        line-height: 14px;
    }

    &.classInfo {
        .option .o_ft {
            color: #1a1a1a;
        }
    }

    &.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;
        padding: 10px 5px 5px;

        .o_hd {
            display: flex;
        }

        .o_bd {
            color: #1a1a1a;
            flex: 1;
            font-size: 16px;

            .c {
                font-size: 12px;
            }
        }

        .o_ft {
            font-size: 16px;
            color: #fa101d;

            del {
                color: #aaaaaa;
                font-size: 12px;
            }
        }

        .o_ft_price,
        .o_ft_price del {
            font-size: 16px;
            color: #1a1a1a;
        }

        .check_default {
            margin-right: 8px;
            display: block;
            width: 18px;
            height: 18px;
            background-color: #e9eaef;
            border-radius: 50%;

            &.check_active {
                background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
                background-size: contain;
            }
        }
    }
}

.configuration {
    padding-bottom: 9px;

    .config_line {
        display: flex;
        justify-content: space-between;

        .content {
            width: 70%;
            text-align: right;
        }

        .title {
            font-size: 14px;
            color: #808080;

            span {
                padding-left: 26px;
            }
        }
    }

    .config_other {
        .title {
            // background:rgba(246,246,246,1);
            // height: 1px;
            position: relative;

            // margin: .15px 0;
            span {
                // position: absolute;
                // left: .12px;
                // top: -.09px;
                font-size: 14px;
                color: #808080;
                margin-left: 17px;
                display: inline-block;
                background-color: #fff;
                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;
        }
    }
}

.disabled {
    opacity: 0.7;
}

.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: #f85043;
        border-radius: 100px;
        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);
}

.countDownContent {
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #ccc;

    .van-count-down {
        display: inline;
        color: #f00;
    }
}

.loadingOrder {
    width: 90%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-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;
}

.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: 2px 0;

    del {
        font-size: 14px;
        color: #aaa;
        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;
    }
}
</style>