活动列表

font/index.wxss

@@ -17,4 +17,8 @@
 @font-face {
   font-family: "xiaowei";
   src: url("http://www.jichuanglanhai.com/demo/js-yingdi/font/ZCOOL - Xiaowei Logo.otf");
+}
+@font-face {
+  font-family: "AccidentalPresidency";
+  src: url("http://www.jichuanglanhai.com/demo/js-yingdi/font/AccidentalPresidency_0.ttf");
 }

pages/activity/index.js

@@ -1,20 +1,35 @@
 // pages/activity/index.js
+let app = getApp() //映入封装请求
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+      value:{}
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    this.getList()
+  },
+  //详情
+  goInfo(e){
+    // wx.navigateTo({
+    //   url: '/pages/activityinfo/index',
+    // })
   },
+  //列表
+  getList(){
+    app.fetch(`9017/jsonData/huodong.json`, {}, false, 'GET').then(res => {
+        this.setData({
+          value:res.data
+        })
+    })
 
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/activity/index.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarTitleText": "活动"
 }

pages/activity/index.wxml

@@ -1,2 +1,34 @@
 <!--pages/activity/index.wxml-->
-<text>pages/activity/index.wxml</text>
+<view class="huodong-container">
+    <view class="huodong-item" wx:for="{{value.activities}}" wx:key="index" bindtap="goInfo" data-item="{{item}}">
+        <view class="item-left">
+          <image src="{{item.goods_url[0].url}}" mode="aspectFill"></image>
+        </view>
+        <view class="item-right">
+            <view class="item-title">
+              <text>{{item.title}}</text>
+            </view>
+            <view class="item-value-row">
+                <view class="value-row-icon">
+                   <image src="http://www.jichuanglanhai.com/demo/js-yingdi/images/timer.png" mode="aspectFill"></image>
+                </view>
+                <view class="value-row-value">
+                    <text>{{item.start_show_time}}</text>
+                </view>
+            </view>
+            <view class="item-value-row">
+                <view class="value-row-icon">
+                  <image src="http://www.jichuanglanhai.com/demo/js-yingdi/images/dingwei.png" mode="aspectFill"></image>
+                </view>
+                <view class="value-row-value">
+                    {{item.location_address}}
+                </view>
+            </view>
+            <view class="item-price">
+              <text class="price-icon">¥</text>
+              <text class="price-value">199.00</text>
+              <text class="price-lable">起</text>
+            </view>
+        </view>
+    </view>
+</view>

pages/activity/index.wxss

@@ -1 +1,95 @@
-/* pages/activity/index.wxss */
+/* pages/activity/index.wxss */
+page{
+  background-color: #F6F6F6;
+  box-sizing: border-box;
+  padding-bottom:120rpx;
+}
+.huodong-container{
+  box-sizing: border-box;
+  padding:  29rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.huodong-item{
+  background: #FFFFFF;
+  box-shadow: 0px 0px 6rpx 0px rgba(231,231,231,0.73);
+  border-radius: 13rpx;
+  display: flex;
+  box-sizing: border-box;
+  padding: 22rpx;
+  
+}
+.huodong-container>.huodong-item:nth-child(n+2){
+  margin-top: 29rpx;
+}
+.item-left{
+  width: 197rpx;
+  height: 192rpx;
+  border-radius: 13rpx;
+}
+.item-left>image{
+  height: 100%;
+  width: 100%;
+  display: block;
+  border-radius: 13rpx;
+}
+.item-right{
+  
+  flex: 1;
+  box-sizing: border-box;
+  padding-left: 24rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content:space-around;
+}
+.item-title{
+  font-weight: 500;
+  color: #273329;
+  font-family: "Alibaba-PuHuiTi-Medium.otf";
+}
+.item-value-row{
+  display: flex;
+  align-items: center;
+}
+.value-row-icon{
+  height: 22rpx;
+  width: 22rpx;
+}
+.value-row-icon image{
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.value-row-value{
+  width: 400rpx;
+  box-sizing: border-box;
+  padding-left: 18rpx;
+  font-size: 26rpx;
+  font-family: "Alibaba-PuHuiTi-Regular.otf";
+  font-weight: 400;
+  color: #9C9D9D;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+.item-price{
+  /* display: flex;
+  align-items:flex-end; */
+}
+.item-price>text{
+  display: inline-block;
+}
+.price-icon,.price-lable{
+  font-size: 22rpx;
+  font-family: "Alibaba-PuHuiTi-Regular.otf";
+  font-weight: 400;
+  color: #306E3D;
+}
+.price-value{
+  font-size: 46rpx;
+  font-family: 'xiaowei';
+  font-weight: 400;
+  color: #306E3D;
+  margin: 0 7rpx;
+}

project.private.config.json

@@ -36,6 +36,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/activity/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }