西城购买月卡

刘淇
1 parent cc310148
Showing 8 changed files with 295 additions and 80 deletions
config/index.js
index.html
src/api/cards/cards.js
src/utils/utils.js
src/views/cards/Cards.vue
src/views/cards/buyCard.vue
src/views/cards/renew.vue
src/views/parkPay/plateNumber.vue
@@ -8,7 +8,7 @@ module.exports = {
   dev: {
  
     // Paths
-    assetsSubDirectory: 'static',
+    assetsSubDirectory: 'yueka',
     assetsPublicPath: '/',
     // proxyTable: {
     //   '/api':{
@@ -47,11 +47,11 @@ module.exports = {
  
   build: {
     // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+    index: path.resolve(__dirname, '../yueka/yueka.html'),
  
     // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
+    assetsRoot: path.resolve(__dirname, '../yueka'),
+    assetsSubDirectory: 'yueka',
     assetsPublicPath: './',
  
     /**
@@ -8,7 +8,7 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
-    <title>微信公众号</title>
+    <title>购买会员卡</title>
   </head>
   <body>
     <div id="app"></div>
@@ -115,6 +115,29 @@ export function createVipCardOrderForH5(params) {
  
  
  
+// 创建订单 购买月卡
+export function publicUnifiedOrderForH5(params) {
+  return request({
+    url: '/weixinpay/publicUnifiedOrderForH5',
+    method: 'post',
+    data: params
+  })
+}
+
+
+
+
+//   获取OpenId
+export function getOpenIdByCode(params) {
+  return request({
+    url: 'weixinPublicPay/getOpenIdByCode',
+    method: 'post',
+    data: params
+  })
+}
+
+
+
  
  
  
@@ -154,15 +154,15 @@ export default {
   // 14318527b13840c2a4af63fef52c2d6e 老的签名
   // ud8yq5tv0inxupc05xfeau39jywlqoj2  新的id
   // ny1u72b6k374sg379z0kqjgfxe2ycnpw 新的签名
-  myVarAppid: "65grtq5tv0wewec05xfeau39jyghhjm",// 公共请求Appid
+  myVarAppid: "ud8yq5tv0inxupc05xfeau39jywlqoj2",// 公共请求Appid
   myDeviceInfo: "BC0703A4-AFB0-4B51-9089-9B7487C0CC6E", // 公共请求设备信息 80ac1a4218beb19a BC0703A4-AFB0-4B51-9089-9B7487C0CC6E
-  myVxAppId: "wx1e9001e5940605b1",
+  myVxAppId: "wx78702b90dadb9586",
   // 测试环境 微信赤峰 appid   wxff4cebaedbf4f886
   // 微信赤峰 appid   wx2af2bab90d433c86
   // 黄石 appid    wxa1a66cc7d263afe6
   // 阳明 wxdfb0276f85514ea3
   // 无锡 wx1e9001e5940605b1
-  myOrgId: "10003", // 归属地 赤峰id  10003    黄石 10079  无锡10005    扬明10193  西城10007
+  myOrgId: "10007", // 归属地 赤峰id  10003    黄石 10079  无锡10005    扬明10193  西城10007
   myGetSign: function(objb) { // 获取签名
     var compare = function(obj1, obj2) {
       var val1 = obj1.keyname;
@@ -176,13 +176,13 @@ export default {
       }
     };
     objb.sort(compare);
-    var strmd5 = "dfdf2b6k37r5y79z0kqjgfxe2wet3434";
+    var strmd5 = "ny1u72b6k374sg379z0kqjgfxe2ycnpw";
     for (var i = 0; i < objb.length; i++) {
       if (objb[i].value != null && objb[i].value != "") {
         strmd5 += objb[i].keyname + objb[i].value;
       }
     }
-    strmd5 += "dfdf2b6k37r5y79z0kqjgfxe2wet3434";
+    strmd5 += "ny1u72b6k374sg379z0kqjgfxe2ycnpw";
     // console.log('strmd5-------->'+strmd5);
     strmd5 = md5(strmd5);
     strmd5 = strmd5.toUpperCase();
@@ -56,7 +56,8 @@ export default {
   name: "Cards",
   data() {
     return {
-      cardList: []
+      cardList: [],
+      custId:''
     };
   },
   mounted() {
@@ -73,7 +74,10 @@ export default {
       queryVipCardsByCarNumberForH5(jsondata).then(data => {
         console.log(data);
         if (data.code == 0) {
-
+          this.cardList = data.data
+          if(this.cardList.length>0){
+            this.custId = this.cardList[0].custId
+          }
         } else {
           this.$vux.toast.text(data.message, "top");
         }
@@ -105,7 +109,8 @@ export default {
         path:'buyCard',
         query:{
           carNumber:this.$route.query.carNumber,
-          carNumberColor: this.$route.query.carNumberColor
+          carNumberColor: this.$route.query.carNumberColor,
+          custId:this.custId
         }
       })
     }
@@ -89,13 +89,13 @@
  
     <!--<p>停车场停车场停车停车场</p>-->
     <!--</div>-->
-    <div style="padding:15px;text-align: center">
-      <check-icon :value.sync="agreement">
-      </check-icon>
-      <p style="display: inline-block;height: 23px;line-height: 23px;">我已阅读并同意 <span style="color: blue"
-                                                                                     @click="showHideOnBlur=true">《购买须知》</span>
-      </p>
-    </div>
+    <!--<div style="padding:15px;text-align: center">-->
+      <!--<check-icon :value.sync="agreement">-->
+      <!--</check-icon>-->
+      <!--<p style="display: inline-block;height: 23px;line-height: 23px;">我已阅读并同意 <span style="color: blue"-->
+                                                                                     <!--@click="showHideOnBlur=true">《购买须知》</span>-->
+      <!--</p>-->
+    <!--</div>-->
  
  
     <div style="margin-top: 34px" class="leftRightPadding">
@@ -181,7 +181,9 @@ import {
   weixinpay,
   createVipCardOrder,
   queryVipCardInfoByPlNoForH5,
-  createVipCardOrderForH5
+  createVipCardOrderForH5,
+  publicUnifiedOrderForH5,
+  getOpenIdByCode
 } from "@/api/cards/cards";
 import { timestampToTime } from "../../utils/utils.js";
 export default {
@@ -217,12 +219,21 @@ export default {
       typeNum: 4, // 卡类型判断
       showHideOnBlur: false, // 购买协议
       createVipCardOrder: {}, // 创建订单对象
-      orderId: "" // 订单号
+      orderId: "", // 订单号
+      vipCardList: {},
+      openid: "",
+      custId: ""
     };
   },
+  created() {
+    if (this.$utils.clientBrowser() == "微信") {
+      this.webAppCode = this.getCode();
+    }
+  },
   mounted() {
     this.queryParkListForVipCard();  // 获取停车场
     // this.queryUserCars();  // 获取用户车牌
+    this.custId =  this.$route.query.custId
   },
   computed: {
     // 卡类型 1-年卡；2-半年卡；3-季卡；4-月卡；5-日卡；
@@ -261,6 +272,23 @@ export default {
     }
   },
   methods: {
+    // 获取code
+    getCode() {
+      var appID = this.$utils.myVxAppId;
+      var code = this.getUrlParam("code");
+      var local = window.location.href;
+      if (code == null || code === "") {
+        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
+      } else {
+        return code;
+      }
+    },
+    getUrlParam(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return unescape(r[2]);
+      return null;
+    },
     // 获取用户绑定车牌
     queryUserCars() {
       let jsondata = this.$utils.commonParams();
@@ -336,15 +364,16 @@ export default {
       jsondata.plNo = this.parkNo;
       jsondata.cardType = "4";
       // jsondata.parkName = this.parkName;
-
       jsondata.sign = this.$utils.signObject(jsondata);
       queryVipCardInfoByPlNoForH5(jsondata).then(data => {
         console.log(data);
         if (data.code == 0) {
-
-          me.unitPrice = data.data.vipCardList[0].price
-
-
+          this.vipCardList = data.data.vipCardList[0];
+          me.unitPrice = data.data.vipCardList[0].price;
+          console.log(data.data.vipCardList[0].discValue / 10);
+          console.log(me.unitPrice * data.data.vipCardList[0].discValue);
+          me.disPrice = me.unitPrice - me.unitPrice * (data.data.vipCardList[0].discValue / 10);
+          me.needPay = me.unitPrice * (data.data.vipCardList[0].discValue / 10);
           // me.cardTypeList = [];
           // me.carType = "请点击选择";
           // // res.vipCardList =
@@ -367,8 +396,6 @@ export default {
           //   me.typeNum = vipCardList[0].cardType;
           //   me.createVipCardOrder = e;
           // }
-        } else {
-          this.$vux.toast.text(data.message, "top");
         }
       });
     },
@@ -431,22 +458,59 @@ export default {
       //   this.$vux.toast.text("请选择车牌", "top");
       //   return;
       // }
-      if (!this.agreement) {
-        this.$vux.toast.text("请同意购买须知", "top");
-        return;
-      }
+      // if (!this.agreement) {
+      //   this.$vux.toast.text("请同意购买须知", "top");
+      //   return;
+      // }
       // this.createOrder();
-      this.createVipCardOrderForH5()
+      this.getopenid();
+
+    },
+    // 获取openid
+    getopenid() {
+      let jsondata = {
+        appId: this.$utils.myVxAppId,
+        code: this.webAppCode
+      };
+      getOpenIdByCode(jsondata).then(data => {
+        console.log(data);
+        if (data.code == "0") {
+          this.openid = data.data;
+          this.createVipCardOrderForH5();
+        } else {
+          this.$vux.toast.text(data.message, "top");
+        }
+      });
     },
-    createVipCardOrderForH5(){
+    createVipCardOrderForH5() {
       let jsondata = this.$utils.commonParams();
-      jsondata.carNumber = this.$route.query.carNumber
-      jsondata.custId = ''
+      jsondata.carNumber = this.$route.query.carNumber;
+      jsondata.custId = this.custId;
+      jsondata.optType = "1";
+      jsondata.cardCouponsId = "";
+      jsondata.terminalSource = "3";
+      jsondata.plNo = this.parkNo; // 停车场id
+      jsondata.discountAmount = this.disPrice;
+      jsondata.cardNo = this.vipCardList.cardNo; // 卡券编码
+      jsondata.cardType = (this.vipCardList.cardType).toString(); // 卡类型
+      jsondata.carType = (this.vipCardList.carType).toString(); //  1-大型车；2-小型车
+      // jsondata.plNo = this.createVipCardOrder.id; // 1-大型车；2-小型车
+      jsondata.price = (this.vipCardList.price).toString(); // 卡单价
+      jsondata.totalAmount = (this.needPay).toString(); // 购买的总金额
+      jsondata.num = this.cardNum; // 购买数量
+      jsondata.effDate = this.$utils.timestampToTime(this.startData); // 生效时间
+      jsondata.expDate = this.$utils.timestampToTime(this.endDate); // 失效时间
+      // jsondata.carNumber = this.carNumber; // 卡适用车牌
+      jsondata.optType = "1"; // 操作类型 1 购买 2 续费
       jsondata.sign = this.$utils.signObject(jsondata);
       createVipCardOrderForH5(jsondata).then(data => {
         console.log(data);
         if (data.code == 0) {
  
+          // orderId
+          let orderId = data.data.orderId;
+          this.custId = data.data.custId;
+          this.publicUnifiedOrderForH5(orderId);
         } else {
           this.$vux.toast.text(data.message, "top");
         }
@@ -469,31 +533,35 @@ export default {
       jsondata.carNumber = this.carNumber; // 卡适用车牌
       jsondata.optType = "1"; // 操作类型 1 购买 2 续费
       jsondata.forceBuy = "1";
+
       jsondata.sign = this.$utils.signObject(jsondata);
       createVipCardOrder(jsondata).then(data => {
         console.log(data);
         // orderId
         if (data.code == 0) {
           this.orderId = data.data.orderId;
-          this.vxPay();
+          this.vxPay(orderId);
         } else {
           this.$vux.toast.text(data.message, "top");
         }
       });
     },
-    vxPay() {
+    publicUnifiedOrderForH5(orderId) {
       let vm = this;
       let jsondata = this.$utils.commonParams();
-      jsondata.orderId = this.orderId; // 订单号
-      jsondata.payType = "4"; // 支付方式-- 1:支付宝 2：微信 3：银联.
-      jsondata.paySrcType = "301"; // 支付单来源 101：停车付款单 102：停车预付单 103：停车补缴单 104 共享车位 201 余额充值单 202 押金充值单 301 会员卡购买单 302 会员卡续费
+      jsondata.orderId = orderId; // 订单号
+      jsondata.payType = "4"; // /** 支付方式-- 1:支付宝 2：微信 3：银联 4:微信公众号 5 个人账户. */
+      jsondata.openId = this.openid
+      jsondata.paySrcType = "301"; // //支付单来源 101：停车付款单 102：停车预付单 103：停车补缴单 104 共享车位 201 余额充值单 202 押金充值单 301 会员卡购买单 302 会员卡续费
       jsondata.appId = this.$utils.myVxAppId; // 微信标识符
       jsondata.terminalSource = "3"; // 请求端来源 1： 任你停 2：pda 3：微信公共号
-      jsondata.paySource = "3";
+      jsondata.custId = this.custId;
+      jsondata.payFee = this.needPay;
+      // jsondata.paySource = "3";
       jsondata.couponPersonId = "";
-      jsondata.openId = sessionStorage.getItem("wx_openId");
+      // jsondata.openId = sessionStorage.getItem("wx_openId");
       jsondata.sign = this.$utils.signObject(jsondata);
-      weixinpay(jsondata).then(res => {
+      publicUnifiedOrderForH5(jsondata).then(res => {
         console.log(data);
         if (res.code == 0) { //
           if (res.data) {
@@ -537,11 +605,11 @@ export default {
           if (res.err_msg === "get_brand_wcpay_request:ok") {
             console.log("成功");
             this.$vux.toast.text("支付成功", "top");
-            me.$router.go(-2);
+            me.$router.go(-3);
           } else {
             console.log("失败");
-            alert("支付失败");
-            me.$router.go(-2);
+            this.$vux.toast.text("支付失败", "top");
+            me.$router.go(-3);
           }
         }
       );
@@ -4,7 +4,7 @@
  
  
       <li>
-        <div style="color: #666">选择停车场</div>
+        <div style="color: #666">停车场</div>
         <div >{{renewData.parkName}}</div>
         <!--<div class="arrow">></div>-->
         <!--<div class="arrow">></div>-->
@@ -17,15 +17,16 @@
       <!--</li>-->
  
       <li>
-        <div style="color: #666">选择卡类型</div>
-        <div >{{renewData.cardName}}</div>
+        <div style="color: #666">卡类型</div>
+        <!--<div >{{renewData.cardName}}</div>-->
+        <div >月卡</div>
  
         <!--<div class="arrow">></div>-->
       </li>
  
  
       <li>
-        <div style="color: #666">绑定车牌</div>
+        <div style="color: #666">车牌</div>
         <div>{{renewData.carNumber}}</div>
         <!--<div class="arrow">></div>-->
       </li>
@@ -69,13 +70,13 @@
  
     </ul>
  
-    <div style="padding:15px;text-align: center">
-      <check-icon :value.sync="agreement">
-      </check-icon>
-      <p style="display: inline-block;height: 23px;line-height: 23px;">我已阅读并同意 <span style="color: blue"
-                                                                                     @click="showHideOnBlur=true">《购买须知》</span>
-      </p>
-    </div>
+    <!--<div style="padding:15px;text-align: center">-->
+      <!--<check-icon :value.sync="agreement">-->
+      <!--</check-icon>-->
+      <!--<p style="display: inline-block;height: 23px;line-height: 23px;">我已阅读并同意 <span style="color: blue"-->
+                                                                                     <!--@click="showHideOnBlur=true">《购买须知》</span>-->
+      <!--</p>-->
+    <!--</div>-->
  
  
     <div style="margin-top: 34px" class="leftRightPadding">
@@ -120,7 +121,10 @@ import {
   queryVipCardInfoByPlNo,
   queryUserCars,
   weixinpay,
-  createVipCardOrder
+  createVipCardOrder,
+  createVipCardOrderForH5,
+  publicUnifiedOrderForH5,
+  getOpenIdByCode
 } from "@/api/cards/cards";
 import { timestampToTime } from "../../utils/utils.js";
 export default {
@@ -148,6 +152,11 @@ export default {
       renewData: {} // 续费数据
     };
   },
+  created() {
+    if (this.$utils.clientBrowser() == "微信") {
+      this.webAppCode = this.getCode();
+    }
+  },
   mounted() {
     this.renewData = JSON.parse(sessionStorage.getItem("renewData"));
     console.log(this.renewData);
@@ -198,7 +207,23 @@ export default {
   },
   methods: {
  
-
+    // 获取code
+    getCode() {
+      var appID = this.$utils.myVxAppId;
+      var code = this.getUrlParam("code");
+      var local = window.location.href;
+      if (code == null || code === "") {
+        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
+      } else {
+        return code;
+      }
+    },
+    getUrlParam(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return unescape(r[2]);
+      return null;
+    },
  
  
     clickActionCarNum(e) {
@@ -221,11 +246,105 @@ export default {
     //  购买
     toPay() {
  
-      if (!this.agreement) {
-        this.$vux.toast.text("请同意购买须知", "top");
-        return;
-      }
-      this.createOrder();
+      // if (!this.agreement) {
+      //   this.$vux.toast.text("请同意购买须知", "top");
+      //   return;
+      // }
+      this.getopenid();
+
+      // this.createOrder();
+    },
+    // 获取openid
+    getopenid() {
+      let jsondata = {
+        appId: this.$utils.myVxAppId,
+        code: this.webAppCode
+      };
+      getOpenIdByCode(jsondata).then(data => {
+        console.log(data);
+        if (data.code == "0") {
+          this.openid = data.data;
+          this.createVipCardOrderForH5();
+        } else {
+          this.$vux.toast.text(data.message, "top");
+        }
+      });
+    },
+    createVipCardOrderForH5() {
+      let jsondata = this.$utils.commonParams();
+      jsondata.carNumber = this.renewData.carNumber;
+      jsondata.custId = this.renewData.custId;
+      jsondata.optType = "1";
+      // jsondata.cardCouponsId = "";
+      jsondata.terminalSource = "3";
+      jsondata.plNo = this.renewData.parkNo; // 停车场id
+      jsondata.discountAmount = this.disPrice;
+      jsondata.cardCouponsId  = this.renewData.custCardNo; // 卡券编码
+      jsondata.cardNo  = this.renewData.cardNo; // 卡券编码
+      jsondata.cardType = (this.renewData.cardType).toString(); // 卡类型
+      // jsondata.carType = (this.vipCardList.carType).toString(); //  1-大型车；2-小型车
+      // jsondata.plNo = this.createVipCardOrder.id; // 1-大型车；2-小型车
+      jsondata.price = this.unitPrice.toString(); // 卡单价
+      jsondata.totalAmount = (this.needPay).toString(); // 购买的总金额
+      jsondata.num = this.cardNum; // 购买数量
+      jsondata.effDate = this.$utils.timestampToTime(this.renewData.expDate); // 生效时间
+      jsondata.expDate = this.$utils.timestampToTime(this.endTimeFunc); // 失效时间
+      // jsondata.carNumber = this.carNumber; // 卡适用车牌
+      jsondata.optType = "2"; // 操作类型 1 购买 2 续费
+      jsondata.sign = this.$utils.signObject(jsondata);
+      createVipCardOrderForH5(jsondata).then(data => {
+        console.log(data);
+        if (data.code == 0) {
+
+          // orderId
+          let orderId = data.data.orderId;
+          // this.custId = data.data.custId;
+          this.publicUnifiedOrderForH5(orderId);
+        } else {
+          this.$vux.toast.text(data.message, "top");
+        }
+      });
+    },
+    publicUnifiedOrderForH5(orderId) {
+      let vm = this;
+      let jsondata = this.$utils.commonParams();
+      jsondata.orderId = orderId; // 订单号
+      jsondata.payType = "4"; // /** 支付方式-- 1:支付宝 2：微信 3：银联 4:微信公众号 5 个人账户. */
+      jsondata.openId = this.openid
+      jsondata.paySrcType = "302"; // //支付单来源 101：停车付款单 102：停车预付单 103：停车补缴单 104 共享车位 201 余额充值单 202 押金充值单 301 会员卡购买单 302 会员卡续费
+      jsondata.appId = this.$utils.myVxAppId; // 微信标识符
+      jsondata.terminalSource = "3"; // 请求端来源 1： 任你停 2：pda 3：微信公共号
+      jsondata.custId = this.renewData.custId;
+      jsondata.payFee = this.needPay;
+      // jsondata.paySource = "3";
+      jsondata.cardNo  = this.renewData.cardNo; // 卡券编码
+      jsondata.couponPersonId = this.renewData.custCardNo;
+      // jsondata.openId = sessionStorage.getItem("wx_openId");
+      jsondata.sign = this.$utils.signObject(jsondata);
+      publicUnifiedOrderForH5(jsondata).then(res => {
+        console.log(data);
+        if (res.code == 0) { //
+          if (res.data) {
+            var data = res.data;
+            console.log(JSON.stringify(data));
+            if (typeof WeixinJSBridge === "undefined") { // 微信浏览器内置对象。参考微信官方文档
+              if (document.addEventListener) {
+                document.addEventListener("WeixinJSBridgeReady", vm.onBridgeReady(data), false);
+              } else if (document.attachEvent) {
+                document.attachEvent("WeixinJSBridgeReady", vm.onBridgeReady(data));
+                document.attachEvent("onWeixinJSBridgeReady", vm.onBridgeReady(data));
+              }
+            } else {
+              console.log("准备调用微信支付");
+              vm.onBridgeReady(data);
+            }
+          } else {
+            alert("没有找到返回值");
+          }
+        } else {
+          alert(res.message);
+        }
+      });
     },
     createOrder() {
       console.log(this.createVipCardOrder);
 <template>
   <div id="page">
  
-    <div class="swiper-container" style="height: 260px">
-      <div class="swiper-wrapper">
-        <div class="swiper-slide" v-for="item in swiperData" :key="item.id"
-             :style="{backgroundImage:'url(' + item.url + ')'}"
-             @click="openImgUrl(item)"
-        ></div>
-      </div>
-      <!-- 如果需要分页器 -->
-      <div class="swiper-pagination"></div>
+    <!--<div class="swiper-container" style="height: 260px">-->
+      <!--<div class="swiper-wrapper">-->
+        <!--<div class="swiper-slide" v-for="item in swiperData" :key="item.id"-->
+             <!--:style="{backgroundImage:'url(' + item.url + ')'}"-->
+             <!--@click="openImgUrl(item)"-->
+        <!--&gt;</div>-->
+      <!--</div>-->
+      <!--&lt;!&ndash; 如果需要分页器 &ndash;&gt;-->
+      <!--<div class="swiper-pagination"></div>-->
  
-      <!-- 如果需要滚动条 -->
-      <!--    <div class="swiper-scrollbar"></div>-->
-    </div>
+      <!--&lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
+      <!--&lt;!&ndash;    <div class="swiper-scrollbar"></div>&ndash;&gt;-->
+    <!--</div>-->
  
     <div class="wrap">
       <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>-->
@@ -360,7 +360,7 @@ export default {
     }
   },
   created(){
-    this.initSWiper()
+    // this.initSWiper()
   },
   mounted () {
     //
@@ -647,7 +647,7 @@ export default {
     align-items: center;
   }
   .wrap {
-    padding:0 18px;
+    padding:40px 18px 0;
     .radio-box {
       display: flex;
       align-items: center;