微信小程序豆瓣同城活动详情页面设计制作开发教程

本文给大家带来的是微信小程序豆瓣同城活动详情页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/location/event/event.wxml-->
<view class="container">
  <view class="event-poster {{categoryColor}}">
    <image class="poster poster-spacing" src="{{event.image}}" bindtap="handlePosterTap"></image>
  </view>
  <view class="event-header event-session-spacing">
    <text class="event-title">{{event.title}}</text>
    <text class="some-count">{{event.some_count}}</text>
  </view>
  <view class="user-action event-session-spacing">
    <text class="wish" bindtap="handleWish">感兴趣</text>
    <text class="join" bindtap="handleJoin">要参加</text>
  </view>
  <view class="event-action event-session-spacing">
    <view class="event-schedule" bindtap="handleSchedule">
      <image class="action-icon" src="/images/icon/schedule.png"></image>
      <label class="action-label" for="schedule">活动时间
        <text id="schedule" class="action-text">{{event.time_str}}</text>
      </label>
    </view>
    <view class="event-map" bindtap="handleMap">
      <image class="action-icon" src="/images/icon/map.png"></image>
      <label class="action-label" for="map">查看地图
        <text id="map" class="action-text">{{event.address}}</text>
      </label>
    </view>
    <view class="event-ticket" bindtap="handleTicket">
      <image class="action-icon" src="/images/icon/ticket.png"></image>
      <label class="action-label" for="ticket">在线购票
        <text id="ticket" class="action-text">{{event.price_range}}</text>
      </label>
    </view>
    <view wx:if="{{true}}" class="event-phone" bindtap="handlePhone" data-phone="0755-22665577">
      <image class="action-icon" src="/images/icon/phone.png"></image>
      <label class="action-label" for="phone">购票热线
        <text id="phone" class="action-text">0755-22665577</text>
      </label>
    </view>
  </view>
  <view class="content-session content-session-spacing">
    <text class="content-title">活动详情</text>
    <block wx:if="{{event.content}}">
      <view class="content {{extended ? 'content-auto' : 'content-min'}}">{{event.content}}</view>
      <block wx:if="{{!extended}}">
        <view class="content-cover">
          <view class="cover"></view>
          <view class="extend" bindtap="bindExtend">展开活动详情</view>
        </view>
      </block>
    </block>
  </view>
</view>

二、wxss样式文件代码如下：

/* pages/location/event/event.wxss */

.container {
  background: #fff;
}

.event-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;
  white-space: nowrap;
}

.poster-spacing {
  margin: 30rpx 0rpx 30rpx 0rpx;
  padding: 0rpx 30rpx 0rpx 30rpx;
}

.event-session-spacing {
  margin: 20rpx 0rpx 20rpx 0rpx;
  padding: 0rpx 30rpx 0rpx 30rpx;
}

.event-poster .poster {
  width: 350rpx;
  height: 520rpx;
}

.event-header {
  display: flex;
  flex-direction: column;
  margin: 30rpx 0rpx 30rpx 0rpx;
  padding: 0rpx 30rpx 0rpx 30rpx;
  background: #fff;
}

.event-header .event-title {
  font-size: 36rpx;
  color: #4a4a4a;
}

.event-header .some-count {
  font-size: 24rpx;
  color: #9e9e9e;
}

.user-action {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.user-action .join, .user-action .wish {
  color: #de9703;
  border: 1px solid #de9703;
  border-radius: 8rpx;
  text-align: center;
  padding: 10rpx 100rpx 10rpx 100rpx;
}

.event-action {
  display: flex;
  flex-direction: column;
}

.event-schedule, .event-map, .event-ticket, .event-phone {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  padding: 12rpx 20rpx 12rpx 0rpx;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
}

.event-schedule::after, .event-map::after, .event-ticket::after,
.event-phone::after {
  content: " ";
  width: 12rpx;
  height: 12rpx;
  position: absolute;
  top: 50%;
  right: -0rpx;
  margin-top: -10rpx;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  border-width: 1px 1px 0px 0px;
  border-color: #9e9e9e;
  border-style: solid;
}

.event-action .action-icon {
  width: 32rpx;
  height: 32rpx;
  margin: 10rpx;
}

.event-action .action-label {
  display: flex;
  flex: 1;
  font-size: 28rpx;
  color: #4a4a4a;
}

.event-action .action-text {
  flex: 1;
  font-size: 24rpx;
  max-width: 560rpx;
  color: #9e9e9e;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
}

.content-session {
  display: flex;
  flex-direction: column;
}

.content-session .content-title {
  color: #9e9e9e;
  font-size: 24rpx;
  height: 56rpx;
  line-height: 56rpx;
}

.content-session .content {
  color: #4a4a4a;
  font-size: 24rpx;
  width: 100%;
  overflow: hidden;
}

.content-session-spacing {
  margin-top: 30rpx;
  margin-bottom: 60rpx;
  padding: 0rpx 30rpx 0rpx 30rpx;
  box-sizing: border-box;
}

.content-session .content-min {
  width: 100%;
  height: 300rpx;
}

.content-session .content-auto {
  height: auto;
}

.content-session .content-cover {
  display: flex;
  flex-direction: column;
}

.content-session .cover {
  width: 100%;
  height: 100rpx;
  margin-top: -100rpx;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1)); /* Safari 5.1 - 6.0 */
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1)); /* 标准的语法 */
}

.content-session  .extend {
  padding: 40rpx 30rpx 40rpx 30rpx;
  align-self: center;
  font-size: 28rpx;
  font-weight: 500;
  color: #32cb32;
  position: relative;
  padding-right: 20rpx;
}

.content-session .extend::after {
  content: " ";
  width: 12rpx;
  height: 12rpx;
  position: absolute;
  top: 50%;
  margin-top: -8rpx;
  right: -2rpx;
  transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
  border-width: 1px 1px 0px 0px;
  border-color: #32cb32;
  border-style: solid;
}

.music {
  background: #666;
}

.film {
  background: #f66;
}

.party {
  background: #66c;
}

.drama {
  background: #969;
}

.commonweal {
  background: #66c;
}

.salon {
  background: #369;
}

.exhibition {
  background: #c93;
}

.sports {
  background: #933;
}

.course {
  background: #cc9;
}

.music {
  background: #666;
}

三、js页面代码如下：

// pages/location/event/event.js
var app = getApp();
Page({
  data: {
    extended: false,
    categoryColor: "",
    event: {}
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    var id = options.id;
    var url = app.globalData.doubanBase + app.globalData.event_url + id;
    this.getEventDatById(url);
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  /** 根据id获取活动详情 */
  getEventDatById: function (url) {
    console.log("getEventDataById");
    var that = this;

    // 显示加载中
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 10000
    });

    wx.request({
      url: url,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: { 'content-type': 'json' }, // 设置请求的 header
      success: function (res) {
        var data = res.data;
        that.processEventData(data);
      },
      fail: function () {
        // fail
      },
      complete: function () {
        wx.hideToast();
      }
    })
  },
  /** 组装活动详情数据 */
  processEventData: function (event) {
    // 判断是否有该类别的集合
    var category = event.category;
    var some_count = "";
    event.wisher_count && (some_count += event.wisher_count + "感兴趣");
    event.participant_count && (some_count += " / " + event.participant_count + "要参与");

    var contentStr = event.content;
    if (typeof contentStr == 'string') {
      contentStr = contentStr.replace(new RegExp("<br>", "gm"), "n").replace(new RegExp("<img ", "gm"), "<image ").replace(new RegExp('alt="">', "gm"), "></image>").replace(new RegExp("<div ", "gm"), "<view ").replace(new RegExp("</div>", "gm"), "</view>");
    }
    console.log("contentStr: " + contentStr + ", content: " + event.content);

    var temp = {
      id: event.id,
      image: event.image,
      loc_name: event.loc_name,
      owner: event.owner,
      category: event.category,
      title: event.title,
      wisher_count: event.wisher_count,
      some_count: some_count,
      has_ticket: event.has_ticket,
      content: contentStr,
      can_invite: event.can_invite,
      time_str: event.time_str,
      album: event.album,
      participant_count: event.participant_count,
      tags: event.tags,
      image_hlarge: event.image_hlarge,
      begin_time: event.begin_time,
      price_range: event.price_range,
      geo: event.geo,
      image_lmobile: event.image_lmobile,
      loc_id: event.loc_id,
      end_time: event.end_time,
      address: event.address,
    };
    var categoryColor = category;
    this.setData({ "event": temp, "categoryColor": categoryColor });
  },
  /** 查看图片 */
  handlePosterTap: function (event) {
    var posterUrl = this.data.event.image;
    wx.navigateTo({
      url: '/pages/location/event/poster/poster?posterUrl=' + posterUrl
    });
  },
  /** 查看活动时间 */
  handleSchedule: function (event) {
    console.log("handleSchedule");
    var param = "";
    this.data.event.title && (param += "title=" + this.data.event.title);
    this.data.event.begin_time && (param += "&&beginTime=" + this.data.event.begin_time);
    this.data.event.begin_time && (param += "&&endTime=" + this.data.event.end_time);
    wx.navigateTo({
      url: '/pages/location/event/schedule/schedule?' + param
    });
  },
  /** 查看地图 */
  handleMap: function (event) {
    console.log("handleMap");
    var geo = this.data.event.geo;
    if (typeof geo == 'string') {
      var loc = geo.split(" ");
      var latitude = parseFloat(loc[0]);
      var longitude = parseFloat(loc[1]);
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        scale: 28
      });

    }
  },
  /** 在线购票 */
  handleTicket: function (event) {
    console.log("handleTicket");
    wx.showModal({
      title: '在线购票',
      content: '请拨打客服热线',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      }
    });
  },
  /** 拨打电话 */
  handlePhone: function (event) {
    var phone = event.currentTarget.dataset.phone;
    console.log("handlePhone");
    wx.makePhoneCall({
      phoneNumber: phone,
      success: function (res) {
        // success
      }
    });
  },
  /** 用户感兴趣 */
  handleWish: function (event) {
    console.log("handleWish");
    var params = "action=wish";
    this.data.event.title && (params += "&&title=" + this.data.event.title);
    this.data.event.some_count && (params += "&&somecount=" + this.data.event.some_count);
    wx.navigateTo({
      url: '/pages/location/event/action/action?' + params,
    });
  },
  /** 用户要参加 */
  handleJoin: function (event) {
    console.log("handleJoin");
    var params = "action=join";
    this.data.event.title && (params += "&&title=" + this.data.event.title);
    this.data.event.some_count && (params += "&&somecount=" + this.data.event.some_count);
    wx.navigateTo({
      url: '/pages/location/event/action/action?' + params,
    });
  },
  bindExtend: function (event) {
    this.setData({ "extended": true });
  }
})

模板简介：该模板名称为【微信小程序豆瓣同城活动详情页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。