wxdaya/src/views/activePay.vue

<template>
    <div class="activepay">

        <div class="coupon-section">
            <img v-if="activePrice == 777 || priceList.activePrice" src="../assets/coupon.png" alt="">
            <img v-else src="../assets/coupon2.png" alt="">
        </div>
        <p class="tip">活动详情：充值{{ showPrice }}元抵扣{{ activePrice }}元。20节课原价{{markAmount}}元，抵扣后立减{{ activePrice - showPrice }}元～仅需{{ amount }}元！
        <br/>重点：课程不设有效期，最多可购买两期课程；
        名额有限，仅限77席，先到先得，错过一次等一年！</p>
        <!-- <p class="tip">活动详情：缴费{{ showPrice }}元立刻享有 {{ activePrice }} 元现金券，仅限购买20次vip课，总价值{{ markAmount }}元；即日起至2019年11月11日 ，名额仅限77名，先到先得。</p> -->

        <div style="padding: 0 .25rem">
            <div class="btn-group">
                <div class="btn" @click="onPromotionPay">
                    <del>原价：{{ markAmount }}</del>
                    <p>现仅需：{{ amount }}</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
/* eslint-disable */
import branchRule from '@/assets/front_active'
import qs from 'qs'
export default {
    name: 'activepay',
    data() {
        return {
            userId: this.$route.query.userId,
            branchId: this.$route.query.branchId,
            priceList: {},
            activePrice: 777,
            showPrice: 11.11,
            amount: 0,
            markAmount: 0
        }
    },
    mounted() {
        // 匹配对应的规则
        branchRule.forEach(item => {
            if(item.branchId == this.branchId) {
                this.priceList = item
                if(item.branchPrice == 180) {
                    this.activePrice = 777
                    this.showPrice = item.activePrice ? item.activePrice : 11.11
                }else if(item.branchPrice == 220 || item.branchPrice == 280) {
                    this.activePrice = 1111
                    this.showPrice = item.activePrice ? item.activePrice : 111
                }

                this.markAmount = 20 * item.branchPrice
                this.amount = this.markAmount  - this.activePrice + parseFloat(this.showPrice)
            }
        })

        if(!this.priceList.branchPrice) {
            this.priceList = {
                branchId: 1030,
                branchName: '武汉分部',
                branchType: '一类',
                branchPrice: 180
            }
            this.activePrice = 777
            this.showPrice = 11.11
            this.markAmount = 20 * this.priceList.branchPrice
            this.amount = this.markAmount  - this.activePrice + parseFloat(this.showPrice)
        }
    },
    methods: {
        onPromotionPay() {
            this.$axios.post('/yqpay/promotionPay', 
                qs.stringify({ 
                    userId: this.userId, 
                    branchId: this.branchId,
                    amount: this.amount
            }) ).then(res => {
                let result = res.data
                if(result.code == 200) {
                    let f = result.data
                    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()
                } else {
                    this.$toast(result.msg)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.activepay {
    width: 100vw;
    height: 100vh;
    background: url('../assets/bg2.png') no-repeat center;
    background-size: cover;
    overflow: hidden;
}
.coupon-section {
    margin-top: 2.8rem;
    padding: 0 .35rem;
    img {
        width: 100%;
    }
}
.tip {
    padding: .22rem .35rem;
    font-size: .14rem;
    color: #FFFFFF;
}


.btn {
    padding: .05rem 0 .08rem;
    border-radius: 1rem;
    background:linear-gradient(270deg,rgba(242,209,163,1) 0%,rgba(188,130,76,1) 100%);
    border: 0;
    color: #fff;
    font-size: .14rem;
    margin-bottom: .2rem;
    text-align: center;
    del {
        font-size: .12rem;
    }
}

input, textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
}
</style>