TelpoH5FrontendWeb/src/views/AliPayIndex.vue

<!--
 * @Date: 2022-01-19 16:52:21
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-03-04 11:19:26
 * @FilePath: \AntpayFrontEnd\src\views\AliPayIndex.vue
 * @description:
-->
<template>
    <div class="index-container">
        <!-- 头部banner -->
        <div class="index-banner">
            <img class="img-contanier" :src="goodsData.imgPath"/>
        </div>
        <!-- 中间内容 -->
        <div class="index-body">
            <p  class="set-meal-title">月套餐费: <span class="set-meal-price">￥{{ (goodsData.price/goodsData.count).toFixed(2) }}</span> x <span>{{goodsData.count}}期</span> <span v-show='isAmountShow'> = ￥{{goodsData.price}}</span></p>
            <p class="index-tips">{{switchPayType}}:</p>
            <!-- 花呗or支付宝 -->
            <van-radio-group  class="radio-group" v-model="radio" @change="onRadioChange">
                <van-cell-group>
                    <!-- 支付宝 -->
                     <van-cell  title="" clickable @click="radio = '1'" v-show="isAlipayShow">
                        <template #icon>
                            <img :src="alipayIconPath" alt="" class="pay-icon">
                        </template>
                        <template #right-icon>
                            <span class="radio-group-span">支付宝</span>
                            <van-radio name="1" />
                        </template>
                    </van-cell>
                     <!-- 花呗 -->
                    <van-cell title="" clickable @click="radio = '2'">
                        <template #icon>
                            <img :src="antpayIconpath" alt="" class="pay-icon">
                        </template>
                        <template #right-icon>
                            <span class="radio-group-span">花呗<label>(推荐)</label></span>
                            <van-radio name="2" />
                        </template>
                    </van-cell>
                    <!-- 花呗分期 -->
                    <div class="antpay-container" v-show="isAntpay">
                        <van-row>
                            <van-col span="6" class="antpay-row-col-6"><p>花呗分期:</p></van-col>
                            <van-col span="18" class="antpay-row-col-18">
                                <van-radio-group v-model="antPayRadio" @change="onChange">
                                    <van-button  type="default" size="mini" v-for="(item) in countList" :key="item.value">
                                        <van-radio :name="item.value">
                                            <p>分{{item.value}}期</p>
                                            <p>每期{{ (goodsData.price/item.value).toFixed(2) }}元</p>
                                        </van-radio>
                                    </van-button>
                                </van-radio-group>
                            </van-col>
                        </van-row>
                    </div>
                </van-cell-group>
            </van-radio-group>
            <!-- 我要开通花呗 -->
            <p class="open-antpay" @click="onOpenAntpay">我要开通花呗</p>
            <!-- 协议 -->
            <p class="agreement" @click="onOpenAgreement">{{agreement.title}}</p>
            <!-- 协议内容 -->
            <van-dialog
            class="agreement-container"
            v-model="agreement.show"
            :title="agreement.title"
            confirm-button-color="#1989fa"
            :show-confirm-button="false"
            >
                <div class="agreement-content">
                    <h5>一.开通需知及承诺</h5>
                    <p v-show="isNewCustom">1.感谢用户使用支付宝花呗分期功能。</p>
                    <p v-show="isNewCustom">2.用户自愿开通4G电子学生证资费套餐服务({{goodsData.count}}<!-- 24 -->期)每月自动通过支付宝花呗分期支付资费(话费+流量)套餐费{{(goodsData.price/goodsData.count).toFixed(2)}}元/月。</p>
                    <p v-show="isNewCustom">3.用户需连续使用该资费套餐24期，可据此领取4G电子学生证1台、电话卡1张。</p>
                    <p style="white-space: pre-wrap"><span v-show="isNewCustom">4.</span>{{goodsData.description}}</p>
                    <p v-show="isOldCustom">5.协议期内，电子学生证非人为损坏或进水按“三包”政策进行免费维修或更换。如丢失或人为损坏，按优惠价重新购买。</p>
                    <p v-show="isOldCustom">6.北京随手精灵科技有限公司接受电子学生证运营销售商委托采用支付宝花呗分期付代收业务货款。</p>
                    <h5>二．用户承诺</h5>
                    <p>1.用户已充分了解支付宝花呗付款条款（含支付宝花呗相关规则），充分阅读及理解本协议。</p>
                    <p>2.用户已经签署业务订购回执，自愿购买并同意签署本协议。</p>
                    <h5>三．法律适用与管辖</h5>
                    <p>本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国法律。因本协议产生的争议，均应依照中华人民共和国法律予以处理。</p>
                    <p v-show="!agreement.isButtonShow">{{agreement.countDown}}秒后显示按钮</p>
                    <div class="agreement-button" v-show="agreement.isButtonShow">
                        <van-button type="warning" @click="onDisAgree" round>不同意</van-button>
                        <van-button type="info" @click="onAgree" round>同意</van-button>
                    </div>
                </div>
            </van-dialog>
        </div>
        <!-- 底部 -->
        <div class="index-footer-out">
            <div class="index-footer">
                <div class="checkbox-container" v-show="!isChunyu">
                    <van-checkbox v-model="checked" shape="square" @change="onCheckChange"><strong>已阅读协议并确认</strong></van-checkbox>
                </div>
                <div class="footer-button">
                    <van-button :class="['van-button', {notSubmit: !checked && !isChunyu}]" block  @click="onSubmit">{{submitText}}</van-button>
                </div>
            </div>
        </div>
        <!-- 非支付宝浏览器提示弹窗 -->
        <van-dialog v-model="isAlipayBrowser" title="提示您切换支付宝扫码！"
        :show-cancel-button="false"
        :show-confirm-button="false"
        confirm-button-color="#1989fa"
        className="alipay-dialog"
        :close-on-click-overlay="true">
           <p>1.如果已安装支付宝，请打开支付宝扫码。</p>
           <p>2.如果未安装支付宝，请到应用商店下载。
               <span v-show="!isAndroid" @click="onDownAlipay" class="down">点击前往应用商店下载</span>
               <span v-show="isAndroid">或复制 {{alipayDownUrl.android}}
               [<span @click="onCopy" class="copy-span">点击复制
               </span>],粘贴到浏览器打开下载页面。</span></p>
               <p class="close-text">点击屏幕任意地方关闭弹窗</p>
        </van-dialog>
    </div>
</template>

<script>
import { isNotNull, isAlipayBrowser, isAndroid } from "../utils/index";
import { APIAlipay } from "../api/alipay";
import { IMAGE_URL, USER_AGENT, ALIPAY_DOWN_URL} from '../config/models';
/* import { CUSTOMIZE_SERVICE } from '../config/customize'; */
export default {
  name:'alipay-index',
  data(){
   return {
    //    商品数据
       goodsData: {
           imgPath: null /* || require('../assets/banner_03.jpg') */, //首页图片路径
           price: null, //价格
           count: null, //分期数
           defCount: null, //默认分期数
           amount: 480, //总数
           isOld: null, //是否是老用户
           description: null, //商品描述
           defDescription: '电子学生证套餐两年内（24个月）内含每月200分钟通话和1.5G流量，超出通话或流量部分，由用户自行交费。', //默认协议内容
           payType: null, //支付类型, 2是花呗, 1 是支付宝
           name: null, //商品名称
       },
       radio: '2', //单选框的值,默认是 '2', 2是花呗, 1支付宝
       antPayRadio: '', //花呗分期,默认24期
       antpayIconpath: require('../assets/antpay.png'), //花呗支付图片
       alipayIconPath: require('../assets/alipay.png'), //支付宝图片
       checked: false, //是否已经勾选协议
       isAlipayShow: false, //是否显示支付宝选项
       goodsNo: '', //商品id
       countList: null, //分期数数组
       isAmountShow: true, //是否显示总数, 默认显示,部分客户不需要显示则false
       isAntpay: true, //单选是否是花呗, 默认是花呗,否则是支付宝
       agreement: {
           title: '4G电子学生证资费套餐开通服务协议', //协议标题
           show: false, //是否显示协议内容,默认不显示
           isButtonShow: false, //是否显示按钮
           timer: '', //定义一个倒计时
           countDown: 3, //同意/不同意按钮显示倒计时
       },
       isNewCustom: true, //是否是新用户
       isOldCustom: false, //是否是新用户
       checkCount: 0, //首次点击同意协议单选框
       isAlipayBrowser: !isAlipayBrowser(USER_AGENT), //是否是支付宝浏览器
       isAndroid: isAndroid(USER_AGENT), //用户设备是否是android
       alipayDownUrl: ALIPAY_DOWN_URL, //支付宝app下载链接
       isChunyu: null, //是否是春雨
       submitText: '一键下单' , //submit文字, 默认 一键下单, 可根据客户需求变化
       switchPayType: '可切换支付方式', //默认 可切换支付方式, 可根据客户需求变化

   }
  },
  mounted() {
      this.storeQueryParams();
      this.getGoodsDetails();
  },
  methods: {

    //   缓存通过扫码得到的商品id
    storeQueryParams() {
        let params = this.$route.query;
        this.initDealContent(params.goodsNo);
        console.log("扫码传过来的参数", params);
        if(isNotNull(params.goodsNo)) {
            this.goodsNo = params.goodsNo;
            this.$store.commit('goodsNo', params.goodsNo);
            this.$store.commit('userId', params.userId);
        } else {
            this.$router.push({path: '/404'})
        }
    },
    // 初始化协议内容，根据不同客户的商品id显示不同的协议内容
    initDealContent(goodsNo) {
        if(goodsNo === '1452515524181975040') {
            this.isAlipayShow = true;
        } else if(goodsNo === '1462964210433548288' || goodsNo === '1472882092902715392' || goodsNo === '1479390914305277952') {
            this.isAmountShow = false;
        } else if (goodsNo === '1483687825375969280') { //翼校云定制的商品id
            this.agreement.title = '电子学生证AI套餐开通服务协议';
            this.isNewCustom = false;
            this.isAmountShow = true;
        } else if (goodsNo === '889') {
            this.isChunyu = true;
            this.submitText = '下一步';
            this.switchPayType = '支付方案'
        }
        else {
            this.isAmountShow = true;
        }
    },
    //   根据商品id获取商品详情
    getGoodsDetails() {
        APIAlipay.getGoodsDetails(this.goodsNo)
            .then(res => {
                if(res.data.code === 20000) {
                    let good = res.data.data.goods;
                    console.log("good", good);
                    // 图片路径
                    this.goodsData.imgPath = IMAGE_URL[ process.env.NODE_ENV ] + good.goodsImg;
                    // 价格
                    this.goodsData.price = good.price;
                    // 是否是老用户
                    this.isOld = good.descriptionText === '' ? true : false;
                     // 商品名称
                     this.goodsData.name = good.mainTitle;
                    //商品描述 根据\n换行符来把数据进行换行
                    this.goodsData.description = good.descriptionText === '' ? this.goodsData.defDescription : good.descriptionText.replace(/\\n/g,"<br/>");
                    // 分期数
                    let goodCount = good.periodizationJson.substring(1, good.periodizationJson.length - 1).split(',');
                    this.goodsData.goodCount = Math.max(...goodCount);
                    this.goodsData.defCount = Math.max(...goodCount).toString();
                    this.antPayRadio = Math.max(...goodCount).toString();
                    this.countList = goodCount.map(g => {
                        return {
                            value: g,
                            label: g
                        }
                    }).reverse();
                    console.log("this.countList", this.countList);
                } else {
                    this.$notify({
                        message: '系统出现错误,请联系管理员!',
                        type: 'warning',
                        duration: 1000
                    });
                }
            })
    },
    // 单选支付宝花呗发生变化时
    onRadioChange(values) {
        this.isAntpay = values === '2' ? true : false;
        this.radio = values;
        this.goodsData.payType = Number(values);
    },
    // 选择分期数改变时
    onChange(values) {
        this.goodsData.count = values;
    },
    // 我要开通花呗弹窗
    onOpenAntpay() {
        this.$dialog.confirm({
            title: '如何开通花呗?',
            message: `
            <p>进入支付宝APP-右下角【我的】-【花呗】,点击后按页面提示操作开通即可。</p>
            `,
            showCancelButton: false,
            messageAlign: 'center',
            confirmButtonColor: '#1989fa'
        })
    },
    // 打开协议
    onOpenAgreement() {
        this.agreement.show = true;
        this.checkCount ++;
        if(this.checkCount <= 1) {
            this.agreement.timer = setInterval(() =>{
                this.agreement.countDown --;
                if(this.agreement.countDown === 0) {
                    this.agreement.isButtonShow = true;
                    clearInterval(this.agreement.timer);
                    this.agreement.countDown = 3;
                }
            },1000)
        } else if(this.checkCount >= 2){
            this.agreement.isButtonShow = true;
        }
    },
    // 复选框绑定值变化时
    onCheckChange() {
        if(this.checkCount < 1) {
            // 首次选择复选框自动打开协议
            this.onOpenAgreement();
            this.checkCount ++;
        } else if (this.checkCount >= 2) {
            this.agreement.isButtonShow = true;
        }
    },

    // 不同意
    onDisAgree() {
        this.checked = false;
        this.resetCountDown();
    },
    // 同意
    onAgree() {
        this.checked = true;
        this.resetCountDown();
    },
    // 重置倒计时和关闭弹窗
    resetCountDown() {
        this.agreement.show = false;
        this.agreement.isButtonShow = false;
        clearInterval(this.agreement.timer);
        this.agreement.countDown = 3;
    },
    // 一键下单提交按钮
    onSubmit() {
        if(this.checked === false && !this.isChunyu) {
            this.$notify({
                message: `请阅读并勾选同意${this.agreement.title}`,
                type: 'warning',
                duration: 1500
            })
        }else if( this.isChunyu ) {
            this.$router.push({path: 'chunyuForm', query: {isAmountShow: this.isAmountShow}})
        }
        else {
            this.$router.push({path: 'form', query: {isAmountShow: this.isAmountShow}})
        }
    },
    // 点击下载支付宝app
    onDownAlipay() {
        window.location.href = this.alipayDownUrl.ios;
    },
    // 复制网址
    onCopy() {
        let oInput = document.createElement('input');
        oInput.value = this.alipayDownUrl.android;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$toast.success('已复制到粘贴板!');
        oInput.remove()
    }
  }
}
</script>

<style scoped lang="scss">
    .index-container {
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: rgba(241, 241, 245, 0.932) 0px 30px 60px -12px inset, rgba(239, 242, 243, 0.884) 0px 18px 36px -18px inset;
        .index-banner{
            height: 40vh;
            width: 100vw;
            padding: 5px 5px 0 5px;
            .img-contanier {
                height: calc(40vh - 5px);
                width: calc(100vw - 10px);
            }
        }
        .index-body {
            flex: 1;
            margin: 0 5px 5px 5px;
            padding: 0 10px 10px 10px;
            overflow: scroll;
            box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
            .set-meal-title {
                font-size: 16px;
                text-align: left;
                padding: 5px 0 5px 0;
                .set-meal-price {
                    font-size: 24px;
                    color: red;
                }
            }
            .index-tips {
                font-size: 16px;
                text-align: left;
                margin: 5px 0;
            }
            .van-cell {
                height: 45px;
                line-height: 45px;
                padding: 0;
                border: 0.5px solid #dcdee2;
                border-radius: 10px;
                margin-top: 10px;
            }
            .radio-group {
                .radio-group-span {
                    padding-right: 5px;
                    label {
                        color: red;
                    }
                }
                .antpay-container {
                    height: 50px;
                    line-height: 50px;
                    /* padding: 5px 0; */
                    background-color: white;
                }
                .van-row, .antpay-row-col-18{
                    height: 50px;
                    line-height: 50px;
                    .antpay-row-col-6 {
                        p {
                            text-align: left;
                            font-size: 16px;
                        }
                    }
                    .antpay-row-col-18 {
                        display: flex;
                        /* justify-content: center;
                        align-items: center; */
                        line-height: 40px;
                        .van-radio-group {
                            overflow-x: auto;
                            white-space: nowrap;
                        }
                        .van-radio-group::-webkit-scrollbar {
                            display: none;
                        }
                        .van-button {
                            height: 40px;
                            width: 120px;
                            display: inline-block;
                            border-radius: 5px;
                        }
                    }
                }
            }
            .open-antpay, .agreement {
                height: 20px;
                line-height: 20px;
                text-decoration:underline;
                text-align: left;
                font-size: 14px;
                margin: 5px 0px;
            }
            .open-antpay {
                color: red;
            }
            .agreement {
                margin: 5px 0px;
            }
            .agreement-container {
                .agreement-content {
                    height: 500px;
                    padding: 5px 10px;
                    border-top: .5px soild;
                    border-bottom: .5px soild;
                    text-align: left;
                    overflow: scroll;
                    h5 {
                        padding: 5px;
                    }
                    p {
                        padding: 5px;
                        font-size: 14px;
                        line-height: 20px;

                    }
                    .agreement-button {
                        padding: 10px;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        .van-button {
                            height: 30px;
                            width: 120px;
                            border-radius: 10px;
                        }
                    }
                }
            }
            .pay-icon {
                height: 30px;
                width: 30px;
                margin: 5px;
            }
        }
        .index-footer-out, .index-footer {
            height: 15vh;
            width: 100vw;
            padding: 10px 10px ;
            .index-footer {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 999;
                display: flex;
                justify-content: center;
                flex-direction: column;
                .checkbox-container {
                    margin: 5px 0;
                }
                .footer-button {
                    /* box-shadow: rgb(217, 218, 219) 0 20px 30px -15px; */
                    .van-button {
                        background-color: #1989fa;
                        color: white;
                        border-radius: 5px;
                        &.notSubmit {
                            background-color: rgba(150, 150, 146, 0.904);
                        }
                    }
                }
            }
        }
        .alipay-dialog {
            p {
                padding: 10px;
                line-height: 20px;
                text-align: left;
                font-size: 14px;
            }
            .down {
                display: block;
                color: #1989fa;
                text-decoration: #1989fa;
            }
            .copy-span {
                color: red;
            }
            .close-text {
                text-align: center;
            }
        }
    }
</style>