样式调整

zhangxiaoru
Commit f6c29448c34fb5071e20755155ab8036b335091a 1 parent 7aa240b4
Showing 8 changed files with 136 additions and 26 deletions
apps/me/controllers/index.js
apps/me/router.js
apps/product/controllers/detail.js
apps/product/models/detail.js
public/scss/me/_vip-grade.css
public/vue/me/home.vue
public/vue/me/vip-grade.vue
public/vue/product/detail/index.vue
--- a/apps/me/controllers/index.js
View file @f6c2944
+++ b/apps/me/controllers/index.js
View file @f6c2944
@@ -282,7 +282,6 @@ const component = {
         let responseData = {
             module: 'me',
-            page: 'grade',
             title: '会员特权详情'
         };
--- a/apps/me/router.js
View file @f6c2944
+++ b/apps/me/router.js
View file @f6c2944
@@ -93,7 +93,7 @@ router.get('/me/preferlist', require(cRoot + '/prefer').list);
 // 会员等级
 router.get('/me/grade', auth, home.grade);
-router.get('/me/gradeData', auth, home.gradeData);
+router.get('/me/gradeData', home.gradeData);
 router.get('/me/privilege', auth, home.preferential);
 module.exports = router;
--- a/apps/product/controllers/detail.js
View file @f6c2944
+++ b/apps/product/controllers/detail.js
View file @f6c2944
@@ -31,6 +31,14 @@ const saveRecentGoodInCookies = (oldSkns, res, addSkns) => {
     });
 };
+const vipLe = (key) => {
+    return {
+        银卡: 1,
+        金卡: 2,
+        白金: 3,
+    }[key];
+};
+
 /**
  * 商品详情
  */
@@ -51,8 +59,7 @@ const component = {
             product.formatPrice = product.formatSalesPrice !== '0' ? product.formatSalesPrice : product.formatMarketPrice;
             product.isDiscount = product.marketPrice > product.salesPrice;
-            console.log(product);
-            res.render('detail', {
+            res.render('pdetail', {
                 module: 'product',
                 page: 'detail',
                 pid: pid,
@@ -71,11 +78,24 @@ const component = {
         };
         model.product(params).then(result => {
+            let vipPrice = [];
+
             // 最近浏览存储cookies
             if (_.has(result.data, 'product_skn') && !req.user.uid) {
                 saveRecentGoodInCookies(req.cookies._browseskn_h5, res, result.data.product_skn);
             }
+            if (result.data.vip) {
+                for (let val of result.data.vip) {
+                    vipPrice.push({
+                        level: vipLe(val.caption),
+                        price: val.price
+                    });
+                }
+
+                result.data.vipPrice = vipPrice;
+            }
+
             res.json(result);
         }).catch(next);
     },
--- a/apps/product/models/detail.js
View file @f6c2944
+++ b/apps/product/models/detail.js
View file @f6c2944
@@ -63,6 +63,7 @@ const model = {
         }, params), {
             code: 200
         }).then(result => {
+
             if (result.data) {
                 let storage = 0; // result.storage 的 数值 不可靠，循环累加 库存
                 const goodsList = result.data.goods_list;
--- a/public/scss/me/_vip-grade.css
View file @f6c2944
+++ b/public/scss/me/_vip-grade.css
View file @f6c2944
@@ -30,37 +30,63 @@
             max-width: 240px;
             text-overflow: ellipsis;
             white-space: nowrap;
-            font-size: 25px;
+            font-size: 40px;
             margin-right: 0.5rem;
         }
         .vip-icon {
+            margin-top: 6px;
             float: left;
-            width: 72px;
-            height: 32px;
-            line-height: 36px;
+            width: 110px;
+            height: 40px;
+            line-height: 40px;
+        }
+
+        .vip-3 {
+            background: resolve("me/vip-3.png");
+        }
+
+        .vip-2 {
+            background: resolve("me/vip-2.png");
+        }
+
+        .vip-1 {
+            background: resolve("me/vip-1.png");
+        }
+
+        .vip-3,
+        .vip-2,
+        .vip-1 {
+            background-size: 100%;
         }
         .grade-desc {
             margin-top: 20px;
-            font-size: 22px;
+            font-size: 26px;
             color: #b0b0b0;
+
+            .sub-desc {
+                margin-top: 10px;
+            }
         }
         .sum-cost {
-            font-size: 22px;
+            margin-top: 10px;
+            font-size: 26px;
             > span {
                 font-style: italic;
-                font-size: 28px;
-                color: #d1021c;
+                font-size: 34px;
+                color: #000;
+                font-weight: bold;
             }
         }
         .progresser {
             position: relative;
             width: 100%;
-            padding: 20px 0;
+            padding: 15px 0;
+            margin-bottom: 30px;
         }
         .outer {
@@ -71,16 +97,17 @@
         .inner {
             position: absolute;
-            top: 20px;
+            top: 15px;
             height: 20px;
-            background: #d1021c;
+            background: #000;
             border-radius: 10px;
         }
         .beacon {
             position: absolute;
-            margin-top: 5px;
+            margin-top: 15px;
             font-style: italic;
+            margin-bottom: 30px;
         }
         .beacon-max {
@@ -89,7 +116,7 @@
         .cost-limit {
             position: absolute;
-            top: -5px;
+            top: -30px;
             right: 0;
             color: #b0b0b0;
         }
@@ -111,7 +138,7 @@
     .cost li {
         height: 90px;
         line-height: 90px;
-        font-size: 30px;
+        font-size: 34px;
         padding-right: 0;
         &:first-child {
@@ -121,6 +148,7 @@
         > span {
             float: right;
             padding: 0 30px 0 0;
+            font-size: 28px;
         }
     }
@@ -169,12 +197,20 @@
     }
     li {
-        padding: 25px 0;
+        padding-top: 25px;
     }
     p {
         font-size: 28px;
         margin-left: 100px;
+        padding-bottom: 25px;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    li:last-child {
+        p {
+            border-bottom: none;
+        } 
     }
     span {
--- a/public/vue/me/home.vue
View file @f6c2944
+++ b/public/vue/me/home.vue
View file @f6c2944
@@ -6,8 +6,8 @@
         <a class="user-info auth" id="user-info" href='/me/mydetails'>
             <img class="user-avatar" :src="headIco" @error="setEmptyimg">
         </a>
-        <a class="vip-level level-{{data.vipLevel}}" v-if="data.vipLevel" href='/me/grade'></a>
         <span class="username">{{ data.nickName }}</span>
+        <a class="vip-level level-{{data.vipLevel}}" v-if="data.vipLevel" href='/me/grade'></a>
     </div>
     <div class="my-order">
         <a class="order-title auth"  href="/me/order?type=1">
@@ -137,7 +137,6 @@
                     } else {
                         getRecordsNum(this);
                     }
-
                 } else {
                     this.data = {
                         nickName: '登录/注册'
@@ -281,11 +280,11 @@
         .vip-level {
             display: block;
-            position: relative;
-            top: 75px;
             width: 100px;
-            height: 34px;
-            left: 415px;
+            height: 36px;
+            position: relative;
+            top: 160px;
+            left: 325px;
         }
         .level-1,
--- a/public/vue/me/vip-grade.vue
View file @f6c2944
+++ b/public/vue/me/vip-grade.vue
View file @f6c2944
@@ -2,6 +2,7 @@
     <div class="basic-info block" v-if="vipGrade.vip3">
         <p>
             <span class="user-name">{{vipGrade.name}}</span>
+            <span class="vip-icon vip-3"></span>
         </p>
         <p class="grade-desc">
             您已升级至最高的等级啦！
@@ -20,6 +21,7 @@
     <div class="basic-info block" v-if="vipGrade.vip2">
         <p>
             <span class="user-name">{{vipGrade.name}}</span>
+            <span class="vip-icon vip-2"></span>
         </p>
         <p class="grade-desc">
             还差<span class="cost-gap">&yen;{{vipGrade.costGap}}</span>就可以升级为白金会员!
@@ -41,6 +43,7 @@
     <div class="basic-info block" v-if="vipGrade.vip1">
         <p>
             <span class="user-name">{{vipGrade.name}}</span>
+            <span class="vip-icon vip-1"></span>
         </p>
         <p class="grade-desc">
             还差<span class="cost-gap">&yen;{{vipGrade.costGap}}</span>就可以升级为金卡会员!
@@ -93,7 +96,7 @@
     </ul>
     <div class="privilege block" v-if="!vipGrade.vip0">
-        <h3 class="title">当前可享受的特权</h3>
+        <h3 class="title">我享受的特权</h3>
         <ul class="privilege-list">
             <li v-for="pri in vipGrade.privilege">
                 <span class="icon {{pri.pic}}"></span>
--- a/public/vue/product/detail/index.vue
View file @f6c2944
+++ b/public/vue/product/detail/index.vue
View file @f6c2944
@@ -11,6 +11,12 @@
                :class="{price: true, highlight: entity.market_price > entity.sales_price}">
                 {{entity.format_sales_price !== '0' ? entity.format_sales_price : entity.format_market_price}}
             </i>
+            <ul class="vip-level" v-if="entity.vipPrice">
+                <li class="icons-item" v-for="vip in entity.vipPrice">
+                    <span class="vip-img vip-{{vip.level}}"></span>
+                    <span class="vip-price">{{vip.price}}</span>
+                </li>
+            </ul>
         </div>
     </show-box>
@@ -261,6 +267,7 @@
     ul.service {
         font-size: 0;
+
         li {
             font-size: 24px;
             width: 195px;
@@ -350,6 +357,50 @@
                 color: #d0021b;
             }
         }
+
+        .vip-level {
+            padding: 0 40px;
+            min-height: 2.2rem;
+            background-color: #fff;
+
+            .icons-item {
+                float: left;
+                margin: 0;
+                width: 33.3%;
+                height: 90px;
+                font-size: 22px;
+                line-height: 90px;
+
+                span {
+                    display: inline-block;
+                    padding-left: 8px;
+                    vertical-align: middle;
+                }
+            }
+
+            .vip-img {
+                width: 90px;
+                height: 33px;
+            }
+
+            .vip-3 {
+                background: resolve("me/vip-3.png");
+            }
+
+            .vip-2 {
+                background: resolve("me/vip-2.png");
+            }
+
+            .vip-1 {
+                background: resolve("me/vip-1.png");
+            }
+
+            .vip-3,
+            .vip-2,
+            .vip-1 {
+                background-size: 100%;
+            }
+        }
     }
     .control-box {
@@ -621,6 +672,7 @@
                         // 是否支持7天无理由退换货
                         $.get(`/product/refundExchange/${data.product_skn}`).then(sd => {
                             let support = sd.data[data.product_skn] === "N" ? "Y" : "N";
+
                             this.$set('intro.supportRefundExchange', support);
                         });