修改首页

App.vue

@@ -159,6 +159,7 @@
 		--f9Color: #f9f9f9;
 		--f99Color: #999999;
 		--f85Color: #858585;
+		--f69Color: #696969;
 		--f80Color: #808080;
 		--fDCColor: #DCDCDC;
 		--fcColor: #cccccc;

common/css/font-icon.css

@@ -1,91 +1,24 @@
-@font-face {
-  font-family: "iconfont"; /* Project id 4182834 */
-  src: url('//at.alicdn.com/t/c/font_4182834_c6qoydiu4q.woff2?t=1691042294599') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4182834_c6qoydiu4q.woff?t=1691042294599') format('woff'),
-       url('//at.alicdn.com/t/c/font_4182834_c6qoydiu4q.ttf?t=1691042294599') format('truetype');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-changshangguanli:before {
-  content: "\e621";
-}
-
-.icon-icon-cross-empty:before {
-  content: "\e65c";
-}
-
-.icon-dayuhao:before {
-  content: "\e625";
-}
-
-.icon-shenpi1:before {
-  content: "\e63a";
-}
-
-.icon-zhuyuanriqingdanchaxunbeifen:before {
-  content: "\e62b";
-}
-
-.icon-shangpinguanli:before {
-  content: "\fcda";
-}
-
-.icon-31daifahuo:before {
-  content: "\e600";
-}
-
-.icon-daishouhuo:before {
-  content: "\e617";
-}
-
-.icon-transaction:before {
-  content: "\e693";
-}
-
-.icon-shenpi:before {
-  content: "\e733";
-}
-
-.icon-weixin:before {
-  content: "\e73b";
-  color: #0bc918;
-}
-
-.icon-yonghu:before {
-  content: "\e643";
-}
-
-.icon-shezhi:before {
-  content: "\10127";
-}
-
-.icon-shouye:before {
-  content: "\10128";
-}
-
-.icon-taocan:before {
-  content: "\10129";
-}
-
-.icon-fuwu:before {
-  content: "\1012b";
-}
-
-.icon-tukuguanli:before {
-  content: "\1012d";
-}
-
-.icon-haoyoutuijian:before {
-  content: "\1012f";
-}
-
-.icon-zengjia:before {
-  content: "\e608";
-}
+@font-face {
+	font-family: "iconfont";
+	/* Project id 4241853 */
+	src: url('//at.alicdn.com/t/c/font_4241853_ioosv15fx9t.woff2?t=1694155992349') format('woff2'),
+		url('//at.alicdn.com/t/c/font_4241853_ioosv15fx9t.woff?t=1694155992349') format('woff'),
+		url('//at.alicdn.com/t/c/font_4241853_ioosv15fx9t.ttf?t=1694155992349') format('truetype');
+}
+
+.iconfont {
+	font-family: "iconfont" !important;
+	font-size: 16px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-aixin:before {
+	content: "\e83f";
+}
+
+.icon-aixin1:before {
+	content: "\e60f";
+	color: red;
+}

pages/customer/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="main">
-		系统首页
+		客服
 	</view>
 </template>
 

pages/home/index.vue

@@ -3,7 +3,7 @@
 		<view class="one">
 			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#F5F5F5"
 				indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="1000">
-				<swiper-item class="list" v-for="(item,index) in imgList" :key="index" @tap="toBanner(item)">
+				<swiper-item class="list" v-for="(item,index) in imgList" :key="index">
 					<image class="image" :src="item.url" mode="">
 					</image>
 				</swiper-item>
@@ -13,7 +13,7 @@
 			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#F5F5F5"
 				indicator-active-color="#007AFF" :autoplay="false">
 				<swiper-item class="swiper-item" v-for="(item,index) in moduleList" :key="index">
-					<view class="list" v-for="(as,index) in item" :key="indexs" @tap="toChange(as)">
+					<view class="list" v-for="(as,indexs) in item" :key="indexs" @tap="toChange(as)">
 						<image class="image" :src="as.url&&as.url.length>0?as.url[0].url:''" mode="aspectFill">
 						</image>
 						<text class="text">{{ as.name }}</text>
@@ -30,12 +30,31 @@
 				<view class="tabsList">
 					<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
 						<view class="list-scroll-view">
-							<view class="list" v-for="(item,index) in list" :key="index" @tap="toInfo(item)">
-								1111
-								<view class="is_bottom" v-if="is_bottom">
-									<text>{{config.bottom_title}}</text>
+							<!-- 瀑布流布局列表 -->
+							<view class="pubuBox">
+								<view class="pubuItem">
+									<view class="list" v-for="(item, index) in list" :key="index" @tap="toInfo(item)">
+										<image :src="item.file&&item.file.length>0?item.file[0].url:''" mode="widthFix">
+										</image>
+										<view class="title"> <!-- 这是没有高度的父盒子（下半部分） -->
+											<view class="title_1">{{ item.title }}</view>
+											<view class="title_2">
+												<view class="left">
+													{{item.contact_name||'暂无昵称'}}
+												</view>
+												<view class="right" @tap.stop="toLike(item)">
+													<text v-if="item.is_like" class="iconfont icon-aixin1"></text>
+													<text else class="iconfont icon-aixin"></text>
+													{{item.like_num||'0'}}
+												</view>
+											</view>
+										</view>
+									</view>
 								</view>
 							</view>
+							<view class="is_bottom" v-if="is_bottom">
+								<text>{{config.bottom_title}}</text>
+							</view>
 						</view>
 					</scroll-view>
 				</view>
@@ -52,6 +71,7 @@
 		},
 		data() {
 			return {
+				config: {},
 				// 轮播图
 				imgList: [],
 				// 模块
@@ -66,7 +86,7 @@
 				list: [],
 				total: 0,
 				skip: 0,
-				limit: 10,
+				limit: 6,
 				page: 0,
 				// 数据是否触底
 				is_bottom: false,
@@ -94,6 +114,8 @@
 				let info = {
 					skip: that.skip,
 					limit: that.limit,
+					status: '1',
+					type: that.tabs.active
 				}
 				let res;
 				res = await that.$api(`/article`, 'GET', {
@@ -110,11 +132,6 @@
 					})
 				}
 			},
-
-			// 点击轮播图图片
-			toBanner(item) {
-				console.log(item)
-			},
 			// 点击模块
 			toChange(item) {
 				console.log(item)
@@ -123,6 +140,14 @@
 			toMore() {
 				console.log('公告')
 			},
+			// 查看详情
+			toInfo(item) {
+				console.log(item)
+			},
+			// 点赞/取消点赞
+			toLike(item) {
+				console.log(item)
+			},
 			// 查询其他信息
 			async searchOther() {
 				const that = this;
@@ -131,6 +156,7 @@
 				res = await that.$api(`/config`, 'GET', {});
 				if (res.errcode == '0') {
 					that.$set(that, `imgList`, res.data.file);
+					that.$set(that, `config`, res.data);
 				}
 				//模块
 				res = await that.$api(`/module`, 'GET', {
@@ -203,7 +229,7 @@
 				const that = this;
 				that.$set(that, `list`, [])
 				that.$set(that, `skip`, 0)
-				that.$set(that, `limit`, 10)
+				that.$set(that, `limit`, 6)
 				that.$set(that, `page`, 0)
 			}
 		},
@@ -274,16 +300,63 @@
 				width: 100vw;
 				height: 80vh;
 
+				.pubuBox {
+					padding: 2vw;
+				}
+
+				.pubuItem {
+					column-count: 2;
+					column-gap: 2vw;
+				}
+
 				.list {
+					box-sizing: border-box;
+					border-radius: 2vw;
+					overflow: hidden;
 					background-color: var(--mainColor);
-					border: 1px solid var(--f5Color);
-					padding: 2vw;
-					margin: 0 2vw 2vw 2vw;
-					border-radius: 5px;
+					break-inside: avoid;
+					/*避免在元素内部插入分页符*/
+					box-sizing: border-box;
+					margin-bottom: 2vw;
+				}
+
+				.list image {
+					width: 100%;
 				}
 
-				.list:first-child {
-					margin: 2vw 0 0 0;
+				.title {
+					padding: 2vw;
+
+					.title_1 {
+						font-size: var(--font14Size);
+						line-height: 4vw;
+						text-overflow: -o-ellipsis-lastline;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						line-clamp: 2;
+						-webkit-box-orient: vertical;
+						min-height: 6vw;
+						max-height: 20vw;
+					}
+
+					.title_2 {
+						display: flex;
+						justify-content: space-between;
+						font-size: var(--font12Size);
+						color: var(--f69Color);
+						padding: 1vw 0;
+
+						.right {
+							display: flex;
+							align-items: center;
+
+							text:first-child {
+								padding: 0 1vw 0 0;
+							}
+						}
+					}
 				}
 			}
 		}

pages/map/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="main">
-		系统首页
+		地图
 	</view>
 </template>
 

pages/my/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="main">
-		系统首页
+		我的
 	</view>
 </template>
 

unpackage/dist/dev/mp-weixin/pages/customer/index.wxml

@@ -1 +1 @@
-<view class="main">系统首页</view>
+<view class="main">客服</view>

unpackage/dist/dev/mp-weixin/pages/home/index.js

@@ -127,7 +127,7 @@ var render = function () {
   var _c = _vm._self._c || _h
   var l1 = _vm.__map(_vm.moduleList, function (item, index) {
     var $orig = _vm.__get_orig(item)
-    var l0 = _vm.__map(item, function (as, index) {
+    var l0 = _vm.__map(item, function (as, indexs) {
       var $orig = _vm.__get_orig(as)
       var g0 = as.url && as.url.length > 0
       return {
@@ -140,11 +140,20 @@ var render = function () {
       l0: l0,
     }
   })
+  var l2 = _vm.__map(_vm.list, function (item, index) {
+    var $orig = _vm.__get_orig(item)
+    var g1 = item.file && item.file.length > 0
+    return {
+      $orig: $orig,
+      g1: g1,
+    }
+  })
   _vm.$mp.data = Object.assign(
     {},
     {
       $root: {
         l1: l1,
+        l2: l2,
       },
     }
   )
@@ -205,6 +214,7 @@ var _default = {
   },
   data: function data() {
     return {
+      config: {},
       // 轮播图
       imgList: [],
       // 模块
@@ -219,7 +229,7 @@ var _default = {
       list: [],
       total: 0,
       skip: 0,
-      limit: 10,
+      limit: 6,
       page: 0,
       // 数据是否触底
       is_bottom: false,
@@ -309,7 +319,9 @@ var _default = {
                 that = _this;
                 info = {
                   skip: that.skip,
-                  limit: that.limit
+                  limit: that.limit,
+                  status: '1',
+                  type: that.tabs.active
                 };
                 _context4.next = 4;
                 return that.$api("/article", 'GET', _objectSpread({}, info));
@@ -333,10 +345,6 @@ var _default = {
         }, _callee4);
       }))();
     },
-    // 点击轮播图图片
-    toBanner: function toBanner(item) {
-      console.log(item);
-    },
     // 点击模块
     toChange: function toChange(item) {
       console.log(item);
@@ -345,6 +353,14 @@ var _default = {
     toMore: function toMore() {
       console.log('公告');
     },
+    // 查看详情
+    toInfo: function toInfo(item) {
+      console.log(item);
+    },
+    // 点赞/取消点赞
+    toLike: function toLike(item) {
+      console.log(item);
+    },
     // 查询其他信息
     searchOther: function searchOther() {
       var _this2 = this;
@@ -361,6 +377,7 @@ var _default = {
                 res = _context5.sent;
                 if (res.errcode == '0') {
                   that.$set(that, "imgList", res.data.file);
+                  that.$set(that, "config", res.data);
                 }
                 //模块
                 _context5.next = 7;
@@ -449,7 +466,7 @@ var _default = {
       var that = this;
       that.$set(that, "list", []);
       that.$set(that, "skip", 0);
-      that.$set(that, "limit", 10);
+      that.$set(that, "limit", 6);
       that.$set(that, "page", 0);
     }
   }

unpackage/dist/dev/mp-weixin/pages/home/index.wxss

@@ -49,15 +49,58 @@
   width: 100vw;
   height: 80vh;
 }
+.main .four .tabsList .pubuBox {
+  padding: 2vw;
+}
+.main .four .tabsList .pubuItem {
+  -webkit-column-count: 2;
+          column-count: 2;
+  -webkit-column-gap: 2vw;
+          column-gap: 2vw;
+}
 .main .four .tabsList .list {
+  box-sizing: border-box;
+  border-radius: 2vw;
+  overflow: hidden;
   background-color: var(--mainColor);
-  border: 1px solid var(--f5Color);
+  -webkit-column-break-inside: avoid;
+          break-inside: avoid;
+  /*避免在元素内部插入分页符*/
+  box-sizing: border-box;
+  margin-bottom: 2vw;
+}
+.main .four .tabsList .list image {
+  width: 100%;
+}
+.main .four .tabsList .title {
   padding: 2vw;
-  margin: 0 2vw 2vw 2vw;
-  border-radius: 5px;
 }
-.main .four .tabsList .list:first-child {
-  margin: 2vw 0 0 0;
+.main .four .tabsList .title .title_1 {
+  font-size: var(--font14Size);
+  line-height: 4vw;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  min-height: 6vw;
+  max-height: 20vw;
+}
+.main .four .tabsList .title .title_2 {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font12Size);
+  color: var(--f69Color);
+  padding: 1vw 0;
+}
+.main .four .tabsList .title .title_2 .right {
+  display: flex;
+  align-items: center;
+}
+.main .four .tabsList .title .title_2 .right text:first-child {
+  padding: 0 1vw 0 0;
 }
 .scroll-view {
   position: absolute;

unpackage/dist/dev/mp-weixin/pages/map/index.wxml

@@ -1 +1 @@
-<view class="main">系统首页</view>
+<view class="main">地图</view>

unpackage/dist/dev/mp-weixin/pages/my/index.wxml

@@ -1 +1 @@
-<view class="main">系统首页</view>
+<view class="main">我的</view>