绘制会员商品页面，购买记录页面

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

@@ -58,8 +58,12 @@ 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";
+	/** 会员优惠商品 */
+	private static final String MEMBER_PRODUCT_LIST = "user-center/member/member-product";
+	/** 会员购买记录 */
+	private static final String MEMBER_RECORD = "user-center/member/member-record";
 
     /** 我的采美 */
     @GetMapping("/user/dashboard.html")
@@ -185,4 +189,12 @@ public class UserPageController extends BaseController {
     /** 兑换优惠券 */
     @GetMapping("/user/member.html")
     public String member() {return MEMBER_PAGE;}
+
+    /** 会员优惠商品列表 */
+    @GetMapping("/user/member-product.html")
+    public String memberProduct() {return MEMBER_PRODUCT_LIST;}
+
+    /** 会员购买记录 */
+    @GetMapping("/user/member-record.html")
+    public String memberRecord() {return MEMBER_RECORD;}
 }

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

@@ -2,13 +2,23 @@
 .cm-text-ellipsis-2{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
 /*pc端样式*/
 @media screen and (min-width:768px){
+#memberPage{position: relative;margin-bottom: 105px;}
 .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 .section-title span{font-size: 14px;color: #E4AA43;margin-left: 8px}
+.section .section-title a{font-size: 14px;color: #333;float: right}
+.section .section-title a:hover{ color: #E4AA43}
 .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}
+/*会标标记*/
+.vip-bar{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:68px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:104px;padding-right:24px;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>div>span:first-child{font-size:16px;line-height:21px;color:#55331D}
+.vip-bar>div>span:last-child{font-size:14px;color:#55331D;opacity:1;margin-left:16px}
+.vip-bar>div>span.error{color:#FF2A2A}
+.vip-bar .right-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.vip-bar>div>a{display:block;margin-left:16px}
+.vip-bar>div>a.link{font-size:14px;color:#55331D}
+.vip-bar>div>a.btn{width:104px;height:36px;background:-webkit-gradient(linear,right top,left top,from(#585658),to(#323031));background:-o-linear-gradient(right,#585658 0%,#323031 100%);background:linear-gradient(270deg,#585658 0%,#323031 100%);border-radius:2px;line-height:36px;text-align:center;font-size:16px;color:#F0CB72}
+/*套餐价格*/
 .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}
@@ -23,11 +33,13 @@
 .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)}
@@ -36,10 +48,10 @@
 .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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;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}
@@ -60,7 +72,6 @@
 .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;-webkit-box-sizing:border-box;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}
@@ -71,17 +82,50 @@
 .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;-webkit-box-sizing:border-box;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}
+/*底部支付按钮*/
+.pay-amount-bottom a:hover{color:unset}
+.pay-amount-bottom{position:absolute;bottom:-104px;width:100%;background:#fff}
+.pay-amount-bottom>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1184px;height:72px;margin:0 auto}
+.pay-amount-bottom .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;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:16px;font-weight:500;line-height:22px;margin-left:15px}
+.pay-amount-bottom .pay-btn.plain{border:1px solid #F0CB72;background:#fff}
+.pay-amount-bottom .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;color:#55331D;width:100%;height:100%}
+/*续费弹窗*/
+.renew-popup{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:540px;height:424px;background:#FFFFFF;opacity:1;border-radius:2px;z-index:9999}
+.renew-popup .popup-title{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;height:50px;padding:0 16px 0 24px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:16px;font-weight:bold;color:#4A4F58;opacity:1;border-bottom:1px solid #E2E7EF}
+.renew-popup .popup-title .close{color: #d4d4d4;font-size:30px;font-weight:400;cursor:pointer}
+.renew-popup .combo-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+.renew-popup .combo-list>div:first-child{margin-top:37px}
+.renew-popup .combo-list>div:last-child{margin-top:56px}
+/*遮罩*/
+.mask{content:"";display:block;position:fixed;width:100vw;height:100vh;background:#333333;opacity:0.7;left:0;top:0;z-index:9998}
+/*确认支付 立即支付弹窗*/
+.payment-confirm-popup{position:fixed;top:50%;left:50%;z-index:99999;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:338px;height:168px;padding:16px;background:#FFFFFF;opacity:1;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.payment-confirm-popup .popup-title{padding-bottom:16px;font-size:16px;font-weight:bold;color:#4A4F58}
+.payment-confirm-popup .popup-title .close{position:absolute;right:16px;top:4px;color:#d4d4d4;font-size:30px;font-weight:400;cursor:pointer}
+.payment-confirm-popup .content{font-size:14px;font-weight:400;line-height:24px;color:#22272E;opacity:1}
+.payment-confirm-popup .popup-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:48px}
+.payment-confirm-popup .popup-btn .confirm-btn{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:104px;height:32px;background:#E15616;opacity:1;border-radius:2px;font-size:14px;font-weight:400;color:#FFFFFF}
+
 }
 
 /*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 .section-title span{font-size: 3.2vw;color: #E4AA43;margin-left: 2.4vw}
+.section .section-title a{font-size: 3.2vw;color: #E4AA43;float: right;margin-right: 3.3vw}
 .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}
+/*会员标记*/
+.vip-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100vw;height:20.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:17.1vw;padding-right:3.3vw;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 .row2,.vip-bar .right-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
+.vip-bar .left-box span:first-child{font-size:3.4vw;color:#55331D}
+.vip-bar .left-box span:last-child{font-size:3vw;color:#55331D;opacity:1;margin-top:2.4vw}
+.vip-bar .row1 span:last-child{margin-top:0;margin-left:2.4vw}
+.vip-bar .right-box{-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.vip-bar .right-box a{display:block}
+.vip-bar .right-box a.link{font-size:2.8vw;color:#55331D}
+.vip-bar .right-box a.btn{width:19.2vw;height:7.2vw;background:-webkit-gradient(linear,right top,left top,from(#585658),to(#323031));background:-o-linear-gradient(right,#585658 0%,#323031 100%);background:linear-gradient(270deg,#585658 0%,#323031 100%);border-radius:2px;line-height:7.2vw;text-align:center;font-size:3.2vw;color:#F0CB72;margin-top:2.4vw}
+/*套餐价格*/
 .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}
@@ -96,11 +140,13 @@
 .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)}
@@ -109,11 +155,11 @@
 .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}
@@ -121,7 +167,6 @@
 .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;-webkit-box-sizing:border-box;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}
@@ -132,5 +177,30 @@
 .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;-webkit-box-sizing:border-box;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}
-
+/*底部按钮隐藏*/
+.pay-amount-bottom{display: none; opacity: 0}
+/*续费弹窗*/
+.renew-popup{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:74.6vw;height:72.8vw;background:#fff;-webkit-box-shadow:0px 10px 20px rgba(0,0,0,0.16);box-shadow:0px 10px 20px rgba(0,0,0,0.16);opacity:1;border-radius:1.2vw;z-index:9999}
+.renew-popup .popup-title{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;padding:4.8vw 4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:3.6vw;font-weight:bold;color:#4A4F58;opacity:1}
+.renew-popup .popup-title .close{position:absolute;right:2.4vw;top:1vw;font-size:7vw;font-weight:normal;cursor:pointer}
+.renew-popup .combo-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+.renew-popup .combo-list>div:first-child{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;width:100%;margin-top:5.8vw}
+.renew-popup .combo-list>div:last-child{width:100%;margin-top:8vw}
+.renew-popup .combo-list .combo{width:20.6vw;height:22.4vw}
+.renew-popup .combo-list .combo.recommend::after{width:8vw;height:4vw;line-height:4vw;top:-1.55vw}
+.renew-popup .combo-list .combo .how-mounts{font-size:3.2vw}
+.renew-popup .combo-list .combo .price{font-size:3.9vw;padding:1.2vw 0}
+.renew-popup .combo-list .combo .price i{font-size:2.6vw}
+.renew-popup .combo-list .combo .average{font-size:2.6vw}
+.renew-popup .combo-list .pay-btn{width:66.6vw;height:9.9vw;font-size:3.2vw}
+.renew-popup .combo-list .pay-btn.plain{margin-top:3.3vw}
+/*遮罩*/
+.mask{content:"";display:block;position:fixed;width:100vw;height:100vh;background:#333333;opacity:0.7;left:0;top:0;z-index:9998}
+/*确认支付，立即支付弹窗*/
+.payment-confirm-popup{position:fixed;top:50%;left:50%;z-index:99999;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:74.6vw;height:46vw;padding:4.4vw;background:#FFFFFF;opacity:1;border-radius:1.2vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.payment-confirm-popup .popup-title{padding-bottom:3.2vw;padding-top:2.4vw;font-size:3.8vw;font-weight:bold;color:#4A4F58}
+.payment-confirm-popup .popup-title .close{position:absolute;right:3.2vw;top:1.2vw;color:#d4d4d4;font-size:5.6vw;font-weight:400;cursor:pointer}
+.payment-confirm-popup .content{font-size:3.6vw;font-weight:400;line-height:6.4vw;color:#22272E;opacity:1}
+.payment-confirm-popup .popup-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:10.4vw}
+.payment-confirm-popup .popup-btn .confirm-btn{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:66.6vw;height:9.9vw;background:#E15616;opacity:1;border-radius:2px;font-size:14px;font-weight:400;color:#FFFFFF}
 }

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

@@ -0,0 +1,73 @@
+/*公共样式*/
+.cm-text-ellipsis-2{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+/*pc端*/
+@media screen and (min-width:768px){.banner-box{position:relative;height:510px;overflow:hidden}
+.banner-box img{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border:none;vertical-align:auto;max-width:unset}
+.container{width:1184px;margin:24px auto}
+.goods-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.goods-list .goods a:hover{color:unset}
+.goods-list .goods{width:184px;margin-right:16px;margin-bottom:16px;padding-bottom:16px;background:#fff;overflow:hidden;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
+.goods-list .goods:nth-child(6n){margin-right:0}
+.goods-list .goods .goods-title,.goods-list .goods .goods-tag,.goods-list .goods .page_main_price,.goods-list .goods .svip-price{padding-left:16px !important;padding-right:16px !important}
+.goods-list .goods .page_main_price{width:100%;height:54px;float:left;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 8px}
+.goods-list .goods .page_main_price .main_price_text{width:100%;height:54px;float:left;-webkit-box-sizing:border-box;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;-webkit-box-sizing:border-box;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;-webkit-box-sizing:border-box;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:184px;height:184px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.goods-list .goods .goods-title{height:41px;margin-top:12px;font-size:14px;font-weight:400;line-height:22px;color:#4A4F58;text-align:justify-all;word-break:break-all}
+.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;-webkit-box-sizing:border-box;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;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2px}
+.goods-list .goods .svip-price .svip-icon{position:absolute;left:16px;top:0;width:36px;height:20px;background:#333333;font-size:12px;line-height:20px;color:#F0CB72;border-radius:2px;text-align:center}
+.goods-list .goods:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);-webkit-box-shadow:0 0 16px rgba(0,0,0,.2);box-shadow:0 0 16px rgba(0,0,0,.2)}
+.goods-list .goods:hover .goods-title{color:#E15616}
+}/*h5端*/
+@media screen and (max-width:768px){.banner-box{position:relative;width:93.6vw;height:36vw;margin:3.2vw;overflow:hidden}
+.banner-box img{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border:none;vertical-align:auto;max-width:unset;height:36vw}
+.container{width:100vw;margin:2.4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 3.2vw}
+.goods-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.goods-list .goods a:hover{color:unset}
+.goods-list .goods{width:45.6vw;margin-right:2.4vw;margin-bottom:2.4vw;padding-bottom:3.2vw;background:#fff;overflow:hidden}
+.goods-list .goods:nth-child(2n){margin-right:0}
+.goods-list .goods .goods-title,.goods-list .goods .goods-tag,.goods-list .goods .page_main_price,.goods-list .goods .svip-price{padding-left:3.2vw !important;padding-right:3.2vw !important}
+.goods-list .goods .page_main_price{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 3.2vw}
+.goods-list .goods .page_main_price .price_text_tag{width:100%;-webkit-box-sizing:border-box;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:45.6vw;height:45.6vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.goods-list .goods .goods-title{white-space:pre-wrap;height:9.2vw;margin-top:0.8vw;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;-webkit-box-sizing:border-box;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;-webkit-box-sizing:border-box;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.9vw;color:#333333;background:#F0CB72;padding-left:8vw;padding-right:0.8vw;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2px}
+.goods-list .goods .svip-price .svip-icon{position:absolute;left:3.2vw;top:0;width:8vw;height:4.8vw;background:#333333;font-size:3vw;line-height:4.8vw;color:#F0CB72;border-radius:2px;text-align:center}
+.show-more{width:100vw;margin:2.4vw 0 4.8vw;text-align:center}
+.show-more .more-btn{display:inline-block;width:20vw;height:6vw;font-size:3vw;line-height:6vw;border:1px solid #ccc}
+.show-more .more-btn::after{content:'';width:4vw;height:2.4vw;display:inline-block;background:url(/img/base/icon_m.png) no-repeat;background-size:100vw auto;background-position:-51.5vw -2vw}
+}

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

@@ -0,0 +1,72 @@
+
+/*pc端*/
+@media screen and (min-width:768px){
+#memberPage{position: relative;margin-bottom: 105px;}
+.right{width:968px;overflow:hidden}
+.pageWrap{width: 968px}
+/*会标标记*/
+.vip-bar{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:68px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:104px;padding-right:24px;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>div>span:first-child{font-size:16px;line-height:21px;color:#55331D}
+.vip-bar>div>span:last-child{font-size:14px;color:#55331D;opacity:1;margin-left:16px}
+.vip-bar>div>span.error{color:#FF2A2A}
+.vip-bar .right-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.vip-bar>div>a{display:block;margin-left:16px}
+.vip-bar>div>a.link{font-size:14px;color:#55331D}
+.vip-bar>div>a.btn{width:104px;height:36px;background:-webkit-gradient(linear,right top,left top,from(#585658),to(#323031));background:-o-linear-gradient(right,#585658 0%,#323031 100%);background:linear-gradient(270deg,#585658 0%,#323031 100%);border-radius:2px;line-height:36px;text-align:center;font-size:16px;color:#F0CB72}
+/*记录列表*/
+    .record-list {
+        width: 100%;
+        background: #fff;
+        box-sizing: border-box;
+        padding: 0 24px;
+    }
+    .record-list .record{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        padding: 24px 0;
+        box-sizing: border-box;
+        border-top:1px solid #E2E7EF;
+    }
+    .record-list .record:first-child{
+        border-top: 0;
+    }
+    .record-list .record .desc{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+    }
+    .record-list .record .desc>span:first-child{
+        font-size: 16px;
+        font-weight: 400;
+        color: #22272E;
+    }
+    .record-list .record .desc>span:last-child{
+        font-size: 14px;
+        font-weight: 400;
+        color: #627386;
+        margin-top: 12px;
+    }
+    .record-list .record .amount span{
+        font-size: 16px;
+        font-weight: 400;
+        color: #E15616;
+    }
+}
+
+/*h5*/
+@media screen and (max-width:768px){
+/*会员标记*/
+.vip-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100vw;height:20.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:17.1vw;padding-right:3.3vw;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 .row2,.vip-bar .right-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
+.vip-bar .left-box span:first-child{font-size:3.4vw;color:#55331D}
+.vip-bar .left-box span:last-child{font-size:3vw;color:#55331D;opacity:1;margin-top:2.4vw}
+.vip-bar .row1 span:last-child{margin-top:0;margin-left:2.4vw}
+.vip-bar .right-box{-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.vip-bar .right-box a{display:block}
+.vip-bar .right-box a.link{font-size:2.8vw;color:#55331D}
+.vip-bar .right-box a.btn{width:19.2vw;height:7.2vw;background:-webkit-gradient(linear,right top,left top,from(#585658),to(#323031));background:-o-linear-gradient(right,#585658 0%,#323031 100%);background:linear-gradient(270deg,#585658 0%,#323031 100%);border-radius:2px;line-height:7.2vw;text-align:center;font-size:3.2vw;color:#F0CB72;margin-top:2.4vw}
+
+}

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

@@ -0,0 +1,45 @@
+var memberProduct = new Vue({
+    el: '#memberProduct',
+    data: {
+        listQuery: {
+            keyword: '', //查询关键词
+            productType: 0, //商品类型 0 全部 1 仪器 2 产品
+            pageNum: 1,
+            pageSize: 10
+        },
+        hasMore: true,
+        totalPage: 10,
+        jumpPageSize: 1,
+        total: 10,
+    },
+    computed: {
+        pagination: function () {
+            var index = this.listQuery.pageNum, arr = [];
+            if (this.totalPage <= 6) {
+                for (var i = 1; i <= this.totalPage; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) {
+                return [1, 2, 3, 4, 5, 0, this.totalPage];
+            }
+            if (index >= this.totalPage - 2) {
+                return [1, 0, this.totalPage - 4, this.totalPage - 3, this.totalPage - 2, this.totalPage - 1, this.totalPage];
+            }
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, this.totalPage];
+        }
+    },
+    methods: {
+        //页码跳转
+        toPagination: function (pageNum) {
+            if (pageNum > this.totalPage || pageNum <= 0) {
+                return this.jumpPageSize = '';
+            }
+            this.listQuery.pageNum = parseInt(pageNum);
+            // this.getList(); //获取列表
+        },
+        //h5查看更多
+        showMore(){}
+    }
+});

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

@@ -0,0 +1,45 @@
+var memberRecord = new Vue({
+    el: '#memberRecord',
+    data: {
+        listQuery: {
+            keyword: '', //查询关键词
+            productType: 0, //商品类型 0 全部 1 仪器 2 产品
+            pageNum: 1,
+            pageSize: 10
+        },
+        hasMore: true,
+        totalPage: 10,
+        jumpPageSize: 1,
+        total: 10,
+    },
+    computed: {
+        pagination: function () {
+            var index = this.listQuery.pageNum, arr = [];
+            if (this.totalPage <= 6) {
+                for (var i = 1; i <= this.totalPage; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) {
+                return [1, 2, 3, 4, 5, 0, this.totalPage];
+            }
+            if (index >= this.totalPage - 2) {
+                return [1, 0, this.totalPage - 4, this.totalPage - 3, this.totalPage - 2, this.totalPage - 1, this.totalPage];
+            }
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, this.totalPage];
+        }
+    },
+    methods: {
+        //页码跳转
+        toPagination: function (pageNum) {
+            if (pageNum > this.totalPage || pageNum <= 0) {
+                return this.jumpPageSize = '';
+            }
+            this.listQuery.pageNum = parseInt(pageNum);
+            // this.getList(); //获取列表
+        },
+        //h5查看更多
+        showMore(){}
+    }
+});

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

@@ -0,0 +1,129 @@
+<!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-product.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<div id="memberProduct" v-cloak>
+    <div class="banner-box">
+        <img src="https://static.caimei365.com/app/img/svip/test-banner.png"/>
+    </div>
+    <div class="container goods-list">
+        <div class="goods" v-for="i in 16">
+            <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>
+    <!-- PC分页 -->
+    <div v-if="isPC && totalPage > 1" class="pageWrap cm-clearfix">
+        <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
+           href="javascript:void(0);"></a>
+        <template v-for="n in pagination">
+            <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);">{{n}}</a>
+            <span v-else>···</span>
+        </template>
+        <a v-if="listQuery.pageNum < total" class="next" @click="toPagination(listQuery.pageNum*1+1)"
+           href="javascript:void(0);"></a>
+        <span>共<b v-text="totalPage > 1 ? totalPage : 1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="jumpPageSize">
+        <span>页</span>&nbsp;
+        <a class="btn" href="javascript:void(0);" @click="toPagination(jumpPageSize)">点击跳转</a>
+    </div>
+    <!-- h5查看更多 -->
+    <div class="show-more" v-if="!isPC && hasMore">
+        <div class="more-btn" @click="showMore()">查看更多</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/memberProduct.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -0,0 +1,146 @@
+<!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-record.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!--内容区域-->
+<!-- 采美豆明细 -->
+<div id="memberRecord" 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">
+                    <div class="left-box row1">
+                        <!--未开通-->
+                        <template v-if="true">
+                            <span>采美·超级会员</span>
+                            <span>享专属特权</span>
+                        </template>
+                        <!-- 已开通 未过期 -->
+                        <template v-if="false">
+                            <span>采美·超级会员</span>
+                            <span>有效期：2021-10-01</span>
+                        </template>
+                        <!-- 已过期 -->
+                        <template v-if="false">
+                            <span class="error">采美·超级会员已过期</span>
+                            <span>有效期：2021-10-01</span>
+                        </template>
+                    </div>
+                    <div class="right-box">
+                        <template v-if="false">
+                            <a href="" class="link">购买记录</a>
+                            <a href="" class="btn">续费</a>
+                        </template>
+                    </div>
+                </div>
+                <!--记录列表-->
+                <div class="record-list">
+                    <div class="record">
+                        <div class="desc">
+                            <span>超级会员-1个月</span>
+                            <span>2021-09-12 11:53:26</span>
+                        </div>
+                        <div class="amount">
+                            <span v-if="true">60000采美豆</span>
+                            <span v-else>￥1200</span>
+                        </div>
+                    </div>
+                    <div class="record">
+                        <div class="desc">
+                            <span>超级会员-3个月</span>
+                            <span>2021-09-12 11:53:26</span>
+                        </div>
+                        <div class="amount">
+                            <span v-if="false">60000采美豆</span>
+                            <span v-else>￥1200</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- PC分页 -->
+                <div v-if="isPC && totalPage > 1" class="pageWrap cm-clearfix">
+                    <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
+                       href="javascript:void(0);"></a>
+                    <template v-for="n in pagination">
+                        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)"
+                           href="javascript:void(0);">{{n}}</a>
+                        <span v-else>···</span>
+                    </template>
+                    <a v-if="listQuery.pageNum < total" class="next" @click="toPagination(listQuery.pageNum*1+1)"
+                       href="javascript:void(0);"></a>
+                    <span>共<b v-text="totalPage > 1 ? totalPage : 1"></b>页</span>
+                    <span>跳至</span>
+                    <input v-model="jumpPageSize">
+                    <span>页</span>&nbsp;
+                    <a class="btn" href="javascript:void(0);" @click="toPagination(jumpPageSize)">点击跳转</a>
+                </div>
+                <!-- h5查看更多 -->
+                <div class="show-more" v-if="!isPC && hasMore">
+                    <div class="more-btn" @click="showMore()">查看更多</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--底部支付按钮 仅未开通和到期显示-->
+    <div class="pay-amount-bottom">
+        <div>
+            <div class="pay-btn plain"><a href="">抵扣480000个采美豆开通</a></div>
+            <div class="pay-btn"><a href="">立即支付4800元开通</a></div>
+        </div>
+    </div>
+    <!--遮罩-->
+    <div class="mask"></div>
+    <!--续费弹窗-->
+    <div class="renew-popup" v-if="false">
+        <div class="popup-title">超级会员套餐<span class="close">&times;</span></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="payment-confirm-popup">
+        <div class="popup-title">请在您新打开的页面上完成付款！<span class="close">&times;</span></div>
+        <div class="content">完成付款后请点击下面的按钮</div>
+        <div class="popup-btn"><a href="" class="confirm-btn">已完成支付</a></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/memberRecord.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -24,11 +24,33 @@
             <!--左侧导航-->
             <template th:replace="user-center/components/tableft"></template>
             <div class="right">
+                <!--会员信息-->
                 <div class="vip-bar">
-                    <span>采美·超级会员</span>
-                    <span>享专属特权</span>
+                    <div class="left-box row1">
+                        <!--未开通-->
+                        <template v-if="true">
+                            <span>采美·超级会员</span>
+                            <span>享专属特权</span>
+                        </template>
+                        <!-- 已开通 未过期 -->
+                        <template v-if="false">
+                            <span>采美·超级会员</span>
+                            <span>有效期：2021-10-01</span>
+                        </template>
+                        <!-- 已过期 -->
+                        <template v-if="false">
+                            <span class="error">采美·超级会员已过期</span>
+                            <span>有效期：2021-10-01</span>
+                        </template>
+                    </div>
+                    <div class="right-box">
+                        <template v-if="false">
+                            <a href="" class="link">购买记录</a>
+                            <a href="" class="btn">续费</a>
+                        </template>
+                    </div>
                 </div>
-                <!--套餐价格-->
+                <!--套餐价格 仅未开通和到期显示-->
                 <div class="section">
                     <div class="section-title">超级会员套餐</div>
                     <div class="content combo-list">
@@ -60,7 +82,6 @@
                         </div>
                     </div>
                 </div>
-
                 <!--优惠券列表-->
                 <div class="section">
                     <div class="section-title">专属特权<span>每月可领4个</span></div>
@@ -79,7 +100,7 @@
                 </div>
                 <!--优惠商品-->
                 <div class="section">
-                    <div class="section-title">优惠商品</div>
+                    <div class="section-title clear">优惠商品<a href="">查看更多&gt;</a></div>
                     <div class="content goods-list">
                         <div class="goods" v-for="i in 5">
                             <a href="">
@@ -164,6 +185,40 @@
             </div>
         </div>
     </div>
+    <!--底部支付按钮 仅未开通和到期显示-->
+    <div class="pay-amount-bottom">
+        <div>
+            <div class="pay-btn plain"><a href="">抵扣480000个采美豆开通</a></div>
+            <div class="pay-btn"><a href="">立即支付4800元开通</a></div>
+        </div>
+    </div>
+    <!--遮罩-->
+    <div class="mask"></div>
+    <!--续费弹窗-->
+    <div class="renew-popup" v-if="false">
+        <div class="popup-title">超级会员套餐<span class="close">&times;</span></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="payment-confirm-popup">
+        <div class="popup-title">请在您新打开的页面上完成付款！<span class="close">&times;</span></div>
+        <div class="content">完成付款后请点击下面的按钮</div>
+        <div class="popup-btn"><a href="" class="confirm-btn">已完成支付</a></div>
+    </div>
+
 </div>