新增台湾地区银行提领绑定资料

2024-02-19 16:44:39 +08:00
parent 267cf85389
commit 70607468ff
5 changed files with 764 additions and 1 deletions
--- a/view/peko/modules/h5Income/css/taiwan.css
+++ b/view/peko/modules/h5Income/css/taiwan.css
@@ -0,0 +1,210 @@
+html,
+body {
+  width: 100%;
+  background: #F3F5FA;
+}
+
+.back {
+  position: fixed;
+  z-index: 9;
+  width: 0.74667rem;
+  height: 0.74667rem;
+  left: 0.53333rem;
+  top: 0.2rem;
+}
+
+h3 {
+  width: 100%;
+  margin-top: 0.53333rem;
+  margin-bottom: 0.42667rem;
+  text-align: center;
+  color: #1F1B4F;
+  font-size: 0.48rem;
+  font-weight: bold;
+}
+
+input {
+  background: transparent;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  font-size: 0.37333rem;
+}
+
+input::placeholder {
+  font-size: 0.37333rem;
+  color: #8A8CAB;
+}
+
+.box1 {
+  width: 9.14667rem;
+  height: 9.70667rem;
+  background: #fff;
+  border-radius: 0.26667rem;
+  box-sizing: border-box;
+  padding: 0 0.53333rem;
+  margin: 0 auto 0.32rem;
+  overflow: hidden;
+}
+
+.box1 div {
+  width: 100%;
+  height: 1.37333rem;
+  line-height: 1.37333rem;
+  border-bottom: 0.01333rem solid #EBEEF5;
+  display: flex;
+}
+
+.box1 div span {
+  flex: 3;
+  height: 100%;
+  font-size: 0.37333rem;
+  color: #1F1B4F;
+}
+
+.box1 div input {
+  flex: 7;
+  height: 100%;
+  text-align: right;
+  font-size: 0.37333rem;
+  color: #1F1B4F;
+}
+
+.box2 {
+  width: 9.14667rem;
+  height: 5.54667rem;
+  background: #fff;
+  border-radius: 0.26667rem;
+  box-sizing: border-box;
+  padding: 0 0.53333rem;
+  margin: 0 auto 0.32rem;
+  overflow: hidden;
+}
+
+.box2 div {
+  width: 100%;
+  height: 1.37333rem;
+  line-height: 1.37333rem;
+  border-bottom: 0.01333rem solid #EBEEF5;
+  display: flex;
+}
+
+.box2 div span {
+  flex: 3;
+  height: 100%;
+  font-size: 0.37333rem;
+  color: #1F1B4F;
+}
+
+.box2 div input {
+  flex: 7;
+  height: 100%;
+  text-align: right;
+  font-size: 0.37333rem;
+  color: #1F1B4F;
+}
+
+.box3 {
+  width: 9.14667rem;
+  height: 5.54667rem;
+  background: #fff;
+  border-radius: 0.26667rem;
+  box-sizing: border-box;
+  padding: 0 0.53333rem;
+  margin: 0 auto 0.53333rem;
+  overflow: hidden;
+}
+
+.box3 p {
+  font-size: 0.37333rem;
+  color: #1F1B4F;
+  margin-top: 0.42667rem;
+}
+
+.box3 .idBox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.42667rem;
+}
+
+.box3 .idBox .z,
+.box3 .idBox .f {
+  width: 3.84rem;
+  height: 3.14667rem;
+  background: #F3F5FA;
+  border-radius: 0.26667rem;
+  position: relative;
+}
+
+.box3 .idBox .z .documents,
+.box3 .idBox .f .documents {
+  position: absolute;
+  width: 3.09333rem;
+  height: 1.92rem;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.37333rem;
+}
+
+.box3 .idBox .z .icon_camera,
+.box3 .idBox .f .icon_camera {
+  position: absolute;
+  width: 1.06667rem;
+  height: 1.06667rem;
+  left: 50%;
+  top: 0.8rem;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.box3 .idBox .z span,
+.box3 .idBox .f span {
+  position: absolute;
+  color: #8A8CAB;
+  font-size: 0.32rem;
+  left: 50%;
+  top: 2.4rem;
+  transform: translateX(-50%);
+  width: 100%;
+  text-align: center;
+}
+
+.box3 .idBox .z .upload,
+.box3 .idBox .f .upload {
+  position: absolute;
+  width: 3.09333rem;
+  height: 1.92rem;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.37333rem;
+  z-index: 2;
+}
+
+.but {
+  width: 8.08rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  border-radius: 1.28rem;
+  margin: 0 auto 0.64rem;
+  text-align: center;
+  font-size: 0.42667rem;
+  color: #FFFFFF;
+  background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%);
+}
+
+.active {
+  background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
+}
+
+.rule {
+  width: 8.72rem;
+  margin: 0 auto 0.66667rem;
+  color: #8A8CAB;
+  font-size: 0.37333rem;
+}
+
+.rule p {
+  margin-bottom: 0.13333rem;
+  line-height: 0.45rem;
+}
--- a/view/peko/modules/h5Income/css/taiwan.scss
+++ b/view/peko/modules/h5Income/css/taiwan.scss
@@ -0,0 +1,210 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #F3F5FA;
+}
+
+.back {
+    position: fixed;
+    z-index: 9;
+    width: px2rem(56);
+    height: px2rem(56);
+    left: px2rem(40);
+    top: 0.2rem;
+    // display: none;
+}
+
+h3 {
+    width: 100%;
+    margin-top: px2rem(40);
+    margin-bottom: px2rem(32);
+    text-align: center;
+    color: #1F1B4F;
+    font-size: px2rem(36);
+    font-weight: bold;
+}
+
+input {
+    background: transparent;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+    font-size: px2rem(28);
+
+    &::placeholder {
+        font-size: px2rem(28);
+        color: #8A8CAB;
+    }
+}
+
+.box1 {
+    width: px2rem(686);
+    height: px2rem(728);
+    background: #fff;
+    border-radius: px2rem(20);
+    box-sizing: border-box;
+    padding: 0 px2rem(40);
+    margin: 0 auto px2rem(24);
+    overflow: hidden;
+
+    div {
+        width: 100%;
+        height: px2rem(103);
+        line-height: px2rem(103);
+        border-bottom: px2rem(1) solid #EBEEF5;
+        display: flex;
+
+        span {
+            flex: 3;
+            height: 100%;
+            font-size: px2rem(28);
+            color: #1F1B4F;
+        }
+
+        input {
+            flex: 7;
+            height: 100%;
+            text-align: right;
+            font-size: px2rem(28);
+            color: #1F1B4F;
+        }
+    }
+}
+
+.box2 {
+    width: px2rem(686);
+    height: px2rem(416);
+    background: #fff;
+    border-radius: px2rem(20);
+    box-sizing: border-box;
+    padding: 0 px2rem(40);
+    margin: 0 auto px2rem(24);
+    overflow: hidden;
+
+    div {
+        width: 100%;
+        height: px2rem(103);
+        line-height: px2rem(103);
+        border-bottom: px2rem(1) solid #EBEEF5;
+        display: flex;
+
+        span {
+            flex: 3;
+            height: 100%;
+            font-size: px2rem(28);
+            color: #1F1B4F;
+        }
+
+        input {
+            flex: 7;
+            height: 100%;
+            text-align: right;
+            font-size: px2rem(28);
+            color: #1F1B4F;
+        }
+    }
+}
+
+.box3 {
+    width: px2rem(686);
+    height: px2rem(416);
+    background: #fff;
+    border-radius: px2rem(20);
+    box-sizing: border-box;
+    padding: 0 px2rem(40);
+    margin: 0 auto px2rem(40);
+    overflow: hidden;
+
+    p {
+        font-size: px2rem(28);
+        color: #1F1B4F;
+        margin-top: px2rem(32);
+    }
+
+    .idBox {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-top: px2rem(32);
+
+        .z,
+        .f {
+            width: px2rem(288);
+            height: px2rem(236);
+            background: #F3F5FA;
+            border-radius: px2rem(20);
+            position: relative;
+
+            .documents {
+                position: absolute;
+                width: px2rem(232);
+                height: px2rem(144);
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(28);
+            }
+
+            .icon_camera {
+                position: absolute;
+                width: px2rem(80);
+                height: px2rem(80);
+                left: 50%;
+                top: px2rem(60);
+                transform: translateX(-50%);
+                z-index: 2;
+            }
+
+            span {
+                position: absolute;
+                color: #8A8CAB;
+                font-size: px2rem(24);
+                left: 50%;
+                top: px2rem(180);
+                transform: translateX(-50%);
+                width: 100%;
+                text-align: center;
+            }
+
+            .upload {
+                position: absolute;
+                width: px2rem(232);
+                height: px2rem(144);
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(28);
+                z-index: 2;
+            }
+        }
+    }
+}
+
+.but {
+    width: px2rem(606);
+    height: px2rem(96);
+    line-height: px2rem(96);
+    border-radius: px2rem(96);
+    margin: 0 auto px2rem(48);
+    text-align: center;
+    font-size: px2rem(32);
+    color: #FFFFFF;
+    background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%);
+}
+.active{
+    background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
+}
+
+.rule {
+    width: px2rem(654);
+    margin: 0 auto px2rem(50);
+    color: #8A8CAB;
+    font-size: px2rem(28);
+
+    p {
+        margin-bottom: px2rem(10);
+        line-height: 0.45rem;
+    }
+}
--- a/view/peko/modules/h5Income/js/taiwan.js
+++ b/view/peko/modules/h5Income/js/taiwan.js
@@ -0,0 +1,220 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+var url = getQueryString();
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+
+$(function () {
+    setTimeout(function () {
+        getInfoFromClient()
+        if (browser.app) {
+            $('.back').hide();
+        }
+        setTimeout(function () {
+        }, 100)
+    })
+})
+// 返回按鈕
+$('.back').click(function () {
+    window.history.go(-1)
+})
+function fileChangeZ (e) {
+    var filesList = document.querySelector('#frontImageUpload').files;
+    if (filesList.length == 0) {
+        return;
+    }
+    getUploadToken(1)
+}
+function fileChangeF (e) {
+    var filesList = document.querySelector('#backImageUpload').files;
+    if (filesList.length == 0) {
+        return;
+    }
+    getUploadToken(2)
+}
+// 上傳身份證接口
+function getUploadToken (type) {
+    const frontImage = document.getElementById('frontImageUpload').files[0];
+    const backImage = document.getElementById('backImageUpload').files[0];
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/qiniu/upload/getUploadToken',
+        success (res) {
+            if (res.code === 200) {
+                var frontImageKey = res.data.key;
+                var frontImageToken = res.data.token;
+                showLoading()
+                const observable = qiniu.upload(
+                    type == 1 ? frontImage : backImage,
+                    frontImageKey,
+                    frontImageToken
+                );
+                observable.subscribe({
+                    complete: (res) => {
+                        console.log(res);
+                        if (type == 1) {
+                            $('.box3 .idBox .z .documents').attr('src', res.path);
+                        } else {
+                            $('.box3 .idBox .f .documents').attr('src', res.path);
+                        }
+                        hideLoading(layerIndex)
+                        toastMsg("上傳成功")
+
+                    },
+                });
+            } else if (res.code ? res.code == 1444 : JSON.parse(res).code == 401) { 
+                window.location.href = './login.html' 
+            } else {
+                toastMsg(res.message)
+            }
+            // hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 確認綁定按鈕
+$('.but').click(function () {
+    if (listenFun()) {
+        var filesList = document.querySelector('#frontImageUpload').files;
+        var backImageUpload = document.querySelector('#backImageUpload').files;
+        if (filesList.length == 0 || backImageUpload.length == 0) {
+            toastMsg('請上傳身份證照片')
+            return;
+        }
+    }
+})
+//監聽是否完善信息
+function listenFun () {
+    var num1 = $(".box1 div .name").val();
+    var num2 = $(".box1 div .accountName").val();
+    var num3 = $(".box1 div .card").val();
+    var num4 = $(".box1 div .state").val();
+    var num5 = $(".box1 div .city").val();
+    var num7 = $(".box1 div .street").val();
+    var num8 = $(".box1 div .postalCode").val();
+    var num9 = $(".box2 div .bankAccount").val();
+    var num10 = $(".box2 div .bankName").val();
+    var num11 = $(".box2 div .swiftCode").val();
+    var num12 = $(".box2 div .phone").val();
+    if (num1 != '' && num2 != '' && num3 != '' && num4 != '' && num5 != ''  && num7 != '' && num8 != '' && num9 != '' && num10 != '' && num11 != '' && num12 != '') {
+        $('.but').addClass('active');
+        return true;
+    } else {
+        $('.but').removeClass('active');
+        return false;
+    }
+}
+// 監聽所有輸入框輸入
+$(".box1 div .name,.box1 div .accountName,.box1 div .card,.box1 div .state,.box1 div .city,.box1 div .street,.box1 div .postalCode,.box2 div .bankAccount,.box2 div .bankName,.box2 div .swiftCode,.box2 div .phone").on("keyup", function () {
+    listenFun()
+});
+// 保存绑定
+function withdrawUserAccount (
+    surname,
+    name,
+    idCardNo,
+    province,
+    city,
+    street,
+    postCode,
+    accountNo,
+    bankName,
+    swiftCode,
+    contact,
+    frontPhoto,
+    backPhoto,) {
+    var obj = {
+        uid: pubInfo.uid,
+        accountType: url.accountType,
+        surname,
+        name,
+        idCardNo,
+        province,
+        city,
+        street,
+        postCode,
+        accountNo,
+        bankName,
+        swiftCode,
+        contact,
+        frontPhoto,
+        backPhoto,
+    };
+    showLoading()
+    networkRequest({
+        type: 'POST',
+        url: urlPrefix + '/withdrawUserAccount/save',
+        contentType: 'application/json',
+        data: JSON.stringify(obj),
+        success (res) {
+            if (res.code === 200) {
+                toastMsg('保存成功')
+                setTimeout(function () {
+                    window.location.href = './withdrawal.html'
+                }, 500)
+            } else if (res.code ? res.code == 1444 : JSON.parse(res).code == 401) {
+                window.location.href = './login.html'
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+$('.but').click(function () {
+    var frontImageUpload = document.querySelector('#frontImageUpload').files;
+    var backImageUpload = document.querySelector('#backImageUpload').files;
+    if (listenFun()) {
+        if (frontImageUpload.length == 0 || backImageUpload.length == 0) {
+            toastMsg('請上傳身份證');
+            return;
+        }
+        withdrawUserAccount(
+            $('.box1 div .name').val(),
+            $('.box1 div .accountName').val(),
+            $('.box1 div .card').val(),
+            $('.box1 div .state').val(),
+            $('.box1 div .city').val(),
+            $('.box1 div .street').val(),
+            $('.box1 div .postalCode').val(),
+            $('.box2 div .bankAccount').val(),
+            $('.box2 div .bankName').val(),
+            $('.box2 div .swiftCode').val(),
+            $('.box2 div .phone').val(),
+            $('.box3 .idBox .z .documents').attr('src'),
+            $('.box3 .idBox .f .documents').attr('src')
+        );
+    }
+})
--- a/view/peko/modules/h5Income/js/withdrawal.js
+++ b/view/peko/modules/h5Income/js/withdrawal.js
@@ -239,6 +239,8 @@ function getAccounts () {
                            $('.switch .pub_in p').text('是否切換到馬來西亞銀行提領 ');
                        } else if (accountTypes == 8) {
                            $('.switch .pub_in p').text('是否切換到新加坡銀行提領 ');
+                        } else if (accountTypes == 16) {
+                            $('.switch .pub_in p').text('是否切換到臺灣地區銀行提領 ');
                        }
                        $('.switch .pub_in .ok').attr('accounttype', accountTypes);
                        $('.switch .pub_in .ok').attr('text', $(this).attr('accountTypesText'));
@@ -253,6 +255,8 @@ function getAccounts () {
                            $('.binding .pub_in p').text('需要先綁定馬來西亞銀行賬戶資料');
                        } else if (accountTypes == 8) {
                            $('.binding .pub_in p').text('需要先綁定新加坡銀行賬戶資料');
+                        }else if (accountTypes == 16) {
+                            $('.switch .pub_in p').text('需要先綁定臺灣地區銀行賬戶資料 ');
                        }
                        $('.binding').show();
                        // 確認跳轉綁定頁面按鈕
@@ -265,6 +269,8 @@ function getAccounts () {
                                window.location.href = `./malaysia.html?accountType=${accountTypes}`;
                            } else if (accountTypes == 8) {
                                window.location.href = `./singapore.html?accountType=${accountTypes}`;
+                            }else if (accountTypes == 16) {
+                                window.location.href = `./taiwan.html?accountType=${accountTypes}`;
                            }
                            return false;
                        })
--- a/view/peko/modules/h5Income/taiwan.html
+++ b/view/peko/modules/h5Income/taiwan.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>台湾地区銀行</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/taiwan.css">
+</head>
+
+<body>
+    <!-- 返回 -->
+    <img src="./images/back.png" alt="" class="back">
+    <!-- 标题 -->
+    <h3>台湾地区銀行</h3>
+    <!-- 姓名身份证 -->
+    <div class="box1">
+        <div>
+            <span>開戶姓氏</span>
+            <input class="name" type="text" placeholder="例：ZHANG">
+        </div>
+        <div>
+            <span>開戶名稱</span>
+            <input class="accountName" type="text" placeholder="例：LEE HONG">
+        </div>
+        <div>
+            <span>身份證號备份</span>
+            <input class="card" type="text" placeholder="請輸入正確的身份證號碼备份">
+        </div>
+        <div>
+            <span>省（州）</span>
+            <input class="state" type="text" placeholder="請輸入身份證上的地址信息">
+        </div>
+        <div>
+            <span>城市</span>
+            <input class="city" type="text" placeholder="請輸入身份證上的地址信息">
+        </div>
+        <div>
+            <span>街道地址</span>
+            <input class="street " type="text" placeholder="請輸入身份證上的地址信息">
+        </div>
+        <div>
+            <span>郵編</span>
+            <input class="postalCode" type="text" placeholder="請輸入身份證上的郵編信息">
+        </div>
+    </div>
+    <!-- 银行卡手机号等信息 -->
+    <div class="box2">
+        <div>
+            <span>銀行收款賬戶</span>
+            <input class="bankAccount " type="text" placeholder="例：666666">
+        </div>
+        <div>
+            <span>銀行名稱</span>
+            <input class="bankName" type="text" placeholder="例：CIMB Bank">
+        </div>
+        <div>
+            <span>SWIFT CODE</span>
+            <input class="swiftCode" type="text" placeholder="例：MBBEMYKLPKG">
+        </div>
+        <div>
+            <span>聯系方式</span>
+            <input class="phone" type="text" placeholder="可聯系您的聯系方式，郵箱/電話">
+        </div>
+    </div>
+    <!-- 上传身份证 -->
+    <div class="box3">
+        <p>上傳身份證照片</p>
+        <div class="idBox">
+            <!-- 正面 -->
+            <div class="z">
+                <img src="./images/chainBank/documents_front.png" alt="" class="documents">
+                <img src="./images/chainBank/icon_camera.png" alt="" class="icon_camera">
+                <span>請上傳正面照片</span>
+                <input type="file" id="frontImageUpload" accept="image/*" onchange="fileChangeZ(event)" class="upload"
+                    style="opacity: 0;">
+            </div>
+            <!-- 反面 -->
+            <div class="f">
+                <img src="./images/chainBank/documents_reverse.png" alt="" class="documents">
+                <img src="./images/chainBank/icon_camera.png" alt="" class="icon_camera">
+                <span>請上傳反面照片</span>
+                <input type="file" id="backImageUpload" accept="image/*" onchange="fileChangeF(event)" class="upload"
+                    style="opacity: 0;">
+            </div>
+        </div>
+    </div>
+    <!-- 绑定按钮 -->
+    <div class="but">確認綁定</div>
+    <!-- 说明 -->
+    <div class="rule">
+        <p>註意：</p>
+        <p>1.該頁面適用於馬來西亞地區的提領，非馬來西亞地區請切換其他提領方式；</p>
+        <p>2.提領資料請勿隨意填寫，需正確填寫以上資料；</p>
+        <p>3.銀行賬號與身份證號碼必須與提領實名一致，否則提領不能到賬；</p>
+        <p>4.請勿將賬號綁定他人的姓名，提領真實姓名綁定後不能修改，請謹慎操作；</p>
+        <p>5.實際提領收益按照轉賬時的匯率之後金額；</p>
+        <p>6.首次進行提領流程時，會需要上傳您的身份證相關信息；</p>
+        <p>7.申請提領人為未滿二十歲的未成年人，除需提供申請人的身份證相關信息外，另須提供法定代理人（或監護人）的身份證件相關信息；</p>
+        <p>8.如有疑問請聯系Wechat:sd245376</p>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/qiniu.min.js"></script>
+<script src="./js/taiwan.js?v=1.0"></script>