首页banner挑战

src/app.json

@@ -11,7 +11,8 @@
     "pages/article/index",
     "pages/search/index",
     "pages/protocol/index",
-    "pages/userInfo/index"
+    "pages/userInfo/index",
+    "pages/longPicture/index"
   ],
   "preloadRule": {},
   "window": {

src/pages/home/index.scss

@@ -48,6 +48,12 @@ page {
 
     .wx-swiper-dots {
       bottom: 60rpx;
+      display: flex;
+      align-items: center;
+    }
+    .wx-swiper-dot{
+      width: 8rpx;
+      height: 8rpx;
     }
     .wx-swiper-dot-active {
       width: 24rpx !important;
@@ -65,9 +71,10 @@ page {
         display: block;
         width: 100%;
         height: 274rpx;
+        border-radius: 32rpx;
       }
       &::after {
-        content: "";
+        content: '';
         position: absolute;
         bottom: 74rpx;
         left: 40rpx;
@@ -123,7 +130,7 @@ page {
       color: #222222;
       font-weight: bold;
       &::before {
-        content: "";
+        content: '';
         width: 8rpx;
         height: 34rpx;
         background-color: #3795f7;

src/pages/home/index.ts

@@ -5,15 +5,43 @@ Page({
     cateList: [] as any,
     remark: '',
 
-    isLogin: 0,
+    feedbackCount: 0,
+    bannerList: [],
   },
   onLoad() {
     app.waitLogin().then(() => {
       this.getCateList();
+      this.getBanner();
+      this.getRemarkCount();
+    });
+  },
+  getBanner() {
+    wx.ajax({
+      method: 'GET',
+      url: '?r=shizhong/index/index',
+      data: {},
+    }).then((res) => {
       this.setData({
-        isLogin: app.globalData.isLogin,
+        bannerList: res,
+      });
+    });
+  },
+  handleTap(e) {
+    const { index } = e.currentTarget.dataset;
+    const bannerItem: any = this.data.bannerList[index];
+    if (bannerItem.configType === '1') {
+      wx.navigateTo({
+        url: `/pages/article/index?id=${bannerItem.configContent}`,
       });
+    } else if (bannerItem.configType === '2') {
+      wx.navigateTo({
+        url: `/pages/article/index?id=${bannerItem.configContent}`,
+      });
+    } else if (bannerItem.configType === '3') {
+      wx.navigateTo({
+        url: `/pages/longPicture/index?url=${encodeURIComponent(bannerItem.configContent)}`,
       });
+    }
   },
   getCateList() {
     wx.ajax({
@@ -38,6 +66,17 @@ Page({
       url: '/pages/search/index',
     });
   },
+  getRemarkCount() {
+    wx.ajax({
+      method: 'GET',
+      url: '?r=shizhong/account/get-can-feedback-count',
+      data: {},
+    }).then((res) => {
+      this.setData({
+        feedbackCount: res,
+      });
+    });
+  },
   handleRemark() {
     const { remark } = this.data;
     wx.ajax({

src/pages/home/index.wxml

@@ -1,7 +1,4 @@
-<view
+<view class="page" style="background: url('{{imageUrl}}home-bg.png?t={{Timestamp}}') no-repeat top center/100% 580rpx;padding-top:{{menuButtonInfo.top}}px;">
-  class="page"
-  style="background: url('{{imageUrl}}home-bg.png?t={{Timestamp}}') no-repeat top center/100% 580rpx;padding-top:{{menuButtonInfo.top}}px;"
->
   <image class="logo" src="{{imageUrl}}home-logo.png?t={{Timestamp}}"></image>
   <image class="page-title" src="{{imageUrl}}home-title.png?t={{Timestamp}}"></image>
   <view class="page-slogan">人人都是家庭健康师，让生活更有质量</view>
@@ -17,9 +14,24 @@
       placeholder="请输入要搜索的内容"
     />
   </view>
-  <swiper class="swiper" indicator-dots indicator-color="rgba(255,255,255,0.62)" indicator-active-color="#FFFFFF">
+  <swiper
-    <swiper-item class="swiper-item">
+    class="swiper"
-      <image class="banner" src="{{imageUrl}}place.png?t={{Timestamp}}"></image>
+    indicator-dots
+    indicator-color="rgba(255,255,255,0.62)"
+    indicator-active-color="#FFFFFF"
+  >
+    <swiper-item
+      class="swiper-item"
+      wx:for="{{bannerList}}"
+      wx:key="configId"
+      bind:tap="handleTap"
+      data-index="{{index}}"
+    >
+      <image
+        class="banner"
+        mode="aspectFill"
+        src="{{item.configImg}}"
+      ></image>
     </swiper-item>
   </swiper>
   <view class="cards">
@@ -35,7 +47,7 @@
       <view class="content">{{item.Intro}}</view>
     </view>
   </view>
-  <view class="remark" wx:if="{{isLogin===1}}">
+  <view class="remark">
     <view class="r-header">留言板</view>
     <textarea
       class="r-content"
@@ -45,6 +57,12 @@
       confirm-type="send"
       bindconfirm="handleRemark"
     ></textarea>
-    <view class="submit" bindconfirm="handleRemark">提交</view>
+    <view
+      class="submit"
+      wx:if="{{feedbackCount>0}}"
+      bindconfirm="handleRemark"
+    >
+      提交
+    </view>
   </view>
 </view>

src/pages/longPicture/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationStyle": "default",
+  "navigationBarTitleText": "预览",
+  "usingComponents": {}
+}

src/pages/longPicture/index.scss

@@ -0,0 +1,3 @@
+.banner {
+  width: 100%;
+}

src/pages/longPicture/index.ts

@@ -0,0 +1,17 @@
+const _app = getApp<IAppOption>();
+
+Page({
+  data: {
+    url: '',
+  },
+  onLoad(options) {
+    const { url } = options;
+    if (url) {
+      this.setData({
+        url: decodeURIComponent(url),
+      });
+    }
+  },
+});
+
+export {};

src/pages/longPicture/index.wxml

@@ -0,0 +1 @@
+<image class="banner" mode="widthFix" src="{{url}}"></image>