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>

		<div class="section">
			<h2 class="title">{{ chargeTypeName }}</h2>
            <p style="font-size: 14px; padding: 2px 0; color: #a1a1a1" v-if="serviceValidDate">服务有效期:{{ serviceValidDate }}</p>
			<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>
			<!-- 所有不可选的课程合集 -->
			<template v-if="courseShowStatus">
				<el-row class="option-row"  v-for="(item, index) in courseShowInfo" :class="[!item.isStudentOptional ? 'disabled' : '']" :key="index" @click.native="onCourseChange(item)">
					<el-col :span="12">
						<i class="check_default" :class="[item.isStatus ? 'check_active' : '']"></i>
						<span style="display: flex; align-items: center;">
							<template v-if="item.courseType == 'PROJECT'">{{ item.name }} </template><template v-else>{{ item.courseType | coursesType }}</template>
						</span>
						<el-icon v-if="item.courseType == 'PROJECT'" class="el-icon-question" @click.native="onQuestions" />
					</el-col>
					<el-col :span="6">
						<span style="color: #1A1A1A">￥{{ item.courseCurrentPrice | moneyFormat }}</span>
					</el-col>
					<el-col :span="6">
						<del style="color: #AAA;">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
					</el-col>
				</el-row>
			</template>
			<!-- 可选课程信息集合 -->
			<template v-for="(item, index) in courseInfo">
				<el-row class="option-row" :class="[!item.isStudentOptional ? 'disabled' : '']" :key="index" @click.native="onCourseChange(item)" v-if="item.isStudentOptional">
					<el-col :span="12">
						<i class="check_default" :class="[item.isStatus ? 'check_active' : '']"></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: #1A1A1A">￥{{ item.courseCurrentPrice | moneyFormat }}</span>
					</el-col>
					<el-col :span="6">
						<del style="color: #AAA;">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
					</el-col>
				</el-row>
			</template>

			<el-row class="option-row lines">
				<el-col :span="12" class="fontBold">
					仅需支付
				</el-col>
				<el-col :span="6">
					<span class="fontBold" style="color: #f85043;">￥{{ orderInfo.musicClassFee | moneyFormat }}</span>
				</el-col>
				<el-col :span="6">
					<del class="fontBold" style="color: #f85043;">￥{{ orderInfo.musicMarketClassFee | moneyFormat }}</del>
				</el-col>
			</el-row>
		</div>

		<div class="section" v-if="instrumentResult.length > 0">
			<h2 class="title">乐器</h2>
            <div v-for="(i, index) in instrumentResultList" :key="index">
				<el-row class="title-row">
					<el-col :span="12">
						<template v-if="i[0]['kitType'] == 'GROUP'">团购乐器</template>
						<template v-if="i[0]['kitType'] == 'LEASE'">乐器租赁</template>
						<template v-if="i[0]['kitType'] == 'FREE'">免费使用</template>
						<template v-if="i[0]['kitType'] == 'owned'">自备乐器</template>
					</el-col>
					<el-col :span="5" :offset="1" style="text-align: right;">
						<template v-if="['GROUP', '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="['GROUP', 'LEASE', 'FREE'].includes(i[0]['kitType'])">原价</template>
					</el-col>
				</el-row>

				<el-row class="option-row" v-for="(con, index) in i" :key="index" @click.native="instrumentF(con)">
					<el-col :span="12">
						<i class="check_default" :class="[ con.checked ? 'check_active' : '' ]"></i>
						<div>
							{{ con.name }}
							<div v-if="con.goodsList" style="font-size: .12rem; color: #aaa">
								{{ con.goodsList[0].specification }}
							</div>
						</div>
					</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.price && con.kitType == 'FREE'">￥{{ 0 | moneyFormat }}</span>
						<span style="color: #1A1A1A" v-if="con.price && con.kitType == 'GROUP'">￥{{ Number((con.price  - con.coupon).toFixed(2)) | moneyFormat }}</span>
					</el-col>
					<el-col :span="6">
						<del style="color: #AAA;" v-if="con.kitType != 'owned'">￥{{ con.marketPrice | moneyFormat }}</del>
					</el-col>
				</el-row>
			</div>

			<el-row class="option-row lines">
				<el-col :span="12" class="fontBold">
					仅需支付
				</el-col>
				<el-col :span="6">
					<span class="fontBold" style="color: #f85043;">￥{{ orderInfo.goodsPrice | moneyFormat }}</span>
				</el-col>
				<el-col :span="6">
					<del class="fontBold" style="color: #f85043;">￥{{ orderInfo.goodsMarketPrice | moneyFormat }}</del>
				</el-col>
			</el-row>
		</div>

		<div class="section" v-if="accessOries.length > 0" key="accessOries">
			<h2 class="title">辅件</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>

			<el-row class="option-row" v-for="(instr, index) in accessOries" :key="index" @click.native="onAuxiliarie(instr)">
				<el-col :span="12">
					<i class="check_default" :class="[ instr.checked ? 'check_active' : '' ]"></i>{{ instr.name }}
				</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-col :span="6">
					<del style="color: #AAA;">￥{{ instr.goodsList[0] ? instr.goodsList[0].marketPrice : 0 | moneyFormat }}</del>
				</el-col>
			</el-row>

			<el-row class="option-row lines">
				<el-col :span="12" class="fontBold">
					仅需支付
				</el-col>
				<el-col :span="6">
					<span class="fontBold" style="color: #f85043;">￥{{ orderInfo.accessPrice | moneyFormat }}</span>
				</el-col>
				<el-col :span="6">
					<del class="fontBold" style="color: #f85043;">￥{{ orderInfo.accessMarketPrice | moneyFormat }}</del>
				</el-col>
			</el-row>
		</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, getType } from '@/api/buildTeam'
import dayjs from 'dayjs'
const paymentPatternType = {
    0: '按月',
    1: '按学期',
    2: '一次性'
}
export default {
    props: ["subjectId", "calenderId"],
    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, // 课程现价
                musicMarketClassFee: 0, // 课程原价
                accessPrice: 0, // 辅件现价
                accessMarketPrice: 0, // 辅件原价
                goodsPrice: 0, // 乐器现价
                goodsMarketPrice: 0, // 乐器原价
            }, // 金额列表，金额计算
            courseInfo: null, // 课程信息
            musicGroupSubject: null, // 基本信息
            instrumentResult: [], //乐器
            accessOries: [], // 辅件(打包)
            agreeStatus: true,
            authStatus: false,
            buyList: [], // 信息列表
            ids: [],
            chargeTypeId: null,
            paymentStatus: null,
            paymentPattern: null,
            serviceValidDate: null, // 服务时间
            courseShowStatus: false,
            chargeTypeList: [],
            chargeTypeName: null,
        };
    },
    mounted() {
        this.__init()
    },
    methods: {
        async __init() {
            // 获取数据
            let params = {
                musicGroupId: this.musicGroupId,
                subjectId: this.subjectId,
                calenderId: this.calenderId
            }
            await getType().then(res => {
                let result = res.data
                if(res.code == 200) {
                    this.chargeTypeList = result.rows || []
                }
            })

            await getSubjectGoodsAndInfoPreview(params).then(res => {
                let result = res
                if (result.code == 200) {
                    let tempResult = result.data
                    this.paymentPattern = 2
                    if(tempResult.musicGroupPaymentCalender) {
                        this.paymentPattern = tempResult.musicGroupPaymentCalender.paymentPattern
                        this.serviceValidDate = dayjs(tempResult.musicGroupPaymentCalender.paymentValidStartDate).format('YYYY/MM/DD') + '~' + dayjs(tempResult.musicGroupPaymentCalender.paymentValidEndDate).format('YYYY/MM/DD')
                    }
                    let tempInfo = tempResult.musicGroupPaymentCalender? tempResult.musicGroupPaymentCalender.musicGroupPaymentCalenderCourseSettingsList : null
                    // 判断是否有课程
                    if (tempInfo && tempInfo.length > 0) {
                        let tempCourse = {
                            courseCurrentPrice: 0,
                            courseOriginalPrice: 0,
                            courseType: null,
                            name: '乐团训练辅助系统'
                        }
                        tempInfo.forEach(info => {
                            if(!info.isStudentOptional) {
                                this.courseShowStatus = true
                                tempCourse = {
                                    courseCurrentPrice: (info.courseCurrentPrice + tempCourse.courseCurrentPrice),
                                    courseOriginalPrice: (info.courseOriginalPrice + tempCourse.courseOriginalPrice),
                                    courseType: 'PROJECT',
                                    isStatus: true,
                                    name: '乐团训练辅助系统'
                                }
                            }
                        })
                        this.courseShowInfo = [tempCourse]
                        // 默认课程都选中
                        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 = {}
                    let tempInstrument = []
                    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)
                                tempInstrument.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
                        // })
                        let owned = {
                            id: -1,
                            kitType: 'owned',
                            name: '自备乐器',
                            price: 0,
                            marketPrice: 0,
                            checked: false
                        }
                        tempInstrument.push(owned)
                        this.instrumentResult.push(owned)

                        let sorted = this.groupBy(tempInstrument, (item) => {
                            return [item.kitType];
                        });
                        this.instrumentResultList = sorted
                        this.chargeTypeList.forEach(item => {
                            if(item.id == tempResult.musicGroup.chargeTypeId) {
                                this.chargeTypeName = item.description
                            }
                        })
                    }
                }
                // 初始化计算金额
                this.calcPrice()
            })
        },
        groupBy(array, f) {
            var groups = {};
            array.forEach(function (o) {
                var group = JSON.stringify(f(o));
                groups[group] = groups[group] || [];
                groups[group].push(o);
            });
            return Object.keys(groups).map(function (group) {
                return groups[group];
            });
        },
        onQuestions() {
            this.$alert('乐团辅助训练系统描述文案--2月3号下班前才会出', '乐团训练辅助系统', {
                confirmButtonText: '确定',
                callback: action => {
                }
            });
        },
        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,
                goodsPrice = 0, // 乐器两现价
                goodsMarketPrice = 0, // 乐器原价
                goodsGroupIds = {},
                courseKeys = [],
                couponPrice = 0, // 优惠金额
                goodsIds = [],
                tempCourseFee = 0,
                musicClassFee = 0,
                musicMarketClassFee = 0,
                tempAccessPrice = 0,
                tempAccessMarketPrice = 0,
                tempGroupRemissionCourseFee = 0, // 乐团减免费用
                contractGoodsIds = '' // 合同所需要的商品Id （只需要乐器编号）
            // 课程
            let mgs = this.musicGroupSubject
            let csi = this.courseInfo
            // 加上判断是否有课程信息
            if (mgs) {
                csi.forEach(item => {
                    if (item.isStatus) {
                        musicClassFee += parseFloat(item.courseCurrentPrice)
                        musicMarketClassFee += parseFloat(item.courseOriginalPrice)
                        marketPrice += parseFloat(item.courseOriginalPrice)
                        if (item.id > 0) {
                            courseKeys.push(item.id)
                        }
                        // 不可选的课程才会减免课程费用
                        if(!item.isStudentOptional) {
                            tempGroupRemissionCourseFee += parseFloat(item.courseCurrentPrice)
                        }
                    }
                })
            }

            // 乐器
            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
                                goodsPrice += item.depositFee
                            } else {
                                amount += 0
                            }
                        } else {
                            amount += parseFloat(item.price)
                            goodsPrice += parseFloat(item.price)
                            couponPrice = item.coupon ? item.coupon : 0
                        }
                        if (item.kitType == 'LEASE') {
                            if (item.name != '自备') {
                                marketPrice += item.depositFee
                                goodsMarketPrice += item.depositFee
                            }
                        } else {
                            marketPrice += parseFloat(item.marketPrice)
                            goodsMarketPrice += 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)
                            })
                        } else if(item.kitType == 'FREE') {
                            buyList.push({
                                name: item.name,
                                type: '免费',
                                price: 0
                            })
                        }

                        // 是否减免课程费用，必须团购，并且开启了减免课程费用
                        if(item.kitType == 'GROUP' && item.groupRemissionCourseFee == 1) {
                            musicClassFee = parseFloat(musicClassFee - tempGroupRemissionCourseFee)
                        }
                    }
                })
            }
            amount += parseFloat(tempCourseFee + musicClassFee)
            // if (parseFloat(tempCourseFee + musicClassFee) > 0) {
                buyList.unshift({
                    name: '乐团课',
                    type: paymentPatternType[this.paymentPattern],
                    price: Number((tempCourseFee + musicClassFee).toFixed(2))
                })
            // }
            // 辅件
            if (this.accessOries.length > 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 => {
                                tempAccessMarketPrice += parseFloat(childGoods.marketPrice)
                                marketPrice += parseFloat(childGoods.marketPrice)
                            })
                        }
                        goodsGroupIds[item.id] = 'ACCESSORIES'
                    }
                })
                // if (tempAccessPrice > 0) {
                    buyList.push({
                        name: '辅件',
                        type: '团购',
                        price: tempAccessPrice
                    })
                // }
            }
            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,
                musicMarketClassFee: musicMarketClassFee,
                accessMarketPrice: tempAccessMarketPrice,
                accessPrice: tempAccessPrice,
                goodsPrice: goodsPrice,
                goodsMarketPrice: goodsMarketPrice
            }
        },
        permission(str){
            return permission(str)
        }
    },
};
</script>
<style lang="less" scoped>
.noticeInfo {
  line-height: 1.8;
    h2 {
        font-size: 18px;
        color: #1a1a1a;
        line-height: 28px;
        height: 26px !important;
        font-weight: bold;
    }

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

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

    >.title {
        font-size: 20px;
        line-height: 28px;
        height: 26px !important;
        font-weight: bold;

        &::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;
        }
    }
}

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

.check_default {
    margin-right: 8px;
    display: flex;
    align-items: center;
    height: 26px;
    &::before {
        display: block;
        content: ' ';
        width: 18px;
        height: 18px;
        background-color: #e9eaef;
        border-radius: 50%;
    }
    &.check_active {
        &::before {
            display: block;
            content: ' ';
            background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
            background-size: contain;
        }
    }
}

// .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;
//             }
//         }
.title-row {
    background: #F3F4F8;
    color: #1a1a1a;
    padding:5px 0 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;
    .el-col {
        display: flex;
        // align-items: center;
    }
    .el-col-6 {
        display: flex;
        justify-content: flex-end;
    }
    &.lines {
        margin-top: 5px;
        border-top: 1px solid #ededed;
    }
}

.el-icon-question {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #4d4d4d;
}

.fontBold {
    font-weight: bold;
}
</style>