活动详情页面搭建

app.js

@@ -2,7 +2,8 @@
 App({
   gw: {
     hostUrl: 'https://www.1haojiazheng.cn',
-    mapUrl:'https://api.map.baidu.com'
+    mapUrl:'https://api.map.baidu.com',
+    systemInfo : null,//系统信息
   },
   onLaunch: function () {
     // 展示本地存储能力
@@ -18,8 +19,7 @@ App({
         
       }
     })
-    
-
+    this.gw.systemInfo = wx.getSystemInfoSync();
   },
   getSessionKey: function (code) {
     var that = this;

app.json

@@ -1,8 +1,10 @@
 {
   "pages": [
-    "pages/jz/jz",
     "pages/index/index",
+    "pages/mall/mall",
+    "pages/jz/jz",
     "pages/logs/logs",
+    "pages/activity_detail/activity_detail",
     "pages/detail/detail",
     "pages/create_order/create_order",
     "pages/mcenter/mcenter",
@@ -15,13 +17,12 @@
     "pages/serviceDesc/serviceDesc",
     "pages/two_code/two_code",
     "pages/out/out",
-    "pages/agreement/agreement",
-    "pages/mall/mall"
+    "pages/agreement/agreement"
   ],
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#21BE8D",
-    "navigationBarTitleText": "白飞飞",
+    "navigationBarTitleText": "一号家政",
     "navigationBarTextStyle": "white"
   },
   "tabBar": {
@@ -36,7 +37,7 @@
         "selectedIconPath": "images/index_green.png"
       },
       {
-        "pagePath": "pages/jz/jz",
+        "pagePath": "pages/mall/mall",
         "text": "商城",
         "iconPath": "images/order_gray.png",
         "selectedIconPath": "images/order_green.png"

pages/activity_detail/activity_detail.js

@@ -0,0 +1,148 @@
+//获取应用实例
+const app = getApp()
+
+var WxParse = require('../../wxParse/wxParse.js');//主要为了能够显示获取的html代码
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    bottomBGColor: '#21BE8D',//
+    buttomText: '我要开团',
+    rule_image_height:0,//活动规则图片高度
+    detail_image_height: 0,//活动详情图片高度
+    bannerImage: '/images/activity_banner.png',
+    ruleImage: '/images/banner1.png',
+    countDownDay: 0,
+    countDownHour: 0,
+    countDownMinute: 0,
+    countDownSecond: 0, 
+    memberList:[],
+  },
+
+  /**
+   *活动倒计时方法
+   */
+  countActivityTime: function (timeStamp){
+    var totalSecond = timeStamp - Date.parse(new Date()) / 1000;
+
+    var interval = setInterval(function () {
+      // 秒数  
+      var second = totalSecond;
+
+      // 天数位  
+      var day = Math.floor(second / 3600 / 24);
+      var dayStr = day.toString();
+      if (dayStr.length == 1) dayStr = '0' + dayStr;
+
+      // 小时位  
+      var hr = Math.floor((second - day * 3600 * 24) / 3600);
+      var hrStr = hr.toString();
+      if (hrStr.length == 1) hrStr = '0' + hrStr;
+
+      // 分钟位  
+      var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
+      var minStr = min.toString();
+      if (minStr.length == 1) minStr = '0' + minStr;
+
+      // 秒位  
+      var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
+      var secStr = sec.toString();
+      if (secStr.length == 1) secStr = '0' + secStr;
+
+      this.setData({
+        countDownDay: dayStr,
+        countDownHour: hrStr,
+        countDownMinute: minStr,
+        countDownSecond: secStr,
+      });
+      totalSecond--;
+      if (totalSecond < 0) {
+        clearInterval(interval);
+        wx.showToast({
+          title: '活动已结束',
+        });
+        this.setData({
+          countDownDay: '00',
+          countDownHour: '00',
+          countDownMinute: '00',
+          countDownSecond: '00',
+        });
+      }
+    }.bind(this), 1000);  
+  },
+  // 图片加载
+  ruleImageLoad: function (image) {
+    var app = getApp();
+    console.log(image)
+    var imageHeight = app.gw.systemInfo.windowWidth / image.detail.width * image.detail.height;
+    this.setData({
+      rule_image_height: imageHeight
+    })
+  },
+  detailImageLoad: function (image) {
+    var app = getApp();
+    console.log(image)
+    var imageHeight = app.gw.systemInfo.windowWidth / image.detail.width * image.detail.height;
+    this.setData({
+      detail_image_height: imageHeight
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    this.countActivityTime(1527609600);
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    
+  }
+})

pages/activity_detail/activity_detail.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "活动详情"
+}

pages/activity_detail/activity_detail.wxml

@@ -0,0 +1,66 @@
+<import src="../../wxParse/wxParse.wxml" />
+<view class="content">
+  <scroll-view scroll-x="{{false}}" scroll-y="{{true}}">
+    <image src="{{bannerImage}}" class="slide-image" mode='widthFix' />
+    <view class='activity_info'>
+      <text class='title'>家政节大作战</text>
+      <view class="row">
+        <text class="num">20人团</text>
+        <text class="limit_type">新老用户均可参团</text>
+      </view>
+      <view class="row" style='padding-top: 10rpx;'>
+        <text class="sucess_tip">拼团成功人均获得一张</text>
+        <text class="sucess_card">高端保洁铂金月卡</text>
+      </view>
+      <view class="price_row">
+        <view style='float: left;'>
+          <text class="common666">原价：</text>
+          <text class="common666">200元</text>
+        </view>
+        <view style='float: left;'>
+          <text class="common666">团长价：</text>
+          <text class="commonRed">499</text>
+        </view>
+        <view style='float: left;'>
+          <text class="common666">团员价：</text>
+          <text class="commonRed">499</text>
+        </view>
+      </view>
+    </view>
+    <view class='grounp_info'>
+      <view class='status'>
+        <text class="tag">拼团中</text>
+        <view class='remark'>还差
+          <text class='num'>4</text>人拼团成功
+        </view>
+        <view class="countDownTimeView">
+          <text class="countDownTimeText">{{countDownDay}}天</text>
+          <text class="countDownTimeText">{{countDownHour}}时</text>
+          <text class="countDownTimeText">{{countDownMinute}}分</text>
+          <text class="countDownTimeText">{{countDownSecond}}秒</text>
+        </view>
+      </view>
+      <view class='list'>
+        <scroll-view scroll-x="{{true}}" scroll-y="{{false}}" class='list'>
+          <view class='view'>
+            <view wx:for-items="{{memberList}}" class="memberList">
+              <image class='headImage' src='{{item.headUrl}}'></image>
+              <text class="{{item.memberType == 0 ? 'markBlock' : 'markNone'}}">团长</text>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+    <image src="{{ruleImage}}" bindload="ruleImageLoad" style="width:100%;margin: 5rpx auto;height:{{rule_image_height}}px"></image>
+    <view class="global_focus intro-box" style='margin: 5rpx auto;'>
+      <template is="wxParse" data="{{wxParseData:activityDetail.nodes}}" />
+    </view>
+  </scroll-view>
+  <view class='bottom_view'>
+    <view class='one_content' id='one_button' style='background-color:{{bottomBGColor}};'>{{buttomText}}</view>
+    <view class='two_content' id='two_content'>
+      <view class='left'>￥499</view>
+      <view class='right'>{{buttomText}}</view>
+    </view>
+  </view>
+</view>

pages/activity_detail/activity_detail.wxss

@@ -0,0 +1,224 @@
+.content{
+    width: 100%;
+    height: 100%;
+}
+image{
+  width: 100%;
+  height: 100%;
+}
+.activity_info{
+  width: 100%;
+  background: white;
+  height: 220rpx;
+  margin: -10rpx auto;
+}
+.activity_info .title{
+  width: 80%;
+  padding-top: 29rpx;
+  padding-left: 36rpx;
+  font-weight: bold;
+  font-size: 36rpx;
+}
+.activity_info .row{
+  width: 100%;
+  height: 40rpx;
+  float: left;
+}
+.activity_info .row .num{
+  padding: 5rpx 20rpx;
+  font-size: 20rpx;
+  width:150px;
+  height:36px;
+  background:rgba(255,160,67,1);
+  border-radius:18px;
+  margin-left: 26rpx;
+  text-align: center;
+  color: white;
+}
+.activity_info .row .limit_type{
+  padding-left: 20rpx;
+  height: 100%;
+  font-size: 20rpx;
+  color: #F44053;
+}
+
+.activity_info .row .sucess_tip{
+  margin-left: 26rpx;
+  color: #666666;
+  font-size: 20rpx;
+}
+
+.activity_info .row .sucess_card{
+  margin-left: 13rpx;
+  color: #333333;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+
+.activity_info .price_row{
+        height: 40px;
+        position: absolute;
+        left: 13px;
+        right: 20px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        padding-top: 45px;
+  }
+
+.common666{
+  color: #999;
+  font-size: 24rpx; 
+  
+}
+
+.commonRed{
+  color: #F44053;
+  font-size: 32rpx; 
+}
+
+.grounp_info{
+  width: 100%;
+  background: white;
+  height: 220rpx;
+  margin: 30rpx auto;
+}
+
+.grounp_info .status{
+   width: 100%;
+   height: 80rpx;
+   margin: 10rpx auto;
+}
+
+.grounp_info .status .tag{
+  padding: 5rpx 20rpx;
+  font-size: 20rpx;
+  width:110px;
+  height:36px;
+  border-radius:18px;
+  border-width: 2rpx;
+  border-style: solid;
+  border-color: #F8B551;
+  margin-left: 26rpx;
+  color: #F8B551;
+}
+
+.grounp_info .status .remark{
+   width: 300rpx;
+   height: 30rpx;
+   margin: -45rpx 150rpx auto;
+   color: #666666;
+   font-size: 26rpx;
+}
+
+.grounp_info .status .remark .num{
+  color: #F44053;
+  font-size: 26rpx;
+}
+
+.grounp_info .status  .countDownTimeView{
+   width: 300rpx;
+   height: 20rpx;
+   margin: -15rpx 150rpx auto;
+}
+
+.grounp_info .status .countDownTimeView .countDownTimeText{
+   color: #999999;
+   font-size: 20rpx;
+}
+
+.grounp_info .list{
+   width: 98%;
+   height: 120rpx;
+   margin: -10rpx auto;
+   margin-left: 13rpx;
+}
+
+.grounp_info .list .view{
+   width: 100%;
+   display: flex;
+   flex-direction: row; 
+}
+
+.grounp_info .list .view .memberList{
+  height: 100rpx;
+  width: 100rpx;
+  display: inline-block;
+  margin: 10rpx 10rpx auto;
+  position: relative;
+  
+}
+.grounp_info .list .view .memberList .headImage{
+   height: 86rpx;
+   width: 86rpx;
+   border-radius:43rpx;
+   margin: 7rpx auto;
+}
+
+.grounp_info .list .view .memberList .markBlock{
+  display: block;
+  padding: 1rpx 4rpx;
+  font-size: 16rpx;
+  width:20px;
+  background:#21BE8D;
+  border-radius:10px;
+  margin-left: 26rpx;
+  text-align: center;
+  color: white;
+  position: absolute;
+  top: 3px;
+  right: -1px;
+}
+
+.grounp_info .list .view .memberList .markNone{
+  display: none;
+}
+
+.bottom_view{
+  width:100%;
+  height: 50px;
+  position:fixed; 
+  bottom:0; 
+}
+
+.bottom_view .one_content{
+   width:100%;
+   line-height: 50px;
+   color: white;
+   text-align: center;
+   font-size: 16px;
+   font-weight: bold;
+}
+
+
+.bottom_view .two_content{
+  width:100%;
+  line-height: 50px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.bottom_view .two_content .left{
+  width: 35%;
+  line-height: 50px;
+  font-size: 16px;
+  color: #F44054;
+  font-weight: bold;
+  margin-left: 0px;
+  background-color: white;
+  text-align: center;
+}
+.bottom_view .two_content .right{
+  width: 65%;
+  line-height: 50px;
+  font-size: 16px;
+  color: white;
+  font-weight: bold;
+  margin-right: 0px;
+  background:#F36619;
+  text-align: center;
+}

pages/index/index.js

@@ -0,0 +1,195 @@
+//获取应用实例
+const app = getApp()
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    indicatorDots: true,
+    autoplay: true,
+    interval: 5000,
+    duration: 1000,
+    imgUrls: [],
+    // bannerImage: '/images/activity_banner.png',
+    menu_list:[
+      { name: '拼团', disabled:false, className:'green_button'},
+      { name: '秒杀', disabled: true, className: 'gray_button' },
+      { name: '夺宝', disabled: true, className: 'gray_button' }
+    ],
+    nowDate: new Date().getTime(),
+    cityId: 440100000,
+    addrArray: { id: [440100000, 430426000], name: ['广州', '祁东'] },
+    addrIndex: 0,
+    activityList: [],
+    pageNum: 1,
+    pageSize: 20,
+    hasMoreData: true,
+    img1: '/images/activity_banner.png',
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    let that = this;
+    wx.request({
+      url: app.gw.hostUrl + '/mall/wxa/activity/banner',
+      method: 'get',
+      data: {
+        merchantNo: 2
+      },
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      success: function (res){
+        var data = res.data;
+        var status = data.code;
+        if (status == 0) {
+          var data = res.data;
+          var status = data.code;
+          console.log(res);
+          that.setData({
+            imgUrls: data.response
+          })
+        } else {
+          wx.showToast({
+            title: data.msg,
+            icon: 'none',
+            duration: 3000
+          });
+          return;
+        }
+      },
+      fail: function (res) {
+        wx.showToast({
+          title: '加载数据失败',
+        });
+      },
+    }),
+   this.getActivityList();
+  },
+
+  getActivityList: function(){
+    let that = this;
+    wx.showNavigationBarLoading() //在标题栏中显示加载
+    wx.request({
+      url: app.gw.hostUrl + '/mall/wxa/activity/list',
+      method: 'get',
+      data: {
+        pageNum: that.data.pageNum,
+        pageSize: that.data.pageSize
+      },
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      success: function (res) {
+        var data = res.data;
+        var status = data.code;
+        console.log(res);
+        var activitylistTem = that.data.activityList;
+        if (status == 0) {
+          if (that.data.pageNum == 1) {
+            //刷新清空数据
+            activitylistTem = [];
+          }
+          var list = data.response;
+          if (list.length < that.data.pageSize) {
+            //最后一页数据添加
+            that.setData({
+              activityList: activitylistTem.concat(list),
+              hasMoreData: false
+            });
+          } else {
+            that.setData({
+              activityList: activitylistTem.concat(list),
+              hasMoreData: true,
+              pageNum: that.data.pageNum + 1
+            });
+          }
+        } else {
+          wx.showToast({
+            title: data.msg,
+            icon: 'none',
+            duration: 3000
+          });
+          return;
+        }
+      },
+      fail:function(res) {
+        wx.showToast({
+          title: '加载数据失败',
+        });
+      },
+      complete: function (res) {
+        // complete
+        wx.hideNavigationBarLoading() //完成停止加载
+        wx.stopPullDownRefresh() //停止下拉刷新
+      },
+
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    this.data.pageNum = 1;
+    this.getActivityList();
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    if (this.data.hasMoreData) {
+      this.getActivityList();
+    } else {
+      wx.showToast({
+        title: '没有更多数据',
+      })
+    }
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    
+  },
+  getUserInfo: function (e) {
+    console.log(e)
+    app.globalData.userInfo = e.detail.userInfo
+    this.setData({
+      userInfo: e.detail.userInfo,
+      hasUserInfo: true
+    })
+  }
+})

pages/index/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "活动中心",
+  "enablePullDownRefresh": true,
+  "backgroundColor": "#26AE76"
+}

pages/index/index.wxml

@@ -0,0 +1,29 @@
+<!--pages/index/index.wxml-->
+<view class="content">
+  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+    <block wx:for="{{imgUrls}}">
+      <swiper-item>
+        <image src="{{item.imgUrl}}" class="slide-image" mode='widthFill' />
+      </swiper-item>
+    </block>
+  </swiper>
+  <view class='menu'>
+    <view class='list'>
+      <view wx:for-items="{{menu_list}}" wx:if="{{index < 4}}" class="view">
+        <button class='{{item.className}}'>{{item.name}}</button>
+      </view>
+    </view>
+  </view>
+   <view wx:for-items="{{activityList}}">
+    <view class='activity_list_view' bindtap='loading' data-item='{{item.goodsNo}}'>
+      <image src='{{item.showUrl}}' class='image'></image>
+      <!-- <text class="num">20人团</text> -->
+      <text class="p1">{{item.activityName}}</text>
+      <view class="p3">
+        <view class='p2'>¥</view>{{item.participantPrice / 100}}
+        <text class="del">原价:{{item.originalPrice / 100}}</text>
+      </view>
+      <button class='openBtn' form-type="submit">去开团</button>
+    </view>
+  </view> 
+</view>

pages/index/index.wxss

@@ -0,0 +1,110 @@
+.content{
+    width: 100%;
+    height: 100%;
+}
+image{
+  width: 100%;
+  height: 100%;
+}
+
+.menu{
+  width: 100%;
+  background: white;
+  height: 90rpx;
+  margin: -10rpx auto;
+}
+
+.menu .list{
+  width: 100%;
+  height: 100%;
+}
+
+.menu .list .view{
+  height: 46rpx;
+  width: 150rpx;
+  float: left;
+  margin: 22rpx auto;
+}
+.menu .list .view .green_button{
+  line-height: 46rpx; 
+  width: 130rpx;
+  background: #21BE8D;
+  color: white;
+  font-size: 26rpx;
+}
+
+.menu .list .view .gray_button{
+  line-height: 46rpx; 
+  width: 130rpx;
+  background: #E5E5E5;
+  color: gray;
+  font-size: 26rpx;
+}
+
+/*商品列表*/
+.activity_list_view{
+  margin: 30rpx 35rpx 11rpx 35rpx;
+  background: white;
+  height: 623rpx;
+  border-radius: 10rpx;
+  text-align:center;
+}
+.activity_list_view .image{
+  height: 350rpx;
+  border-radius: 10rpx 10rpx 0 0;
+}
+
+.activity_list_view .num{
+  padding: 5rpx 20rpx;
+  font-size: 20rpx;
+  width:150px;
+  height:36px;
+  background:rgba(255,160,67,1);
+  border-radius: 0rpx 10rpx 0 10rpx;
+  text-align: center;
+  color: white;
+  position: relative;
+  margin-right: 10px;
+  margin-top: 0px;
+}
+.activity_list_view .p1{
+  font-size: 40rpx;
+  color: #191919;
+  position: relative;
+  width: 90%;
+  font-weight: bold;
+}
+.activity_list_view .p2{
+  font-size: 32rpx;
+  display: inline-block;
+}
+.activity_list_view .p3{
+    color: #ff4040;
+    font-size: 40rpx;
+    font-family: '微软雅黑 Light';
+    font-weight: bold;
+    margin: 40rpx 0;
+    width: 100%;
+    text-align:center;
+}
+
+.activity_list_view .del{
+    color: #c0c0c0;
+    font-size: 28rpx;
+    margin-left: 20rpx;
+    position:absolute;
+    margin-top: 10rpx;
+    font-family: "微软雅黑 Light";
+    font-weight: bold;
+    text-decoration: line-through;
+}
+
+.openBtn{
+  width: 60%;
+  margin: -40rpx auto;
+  text-align: center;
+  color: #fff;
+  background: #F44053;
+  border-radius:20px; 
+  line-height: 80rpx; 
+}

pages/jz/jz.wxss

@@ -23,7 +23,7 @@ image{
   line-height: 80rpx;
 }
 .top-left,.top-right{
-  width: 40%;
+  width: 40%;v
   display: inline-block;
 }
 .addressBox{