linwenxin преди 1 година
родител
ревизия
bc4c59d836
променени са 3 файла, в които са добавени 123 реда и са изтрити 112 реда
  1. 23 16
      src/App.vue
  2. 6 4
      src/pages.json
  3. 94 92
      src/pages/index/index.vue

+ 23 - 16
src/App.vue

@@ -1,5 +1,6 @@
 <script>
   import Vue from 'vue';
+  import store from '@/store/index.js'
   // 解析地址栏参数
   function getQueryVariable(variable) {
     // 从?开始获取后面的所有数据
@@ -19,26 +20,32 @@
   }
   export default {
     onLaunch: function() {
-      alert(getQueryVariable("x-token"))
+      // #ifdef H5
+      var token = getQueryVariable("x-token")
+      if (token) {
+        store.commit("set_token", token)
+      }
+      // #endif
+
       uni.getSystemInfo({
-      	success: function(e) {
-      		console.log(e);
-      		Vue.prototype.StatusBar = e.statusBarHeight;
-      		// #ifdef MP-WEIXIN
-      		let custom = wx.getMenuButtonBoundingClientRect();
-      		Vue.prototype.Custom = custom;
-      		Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight + 4;
-      		// #endif
+        success: function(e) {
+          console.log(e);
+          Vue.prototype.StatusBar = e.statusBarHeight;
+          // #ifdef MP-WEIXIN
+          let custom = wx.getMenuButtonBoundingClientRect();
+          Vue.prototype.Custom = custom;
+          Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight + 4;
+          // #endif
           // #ifndef MP-WEIXIN
           Vue.prototype.CustomBar = 48
           // #endif
-      		//用来判断是否iphoneX类型的全面屏设备
-      		if (e.model.indexOf('iPhone X') == 0) {
-      			Vue.prototype.isIphoneX = 68;
-      		} else {
-      			Vue.prototype.isIphoneX = 0;
-      		}
-      	},
+          //用来判断是否iphoneX类型的全面屏设备
+          if (e.model.indexOf('iPhone X') == 0) {
+            Vue.prototype.isIphoneX = 68;
+          } else {
+            Vue.prototype.isIphoneX = 0;
+          }
+        },
       });
     },
     onShow: function() {

+ 6 - 4
src/pages.json

@@ -11,8 +11,10 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "二手空调",
+        // "navigationStyle": "custom",
+        "navigationBarTextStyle":"#fff",
+        "navigationBarBackgroundColor":"#01C30B"
       }
     },
 
@@ -118,7 +120,7 @@
       "style": {
         "navigationBarTitleText": "订单详情"
       }
-    },
+    },
     {
       "path": "pages/goods/list",
       "style": {
@@ -196,4 +198,4 @@
       }
     ]
   }
-}
+}

+ 94 - 92
src/pages/index/index.vue

@@ -2,33 +2,20 @@
   <!-- #ifdef H5 -->
   <view>
     <view class="bg-container"></view>
-    <zj-page-layout
-    	:hasFooter="false"
-    	:isScroll="true"
-    	:refresherTriggered="refresherTriggered"
-    	@refresherrefresh="refresherrefresh"
-    	@scrolltolower="scrolltolower">
-      <template slot="header">
+    <zj-page-layout :hasFooter="false" :isScroll="true" :refresherTriggered="refresherTriggered"
+      @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
+      <!-- <template slot="header">
         <view class="header-container" :style="cuStyle">二手空调</view>
-      </template>
+      </template> -->
 
       <view class="all-container">
         <view class="search-container">
-          <u-search
-            placeholder="输入商品名称搜索"
-            :showAction="false"
-            clearabled
-            v-model="keyword">
+          <u-search placeholder="输入商品名称搜索" :showAction="false" clearabled v-model="keyword">
           </u-search>
         </view>
 
         <view class="swiper-container card mt30">
-          <u-swiper
-            :list="bannerList"
-            indicator
-            indicatorMode="line"
-            circular
-          ></u-swiper>
+          <u-swiper :list="bannerList" indicator indicatorMode="line" circular></u-swiper>
         </view>
 
         <view class="category-container card mt30">
@@ -39,11 +26,7 @@
         </view>
 
         <view class="tab-container mt30">
-          <u-tabs
-            :list="tabList"
-            @click="click"
-            :scrollable="false"
-            lineColor="#01C30B">
+          <u-tabs :list="tabList" @click="click" :scrollable="false" lineColor="#01C30B">
           </u-tabs>
         </view>
 
@@ -108,20 +91,31 @@
           'https://cdn.uviewui.com/uview/swiper/swiper2.png',
           'https://cdn.uviewui.com/uview/swiper/swiper1.png',
         ],
-        categoryList: [1,2,3,4],
-        tabList: [
-          {name: '默认顺序', value: 1},
-          {name: '在售商品', value: 2},
-          {name: '离我最近', value: 3},
-          {name: '人气最高', value: 4},
+        categoryList: [1, 2, 3, 4],
+        tabList: [{
+            name: '默认顺序',
+            value: 1
+          },
+          {
+            name: '在售商品',
+            value: 2
+          },
+          {
+            name: '离我最近',
+            value: 3
+          },
+          {
+            name: '人气最高',
+            value: 4
+          },
         ],
       }
     },
-    
-    computed:{
-    	cuStyle(){
-    		return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
-    	},
+
+    computed: {
+      cuStyle() {
+        return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
+      },
     },
 
     async onLoad() {
@@ -137,31 +131,31 @@
         }).then(res => {
           this.loadStatus = 0;
           let list = res.data.records;
-          if(list.length < 10){
-          	this.loadStatus = 2;
+          if (list.length < 10) {
+            this.loadStatus = 2;
           }
           this.dataList = this.dataList.concat(list);
         }).catch(() => {
-					this.loadStatus = 2;
-				}).finally(res => {
-					this.refresherTriggered = false;
-				})
+          this.loadStatus = 2;
+        }).finally(res => {
+          this.refresherTriggered = false;
+        })
       },
 
       // 滚动到底部
       scrolltolower(e) {
-      	if (this.loadStatus === 0) {
-      		this.pageNum++;
-      		this.getList();
-      	}
+        if (this.loadStatus === 0) {
+          this.pageNum++;
+          this.getList();
+        }
       },
 
       // 触发下拉刷新
       refresherrefresh(e) {
-      	this.refresherTriggered = true;
-      	this.dataList = [];
-      	this.pageNum = 1;
-      	this.getList();
+        this.refresherTriggered = true;
+        this.dataList = [];
+        this.pageNum = 1;
+        this.getList();
       },
 
     }
@@ -169,50 +163,58 @@
 </script>
 
 <style lang="scss" scoped>
-.all-container {
-  padding: 0 30rpx 30rpx;
-}
-.header-container {
-  font-size: 32rpx;
-  color: #ffffff;
-  height: 88rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  position: relative;
-}
-.bg-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 750rpx;
-  height: 750rpx;
-  background: linear-gradient(to bottom, $theme-color, #f4f2f2);
-}
-.card {
-  @include zj-card;
-}
-.swiper-container {
-  border-radius: 20rpx;
-  overflow: hidden;
-}
-.category-container {
-  display: flex;
-  padding: 30rpx 0;
-  .item {
-    width: 25%;
+  .all-container {
+    padding: 0 30rpx 30rpx;
+  }
+
+  .header-container {
+    font-size: 32rpx;
+    color: #ffffff;
+    height: 88rpx;
     display: flex;
+    justify-content: center;
     align-items: center;
-    flex-direction: column;
-    image {
-      width: 44rpx;
-      height: 44rpx;
-    }
-    .name {
-      font-size: 28rpx;
-      margin-top: 16rpx;
+    font-weight: 600;
+    position: relative;
+  }
+
+  .bg-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 750rpx;
+    height: 750rpx;
+    background: linear-gradient(to bottom, $theme-color, #f4f2f2);
+  }
+
+  .card {
+    @include zj-card;
+  }
+
+  .swiper-container {
+    border-radius: 20rpx;
+    overflow: hidden;
+  }
+
+  .category-container {
+    display: flex;
+    padding: 30rpx 0;
+
+    .item {
+      width: 25%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      image {
+        width: 44rpx;
+        height: 44rpx;
+      }
+
+      .name {
+        font-size: 28rpx;
+        margin-top: 16rpx;
+      }
     }
   }
-}
-</style>
+</style>