优惠券详情

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

@@ -1,220 +1,226 @@
-package com.caimei.www.controller.authorized.user;
-
-import com.caimei.www.controller.BaseController;
-import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.GetMapping;
-
-/**
- * 【机构】个人中心
- *
- * @author : Charles
- * @date : 2020/8/27
- */
-@Controller
-public class UserPageController extends BaseController {
-    /** 我的采美 */
-	private static final String DASHBOARD = "user-center/dashboard";
-    /** 订单列表 */
-	private static final String ORDER_LIST = "user-center/order/list";
-    /** 订单详情 */
-	private static final String ORDER_DETAIL = "user-center/order/detail";
-    /** 上传支付凭证 */
-    private static final String REMARKS_ADD_PAY = "user-center/order/remarks-add-pay";
-    /** 物流 */
-	private static final String LOGISTICS = "user-center/order/logistics";
-    /** 运营人员列表 */
-	private static final String OPERATION_LIST = "user-center/operation/list";
-    /** 添加/编辑运营人员 */
-	private static final String OPERATION_DETAIL = "user-center/operation/form";
-    /** 维修列表 */
-	private static final String REPAIR_LIST = "user-center/repair/list";
-    /** 申请维修 */
-	private static final String REPAIR_FORM = "user-center/repair/form";
-    /** 申请维修 */
-	private static final String REPAIR_FORM_USER = "user-center/repair/form-user";
-    /** 维修详情 */
-	private static final String REPAIR_DETAIL = "user-center/repair/detail";
-    /** 地址管理 */
-	private static final String ADDRESS_LIST = "user-center/address/list";
-    /** 添加地址 */
-	private static final String ADDRESS_FORM = "user-center/address/form";
-    /** 个人资料 */
-	private static final String INFORMATION = "user-center/setting/information";
-    /** 升级会员机构 */
-	private static final String UPGRADE = "user-center/setting/upgrade";
-    /** 重置密码 */
-	private static final String PASSWORD = "user-center/setting/password";
-    /** 更换手机号 */
-	private static final String PHONE = "user-center/setting/phone";
-    /** 系统消息列表 */
-	private static final String MESSAGE = "user-center/message/list";
-	/** 优惠券 */
-	private static final String BEAUTY_FAIR = "user-center/Beautyfair";
-	/** 账户余额明细 */
-	private static final String ACCOUNT_LIST = "user-center/account/account";
-	/** 采美豆明细 */
-	private static final String BEANS_LIST = "user-center/account/beans";
-	/** 我的银行卡 */
-	private static final String CARDS_LIST = "user-center/account/cards";
-	/** 优惠券列表 */
-	private static final String COUPON_LIST = "user-center/account/coupon";
-	/** 领券中心 */
-	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";
-	/** 收藏商品 */
-	private static final String COLLECTION = "user-center/collection/collection";
-
-    /** 我的采美 */
-    @GetMapping("/user/dashboard.html")
-    public String dashboard() {
-        return DASHBOARD;
-    }
-
-    /** 订单列表 */
-    @GetMapping("/user/order/list.html")
-    public String orderList() {
-        return ORDER_LIST;
-    }
-
-    /** 订单详情 */
-    @GetMapping("/user/order/detail.html")
-    public String orderDetail() {
-        return ORDER_DETAIL;
-    }
-
-    /** 物流 */
-    @GetMapping("/user/order/logistics.html")
-    public String logistics() {
-        return LOGISTICS;
-    }
-
-    /** 上传支付凭证 */
-    @GetMapping("/user/order/remarks-pay.html")
-    public String remarksAddPay() {
-        return REMARKS_ADD_PAY;
-    }
-
-    /** 运营人员列表 */
-    @GetMapping("/user/operation/list.html")
-    public String operationList() {
-        return OPERATION_LIST;
-    }
-
-    /** 添加/编辑运营人员 */
-    @GetMapping("/user/operation/form.html")
-    public String operationForm() {
-        return OPERATION_DETAIL;
-    }
-
-    /** 用户维修列表 */
-    @GetMapping("/user/repair/list.html")
-    public String repairList() {
-        return REPAIR_LIST;
-    }
-
-    /** 用户维修详情 */
-    @GetMapping("/user/repair/detail.html")
-    public String repairDetail() {
-        return REPAIR_DETAIL;
-    }
-
-    /** 用户申请维修 */
-    @GetMapping("/user/repair/form.html")
-    public String repairFormUser() {
-        return REPAIR_FORM_USER;
-    }
-
-    /** 申请维修(未登录) */
-    @GetMapping("/repair/form.html")
-    public String repairForm() {
-        return REPAIR_FORM;
-    }
-
-    /** 地址管理 */
-    @GetMapping("/user/address/list.html")
-    public String addressList() {
-        return ADDRESS_LIST;
-    }
-
-    /** 添加地址 */
-    @GetMapping("/user/address/form.html")
-    public String addressForm() {
-        return ADDRESS_FORM;
-    }
-
-    /** 资料 */
-    @GetMapping("/user/setting/information.html")
-    public String settingInformation() {
-        return INFORMATION;
-    }
-
-    /** 升级会员 */
-    @GetMapping("/user/setting/upgrade.html")
-    public String settingUpgrade() {return UPGRADE; }
-
-    /** 重置密码 */
-    @GetMapping("/user/setting/password.html")
-    public String settingPassword() {
-        return PASSWORD;
-    }
-
-    /** 更换手机号 */
-    @GetMapping("/user/setting/phone.html")
-    public String settingPhone() {
-        return PHONE;
-    }
-    /** 消息列表 */
-    @GetMapping("/user/message/list.html")
-    public String settingMessage() {return MESSAGE;}
-
-    /** 优惠券 */
-    @GetMapping("/user/beautyfair.html")
-    public String beautyFair() {return BEAUTY_FAIR;}
-
-    /** 账户余额明细 */
-    @GetMapping("/user/account.html")
-    public String account() {return ACCOUNT_LIST;}
-
-    /** 采美豆明细 */
-    @GetMapping("/user/beans.html")
-    public String beans() {return BEANS_LIST;}
-
-    /** 我的银行卡 */
-    @GetMapping("/user/cards.html")
-    public String cards() {return CARDS_LIST;}
-
-    /** 优惠券列表 */
-    @GetMapping("/user/coupon.html")
-    public String coupon() {return COUPON_LIST;}
-
-    /** 领券中心 */
-    @GetMapping("/user/coupon-collection.html")
-    public String couponCollection() {return COUPON_COLLECTION;}
-
-    /** 兑换优惠券 */
-    @GetMapping("/user/coupon-exchange.html")
-    public String couponExchange() {return COUPON_EXCHANGE;}
-
-    /** 收藏商品 */
-    @GetMapping("/user/collection.html")
-    public String collection() {return COLLECTION;}
-
-    /** 会员中心 */
-    @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;}
-}
+package com.caimei.www.controller.authorized.user;
+
+import com.caimei.www.controller.BaseController;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+/**
+ * 【机构】个人中心
+ *
+ * @author : Charles
+ * @date : 2020/8/27
+ */
+@Controller
+public class UserPageController extends BaseController {
+    /** 我的采美 */
+	private static final String DASHBOARD = "user-center/dashboard";
+    /** 订单列表 */
+	private static final String ORDER_LIST = "user-center/order/list";
+    /** 订单详情 */
+	private static final String ORDER_DETAIL = "user-center/order/detail";
+    /** 上传支付凭证 */
+    private static final String REMARKS_ADD_PAY = "user-center/order/remarks-add-pay";
+    /** 物流 */
+	private static final String LOGISTICS = "user-center/order/logistics";
+    /** 运营人员列表 */
+	private static final String OPERATION_LIST = "user-center/operation/list";
+    /** 添加/编辑运营人员 */
+	private static final String OPERATION_DETAIL = "user-center/operation/form";
+    /** 维修列表 */
+	private static final String REPAIR_LIST = "user-center/repair/list";
+    /** 申请维修 */
+	private static final String REPAIR_FORM = "user-center/repair/form";
+    /** 申请维修 */
+	private static final String REPAIR_FORM_USER = "user-center/repair/form-user";
+    /** 维修详情 */
+	private static final String REPAIR_DETAIL = "user-center/repair/detail";
+    /** 地址管理 */
+	private static final String ADDRESS_LIST = "user-center/address/list";
+    /** 添加地址 */
+	private static final String ADDRESS_FORM = "user-center/address/form";
+    /** 个人资料 */
+	private static final String INFORMATION = "user-center/setting/information";
+    /** 升级会员机构 */
+	private static final String UPGRADE = "user-center/setting/upgrade";
+    /** 重置密码 */
+	private static final String PASSWORD = "user-center/setting/password";
+    /** 更换手机号 */
+	private static final String PHONE = "user-center/setting/phone";
+    /** 系统消息列表 */
+	private static final String MESSAGE = "user-center/message/list";
+	/** 优惠券 */
+	private static final String BEAUTY_FAIR = "user-center/Beautyfair";
+	/** 账户余额明细 */
+	private static final String ACCOUNT_LIST = "user-center/account/account";
+	/** 采美豆明细 */
+	private static final String BEANS_LIST = "user-center/account/beans";
+	/** 我的银行卡 */
+	private static final String CARDS_LIST = "user-center/account/cards";
+	/** 优惠券列表 */
+	private static final String COUPON_LIST = "user-center/account/coupon";
+	/** 领券中心 */
+	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 COUPON_DETAILS = "user-center/account/coupon-details";
+	/** 会员中心 */
+	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";
+	/** 收藏商品 */
+	private static final String COLLECTION = "user-center/collection/collection";
+
+    /** 我的采美 */
+    @GetMapping("/user/dashboard.html")
+    public String dashboard() {
+        return DASHBOARD;
+    }
+
+    /** 订单列表 */
+    @GetMapping("/user/order/list.html")
+    public String orderList() {
+        return ORDER_LIST;
+    }
+
+    /** 订单详情 */
+    @GetMapping("/user/order/detail.html")
+    public String orderDetail() {
+        return ORDER_DETAIL;
+    }
+
+    /** 物流 */
+    @GetMapping("/user/order/logistics.html")
+    public String logistics() {
+        return LOGISTICS;
+    }
+
+    /** 上传支付凭证 */
+    @GetMapping("/user/order/remarks-pay.html")
+    public String remarksAddPay() {
+        return REMARKS_ADD_PAY;
+    }
+
+    /** 运营人员列表 */
+    @GetMapping("/user/operation/list.html")
+    public String operationList() {
+        return OPERATION_LIST;
+    }
+
+    /** 添加/编辑运营人员 */
+    @GetMapping("/user/operation/form.html")
+    public String operationForm() {
+        return OPERATION_DETAIL;
+    }
+
+    /** 用户维修列表 */
+    @GetMapping("/user/repair/list.html")
+    public String repairList() {
+        return REPAIR_LIST;
+    }
+
+    /** 用户维修详情 */
+    @GetMapping("/user/repair/detail.html")
+    public String repairDetail() {
+        return REPAIR_DETAIL;
+    }
+
+    /** 用户申请维修 */
+    @GetMapping("/user/repair/form.html")
+    public String repairFormUser() {
+        return REPAIR_FORM_USER;
+    }
+
+    /** 申请维修(未登录) */
+    @GetMapping("/repair/form.html")
+    public String repairForm() {
+        return REPAIR_FORM;
+    }
+
+    /** 地址管理 */
+    @GetMapping("/user/address/list.html")
+    public String addressList() {
+        return ADDRESS_LIST;
+    }
+
+    /** 添加地址 */
+    @GetMapping("/user/address/form.html")
+    public String addressForm() {
+        return ADDRESS_FORM;
+    }
+
+    /** 资料 */
+    @GetMapping("/user/setting/information.html")
+    public String settingInformation() {
+        return INFORMATION;
+    }
+
+    /** 升级会员 */
+    @GetMapping("/user/setting/upgrade.html")
+    public String settingUpgrade() {return UPGRADE; }
+
+    /** 重置密码 */
+    @GetMapping("/user/setting/password.html")
+    public String settingPassword() {
+        return PASSWORD;
+    }
+
+    /** 更换手机号 */
+    @GetMapping("/user/setting/phone.html")
+    public String settingPhone() {
+        return PHONE;
+    }
+    /** 消息列表 */
+    @GetMapping("/user/message/list.html")
+    public String settingMessage() {return MESSAGE;}
+
+    /** 优惠券 */
+    @GetMapping("/user/beautyfair.html")
+    public String beautyFair() {return BEAUTY_FAIR;}
+
+    /** 账户余额明细 */
+    @GetMapping("/user/account.html")
+    public String account() {return ACCOUNT_LIST;}
+
+    /** 采美豆明细 */
+    @GetMapping("/user/beans.html")
+    public String beans() {return BEANS_LIST;}
+
+    /** 我的银行卡 */
+    @GetMapping("/user/cards.html")
+    public String cards() {return CARDS_LIST;}
+
+    /** 优惠券列表 */
+    @GetMapping("/user/coupon.html")
+    public String coupon() {return COUPON_LIST;}
+
+    /** 领券中心 */
+    @GetMapping("/user/coupon-collection.html")
+    public String couponCollection() {return COUPON_COLLECTION;}
+
+    /** 兑换优惠券 */
+    @GetMapping("/user/coupon-exchange.html")
+    public String couponExchange() {return COUPON_EXCHANGE;}
+
+    /** 优惠券详情 */
+    @GetMapping("/user/coupon-details.html")
+    public String couponDetails() {return COUPON_DETAILS;}
+
+    /** 收藏商品 */
+    @GetMapping("/user/collection.html")
+    public String collection() {return COLLECTION;}
+
+    /** 会员中心 */
+    @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/pay/caimei-paycash.css

@@ -241,6 +241,26 @@ input::-webkit-outer-spin-button {
     .record-title,.method-title{font-size:3.7vw;color:#22272e;line-height:8vw}
     .payment{border-top:none;padding:2.6vw 0;}
     .record-li{margin-top:3vw}
+
+    .pay-coupontitle{line-height: 72px;font-size: 24px;width: 100%;box-sizing: border-box;padding: 0 16px;font-weight: bold;}
+    .pay-coupon{width: 100%;height: 118px;box-sizing: border-box;padding: 16px;background: #FFFFFF;}
+    .pay-coupon .pay-coupon-title{width: 100%;line-height: 24px;font-size: 18px;color: #333333;margin-bottom: 16px;}
+    .pay-coupon .pay-coupon-title span{color: #FF5B00;}
+    .pay-coupon .pay-coupon-content{font-size: 24px;color: #333333;line-height: 32px;}
+    .pay-coupon .pay-coupon-content span{color: #F94B4B;font-weight: bold;}
+    .pay-ment{width: 100%;height: auto;float: left;background: #FFFFFF;margin-top: 7px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);border-radius: 8px;overflow: hidden;}
+    .pay-ment .pay-record{width: 100%;height: auto;float: left;background: #FFFFFF;padding: 10px 0;box-sizing:border-box;}
+    .pay-ment .pay-record .record-title{width: 100%;padding: 0 20px;background: #FFFFFF;line-height: 44px;font-size: 16px;color: #333333;text-align: left;box-sizing:border-box;}
+    .pay-ment .pay-record .record-content{width: 1160px;height: auto;padding: 8px 540px 8px 10px;margin: 0 auto;background: #FFF;border-radius: 5px;box-sizing:border-box;}
+    .pay-ment .pay-record .record-content .record-li{width: 100%;height: 30px;float: left;}
+    .pay-ment .pay-record .record-content .record-li.none{font-size: 14px;color: #627386;text-align: left;line-height: 30px;}
+    .pay-ment .pay-record .record-content .record-li .record-tb{width: 33.33%;height: 30px;float: left;font-size: 14px;color: #333333;text-align: left;line-height: 30px;}
+    .pay-ment .pay-record .record-content .record-li .record-tb:last-child{text-align: right;color: #999999;}
+    .pay-method{width: 100%;height: auto;float: left;background: #FFFFFF;margin-top: 20px;border-radius: 8px;overflow: hidden;}
+    .pay-method .method-title{box-sizing:border-box;width: 100%;padding: 0 20px;background: #FFFFFF;line-height: 44px;font-size: 16px;color: #333333;text-align: left;}
+    .pay-method .method-title span{font-size: 14px;line-height: 30px;color: #FF5B00;text-align: left;padding-left: 20px;}
+    .pay-method .method-content{width: 100%;height: auto;padding: 0 0 20px 0;float: left;}
+    .pay-method .method-content .payment{width: 100%;height: auto;}
     .payment-check-bank{width: 100%;height: auto;box-sizing: border-box;float: left;}
     .payment-check-bank .check-bank-cell{width: 100%;height: 11.7vw;box-sizing: border-box;border: 1px solid #D4D9E1;display: block;float: left;margin-bottom: 2.4vw;padding: 2.4vw; }
     .payment-check-bank .check-bank-cell .cell-icon{ width: 4vw;height: 100%;float: left;box-sizing: border-box;}

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

@@ -0,0 +1,62 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    .coupon-title{width: 1184px;margin: 0 auto;box-sizing: border-box;height: 60px;padding: 0 24px;padding-top: 16px;line-height: 44px;}
+    .coupon-title .coupon-name{float: left;font-size: 16px;color: #4a4f58;font-weight: bold;}
+    .coupon-title .coupon-name-use{float: right;font-size: 14px;color: #627386;cursor: pointer;}
+    .coupon-title .coupon-name-use:hover{color: #E15621;}
+    .pageWrap{width: 968px;}
+    .navLayout{min-height: 500px;}
+    .coupon-container{width: 100%;min-height: 600px;background-color: #FFFFFF;}
+    .coupon-content-list{width: 100%;height: auto;box-sizing: border-box;padding:24px 13px 7px 13px;}
+    .coupon-list-cell{width: 369px;height: 148px;float: left;margin: 0 24px 17px 0;position: relative;background: url("/img/account/icon-coupon-uesb@2x.png") no-repeat;background-size: cover;}
+    .coupon-list-cell:nth-child(3n){margin-right: 0;}
+    .coupon-list-cell .coupon-list-le{width: 260px;height: 148px;float: left;box-sizing: border-box;padding: 24px 14px 12px 14px;}
+    .coupon-list-cell .coupon-list-money{width: 100%;height: 56px;line-height: 56px;color: #f94b4b;font-size: 14px;text-align: left;}
+    .coupon-list-cell .coupon-list-money .maxMoney{font-size: 40px;margin-right: 8px;}
+    .coupon-list-cell .coupon-list-name{width: 100%;height: 22px;line-height: 22px;color: #333333;font-size: 14px;text-align: left;margin-top: 13px;}
+    .coupon-list-cell .coupon-list-time{width: 100%;height: 22px;line-height: 22px;color: #999999;font-size: 12px;text-align: left;}
+    .coupon-list-cell .coupon-list-ri{width: 109px;height: 148px;float: left;box-sizing: border-box;font-size: 16px;color: #FFF;cursor: pointer;}
+    .coupon-list-cell .coupon-list-ri .buy{width: 100%;height: 100%;box-sizing: border-box;padding: 58px 0 0 0;text-align: center;}
+    .coupon-list-cell .coupon-list-ri .buy p{font-size: 16px;}
+    .coupon-list-cell .coupon-list-ri span{display: block;width: 100%;height: 100%;box-sizing: border-box;padding: 45px 47px;}
+    .coupon-list-cell .coupon-list-ri span.none{padding: 54px 47px;}
+    .coupon-list-cell .coupon-tags{height: 24px;line-height: 24px;text-align: center;border-radius: 8px 0 8px 0;position: absolute;top: 0;left: 0;padding: 0 10px;background-color: #f94b4b;color: #FFF;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 180px;height: 180px;}
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    body{ background: #FFFFFF; }
+    #beansPage{ padding-top: 27vw; }
+    footer{ display: none; }
+    .coupon-title{width: 100%;margin: 0 auto;box-sizing: border-box;height:10.8vw;padding: 0 3.4vw;line-height: 10.8vw;}
+    .coupon-title .coupon-name{float: left;font-size: 3.7vw;color: #4a4f58;font-weight: bold;}
+    .coupon-title .coupon-name-use{float: right;font-size: 3vw;color: #627386;cursor: pointer;}
+    .coupon-container{width: 100%;min-height: 500px;background-color: #FFFFFF;}
+    .coupon-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.45vw;}
+    .coupon-list-cell{width: 93.1vw;height: 33vw;float: left;margin: 0 0 2.4vw 0;position: relative;border-radius: 1vw;}
+    .coupon-list-cell .coupon-list-le{width: 70.5vw;height: 33vw;float: left;box-sizing: border-box;padding: 6.8vw 3.7vw 3.3vw 3.7vw;}
+    .coupon-list-cell .coupon-list-money{width: 100%;height:10vw;line-height: 10vw;color: #f94b4b;font-size: 3vw;text-align: left; }
+    .coupon-list-cell .coupon-list-money .maxMoney{font-size: 7.2vw;margin-right: 2.4vw;}
+    .coupon-list-cell .coupon-list-money.none, .coupon-list-cell .coupon-list-name.none, .coupon-list-cell .coupon-list-time.none{color: #FFF;}
+    .coupon-list-cell .coupon-list-name{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #333333;font-size: 3.4vw;text-align: left;margin-top: 4vw;}
+    .coupon-list-cell .coupon-list-time{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #999999;font-size: 2.4vw;text-align: left;}
+    .coupon-list-cell .coupon-list-ri{width: 22.5vw;height: 33vw;float: left;box-sizing: border-box;font-size:3.4vw;color: #FFF;cursor: pointer;}
+    .coupon-list-cell .coupon-list-ri .buy{width: 100%;height: 100%;box-sizing: border-box;padding: 12vw 0 0 0;text-align: center;}
+    .coupon-list-cell .coupon-list-ri .buy p{font-size: 3.4vw;}
+    .coupon-list-cell .coupon-list-ri span{display: block;width: 100%;height: 100%;box-sizing: border-box;padding: 9.5vw 9.5vw;font-size: 4vw;}
+    .coupon-list-cell .coupon-list-ri span.none{padding: 11.8vw 9.5vw;}
+    .coupon-list-cell .coupon-tags{height: 4.8vw;line-height: 4.8vw;text-align: center;background-color: #f94b4b;color: #FFF;border-radius: 1.6vw 0 1.6vw 0;position: absolute;top: 0;left: 0;padding: 0 1.5vw;font-size: 3vw;}
+    .coupon-list-cell{background: url("/img/account/icon-coupon-uesb@h52x.png") no-repeat;background-size: cover;}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 36vw;height: 36vw;}
+
+}
+

src/main/resources/static/js/flea-market/form.js

@@ -30,7 +30,6 @@ var fleaMarketForm = new Vue({
         GoodsImagesList:[],
         oldNum:0,
         secondType:0,
-        vShow_GoodsImages:false,
         fromMessage:'',//提示文字
         formData:new FormData(),
         secondParams:{

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

@@ -0,0 +1,96 @@
+;
+var orderPage = new Vue({
+    el: "#beansPage",
+    data: {
+        isRequset:false,
+        coupon:{},
+        userId:0
+    },
+    filters: {
+        TypeFormat:function(value) {
+            switch (value) {
+                case 0:
+                    return  '活动券';
+                    break;
+                case 1:
+                    return  '品类券';
+                    break;
+                case 2:
+                    return  '用户专享券';
+                    break;
+                case 3:
+                    return  '店铺券';
+                    break;
+                case 4:
+                    return  '新用户券';
+                    break;
+            }
+        }
+    },
+    computed: {
+    },
+    methods: {
+        getCouponDetail(couponId){//查询优惠券详情
+            const _self = this;
+            ProductApi.QueryCouponDetail({ couponId: couponId },function (response) {
+                if(response.code === 0){
+                    _self.coupon = response.data
+                    _self.isRequset = false;
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        toBuyCoupon(coupon) {// 点击购买按钮事件处理
+            const _self = this;
+            if(this.userId === 0){
+                setBeforeUrl();
+                window.location.href='/login.html';
+            }else{
+                ProductApi.createCouponRecord({userId:_self.userId, couponId:coupon.couponId}, function (response) {
+                    if(response.code === 0){
+                        let couponRecordId = response.data.couponRecordId
+                        window.location.href = '/pay/caimei-hlbpay.html?pageType=3&couponId='+coupon.couponId+'&couponRecordId='+couponRecordId;
+                    }else{
+                        if(response.code === -1){//个人机构不能购买
+                            CAIMEI.Alert('该优惠券仅限医美机构购买，请升级为医美机构后再次购买。', '去升级', true, function(){
+                                window.location.href = "/user/setting/upgrade.html";
+                            });
+                        }else if(response.code === -2){//会员机构不是医美机构不能购买
+                            CAIMEI.dialog('该优惠券仅限医美机构购买',false,function () {});
+                        }else{
+                            CAIMEI.Alert(response.msg, '确定', false);
+                        }
+                    }
+                })
+            }
+        },
+        receiveCoupon(coupon){// 点击领取按钮事件处理
+            const _self = this;
+            console.log(coupon)
+            if(this.userId === 0){
+                setBeforeUrl();
+                window.location.href='/login.html';
+            }else{
+                ProductApi.ReceiveCoupon({userId:_self.userId, couponId:coupon.couponId, source:2}, function (response) {
+                    if(response.code === 0){
+                        CAIMEI.dialog('领取成功',true,function () {
+                            setTimeout(function(){
+                                coupon.couponBtnType = 1;
+                            },200)
+                        });
+                    }else{
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                })
+            }
+        },
+    },
+    mounted: function () {
+        this.couponId = CAIMEI.getUrlParam('couponId')
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+        }
+        this.getCouponDetail(this.couponId);
+    }
+});

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

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title>采美365网</title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+  <link th:href="@{/css/user-center/account/coupon-details.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 采美豆明细 -->
+<div id="beansPage" v-cloak>
+  <div class="navLayout" v-cloak>
+    <div class="wrap clear">
+        <!--loading-->
+        <div v-if="isRequset" class="loading">
+          <img src="/img/base/loading.gif">
+        </div>
+        <div class="coupon-container clear" v-else>
+          <div class="coupon-content-list clear" v-if="coupon">
+            <div class="coupon-list-cell">
+              <div class="coupon-list-le">
+                <div class="coupon-list-money">
+                  <p>￥<span class="maxMoney">{{ coupon.couponAmount }}</span><span class="minMoney">满{{ coupon.touchPrice }}可用</span></p>
+                </div>
+                <div class="coupon-list-name">
+                  <p v-if="coupon.couponType == 0">
+                    {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : coupon.couponName  }}
+                  </p>
+                  <p v-if="coupon.couponType == 1">
+                    {{ coupon.categoryType == 1 ? coupon.couponName : coupon.couponName }}
+                  </p>
+                  <p v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</p>
+                  <p v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</p>
+                </div>
+                <div class="coupon-list-time"> {{ coupon.startDate }} - {{ coupon.endDate }}</div>
+              </div>
+              <div class="coupon-list-ri">
+                <template v-if="coupon.couponPayWay === 1">
+                  <div class="buy" @click="toBuyCoupon(coupon)" id="coupon-buy-coupon">
+                    <p>￥{{ coupon.moneyCouponPrice }}</p>
+                    <p>购买</p>
+                  </div>
+                </template>
+                <template v-else>
+                  <span class="none" @click="receiveCoupon(coupon)" id="coupon-receive">领取</span>
+                </template>
+              </div>
+              <template v-if="coupon.moneyCouponFlag == 1">
+                <div class="coupon-tags" v-if="coupon.moneyCouponType == 1">意向{{ coupon.couponType | TypeFormat }}</div>
+                <div class="coupon-tags"  v-else>定向{{ coupon.couponType | TypeFormat }}</div>
+              </template>
+              <template v-else>
+                <div class="coupon-tags">{{ coupon.couponType | TypeFormat }}</div>
+              </template>
+            </div>
+          </div>
+          <div v-else class="empty">
+            <img src="/img/account/icon-coupon-empty@2x.png">
+            <div class="msg"><p>暂无可领的优惠券</p></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/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/coupon-details.js(v=${version})}"></script>
+</body>
+</html>