采美豆

src/main/resources/static/css/base/base.pc.css

@@ -348,3 +348,30 @@ iframe{width:320px !important;height: 280px !important}
 .empty img{width:180px;height:180px;}
 .empty a{color:#E15616;}
 
+/*采美豆弹窗样式*/
+.cmbeans-alert-box{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;position: fixed;left: 0;top: 0;background: rgba(51,51,51,0.5);z-index: 99999;}
+.cmbeans-alert-content{width: 310px;height: 399px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;box-sizing: border-box;padding-top: 238px;background-size: cover;}
+.cmbeans-alert-content .icon{width:30px;height:30px;display: block;position: absolute;top: 45px;right: -35px;cursor: pointer;}
+.cmbeans-alert-content .icon:before{width:33px;height:33px;background-position:-197px -550px}
+.cmbeans-alert-content-text{height: 48px;line-height: 48px;text-align: center;width: 100%;font-size: 18px;color: #333333;}
+.cmbeans-alert-content-bean{width: 100%;height: 35px;line-height: 35px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}
+.cmbeans-alert-content-bean .cmbeans-alert-icon{width: 42px;height: 35px;display: block;float: left;}
+.cmbeans-alert-content-bean .cmbeans-alert-text{color: #E15616;line-height: 35px;float: left;font-size: 24px;}
+.cmbeans-alert-content-bean .icon-add{margin-left: 15px;}
+.cmbeans-alert-content-bean .icon-text{font-weight: bold;}
+.cmbeans-alert-content-tips{width: 100%;height: 24px;line-height: 24px;margin-top: 20px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}
+.cmbeans-alert-content-tips .tips{width: 118px;height: 24px;background-color: rgba(226, 91, 28, 0.1);border-radius: 12px;line-height: 24px;font-size: 12px;color: #E15616;text-align: center;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,22 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    /*采美豆右侧*/
+    .crumbs{font-size: 16px;}
+    .user-header{width:100%;height:120px;box-sizing:border-box;padding:20px;background-color:#FFF;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.07);position:relative}
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .user-header{box-sizing:border-box;width:100%;padding:2.7vw;background:#fff;position:relative}
+
+
+
+}
+

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

@@ -0,0 +1,52 @@
+@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;}
+    .beans-header{width:100%;height:120px;box-sizing:border-box;padding:24px;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
+    .beans-header-l{float: left;line-height: 78px;color: #FFFFFF;font-size: 16px;}
+    .beans-header-l span.big{font-size: 24px;font-weight: bold;}
+    .beans-header-r{float: right;line-height: 78px;}
+    .beans-header-r a{color: #FFFFFF;font-size: 14px;}
+    .beans-header-r a .icon{width:16px;height:16px;display: block;float: right;margin-left: 3px;}
+    .beans-header-r a .icon:before{width:16px;height:16px;background-position:-241px -550px}
+    .beans-container{width: 100%;min-height: 500px;background-color: #FFFFFF;margin-top: 16px;}
+    .beans-content-tabs{width: 100%;height: 96px;box-sizing: border-box;padding:0 24px;}
+    .beans-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding:33px 0; position: relative;}
+    .beans-content-tabs .time-template{width: 184px;height: 100%;margin: 0 auto;}
+    .beans-content-tabs .time-template .time-pre{width: 30px;height: 100%;float: left;display: block;}
+    .beans-content-tabs .time-template .time-pre .icon{width:30px;height:30px;display: block;}
+    .beans-content-tabs .time-template .time-pre .icon:before{width:30px;height:30px;background-position:-269px -550px}
+    .beans-content-tabs .time-template .time-text{width: 124px;height: 100%;float: left;line-height: 30px;text-align: center;font-size: 16px;color: #22272e;}
+    .beans-content-tabs .time-template .time-next{width: 30px;height: 100%;float: left;display: block;}
+    .beans-content-tabs .time-template .time-next .icon{width:30px;height:30px;display: block;}
+    .beans-content-tabs .time-template .time-next .icon:before{width:30px;height:30px;background-position:-311px -550px}
+    .beans-content-tabs .time-tabs{width: 216px;height:30px;position: absolute;right: 0;top: 33px;}
+    .beans-content-tabs .time-tabs-cell{width: 72px;height: 100%;float: left;text-align: center;font-size: 14px;color: #22272e;line-height: 30px;display: block;}
+    .beans-content-tabs .time-tabs-cell.active{color: #E15616;}
+
+    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:24px;}
+    .beans-content-list .beans-list-cell{width: 100%;height: 60px;box-sizing: border-box;float: left;margin-bottom: 10px;}
+    .beans-content-list .list-cell-left{width: 50%;height: 60px;float: left;text-align: left;}
+    .beans-content-list p{width: 100%;height: 32px;float: left;line-height: 32px;font-size: 16px;color: #22272e;}
+    .beans-content-list p.none{color: #627386;font-size: 14px;line-height: 28px;}
+    .beans-content-list p.blod{font-weight: bold;line-height: 28px;}
+    .beans-content-list .list-cell-right{width: 50%;height: 60px;float: right;text-align: right;}
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .beans-header{box-sizing:border-box;width:100%;padding:2.7vw;background:#fff;position:relative}
+
+
+
+}
+

src/main/resources/static/css/user-center/dashboard.css

@@ -15,7 +15,9 @@ li{list-style:none}
     .user-header .account{float:left;box-sizing:border-box;padding:5px 0}
     .user-header .account .name{width:100%;height:36px;float:left;margin-bottom:10px}
     .user-header .account .name span{line-height:36px;font-size:18px;font-weight:bold;color:#22272e;display:inline-block;float:left}
-    .user-header .account .name a{margin-left:30px;width:118px;height:34px;border:1px solid #E15616;border-radius:2px;background-color:#ffe6dc;color:#E15616;display:block;line-height:34px;text-align:center;float:left}
+    .user-header .account .name a{position: relative;margin-left:30px;width:118px;height:34px;border:1px solid #E15616;border-radius:2px;background-color:#ffe6dc;color:#E15616;display:block;line-height:34px;text-align:center;float:left}
+    .user-header .account .name a .name-tips{width: 44px;height: 19px;line-height: 19px;text-align: center;border-radius: 10px;background-color: #ffe6dc;font-size: 12px;color: #E15616;position: absolute;right: -20px;top: -25px;z-index: 99;}
+    .user-header .account .name a .name-tips:before{content: '';width: 6px;height: 6px;background-color: #ffe6dc;position: absolute;bottom: -3px;left: 12px;z-index: -1;transform:rotate(45deg);}
     .user-header .account .msg{width:100%;font-size:14px;line-height:26px;color:#22272e;margin-top:20px}
     .user-header .account .msg em{color:#22272e;display:inline-block;margin-right:8px}
     .user-header .account .msg .red{color:#f94b4b;font-style:normal;margin:0 5px}
@@ -36,6 +38,9 @@ li{list-style:none}
     .user-content .section{width: 100%;height: auto;}
     .user-content .section .user-main{width: 100%;height:auto;background-color: #FFFFFF;box-sizing: border-box;padding: 20px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-bottom: 10px;}
     .user-content .section .user-main.tabs{height: 90px;padding: 15px 20px;}
+    .user-content .section .user-main.account{height: 78px;}
+    .user-content .section .user-main.account .account-cell{line-height: 34px;font-size:14px;color: #333333;float: left;margin-right: 80px;display: block;}
+    .user-content .section .user-main.account .account-cell .red{font-size:16px;color: #f94b4b;font-weight: bold;}
     .user-content .section .user-main .tabs-left{height: 100%;float: left;}
     .user-content .section .user-main .tabs-left .item{width: 50px;height: 100%;float: left;margin:0 40px;}
     .user-content .section .user-main .tabs-left .item a{width: 100%;height: 100%;display: block;}
@@ -85,6 +90,7 @@ li{list-style:none}
     .user-content .section .user-main .new-list .time{line-height: 36px;font-size: 12px;color: #9aa5b5;float: right;}
     .user-content.coupon{width: 100%;height: 240px}
     .user-content.coupon .coupon_img{width: 100%;height: 100%;}
+
 }
 
 /**
@@ -113,6 +119,7 @@ li{list-style:none}
     .user-content .user-main .tabs-left .item{width:20.8vw;height:8.4vw;line-height:8.4vw;text-align:center;border-radius:4.2vw;border:1px solid #b8bfca;font-size:3.3vw;color:#627386;margin:3.3vw 4vw 0 4vw;position:relative}
     .user-content .user-main .tabs-left .item .icon span{height:4.6vw;line-height:4.6vw;padding:0 .6vw;border-radius:2.1vw;font-size:3.1vw;background-color:#f55c5c;color:#FFF;font-style:normal;position:absolute;right:1vw;top:-2vw}
     .user-content .title{box-sizing:border-box;padding:0 3.2vw;height:10.3vw;line-height:10.3vw;font-size:3.4vw;color:#22272e}
+    .user-content .title.order{height:6vw;line-height:6vw;}
     .user-content .title a{float:right;color:#627386}
     .user-content .title a:after{content:'\276F';margin-left:1vw}
     .user-content .user-main.product{box-sizing:border-box;width:100%;height:43vw;padding:0 3.2vw;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}

src/main/resources/static/css/user-center/order/detail.css

@@ -110,6 +110,8 @@ li{list-style:none}
     .section-botton .btn{width: 88px;height: 34px;border-radius: 2px;border: 1px solid #FFF;float: right;margin-left: 16px;font-size: 14px;line-height: 34px;text-align: center;display: block;}
     .section-botton .btn.cancel{border-color: #9aa5b5;background-color: #FFFFFF;color: #22272e;}
     .section-botton .btn.primary{border-color: #E15616;background-color: #E15616;color: #FFFFFF;}
+    .section-botton .btn.primary .tips{width: 44px;height: 19px;line-height: 19px;text-align: center;border-radius: 10px;background-color: #ffe6dc;font-size: 12px;color: #E15616;position: absolute;right:0px;top: -25px;z-index: 99;}
+    .section-botton .btn.primary .tips:before{content: '';width: 6px;height: 6px;background-color: #ffe6dc;position: absolute;bottom: -3px;left: 12px;z-index: -1;transform:rotate(45deg);}
     .section-botton .btn.primary.confirm{line-height: 17px;}
     .section-botton .shopinfo{float: right;height: 100%;margin-right: 10px;}
     .section-botton .price-total{text-align: right;color: #22272e;font-size: 16px;float: right;padding-top: 0;line-height: 36px;}

src/main/resources/static/css/user-center/order/orderlist.css

@@ -65,7 +65,9 @@ li{list-style:none}
     .order-container .section .user-main .order-content .order-botton{width: 100%;height: 36px;float: left;margin-top: 8px;}
     .order-container .section .user-main .order-content .order-botton .btn{width: 88px;height: 34px;border-radius: 2px;border: 1px solid #FFF;float: right;margin-left: 16px;font-size: 14px;line-height: 34px;text-align: center;display: block;}
     .order-container .section .user-main .order-content .order-botton .btn.cancel{border-color: #9aa5b5;background-color: #FFFFFF;color: #22272e;}
-    .order-container .section .user-main .order-content .order-botton .btn.primary{border-color: #E15616;background-color: #E15616;color: #FFFFFF;}
+    .order-container .section .user-main .order-content .order-botton .btn.primary{border-color: #E15616;background-color: #E15616;color: #FFFFFF;position: relative;}
+    .order-container .section .user-main .order-content .order-botton .btn.primary .tips{width: 44px;height: 19px;line-height: 19px;text-align: center;border-radius: 10px;background-color: #ffe6dc;font-size: 12px;color: #E15616;position: absolute;right:0px;top: -25px;z-index: 99;}
+    .order-container .section .user-main .order-content .order-botton .btn.primary .tips:before{content: '';width: 6px;height: 6px;background-color: #ffe6dc;position: absolute;bottom: -3px;left: 12px;z-index: -1;transform:rotate(45deg);}
     .order-container .section .user-main .order-content .order-botton .btn.primary.confirm{line-height: 15px;}
     .order-container .section .user-main .order-content .order-botton .btn.primary.confirm p{line-height: 15px;}
     .order-container .section .user-main.product{height: 260px;padding: 20px 20px 10px 20px;}

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

@@ -0,0 +1,76 @@
+;
+var helpSuggestion = new Vue({
+    el: "#dashboard",
+    data: {
+        btnLoading: false,
+        isRequset:true,
+        userId: 0,
+        degree:'',
+        userInfo:{},
+        formData:new FormData(),
+        unReadMessageCount:'',//消息数
+        confirmedCount:'',//待確認數量
+        paymentCount:'',//待付款
+        waitShipmentsCount:'',//待发货
+        shipmentsCount:'',//已发货
+        salesReturnCount:'',//退货款
+        productList:[],//推荐商品
+        newsList:[],//新闻动态
+    },
+    methods: {
+        GetMyPcCenterInfo:function(){
+            var _self = this;
+            UserApi.GetMyPcCenterInfo({userId:_self.userId},function (response) {
+                if(response.code == 0){
+                    var data = response.data;
+                    _self.userInfo = data.user;
+                    _self.degree = data.degree;
+                    _self.unReadMessageCount = _self.showBadge(data.unReadMessageCount);
+                    _self.confirmedCount = _self.showBadge(data.confirmedCount);
+                    _self.paymentCount = _self.showBadge(data.paymentCount);
+                    _self.waitShipmentsCount = _self.showBadge(data.waitShipmentsCount);
+                    _self.shipmentsCount = _self.showBadge(data.shipmentsCount);
+                    _self.salesReturnCount = _self.showBadge(data.salesReturnCount);
+                    _self.productList = data.homePageAdvertiseList;
+                    _self.newsList = data.homePageInfoList;
+                    _self.isRequset = false;
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                    _self.isRequset = false;
+                }
+            })
+        },
+        uploadUserPuploadAvatar: function(event){//上传头像
+            var _self = this;
+            var inputDOM = _self.$refs.clubUseLogo;
+            var file = inputDOM.files;
+            _self.formData.append('file', file[0]);
+            PublicApi.uploadimg(_self.formData,function(response){
+                _self.userInfo.image = response.data;
+                event.target.value = '';
+                UserApi.UserPuploadAvatar({userId:_self.userId,image:response.data},function(res){
+                    if(res.code==0){
+                        _self.GetMyPcCenterInfo();
+                    }
+                })
+            });
+        },
+        orderListPath:function(index){
+            window.location.href='/user/order/list.html?state='+index;
+        },
+        showBadge:function(n){//处理标签
+            var num ='';
+            if(n>100){num = 99}else{num = n;}
+            return num;
+        },
+        toFixedFn:function(text){//处理小数点后两位数
+            return Number(text).toFixed(2);
+        },
+    },
+    mounted: function () {
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.GetMyPcCenterInfo();
+        }
+    }
+});

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

@@ -0,0 +1,209 @@
+;
+var orderPage = new Vue({
+    el: "#orderPage",
+    data: {
+        isRequset:true,
+        noMore: false,
+        userId: 0,
+        tabsListIndex:0,
+        tabsList: [
+            {value: 0,text: '全部'},
+            {value: 1,text: '获取'},
+            {value: 2,text: '消耗'}
+        ],
+        listQuery:{
+            year:'',
+            month:'',
+            type:0,
+            pageNum:1,
+            pageSize:10
+        },
+        beansList:[
+            {
+                type:1,
+                state:1,
+                number:100,
+                time:'2021-05-12 11:53:26'
+            },
+            {
+                type:1,
+                state:2,
+                number:500,
+                time:'2021-05-12 11:53:26'
+            },
+            {
+                type:2,
+                state:3,
+                number:1000,
+                time:'2021-05-12 11:53:26'
+            }
+        ],
+        listRecord: 0,
+        pageInput: '1',
+        orderList:[],
+        confirmedCount:'',//待確認數量
+        paymentCount:'',//待付款
+        waitShipmentsCount:'',//待发货
+        shipmentsCount:'',//已发货
+        salesReturnCount:'',//退货款
+        modelType:0,
+        orderIdentificationId:0,
+        payModelData:{},
+        hanldOrderData:{},//监听点击的单个订单项的按钮
+        confrimsBtn:true,
+    },
+    filters: {
+        NumFormat:function(text) {//处理金额
+            return Number(text).toFixed(2);
+        },
+        NumBadge:function(n){//处理
+            var num ='';
+            if(n>100){num = 99}else{num = n;}
+            return num;
+        },
+        stateTypeText:function(type){
+            var stateText = '',
+                stateTextObject={
+                    1:'获取',
+                    2:'消耗'
+                };
+            Object.keys(stateTextObject).forEach(function(key){
+                if(key == type){
+                    stateText = stateTextObject[key]
+                }
+            });
+            return stateText;
+        },
+        stateText:function (state){ //采美豆类型文字
+            var stateText = '',
+                stateTextObject={
+                    1:'注册机构',
+                    2:'升级会员机构',
+                    3:'普通机构完善资料',
+                    4:'会员机构完善资料',
+                    5:'下单',
+                    6:'线上支付订单',
+                    7:'确认收货',
+                    8:'系统发放',
+                    9:'抵用退回',
+                    10:'抵用运费',
+                    11:'退款回收'
+                };
+            Object.keys(stateTextObject).forEach(function(key){
+                if(key == state){
+                    stateText = stateTextObject[key]
+                }
+            });
+            return stateText;
+        }
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        tabClick:function(index){//点击Tab切换查询列表
+            var  _self = this;
+            _self.tabsListIndex = index;
+            _self.listQuery.type = index;
+        },
+        initDate:function(){//初始化获取当前年月
+            var _self = this;
+            var _Date = new Date();
+            _self.listQuery.year = _Date.getFullYear();
+            _self.listQuery.month = _Date.getMonth();
+            console.log('当前年份==========>', _self.listQuery.year);
+            console.log('当前月份==========>', _self.listQuery.month);
+        },
+        reduceMonth:function(){//减月份
+            var _self = this;
+            _self.listQuery.month--;
+            if(_self.listQuery.month == 0){
+                _self.listQuery.year--;
+                _self.listQuery.month = 12;
+            }
+            console.log('年==========>', _self.listQuery.year);
+            console.log('月==========>', _self.listQuery.month);
+        },
+        addMonth:function(){//加月份
+            var _self = this;
+            _self.listQuery.month++;
+            if(_self.listQuery.month > 12){
+                _self.listQuery.year++;
+                _self.listQuery.month = 1;
+            }
+        },
+        toPagination: function (pageNum) {//点击切换分页
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum;
+                this.GetQueryOrderListData();
+            }
+        },
+        checkNum: function () {//输入跳转分页
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        changeOrderFn:function(index,status){
+            var  _self = this;
+            _self.orderTabBarIndex = index;
+            _self.listQuery.orderState = status;
+            _self.listQuery.searchNo = '';
+            _self.listQuery.beginTime = '';
+            _self.listQuery.endTime = '';
+            _self.listQuery.pageNum = 1;
+            _self.isRequset = true;
+            _self.GetQueryOrderListData()
+        },
+        GetQueryOrderListData:function(){//查询订单列表
+            var _self = this;
+            OrderApi.GetQueryOrderListData(_self.listQuery,function (response) {
+                if(response.code == 0){
+                    var data = response.data;
+                    if(data.results && data.results.length>0) {
+                        _self.orderList = [];
+                        _self.orderList = data.results;
+                        _self.listRecord = data.totalRecord;
+                    }else{
+                        _self.orderList = [];
+                        _self.orderList = data.results;
+                        _self.listRecord = data.totalRecord;
+                    }
+                    _self.isRequset = false;
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        }
+    },
+    mounted: function () {
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.listQuery.orderState = CAIMEI.getUrlParam('state');
+            this.listQuery.userId = this.userId;
+            this.GetQueryOrderListData();
+            this.initDate();
+        }
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(0).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        var _self = this;
+    }
+});

src/main/resources/static/js/user-center/dashboard.js

@@ -16,6 +16,10 @@ var helpSuggestion = new Vue({
         salesReturnCount:'',//退货款
         productList:[],//推荐商品
         newsList:[],//新闻动态
+        isShowBeansAlet:true,
+        bgImagePath:'',//根据类型显示图片标记
+        beanNumber:100,
+        beansType:1
     },
     methods: {
         GetMyPcCenterInfo:function(){
@@ -66,11 +70,22 @@ var helpSuggestion = new Vue({
         toFixedFn:function(text){//处理小数点后两位数
             return Number(text).toFixed(2);
         },
+        handInitType:function(type){
+            var _self = this;
+            _self.bgImagePath ='/img/account/icon-beans-'+type+'@2x.png';
+            console.log(this.bgImagePath)
+        },
+        handleClickCancel:function () {//关闭弹窗
+            var _self = this;
+            _self.isShowBeansAlet = false;
+        }
     },
     mounted: function () {
+        var _self = this;
         if(globalUserData){
-            this.userId = globalUserData.userId;
-            this.GetMyPcCenterInfo();
+            _self.userId = globalUserData.userId;
+            _self.GetMyPcCenterInfo();
+            _self.handInitType(_self.beansType)
         }
     }
 });

src/main/resources/static/js/user-center/order/detail.js

@@ -13,7 +13,11 @@ var orderPage = new Vue({
         returnedPurchaseList:[],//订单退款信息
         orderIdentificationId:'',//订单标识
         modelType:0,
-        isFiexd:true
+        isFiexd:true,
+        isShowBeansAlet:true,
+        bgImagePath:'',//根据类型显示图片标记
+        beanNumber:100,
+        beansType:7
     },
     filters: {
         NumFormat:function(text) {//处理金额
@@ -296,13 +300,23 @@ var orderPage = new Vue({
             $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
             if(!isPC){looseBody();}
         },
+        handInitType:function(type){
+            var _self = this;
+            _self.bgImagePath ='/img/account/icon-beans-'+type+'@2x.png';
+            console.log(this.bgImagePath)
+        },
+        handleClickCancel:function () {//关闭弹窗
+            var _self = this;
+            _self.isShowBeansAlet = false;
+        }
     },
     mounted: function () {
         var _self = this;
         if(globalUserData){
-            this.userId = globalUserData.userId;
-            this.orderId = CAIMEI.getUrlParam('orderId');
-            this.GetQueryOrderDetailsInfo();
+            _self.userId = globalUserData.userId;
+            _self.orderId = CAIMEI.getUrlParam('orderId');
+            _self.GetQueryOrderDetailsInfo();
+            _self.handInitType(_self.beansType)
         }
         $(window).scroll(function (event) {
             var supportPageOffset = window.pageXOffset !== undefined; // 判断是否支持pageXOffset

src/main/resources/static/js/user-center/order/list.js

@@ -36,6 +36,10 @@ var orderPage = new Vue({
         payModelData:{},
         hanldOrderData:{},//监听点击的单个订单项的按钮
         confrimsBtn:true,
+        isShowBeansAlet:true,
+        bgImagePath:'',//根据类型显示图片标记
+        beanNumber:100,
+        beansType:7
     },
     filters: {
         NumFormat:function(text) {//处理金额
@@ -347,19 +351,29 @@ var orderPage = new Vue({
             document.body.removeChild(oInput);
             CAIMEI.dialog('复制成功');
         },
+        handInitType:function(type){
+            var _self = this;
+            _self.bgImagePath ='/img/account/icon-beans-'+type+'@2x.png';
+            console.log(this.bgImagePath)
+        },
+        handleClickCancel:function () {//关闭弹窗
+            var _self = this;
+            _self.isShowBeansAlet = false;
+        }
     },
     mounted: function () {
+        var _self = this;
         if(globalUserData){
-            this.userId = globalUserData.userId;
-            this.listQuery.orderState = CAIMEI.getUrlParam('state');
-            this.listQuery.userId = this.userId;
-            this.orderTabBarIndex = this.listQuery.orderState;
-            this.GetQueryOrderListData();
-            this.GetQueryOrderNumInfo();
+            _self.userId = globalUserData.userId;
+            _self.listQuery.orderState = CAIMEI.getUrlParam('state');
+            _self.listQuery.userId = this.userId;
+            _self.orderTabBarIndex = this.listQuery.orderState;
+            _self.GetQueryOrderListData();
+            _self.GetQueryOrderNumInfo();
+            _self.handInitType(_self.beansType)
         }
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(0).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
-        var _self = this;
         var startDate = getDateStr(new Date(), -365), endDate = getDateStr(new Date(),0);
         $('#orderDate').dateRangePicker({
             language: 'cn',

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

@@ -0,0 +1,172 @@
+<!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/dashboard.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="dashboard">
+    <div class="navLayout" v-cloak>
+        <div v-if="isPC" class="crumbs">
+            <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>
+                <template v-else>
+                    <div class="user-header mfbt">
+                        <div class="logo">
+                            <input ref="clubUseLogo"  class="logo-file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadUserPuploadAvatar">
+                            <i class="file icon mIcon" v-if="userInfo.image == null"></i>
+                            <img v-else :src="userInfo.image == null ? '' : userInfo.image" alt="">
+                        </div>
+                        <div class="account">
+                            <div class="name">
+                                <span>{{userInfo.name}}</span>
+                                <a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4">
+                                    去升级会员机构
+                                    <div class="name-tips">采美豆</div>
+                                </a>
+                            </div>
+                            <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
+                        </div>
+                        <div class="message">
+                            <a href="/user/message/list.html">
+                                <i class="icon mIcon">
+                                    <span  v-if="unReadMessageCount>0" :class="[unReadMessageCount < 10 ? 'circular':'ellipse']">{{unReadMessageCount >= 99 ? '99+' : unReadMessageCount}}</span>
+                                </i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="user-content clear">
+                        <div class="title order">我的资产</div>
+                        <div class="section">
+                            <div class="user-main account">
+                                <a href="javascript:void(0);" class="account-cell">
+                                    <span>账户余额：</span>
+                                    <span class="red">{{toFixedFn(userInfo.ableUserMoney)}}</span>
+                                </a>
+                                <a href="" class="account-cell">
+                                    <span>采美豆：</span>
+                                    <span class="red">30000</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="user-content clear">
+                        <div class="title order">我的订单</div>
+                        <div class="section">
+                            <div class="user-main tabs">
+                                <div class="tabs-left mfw">
+                                    <div v-if="!isPC" class="item">
+                                        <a href="javascript:void(0);" @click="orderListPath(0)">
+                                            <span class="p">全部订单</span>
+                                        </a>
+                                    </div>
+                                    <div class="item">
+                                        <a href="javascript:void(0);" @click="orderListPath(1)">
+                                            <i class="icon icon-1">
+                                                <span v-if="confirmedCount>0" :class="[confirmedCount < 10 ? 'circular':'ellipse']">{{confirmedCount >= 99 ? '99+' : confirmedCount}}</span>
+                                            </i>
+                                            <span class="p">待确认</span>
+                                        </a>
+                                    </div>
+                                    <div class="item">
+                                        <a href="javascript:void(0);" @click="orderListPath(2)">
+                                            <i class="icon icon-2">
+                                                <span v-if="paymentCount>0" :class="[paymentCount < 10 ? 'circular':'ellipse']">{{paymentCount >= 99 ? '99+' : paymentCount}}</span>
+                                            </i>
+                                            <span class="p">待付款</span>
+                                        </a>
+                                    </div>
+                                    <div class="item">
+                                        <a href="javascript:void(0);" @click="orderListPath(3)">
+                                            <i class="icon icon-3">
+                                                <span v-if="waitShipmentsCount>0" :class="[waitShipmentsCount < 10 ? 'circular':'ellipse']">{{waitShipmentsCount >= 99 ? '99+' : waitShipmentsCount}}</span>
+                                            </i>
+                                            <span class="p">待发货</span>
+                                        </a>
+                                    </div>
+                                    <div class="item">
+                                        <a href="javascript:void(0);" @click="orderListPath(4)">
+                                            <i class="icon icon-4">
+                                                <span v-if="shipmentsCount>0" :class="[shipmentsCount < 10 ? 'circular':'ellipse']">{{shipmentsCount >= 99 ? '99+' : shipmentsCount}}</span>
+                                            </i>
+                                            <span class="p">已发货</span>
+                                        </a>
+                                    </div>
+                                    <div class="item">
+                                        <a href="javascript:void(0);" @click="orderListPath(5)">
+                                            <i class="icon icon-5">
+                                                <span v-if="salesReturnCount>0" :class="[salesReturnCount < 10 ? 'circular':'ellipse']">{{salesReturnCount >= 99 ? '99+' : salesReturnCount}}</span>
+                                            </i>
+                                            <span class="p">退货/款</span>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div v-if="isPC" class="tabs-right"><a href="javascript:void(0);" @click="orderListPath(0)">全部订单<span class="icon mIcon"></span></a></div>
+                            </div>
+                        </div>
+                    </div>
+                    <!--美博会活动标题-->
+<!--                    <div class=" user-content coupon">-->
+<!--                        <a href="/user/beautyfair.html" id="meibohui" onclick="_czc.push(['_trackEvent','美博会','点击','用户访问','','meibohui'])">-->
+<!--                            <img src="https://static.caimei365.com/app/meibohui/www/activity-in-pc.jpg" class="coupon_img" v-if="isPC"/>-->
+<!--                            <img src="https://static.caimei365.com/app/meibohui/www/activity-in-h5.jpg" class="coupon_img" v-else>-->
+<!--                        </a>-->
+<!--		            </div>-->
+                    <div class="user-content">
+                        <div class="title">今日推荐</div>
+                        <div class="section">
+                            <div class="user-main product clear">
+                                <a class="product-item" v-for="(item, index) in productList" :key="index" :href="item.link" target="_blank">
+                                    <div class="product-img">
+                                        <img :src="item.image" :alt="item.title">
+                                    </div>
+                                    <div class="product-name"><p>{{item.title}}</p></div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="user-content">
+                        <div class="title">最新动态<a href="/info/center-3-1.html" target="_blank">全部动态<i class="icon mIcon"></i></a></div>
+                        <div class="section">
+                            <div class="user-main news">
+                                <a class="new-list" v-for="(item, index) in newsList" :key="index" :href="item.link" target="_blank">
+                                    <p class="text">{{item.title}}</p>
+                                    <p class="time">{{item.addTime}}</p>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+    <!--loading-->
+    <div v-else class="loading">
+        <img src="/img/base/loading.gif">
+    </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/dashboard.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -0,0 +1,111 @@
+<!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/beans.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 我的订单 -->
+<div id="orderPage" 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">
+                <div class="beans-header">
+                    <div class="beans-header-l">
+                        <span>可用数量：</span>
+                        <span class="big">2000</span>
+                    </div>
+                    <div class="beans-header-r">
+                        <a href="">查看采美豆说明<i class="icon mIcon"></i></a>
+                    </div>
+                </div>
+                <!--loading-->
+                <div v-if="isRequset" class="loading">
+                    <img src="/img/base/loading.gif">
+                </div>
+                <div class="beans-container clear" v-else>
+                    <div class="beans-content-tabs">
+                        <div class="tabs-main">
+                            <div class="time-template">
+                                <a href="javascript:void(0);" class="time-pre" @click="reduceMonth">
+                                    <i class="icon mIcon"></i>
+                                </a>
+                                <div class="time-text">
+                                    {{ ( listQuery.year ||'') +'年'+( listQuery.month ||'') +'月'}}
+                                </div>
+                                <a href="javascript:void(0);" class="time-next" @click="addMonth">
+                                    <i class="icon mIcon"></i>
+                                </a>
+                            </div>
+                            <div class="time-tabs">
+                                <a href="javascript:void(0);"
+                                   class="time-tabs-cell"
+                                   v-for="(tabs, index) in tabsList"
+                                   :key="index"
+                                   :class="tabsListIndex == index ? 'active' : ''"
+                                   @click="tabClick(index)"
+                                >
+                                    {{ tabs.text }}
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <!--数据为空-->
+                    <div class="beans-content-list" v-if="beansList.length > 0">
+                        <div class="beans-list-cell" v-for="(beans, index) in beansList" :key="index">
+                            <div class="list-cell-left">
+                                <p class="black">{{ beans.state | stateText }}</p>
+                                <p class="none">{{ beans.time }}</p>
+                            </div>
+                            <div class="list-cell-right">
+                                <p class="black">{{ beans.type | stateTypeText }}</p>
+                                <p class="blod" :style="{color:beans.type == 1 ? '#ff2a2a' : '#15C47A'}"><span>{{beans.type =='1'? '+' : '-'}}</span>{{ beans.number }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="empty">
+                        <img src="/img/common/empty.png">
+                        <div class="msg"><p>暂无数据</p></div>
+                    </div>
+                </div>
+                <!--分页-->
+                <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+                <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+                    <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
+                    <template v-for="n in showPageBtn">
+                        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+                        <span v-else>···</span>
+                    </template>
+                    <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)" href="javascript:void(0);"></a>
+                    <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+                    <span>跳至</span>
+                    <input v-model="pageInput" @blur="checkNum()"/>
+                    <span>页</span>&nbsp;
+                    <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+                </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" src="/lib/datapicker/moment.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/beans.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -34,8 +34,13 @@
                             <img v-else :src="userInfo.image == null ? '' : userInfo.image" alt="">
                         </div>
                         <div class="account">
-                            <div class="name"><span>{{userInfo.name}}</span><a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4">去升级会员机构</a></div>
-                            <div class="money">余额: <em>{{toFixedFn(userInfo.ableUserMoney)}}</em> 元</div>
+                            <div class="name">
+                                <span>{{userInfo.name}}</span>
+                                <a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4">
+                                    去升级会员机构
+                                    <div class="name-tips">采美豆</div>
+                                </a>
+                            </div>
                             <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
                         </div>
                         <div class="message">
@@ -47,7 +52,22 @@
                         </div>
                     </div>
                     <div class="user-content clear">
-                        <div v-show="isPC" class="title">我的订单</div>
+                        <div class="title order">我的资产</div>
+                        <div class="section">
+                            <div class="user-main account">
+                                <a href="javascript:void(0);" class="account-cell">
+                                    <span>账户余额：</span>
+                                    <span class="red">{{toFixedFn(userInfo.ableUserMoney)}}</span>
+                                </a>
+                                <a href="/user/beans.html" class="account-cell">
+                                    <span>采美豆：</span>
+                                    <span class="red">30000</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="user-content clear">
+                        <div class="title order">我的订单</div>
                         <div class="section">
                             <div class="user-main tabs">
                                 <div class="tabs-left mfw">
@@ -140,6 +160,25 @@
     <div v-else class="loading">
         <img src="/img/base/loading.gif">
     </div>
+    <!-- 采美豆弹窗 -->
+    <div class="cmbeans-alert-box" v-if="isShowBeansAlet">
+        <div class="cmbeans-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
+            <div class="cmbeans-alert-content-text">恭喜您获得采美豆！</div>
+            <div class="cmbeans-alert-content-bean">
+                <div class="cmbeans-alert-main">
+                    <img class="cmbeans-alert-icon" src="/img/account/bean-icon@3x.png" mode="">
+                    <div class="cmbeans-alert-text">
+                        <span class="icon-add">+</span>
+                        <span class="icon-text">{{ beanNumber }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="cmbeans-alert-content-tips">
+                <div class="tips">采美豆可抵扣运费</div>
+            </div>
+            <i class="icon mIcon" @click.stop="handleClickCancel"></i>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->

src/main/resources/templates/user-center/order/detail.html

@@ -228,7 +228,10 @@
                                 <a class="btn primary" href="javascript: void(0);" v-if="['0'].indexOf(orderInfo.status)!=-1"  @click="hanldConfirmOrderFn()">确认订单</a>
 <!--                                <a class="btn cancel" href="javascript: void(0);" v-if="['6'].indexOf(orderInfo.status)!=-1" @click="hanldDeleteOrderFn()">删除订单</a>-->
                                 <a class="btn cancel" href="javascript: void(0);"  v-if="['4','5','12','13','33','22','23','32','77'].indexOf(orderInfo.status)!=-1 && orderInfo.secondHandOrderFlag!=1" @click="hanldQueryExpressFn()">查看物流</a>
-                                <a class="btn primary" href="javascript: void(0);"  v-if="['33'].indexOf(orderInfo.status)!=-1" @click="hanldReceivingOrderFn()">确认收货</a>
+                                <a class="btn primary" href="javascript: void(0);"  v-if="['33'].indexOf(orderInfo.status)!=-1" @click="hanldReceivingOrderFn()">
+                                    确认收货
+                                    <div class="tips">采美豆</div>
+                                </a>
                                 <div class="shopinfo" v-if="['11','12','13','21','22','23','111'].indexOf(orderInfo.status)!=-1">
                                     <p class="price-total" v-if="orderInfo.pendingPayments!=0">待付金额：<span class="red">￥{{orderInfo.pendingPayments | NumFormat}}</span> </p>
                                 </div>
@@ -239,6 +242,25 @@
             </div>
         </div>
     </div>
+    <!-- 采美豆弹窗 -->
+    <div class="cmbeans-alert-box" v-if="isShowBeansAlet">
+        <div class="cmbeans-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
+            <div class="cmbeans-alert-content-text">恭喜您获得采美豆！</div>
+            <div class="cmbeans-alert-content-bean">
+                <div class="cmbeans-alert-main">
+                    <img class="cmbeans-alert-icon" src="/img/account/bean-icon@3x.png" mode="">
+                    <div class="cmbeans-alert-text">
+                        <span class="icon-add">+</span>
+                        <span class="icon-text">{{ beanNumber }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="cmbeans-alert-content-tips">
+                <div class="tips">采美豆可抵扣运费</div>
+            </div>
+            <i class="icon mIcon" @click.stop="handleClickCancel"></i>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->

src/main/resources/templates/user-center/order/list.html

@@ -107,7 +107,10 @@
                                     <a class="btn primary" href="javascript: void(0);" v-if="['0'].indexOf(order.status)!=-1"  @click="hanldConfirmOrderFn(order.orderID)">确认订单</a>
 <!--                                    <a class="btn cancel" href="javascript: void(0);" v-if="['6'].indexOf(order.status)!=-1" @click="hanldDeleteOrderFn(order.orderID)">删除订单</a>-->
                                     <a class="btn cancel" href="javascript: void(0);"  v-if="['4','5','12','13','33','22','23','32','77'].indexOf(order.status)!=-1 && order.secondHandOrderFlag !=1" @click="hanldQueryExpressFn(order.orderID)">查看物流</a>
-                                    <a class="btn primary" href="javascript: void(0);"  v-if="['33'].indexOf(order.status)!=-1 && order.secondHandOrderFlag !=1" @click="hanldReceivingOrderFn(order.orderID)">确认收货</a>
+                                    <a class="btn primary" href="javascript: void(0);"  v-if="['33'].indexOf(order.status)!=-1 && order.secondHandOrderFlag !=1" @click="hanldReceivingOrderFn(order.orderID)">
+                                        确认收货
+                                        <div class="tips">采美豆</div>
+                                    </a>
                                 </div>
                             </div>
                         </div>
@@ -135,6 +138,25 @@
             </div>
         </div>
     </div>
+    <!-- 采美豆弹窗 -->
+    <div class="cmbeans-alert-box" v-if="isShowBeansAlet">
+        <div class="cmbeans-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
+            <div class="cmbeans-alert-content-text">恭喜您获得采美豆！</div>
+            <div class="cmbeans-alert-content-bean">
+                <div class="cmbeans-alert-main">
+                    <img class="cmbeans-alert-icon" src="/img/account/bean-icon@3x.png" mode="">
+                    <div class="cmbeans-alert-text">
+                        <span class="icon-add">+</span>
+                        <span class="icon-text">{{ beanNumber }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="cmbeans-alert-content-tips">
+                <div class="tips">采美豆可抵扣运费</div>
+            </div>
+            <i class="icon mIcon" @click.stop="handleClickCancel"></i>
+        </div>
+    </div>
 </div>
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>