小程序首页

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/api/request.js

@@ -1,4 +1,6 @@
 const baseUrl = "http://localhost:7777/mini"
+const imgUrl = "http://192.168.1.253:7777/applet/"
+
 let token = wx.getStorageSync('token')
 
 const request = (options) => {
@@ -24,4 +26,4 @@ const request = (options) => {
         })
     })
 }
-export default request
+export {request, imgUrl}

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.js

@@ -3,51 +3,71 @@ import {
   login
 } from "../api/user-api";
 
+import {
+  imgUrl
+} from "../api/request"
+
 // 获取应用实例
 const app = getApp()
 
 Page({
   data: {
+    imgUrl: imgUrl,
     // 屏幕高度
     navHeight: '',
     searchInput: '',
+    // 南岸咨询
+    naTab: 0,
+    naItem: '',
     // 服务列表
-    serviceItems1: [{ img: '../images/service-1.png', name: '生活缴费' },
-    { img: '../images/service-2.png', name: '社保服务' },
-    { img: '../images/service-3.png', name: '公积金' },
-    { img: '../images/service-4.png', name: '电子证照' },
-    { img: '../images/service-5.png', name: '民政低保' }],
+    serviceItems1: [{ img: imgUrl + 'service-1.png', name: '生活缴费' },
+    { img: imgUrl + 'service-2.png', name: '社保服务' },
+    { img: imgUrl + 'service-3.png', name: '公积金' },
+    { img: imgUrl + 'service-4.png', name: '电子证照' },
+    { img: imgUrl + 'service-5.png', name: '民政低保' }],
     serviceItems2: [{ img: '../images/service-6.png', name: '税务服务' },
-    { img: '../images/service-7.png', name: '交通出行' },
-    { img: '../images/service-8.png', name: '核算采样点' },
-    { img: '../images/service-9.png', name: '住房置业' },
-    { img: '../images/service-10.png', name: '更多功能' }],
+    { img: imgUrl + 'service-7.png', name: '交通出行' },
+    { img: imgUrl + 'service-8.png', name: '核算采样点' },
+    { img: imgUrl + 'service-9.png', name: '住房置业' },
+    { img: imgUrl + 'service-10.png', name: '更多功能' }],
     // 百姓聚焦
     peopleService: [{ top: true, name: '12345热线'},
     { top: false, name: '个人社保查询'},
     { top: false, name: '南岸文旅消费劵'},
     { top: false, name: '长喜汇弹子石老街'},
     { top: false, name: '南山一棵松'},
-    { top: false, name: '一次性创业补助'}]
+    { top: false, name: '一次性创业补助'}],
+    // 南岸咨询二级title
+    naItemTabList: [
+      {id: 1, name: '政策.咨询'},
+      {id: 2, name: '党建.服务'},
+      {id: 3, name: '抗疫.复工'},
+      {id: 4, name: '功能.服务'}],
+    // 南岸咨询内容
+    naContentList: [
+      {id: 1, name: '洪斌在全区疫情防控工作会议上强调，坚持不松懈的精神，努力工作，开展创先争优活动，激励人民发扬美好传统美德！'},
+      {id: 2, name: '​坚持不松劲渝事好商量'},
+      {id: 3, name: '南岸实践工作全面启动'},
+      {id: 4, name: '首条直达南滨路人防隧道开建'},
+      {id: 5, name: '全市首个！南岸区便民数字地图上线啦~'}],
   },
-
   onReady() {},
   onShow() {
-	if (typeof this.getTabBar === 'function' &&
-	this.getTabBar()) {
-	this.getTabBar().setData({
-		selected: 0
-	})
-}
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().setData({ selected: 0 })
+    }
+    this.setData({
+      naItem: 0
+    }),
+    this.setData({
+      naItemTab: 1
+    })
   },
   onHide(){
-	if (typeof this.getTabBar === 'function' &&
-	this.getTabBar()) {
-	this.getTabBar().setData({
-	  selected: -1
-	})
-  }	
-},
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().setData({ selected: -1 })
+    }	
+  },
   onLoad() {
     console.log(app.globalData.navHeight)
     this.setData({
@@ -68,12 +88,89 @@ Page({
     // })
   },
 
+  // 搜索框
   bindKeyInput: function (e) {
     this.setData({
       searchInput: e.detail.value
     })
   },
 
+  // 南岸咨询tab
+  naChangeItem: function (e) {
+    this.setData({
+      naItem: e.currentTarget.dataset.item
+    })
+    if (this.data.naItem == 0) {
+      this.setData({
+        naItemTabList: [
+          {id: 1, name: '政策.咨询'},
+          {id: 2, name: '党建.服务'},
+          {id: 3, name: '抗疫.复工'},
+          {id: 4, name: '功能.服务'}]
+      })
+    } else {
+      this.setData({
+        naItemTabList: [
+          {id: 1, name: '天气.咨询'},
+          {id: 2, name: '外出.服务'},
+          {id: 3, name: '打工.复工'},
+          {id: 4, name: '娱乐.服务'}]
+      })
+    }
+  },
+  naChangeTab: function (e) {
+    this.setData({
+      naTab: e.detail.current
+    })
+    if (this.data.naTab == 0) {
+      this.setData({
+        naItemTabList: [
+          {id: 1, name: '政策.咨询'},
+          {id: 2, name: '党建.服务'},
+          {id: 3, name: '抗疫.复工'},
+          {id: 4, name: '功能.服务'}]
+      })
+    } else {
+      this.setData({
+        naItemTabList: [
+          {id: 1, name: '天气.咨询'},
+          {id: 2, name: '外出.服务'},
+          {id: 3, name: '打工.复工'},
+          {id: 4, name: '娱乐.服务'}]
+      })
+    }
+    // 重置咨询title-tab
+    this.setData({
+      naItemTab: 1
+    })
+  },
+
+  // 南岸咨询子集菜单点击
+  clickNaTilteTab: function (e) {
+    this.setData({
+      naItemTab: e.currentTarget.dataset.item.id
+    })
+    const ran = Math.random()*100 + 41
+    this.setData({
+      naContentList: [
+        {id: 1, name: `${ran}2洪斌在全区疫情防控工作会议上强调，坚持不松懈的精神，努力工作，开展创先争优活动，激励人民发扬美好传统美德！`},
+        {id: 2, name: `​${ran}坚持不松劲渝事好商量`},
+        {id: 3, name: '2南岸实践工作全面启动'},
+        {id: 4, name: '2首条直达南滨路人防隧道开建'},
+        {id: 5, name: '2全市首个！南岸区便民数字地图上线啦~'}]
+    })
+  },
+
+  // 南岸咨询内容点击
+  clickNaContent: function (e) {
+    console.log(e)
+  },
+
+  // 南岸咨询更多
+  naMore: function (e) {
+    console.log('更多')
+  },
+
   getUserProfile() {
     wx.setStorageSync('nickname', "");
     wx.setStorageSync('avatarUrl', "");

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.wxml

@@ -2,10 +2,11 @@
 <view>
 
   <view class="top">
-    <image src="../images/index-bg.png" style="width:100%;height:409rpx"></image>
-    <image src="../../images/toplogo.png" class="top-logo" style="top: {{navHeight}}rpx"></image>
+    <image src="{{imgUrl}}index-bg.png" style="width:100%;height:409rpx"></image>
+    <image src="{{imgUrl}}toplogo.png" class="top-logo" style="top: {{navHeight}}rpx"></image>
   </view>
 
+  <!-- 内容1 -->
   <view class="content-search" style="height:648rpx;width:100%;background-color:#F5F5F5;position:relative">
     <!-- 内容top -->
     <view class="content-search-tab" style="height: 648rpx;">
@@ -13,14 +14,15 @@
       <view style="width:650rpx;height:60rpx">
         <view class="search-view">
           <view class="search-icon">
-            <image src="../images/index-search.png" style="height:28rpx;width:28rpx"></image>
+            <image src="{{imgUrl}}index-search.png" style="height:28rpx;width:28rpx"></image>
           </view>
           <input class="search-input" bindinput="bindKeyInput" placeholder="在此输入关键字" />
         </view>
       </view>
       <!-- 服务内容1 -->
       <view class="content-service" style="margin-top: 15rpx">
-        <view wx:for="{{ serviceItems1 }}" wx:for-item="item" wx:for-index="index" class="content-service-item">
+        <view wx:for="{{ serviceItems1 }}" wx:for-item="item" wx:for-index="index" wx:key="index"
+          class="content-service-item">
           <view>
             <image src="{{ item.img }}" style="height:88rpx;width:88rpx"></image>
           </view>
@@ -29,7 +31,8 @@
       </view>
       <!-- 服务内容2 -->
       <view class="content-service">
-        <view wx:for="{{ serviceItems2 }}" wx:for-item="item" wx:for-index="index" class="content-service-item">
+        <view wx:for="{{ serviceItems2 }}" wx:for-item="item" wx:for-index="index" wx:key="index"
+          class="content-service-item">
           <view>
             <image src="{{ item.img }}" style="height:88rpx;width:88rpx"></image>
           </view>
@@ -39,12 +42,15 @@
       <!-- 百姓聚焦 -->
       <view class="content-people" style="margin-top: 15rpx">
         <view class="people-title">
-          <image src="../images/people-title.png" style="height: 59rpx;width: 59rpx;"></image>
+          <image src="{{imgUrl}}people-title.png" style="height: 59rpx;width: 59rpx;"></image>
           <view class="people-font1">百姓聚焦</view>
           <view class="people-font2">每日更新</view>
         </view>
         <view class="people-content">
-          <view wx:for="{{ peopleService }}" wx:for-item="item" wx:for-index="index" class="people-content-item"> {{ item.name }}</view>
+          <view wx:for="{{ peopleService }}" wx:for-item="item" wx:for-index="index" wx:key="index"  class="people-content-item {{ item.top?'top':'' }}">
+          <image wx:if="{{ item.top }}" src="{{imgUrl}}index-top-fire.png" style="height: 24rpx;width: 20rpx"></image>
+          <view>{{ item.name }}</view>
+          </view>
         </view>
       </view>
       <!-- 百姓聚焦 -->
@@ -54,7 +60,81 @@
 
   <!-- 三会一聚 -->
   <view class="three" style="background-color: #F5F5F5;">
-    <image src="../images/three.png" style="height:163rpx;width:100%"></image>
+    <image src="{{imgUrl}}three.png" style="height:163rpx;width:100%"></image>
+  </view>
+
+  <!-- 志愿服务 -->
+  <view class="self-service" style="background-color: #F5F5F5;">
+    <image src="{{imgUrl}}self-service.png" style="height:163rpx;width:100%"></image>
+  </view>
+
+  <!-- 南岸咨询 -->
+  <view class="content-na" style="height:502rpx;width:100%;background-color:#F5F5F5;position:relative">
+    <!-- 浮动 -->
+    <view class="content-na-tab" style="height: 482rpx;">
+      <!-- 标题 -->
+      <view class="na-title">
+        <!-- 南岸咨询 -->
+        <view class="tab-item {{naTab==0?'active':''}}" bindtap="naChangeItem" data-item="0">
+          <view style="height:50rpx;width:32rpx;display: flex;justify-content:center;align-items:center;">
+            <image wx:if="{{ naTab==0 }}" style="width:32rpx;height:32rpx;" src="{{imgUrl}}na-title-1.png"></image>
+          </view>
+          <view style="height:50rpx;padding-left:10rpx">南岸咨询</view>
+        </view>
+        <!-- 今日重庆 -->
+        <view class="tab-item {{naTab==1?'active':''}}" bindtap="naChangeItem" data-item="1">
+          <view style="height:50rpx;width:32rpx;display: flex;justify-content:center;align-items:center;">
+            <image wx:if="{{ naTab==1 }}" style="width:32rpx;height:32rpx;" src="{{imgUrl}}na-title-1.png"></image>
+          </view>
+          <view style="height:50rpx;padding-left:10rpx">今日重庆</view>
+        </view>
+        <!-- 国务院信息 -->
+        <view class="tab-item {{naTab==2?'active':''}}" bindtap="naChangeItem" data-item="2">
+          <view style="height:50rpx;width:32rpx;display: flex;justify-content:center;align-items:center;">
+            <image wx:if="{{ naTab==2 }}" style="width:32rpx;height:32rpx;" src="{{imgUrl}}na-title-1.png"></image>
+          </view>
+          <view style="height:50rpx;padding-left:10rpx">国务院信息</view>
+        </view>
+      </view>
+      <!-- 标题 -->
+      <!-- 内容 -->
+      <view class="na-content">
+        <swiper current="{{naItem}}" bindchange="naChangeTab" style="height: 100%">
+          <!-- 南岸咨询 -->
+          <swiper-item>
+            <include src="naTitleTab.wxml" />
+          </swiper-item>
+          <!-- 今日重庆 -->
+          <swiper-item>
+            <include src="naTitleTab.wxml" />
+          </swiper-item>
+          <!-- 国务院信息 -->
+          <swiper-item>
+            <include src="naTitleTab.wxml" />
+          </swiper-item>
+        </swiper>
+      </view>
+      <!-- 内容 -->
+      <!-- 更多 -->
+      <view class="na-more" style="height: 50rpx;">
+        <view style="height: 50rpx;display:flex;align-items: center;" bindtap="naMore">查看更多 >></view>
+      </view>
+      <!-- 更多 -->
+    </view>
+    <!-- 浮动 -->
   </view>
+  <!-- 南岸咨询 -->
+
+  <!-- 数据中心 -->
+  <view class="data-cneter" style="height: 969rpx;width: 100%;background-color:#F5F5F5;position:relative">
+    <view class="data-center-contain">
+    </view>
+  </view>
+  <!-- 数据中心 -->
+
+  <!-- 底部 -->
+  <view style="height: 100rpx">
+  </view>
+
 
 </view>

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.wxss

@@ -1,20 +1,23 @@
 /**index.wxss**/
 /* pages/publics/publics.wxss */
+/* 头部 */
 .top {
   height: 409rpx;
   overflow: hidden;
   position: relative;
 }
 
+/* 浮动图标 */
 .top-logo {
   z-index: 99;
   position: absolute;
   left: 50%;
   transform: translate(-50%);
   width: 500rpx;
-  height: 200rpx;
+  height: 176rpx;
 }
 
+/* 第一个内容，浮动上移 */
 .content-search-tab {
   margin-left: 20rpx;
   top: -85rpx;
@@ -25,6 +28,7 @@
   width: 651rpx;
 }
 
+/* 搜索整体 */
 .search-view {
   height: 60rpx;
   border-radius: 5rpx;
@@ -34,6 +38,7 @@
   align-items: center;
 }
 
+/* 搜索图标 */
 .search-icon {
   display: flex;
   justify-content: center;
@@ -43,12 +48,14 @@
   letter-spacing: 3rpx;
 }
 
+/* 搜索 */
 .search-input {
   height: 30rpx;
   font-size: 25rpx;
   letter-spacing: 3rpx;
 }
 
+/* 服务的内容整体 */
 .content-service {
   height: 170rpx;
   flex-wrap: wrap;
@@ -57,7 +64,9 @@
   align-items: center;
 }
 
+/* 服务的内容单个 */
 .content-service-item {
+  font-size: 20rpx;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -74,6 +83,7 @@
   align-items: center;
 }
 
+/* 百姓聚焦字体 */
 .people-font1 {
   height: 59rpx;
   /* font-size: 36rpx; */
@@ -87,6 +97,7 @@
   align-items: center;
 }
 
+/* 每日更新字体 */
 .people-font2 {
   height: 59rpx;
   font-size: 18px;
@@ -98,6 +109,7 @@
   align-items: flex-end;
 }
 
+/* 百姓聚焦内容整体 */
 .people-content {
   height: 140rpx;
   flex-wrap: wrap;
@@ -106,8 +118,9 @@
   align-items: center;
 }
 
+/* 百姓聚焦内容单个 */
 .people-content-item {
-  /* font-size: 24rpx;
+  font-size: 24rpx;
   font-family: PingFang SC;
   font-weight: 500;
   color: #508FF4;
@@ -116,10 +129,130 @@
   padding: 0rpx 20rpx;
   display: flex;
   align-items: center;
-  border-radius: 28rpx; */
-  width: 210px;
-height: 120px;
-background: linear-gradient(90deg, #F7CB6B 0%, #ED7C44 100%);
-box-shadow: 0px 2px 5px 0px rgba(153,153,153,0.4);
-border-radius: 10px;
-}
+  border-radius: 28rpx;
+}
+
+.people-content-item.top {
+  font-size: 24rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #000000;
+  height: 48rpx;
+  background-color: #EEEEEE;
+  padding: 0rpx 20rpx;
+  display: flex;
+  align-items: center;
+  border-radius: 28rpx;
+}
+
+/* 志愿服务，浮动上移 */
+.content-na-tab {
+  margin-left: 20rpx;
+  top: -55rpx;
+  position: absolute;
+  border-radius: 10rpx;
+  background-color: #ffffff;
+  padding: 25rpx 30rpx;
+  width: 651rpx;
+}
+
+/* 志愿服务标题 */
+.na-title {
+  height: 50rpx;
+  display: flex;
+}
+
+.tab-item{
+  flex: 1;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 50rpx;
+  height: 50rpx;
+  width: 200rpx;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.tab-item.active{
+  font-size: 32rpx;
+  border-bottom: 7rpx solid #508FF4;
+}
+
+/* 南岸咨询内容 */
+.na-content {
+  margin-top: 35rpx;
+  height: 332rpx;
+}
+
+/* 咨询二级标题 */
+.na-title-tab {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.na-title-tab-item {
+  font-size: 25rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #000000;
+  height: 48rpx;
+  background-color: #FFFFFF;
+  padding: 2rpx 17rpx;
+  display: flex;
+  align-items: center;
+  border-radius: 30rpx;
+  border: 2rpx solid #DDDDDD;
+}
+
+.na-title-tab-item.active {
+  font-size: 25rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  height: 48rpx;
+  background-color: #508FF4;
+  padding: 2rpx 17rpx;
+  display: flex;
+  align-items: center;
+  border-radius: 30rpx;
+  border-bottom: 2rpx solid #DDDDDD;
+}
+
+/* 咨询内容 */
+.na-content-list {
+  margin-top: 30rpx;
+}
+
+.na-content-list-item {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 45rpx;
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  line-height: 30rpx;
+}
+
+/* 咨询更多 */
+.na-more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #999999;
+  font-size: 22rpx;
+}
+
+/* 数据中心 */
+.data-center-contain {
+  margin-left: 20rpx;
+  border-radius: 10rpx;
+  background-color: #ffffff;
+  padding: 25rpx 30rpx;
+  width: 651rpx;
+  height: 100%;
+}

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/naTitleTab.wxml

@@ -0,0 +1,13 @@
+<view style="height: 500rpx">
+  <!-- tab -->
+  <view class="na-title-tab" style="height: 50rpx;width: 100%">
+    <view wx:for="{{ naItemTabList }}" wx:for-item="item" wx:for-index="index" wx:key="index" bindtap="clickNaTilteTab"
+      data-item="{{ item }}" class="na-title-tab-item {{naItemTab==item.id?'active':''}}">{{ item.name }}</view>
+  </view>
+  <!-- content -->
+  <view class="na-content-list" style="height: 550rpx;width: 100%">
+    <view wx:for="{{ naContentList }}" wx:for-item="item" wx:for-index="index" wx:key="index" bindtap="clickNaContent" data-item="{{ item }}" class="na-content-list-item">
+    ·{{ item.name }}
+    </view>
+  </view>
+</view>