wxdaya/src/views/Home.vue

<template>
    <div class="home">
        <header>乐团注册</header>

        <div class="section">
            <h2 class="title line_bottom">课程</h2>
            <!-- <p class="indate" v-if="result.payMethod >= 26" key="indate-price"><span>现价:￥{{ result.classAmount }}</span></p> -->
            <div class="options" v-if="result.payMethod >= 26" 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">
                        现价:￥{{ result.classAmount }}
                    </span>
                </div>
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">乐团合奏训练</div>
                </div>
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">基础技能训练</div>
                </div>
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">假期集中训练</div>
                </div>
            </div>

            <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="result.payMethod >= 26">
                <i class="trumpet_icon"></i>年度安排十个月训练，共计168课时，120元/课时，原价20160元，现仅支付{{ result.classAmount }}元/月（约合{{ (result.classAmount * 10 / 168).toFixed(2) }}元/课时）                    
            </div>
        </div>

        <div class="section">
            <h2 class="title line_bottom">乐器</h2>

            <div class="options" v-if="result.payMethod == 21 || result.payMethod == 22 || result.payMethod > 26 || (result.payMethod == 25 && !result.isCopperPipe)">
                <div v-for="(con, index) in instrument.config" :key="con.name" :class="[ instrument.config.length > 1 ? 'oc' : '' ]" @click="instrumentF(index)">
                    <div class="option">
                        <div class="o_"><i class="check_default" :class="[ con.checked ? 'check_active' : '' ]"></i></div>
                        <div class="o_bd" v-if="con.marketPrice > 0" key="name">{{ instrument.name }}-<span class="c">{{ con.name }} </span></div>
                        <div class="o_bd" v-else key="name">{{ con.name }}</div>
                        <span class="o_ft" v-if="con.marketPrice > 0">
                            <del>原价:￥{{ con.marketPrice }}</del> 现价:￥{{ con.referencePrice }}
                        </span>
                    </div>

                    <div class="configuration" v-if="con.marketPrice > 0">
                        <div class="config">
                            <div class="title"><span>配置参数</span></div>
                            <div class="content">
                                <p>{{ instrument.configuration }} {{ con.texture}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="options" v-if="(result.payMethod == 25 && result.isCopperPipe) || result.payMethod == 26"> 
                <div v-for="con in instrument.config" :key="con.name" class="oc" @click="instrumentF2('default', con)">
                    <div class="option" v-if="con.default">
                        <div class="o_"><i class="check_default" :class="[ con.checked ? 'check_active' : '' ]"></i></div>
                        <div class="o_bd">{{ instrument.name }}-<span class="c">{{ con.name }} </span>
                        </div>
                        <span class="o_ft" v-if="result.payMethod == 25">
                            <del>原价:￥{{ con.marketPrice }}</del> 免费试用
                        </span>

                        <span class="o_ft" v-if="result.payMethod == '26'">
                            <del>原价:￥{{ con.marketPrice }}</del> 押金:￥800
                        </span>
                    </div>

                    <!-- <span class="protocol" @click="protocol"  v-if="con.default">《乐器借用协议》</span>  -->

                    <div class="configuration" v-if="con.default">
                        <div class="config">
                            <div class="title"><span>配置参数</span></div>
                            <div class="content">
                                <p>{{ instrument.configuration }} {{ con.texture}}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-for="con in instrument.config" :key="con.marketPrice" class="oc" @click="instrumentF2('self', con)">
                    <div class="option" v-if="con.marketPrice <= 0">
                        <div class="o_"><i class="check_default" :class="[ con.checked ? 'check_active' : '' ]"></i></div>
                        <div class="o_bd">{{ con.name }}
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="section">
            <h2 class="title line_bottom">辅件</h2>
            <div class="options" v-for="(instr, index) in instrument.auxiliaries" :key="instr.name" @click="auxiliarie(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.referencePrice == 0 ? '免费' : '现价:￥' + instr.referencePrice }}
                    </span>
                </div>
            </div>
        </div>

        <div class="section">
            <h2 class="title line_bottom">其它</h2>
            <div class="options" v-for="base in baseInfo.other" :key="base.name">
                <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.referencePrice == 0 ? '免费' : '现价:￥' + base.referencePrice }}
                    </span>
                </div>
            </div>
        </div>

         <div class="buy">
             <div class="price">
                 <p class="oldprice">
                     <del class="text">原价</del>
                     <del>￥{{ orderInfo.marketPrice }}</del>
                 </p>
                 <p class="now_price">
                     <span class="text">仅需支付</span>
                     <span>￥{{ orderInfo.referencePrice }}</span>
                 </p>
             </div>
             <a @click="onCheckSubmit">购买</a>
        </div>

        <van-popup id="protocolPopup" v-model="popupStatus" position="bottom">
            <protocol :proto="protocolData" @popupClose="onPopupClose"></protocol>
        </van-popup>

        <van-popup v-model="loadingOrderStatus" :close-on-click-overlay='false' class="loadingOrder">
            <van-loading size="36px" vertical  color="#14928A">{{ loadingOrderText }}</van-loading>
        </van-popup>
    </div>
</template>

<script>
// import { home } from '../mockjs/payment'
import {instruments, baseInfo } from '../assets/front_instruments_config'
import qs from 'qs'
import Protocol from './protocol'
import OrderPay from './orderPay'
import { Dialog, CountDown } from 'vant'
export default {
    name: 'home',
    components: { Protocol, Dialog, CountDown, OrderPay },
    data() {
        return {
            loadingOrderStatus: false, // 排队中状态
            loadingOrderText: '加载中...', // 排队文案
            resultParams: '', // 提交订单参数
            clickBtnCount: true, // 点击按钮次数判定
            paymentTimers: null, // 定时器
            paymentPostCount: 0, // 请求计数
            popupStatus: false, // 协议弹窗样式
            protocolData: {}, // 协议参数
            result: {}, // 返回结果
            instrument: {}, // 乐器类型
            baseInfo: {}, // 其它类
            money: 580,
            orderInfo: {
                marketPrice: 0, // 原价总金额
                referencePrice: 0, // 现价总金额
                auxiliarie: null, // 选中辅件编号
                instrumentId: null, // 乐器编号 99为自备乐器
            }, // 金额列表，金额计算
            form: {
                apiContent: '',
                host: '',
                merNo: '',
                notifyUrl: '',
                sign: '',
                signType: '',
                timestamp: '',
                version: '',
            }
        }
    },
    mounted() {
        this.baseInfo = baseInfo

        /**
         * 21 1.0
         * 22 2.0
         * 25 1.5
         * 26 3.0 */
        axios.post('/user/getUserRegisterViewDetail', qs.stringify({
            stuId: this.$route.query.stuId
        })).then((res) => {
            let r = res.data.data
            this.result = {
                userId: r.id_, // 学生编号
                payMethod: r.fee_type_,
                subName: r.sub_name_,
                grade: r.grade_,
                voicyPart: r.sub_name_.split('.')[1],
                isCopperPipe: r.isCopperPipe,
                patriarchName: r.patriarch_name_,
                patriarchPhone: r.patriarch_phone_,
                stuName: r.name_,
                stuClass: r.g_class_,
                classAmount: r.fee_amount_, // 课程费用
                course_id: r.course_id_, // 课程组
            }
            // console.log(this.orderInfo)
            this.instrument = instruments[this.cnToEn(this.result.voicyPart)]
            
            // if(r.fee_type_ == 25 || r.fee_type_ == 26) {
            //     this.instrument.config.forEach(el => {
            //         el.checked = false
            //     })
            // }

            let homeConfig = sessionStorage.getItem('homeConfig')
            if(homeConfig) {
                homeConfig = JSON.parse(homeConfig)

                this.instrument.config.forEach(config => {
                    if(config.index == homeConfig.config) {
                        config.checked = true
                    } else {
                        config.checked = false
                    }
                })

                let auxArr = homeConfig.auxiliaries.split(',')
                this.instrument.auxiliaries.forEach(aux => {
                    aux.checked = false
                    auxArr.forEach(a => {
                        if(aux.index == parseInt(a)) {
                            aux.checked = true
                        }
                    })
                })

                sessionStorage.removeItem('homeConfig') // 用完就不要了
            }

            // 初始化计算金额
            this.calcPrice()
        })

    },
    methods: {
        auxiliarie(index) {
            // 辅件切换状态
            this.instrument.auxiliaries[index].checked = !this.instrument.auxiliaries[index].checked
            // 重新计算金额
            this.calcPrice()
        },
        instrumentF(index) {
            // 乐器切换状态
            for(let i = 0; i < this.instrument.config.length; i++) {
                this.instrument.config[i].checked = false
            }
            this.instrument.config[index].checked = true
            // 重新计算金额
            this.calcPrice()
        },
        instrumentF2(type, con) {
            // 1.5 3.0 才会显示协议
            // if((this.result.payMethod == 25 || this.result.payMethod == 26) && !con.checked && con.name != '自备') {
            //     this.protocol()
            // }
            
            // 专门针对25 26 收费类型写的方法
            for(let i = 0; i < this.instrument.config.length; i++) {
                this.instrument.config[i].checked = false
                if(type == 'default' && this.instrument.config[i].default == 1) {
                    this.instrument.config[i].checked = true
                }
                if(type == 'self' && this.instrument.config[i].name == '自备') {
                    this.instrument.config[i].checked = true
                }
            }
            // 重新计算金额
            this.calcPrice()
        },
        onCheckSubmit() {
            // 判断 1.5 3.0 弹协议 否则直接购买
            let instrumentName
            this.instrument.config.forEach(config => {
                if(config.checked) {
                    instrumentName = config.name
                }
            })
            if(((this.result.payMethod == 25 && this.result.isCopperPipe) || this.result.payMethod == 26 || this.result.payMethod == 22) && instrumentName != '自备') {
                this.protocol()
            } else {
                this.buy()
            }
            
        },
        buy() {
            // 判断是否点击过
            if(!this.clickBtnCount) {
                return false
            }
            this.clickBtnCount = false

            // 确认购买
            let params = this.$route.query
            let resultParams = {
                branchId: params.branchId,
                userId: params.stuId,
                amount: this.orderInfo.referencePrice,
                courseId: this.result.course_id,
                classId: params.classId
            }
            // 判断是否是自备 或者 免费
            let iI = this.orderInfo.instrumentIndex
            if(iI && iI != 99 && iI != 0) {
                resultParams.instrument = iI
            }
            // 辅件是否有选中的
            let auxiliarieIndexArr // 辅件列表索引
            if(this.orderInfo.auxiliarie) {
                resultParams.adjunct = auxiliarieIndexArr = this.orderInfo.auxiliarie
            }
            
            // 判断乐器是否有选中
            let instrumentCount = 0
            let configIndex // 选中乐器的索引值
            this.instrument.config.forEach(config => {
                if(config.checked) {
                    instrumentCount++
                    configIndex = config.index
                }
            })

            // 保存用户选择信息保存本地
            sessionStorage.setItem('homeConfig', JSON.stringify({
                config: configIndex,
                auxiliaries: auxiliarieIndexArr 
            }))

            if(!instrumentCount) {
                Dialog.alert({
                    title: '提示',
                    message: '请选择乐器准备方式',
                    confirmButtonColor: '#269a93'
                })
                return false
            }
            this.resultParams = resultParams
            axios.post('/yqpay/toPay', qs.stringify(resultParams)).then((res) => { 
                let result = res.data
                this.clickBtnCount = true
                if(result.code == 403) {
                    this.loadingOrderStatus = true
                    this.loadingOrderText = result.msg
                    this.paymentMethods()
                } else {
                    if(result.data) {
                        this.form = result.data
                        this.onSubmit()
                    } else {
                        Dialog.alert({
                            title: '提示',
                            message: result.msg,
                            confirmButtonColor: '#269a93'
                        })
                    }
                }
            })
        },
        paymentMethods() {
            let resultParams = this.resultParams
            if(!resultParams) {
                return false
            }
            let that = this
            that.paymentTimers = setInterval(() => {
                that.paymentPostCount++
                if(that.paymentPostCount >= 30) {
                    clearInterval(that.paymentTimers)
                } else {
                    axios.post('/yqpay/toPay', qs.stringify(resultParams)).then((res) => { 
                        let result = res.data
                        if(result.code == 403) {
                            that.loadingOrderStatus = true
                            that.loadingOrderText = result.msg
                        } else {
                            clearInterval(that.paymentTimers)
                            that.loadingOrderStatus = false
                            that.loadingOrderText = '加载中...'
                            if(result.data) {
                                that.form = result.data
                                this.onSubmit()
                            } else {
                                Dialog.alert({
                                    title: '提示',
                                    message: result.msg,
                                    confirmButtonColor: '#269a93'
                                })
                            }
                        }
                    })
                }
            }, 1000 * 10)
            
        },
        onSubmit() {
            // submit 提交
            let f = this.form
            document.querySelector('#onSubmit').action = f.host
            document.querySelector('#apiContent').value = f.apiContent
            document.querySelector('#merNo').value = f.merNo
            document.querySelector('#notifyUrl').value = f.notifyUrl
            document.querySelector('#sign').value = f.sign
            document.querySelector('#signType').value = f.signType
            document.querySelector('#timestamp').value = f.timestamp
            document.querySelector('#version').value = f.version
            document.querySelector('#onSubmit').submit()
        },
        protocol() {
            // 协议

            let r = this.result
            let protocol = {
                patriarchName: r.patriarchName,
                patriarchPhone: r.patriarchPhone,
                stuName: r.stuName,
                grade: r.grade,
                subName: r.subName,
                voicyPart: r.voicyPart,
                userId: r.userId,
                classAmount: r.classAmount,
                payMethod: r.payMethod, // 缴费类型
                isCopperPipe: r.isCopperPipe // 是否为铜管
            }
            let c = this.instrument.config
            for(let i = 0; i < c.length; i++) {
                if(c[i].default) {
                    protocol.name = c[i].name
                    protocol.referencePrice = c[i].referencePrice
                    protocol.marketPrice = c[i].marketPrice
                }
            }
            this.protocolData = protocol
            this.popupStatus = true
        },
        cnToEn(type) {
            let arr = {
                 '长笛': 'flute',
                 '单簧管': 'clarinet',
                 '萨克斯管': 'saxophone',
                 '小号': 'trumpet',
                 '长号': 'trombone',
                 '圆号': 'horn',
                 '上低音号': 'upperBass',
                 '小军鼓': 'snareDrum',
                 '次中音号': 'tenorHorn',
                 '打击乐': 'idiophonic'
            }
            return arr[type]
        },
        calcPrice() {
            let version = this.result.payMethod
            // 课程金额，乐器金额，辅件金额，其它金额
            let amountSummary = {
                // 课程金额
                mClass: 0, //原价
                rClass: 0, //现价
                // 乐器金额
                mInstrument: 0, //原价
                rInstrument: 0, //现价
                // 辅件金额
                mAuxiliarie: 0, //原价
                rAuxiliarie: 0, //现价
                // 其它金额
                mOther: 0, //原价
                rOther: 0, //现价
            } // 金额汇总
            let auxiliarie, // 后台需要参数列表
                instrumentIndex // 乐器编号
            // 课程
            if(version == 21 || version == 25) {
                amountSummary.mClass = 23520
                amountSummary.rClass = 0
            }
            if(version == 22) {
                amountSummary.mClass = 23520
                amountSummary.rClass = this.result.classAmount
            }
            if(version == 26 || version > 26) {
                amountSummary.mClass = 20160
                amountSummary.rClass = this.result.classAmount
            }

            // 乐器金额
            let config = this.instrument.config
            for(let i = 0; i < config.length; i++) {
                if(config[i].checked) {
                    amountSummary.mInstrument = parseInt(config[i].marketPrice)
                    instrumentIndex = config[i].index
                    if(config[i].marketPrice == 0) {
                        amountSummary.rInstrument = 0
                    } else {
                        // 1.5 版本  免费领用乐器  
                        // 3.0 版本 押金800
                        if(version == 25) {
                            if(!this.result.isCopperPipe) {
                                amountSummary.rInstrument = parseInt(config[i].referencePrice)
                            } else {
                                amountSummary.rInstrument = 0
                                instrumentIndex = 99
                            }
                        } else {
                            amountSummary.rInstrument = version == 26 ? 800 : parseInt(config[i].referencePrice)
                        }
                    }
                }
            }

            // 辅件金额
            let auxiliaries = this.instrument.auxiliaries
            for(let i = 0; i < auxiliaries.length; i++) {
                if(auxiliaries[i].checked) {
                    amountSummary.mAuxiliarie += parseInt(auxiliaries[i].marketPrice)
                    amountSummary.rAuxiliarie += parseInt(auxiliaries[i].referencePrice)
                    // 添加选中的辅件列表
                    if(auxiliarie) {
                        auxiliarie += ',' + auxiliaries[i].index
                    } else {
                        auxiliarie = auxiliaries[i].index
                    }
                }
            }

            // 其它金额
            let base = this.baseInfo.other
            for(let i = 0; i < base.length; i++) {
                amountSummary.mOther += base[i].marketPrice
                amountSummary.rOther += base[i].referencePrice
            }

            this.orderInfo = {
                marketPrice: parseInt(amountSummary.mClass + amountSummary.mInstrument + amountSummary.mAuxiliarie + amountSummary.mOther), // 原价总金额
                referencePrice: parseInt(amountSummary.rClass + amountSummary.rInstrument + amountSummary.rAuxiliarie + amountSummary.rOther), // 现价总金额
                auxiliarie: auxiliarie,
                instrumentIndex: instrumentIndex
            }
        },
        onPopupClose(status) {
            document.querySelector('#protocolPopup').scroll(0, 0)
            this.popupStatus = false

            this.buy()
        }
    }
}
</script>

<style lang="less" scoped>
    .home {
        margin-bottom: .7rem;
    }

    header {
        height: .40rem;
        line-height: .40rem;
        color: #000;
        font-size: .17rem;
        background: #fff;
        box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
        text-align: center;
        margin-bottom: .06rem;
    }

    .section {
        padding: .16rem .22rem .1rem;
        background: #fff;
        margin-bottom: .1rem;
        .line_bottom {
            border-bottom: 1px solid #ededed;
        }
        > .title {
            font-size: .2rem;
            line-height: .28rem;
            font-weight: bold;
            padding-bottom: .05rem;
            &::before {
                content: ' ';
                width: .04rem;
                height: 0.15rem;
                background: #14928a;
                display: inline-block;
                margin-right: .07rem;
                border-radius: 8px;
            }
        }
        .indate {
            font-size: .14rem;
            padding: .06rem 0;
            display: flex;
            // justify-content: space-between;
            justify-content: flex-end;
            span {
                color: #FA101D;
            }
        }

        .coutInfo {
            font-size: .12rem;
            color: #F85043;
            text-align: left;
            border-top: 1px solid #ededed;
            padding: .12rem 0 0 .15rem;
            margin-top: .1rem;
            position: relative;
            .trumpet_icon {
                width: .14rem;
                height: .12rem;
                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: .14rem;
            }
        }
    }

    .options {
        padding-top: .08rem;
        .oc {
            &:last-child {
                border-top: 1px solid #ededed;
                margin-top: 0.08rem;
                padding-top: 0.09rem;
            }
        }
        .protocol {
            padding-left: .2rem;
            font-size: .1rem;
            line-height: .14rem;
        }
        .option {
            line-height: .26rem;
            font-size: .15rem;
            display: flex;
            align-items: center;
            position: relative;
            .o_bd {
                flex: 1;
                .c {
                    font-size: .12rem;
                }
            }
            .o_ft {
                font-size: .14rem;
                color: #FA101D;
                del {
                    color: #AAAAAA;
                    font-size: .12rem;
                }
            }
            .check_default {
                position: relative;
                margin-right: .08rem;
                display: block;
                width: .14rem;
                height: .14rem;
                border-radius: 50%;
                border: .01rem solid #D0CFCF;
                &::before {
                    position: absolute;
                    top: .01rem;
                    left: .01rem;
                    content: ' ';
                    display: inline-block;
                    width: .12rem;
                    height: .12rem;
                    background: #D0CFCF;
                    border-radius: 50%;
                }
                &.check_active {
                    border: .01rem solid #F1111B;
                    &::before {
                        background: #F1111B;
                        border-radius: 50%;
                    }
                }
            }
        }
    }

    .configuration {
        padding-right: .05rem;
        padding-bottom: .09rem;
        .title {
            background:rgba(246,246,246,1);
            height: 1px;
            position: relative;
            margin: .15rem 0;
            span {
                position: absolute;
                left: .12rem;
                top: -.09rem;
                display: inline-block;
                background-color: #fff;
                font-size: .12rem;
                padding: 0 .04rem;
            }
        }

        .content {
            font-size: .12rem;
            padding-left: .16rem;
            line-height: .22rem;
            color: #ACACAC;
        }

        .options {
            padding-top: 0;
            padding-left: .16rem;
            .option {
                font-size: .14rem;
                color: #6F6F6F;
            }
        }
    }

    .buy {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: .6rem;
        display: flex;
        align-items: center;
        padding: 0 .2rem;
        border-top: 1px solid #FFE9E9E9;
        color: #000000;
        font-size: .12rem;
        background: #fff;
        .price {
            flex: 1;
            font-size: .16rem;
            
        }
        font-size: .16rem;
        span {
            color: #FA101D;
        }
        .text {
            font-size: .12rem;
            width: .6rem;
            display: inline-block;
            color: #000;
        }
        del {
            color: #B5B5B5;
            &.text {
                color: #B5B5B5;
            }
        }

        a {
            display: inline-block;
            font-size: .18rem;
            color: #fff;
            background: #F1111B;
            border-radius: .04rem;
            box-shadow:0px 2px 4px 0px rgba(0,0,0,0.19);
            padding: .08rem .28rem;
        }
    }
    .iframe {
        width: 100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        border-top: none !important;
        min-height: calc(100vh - .41rem);
    }

    .countDownContent {
        line-height: .4rem;
        text-align: center;
        font-size: .14rem;
        border-bottom: .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;
        }
    }
</style>