绘制会员中心页面

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

@@ -58,6 +58,8 @@ public class UserPageController extends BaseController {
 	private static final String COUPON_COLLECTION = "user-center/account/coupon-collection";
 	/** 兑换优惠券 */
 	private static final String COUPON_EXCHANGE = "user-center/account/coupon-exchange";
+	/** 兑换优惠券 */
+	private static final String MEMBER_PAGE = "user-center/member/member";
 
     /** 我的采美 */
     @GetMapping("/user/dashboard.html")
@@ -180,4 +182,7 @@ public class UserPageController extends BaseController {
     @GetMapping("/user/coupon-exchange.html")
     public String couponExchange() {return COUPON_EXCHANGE;}
 
+    /** 兑换优惠券 */
+    @GetMapping("/user/member.html")
+    public String member() {return MEMBER_PAGE;}
 }

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

@@ -13,11 +13,18 @@ li{list-style:none}
     .user-header .logo .file:before{width:40px;height:40px;background-position:-161px -367px;vertical-align:middle}
     .user-header .logo img{width:110px;height:78px;display:block;border-radius:2px}
     .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{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 .name{width:100%;height:36px;float:left;margin-bottom:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
+    .user-header .account .name a,.user-header .account .name span{display:block;margin-left:8px}
+    .user-header .account .name .username{line-height:36px;font-size:18px;font-weight:bold;color:#22272e;display:inline-block;float:left}
+    .user-header .account .name .update{position:relative;width:104px;height:24px;background:#FFE6DC;border:1px solid #E15616;opacity:1;border-radius:2px;color:#E15616;font-size:12px;line-height:22px;text-align:center}
+    .user-header .account .name .update .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 .update .name-tips:before{content:'';width:6px;height:6px;background-color:#ffe6dc;position:absolute;bottom:-3px;left:12px;z-index:-1;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
+    .user-header .account .name .agency{width:64px;height:24px;text-align:center;line-height:22px;border-radius:2px;font-size:12px;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .user-header .account .name .agency.vip{background:#E7EAEF;border:1px solid #627386;color:#627386}
+    .user-header .account .name .agency.svip{background:#FFF2D5;border:1px solid #FFD54F;color:#E4AA43}
+    .user-header .account .name .vip-icon{width:32px;height:24px;text-align:center;line-height:24px;border-radius:2px;font-size:12px;font-weight:400}
+    .user-header .account .name .vip-icon.vip{color:#4E4539;background:#F0CB72}
+    .user-header .account .name .vip-icon.svip{color:#F0CB72;background:#333333}
     .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}
@@ -90,7 +97,16 @@ 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%;}
-
+    /*SVIP*/
+    .svip-content{margin-top:10px}
+    .svip-content .title{width:100%;height:44px;line-height:44px;font-size:16px;text-align:left;color:#22272e;padding:0 20px}
+    .svip-content .section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:968px;height:78px;padding:0 24px 0 110px;background:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-bg-01.png) no-repeat center;background-size:968px 78px;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .svip-content .section div{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#F0CB72}
+    .svip-content .section div span:first-child{font-size:16px;font-weight:400;color:#F0CB72}
+    .svip-content .section div span.error{color: #FF2A2A}
+    .svip-content .section div span:last-child{font-size:14px;font-weight:400;color:#BCBCBC;margin-left: 10px}
+    .svip-content .section a.btn{width:104px;height:36px;color:#4E4539;text-align:center;line-height:36px;background:-webkit-gradient(linear,right top,left top,from(#FEE9BA),to(#F0CB72));background:-o-linear-gradient(right,#FEE9BA 0%,#F0CB72 100%);background:linear-gradient(270deg,#FEE9BA 0%,#F0CB72 100%);border-radius:2px}
+    .svip-content .section a.link{font-size:16px;font-weight:400;color:#F0CB72}
 }
 
 /**
@@ -103,18 +119,30 @@ li{list-style:none}
     .user-header .logo .file{position:absolute;top:5vw;left:9vw;width:9vw;height:9vw}
     .user-header .logo .file:before{width:9vw;height:9vw;background-position:-7.5vw -60.3vw}
     .user-header .logo img{max-width:100%;max-height:100%;display:block;margin:0 auto;}
-    .user-header .account{width:64vw;height:quto;box-sizing:border-box;color:#9aa5b5;font-size:3.1vw;line-height:6.4vw;position:relative}
+    .user-header .account{width:64vw;height:auto;box-sizing:border-box;color:#9aa5b5;font-size:3.1vw;line-height:6.4vw;position:relative}
     .user-header .account .name{font-size:3.7vw;color:#22272e}
     .user-header .account em{font-style:normal;color:#e15616}
     .user-header .account .name a,.user-header .account .msg a{display:inline-block;height:5.4vw;line-height:5.4vw;padding:0 2vw;color:#FFF;border-radius:2px;margin-left:2vw}
     .user-header .account .name a{background-color:#e15616;position: relative;}
     .user-header .account .name a .name-tips{width: 11.6vw;height: 4.8vw;line-height: 4.8vw;text-align: center;border-radius: 2.4vw;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{ margin-top: 1.2vw;}
     .user-header .account .msg a{background-color:#313a43}
-    .user-header .account .upgrade{margin-top: 6.5vw;}
-    .user-header .account .upgrade a{position: relative;width: 32.6vw;height: 8.5vw;display: block; background-color:#ffe6dc;box-sizing: border-box;border: 1px solid #E15616;line-height: 8.5vw;text-align: center;color: #E15616;font-size: 3.4vw;border-radius: 4.25vw;}
-    .user-header .account .upgrade a .name-tips{width: 12.6vw;height: 4.8vw;line-height: 4.8vw;text-align: center;border-radius: 2.4vw;background-color: #ffe6dc;font-size: 2.8vw;color: #E15616;position: absolute;right: -2vw;top: -6.5vw;z-index: 99;}
-    .user-header .account .upgrade 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 .user-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}
+    .user-header .account .user-info a,.user-header .account .user-info span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:1.6vw}
+    .user-header .account .user-info .username{width:100%;font-size:3.6vw;font-weight:bold;color:#22272e;display:inline-block}
+    .user-header .account .user-info .update{position:relative;width:28vw;height:5.4vw;background:#FFE6DC;border:1px solid #E15616;opacity:1;border-radius:2px;color:#E15616;font-size:3.2vw;line-height:22px;text-align:center;margin-left:0}
+    .user-header .account .user-info .update .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:0;top:-25px;z-index:99}
+    .user-header .account .user-info .update .name-tips:before{content:'';width:6px;height:6px;background-color:#ffe6dc;position:absolute;bottom:-3px;left:12px;z-index:-1;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
+    .user-header .account .user-info .agency{width:16vw;height:5.4vw;text-align:center;border-radius:2px;font-size:3.2vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .user-header .account .user-info .agency.vip{background:#E7EAEF;border:1px solid #627386;color:#627386}
+    .user-header .account .user-info .agency.svip{background:#FFF2D5;border:1px solid #FFD54F;color:#E4AA43}
+    .user-header .account .user-info .vip-icon{height:5.4vw;text-align:center;border-radius:2px;font-size:3.2vw;font-weight:400}
+    .user-header .account .user-info .vip-icon.vip{width:8vw;color:#4E4539;background:#F0CB72}
+    .user-header .account .user-info .vip-icon.svip{width:9vw;color:#F0CB72;background:#333333}
+    .user-header .account .update a{position: relative;width: 32.6vw;height: 8.5vw;display: block; background-color:#ffe6dc;box-sizing: border-box;border: 1px solid #E15616;line-height: 8.5vw;text-align: center;color: #E15616;font-size: 3.4vw;border-radius: 4.25vw;}
+    .user-header .account .update a .name-tips{width: 12.6vw;height: 4.8vw;line-height: 4.8vw;text-align: center;border-radius: 2.4vw;background-color: #ffe6dc;font-size: 2.8vw;color: #E15616;position: absolute;right: -2vw;top: -6.5vw;z-index: 99;}
+    .user-header .account .update 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 .message{position:absolute;right:0;top:5vw}
     .user-header .message .mIcon{position:absolute;right:0;top:0}
     .user-header .message .mIcon:before{width:8vw;height:8vw;background-position:-16.5vw -60.3vw}
@@ -142,7 +170,16 @@ li{list-style:none}
     .user-content .user-main .new-list .time{color:#9aa5b5}
     .user-content.coupon{width: 100%;height: 32vw;background: none}
     .user-content.coupon .coupon_img{width: 100%;height: 100%;}
+    /*SVIP*/
+    .svip-content{margin-top:2vw}
+    .svip-content .title{display: none}
 
-
+    .svip-content .section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100vw;height:20.6vw;padding:0 5vw 0 17vw ;background:url(https://static.caimei365.com/app/img/svip/h5-cm-svip-bg-01.png) no-repeat center;background-size:100vw 20.6vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .svip-content .section div{-webkit-box-flex:1;-ms-flex:1;flex:1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;color:#F0CB72}
+    .svip-content .section div span:first-child{font-size:3.4vw;font-weight:400;color:#F0CB72}
+    .svip-content .section div span.error{color: #FF2A2A}
+    .svip-content .section div span:last-child{font-size:3.2vw;font-weight:400;color:#BCBCBC;margin-top: 1.6vw}
+    .svip-content .section a.btn{width:19.2vw;height:7.2vw;color:#4E4539;text-align:center;line-height:7.2vw;background:-webkit-gradient(linear,right top,left top,from(#FEE9BA),to(#F0CB72));background:-o-linear-gradient(right,#FEE9BA 0%,#F0CB72 100%);background:linear-gradient(270deg,#FEE9BA 0%,#F0CB72 100%);border-radius:2px}
+    .svip-content .section a.link{font-size:3.2vw;font-weight:400;color:#F0CB72}
 }
 

src/main/resources/static/css/user-center/member/member-page.css

@@ -0,0 +1,279 @@
+/*公共样式*/
+.cm-text-ellipsis-2{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display:-webkit-box;
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2;
+}
+/*pc端样式*/
+@media screen and (min-width:768px){
+.right{width:968px;overflow:hidden}
+.section .section-title span{font-size: 14px;color: #E4AA43;margin-left: 8px}
+.section .section-title{padding:30px 20px 12px;font-size:16px;font-weight:400;color:#22272E}
+.section .content{padding:30px 24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);box-shadow:0px 3px 6px rgba(0,0,0,0.07)}
+.vip-bar{width:968px;height:68px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:104px;line-height:68px;background:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-bg-02.png) no-repeat center;background-size:968px 68px;font-weight:400}
+.vip-bar span:first-child{font-size:16px;line-height:21px;color:#55331D}
+.vip-bar span:last-child{font-size:14px;color:#55331D;opacity:1;margin-left:16px}
+.combo-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.combo-list > div:first-child{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.combo-list .combo{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:122px;height:132px;margin-right:14px;background:#FFFFFF;border:1px solid #F0F0F0;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.combo-list .combo.recommend::after{content:"推荐";position:absolute;top:-4px;left:-1px;z-index:9;width:42px;height:20px;background:#FF2A2A;opacity:1;border-radius:0px 4px 4px 4px;text-align:center;line-height:20px;color:#fff;font-size:14px}
+.combo-list .combo.active{background:#FDF8EE;border:1px solid #F0CC8C}
+.combo-list .combo .how-mounts{font-size:16px;font-weight:400;line-height:21px;color:#22272E}
+.combo-list .combo .price{padding:10px 0;height:31px;font-size:24px;font-weight:bold;line-height:31px;color:#FF2A2A}
+.combo-list .combo .price > i{font-style:unset;font-size:16px;font-weight:400;line-height:21px;color:#FF2A2A}
+.combo-list .combo .average{font-size:14px;font-weight:400;line-height:19px;color:#627386}
+.combo-list > div:last-child{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.combo-list .pay-btn{width:336px;height:50px;background:-webkit-gradient(linear,left top,right top,from(#FEE9BA),to(#F0CB72));background:-o-linear-gradient(left,#FEE9BA 0%,#F0CB72 100%);background:linear-gradient(90deg,#FEE9BA 0%,#F0CB72 100%);border-radius:2px;font-size:16px;font-weight:bold;line-height:21px;color:#55331D}
+.combo-list .pay-btn.plain{margin-top:15px;background:transparent;border:1px solid #F0CB72;border-radius:2px;font-size:16px;font-weight:400;color:#55331D;-webkit-box-sizing:border-box;box-sizing:border-box}
+.combo-list .pay-btn > a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;color:inherit}
+.combo-list .pay-btn > a:hover{color:unset}
+.service-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.service-list>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
+.service-list>div img{display:block;width:64px;height:64px}
+.service-list>div .tit{font-size:16px;font-weight:400;color:#333333;padding:16px 0 8px}
+.service-list>div .sub-tit{font-size:14px;font-weight:400;color:#B8BFCA}
+.coupon-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.coupon-list>div{position:relative;width:219px;height:96px;padding-left:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-coupon-unable.png) no-repeat center;background-size:219px 96px}
+.coupon-list>div.un-received{background-image:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-coupon-able.png)}
+.coupon-list>div .type{position:absolute;left:0;top:0;z-index:9;width:46px;height:18px;font-size:12px;text-align:center;line-height:18px;background:#E4AA43;border-radius:2px 0px 2px 0px}
+.coupon-list>div .amount{padding-top:20px;font-size:26px;font-weight:bold;color:#55331D}
+.coupon-list>div .amount>i{font-size:14px;font-weight:400;color:#55331D;font-style:unset}
+.coupon-list>div .condition{font-size:12px;font-weight:400;color:#55331D}
+.coupon-list>div .receive-btn{width:48px;height:100%;position:absolute;right:0;top:0;z-index:9;font-size:14px;font-weight:400;color:#55331D;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}
+.goods-list {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.goods-list .goods a:hover{color: unset;}
+.goods-list .goods{
+    width: 173px;
+}
+/*商品价格*/
+.goods-list .goods .page_main_price{width:100%;height:54px;float:left;box-sizing:border-box;padding:0 8px}
+.goods-list .goods .page_main_price .main_price_text{width:100%;height:54px;float:left;box-sizing:border-box}
+.goods-list .goods .page_main_price .main_price_unde{width:100%;height:31px;line-height:31px;font-size:14px;color:#4a4f58;text-align:left;float:left}
+.goods-list .goods .page_main_price .main_price_show{width:100%;height:30px;line-height:30px;font-size:14px;color:#f94b4b;text-align:left;float:left}
+.goods-list .goods .page_main_price .main_price_show.none{color:#999999;text-decoration:line-through}
+.goods-list .goods .page_main_price .section_page .page_main_price .main_price_show.none{display:none}
+.goods-list .goods .page_main_price .price_text_tag{width:100%;height:22px;box-sizing:border-box;float:left;margin-top:0px}
+.goods-list .goods .page_main_price .price_text_tag .couponTag{float:left;margin-right: 4px;}
+.goods-list .goods .page_main_price .price_text_tag .listTag{margin:0;float:left}
+.goods-list .goods .page_main_price .main_price_none{width:100%;height:24px;box-sizing:border-box;float:left;margin-top:2px}
+.goods-list .goods .page_main_price .main_price_none.sec{margin-top:25px}
+.goods-list .goods .page_main_price .main_price_none .listTag{margin:0}
+.goods-list .goods .page_main_price .price_grade,.section_page .page_main_price .price_grade_shop,.section_page .page_main_price .price_grade_club{float:left;margin:0;height:22px;line-height:22px;color:#4A4F58;font-style:normal;font-size:14px}
+.goods-list .goods .page_main_price .price_grade span,.section_page .page_main_price .price_grade_shop span,.section_page .page_main_price .price_grade_club span{display:inline-block;float:left}
+.goods-list .goods .page_main_price .icon:before{width:67px;height:22px}
+.goods-list .goods .page_main_price .price_grade_1:before{background-position:0 -714px}
+.goods-list .goods .page_main_price .price_grade_2:before{background-position:0 -744px}
+.goods-list .goods .page_main_price .price_grade_3:before{background-position:0 -774px}
+.goods-list .goods .page_main_price .price_grade_4:before{background-position:0 -804px}
+.goods-list .goods .page_main_price .price_grade_5:before{background-position:0 -834px}
+/*商品列表*/
+.goods-list .goods img{
+    display: block;
+    width: 173px;
+    height: 173px;
+    box-sizing: border-box;
+    border: 1px dashed #E2E7EF;
+}
+
+.goods-list .goods .goods-title{
+    width: 169px;
+    height: 41px;
+    margin-top: 12px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #4A4F58;
+}
+.goods-list .goods .goods-tag{
+    height: 20px;
+    padding: 8px 0;
+}
+.goods-list .goods .goods-tag .tag{
+    line-height: 20px;
+    font-size: 12px;
+    padding: 0 2px;
+}
+.goods-list .goods .goods-tag .tag.styl1{
+    color: #F94B4B;
+    background: #FFF1EB;
+    border: 1px solid #F94B4B;
+}
+.goods-list .goods .goods-tag .tag.styl2{
+    color: #E15616;
+    background: #FFF1EB;
+    border: 1px solid #F94B4B;
+}
+
+.goods-list .goods .svip-price{
+    position: relative;
+    height: 20px;
+    box-sizing: border-box;
+}
+.goods-list .goods .svip-price>span{
+    display: block;
+}
+.goods-list .goods .svip-price .amount{
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #333333;
+    background: #F0CB72;
+    padding-left: 40px;
+    padding-right: 6px;
+    box-sizing: border-box;
+    border-radius: 2px;
+}
+.goods-list .goods .svip-price .svip-icon{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 36px;
+    height: 20px;
+    background: #333333;
+    font-size: 12px;
+    line-height: 20px;
+    color: #F0CB72;
+    border-radius: 2px;
+    text-align: center;
+}
+}
+
+/*h5端样式*/
+@media screen and (max-width:768px){
+.section{background:#fff;margin: 2vw 0;overflow: hidden}
+.section .section-title span{font-size: 3.2vw;color: #E4AA43;margin-left: 2.4vw}
+.section .section-title{padding:4vw 0 5.2vw 3.3vw;font-size:3.4vw;font-weight:400;color:#22272E}
+.section .content{-webkit-box-sizing:border-box;box-sizing:border-box}
+.vip-bar{width:100vw;height:20.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:17.1vw;line-height:20.6vw;background:url(https://static.caimei365.com/app/img/svip/h5-cm-svip-bg-02.png) no-repeat center;background-size:100vw 20.6vw;font-weight:400}
+.vip-bar span:first-child{font-size:3.4vw;line-height:20.6vw;color:#55331D}
+.vip-bar span:last-child{font-size:3vw;color:#55331D;opacity:1;margin-left:1.2vw}
+.combo-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
+.combo-list > div:first-child{width:93.2vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.combo-list .combo{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:29vw;height:31.4vw;background:#FFFFFF;border:1px solid #F0F0F0;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.combo-list .combo.recommend::after{content:"推荐";position:absolute;top:-1.4vw;left:-1px;z-index:9;width:10vw;height:4.8vw;text-align:center;line-height:4.8vw;background:#FF2A2A;color:#fff;font-size:2.8vw}
+.combo-list .combo.active{background:#FDF8EE;border:1px solid #F0CC8C}
+.combo-list .combo .how-mounts{font-size:3.6vw;font-weight:400;color:#22272E}
+.combo-list .combo .price{padding:2.6vw 0;font-size:5.6vw;font-weight:bold;color:#FF2A2A}
+.combo-list .combo .price > i{font-style:unset;font-size:3.7vw;font-weight:400;color:#FF2A2A}
+.combo-list .combo .average{font-size:3.2vw;font-weight:400;color:#627386}
+.combo-list > div:last-child{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:8vw;margin-bottom: 4.4vw}
+.combo-list .pay-btn{width:93.2vw;height:11.2vw;background:-webkit-gradient(linear,left top,right top,from(#FEE9BA),to(#F0CB72));background:-o-linear-gradient(left,#FEE9BA 0%,#F0CB72 100%);background:linear-gradient(90deg,#FEE9BA 0%,#F0CB72 100%);border-radius:2px;font-size:4.3vw;font-weight:bold;line-height:21px;color:#55331D;}
+.combo-list .pay-btn.plain{margin-top:15px;background:transparent;border:1px solid #F0CB72;border-radius:2px;font-weight:400;color:#55331D;-webkit-box-sizing:border-box;box-sizing:border-box}
+.combo-list .pay-btn > a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;color:inherit}
+.combo-list .pay-btn > a:hover{color:unset}
+.service-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.service-list>div{width:25%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:4.8vw}
+.service-list>div img{display:block;width:11.8vw;height:11.8vw}
+.service-list>div .tit{font-size:3.2vw;font-weight:400;color:#333333;padding:2.4vw 0 1.2vw}
+.service-list>div .sub-tit{font-size:2.8vw;font-weight:400;color:#B8BFCA}
+.coupon-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 3.3vw}
+.coupon-list>div{position:relative;width:45vw;height:19.8vw;padding-left:4.9vw;margin-bottom:3.4vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-coupon-unable.png) no-repeat center;background-size:45vw 19.8vw}
+.coupon-list>div.un-received{background-image:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-coupon-able.png)}
+.coupon-list>div .type{position:absolute;left:0;top:0;z-index:9;width:11vw;height:3.9vw;font-size:2.4vw;text-align:center;line-height:3.9vw;background:#E4AA43;border-radius:2px 0px 2px 0px}
+.coupon-list>div .amount{padding-top:3.6vw;font-size:5.2vw;font-weight:bold;color:#55331D}
+.coupon-list>div .amount>i{font-size:2.8vw;font-weight:400;color:#55331D;font-style:unset}
+.coupon-list>div .condition{font-size:2.6vw;font-weight:400;color:#55331D}
+.coupon-list>div .receive-btn{width:10vw;height:100%;position:absolute;right:0;top:0;z-index:9;font-size:3vw;font-weight:400;color:#55331D;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}
+.goods-list {
+    width: 100vw;
+    overflow-x: scroll;
+    white-space: nowrap;
+    padding-bottom: 4.8vw;
+}
+.goods-list .goods a:hover{color: unset;}
+.goods-list .goods{
+    display: inline-block;
+    width: 26.9vw;
+    margin-right: 2.4vw;
+}
+.goods-list .goods:first-child{
+    margin-left: 3.3vw;
+}
+/*商品价格*/
+.goods-list .goods .page_main_price{width:100%;box-sizing:border-box;padding:0 3.2vw}
+.goods-list .goods .page_main_price .price_text_tag{width:100%;box-sizing:border-box;float:left}
+.goods-list .goods .page_main_price .main_price_show{color:#f94b4b}
+.goods-list .goods .page_main_price .section_page .page_main_price .main_price_show.none{display:none}
+.goods-list .goods .page_main_price .main_price_unde{width:100%;height:6.5vw;line-height:6.5vw;font-size:3.4vw;color:#4a4f58;text-align:left;float:left}
+.goods-list .goods .page_main_price .price_text_tag .couponTag{padding:0 2vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
+.goods-list .goods .page_main_price .price_text_tag .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+/*商品列表*/
+.goods-list .goods img{
+    display: block;
+    width: 26.9vw;
+    height: 26.9vw;
+    box-sizing: border-box;
+    border: 1px dashed #E2E7EF;
+}
+
+.goods-list .goods .goods-title{
+    white-space: pre-wrap;
+    height: 9.2vw;
+    font-size: 3.4vw;
+    font-weight: 400;
+    line-height: 4.7vw;
+    color: #627386;
+}
+.goods-list .goods .goods-tag{
+    margin: 1.6vw 0;
+}
+.goods-list .goods .goods-tag .tag{
+    line-height: 4.2vw;
+    font-size: 2.8vw;
+    border-radius: 2px;
+    box-sizing: border-box;
+    padding: 0 0.5vw;
+}
+.goods-list .goods .goods-tag .tag.styl1{
+    color: #F94B4B;
+    background: #FFF1EB;
+    border: 1px solid #F94B4B;
+}
+.goods-list .goods .goods-tag .tag.styl2{
+    color: #E15616;
+    background: #FFF1EB;
+    border: 1px solid #F94B4B;
+}
+
+.goods-list .goods .svip-price{
+    position: relative;
+    height: 4.8vw;
+    box-sizing: border-box;
+}
+.goods-list .goods .svip-price>span{
+    display: block;
+}
+.goods-list .goods .svip-price .amount{
+    display: inline-block;
+    font-size: 3.4vw;
+    font-weight: 400;
+    line-height: 4.8vw;
+    color: #333333;
+    background: #F0CB72;
+    padding-left: 8vw;
+    padding-right: 0.8vw;
+    box-sizing: border-box;
+    border-radius: 2px;
+}
+.goods-list .goods .svip-price .svip-icon{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 8vw;
+    height: 4.8vw;
+    background: #333333;
+    font-size: 3vw;
+    line-height: 4.8vw;
+    color: #F0CB72;
+    border-radius: 2px;
+    text-align: center;
+}
+
+}

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

@@ -70,7 +70,8 @@ var orderPage = new Vue({
                     10:'抵用运费',
                     11:'退款回收',
                     12:'登录奖励',
-                    13:'查看商品资料'
+                    13:'查看商品资料',
+                    14:'购买超级会员'
                 };
             Object.keys(stateTextObject).forEach(function(key){
                 if(key == state){

src/main/resources/static/js/user-center/member/memberPage.js

@@ -0,0 +1,68 @@
+var memberPage = new Vue({
+    el: '#memberPage',
+    data: {
+        serviceList: [
+            {
+                name: '优惠商品',
+                subTitle: '超级会员专享'
+            },
+            {
+                name: '专属优惠券',
+                subTitle: '每月可领'
+            },
+            {
+                name: '采美豆翻倍',
+                subTitle: '下单返采美豆'
+            },
+            {
+                name: '专属客服',
+                subTitle: '一对一'
+            },
+            {
+                name: '专属销售顾问',
+                subTitle: '一对一'
+            },
+            {
+                name: '快速发货',
+                subTitle: '会员加速'
+            },
+            {
+                name: '售后服务',
+                subTitle: '会员加速'
+            }, {
+                name: '敬请期待',
+                subTitle: '更多特权'
+            }
+        ],
+        couponList:[
+            {
+                type: 1,
+                amount:1000,
+                condition1:'满5000可用',
+                condition2:'全商城商品通用',
+                received: false,
+            },
+            {
+                type: 2,
+                amount:1000,
+                condition1:'满5000可用',
+                condition2:'全商城商品通用',
+                received: false,
+            },
+            {
+                type: 2,
+                amount:1000,
+                condition1:'满5000可用',
+                condition2:'全商城商品通用',
+                received: false,
+            },
+            {
+                type: 2,
+                amount:1000,
+                condition1:'满5000可用',
+                condition2:'全商城商品通用',
+                received: true,
+            }
+        ]
+    }
+});

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

@@ -34,20 +34,23 @@
                             <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 && isPC" onclick="_czc.push(['_trackEvent','个人中心','升级入口','点击','','Um_Event_ClubUpgrade'])">
+                            <div class="name user-info">
+                                <span class="username">{{userInfo.name}}</span>
+                                <!-- 资质机构 -->
+                                <template v-if="false">
+                                    <span class="agency vip">个人机构</span>
+                                    <span class="vip-icon vip">VIP</span>
+                                </template>
+                                <!-- 超级会员 -->
+                                <span class="agency svip">资质机构</span>
+                                <span class="vip-icon svip">SVIP</span>
+                                <!-- 升级 -->
+                                <a class="update" href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4" onclick="_czc.push(['_trackEvent','个人中心','升级入口','点击','','Um_Event_ClubUpgrade'])">
                                     去升级资质机构
                                     <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 class="upgrade">
-                                <a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4 && !isPC" onclick="_czc.push(['_trackEvent','个人中心','升级入口','点击','','Um_Event_ClubUpgrade'])">
-                                    去升级会员机构
-                                    <div class="name-tips">采美豆</div>
-                                </a>
-                            </div>
                         </div>
                         <div class="message">
                             <a href="/user/message/list.html">
@@ -57,19 +60,14 @@
                             </a>
                         </div>
                     </div>
-                    <div class="user-content clear">
+                    <div class="svip-content clear">
                         <div class="title order">超级会员</div>
                         <div class="section">
-                            <img src="" alt=""/>
-                            <div>
-                                <span>开通采美超级会员，享专属特权</span>
-                                <span>已开通采美超级会员 有效期至2021.10.01</span>
-                                <span>采美超级会员已过期 有效期至2021.10.01</span>
-                            </div>
-                            <div>
-                                <a v-if="true">立即开通</a>
-                                <a v-else>进入会员中心</a>
-                            </div>
+                            <div v-if="true">开通采美超级会员，享专属特权</div>
+                            <div v-if="false"><span>已开通采美超级会员</span><span class="time">有效期至2021.10.01</span></div>
+                            <div v-if="false"><span class="error">采美超级会员已过期</span><span class="time">有效期至2021.10.01</span></div>
+                            <a v-if="true" href="" class="btn">立即开通</a>
+                            <a v-else href="" class="link">进入会员中心&gt;</a>
                         </div>
                     </div>
                     <div class="user-content clear">

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

@@ -0,0 +1,177 @@
+<!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>
+    <meta charset="UTF-8">
+    <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/member/member-page.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!--内容区域-->
+<!-- 采美豆明细 -->
+<div id="memberPage" v-cloak>
+    <div class="navLayout">
+        <div class="crumbs" v-if="isPC">
+            <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="vip-bar">
+                    <span>采美·超级会员</span>
+                    <span>享专属特权</span>
+                </div>
+                <!--套餐价格-->
+                <div class="section">
+                    <div class="section-title">超级会员套餐</div>
+                    <div class="content combo-list">
+                        <div>
+                            <div class="combo" :class="{active: index === 1,recommend: index === 1}"
+                                 v-for="(i, index) in 3" :key="index">
+                                <div class="how-mounts">12个月</div>
+                                <div class="price"><i>￥</i>4800</div>
+                                <div class="average">400元/月</div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="pay-btn"><a href="">立即支付4800元开通</a></div>
+                            <div class="pay-btn plain"><a href="">抵扣480000个采美豆开通</a></div>
+                        </div>
+                    </div>
+                </div>
+                <!--服务列表-->
+                <div class="section">
+                    <div class="section-title">专属特权</div>
+                    <div class="content service-list">
+                        <div v-for="(item, index) in serviceList" :key="index">
+                            <img :src="'https://static.caimei365.com/app/img/svip/pc-cm-svip-icon' + (index + 1) + '.png'"
+                                 v-if="isPC"/>
+                            <img :src="'https://static.caimei365.com/app/img/svip/h5-cm-svip-icon' + (index + 1) + '.png'"
+                                 v-else/>
+                            <span class="tit" v-html="item.name"></span>
+                            <span class="sub-tit" v-html="item.subTitle"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!--优惠券列表-->
+                <div class="section">
+                    <div class="section-title">专属特权<span>每月可领4个</span></div>
+                    <div class="content coupon-list">
+                        <template v-for="(item, index) in couponList">
+                            <div :key="index" :class="{'un-received': !item.received}">
+                                <span class="type">{{ item.type === 1 ? '新人券' : '活动券'}}</span>
+                                <div class="amount"><i>￥</i>{{ item.amount }}</div>
+                                <div class="condition" v-html="item.condition1"></div>
+                                <div class="condition" v-html="item.condition2"></div>
+                                <div class="receive-btn" v-if="!item.received">立即领取</div>
+                                <div class="receive-btn" v-else>已领取</div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+                <!--优惠商品-->
+                <div class="section">
+                    <div class="section-title">优惠商品</div>
+                    <div class="content goods-list">
+                        <div class="goods" v-for="i in 5">
+                            <a href="">
+                                <img src="/img/base/placeholder.png"/>
+                                <div class="goods-title cm-text-ellipsis-2">华熙生物润百颜液体华熙生物润百颜</div>
+                                <div class="goods-tag">
+                                    <span class="tag styl1">优惠券</span>
+                                    <span class="tag styl2">单品满赠</span>
+                                </div>
+                                <!-- v-if="pros.listType == 1" -->
+                                <div class="page_main_price" v-if="false">
+                                    <!-- 商品价格 -->
+                                    <div class="main_price_text">
+                                        <!-- 正常商品 -->
+                                        <template v-if="pros.product.productCategory == 1">
+                                            <div class="price_text_tag">
+                                                <!--                                                        <p class="couponTag" v-if="pros.product.couponsLogo">优惠券</p>-->
+                                                <p class="listTag"
+                                                   v-if="pros.product.actStatus ==1 && pros.product.promotions">
+                                                    <span v-text="pros.product.promotions.name"></span>
+                                                    <template v-if="PromotionsFormat(pros.product.promotions)">
+                                                        <!--单品优惠:优惠价-->
+                                                        <span class="price_unit">:￥</span><span class="price_num">{{ pros.product.price | NumFormat }}</span>
+                                                    </template>
+                                                </p>
+                                            </div>
+                                            <div class="main_price_login">
+                                                <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                                                <template v-if="pros.product.priceFlag == 1">
+                                                    <em class="price_grade"><span>￥</span>价格未公开</em>
+                                                </template>
+                                                <template v-else>
+                                                    <template v-if="PromotionsFormat(pros.product.promotions)">
+                                                        <!--单品优惠时的划线价-->
+                                                        <div class="main_price_show none">
+                                                            ￥<span class="price_o_num">{{ pros.product.originalPrice | NumFormat }}</span>
+                                                        </div>
+                                                    </template>
+                                                    <template
+                                                            v-else-if="(pros.product.priceFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                        <!--机构价-->
+                                                        <div class="main_price_show">￥<span class="price_num">{{ pros.product.price | NumFormat }}</span>
+                                                        </div>
+                                                    </template>
+                                                    <template
+                                                            v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4">
+                                                        <em class="price_grade_club">
+                                                            <span>￥</span>会员可见
+                                                        </em>
+                                                    </template>
+                                                    <template v-else>
+                                                        <!--供应商除自己的商品外，也显示价格等级-->
+                                                        <em class="price_grade_shop">
+                                                            <span class="bold">￥</span><i
+                                                                :class="'icon mIcon price_grade_'+pros.product.priceGrade"></i>
+                                                        </em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                        </template>
+                                        <!-- 二手商品 -->
+                                        <template v-else>
+                                            <div class="main_price_login">
+                                                <div class="price_text_tag"></div>
+                                                <div v-if="pros.product.detailTalkFlag==2" class="main_price_show">￥价格祥聊
+                                                </div>
+                                                <div v-else class="main_price_show">
+                                                    ￥<span class="price_num">{{ pros.product.price | NumFormat }}</span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </div>
+                                <div class="svip-price">
+                                    <span class="svip-icon">SVIP</span>
+                                    <span class="amount">￥99999</span>
+                                </div>
+                            </a>
+                        </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/member/memberPage.js(v=${version})}"></script>
+</body>
+</html>