zhywpt-sp/pages/recharge/recharge.vue

<template>
  <view class="wrapper">
    <view class="account">
      <image :src="`${$imgUrl}common/bg-recharge.png`" class="head-bg"></image>
      <view class="account-text">
        <view class="balance">
          <!-- <text class="balance-tit">账户余额</text> -->
          <!-- <text class="balance-val">20.00元</text> -->
        </view>
        <view class="right-box">
          <view class="no">账户编号：000100</view>
          <view class="btn btn-record">账户充值记录</view>
        </view>
      </view>
    </view>
    <view class="input-box">
      <input placeholder="请输入金额" class="input" />
      <view class="tips">最低充值金额不小于10元</view>
    </view>
    <view class="tabs">
      <view class="tab-tit">在线充值</view>
      <view class="tab">
        <view class="item">50元</view>
        <view class="item active">100元</view>
        <view class="item">200元</view>
        <view class="item">300元</view>
        <view class="item">500元</view>
        <view class="item">1000元</view>
      </view>
    </view>
    <view class="btn btn-primary" @click="rechargeAction">立即充值</view>
  </view>
</template>

<script setup lang="ts">
import { stringToJson } from "@/utils/network/encryption";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  quanCheck,
  quanApply,
  quanXf,
  cardCzPayResultCheck,
  cardCzApply,
  cardCzPay,
  cardCzPayResult,
  cardCzXFCheck,
  quanConfirm,
  wechatAppID,
  wechatPayConfigId,
  wechatSecret,
} from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { reactive } from "vue";
import { msg } from "@/utils/utils";
import { getItem, StorageKeys, setItem } from "@/utils/storage";

const datas = require("../../static/etcUtil/datas.js");
const bluetoothUtil = require("../../static/etcUtil/index.js");
const cmd = require("../../static/etcUtil/cmdConfig.js");
const tools = require("../../static/etcUtil/tools.js");

const state = reactive({
  openid: "",
  connectSuccess: undefined,
  fee: 1,
  orderNum: "",
  cardId: "", //卡号 需要传参
  mockpreBalance: 2000, //fix:模拟余额 目前没有检测状态接口，第一次会模拟圈层检测来检测状态
});

const card = reactive({
  cardId: "",
  netId: "",
  cardType: "",
  startTime: "",
  endTime: "",
  userName: "",
  idNum: "",
  vehiclePlate: "",
  vehiclePlateColor: "",
  color: "",
  version: "",
  type: "",
  favourable: "",
  money: undefined,
  v_userType: "",
});
onLoad((option) => {
  /*获取openId 用途:（用户支付）*/
  getOpenID();
  /*传参*/
  state.cardId = option.cardId;
  state.connectSuccess = option.connectSuccess;
  state.orderNum = getItem("orderNum");
  if (state.connectSuccess === "1") {
    /*读卡*/
    getCardId();
  }
});

/*点击充值按钮*/
const rechargeAction = () => {
  /*进行圈层检测，此处检测仅为校验圈层状态来决定去哪里*/
  console.log("进行圈层检测");
  quanCheckAction().then((val: any) => {
    //如果 圈层检测正常
    if (val.chargeStatus === 1) {
      console.log(`进行充值检测`);
      czCheckAction().then((checkResult: any) => {
        //判断订单逻辑如果有订单充值 则直接拿到订单去链接蓝牙
        if (checkResult.orders && checkResult.orders.length > 0) {
          //拿到订单,存起来
          state.orderNum = checkResult.orders[0].orderNum;
          setItem("orderNum", state.orderNum);

          //链接蓝牙
          uni.navigateTo({
            url: `/pages/bluetooth/bluetooth?routeType=2&&cardId=${state.cardId}`,
          });
        } else {
          console.log(`进行充值申请`);
          cardCzApplyAction().then((applyResult: any) => {
            //拿到订单 存起来
            state.orderNum = applyResult.orderNum;
            setItem("orderNum", state.orderNum);
            //如果订单没有支付 走支付
            if (applyResult.orderStatus === "ORDER_NOT_PAY") {
              //走支付
              console.log("走支付");
              wxPayment();
            }
          });
        }
      });
    } else {
      //走蓝牙进行修复
      uni.navigateTo({
        url: `/pages/bluetooth/bluetooth?routeType=2&&cardId=${state.cardId}`,
      });
    }
  });
};

/*读卡*/
const getCardId = () => {
  console.log("======获取卡信息======");
  let cmdArr = [
    cmd.HOME_DIRECTORY,
    //选择主目
    cmd.APPLICATION_DIRECTORY,
    //选择文件1001--DF01联网收费应用目录
    cmd.CMD_READBINARY,
    //15文件--卡片发行基本数据文件
    cmd.CMD_GETBALANCE,
    //钱包
  ];
  tools.showLoadingAlert("正在执行指令");
  bluetoothUtil.transCmd(cmdArr, "10", function (res) {
    tools.hideLoadingAlert();
    //10：写卡   20：写OBU
    let str = res[2].substring(res[2].length - 4, res[2].length);
    let str3 = res[3].substring(res[3].length - 4, res[3].length);
    if (str == "9000" || str3 == "9000") {
      if (res[2].length > 86 || res[3] >= 12) {
        card.cardId = res[2].substring(20, 40); //卡号
        card.startTime = res[2].substring(40, 48);
        card.endTime = res[2].substring(48, 56);
        card.version = res[2].substring(18, 19) >= 4 ? "4x" : "2x";
        card.netId = res[2].substring(20, 24);
        card.cardType = res[2].substring(28, 29) == 23 ? 1 : 2;
        card.vehiclePlateColor = parseInt(res[2].substring(82, 84), 16);
        (card.money = parseInt(parseInt(res[3].substring(0, 8), 16), 10)),
          console.log("======卡信息======", card);

        if (card.cardId !== state.cardId) {
          msg("设备卡信息与当前充值卡号不匹配，请核对卡号");
          return;
        }
        quanCheckActionTrue().then((val) => {
          checkQuanCengEvent(val);
        });
      } else {
        console.error("CMD_READBINARY指令长度不符" + res[2]);
        tools.hideLoadingAlert();
      }
    }
    console.error("CMD_READBINARY指令长度不符" + res[2]);
    tools.hideLoadingAlert();
  });
};
const checkQuanCengEvent = (val: any) => {
  if (val.chargeStatus === 1) {
    let cmdArr = val.command.split(",");
    uni.showLoading({
      title: "写入中",
    });
    bluetoothUtil.transCmd(cmdArr, "10", function (res) {
      let response = res.toString();
      var dic = {
        command: val.command,
        cosResponse: response,
      };
      uni.hideLoading();
      cardCzXFCheckAction().then((xfRes) => {
        quanApplyAction(dic).then((value) => {
          console.log("圈层申请完后的结果");
          console.log(value);
          //圈存初始化验证通过 , 进行圈存
          if (value.commandType === 2) {
            uanConfirmAction(value).then((confirmResult) => {
              msg("充值成功");
            });
          } else {
            msg("圈存初始化指令验证失败, 重新初始化");
          }
        });
      });
    });
  } else {
    let cmdArr = val.command.split(",");
    uni.showLoading({
      title: "写入中",
    });
    bluetoothUtil.transCmd(cmdArr, "10", function (res) {
      var status = res[1].substring(res[1].length - 4, res[1].length);
      console.log("打印状态");
      console.log(status);
      if (status === "9000") {
        console.log("修复指令入参");
        let response = res.toString();
        var dic = {
          command: val.command,
          cosResponse: response,
          rechargeId: val.rechargeId,
        };
        quanFixAction(dic).then((value) => {
          console.log(value);
          console.log("修复结果返回");
          var fixStatus = value.fixStatus;
          //圈存修复COS指令Response信息不足,重新进行修复初始化
          if (fixStatus === 3) {
            let xfcmdArr = value.command.split(",");
            bluetoothUtil.transCmd(xfcmdArr, "10", function (resValueData) {
              var status = resValueData[1].substring(
                resValueData[1].length - 4,
                resValueData[1].length
              );
              console.log("打印状态");
              console.log(status);
              if (status === "9000") {
                console.log(resValueData);
                var valueResponse = resValueData.toString();
                console.log(response);

                var applyDic = {
                  command: value.command,
                  cosResponse: valueResponse,
                  rechargeId: value.rechargeId,
                };
                console.log("消费成功");
                quanApplyAction(applyDic).then((applyValue) => {
                  uanConfirmAction(applyValue).then((confirmResult) => {
                    msg("充值成功");
                  });
                });
              }
            });
          } else if (fixStatus === 2) {
            uanConfirmSucessAction(value).then((confirmResult) => {
              msg("充值成功");
            });
          } else if (fixStatus === 1) {
          }
        });
        uni.hideLoading();
      }
    });
  }
};

/*透传*/
const transCmd = (cmd) => {
  bluetoothUtil.transCmd(cmd, "10", function (res) {
    var status = res[1].substring(res[1].length - 4, res[1].length);

    if (status === "9000") {
      return res.toString();
    }
  });
};

/*圈层检测 -假数据校验*/
const quanCheckAction = () => {
  var data = {
    cardId: state.cardId, //卡号
    fee: state.fee,
    preBalance: state.mockpreBalance, //假余额
    tradeType: 14,
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  return new Promise(async (resolve, reject) => {
    const res = await request(quanCheck, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};
const quanCheckActionTrue = () => {
  console.log("进行真实圈层检测");
  var data = {
    cardId: card.cardId,
    fee: state.fee,
    preBalance: card.money,
    tradeType: 14,
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  return new Promise(async (resolve, reject) => {
    const res = await request(quanCheck, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};

/*充值消费*/
const cardCzXFCheckAction = () => {
  var data = {
    cardId: card.cardId, //修复初始化的指令
    openId: getItem(StorageKeys.OpenId), //修复初始化结果
    orderNum: state.orderNum, //充值流水号
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  return new Promise(async (resolve, reject) => {
    const res = await request(cardCzXFCheck, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};
/*圈存修复*/
const quanFixAction = (val) => {
  var data = {
    command: val.command, //修复初始化的指令
    cosResponse: val.cosResponse, //修复初始化结果
    rechargeId: val.rechargeId, //充值流水号
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  return new Promise(async (resolve, reject) => {
    const res = await request(quanXf, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};
/*圈层申请*/
const quanApplyAction = (data) => {
  var form = {
    cardId: card.cardId,
    fee: state.fee,
    preBalance: card.money,
    tradeType: 14,
    command: data.command,
    cosResponse: data.cosResponse,
    orderId: state.orderNum,
    rechargeId: data.rechargeId,
  };
  const options = {
    type: 2,
    data: form,
    method: "POST",
    showLoading: true,
  };

  return new Promise(async (resolve, reject) => {
    const res = await request(quanApply, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};
/*圈层确认*/
const uanConfirmAction = (data) => {
  console.log("圈层确认进入");
  let cmdArr = data.command.split(",");
  console.log(cmdArr);
  bluetoothUtil.transCmd(cmdArr, "10", function (res) {
    console.log("圈层透传");
    console.log(res);
    var arraylenth = res.length;
    var status = res[arraylenth - 1].substring(
      res[arraylenth - 1].length - 4,
      res[arraylenth - 1].length
    );
    console.log("打印圈层确认指令状态");
    console.log(status);
    if (status === "9000") {
      var form = {
        command: data.command,
        cosResponse: res.toString(),
        rechargeId: data.rechargeId,
        paidAmount: state.fee,
        giftAmount: 0,
      };
      const options = {
        type: 2,
        data: form,
        method: "POST",
        showLoading: true,
      };
      return new Promise(async (resolve, reject) => {
        const res = await request(quanConfirm, options);
        const data = stringToJson(res.bizContent);
        resolve(data);
      }).catch((error) => {
        reject(error);
      });
    }
  });
};

const uanConfirmSucessAction = (data) => {
  var form = {
    command: data.command,
    cosResponse: "9000",
    rechargeId: data.rechargeId,
    paidAmount: state.fee,
    giftAmount: 0,
  };
  const options = {
    type: 2,
    data: form,
    method: "POST",
    showLoading: true,
  };
  return new Promise(async (resolve, reject) => {
    const res = await request(quanConfirm, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};

/*充值检测*/
const czCheckAction = () => {
  var form = {
    cardId: state.cardId,
    openId: getItem(StorageKeys.OpenId),
  };
  const options = {
    type: 2,
    data: form,
    method: "POST",
    showLoading: true,
  };

  return new Promise(async (resolve, reject) => {
    const res = await request(cardCzPayResultCheck, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};
/*充值申请*/
const cardCzApplyAction = () => {
  var data = {
    cardId: state.cardId,
    openId: getItem(StorageKeys.OpenId),
    rechargeMoney: state.fee,
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  return new Promise(async (resolve, reject) => {
    const res = await request(cardCzApply, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};

//获取微信小程序openid
const getOpenID = () => {
  uni.login({
    provider: "weixin",
    success: function (e) {
      wx.request({
        url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
        success: (res: any) => {
          state.openid = res.data.openid;
        },
      });
    },
    fail: function () {
      msg("获取不到oppenId，请检查AppID和Secret是否争取");
    },
  });
};

//掉起微信支付
const wxPayment = () => {
  // #ifdef MP-WEIXIN
  const options = {
    type: 2,
    data: {
      openId: getItem(StorageKeys.OpenId),
      wxOpenId: state.openid,
      cardId: state.cardId,
      orderNum: state.orderNum,
      payConfigId: wechatPayConfigId,
      body: "储值卡充值",
    },
    method: "POST",
    showLoading: true,
  };
  request(cardCzPay, options).then((res) => {
    const data = stringToJson(res.bizContent);
    uni.requestPayment({
      provider: "wxpay",
      orderInfo: "",
      timeStamp: data.timestamp,
      nonceStr: data.noncestr,
      package: data.wxPackage ?? "",
      signType: data.signType,
      paySign: data.sign,
      success: function () {
        //回调订单状态
        console.log("回调订单状态");
        checkOrder();
      },
      fail: function (err) {
        confirm(err, () => {}, "支付失败", false);
      },
    });
  });
  // #endif
};

//支付成功改变订单状态
const checkOrder = () => {
  const options = {
    type: 2,
    data: {
      cardId: state.cardId,
      openId: getItem(StorageKeys.OpenId),
      orderNum: state.orderNum,
    },
    method: "POST",
    showLoading: true,
  };
  request(cardCzPayResult, options).then((res) => {
    const data = stringToJson(res.bizContent);
    if (data.tradeState === "SUCCESS")
      uni.navigateTo({
        url: `/pages/bluetooth/bluetooth?routeType=2&&cardId=${state.cardId}`,
      });

    console.log(data);
  });
};
</script>

<style>
.account {
  height: 224rpx;
  width: 690rpx;
  margin: 30rpx;
  position: relative;
}

.account .account-text {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 50rpx;
  height: 100%;
}

.account .balance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #ffffff;
}

.account .balance-tit {
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.account .balance-val {
  font-size: 56rpx;
}

.account .right-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.account .right-box .no {
  font-size: 26rpx;
  color: #ffffff;
}

.account .right-box .btn {
  font-size: 26rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  height: 42rpx;
  line-height: 42rpx;
  color: #28d20f;
  background: #ffffff;
  border-radius: 21rpx;
  display: inline-block;
  margin-top: 18rpx;
}

.account .head-bg {
  width: 690rpx;
  height: 224rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -99;
}

.input-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
}

.input-box .input {
  width: 430rpx;
  height: 98rpx;
  line-height: 98rpx;
  background: #f8f8f8;
  border: 1px solid #999999;
  border-radius: 6rpx;
  font-size: 30rpx;
  text-align: center;
}

.input-box .tips {
  color: #666666;
  font-size: 26rpx;
  margin-top: 18rpx;
}

.tabs {
}

.tabs .tab-tit {
  font-size: 30rpx;
  color: #333;
  padding: 45rpx 0 22rpx 30rpx;
}

.tabs .tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.tabs .tab .item {
  width: 210rpx;
  height: 100rpx;
  background: #f6fff7;
  border: 1px solid #dcdde1;
  box-sizing: border-box;
  line-height: 100rpx;
  border-radius: 6rpx;
  text-align: center;
  margin-bottom: 24rpx;
  color: #333333;
  font-size: 32rpx;
}

.tabs .tab .item.active {
  border: 1px solid #24cc49;
  color: #24cc49;
}

.btn-primary {
  width: 670rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #ffffff;
  margin: 200rpx 40rpx 0;
  text-align: center;
}
</style>