快捷支付

src/main/java/com/caimei/www/controller/authorized/user/UserPageController.java

@@ -52,6 +52,8 @@ public class UserPageController extends BaseController {
 	private static final String ACCOUNT_LIST = "user-center/account/account";
 	/** 采美豆明细 */
 	private static final String BEANS_LIST = "user-center/account/beans";
+	/** 我的银行卡 */
+	private static final String CARDS_LIST = "user-center/account/cards";
 	/** 优惠券列表 */
 	private static final String COUPON_LIST = "user-center/account/coupon";
 	/** 领券中心 */
@@ -176,6 +178,10 @@ public class UserPageController extends BaseController {
     @GetMapping("/user/beans.html")
     public String beans() {return BEANS_LIST;}
 
+    /** 我的银行卡 */
+    @GetMapping("/user/cards.html")
+    public String cards() {return CARDS_LIST;}
+
     /** 优惠券列表 */
     @GetMapping("/user/coupon.html")
     public String coupon() {return COUPON_LIST;}

src/main/resources/static/css/user-center/account/cards.css

@@ -0,0 +1,66 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    /*采美豆右侧*/
+    .crumbs{font-size: 16px;}
+    .pageWrap{width: 968px;}
+    .navLayout{min-height: 500px;}
+    .cards-container{width: 100%;min-height: 500px;background-color: #FFFFFF;margin-top: 16px;box-sizing: border-box;padding: 24px 264px 24px 32px;}
+    .cards-list{width: 312px;height: 112px;box-sizing: border-box;padding: 16px;border-radius: 4px;float: left;margin: 0 24px 24px 0;position: relative;}
+    .cards-list.CCB{background-image: linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);}
+    .cards-list.ICBC{background-image: linear-gradient(90deg, #ED796B 0%, #EF585E 100%);}
+    .cards-list.ABC{background-image: linear-gradient(90deg, #19B8B2 0%, #009C96 100%);}
+    .cards-list .list-logo{width: 36px;height: 100%;float: left;}
+    .cards-list .list-logo .logo{width: 36px;height: 36px;border-radius: 50%;padding: 6px;box-sizing: border-box;background-color: #ffffff;float: left;}
+    .cards-list .list-logo .logo img{width: 24px;height: 24px;border-radius: 50%;display: block;}
+    .cards-list-add{width: 312px;height: 112px;box-sizing: border-box;cursor: pointer; padding: 16px;border-radius: 4px;float: left;border: 1px dashed #B8BFCA;display: flex;align-items: center;justify-content: center;flex-direction: column;}
+    .list-main{width: 228px;float: left;margin-left: 16px;}
+    .list-main .list-main-name{width: 100%;height: 22px;line-height: 22px;font-size: 16px;color: #ffffff;}
+    .list-main .list-main-tag{width: 100%;height: 20px;margin:4px 0 14px 0;}
+    .list-main .list-main-tag .tag{display: inline-block;line-height: 20px;padding: 0 5px;border-radius: 2px;font-size: 12px;color: #ffffff;background: rgba(255, 255, 255, 0.2);float: left;}
+    .list-main .list-main-code{width: 100%;height: 22px;line-height: 22px;font-size: 16px;color: #ffffff;}
+    .list-btn{font-size: 14px;color: #ffffff;height: 22px;line-height: 22px;position: absolute;right: 16px;top: 16px;}
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
+    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
+    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
+    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
+    .beans-header-r{float: right;line-height:20vw;}
+    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
+    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
+    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
+    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
+    .beans-content-tabs{width: 100%;height: auto;box-sizing: border-box;padding:0 3.4vw;}
+    .beans-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding-top: 6.4vw;position: relative;float: left;}
+    .beans-content-tabs .time-template{width: 100%;height: 6.7vw;float: left;box-sizing: border-box;padding: 0 25vw;}
+    .beans-content-tabs .time-template .time-pre{width: 6.7vw;height: 6.7vw;float: left;display: block;}
+    .beans-content-tabs .time-template .time-pre .icon{width:6.7vw;height:6.7vw;display: block;}
+    .beans-content-tabs .time-template .time-pre .icon:before{width:6.7vw;height:6.7vw;background-position:-51.2vw -78.3vw}
+    .beans-content-tabs .time-template .time-text{width: 28.4vw;height: 6.7vw;float: left;line-height: 6.7vw;text-align: center;font-size: 3.4vw;color: #22272e;}
+    .beans-content-tabs .time-template .time-next{width: 6.7vw;height: 6.7vw;float: left;display: block;}
+    .beans-content-tabs .time-template .time-next .icon{width:6.7vw;height:6.7vw;display: block;}
+    .beans-content-tabs .time-template .time-next .icon:before{width:6.7vw;height:6.7vw;background-position:-60.4vw -78.3vw}
+    .beans-content-tabs .time-tabs{width:100%;height:9.6vw;float: left;margin-top: 3.6vw;}
+    .beans-content-tabs .time-tabs-cell{width: 33.3%;height: 100%;float: left;text-align: center;font-size: 4vw;color: #22272e;line-height: 9.6vw;display: block;}
+    .beans-content-tabs .time-tabs-cell.active{color: #FF5B00;font-weight: bold;}
+
+    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
+    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
+    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
+    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
+    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
+    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
+    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 36vw;height: 36vw;}
+
+}
+

src/main/resources/static/js/user-center/account/cards.js

@@ -0,0 +1,130 @@
+;
+var cardsPage = new Vue({
+    el: "#cardsPage",
+    data: {
+        isRequset:true,
+        listQuery:{
+            userId: 0,
+            year:'',
+            month:'',
+            type:0,
+            pageNum:1,
+            pageSize:10
+        },
+        isPopup:false,
+        list: [
+            {
+                type: 1,
+                flag: 0,
+                B2B: 'CCB',
+                name: '建设银行',
+                code:'45454545454521212'
+            },
+            {
+                type: 1,
+                flag: 0,
+                B2B: 'ICBC',
+                name: '工商银行',
+                code:'45454545454521212'
+            },
+            {
+                type: 0,
+                flag: 0,
+                B2B: 'ABC',
+                name: '农业银行',
+                code:'45454545454521212'
+            }
+        ],
+        listRecord: 0,
+        pageInput: '1'
+    },
+    filters: {
+
+    },
+    computed: {
+
+    },
+    methods: {
+        GetQueryBeansListData:function(){//查询订单列表
+            var _self = this;
+            UserApi.GetUserClubBeansList(_self.listQuery,function (response) {
+                if(response.code == 0){
+                    var data = response.data;
+                    var pageInfo = data.pageInfo;
+                    _self.userBeans = data.userBeans;
+                    if( pageInfo.list && pageInfo.list.length>0) {
+                        _self.beansList = [];
+                        _self.beansList = pageInfo.list;
+                        _self.listRecord = pageInfo.total;
+                    }else{
+                        _self.beansList = [];
+                        _self.beansList = pageInfo.list;
+                        _self.listRecord = pageInfo.total;
+                    }
+                    _self.isRequset = false;
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        handleUnbind(){
+            //解绑
+            CAIMEI.Modal('解绑后此卡需要重新绑定才能继续使用','保持绑定','继续解绑',function () {
+                OrderApi.AffirmOrderOrder({orderId:orderId},function(response){
+                    if(response.code == 0){
+                        CAIMEI.dialog('确认成功',true,function () {
+                            _self.GetQueryOrderListData();
+                        });
+                    }else{
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                })
+            })
+        },
+        handleShowPopup(){
+            //显示添加银行卡弹窗
+            this.isPopup = true
+        },
+        handleLogo(value) {
+            const LogoMap = {
+                'CCB':'https://img2.baidu.com/it/u=4262210206,1883697020&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501',
+                'ICBC':'https://www.weixinyunduan.com/ups/2016/01/309212/edf5a48e69afa569eb31a52fc36de450.jpg',
+                'ABC':'https://userfile.yksup.com/userdata/18039/img/brand-20170315232223_e0p18k.jpg'
+            }
+            return LogoMap[value]
+        },
+        handleClass(value) {
+            console.log('value',value)
+            const styleMap = {
+                'CCB':'CCB',
+                'ICBC':'ICBC',
+                'ABC':'ABC'
+            }
+            console.log('styleMap[value]',styleMap[value])
+            return styleMap[value]
+        },
+        handleStyle(value) {
+            console.log('value',value)
+            const styleMap = {
+                'CCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
+                'ICBC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
+                'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);'
+            }
+            console.log('styleMap[value]',styleMap[value])
+            return styleMap[value]
+        },
+    },
+    mounted: function () {
+        var _self = this;
+        if(globalUserData){
+            _self.userId = globalUserData.userId;
+            _self.listQuery.userId = this.userId;
+            var _Date = new Date();
+            _self.listQuery.year = _Date.getFullYear();
+            _self.listQuery.month = _Date.getMonth()+1;
+            console.log('当前年份==========>', _self.listQuery.year);
+            console.log('当前月份==========>', _self.listQuery.month);
+            _self.GetQueryBeansListData();
+        }
+    }
+});

src/main/resources/templates/user-center/account/cards.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/user-center/account/cards.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 采美豆明细 -->
+<div id="cardsPage" v-cloak>
+    <div class="navLayout" v-cloak>
+        <div v-if="isPC" class="crumbs">
+            <span>我的采美</span>
+            <span>&gt;</span>
+            <span>银行卡</span>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="user-center/components/tableft"></template>
+            <div class="right">
+                <!--loading-->
+                <div v-if="isRequset" class="loading">
+                    <img src="/img/base/loading.gif">
+                </div>
+                <div class="cards-container clear" v-else>
+                    <div class="cards-list" v-for="(card , index) in list" :key="index" :class="handleClass(card.B2B)">
+                        <div class="list-logo"><div class="logo"><img :src="handleLogo(card.B2B)"></img></div></div>
+                        <div class="list-main">
+                            <div class="list-main-name">{{ card.name }}</div>
+                            <div class="list-main-tag"> <text class="tag"> {{ card.flag === 1 ? '借记卡' : '贷记卡' }} </text> </div>
+                            <div class="list-main-code">{{ card.code }}</div>
+                        </div>
+                        <div class="list-btn" @click="handleUnbind">解绑</div>
+                    </div>
+                    <div class="cards-list-add" @click="handleShowPopup">
+                        <div class="add">
+                            <i></i>
+                            <span>添加银行卡</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/cards.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/user-center/dashboard.html

@@ -74,6 +74,10 @@
                                     <span>优惠券：</span>
                                     <span class="red">{{ couponNum }}</span>
                                 </a>
+                                <a href="/user/cards.html" class="account-cell">
+                                    <span>银行卡：</span>
+                                    <span class="red">{{ couponNum }}</span>
+                                </a>
                             </div>
                         </div>
                     </div>