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>
                </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 }}元/月（约合34.5元/课时）                    
            </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 == 1)">
                <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 == 0) || result.payMethod == 26"> 
                <div v-for="con in instrument.config" :key="con.name" class="oc" @click="instrumentF2('default')">
                    <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" @click="instrumentF2('self')">
                    <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>

        <!-- <form role="form" method="post" target="_bank" :action="form.host" id="onSubmit">
            <input type="hidden" name="apiContent" v-model="form.apiContent" >
            <input type="hidden" name="merNo" v-model="form.merNo" >
            <input type="hidden" name="notifyUrl" v-model="form.notifyUrl" >
            <input type="hidden" name="sign" v-model="form.sign" >
            <input type="hidden" name="signType" v-model="form.signType" >
            <input type="hidden" name="timestamp" v-model="form.timestamp" >
            <input type="hidden" name="version" v-model="form.version" >
        </form> -->

         <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="buy">购买</a>
        </div>
    </div>
</template>

<script>
import { home } from '../mockjs/payment'
import {instruments, baseInfo } from '../assets/front_instruments_config'
import qs from 'qs'
export default {
    name: 'home',
    data() {
        return {
            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 = {
                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_, // 课程组
            }
            this.instrument = instruments[this.cnToEn(this.result.voicyPart)]
            // 初始化计算金额
            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) {
            // 专门针对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()
        },
        buy() {
            // 确认购买
            //   console.log('buy')
            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
            }
            // 辅件是否有选中的
            if(this.orderInfo.auxiliarie) {
                resultParams.adjunct = this.orderInfo.auxiliarie
            }

            axios.post('/yqpay/toPay', qs.stringify(resultParams)).then((res) => { 
                let result = res.data
                if(res.data) {
                    this.form = result.data
                    this.onSubmit()
                    // document.querySelector('#onSubmit').submit()
                    // window.location.href = `${f.host}?apiContent=${f.apiContent}&merNo=${f.merNo}&notifyUrl=${f.notifyUrl}&sign=${f.sign}&singType=${f.singType}&timestamp=${f.timestamp}&version=${f.version}`
                }
            })
        },
        onSubmit() {
            // submit 提交
            let f = this.form
            // console.log(this)
            // debugger
            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()
            // window.location.href = `${f.host}?apiContent=${f.apiContent}&merNo=${f.merNo}&notifyUrl=${f.notifyUrl}&sign=${f.sign}&singType=${f.singType}&timestamp=${f.timestamp}&version=${f.version}`
        },
        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,
                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.$router.push({ path: 'protocol', query: {
                protocol: JSON.stringify(protocol)
            }})
        },
        cnToEn(type) {
            let arr = {
                 '长笛': 'flute',
                 '单簧管': 'clarinet',
                 '萨克斯管': 'saxophone',
                 '小号': 'trumpet',
                 '长号': 'trombone',
                 '圆号': 'horn',
                 '上低音号': 'upperBass',
                 '小军鼓': 'snareDrum'
            }
            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 == 1) {
                                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
            }
        }
    }
}
</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;
        }
        .indate {
            font-size: .12rem;
            padding: .06rem 0;
            display: flex;
            // justify-content: space-between;
            justify-content: flex-end;
            border-bottom: 1px solid #ededed;
            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: .12rem;
                color: #FA101D;
                del {
                    color: #AAAAAA;
                    font-size: .11rem;
                }
            }
            .check_default {
                margin-right: .08rem;
                display: block;
                width: .14rem;
                height: .14rem;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABK0lEQVQ4T6WSP0vDQBjGn3MIiYX+CbhYG7BR7CL5ANmS2SWQ7H4DZ3ed/QbuOcjinGz5ANGloqmQ2i5CmhZqQgZPLjRQFYS2N9297/t73+fuHoK15bruASHkijF2AeB0lXohhDwwxu4cx/moy0m9oZRaAO5VVW0qioJ2u12lsixDkiSI43gB4NK2bY/HK5BDoihSXdf3Wq0WZrMZPpfLCtxvNNDpdDCfzxGG4VdRFDaHyUreq2maTUmS8DYaoSzL9RtAEAQc9/vI8xy+7y8YYyeEUnqjquq1pml4Hg7/QHUHDp8NBoiiiMu+5RMfDcM45wXv4/GPSb8PR71eFQqC4ImDuWVZ4nQyQZqm/4KyLOOw24XnecVO4HZSd3kc7pbNv2NrA+xkuRrexOTfqpPUy7sW3D4AAAAASUVORK5CYII=) no-repeat center;
                background-size: contain;
                &.check_active {
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABaUlEQVQ4T2NkQAKHPD1F2TmYChgZGHwZGBlUwVL/GW7/Z2DY/PPHvwl227e/hilnhDFOBXoHMbKxzhd18eATtnNg4FJQBEt9e3Cf4e2hAwyv9+z49P/X70Sz9VvXgcTBGkGa2EREVqtU1jFxSUgy/F+1geHf6bNgjUymxgyMYQEM3148Z7jT3vTv15s3oSDNjCDncfKx39Fs7+Xj+vWX4U9YAgPDo8fIPmBgkJNlYFm1gOEbGzPD9criT98//VRhPB3o2yrq5V0lFx3H8MfCBVMTzAiQ5hN7GB4tXcTwctvmNsZTgd6XNDt6dbmOn2X4W1CBahMaj3lCB8M3S2OG6xXFlxlPBXl/N16+juNfURXD/6Wr8GpkjA5jYOprYzgbGfSDAo1wp55j+FtQTsCpnQzfLI0gTiU7cMiODuwJYD3Dv9PnoAnAiIExLBAzAVCU5GCawc7mYCn4z/APJZEzMjBt/v7jD0oiBwAFDdbhAm8qEQAAAABJRU5ErkJggg==) no-repeat center;
                    background-size: contain;
                }
            }
        }
    }

    .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: .1rem;
                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;
        }
    }
</style>