健康宣教

miniprogram/app.config.ts

@@ -12,6 +12,7 @@ if (env === "trial") {
   // host = "test.hzliuzhi.com";
 }
 console.log("host",host)
+export const HOST = host;
 export const Base_URL = `https://${host}/manager/fdhb-mobile`;
 export const Upload_URL = `https://${host}/manager/file`;
 

miniprogram/module/article/components/science-card/science-card.scss

@@ -5,8 +5,9 @@
   flex-direction: row;
   align-items: center;
   min-height: 125px;
-  padding: 12px 0;
+  padding: 10px 0;
   box-sizing: border-box;
+  padding-left: 10px;
 
   .cover {
     flex: none;
@@ -27,7 +28,9 @@
   .title {
     font-size: 16px;
     // color: #fff;
-    color:#191919 ;
+    color: #191919;
+    font-weight: bold;
+    margin-bottom: 10px;
   }
 
   .description {
@@ -35,9 +38,10 @@
     color: #A2AFB2;
 
     &-2 {
-      font-size: 12px;
+      font-size: 14px;
       // color: #34A76B;
-      color: #8C8C8C;
+      // color: #8C8C8C;
+      color: #333333;
     }
   }
 
@@ -49,6 +53,6 @@
     height: 1px;
     transform: translateY(-1px);
     // background: linear-gradient(90deg, rgba(15, 34, 38, 0) 0%, var(--primary-color, #E7E7E7) 50%, rgba(15, 34, 38, 0) 100%);
-    background: linear-gradient(90deg, rgba(15, 34, 38, 0) 0%,  #E7E7E7 50%, rgba(15, 34, 38, 0) 100%);
+    background: linear-gradient(90deg, rgba(15, 34, 38, 0) 0%, #E7E7E7 50%, rgba(15, 34, 38, 0) 100%);
   }
 }

miniprogram/module/article/components/science-card/science-card.ts

@@ -1,4 +1,5 @@
 // module/article/components/science-card/science-card.ts
+import { HOST } from "../../../../app.config";
 Component({
   properties: {
     item: { type: Object, value: {} },
@@ -12,8 +13,17 @@ Component({
       if (this.data.replace) {
         wx.redirectTo({ url: `/module/article/pages/science-info/science-info?id=${id}` });
       } else {
-        wx.navigateTo({ url: `/module/article/pages/science-info/science-info?id=${id}` })
-          .then(res => { res.eventChannel.emit('load', this.data.item) })
+        const url = `https://${HOST}/admin/editor/preview.html?popularScienceArticleId=${id}`;
+        const item = {
+          url,
+        };
+        wx.navigateTo({
+          url: `/module/article/pages/science-info/science-info?url=${url}`,
+        }).then((res) => {
+          res.eventChannel.emit("load", item);
+        });
+      //   wx.navigateTo({ url: `/module/article/pages/science-info/science-info?id=${id}` })
+      //     .then(res => { res.eventChannel.emit('load', this.data.item) })
       }
     }
   }

miniprogram/module/article/components/science-card/science-card.wxml

@@ -3,9 +3,10 @@
   <view class="border-gradient" wx:if="{{index}}">
     <!--边框-->
   </view>
-  <image class="cover" src="{{item.briefImg}}" mode="aspectFill" fade-in />
+  <!--<image class="cover" src="{{item.briefImg}}" mode="aspectFill" fade-in /> -->
   <view class="content">
     <text class="title" max-lines="3" overflow="ellipsis">{{item.title}}</text>
-    <text class="description-2" max-lines="1" overflow="ellipsis" wx:if="{{item.readVolume}}">{{item.readVolume}}人阅读</text>
+     <text class="description-2" max-lines="1" overflow="ellipsis" wx:if="{{item.pushTime}}">发布时间：{{item.pushTime}}</text>
+    <text class="description-2" max-lines="1" overflow="ellipsis" wx:if="{{item.readVolume}}">阅读量：{{item.readVolume}}</text>
   </view>
 </view>

miniprogram/module/article/components/waterfall-card/waterfall-card.json

@@ -0,0 +1,5 @@
+{
+  "renderer": "skyline",
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/module/article/components/waterfall-card/waterfall-card.scss

@@ -0,0 +1,60 @@
+/* module/article/components/waterfall-card/waterfall-card.wxss */
+.waterfall-card-item {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 0;
+  box-sizing: border-box;
+  width: 100%;
+
+  .cover {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 12px 12px 0 0;
+    /* 图片等宽，高度自适应，实现不等高效果 */
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    box-sizing: border-box;
+    flex: 1;
+  }
+
+  .title {
+    font-size: 16px;
+    color: #191919;
+    line-height: 1.5;
+    margin-bottom: 5px;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .meta-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 12px;
+    color: #8C8C8C;
+    margin-top: auto;
+  }
+
+  .date {
+    font-size: 12px;
+    color: #8C8C8C;
+    margin-bottom: 5px;
+  }
+
+  .read-count {
+    font-size: 12px;
+    color: #8C8C8C;
+  }
+}

miniprogram/module/article/components/waterfall-card/waterfall-card.ts

@@ -0,0 +1,25 @@
+// module/article/components/waterfall-card/waterfall-card.ts
+import { HOST } from "../../../../app.config";
+
+Component({
+  properties: {
+    item: { type: Object, value: {} },
+    index: { type: Number, value: 0 },
+    replace: { type: Boolean, value: false },
+  },
+  data: {},
+  methods: {
+    toInfoPage(event: WechatMiniprogram.TouchEvent) {
+      const id = event.currentTarget.id;
+      const url = `https://${HOST}/admin/editor/preview.html?popularScienceArticleId=${id}`;
+      const item = {
+        url,
+      };
+      wx.navigateTo({
+        url: `/module/article/pages/science-info/science-info`,
+      }).then((res) => {
+        res.eventChannel.emit("load", item);
+      });
+    },
+  },
+});

miniprogram/module/article/components/waterfall-card/waterfall-card.wxml

@@ -0,0 +1,11 @@
+<!--module/article/components/waterfall-card/waterfall-card.wxml-->
+<view class="waterfall-card-item" id="{{item.id}}" bind:tap="toInfoPage">
+  <image class="cover" src="{{item.briefImg}}" mode="widthFix" fade-in lazy-load />
+  <view class="content">
+    <text class="title">{{item.title}}</text>
+    <view class="meta-info">
+      <text class="date" wx:if="{{item.pushTime}}">{{item.pushTime}}</text>
+      <text class="read-count">阅读量 {{item.readVolume}}</text>
+    </view>
+  </view>
+</view>

miniprogram/module/article/pages/foot-print/foot-print.scss

@@ -12,7 +12,7 @@
   align-items: flex-start;
   background: #fff;
   border-radius: 16rpx;
-  margin: 20rpx 24rpx 0 24rpx;
+  margin: 10rpx 14rpx 0 24rpx;
   padding: 20rpx 0;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
   gap: 20rpx;

miniprogram/module/article/pages/science-info/science-info.ts

@@ -8,8 +8,10 @@ Component({
   behaviors: [PageContainerBehavior, tickleBehavior],
   lifetimes: {
     attached() {
+      console.log(this.data, "this.data===获取宣教传来的参数111");
       const channel = this.getOpenerEventChannel();
       channel.on?.("load", (data: AnyObject) => {
+        console.log(data, "data===获取宣教传来的参数");
         // 支持直接传入外链 URL，直接使用 web-view 打开 新加的
         if (data?.url) {
           this.setData({

miniprogram/module/article/pages/science-info/science-info.wxml

@@ -6,7 +6,7 @@
     <web-view src="{{dataset.content}}"></web-view>
   </block>
   <block wx:else>
-    <t-navbar title="中医科普" left-arrow />
+    <t-navbar title="健康宣教" left-arrow />
     <scroll-view class="page-scroll__container" type="list" scroll-y style="{{containerStyle}}">
       <block wx:if="{{dataset.briefImg}}">
         <image src="{{dataset.briefImg}}" mode="widthFix" style="width: 100%;"></image>

miniprogram/module/article/pages/science-list/science-list.ts

@@ -20,8 +20,10 @@ Component({
     keyword: '',
     searchInputProps: {
       placeholderStyle: 'color: #929292;',
-      cursorColor: '#1D6FF6',
-      iconColor: '#1D6FF6',
+      // cursorColor: '#1D6FF6',
+      // iconColor: '#1D6FF6',
+      cursorColor: '#929292',
+      iconColor: '#929292',
       focus: false,
       placeholder: '输入搜索名称',
     },

miniprogram/module/article/pages/science-list/science-list.wxml

@@ -1,5 +1,5 @@
 <!--module/diet/pages/science-list/science-list.wxml-->
-<t-navbar title="中医科普" left-arrow />
+<t-navbar title="健康宣教" left-arrow />
 <view class="search-wrapper" bindtap="onTapSearchInput">
   <icon class="search-icon" data-button="focus" type="search" size="14" color="{{searchInputProps.iconColor}}"></icon>
   <input class="search-input" value="{{keyword}}" focus="{{searchInputProps.focus}}" placeholder="{{searchInputProps.placeholder}}" placeholder-style="{{searchInputProps.placeholderStyle}}" cursor-color="{{searchInputProps.cursorColor}}" confirm-type="search" bindconfirm="onConfirmSearchInput" />

miniprogram/module/article/searc-list.scss

@@ -2,10 +2,11 @@
   display: flex;
   align-items: center;
   margin: 12px;
-  padding: 4px 8px;
+  padding: 6px 8px;
   // border: 1px solid #34A76B;
-  border: 1px solid #1D6FF6;
-  border-radius: 8px;
+  // border: 1px solid #1D6FF6;
+  border-radius: 30px;
+  background-color: #f7f7f7;
 
   .search-icon {
     flex: none;

miniprogram/pages/home/home.json

@@ -14,11 +14,13 @@
     "t-popup": "tdesign-miniprogram/popup/popup",
     "tabbar": "../../components/tabbar/tabbar",
     "media-carousel": "../../components/media-carousel/media-carousel",
-    "t-loading": "tdesign-miniprogram/loading/loading"
+    "t-loading": "tdesign-miniprogram/loading/loading",
+    "waterfall-card": "../../module/article/components/waterfall-card/waterfall-card"
   },
   "componentPlaceholder": {
     "report-health-scheme": "view",
     "science-card": "view",
+    "waterfall-card": "view",
     "tabbar": "view",
     "media-carousel": "view"
   }

miniprogram/pages/home/home.scss

@@ -357,6 +357,20 @@ $scale: 0.5;
       font-size: 12px;
     }
   }
+
+  .waterfall-container {
+    display: flex;
+    flex-wrap: wrap;
+    // gap: 12px;
+    margin-top: 12px;
+    justify-content: space-between;
+
+    waterfall-card {
+      width: calc(50% - 3px);
+      box-sizing: border-box;
+      margin-bottom: 12px;
+    }
+  }
 }
 
 .popup-container {

miniprogram/pages/home/home.ts

@@ -675,6 +675,7 @@ Page({
     try {
       const { data } = await getShortScienceList();
       this.setData({ scienceList: data });
+      console.log(data, "data===scienceList");
     } catch (error) {}
   },
 

miniprogram/pages/home/home.wxml

@@ -129,7 +129,10 @@
           <t-icon name="chevron-right-double"></t-icon>
         </view>
       </view>
-      <science-card wx:for="{{scienceList}}" wx:key="id" item="{{item}}" index="{{index}}"></science-card>
+      <view class="waterfall-container">
+        <waterfall-card wx:for="{{scienceList}}" wx:key="id" item="{{item}}" index="{{index}}"></waterfall-card>
+      </view>
+       <!--<science-card wx:for="{{scienceList}}" wx:key="id" item="{{item}}" index="{{index}}"></science-card>-->
     </view>
     <science-card style="display: none;">
       <!--?-->

miniprogram/pages/mine/mine.ts

@@ -211,13 +211,13 @@ Page({
   },
   // 健康宣教
   toHealthEducationPage() {
-    wx.showToast({
-      title: "敬请期待",
-      icon: "none",
-    });
-    // wx.navigateTo({
-    //   url: '/module/article/pages/evangelism-notice/evangelism-notice'
+    // wx.showToast({
+    //   title: "敬请期待",
+    //   icon: "none",
     // });
+    wx.navigateTo({
+      url: '/module/article/pages/science-list/science-list'
+    });
   },
   onAddressTap() {
     // 跳转到收货地址页面