add loading_more

src/App.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+
     import {Tabbar, TabbarItem, Loading} from 'vux'
     import Api from './lib/api'
     export default {

src/components/address/add_address.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <x-header>添加新地址</x-header>
+        <div v-document_title>添加新地址</div>
         <group class="address_item">
             <x-input title="收件人:" v-model="user_name" placeholder="请输入收件人"></x-input>
             <x-input title="手机号码:" v-model="mobile" type="tel" placeholder="请输入手机号码"></x-input>
@@ -18,7 +18,7 @@
     </div>
 </template>
 <script>
-    import {XHeader, Group, XInput, XButton, Icon, PopupPicker} from 'vux'
+    import { Group, XInput, XButton, Icon, PopupPicker} from 'vux'
     import Api from '../../lib/api.js'
     export default {
         created(){
@@ -58,7 +58,6 @@
         components: {
             Group,
             XInput,
-            XHeader,
             XButton,
             Icon,
             PopupPicker
@@ -131,8 +130,7 @@
 </script>
 <style scoped>
     .address_item {
-        padding-top: 92px;
-        background: #F7F7F7;
+        background: #f9f9f9;
     }
 
     .submit {
@@ -150,7 +148,7 @@
     }
 
     .set_default {
-        background: #F7F7F7;
+        background: #f9f9f9;
         padding: 40px;
     }
 

src/components/address/addressList.vue

@@ -1,5 +1,5 @@
 <script>
-    import {XHeader, Flexbox, FlexboxItem} from 'vux'
+    import { Flexbox, FlexboxItem} from 'vux'
     import Api from "../../lib/api"
     import EditIcon from "../../assets/address_edit_unselected.png"
     export default {
@@ -69,7 +69,7 @@
             });
             return (
                     <div>
-                        <XHeader title='收货地址' leftOptions={{backText: ""}}/>
+                        <div v-document_title>收货地址</div>
                         <div class="list_container padding_lr">
                             {list}
                         </div>
@@ -80,9 +80,6 @@
     }
 </script>
 <style scpoed>
-    .list_container {
-        padding-top: 92px;
-    }
 
     .default_address {
         color: red;

src/components/blocks/block_list.vue

@@ -31,10 +31,6 @@
         },
         created: function () {
             this.getDatas();
-            window.addEventListener('scroll',function(){
-                this.scrollTop = window.scrollY;
-                this.documentHeight = document.body.scrollHeight;
-            })
         },
         methods: {
             getDatas()
@@ -43,6 +39,11 @@
                 let _self = this;
                 this.$http.jsonp(this.datasLink).then(function (res) {
                     let body = JSON.parse(res.bodyText);
+                    _self.datas = body.datas;
+                    _self.hasmore = body.datas['mobile_page'].hasmore;
+                    if(body.datas['mobile_page'].hasmore) {
+                        this.scrollBottomEvent(this.datasLink,this.loadMore);
+                    }
                     _self.special_list = body.datas['special_list'];
                     _self.proxy = new Proxy(body.datas);
                     _self.proxy.setTag("SPECIAL_ID", this.special_id);
@@ -58,11 +59,28 @@
                     });
                     this.$store.commit('updateLoadingStatus', {isLoading: false});
                 })
+            },
+            scrollBottomEvent(link,callback){
+                //滑动到底部
+                window.addEventListener('scroll',function(){
+                    this.scrollTop = document.body.scrollTop;
+                    this.documentHeight = document.body.scrollHeight;
+                    this.windowHeight = window.screen.height*2;
+                    if(this.scrollTop + this.windowHeight >= this.documentHeight){
+                        callback(link);
+                    }
+                });
+            },
+            loadMore(link){
+                this.$http.jsonp(link+'&curpage=3').then(function(res){
+                    console.log(res);
+                })
             }
         },
         data()
         {
             return {
+                datas:{},
                 special_list: [],
                 proxy: {},
                 history: {
@@ -71,7 +89,8 @@
                 hasmore:false,
                 page_total:0,
                 scrollTop:0,
-                documentHeight:0
+                documentHeight:0,
+                windowHeight:0
             }
         }
         ,
@@ -84,20 +103,46 @@
                 let loadMore = createElement(LoadMore, {
                     props: {
                         showLoading: false,
-                        tip: "暂无数据"
+                        tip: "暂无数据",
+                        backgroundColor:"#f9f9f9"
                     }
                 }, []);
-                return createElement('div', {}, [loadMore]);
+                return createElement('div', {
+                    style:{
+                        backgroundColor:"#f9f9f9"
+                    }
+                }, [loadMore]);
             }
-
-
-            _self.special_list.map(function (special) {
-                let comp = BlockUtil.createBlockComp(createElement, special, _self.proxy);
-                if (comp) {
-                    specialArray.push(comp);
+            else {
+                let loadMore = createElement(LoadMore, {
+                    props: {
+                        tip: "正在为您全力加载",
+                        backgroundColor:"red"
+                    },
+                    style:{
+                        margin:'0 auto'
+                    }
+                });
+                let loadMoreBox = createElement('div',{
+                    style:{
+                        backgroundColor:"#f9f9f9"
+                    }
+                },[loadMore]);
+                _self.special_list.map(function (special) {
+                    let comp = BlockUtil.createBlockComp(createElement, special, _self.proxy);
+                    if (comp) {
+                        specialArray.push(comp);
+                    }
+                });
+                if(this.hasmore) {
+                    specialArray.push(loadMoreBox);
                 }
-            });
-            return createElement('div', {}, specialArray);
+                return createElement('div', {
+                    style:{
+                        backgroundColor:"#f9f9f9"
+                    }
+                }, specialArray);
+            }
         }
     }
 </script>
@@ -109,4 +154,8 @@
         height: auto;
         display: block;
     }
+    .weui-loading {
+        min-width: 40px;
+        min-height: 40px;
+    }
 </style>

src/components/blocks/brand.vue

@@ -13,7 +13,10 @@
             let item = this.item;
             return createElement(XImg, {
                 props: {
-                    src: image,
+                    src: image
+                },
+                style:{
+                    minHeight:"250px"
                 },
                 nativeOn: {
                     click()

src/components/blocks/fcode.vue

@@ -71,7 +71,7 @@
 </script>
 <style scoped>
     .container {
-        background-color: #f7f7f7;
+        background-color: #f9f9f9;
     }
 
     .item {

src/components/blocks/goods_list.vue

@@ -25,7 +25,7 @@
         display: flex;
         flex-flow: row wrap;
         color: #000;
-        background: #F7F7F7;
+        background: #f9f9f9;
         margin-top: -2%;
     }
 

src/components/blocks/hot_search.vue

@@ -31,13 +31,13 @@
 </script>
 <style scoped>
     .flex-box {
-        background: #f7f7f7;
+        background: #f9f9f9;
     }
 
     .flex-item {
         text-align: center;
         color: #000;
-        background-color: #f7f7f7;
+        background-color: #f9f9f9;
         background-clip: padding-box;
         font-size: 24px;
         padding: 10px;

src/components/blocks/title.vue

@@ -16,7 +16,7 @@
         padding-left: 20px;
         padding-bottom: 5px;
         color: #959595;
-        background: #F7F7F7;
+        background: #f9f9f9;
         font-weight: normal;
     }
 </style>

src/components/confirm_order/confirm_order.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="datas!==''">
-        <x-header>确认订单</x-header>
+        <div v-document_title>确认订单</div>
         <div class="check_order">
             <div @click="link_address">
                 <flexbox style="background: #fff" v-if="datas.address !== null">
@@ -88,7 +88,7 @@
     </div>
 </template>
 <script>
-    import { XHeader,Flexbox,FlexboxItem,Group,CellBox,XSwitch,XInput,Icon} from 'vux'
+    import { Flexbox,FlexboxItem,Group,CellBox,XSwitch,XInput,Icon} from 'vux'
     import Api from '../../lib/api'
     import Proxy from '../blocks/util/proxy'
 
@@ -119,7 +119,12 @@
             })
         },
         beforeDestroy(){
-
+            this.$store.commit('update_address', {
+                'name': '',
+                'mobile': '',
+                'address': '',
+                'aid' : ''
+            });
         },
         data ()
         {
@@ -170,9 +175,9 @@
                 let offpay_hash = this.datas['payinfo'].offpay_hash;
                 let offpay_hash_batch = this.datas['payinfo'].offpay_hash_batch;
                 let address_id = this.store_address?this.store_address.aid:this.datas['address'].address_id;
+                console.log(address_id);
                 this.$http.jsonp(Api.step_second(cart_id,goods_id,goods_num,address_id,0,vat_hash,offpay_hash,offpay_hash_batch)).then(function(res){
                     let param = res.body.datas.param.data;
-//                    console.log(param);
                     WeixinJSBridge.invoke(
                         'getBrandWCPayRequest', {
                             "appId": param.appId,     //公众号名称，由商户传入
@@ -193,7 +198,6 @@
         },
         components:
         {
-            XHeader,
             Flexbox,
             FlexboxItem,
             Group,
@@ -206,7 +210,7 @@
 </script>
 <style scoped>
     #router_view {
-        background: #F7F7F7;
+        background: #f9f9f9;
     }
     .address_box {
         padding:24px 0 24px 40px;
@@ -222,7 +226,6 @@
         background-size: 100% 100%;
     }
     .check_order {
-        padding-top: 92px;
         padding-bottom: 133px;
     }
     .entry {

src/components/fcode/fcode_list.vue

@@ -1,7 +1,6 @@
 <script>
     import BlockList from '../blocks/block_list.vue'
     import api from '../../lib/api.js'
-    import {XHeader} from 'vux'
 
     export default {
         created(){
@@ -17,21 +16,9 @@
         },
         render(createElement)
         {
-//            return createElement('div',{},[
-//                createElement(XHeader,{
-//                    title:'我的F码',
-//                    showBack:true
-//                }),
-//                createElement(BlockList,{
-//                    props:{
-//                        datasLink:api.getFCode()
-//                    }
-//                })
-//                ]
-//            );
             return  <div>
-                        <XHeader>我的F码</XHeader>
-                        <div style="paddingTop:92px;">
+                        <div v-document_title>我的F码</div>
+                        <div>
                             <BlockList  datasLink={api.getFCode()}></BlockList>
                         </div>
                     </div>

src/components/goods/goods_detail.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="datas!==null">
+        <div v-document_title>商品详情</div>
         <div class="goods_detail_content" :class="{scale:showPopup}">
-            <x-header :left-options="{backText: ''}" :class="{display_none:showPopup}">商品详情</x-header>
             <div class="goods_img">
                 <swiper v-if="datas!=null" :list="getGoodsSwiperList" :show-desc-mask="false" height="720px" :auto="true" :loop="true"></swiper>
                 <div class="collection">已收藏人数&nbsp;&nbsp;{{getOneSummary.goods_collect}}</div>
@@ -51,7 +51,6 @@
                 <cell-form-preview v-if="datas!=null" :list="attrs"></cell-form-preview>
             </group>
             <iframe :src="getGoodsWebView" frameborder="0" width="100%" height="3000" scrolling="no" id="iframe_webview"></iframe>
-            <divider>熊猫美妆</divider>
             <tabbar :class="{display_none:showPopup}">
                 <tabbar-item link="/main/shopping_cart">
                     <img slot="icon" src="../../assets/tabbar_shopcar_default@2x.png">
@@ -111,7 +110,7 @@
     </div>
 </template>
 <script>
-    import { Swiper , Group , Cell , CellBox , CellFormPreview , Flexbox , FlexboxItem , Divider , XHeader , Popup , Tabbar, TabbarItem } from 'vux'
+    import { Swiper , Group , Cell , CellBox , CellFormPreview , Flexbox , FlexboxItem , Divider , Popup , Tabbar, TabbarItem } from 'vux'
     import Api from '../../lib/api.js'
     import Proxy from '../blocks/util/proxy.js'
     import WebView from '../blocks/webview.vue'
@@ -144,7 +143,6 @@
                     link:window.location.href,
                     imgUrl:'http://manager.lrlz.com/data/upload/shop/store/goods/6/6_05065318508868273_360.jpg'
                 });
-            console.log(this.$store.state.wechatShareMsg);
             document.body.removeEventListener('touchmove',this.noscroll,false);
         },
         data () {
@@ -319,7 +317,6 @@
             CellFormPreview,
             Cell,
             Divider,
-            XHeader,
             Popup,
             Tabbar,
             TabbarItem
@@ -374,7 +371,6 @@
         width: 22px;
     }
     .goods_img {
-        padding-top: 92px;
         position: relative;
     }
     .collection {

src/components/login/login.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <x-header :left-options="{backText: ''}">登录</x-header>
+        <div v-document_title>登录</div>
         <div class="login_input">
             <input type="tel" name="userMobile" class="input_mobile" v-model="userMobile" placeholder="请输入您的手机号码">
             <flexbox :gutter="20">
@@ -16,7 +16,7 @@
     </div>
 </template>
 <script>
-    import {XHeader , Flexbox , FlexboxItem , Divider} from 'vux';
+    import { Flexbox , FlexboxItem , Divider} from 'vux';
     import Api from '../../lib/api';
     export default {
         data () {
@@ -29,7 +29,6 @@
             }
         },
         components: {
-            XHeader,
             Flexbox,
             FlexboxItem,
             Divider
@@ -117,7 +116,7 @@
 </script>
 <style scoped>
     .login_input {
-        padding-top: 112px;
+        padding-top:12px;
         width: 600px;
         margin: 0 auto;
     }

src/components/main/discovery/brandList.vue

@@ -5,21 +5,22 @@
     export default {
         render(createElement)
         {
+            let xTitle = createElement('div',{
+                directives: [
+                    {
+                        name: 'document_title'
+                    }
+                ],
+                domProps: {
+                    innerHTML: "发现"
+                }
+            });
             return createElement(BlockList,{
                 props:{
-                    datasLink:api.brands(),
+                    datasLink:api.brands()
                 }
-            })
+            },[xTitle]);
         }
 
     }
-</script>
-
-<style>
-    img {
-        vertical-align: middle;
-        width: 100%;
-        height: auto;
-        display: block;
-    }
-</style>
+</script>

src/components/main/discovery/discovery.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <div v-document_title>发现</div>
         <tab :class="{tab:true}">
             <tab-item :selected="routerPath('/main/discovery')" @on-item-click="onItemClick(0)">品牌</tab-item>
             <tab-item :selected="routerPath('/main/discovery/function')" @on-item-click="onItemClick(1)">功效</tab-item>
@@ -64,7 +65,7 @@
     .discovery_content {
         padding-top: 88px;
         padding-bottom: 101px;
-        background: #F7F7F7;
+        background: #f9f9f9;
     }
 </style>
 

src/components/main/discovery/functionList.vue

@@ -12,7 +12,7 @@
             <flexbox :gutter="0" wrap="wrap" class="function_item">
                 <flexbox-item :span="1/4" v-for="item in data.subitem" class="subitem" :key="item">
                      <div @click="link(item.name)">
-                         <x-img :src="item.img" :key="item.img" :default-src="defalutImg"></x-img>
+                         <x-img :src="item.img" :key="item.img" :default-src="defalutImg" style="min-height: 130px;"></x-img>
                          <p class="item_title">{{item.name}}</p>
                      </div>
                 </flexbox-item>
@@ -36,8 +36,10 @@
         },
         created(){
             let _self = this;
+            this.$store.commit('updateLoadingStatus', {isLoading: true});
             this.$http.jsonp(Api.functionList()).then(function(res){
                 _self.datas = res.body.datas["items"];
+                this.$store.commit('updateLoadingStatus', {isLoading: false});
             })
         },
         mounted(){
@@ -97,6 +99,7 @@
     }
     .function_item_img {
         margin-bottom: 40px;
+        min-height: 340px;
     }
     .function_item img {
         width: 70%;

src/components/main/home/homeTabs.vue

@@ -41,6 +41,7 @@
 
             return (
                     <div>
+                        <div v-document_title>熊猫美妆</div>
                         <Search isScroll={this.isScroll}></Search>
                         <div>
                             <div class="list_tab" style = {{position:'fixed'}}>
@@ -85,6 +86,7 @@
     .list_container {
         padding-top: 170px;
         padding-bottom: 101px;
+        background: #f9f9f9;
     }
 
     .tab_item {

src/components/main/mine/mine.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="mine">
+        <div v-document_title>我的</div>
         <group>
             <cell :title="userMsg.userName" :link="loginPath" style="padding: 30px 40px;">
                 <img slot="icon" v-bind:src="userMsg.userImg"
@@ -159,7 +160,7 @@
         transition-delay: 0s;
     }
     .mine {
-        background: #F7F7F7;
+        background: #f9f9f9;
     }
     .mine .weui-cells {
         font-size: 30px;

src/components/main/shop-car/shopping_cart.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="shopping_cart">
+        <div v-document_title>购物车</div>
         <div class="free_info">
             <group>
                 <cell-box v-for="info in proxy.infos" :key="info"
@@ -240,7 +241,7 @@
     .shopping_cart {
         padding-bottom: 190px;
         min-height: 100%;
-        background: #F7F7F7;
+        background: #f9f9f9;
     }
 
     .info_label, .info_data {

src/components/order/list/OrderList.vue

@@ -209,7 +209,7 @@
                 ui = this.datas.orders.map((item, index) => {
                     let addTime = dateFormat(item.order_info.add_time * 1000, "YYYY-MM-DD");
                     let goods = item.order_goods.map((goods_item) => {
-                        return <FlexboxItem>
+                        return <FlexboxItem class="vux-1px-b">
                             <Flexbox orient="vertical">
                                 <Flexbox align="flex-start">
                                     <FlexboxItem span={1 / 6}>
@@ -227,9 +227,6 @@
                                         </FlexboxItem>
                                     </Flexbox>
                                 </Flexbox>
-                                <FlexboxItem >
-                                    <div class="divider"></div>
-                                </FlexboxItem>
                             </Flexbox>
                         </FlexboxItem>
                     })
@@ -243,35 +240,29 @@
 
                     const bottom = () => {
                         return <Flexbox orient="vertical">
-                            <FlexboxItem>
+                            <FlexboxItem class="vux-1px-b">
                                 <p class="titleRight">共{item.order_goods.length}件
                                     合计:${item.order_info.order_amount}
                                     (含运费${item.order_info.shipping_fee})
                                 </p>
                             </FlexboxItem>
                             <FlexboxItem >
-                                <div class="divider"></div>
-                            </FlexboxItem>
-                            <FlexboxItem >
                                 {buttons}
                             </FlexboxItem>
 
                         </Flexbox>
                     };
                     return <div>
-                        <Flexbox orient="vertical">
+                        <Flexbox orient="vertical" style="background:#fff">
                             <FlexboxItem>
                                 <div class="divider2"></div>
                             </FlexboxItem>
-                            <FlexboxItem>
+                            <FlexboxItem class="vux-1px-b">
                                 <Flexbox>
                                     <FlexboxItem><p class="titleLeft">{addTime}</p></FlexboxItem>
                                     <FlexboxItem><p class="titleRight">{item.order_info.state_desc}</p></FlexboxItem>
                                 </Flexbox>
                             </FlexboxItem>
-                            <FlexboxItem>
-                                <div class="divider"></div>
-                            </FlexboxItem>
                             <FlexboxItem >
                                 <Flexbox orient="vertical">{goods}</Flexbox>
                             </FlexboxItem>
@@ -305,7 +296,7 @@
     }
 
     .divider2 {
-        background-color: rgba(222, 94, 170, 0.55);
+        background-color: #f9f9f9;
         height: 15px;
     }
 

src/components/order/list/OrderTabs.vue

@@ -1,5 +1,5 @@
 <script>
-    import {XHeader, Tab, TabItem, Swiper, SwiperItem} from 'vux'
+    import { Tab, TabItem, Swiper, SwiperItem} from 'vux'
     import OrderList from  "./OrderList.vue"
 
     export default {
@@ -16,7 +16,6 @@
                     {isUpdate: true, title: "待发货", index: 2, state: 20},
                     {isUpdate: true, title: "待收货", index: 3, state: 30},
                     {isUpdate: true, title: "待评价", index: 4, state: 40},
-
                 ],
                 selected_page: -1
             }
@@ -39,7 +38,7 @@
 
             return (
                     <div>
-                        <XHeader title='我的订单' leftOptions={{backText: ""}}/>
+                        <div v-document_title>我的订单</div>
                         <Tab>{tabs}</Tab>
                         <div class="order_container">{lists}</div>
                     </div>
@@ -54,12 +53,13 @@
 
     .vux-tab {
         position: fixed;
-        margin-top: 94px;
+        top: 0;
+        left: 0;
         width: 100%;
     }
 
     .order_container {
-        padding-top: 181px;
-        background: #F7F7F7;
+        padding-top: 90px;
+        background: #f9f9f9;
     }
 </style>

src/components/other/search.vue

@@ -47,12 +47,14 @@
         render(createElement)
         {
             let _self = this;
-            let xHeader = createElement(XHeader, {
-                props: {
-                    title: '搜索',
-                    leftOptions: {
-                        backText: ''
+            let xTitle = createElement('div',{
+                directives: [
+                    {
+                        name: 'document_title'
                     }
+                ],
+                domProps: {
+                    innerHTML: '搜索'
                 }
             });
             let search = createElement(Search,{
@@ -67,8 +69,7 @@
                     'on-submit' : this.searchSubmit
                 },
                 style: {
-                    color: '#9e9e9e',
-                    paddingTop:'92px'
+                    color: '#9e9e9e'
                 },
                 ref:'search',
                 key: 'search'
@@ -78,7 +79,7 @@
                     datasLink: api.searchSuggest(),
                 }
             });
-            return createElement('div', {}, [xHeader,search, blockList]);
+            return createElement('div', {}, [xTitle,search, blockList]);
         }
 
     }

src/components/special/special_list.vue

@@ -1,8 +1,9 @@
 <script>
     import BlockList from '../blocks/block_list.vue'
-    import {Divider, XHeader} from 'vux'
+    import {Divider} from 'vux'
     import Api from "../../lib/api.js"
 
+
     export default {
         created() {
             this.getNewData();
@@ -44,18 +45,20 @@
                     }
                 }
                 else {
-                    this.url = api.special(params.special_id);
+                    this.url = Api.special(params.special_id);
                 }
             }
         },
         render(createElement)
         {
-            let xHeader = createElement(XHeader, {
-                props: {
-                    title: this.$route.query["title"] || this.$route.query["keyword"],
-                    leftOptions: {
-                        backText: ''
+            let xTitle = createElement('div',{
+                directives: [
+                    {
+                        name: 'document_title'
                     }
+                ],
+                domProps: {
+                    innerHTML: this.$route.query["title"] || this.$route.query["keyword"]
                 }
             });
             let special_id = this.$route.query["special_id"];
@@ -70,13 +73,10 @@
                     brand_id: brand_id,
                     keyword: keyword,
                     special_id: special_id
-                },
-                style: {
-                    paddingTop: '92px'
                 }
             });
 
-            return createElement('div', {}, [xHeader, blockList]);
+            return createElement('div', {}, [xTitle, blockList]);
         }
     }
 </script>

src/main.js

@@ -125,6 +125,14 @@ FastClick.attach(document.body);
 
 Vue.config.productionTip = false;
 
+Vue.directive('document_title', {
+    inserted: function (el, binding) {
+        document.title = el.innerText;
+        el.remove();
+    }
+});
+
+
 /* eslint-disable no-new */
 new Vue({
     store,