首頁+政策解讀列表+詳情

app.js

@@ -1,39 +1,26 @@
 //app.js
 App({
-  onLaunch: function () {
-    // 展示本地存储能力
-    var logs = wx.getStorageSync('logs') || []
-    logs.unshift(Date.now())
-    wx.setStorageSync('logs', logs)
-
-    // 登录
-    wx.login({
-      success: res => {
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
-      }
-    })
-    // 获取用户信息
-    wx.getSetting({
-      success: res => {
-        if (res.authSetting['scope.userInfo']) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
-          wx.getUserInfo({
-            success: res => {
-              // 可以将 res 发送给后台解码出 unionId
-              this.globalData.userInfo = res.userInfo
-
-              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-              // 所以此处加入 callback 以防止这种情况
-              if (this.userInfoReadyCallback) {
-                this.userInfoReadyCallback(res)
-              }
-            }
-          })
-        }
+  onLaunch: function (options) {
+    // 判断是否由分享进入小程序
+    if (options.scene == 1007 || options.scene == 1008) {
+      this.globalData.share = true
+    } else {
+      this.globalData.share = false
+    };
+    //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
+    //这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把
+    //页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙
+    //虽然最后解决了，但是花费了不少时间
+    wx.getSystemInfo({
+      success: (res) => {
+        this.globalData.height = res.statusBarHeight
       }
     })
   },
+
   globalData: {
-    userInfo: null
+    share: false,  // 分享默认为false
+    height: 0,
   }
+  
 })

app.json

@@ -1,8 +1,11 @@
 {
-  "pages":[
+  "pages": [
+    "pages/home/index",
+    "pages/policy/index",
+    "pages/policyDetail/index",
     "pages/test/index",
-    "pages/index/index",
     "pages/logs/logs"
+
   ],
   "usingComponents": {
     "van-button": "../../miniprogram_npm/vant-weapp/button/index",
@@ -29,14 +32,19 @@
     "van-field": "../../miniprogram_npm/vant-weapp/field/index",
     "van-checkbox": "../../miniprogram_npm/vant-weapp/checkbox/index",
     "van-checkbox-group": "../../miniprogram_npm/vant-weapp/checkbox-group/index",
-    "van-loading": "../../miniprogram_npm/vant-weapp/loading/index"
+    "van-loading": "../../miniprogram_npm/vant-weapp/loading/index",
+    "van-icon": "../../miniprogram_npm/vant-weapp/icon/index",
+    "van-nav-bar": "../../miniprogram_npm/vant-weapp/nav-bar/index",
+    "van-tabbar": "../../miniprogram_npm/vant-weapp/tabbar/index",
+    "van-tabbar-item": "../../miniprogram_npm/vant-weapp/tabbar-item/index"
   },
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle":"black"
+    "navigationBarTitleText": "吉林小微企业金融综合服务平台",
+    "navigationBarTextStyle": "black",
+    "navigationStyle": "custom"
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json"
-}
+}

app.wxss

@@ -7,4 +7,29 @@
   justify-content: space-between;
   padding: 200rpx 0;
   box-sizing: border-box;
-} 
+}
+
+pages {
+  position: relative;
+  z-index: 9999998;
+  background: #fff;
+}
+
+.home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  top: 135rpx;
+}
+
+.home .down {
+  float: left;
+  width: 100%;
+}
+
+.home .down .tabber {
+  float: left;
+  width: 100%;
+  margin: 100rpx 0 0 0;
+
+}

commpents/navbar/navbar.js

@@ -0,0 +1,40 @@
+const app = getApp()
+Component({
+  properties: {
+    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
+      type: Object,
+      value: {},
+      observer: function (newVal, oldVal) {}
+    }
+  },
+  data: {
+    height: '',
+    //默认值  默认显示左上角
+    navbarData: {
+      showCapsule: 1
+    }
+  },
+  attached: function () {
+    // 获取是否是通过分享进入的小程序
+    this.setData({
+      share: app.globalData.share
+    })
+    // 定义导航栏的高度   方便对齐
+    this.setData({
+      height: app.globalData.height
+    })
+  },
+  methods: {
+  // 返回上一页面
+    _navback() {
+      wx.navigateBack()
+    },
+  //返回到首页
+    _backhome() {
+      wx.switchTab({
+        url: '/pages/index/index',
+      })
+    }
+  }
+
+}) 

commpents/navbar/navbar.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

commpents/navbar/navbar.wxml

@@ -0,0 +1,11 @@
+<view class='nav-wrap' style='height: {{height*2 + 80}}rpx;'>
+  <view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>
+  <view style='display: flex; justify-content: space-around;flex-direction: column'>
+    <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
+      <view bindtap='_navback' wx:if='{{!share}}'>
+        <!-- <image src='/imgs/back-pre.png' mode='aspectFill' class='back-pre'></image> -->
+        <van-icon name="bell" />
+      </view>
+    </view>
+  </view>
+</view>

commpents/navbar/navbar.wxss

@@ -0,0 +1,54 @@
+/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
+.nav-wrap {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  background: #fff;
+  color: #000;
+  z-index: 9999999;
+}
+/* 标题要居中 */
+.nav-title {
+  position: absolute;
+  text-align: center;
+  max-width: 400rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  font-size: 36rpx;
+  color: #2c2b2b;
+  font-weight: 600;
+}
+
+.nav-capsule {
+  display: flex;
+  align-items: center;
+  margin-left: 30rpx;
+  width: 140rpx;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.navbar-v-line {
+  width: 1px;
+  height: 32rpx;
+  background-color: #e5e5e5;
+}
+
+.back-pre, .back-home {
+  width: 32rpx;
+   height: 36rpx;
+  margin-top: 4rpx;
+  padding: 10rpx;
+}
+.nav-capsule .back-home {
+  width: 36rpx;
+  height: 40rpx;
+  margin-top: 3rpx;
+}
+  

pages/home/index.js

@@ -0,0 +1,140 @@
+// pages/home/index.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 组件所需的参数
+    nvabarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '我的主页', //导航栏 中间的标题
+    },
+    // 此页面 页面内容距最顶部的距离
+    height: app.globalData.height * 2 + 20,
+    active: 0,
+    icon: {
+      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
+      active: 'https://img.yzcdn.cn/vant/user-active.png'
+    },
+    policyList: [{
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+    ],
+    background: [{
+        "pic": "/pages/images/test.jpg",
+      },
+      {
+        "pic": "/pages/images/test1.jpg",
+      }
+    ],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: true,
+    interval: 2000,
+    duration: 500
+  },
+  // 政策解读页面列表跳转
+  policyList: function () {
+    wx.navigateTo({
+      url: '/pages/policy/index'
+    })
+  },
+  // 政策解读页面详情跳转
+  // 判断id
+  policyListDetail: function (e) {
+    console.log(e.currentTarget.id)
+    wx.navigateTo({
+      url: '/pages/policyDetail/index?id=' + e.currentTarget.id // 希望跳转过去的页面    
+    })
+  },
+  // 无id，模拟数据跳转
+  policyListDetail: function () {
+    wx.navigateTo({
+      url: '/pages/policyDetail/index'
+    })
+  },
+  onChange(event) {
+    this.setData({
+      active: event.detail
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/home/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "/commpents/navbar/navbar"
+  }
+}

pages/home/index.wxml

@@ -0,0 +1,67 @@
+	<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
+	<view class="home">
+		<view class="top">
+			<!-- <image src="/pages/images/test.jpg"></image> -->
+			<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+				<block wx:key="unique" wx:for="{{background}}" wx:for-item="item">
+					<swiper-item>
+						<image src="{{item.pic}}"></image>
+					</swiper-item>
+				</block>
+			</swiper>
+		</view>
+		<view class="main">
+			<view class="mainOne">
+				<view class="left">
+					左侧
+				</view>
+				<view class="right">
+					右侧
+				</view>
+			</view>
+			<view class="mainTwo">
+				<span class="title">热门产品</span>
+				<view class="list">
+					<view class="listOne">
+						图片一
+					</view>
+					<view class="listOne listTwo">
+						图片二
+					</view>
+				</view>
+			</view>
+			<view class="mainThree">
+				<view class="mainThreeTop">
+					<span>政策解读</span>
+					<a bindtap="policyList">MORE></a>
+				</view>
+				<view class="mainThreeList">
+					<view class="list" wx:key="unique" wx:for="{{policyList}}" wx:for-item="item">
+						<view bindtap="policyListDetail" id="{{list._id}}">
+							<image src="{{item.pic}}"></image>
+							<view class="info">
+								<p>{{item.title}}</p>
+								<p>
+									<span>主题词：{{item.zhuti}}</span>
+									<span>政策等级：{{item.dengji}}</span>
+								</p>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="down">
+			<van-tabbar active="{{ active }}" bind:change="onChange" class="tabber">
+				<van-tabbar-item>
+					<image slot="icon" src="{{ icon.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
+					<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
+					首页
+				</van-tabbar-item>
+				<van-tabbar-item icon="search">企业对接</van-tabbar-item>
+				<van-tabbar-item icon="setting-o">金融数字超市</van-tabbar-item>
+				<van-tabbar-item icon="search">政策解读</van-tabbar-item>
+				<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
+			</van-tabbar>
+		</view>
+	</view>

pages/home/index.wxss

@@ -0,0 +1,203 @@
+.home-page {
+  height: 160rpx;
+  width: 100%;
+  border: 1rpx solid red;
+  font-size: 60rpx;
+}
+
+.home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  top: 135rpx;
+}
+
+.home .top {
+  width: 100%;
+  height: 350rpx;
+}
+
+.home .top image {
+  width: 100%;
+  height: 350rpx;
+}
+
+.home .top swiper {
+  height: 350rpx;
+}
+
+.home .main {
+  float: left;
+  width: 100%;
+}
+
+.main .mainOne {
+  float: left;
+  width: 100%;
+  height: 210rpx;
+  margin: 40rpx 0 46rpx 0;
+}
+
+.main .mainOne .left {
+  float: left;
+  width: 513rpx;
+  height: 210rpx;
+  margin: 0 10rpx 0 30rpx;
+  background: linear-gradient(49deg, rgba(250, 110, 36, 1), rgba(255, 48, 53, 1));
+  border-radius: 30rpx;
+}
+
+.main .mainOne .right {
+  float: left;
+  width: 158rpx;
+  height: 210rpx;
+  background: linear-gradient(215deg, rgba(120, 3, 190, 1), rgba(114, 25, 248, 1));
+  border-radius: 30rpx;
+}
+
+.main .mainTwo {
+  float: left;
+  width: 100%;
+  height: 170rpx;
+  margin: 0 30rpx 50rpx 30rpx;
+}
+
+.main .mainTwo .title {
+  float: left;
+  width: 100%;
+  font-size: 34rpx;
+  font-family: Source Han Sans SC;
+  font-weight: bold;
+  color: rgba(40, 40, 40, 1);
+  margin: 0 0 30rpx 0;
+}
+
+.main .mainTwo .list {
+  float: left;
+  width: 100%;
+  height: 108rpx;
+}
+
+.main .mainTwo .list .listOne {
+  float: left;
+  width: 325rpx;
+  height: 108rpx;
+  background: rgba(151, 93, 255, 1);
+  border-radius: 20rpx;
+  margin: 0 20rpx 0 0;
+}
+
+.main .mainTwo .list .listTwo {
+  background: rgba(30, 219, 233, 1);
+}
+
+.mainThree {
+  float: left;
+  width: 100%;
+  margin: 0 30rpx;
+}
+
+.mainThree .mainThreeTop {
+  float: left;
+  width: 100%;
+  margin: 0 0 30rpx 0;
+  height: 35rpx;
+  line-height: 35rpx;
+
+}
+
+.mainThree .mainThreeTop span {
+  float: left;
+  width: 80%;
+  font-size: 34rpx;
+  font-family: Source Han Sans SC;
+  font-weight: bold;
+  color: rgba(40, 40, 40, 1);
+}
+
+.mainThree .mainThreeTop a {
+  float: right;
+  width: 20%;
+  font-size: 24rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(136, 136, 136, 1);
+}
+
+.mainThreeList {
+  float: left;
+  width: 100%;
+}
+
+.mainThreeList .list {
+  float: left;
+  width: 100%;
+  height: 150rpx;
+  margin: 0 0 20rpx 0;
+}
+
+.mainThreeList image {
+  float: left;
+  width: 150rpx;
+  height: 150rpx;
+  margin: 0 20rpx 0 0;
+}
+
+.mainThreeList .info {
+  float: left;
+  width: 520rpx;
+  height: 150rpx;
+}
+
+.mainThreeList .info p:first-child {
+  float: left;
+  width: 100%;
+  font-size: 30rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(40, 40, 40, 1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.mainThreeList .info p:last-child {
+  float: left;
+  width: 100%;
+  margin: 20rpx 0 0 0;
+}
+
+.mainThreeList .info p:last-child span {
+  float: left;
+  width: 228rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  text-align: left;
+  margin: 0 20rpx 0 0;
+  background: rgba(242, 245, 250, 1);
+  border-radius: 10px;
+  font-size: 26rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(136, 136, 136, 1);
+  padding: 0 0 0 20rpx;
+
+}
+
+.mainThreeList .info p:last-child span:last-child {
+  margin: 0;
+}
+
+.home .down {
+  float: left;
+  width: 100%;
+}
+
+.home .down .tabber {
+  float: left;
+  width: 100%;
+  margin: 100rpx 0 0 0;
+}

pages/index/index.js

@@ -1,54 +0,0 @@
-//index.js
-//获取应用实例
-const app = getApp()
-
-Page({
-  data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
-  },
-  //事件处理函数
-  bindViewTap: function() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
-  },
-  onLoad: function () {
-    if (app.globalData.userInfo) {
-      this.setData({
-        userInfo: app.globalData.userInfo,
-        hasUserInfo: true
-      })
-    } else if (this.data.canIUse){
-      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-      // 所以此处加入 callback 以防止这种情况
-      app.userInfoReadyCallback = res => {
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
-    } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
-        }
-      })
-    }
-  },
-  getUserInfo: function(e) {
-    console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
-  }
-})

pages/index/index.json

@@ -1,5 +0,0 @@
-{
-  "usingComponents": {
-    "van-button": "../../miniprogram_npm/vant-weapp/button/index"
-  }
-}

pages/index/index.wxml

@@ -1,19 +0,0 @@
-<!--index.wxml-->
-<view class="container">
-	<view class="userinfo">
-		<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-		<block wx:else>
-			<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-			<text class="userinfo-nickname">{{userInfo.nickName}}</text>
-		</block>
-	</view>
-	<view class="usermotto">
-		<!-- <text class="user-motto">{{motto}}</text> -->
-		<van-button type="primary">添加</van-button>
-		<van-row>
-			<van-col span="8">span: 8</van-col>
-			<van-col span="8">span: 8</van-col>
-			<van-col span="8">span: 8</van-col>
-		</van-row>
-	</view>
-</view>

pages/index/index.wxss

@@ -1,21 +0,0 @@
-/**index.wxss**/
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.userinfo-avatar {
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
-}
-
-.userinfo-nickname {
-  color: #aaa;
-}
-
-.usermotto {
-  margin-top: 200px;
-}

pages/policy/index.js

@@ -0,0 +1,266 @@
+// pages/policy/index.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nvabarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '政策信息', //导航栏 中间的标题
+      // 此页面 页面内容距最顶部的距离
+      height: app.globalData.height * 2 + 20,
+    },
+    active: 3,
+    icon: {
+      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
+      active: 'https://img.yzcdn.cn/vant/user-active.png'
+    },
+    currentTab: 0,
+    // 政策公文
+    policyList: [{
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "水电费地方",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "水电费地方",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+    ],
+    // 政策解读
+    unscrambleList: [{
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+      {
+        "pic": "/pages/images/test.jpg",
+        "title": "sfdf",
+        "zhuti": "疫情",
+        "dengji": "吉林省"
+      },
+    ],
+    widHeight: '0'
+  },
+  //滑动切换
+  swiperTab: function (e) {
+    var that = this;
+    // 获取单个轮播循环的高度
+    var heights = this.data.height;
+    // 获取一级成员的数组个数
+    var policyList = this.data.policyList.length
+    // 获取二级成员的数组个数
+    var unscrambleList = this.data.unscrambleList.length
+    that.setData({
+      currentTab: e.detail.current
+    });
+    if (this.data.currentTab == 0) {
+      that.setData({
+        widHeight: heights * policyList + 92 + "px"
+      });
+    } else {
+      that.setData({
+        widHeight: heights * unscrambleList + 92 + "px"
+      });
+    }
+  },
+  //点击切换
+  clickTab: function (e) {
+    var that = this;
+    if (this.data.currentTab === e.target.dataset.current) {
+      return false;
+    } else {
+      that.setData({
+        currentTab: e.target.dataset.current
+      })
+    }
+  },
+  // 政策解读页面详情跳转
+  // 判断id
+  policyListDetail: function (e) {
+    console.log(e.currentTarget.id)
+    wx.navigateTo({
+      url: '/pages/policyDetail/index?id=' + e.currentTarget.id // 希望跳转过去的页面    
+    })
+  },
+  // 无id，模拟数据跳转
+  policyListDetail: function () {
+    wx.navigateTo({
+      url: '/pages/policyDetail/index'
+    })
+  },
+  onChange(event) {
+    this.setData({
+      active: event.detail
+    });
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var query = wx.createSelectorQuery();
+    var that = this;
+    /**
+     * 获取系统信息
+     */
+    var policyList = this.data.policyList.length;
+    query.select('.list').boundingClientRect(function (rect) {
+      that.setData({
+        // 获取要循环标签的高度
+        height: rect.height,
+        widHeight: rect.height * policyList + 92 + "px"
+      })
+    }).exec();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/policy/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "/commpents/navbar/navbar"
+  }
+}

pages/policy/index.wxml

@@ -0,0 +1,56 @@
+<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
+<view class="home">
+	<view class="main">
+		<view class="swiper-tab">
+			<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">政策发布</view>
+			<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">政策解读</view>
+		</view>
+		<swiper current="{{currentTab}}" bindchange="swiperTab" style='height:{{widHeight}}'>
+			<swiper-item>
+				<view class="policyLeft">
+					<view class="list" wx:key="unique" wx:for="{{policyList}}" wx:for-item="item">
+						<view bindtap="policyListDetail" id="{{list._id}}">
+							<image src="{{item.pic}}"></image>
+							<view class="info">
+								<p>{{item.title}}</p>
+								<p>
+									<span>主题词：{{item.zhuti}}</span>
+									<span>政策等级：{{item.dengji}}</span>
+								</p>
+							</view>
+						</view>
+					</view>
+				</view>
+			</swiper-item>
+			<swiper-item>
+				<view class="policyLeft policyRight">
+					<view class="list" wx:key="unique" wx:for="{{unscrambleList}}" wx:for-item="item">
+						<view bindtap="policyListDetail" id="{{list._id}}">
+							<image src="{{item.pic}}"></image>
+							<view class="info">
+								<p>{{item.title}}</p>
+								<p>
+									<span>主题词：{{item.zhuti}}</span>
+									<span>政策等级：{{item.dengji}}</span>
+								</p>
+							</view>
+						</view>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+	<view class="down">
+		<van-tabbar active="{{ active }}" bind:change="onChange" class="tabber">
+			<van-tabbar-item>
+				<image slot="icon" src="{{ icon.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
+				<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
+				首页
+			</van-tabbar-item>
+			<van-tabbar-item icon="search">企业对接</van-tabbar-item>
+			<van-tabbar-item icon="setting-o">金融数字超市</van-tabbar-item>
+			<van-tabbar-item icon="search">政策解读</van-tabbar-item>
+			<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
+		</van-tabbar>
+	</view>
+</view>

pages/policy/index.wxss

@@ -0,0 +1,111 @@
+.main {
+  float: left;
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-tab {
+  width: 90%;
+  text-align: center;
+  height: 104rpx;
+  line-height: 104rpx;
+  font-weight: bold;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  float: left;
+  padding: 0 20px;
+  margin: 0 0 20rpx 0;
+
+}
+
+.swiper-tab-item {
+  width: 50%;
+  color: #888888;
+}
+
+.active {
+  color: #E9021D;
+  border-bottom: 4rpx solid #E9021D;
+}
+
+.main swiper {
+  height: 100%;
+  float: left;
+  width: 100%;
+
+}
+
+.policyLeft {
+  float: left;
+  width: 92%;
+  margin: 0 30rpx;
+}
+
+.policyLeft .list {
+  float: left;
+  width: 100%;
+  height: 150rpx;
+  margin: 0 0 20rpx 0;
+}
+
+.policyLeft image {
+  float: left;
+  width: 150rpx;
+  height: 150rpx;
+  margin: 0 20rpx 0 0;
+}
+
+.policyLeft .info {
+  float: left;
+  width: 520rpx;
+  height: 150rpx;
+}
+
+.policyLeft .info p:first-child {
+  float: left;
+  width: 100%;
+  font-size: 30rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(40, 40, 40, 1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.policyLeft .info p:last-child {
+  float: left;
+  width: 100%;
+  margin: 20rpx 0 0 0;
+}
+
+.policyLeft .info p:last-child span {
+  float: left;
+  width: 228rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  text-align: left;
+  margin: 0 20rpx 0 0;
+  background: rgba(242, 245, 250, 1);
+  border-radius: 10px;
+  font-size: 26rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(136, 136, 136, 1);
+  padding: 0 0 0 20rpx;
+
+}
+
+.policyLeft .info p:last-child span:last-child {
+  margin: 0;
+}
+
+.policyRight {
+  float: left;
+  width: 92%;
+  margin: 0 30rpx;
+}

pages/policyDetail/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "/commpents/navbar/navbar"
+  }
+}

pages/policyDetail/index.wxml

@@ -0,0 +1,15 @@
+<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
+<view class="home">
+	<view class="main">
+		<text class="title">{{policyDetail.title}}</text>
+		<text class="jiguan">发文机关：{{policyDetail.jiguan}}</text>
+		<text class="zihao">发文字号：{{policyDetail.zihao}}</text>
+		<p class="zhuti">
+		<span>主题词：{{policyDetail.zhuti}}</span>
+		<span>政策等级：{{policyDetail.dengji}}</span>
+		<span>{{policyDetail.date}}</span>
+		</p>
+		<image src="{{policyDetail.pic}}" class="image"></image>
+		<text class="content">{{policyDetail.content}}</text>
+	</view>
+</view>

pages/policyDetail/index.wxss

@@ -0,0 +1,73 @@
+/* pages/policyDetail/index.wxss */
+.main {
+  float: left;
+  width: 93%;
+  height: 100%;
+  margin: 0 30rpx;
+}
+
+.main .title {
+  float: left;
+  width: 100%;
+  text-align: center;
+  font-size: 30rpx;
+  font-family: Source Han Sans SC;
+  font-weight: bold;
+  color: rgba(40, 40, 40, 1);
+  margin: 0 0 25rpx 0;
+}
+
+.main .jiguan {
+  float: left;
+  width: 100%;
+  text-align: center;
+  font-size: 22rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(136, 136, 136, 1);
+  margin: 0 0 10rpx 0;
+}
+
+.main .zihao {
+  float: left;
+  width: 100%;
+  text-align: center;
+  font-size: 22rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(136, 136, 136, 1);
+  margin: 0 0 10rpx 0;
+}
+
+.main .zhuti {
+  float: left;
+  width: 100%;
+  text-align: center;
+  font-size: 22rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(136, 136, 136, 1);
+  margin: 0 0 30rpx 0;
+}
+
+.main .zhuti span {
+  margin: 0 10rpx 0 0;
+}
+
+.main .image {
+  float: left;
+  width: 100%;
+  height: 298rpx;
+  text-align: center;
+  margin: 0 0 30rpx 0;
+}
+
+.main .content {
+  float: left;
+  width: 100%;
+  font-size: 26rpx;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  color: rgba(40, 40, 40, 1);
+  margin: 0 0 30rpx 0;
+}

pages/test/index.wxml

@@ -1,40 +1,40 @@
 <!--pages/style/style.wxml-->
 <view>
-  <view style="background:#aaa;margin-bottom:20px;">
-    <view class="titleTop">tab选项卡效果</view>
-    <view class="swiper-tab">
-      <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">选项1</view>
-      <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">选项2</view>
-    </view>
-    <swiper current="{{currentTab}}" bindchange="swiperTab">
-          <swiper-item >
-          <view>选项1</view>
-          </swiper-item>
-          <swiper-item>
-              <view>选项2</view>
-          </swiper-item>
-      </swiper>
-  </view>
-  <view style="background:#bbb;margin-bottom:20px;">
-    <view class="titleTop">公司介绍上下切换</view>
-    <view class="buttonChange">
-      <button  class="hide{{showView?'show':''}}" bindtap="onChangeShowState">隐藏</button>
-      <button class="hide{{showView?'':'show'}}" bindtap="onChangeShowState">显示</button>
-    </view>
-    <view class="hide{{showView?'show':''}} hideStyle">
-      <text class="text">文字部分</text>
-    </view>
-  </view>
-  <view style="background:#ccc;margin-bottom:20px;">
-    <view class="titleTop">页面跳转</view>
-    <view bindtap="onDetail" id="{{jobFair._id}}">跳转</view>
-  </view>
-  <view style="background:#ddd;margin-bottom:20px;">
-    <view class="titleTop">列表循环</view>
-    <view wx:key="unique" wx:for="{{list}}" wx:for-item="item">
-        <view bindtap="bindtap" id="{{list._id}}">
-          <view>列表标题：<text>{{item.title}}</text></view>
-        </view>
-    </view>
-  </view>
-</view>
+	<view style="background:#aaa;margin-bottom:20px;">
+		<view class="titleTop">tab选项卡效果</view>
+		<view class="swiper-tab">
+			<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">选项1</view>
+			<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">选项2</view>
+		</view>
+		<swiper current="{{currentTab}}" bindchange="swiperTab">
+			<swiper-item>
+				<view>选项1</view>
+			</swiper-item>
+			<swiper-item>
+				<view>选项2</view>
+			</swiper-item>
+		</swiper>
+	</view>
+	<view style="background:#bbb;margin-bottom:20px;">
+		<view class="titleTop">公司介绍上下切换</view>
+		<view class="buttonChange">
+			<button class="hide{{showView?'show':''}}" bindtap="onChangeShowState">隐藏</button>
+			<button class="hide{{showView?'':'show'}}" bindtap="onChangeShowState">显示</button>
+		</view>
+		<view class="hide{{showView?'show':''}} hideStyle">
+			<text class="text">文字部分</text>
+		</view>
+	</view>
+	<view style="background:#ccc;margin-bottom:20px;">
+		<view class="titleTop">页面跳转</view>
+		<view bindtap="onDetail" id="{{jobFair._id}}">跳转</view>
+	</view>
+	<view style="background:#ddd;margin-bottom:20px;">
+		<view class="titleTop">列表循环</view>
+		<view wx:key="unique" wx:for="{{list}}" wx:for-item="item">
+			<view bindtap="bindtap" id="{{list._id}}">
+				<view>列表标题：<text>{{item.title}}</text></view>
+			</view>
+		</view>
+	</view>
+</view>