TelpoH5FrontendWeb/src/views/package-buy/index.vue

<!--
 * @Date: 2023-03-14 09:32:37
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-05-07 13:28:01
 * @FilePath: \TelpoH5FrontendWeb\src\views\package-buy\index.vue
 * @description:
-->
<template>
    <div class="package-buy-container">
        <van-nav-bar :left-arrow="true" title="套餐订购" :border="true" @click-left="onNavBack">
            <!-- <template #title>
                <h5 style="font-size: 16px">套餐订购</h5>
            </template> -->
        </van-nav-bar>
        <!-- 套餐内容 -->
        <div class="package-container">
            <van-tabs type="line" v-model="active" color="#1890ff" background="#fafafa" swipeable line-width="20%"
                line-height="4px">
                <van-tab title="加油包">
                    <div class="refuel-package" v-if="refuelPackageList.length > 0">
                        <div class="refuel-item" v-for="(item, index) in refuelPackageList" :key="index">
                            <div class="title">
                                <p>{{ item.packagesName }}</p>
                            </div>
                            <div class="bottom">
                                <span>
                                    {{ item.packagesPrice }}
                                    <span class="price-span">元</span>
                                </span>
                                <div class="btn-button" @click="onBuyRefuel(item)">
                                    <p>立即订购</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="data-null" v-else>
                        <img src="@/assets/img/news-noData.png" alt />
                        <span>暂无加油包</span>
                    </div>
                </van-tab>
                <van-tab title="基础套餐">
                    <div class="base-package" v-if="basePackageList.length > 0">
                        <div class="base-item" v-for="(item, index) in basePackageList" :key="index">
                            <div class="base-item-content">
                                <!-- <div class="title">
                                    <p>{{item.packagesName}}</p>
                                </div>-->
                                <div class="remark">
                                    <p>每月200分钟通话时长，1G流量</p>
                                </div>
                                <div class="details">
                                    <p>
                                        <span class="orange large">￥{{ (item.packagesPrice / (item.packageIssue === 0 ?
                                            1 :
                                            item.packageIssue)).toFixed(0) }}</span>元/月，
                                    </p>
                                    <p class="total">
                                        <span>合计</span>
                                        <span class="orange price">{{ item.packagesPrice }}元</span>
                                    </p>
                                </div>
                                <div class="radios-con">
                                    <div class="pay-type">
                                        <p>支付方式：</p>
                                    </div>
                                    <van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange">
                                        <van-radio name="1">
                                            <template #default>
                                                <div class="radio-con">
                                                    <span>微信</span>
                                                    <img src="../../assets/wx-pay.png" />
                                                </div>
                                            </template>
                                        </van-radio>
                                        <van-radio name="2">
                                            <template #default>
                                                <div class="radio-con">
                                                    <span>支付宝</span>
                                                    <img src="../../assets/alipay.png" />
                                                </div>
                                            </template>
                                        </van-radio>
                                        <van-radio name="3">
                                            <template #default>
                                                <div class="radio-con">
                                                    <span>12期花呗</span>
                                                    <img src="../../assets/antpay.png" />
                                                </div>
                                            </template>
                                        </van-radio>
                                    </van-radio-group>
                                </div>
                                <div class="package-buy">
                                    <div class="buy-btn" @click="onBuyBase(item)">
                                        <p>套餐订购</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="data-null" v-else>
                        <img src="@/assets/img/news-noData.png" alt />
                        <span>暂无基础套餐</span>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import APICore from "@/api/core";
import APIWx from "@/api/wx";
import AppId from "@/config/appId";
import { APIPay } from "@/api/pay";
let wx = require("weixin-js-sdk"); // TODO 再封装，可拦截错误提示等操作
export default {
    name: '',
    data() {
        return {
            basePackageList: [], //基础套餐
            refuelPackageList: [], //加油包
            outTradeNo: "", //订单号
            price: "", //价格,
            isShowNoData: false, //是否显示无套餐内容, 默认false
            radio: '1', //支付方式单选按钮默认值
            payProductId: null, //套餐id
            packageIssue: null, //套餐分期
            payType: '1', //支付方式 1 微信， 2 支付宝，支付宝又分为花呗和全额支付，全额支付分期数传0 或者1 ，花呗则传 3 6 12
            active: 0, //tabs默认选择的下标
        }
    },
    methods: {
        onNavBack() {
            this.$router.replace({
                name: "cardInfo",
                query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: true, isHasCode: true }
            });
        },
        //   获取core token
        getAuth() {
            let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
            APICore.getAuth({ manufactorId: manufactorId }).then(res => {
                this.$store.commit("gatewayToken", res.data.data);
            });
        },
        // 获取微信授权
        getWxAutograph() {
            let that = this;
            return new Promise((resolve, reject) => {
                APIWx.createJSSDK({
                    sUrl: window.location.href.split("#")[0],
                    userId: '',
                    appId: AppId
                })
                    .then(res => {
                        let item = res.data.data;
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: item.appId, // 必填，公众号的唯一标识
                            timestamp: item.timeStamp, // 必填，生成签名的时间戳
                            nonceStr: item.nonceStr, // 必填，生成签名的随机串
                            signature: item.signature, // 必填，签名
                            jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
                        });

                        wx.ready(() => {
                            resolve(true);
                        });
                    })
                    .catch(err => {
                        reject(false);
                        console.log(err);
                    });
            });
        },
        // 获取套餐列表数据
        getDevicePayPackage() {
            this.$toast.loading({
                message: "加载中",
                duration: 1500
            });
            APICore.devicePayPackage(this.$route.query.imei)
                .then(res => {
                    console.log("data", res.data);
                    if (res.data.code === 106 || res.data.code === 104) {
                        // token过期
                        this.getAuth();
                        setTimeout(() => {
                            this.getDevicePayPackage();
                        }, 1500);
                    } else if (res.data.code === 0 && res.data.data === null) {
                        this.isShowNoData = true;
                    } else {
                        if (res.data.data === null) {
                            this.isShowNoData = false;
                        } else {
                            let data = res.data.data.packagesList;
                            // 处理获取套餐的逻辑
                            // 筛选 基础套餐，producModelId 1 是基础套餐；2 是加油包
                            this.basePackageList = data.filter(item => {
                                return item.producModelId === 1
                            });
                            this.refuelPackageList = data.filter(item => {
                                return item.producModelId === 2
                            });
                        }
                        this.$toast.success({
                            message: "加载完成",
                            duration: 1500
                        });
                    }
                })
                .catch(error => {
                    this.$dialog.confirm({
                        title: "获取套餐数据失败",
                        message: error.message,
                        showCancelButton: false,
                    });
                })
                .finally(() => {
                    setTimeout(() => {
                        this.$toast.clear();
                    }, 1500);
                });
        },
        // 购买加油包
        onBuyRefuel(data) {
            console.log("加油包", data);
            if (!this.isWeChat) {
                return this.$dialog.confirm({
                    message: '请用微信客户端打开此页。',
                    showCancelButton: false,
                })
            }
            this.price = data.packagesPrice;
            this.wxPay(data, 1);
        },
        // 购买基础套餐
        onBuyBase(data) {
            console.log("基础包", data);
            console.log("isWeChat", this.isWeChat);
            if (!this.isWeChat) {
                return this.$dialog.confirm({
                    message: '请用微信客户端打开此页。',
                    showCancelButton: false,
                })
            }
            this.price = data.packagesPrice;
            let payTypeToPackAgeId = data.payTypeList;
            if (this.payType == '2') {
                // 全额
                this.payProductId = payTypeToPackAgeId.filter(item => {
                    return item.payType == '2'
                })[0].productId;
                this.packageIssue = 0;
                console.log("this.payProductId", this.payProductId);
                this.aliPay(data);
            } else if (this.payType == '3') {
                // 分期
                this.payProductId = payTypeToPackAgeId.filter(item => {
                    return item.payType == '3'
                })[0].productId;
                this.packageIssue = 12;
                this.payType = '2';
                console.log("this.payProductId2", this.payProductId);
                this.aliPay(data);
            } else {
                // 微信
                let openId = this.$store.getters.openId;
                this.payProductId = payTypeToPackAgeId.filter(item => {
                    return item.payType == '1'
                })[0].productId;
                this.packageIssue = 0;
                console.log("this.payProductId3", this.payProductId);
                if (openId === null || openId === 'null') {
                    this.$dialog.confirm({
                        message: '获取OpenId失败，请您重新进入',
                        showCancelButton: false,
                    })
                } else {
                    this.wxPay(data);
                }
            }
        },
        // 支付类型切换
        onRaidoChange(value) {
            console.log("选择的支付类型是", value);
            this.payType = value;
        },
        // 微信支付
        wxPay(data, packageType) {
            let that = this;
            const orderData = data;
            console.log("orderData", orderData);
            let reqBody = {
                openId: this.$store.getters.openId, //openId
                imei: that.$route.query.imei, //imei
                iccid: that.$route.query.iccid,
                productId: orderData.payTypeList[0].productId, //套餐id
                packageName:
                    orderData.productModel + "," + orderData.packagesName, //套餐名字
                packagePayType: '1', //支付类型, 默认微信
                pkId: data.packagesCardId,
                packageIssue: orderData.packageIssue, //分期
                packagePrice: orderData.packagesPrice * 100
            };
            // 1.获取微信预下单Id
            APICore.payLiveBaseDevice(reqBody)
                .then(res => {
                    if (res.data.code === 104 || res.data.code === 106) {
                        this.getAuth();
                        setTimeout(() => {
                            this.wxPay(orderData);
                        }, 1000);
                    } else if (res.data.code !== 0) {
                        return this.$dialog.confirm({
                            message: `请反馈给一线人员,\n${res.data.message},或者请您重新进入`,
                            showCancelButton: false
                        })
                    }
                    let wxData = res.data.data;
                    let outTradeNo = wxData.out_trade_no;
                    that.outTradeNo = wxData.out_trade_no;
                    //this.checkWxPayResult(outTradeNo);
                    //this.closeTime();
                    // 调起微信支付收银台
                    this.onWxPay(wxData, packageType);
                })
                .catch(error => {
                    console.log("error", error);
                })
        },
        onWxPay(data, packageType) {
            let that = this;
            function onBridgeReady() {
                WeixinJSBridge.invoke(
                    "getBrandWCPayRequest",
                    {
                        appId: AppId, //公众号ID，由商户传入
                        timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
                        nonceStr: data.nonceStr, //随机串
                        package: data.package,
                        signType: data.signType, //微信签名方式：
                        paySign: data.paySign //微信签名
                    },
                    function (res) {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            if (packageType === 1) {
                                // 加油包不用跳转，直接提示支付成功
                                // 2023.06.09 修改充值成功提示如下:
                                that.$toast.success({
                                    message: '充值成功，请重启设备后，恢复正常使用。'
                                });
                            } else {
                                that.$router.replace({
                                    name: "payResult",
                                    query: {
                                        outTradeNo: that.outTradeNo,
                                        price: that.price,
                                        rechargeUrl: data.rechargeUrl,
                                        iccid: that.$route.query.iccid,
                                        isAdmin: that.$route.query.isAdmin || false,
                                        serialNo: that.$route.query.imei,
                                        issue: that.packageIssue
                                    }
                                });
                            }
                        } else {
                            let cancelMessage = packageType === 1 ? '立即订购' : '套餐订购'
                            that.$dialog.confirm({
                                message: `请点击“${cancelMessage}”支付`,
                                showCancelButton: false
                            });
                        }
                    }
                );
            }
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener(
                        "WeixinJSBridgeReady",
                        onBridgeReady,
                        false
                    );
                } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
                    document.attachEvent(
                        "onWeixinJSBridgeReady",
                        onBridgeReady
                    );
                }
            } else {
                onBridgeReady();
            }
        },
        // 跳转到支付宝花呗外部链接
        aliPay(data) {
            console.log("选择了支付宝::", data);
            this.$toast.loading({
                message: "加载中"
            });
            let orderData = data;
            let that = this;
            let reqBody = {
                openId: this.$store.getters.openId, //openId
                imei: that.$route.query.imei, //imei
                iccid: that.$route.query.iccid,
                productId: this.payProductId, //套餐id
                pkId: data.packagesCardId,
                packageName: /* data.productModel + ',' +  */data.packagesName, //套餐名字
                packagePayType: Number(this.payType), //支付类型
                packageIssue: this.packageIssue, //分期
                packagePrice: process.env.NODE_ENV === "production" ? data.packagesPrice * 100 : 1 //总金额单位为分，测试环境写死
            };
            this.$toast.clear();
            APICore.payLiveBaseDevice(reqBody)
                .then(res => {
                    if (res.data.code === 104 || res.data.code === 106) {
                        this.getAuth();
                        setTimeout(() => {
                            this.aliPay(orderData);
                        }, 1000);
                    }
                    let alipayData = res.data.data.xmlStrMap;
                    that.outTradeNo = alipayData.outTradeNo;
                    let alipayForm = decodeURI(alipayData.payXmlStr);
                    that.$store.commit("isFromWx", true);
                    let alipayUserId = process.env.NODE_ENV === "production" ? 42 : 18;
                    this.$router.replace({
                        name: "payResult",
                        query: {
                            rechargeUrl:
                                data.rechargeUrl ||
                                `https://id.ssjlai.com/frontend/#/alipay`,
                            outTradeNo: that.outTradeNo,
                            price: that.price,
                            alipayForm: alipayForm,
                            iccid: that.$route.query.iccid,
                            isAdmin: that.$route.query.isAdmin || false,
                            serialNo: that.$route.query.imei,
                            alipayUserId: alipayUserId,
                            productId: this.payProductId
                        }
                    });
                })
                .catch(error => {
                    console.log("error", error);
                    this.$dialog.confirm({
                        message: `${error.message}`,
                        showCancelButton: false
                    })
                })
                .finally(() => {
                    this.$toast.clear();
                });
        },
    },
    computed: {
        isWeChat() {
            const ua = window.navigator.userAgent.toLowerCase();
            return /micromessenger/.test(ua);
        }

    },
    created() {
        //  套餐列表
        this.getDevicePayPackage();
    },
}
</script>
<style lang="scss">
.package-buy-container {
    .van-tabs {
        min-height: 100vh;
        background: #fafafa;

        &.blue {
            background: #1890ff !important;
        }

        .van-tabs__wrap {
            height: 50px;
            width: 100%;

            .van-tabs__nav {
                .van-tab {
                    @include center();
                    padding: 0;

                    span {
                        color: #333333;
                        font-size: 16px;
                        padding: 4px;
                    }

                    &.van-tab--active {
                        span {
                            color: #1890ff;
                            font-weight: 500;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style scoped lang="scss">
.package-buy-container {
    height: 100vh;
    overflow: hidden;

    .package-container {
        height: calc(100vh - 88px);
        background: #fafafa;

        .refuel-package {
            height: calc(100vh - 88px);
            padding: 10px 20px;
            overflow: scroll;

            .refuel-item {
                padding: 10px;
                margin-bottom: 20px;
                background-color: #fff;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
                border-left: 3px solid #1890ff;
                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
                    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

                p,
                span {
                    font-size: 16px;
                }

                .title {
                    text-align: left;
                    padding-top: 10px;
                    font-weight: 500;
                }

                .tips {
                    margin-top: 10px;

                    p {
                        font-size: 14px;
                    }
                }

                .bottom {
                    padding-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    span {
                        font-size: 20px;
                        color: #fca842;
                        font-weight: bold;

                        .price-span {
                            margin-left: 5px;
                            font-size: 14px;
                        }
                    }

                    .btn-button {
                        height: 35px;
                        width: 100px;
                        @include center();
                        background-color: #fca842;
                        border-radius: 17px;

                        p {
                            font-size: 14px;
                            color: #fff;
                        }
                    }
                }
            }
        }

        .base-package {
            height: calc(100vh - 88px);
            position: relative;

            .base-item {
                margin: 10px;
                z-index: 999;
                box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
                    rgba(14, 30, 37, 0.32) 0 2px 16px 0;
                padding: 15px 10px;
                background-color: #fff;

                /* border-radius: 5px; */
                .title {
                    display: flex;
                    justify-content: flex-start;

                    p {
                        font-size: 16px;
                        font-weight: bold;
                    }
                }

                .details {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    p {
                        height: 40px;
                        @include center();
                        font-size: 14px;
                        padding: 5px 0 5px 10px;
                    }

                    .total {
                        font-size: 16px;
                        padding: 0;
                    }

                    .orange {
                        color: orange;
                    }

                    .large {
                        font-size: 26px;
                        margin: 0 2px;
                    }

                    .price {
                        font-size: 16px;
                    }

                    /* .buy-btn {
                            height: 30px;
                            width: 100px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: orange;
                            border-radius: 45px;
                            p {
                                font-size: 16px;
                                padding: 0;
                                color: red;
                            }
                        } */
                }

                .remark {
                    display: flex;
                    justify-content: flex-start;

                    p {
                        font-size: 14px;
                        padding: 5px 10px;
                        /* font-weight: bold; */
                    }
                }

                .package-buy {
                    @include center();
                    padding: 5px 8px;

                    .buy-btn {
                        height: 40px;
                        width: 200px;
                        padding: 0 5px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: orange;
                        border-radius: 20px;

                        p {
                            font-size: 16px;
                            padding: 0;
                            color: white;
                        }
                    }
                }

                .radios-con {
                    /* padding: 20px 10px; */
                    /* @include center(); */
                    /* align-items: center; */
                    padding: 10px 0 10px 10px;
                    font-size: 14px;

                    /* box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
                                rgba(14, 30, 37, 0.32) 0 2px 16px 0; */
                    img {
                        height: 20px;
                        width: 20px;
                        margin: 2px;
                    }

                    .pay-type {
                        text-align: left;

                        p {
                            font-size: 14px;
                            padding: 0 0 10px 0;
                        }
                    }

                    .radio-con {
                        @include center();
                    }

                    .van-cell-text {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        span {
                            font-size: 14px;
                            padding: 0 5px;
                        }
                    }
                }
            }

            .content {
                font-size: 14px;
            }
        }

        .data-null {
            height: calc(100vh - 88px);
            @include center();
            flex-direction: column;

            span {
                font-size: 14px;
            }
        }
    }
}
</style>