Ver código fonte

mine页面调整

e 8 anos atrás
pai
commit
f0b9cc0dcf

+ 1 - 0
www/webapp/o2o/css/main.css

@@ -5,6 +5,7 @@
 @import url("./product.css");
 @import url("./placeOrder.css");
 @import url("./myOrder.css");
+@import url("./mine.css");
 @import url("./desc.css");
 @import url("./agreement.css");
 @import url("./review.css");

+ 228 - 0
www/webapp/o2o/css/mine.css

@@ -0,0 +1,228 @@
+
+body {
+    font-family: "Microsoft Yahei" !important;
+}
+#mineScroll div .user {
+    position: relative;
+}
+#mineScroll div .user img {
+    width: 100%;
+}
+#mineScroll div .user .user-image {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    top: 4rem;
+    right: 0;
+    left: 0;
+    margin: 0 auto;
+    background: #fff;
+    border-radius: 50%;
+}
+#mineScroll div .user .user-name {
+    position: absolute;
+    top: 10rem;
+    right: 0;
+    left: 0;
+    color: #fff;
+    text-align: center;
+}
+#mineScroll div .user-balance {
+    margin-top: 1rem;
+    width: 100%;
+    line-height: 2rem;
+    text-align: center;
+}
+#mineScroll div .user-balance span {
+    top: -8px;
+}
+#mineScroll div .user-balance span img {
+    width: 8%;
+    margin: 0 3px -2% 0;
+}
+#mineScroll div .mine-type {
+    margin-top: 1rem;
+    width: 100%;
+    /*height: 250px;*/
+}
+#mineScroll div .mine-type div {
+    float: left;
+    padding-top: 5%;
+    padding-bottom: 5%;
+    text-align: center;
+    background: #ffffff;
+}
+#mineScroll div .mine-type div:nth-child(1),
+#mineScroll div .mine-type div:nth-child(2),
+#mineScroll div .mine-type div:nth-child(3) {
+    border-top: 1px solid #b7b7b7;
+}
+#mineScroll div .mine-type div:nth-child(1),
+#mineScroll div .mine-type div:nth-child(2),
+#mineScroll div .mine-type div:nth-child(4),
+#mineScroll div .mine-type div:nth-child(5) {
+    border-bottom: 1px solid #b7b7b7;
+    border-right: 1px solid #b7b7b7;
+}
+#mineScroll div .mine-type div:nth-child(3),
+#mineScroll div .mine-type div:nth-child(6) {
+    border-bottom: 1px solid #b7b7b7;
+}
+#mineScroll div .mine-type div img {
+    width: 50px;
+    height: 50px;
+}
+#mineScroll div .mine-type div .mine-text {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 0;
+}
+#mineScroll .prevent-scroll {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    background-color: #2a2400;
+}
+#mineScroll .prevent-scroll .width-percent-33 .title-container-square {
+    padding: 20%;
+    position: relative;
+    text-align: center;
+}
+#mineScroll .prevent-scroll .width-percent-33 .title-container-square a {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+#mineScroll .prevent-scroll .width-percent-33 .title-container-square a .logo {
+    background-size: 65% 65%;
+    background-position: center center;
+    padding: 10%;
+    margin-top: 5px;
+    display: inline-block;
+    border-radius: 50%;
+}
+#mineScroll .prevent-scroll .width-percent-33 .title-container-square a .name {
+    display: block;
+    margin-top: -5px;
+    font-size: 12px;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(1) a:active .logo {
+    border-radius: inherit;
+    background: url("http://odulvej8l.bkt.clouddn.com/tab_home.png") no-repeat;
+    background-size: 100%;
+    background-position: center center;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(1) a:active .name {
+    color: #fff;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(1) a .logo {
+    border-radius: inherit;
+    background: url("http://odulvej8l.bkt.clouddn.com/tab_home_pre.png") no-repeat;
+    background-size: 90%;
+    background-position: center center;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(1) a .name {
+    color: #b89400;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(2) a .logo {
+    border-radius: 50%;
+    display: inline-block;
+    padding: 25%;
+    background-size: 100%;
+    margin-top: -15px;
+    background: url("http://odulvej8l.bkt.clouddn.com/tab_butler.png") 0 0 no-repeat #2a2400;
+    background-size: 65% 65%;
+    background-position: center;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(3) a .logo {
+    border-radius: inherit;
+    background: url("http://odulvej8l.bkt.clouddn.com/tab_me_pre.png");
+    background-repeat: no-repeat;
+    background-size: 90%;
+    background-position: center center;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(3) a .name {
+    color: #b89400;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(3) a:active .logo {
+    border-radius: inherit;
+    background: url("http://odulvej8l.bkt.clouddn.com/tab_me.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: center center;
+}
+#mineScroll .prevent-scroll .width-percent-33:nth-child(3) a:active .name {
+    color: #fff;
+}
+/*当其最大宽度为320*/
+@media (max-width: 320px) {
+    #mineScroll div .user{
+        margin-top: -20%;
+    }
+    #mineScroll div .user .user-name {
+        top: 8rem;
+    }
+    #mineScroll div .user .user-image {
+        top: 4.2rem;
+    }
+    #mineScroll div .user-balance {
+        font-size: 1rem;
+        margin-top: 0.2rem;
+    }
+    #mineScroll div .mine-type{
+        margin-top:0.3rem;
+    }
+    #mineScroll div .mine-type div img {
+        width: 40px;
+        height: 40px;
+    }
+}
+/*当其最大宽度为360*/
+@media (min-width: 360px) {
+    #mineScroll div .user .user-name {
+        top: 9rem;
+    }
+    #mineScroll div .user-balance {
+        /*font-size: 1rem;
+        margin-top: 0.5rem;*/
+    }
+    #mineScroll div .mine-type div img {
+        /*width: 40px;
+        height: 40px;*/
+    }
+}
+/*当其最小宽度为768*/
+@media (min-width: 768px) {
+    #mineScroll div .user {
+        margin-top: -2rem;
+    }
+    #mineScroll div .user .user-image {
+        top: 7rem;
+        width: 9rem;
+        height: 9rem;
+    }
+    #mineScroll div .user .user-name {
+        top: 19rem;
+        font-size: 2rem;
+    }
+    #mineScroll div .user-balance {
+        margin-top: 1rem;
+        line-height: 4rem;
+        text-align: center;
+        font-size: 2rem;
+    }
+    #mineScroll div .user-balance span {
+        top: -8px;
+    }
+    #mineScroll div .user-balance span img {
+        width: 7%;
+        margin-bottom: -2%;
+    }
+    #mineScroll div .mine-type div img {
+        width: 60px;
+        height: 60px;
+    }
+}

Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
www/webapp/o2o/dist/css/main.css


Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
www/webapp/o2o/dist/js/build/template.js


Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
www/webapp/o2o/dist/js/main.js


Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
www/webapp/o2o/dist/js/model/user.js


+ 1 - 1
www/webapp/o2o/dist/js/page/home.js

@@ -1 +1 @@
-define(["$","template","IScroll","product","user","native","config","address"],function(e,t,n,r,i,s,o,u){function a(e){e.preventDefault(),s.back()}return{title:"壹管家上门服务",body:"",init:function(t,n){var o=this,u=e(document);e.newTouch(".back-button",function(e){a.call(this,e)},o),o.on("tapBackButton",function(e){a.call(this,e)}),e.newTouch(".service-telephone",function(e){e.preventDefault(),s.call("4000328170")},o),e.newTouch(".btn-banner-recharge",function(e){e.preventDefault(),u.trigger("spa:navigate",{hash:"recharge",pushData:{needReload:!0}})},o),e.newTouch(".btn-banner-coupon",function(e){e.preventDefault(),u.trigger("spa:navigate",{hash:"myCoupon",pushData:{needReload:!0}})},o),e.newTouch(".btn-product",function(t){t.preventDefault();var n=parseInt(e(this).attr("data-product-type"));u.trigger("spa:navigate",{hash:"placeOrder",pushData:{product:r.allList[n-1],needReset:!0}})},o),e.newTouch(".btn-action-my-order",function(e){e.preventDefault(),u.trigger("spa:navigate",{hash:""})},o),e.newTouch(".btn-action-coupon",function(e){e.preventDefault(),i.checkLogin(function(){u.trigger("spa:navigate",{hash:"mine",pushData:{needReset:!0}})})},o),n.resolve()},beforeopen:function(e,t){localStorage.removeItem("cart_products"),t.resolve(),s.switchPopGesture(!0)},afteropen:function(s,a){var f=this,l=e(document);if(!s.pushData.dontNeedReload){l.trigger("spa:openloader");var c=t("home/index",{showNavBar:!o.isWX&&!o.isChubao});e(".spa-page-body",f).html(c),setTimeout(function(){s.scroll=new n("#homeScroll");var e=new Swiper(".swiper-container",{autoplay:2500,pagination:".swiper-pagination",paginationClickable:!0,simulateTouch:!1})},500),r.getListAll(i.id),u.getList({request_from:"weixin",user_id:i.id}),l.trigger("spa:closeloader")}a.resolve(),s.prevPage=e(".spa-page-empty")},beforeclose:function(e,t){t.resolve(),s.switchPopGesture(!1)}}});
+define(["$","template","IScroll","product","user","native","config","address"],function(e,t,n,r,i,s,o,u){function a(e){e.preventDefault(),s.back()}return{title:"壹管家上门服务",body:"",init:function(t,n){var o=this,u=e(document);e.newTouch(".back-button",function(e){a.call(this,e)},o),o.on("tapBackButton",function(e){a.call(this,e)}),e.newTouch(".service-telephone",function(e){e.preventDefault(),s.call("4000328170")},o),e.newTouch(".btn-product",function(t){t.preventDefault();var n=parseInt(e(this).attr("data-product-type"));u.trigger("spa:navigate",{hash:"placeOrder",pushData:{product:r.allList[n-1],needReset:!0}})},o),e.newTouch(".btn-action-my-order",function(e){e.preventDefault(),u.trigger("spa:navigate",{hash:""})},o),e.newTouch(".btn-action-coupon",function(e){e.preventDefault(),i.checkLogin(function(){u.trigger("spa:navigate",{hash:"mine",pushData:{needReset:!0}})})},o),n.resolve()},beforeopen:function(e,t){localStorage.removeItem("cart_products"),t.resolve(),s.switchPopGesture(!0)},afteropen:function(s,a){var f=this,l=e(document);if(!s.pushData.dontNeedReload){l.trigger("spa:openloader");var c=t("home/index",{showNavBar:!o.isWX&&!o.isChubao});e(".spa-page-body",f).html(c),setTimeout(function(){s.scroll=new n("#homeScroll");var e=new Swiper(".swiper-container",{pagination:".swiper-pagination",nextButton:".swiper-button-next",prevButton:".swiper-button-prev",paginationClickable:!0,spaceBetween:30,centeredSlides:!0,autoplay:1500,autoplayDisableOnInteraction:!1})},500),r.getListAll(i.id),u.getList({request_from:"weixin",user_id:i.id}),l.trigger("spa:closeloader")}a.resolve(),s.prevPage=e(".spa-page-empty")},beforeclose:function(e,t){t.resolve(),s.switchPopGesture(!1)}}});

Diferenças do arquivo suprimidas por serem muito extensas
+ 1 - 1
www/webapp/o2o/js/build/template.js


+ 1 - 1
www/webapp/o2o/js/model/user.js

@@ -8,7 +8,7 @@ define(['base', '$', 'native', 'api', 'order', 'config', 'address'], function(ba
     }
     User.instance = this;
     this.storagePrefix = 'user_';
-    this.id = ''; //57e22bb59f5160c2048b456c
+    this.id = '57e38f1b9f5160ac048b457d'; //57e22bb59f5160c2048b456c
     this.lastID = this.getCache('lastID', null, '');
     this.name = '';
     this.mobile = '';

+ 10 - 6
www/webapp/o2o/js/page/home.js

@@ -46,7 +46,7 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
                 native.call('4000328170');
             }, $view);
             //点击banner-1进入充值卡页
-            $.newTouch('.btn-banner-recharge', function (event) {
+            /*$.newTouch('.btn-banner-recharge', function (event) {
                 event.preventDefault();
                 $doc.trigger('spa:navigate', {
                     hash: 'recharge',
@@ -54,9 +54,9 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
                         needReload: true
                     }
                 });
-            }, $view);
+            }, $view);*/
             //点击banner-2进入充值卡页面
-            $.newTouch('.btn-banner-coupon', function (event) {
+            /*$.newTouch('.btn-banner-coupon', function (event) {
                 event.preventDefault();
                 $doc.trigger('spa:navigate', {
                     hash: 'myCoupon',
@@ -64,7 +64,7 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
                         needReload: true
                     }
                 });
-            }, $view);
+            }, $view);*/
             /* 点击产品列表的某一项 */
             $.newTouch('.btn-product', function (event) {
                 event.preventDefault();
@@ -233,10 +233,14 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
                 setTimeout(function () {
                     pageData.scroll = new IScroll('#homeScroll');
                     var swiper = new Swiper('.swiper-container', {
-                        autoplay: 2500,
                         pagination: '.swiper-pagination',
+                        nextButton: '.swiper-button-next',
+                        prevButton: '.swiper-button-prev',
                         paginationClickable: true,
-                        simulateTouch : false
+                        spaceBetween: 30,
+                        centeredSlides: true,
+                        autoplay: 1500,
+                        autoplayDisableOnInteraction: false
                     });
                 }, 500);
 

+ 121 - 7
www/webapp/o2o/tpl/mine/index.html

@@ -6,6 +6,89 @@
     <h1 class="title">{{title}}</h1>
 </header>
 {{ /if }}
+
+<div class="content">
+    <div class="box-container box box-vertical">
+        <div id="mineScroll" class="scroll-container box-flex-1">
+            <div class="">
+                <div class="user">
+                    <img src="http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg" alt="">
+
+                    <div class="user-image"></div>
+                    <div class="user-name">{{userName}}</div>
+                </div>
+                <div class="user-balance"><span><img
+                        src="http://odulvej8l.bkt.clouddn.com/mine-%E9%92%B1%E8%A2%8B%E5%AD%90-01.png" alt=""></span>我的余额:{{userBalance}}元
+                </div>
+                <div class="mine-type">
+                    <div class="width-percent-33 btn-my-order">
+                        <img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
+
+                        <div class="mine-text">订单</div>
+                    </div>
+                    <div class="width-percent-33 btn-recharge">
+                        <img src="http://odulvej8l.bkt.clouddn.com/mine-%E5%85%85%E5%80%BC%E5%8D%A1icon-01-01.png" alt="">
+
+                        <div class="mine-text">充值卡</div>
+                    </div>
+                    <div class="width-percent-33 btn-address-list">
+                        <img src="http://odulvej8l.bkt.clouddn.com/mine-%E5%9C%B0%E5%9D%80icon-01-01.png" alt="">
+
+                        <div class="mine-text">地址</div>
+                    </div>
+                    <div class="width-percent-33 btn-contact">
+                        <img src="http://odulvej8l.bkt.clouddn.com/mine-%E5%BB%BA%E8%AE%AEicon-01-01.png" alt="">
+
+                        <div class="mine-text">建议</div>
+                    </div>
+                    <div class="width-percent-33 btn-coupon">
+                        <img src="http://odulvej8l.bkt.clouddn.com/mine-%E4%BB%A3%E9%87%91%E5%88%B8icon-01-01-01.png" alt="">
+
+                        <div class="mine-text">代金券</div>
+                    </div>
+                    <div class="width-percent-33 btn-about">
+                        <img src="http://odulvej8l.bkt.clouddn.com/mine-%E5%85%B3%E4%BA%8Eicon-01-01-01.png" alt="">
+
+                        <div class="mine-text">关于</div>
+                    </div>
+                </div>
+                <!--<div style="width: 100%;padding-bottom: 250px"></div>-->
+            </div>
+
+            <div class="prevent-scroll">
+                <div class="box my-action">
+                    <!--首页-->
+                    <div class="width-percent-33">
+                        <div class="title-container-square">
+                            <a class="btn-home-action btn-action-my-order">
+                                <div class="logo logo-my-order"></div>
+                                <div class="name">首页</div>
+                            </a>
+                        </div>
+                    </div>
+                    <!--LOGO-->
+                    <div class="width-percent-33">
+                        <div class="title-container-square">
+                            <a class="btn-home-action btn-action-logo" href="weixin://contacts/profile/honghaitzz">
+                                <div class="logo logo-my-logo"></div>
+                            </a>
+                        </div>
+                    </div>
+                    <!--我的-->
+                    <div class="width-percent-33">
+                        <div class="title-container-square">
+                            <a class="btn-home-action btn-action-coupon">
+                                <div class="logo logo-coupon"></div>
+                                <div class="name">我的</div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--
 <div class="content">
     <div class="box-container box box-vertical">
         <div id="mineScroll" class="scroll-container box-flex-1">
@@ -41,12 +124,12 @@
                             代金券
                         </a>
                     </li>
-                    <!--<li class="table-view-cell">-->
-                        <!--<a class="navigate-right btn-helper">-->
-                            <!--<img src="http://oduj3utzz.bkt.clouddn.com/qe54qw5e4qw1e23qwwe132q.png" width="20px" height="20px" style="position: relative; top: 4px;"/>-->
-                            <!--帮助中心-->
-                        <!--</a>-->
-                    <!--</li>-->
+                    &lt;!&ndash;<li class="table-view-cell">&ndash;&gt;
+                        &lt;!&ndash;<a class="navigate-right btn-helper">&ndash;&gt;
+                            &lt;!&ndash;<img src="http://oduj3utzz.bkt.clouddn.com/qe54qw5e4qw1e23qwwe132q.png" width="20px" height="20px" style="position: relative; top: 4px;"/>&ndash;&gt;
+                            &lt;!&ndash;帮助中心&ndash;&gt;
+                        &lt;!&ndash;</a>&ndash;&gt;
+                    &lt;!&ndash;</li>&ndash;&gt;
                     <li class="table-view-cell">
                         <a class="navigate-right btn-about">
                             <img src="http://oduj3utzz.bkt.clouddn.com/7uo8i7o98ui78o97u89iouio789.png" width="20px" height="20px" style="position: relative; top: 4px;"/>
@@ -55,7 +138,38 @@
                     </li>
                 </ul>
                 <div style="width: 100%; padding-top: 12%;text-align: center; color: #b6bbc2; font-size:16px;">专属管家 服务无忧</div>
+                <div class="prevent-scroll">
+                    <div class="box my-action">
+                        &lt;!&ndash;首页&ndash;&gt;
+                        <div class="width-percent-33">
+                            <div class="title-container-square">
+                                <a class="btn-home-action btn-action-my-order">
+                                    <div class="logo logo-my-order"></div>
+                                    <div class="name">首页</div>
+                                </a>
+                            </div>
+                        </div>
+                        &lt;!&ndash;LOGO&ndash;&gt;
+                        <div class="width-percent-33">
+                            <div class="title-container-square">
+                                <a class="btn-home-action btn-action-logo" href="weixin://contacts/profile/honghaitzz">
+                                    <div class="logo logo-my-logo"></div>
+                                </a>
+                            </div>
+                        </div>
+                        &lt;!&ndash;我的&ndash;&gt;
+                        <div class="width-percent-33">
+                            <div class="title-container-square">
+                                <a class="btn-home-action btn-action-coupon">
+                                    <div class="logo logo-coupon"></div>
+                                    <div class="name">我的</div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
+
         </div>
     </div>
-</div>
+</div>-->

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff