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

<!--
 * @Date: 2023-03-14 09:32:37
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-03-14 11:35:43
 * @FilePath: \TelpoH5FrontendWeb\src\views\package-buy\index.vue
 * @description:
-->
<template>
    <div class="package-buy-container">
        <van-nav-bar :left-arrow="false" :border="true">
            <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: {
    //   获取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);
        this.price = data.packagesPrice;
        this.wxPay(data,1);
    },
    // 购买基础套餐
    onBuyBase(data) {
        console.log("基础包", data);
        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;
        let reqBody = {
            openId: this.$store.getters.openId, //openId
            imei: that.$route.query.imei, //imei
            productId: orderData.packagesId, //套餐id
            packageName:
            orderData.productModel + "," + orderData.packagesName, //套餐名字
            packagePayType: '1', //支付类型, 默认微信
            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);
                }
                let wxData = res.data.data;
                let outTradeNo = wxData.out_trade_no;
                that.outTradeNo = wxData.out_trade_no;
                //this.checkWxPayResult(outTradeNo);
                //this.closeTime();
                // 调起微信支付收银台
                wx.chooseWXPay({
                    timestamp: wxData.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
                    nonceStr: wxData.nonceStr, // 支付签名随机串，不长于 32 位
                    package: wxData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: wxData.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
                    paySign: wxData.paySign, // 支付签名
                    success: function(res) {
                        console.log("微信支付成功::", res);
                        if(packageType === 1) {
                            // 加油包不用跳转，直接提示支付成功
                            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
                                }
                            });
                        }
                    },
                    fail: err => {
                        console.log("支付出错了::", err);
                        that.$dialog.confirm({
                            title: "支付失败",
                            message: "出错了，请您联系管理员"
                        });
                    },
                    cancel: function(err) {
                            // 用户取消支付
                            that.$dialog.confirm({
                                message: "您取消了支付"
                            });
                        }
                    });
            })
            .catch(error => {
                console.log("error", error);
            })
    },
     // 跳转到支付宝花呗外部链接
    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
                productId: this.payProductId, //套餐id
                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();
                });
    },
  },
  created() {
   /*  this.getAuth(); */
    this.getWxAutograph();
    //  套餐列表
    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>