详情页完成

app.wxss

@@ -2,4 +2,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+.text-overflow-line {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
 }

components/navBar/navBar.js

@@ -1,4 +1,5 @@
 // pages/navBar/navBar.js
+const app = getApp();
 Component({
     /**
      * 组件的属性列表
@@ -65,7 +66,9 @@ Component({
             that.setData({
                 status: statusHeight,
                 navHeight: navHeight
-            })
+            });
+            app.globalData.navHeight = statusHeight + navHeight;
+
         },
         setStyle: function() {
             var that  = this

components/navBar/navBar.wxss

@@ -1,8 +1,9 @@
 .nav{
-    position: absolute;
+    position: fixed;
     top:0;
     left:0;
     right:0;
+    z-index: 100;
 }
 .navbar{
     position: relative

pages/add/index.js

@@ -11,15 +11,19 @@ Page({
     form: {
       key1: '',
       key2: '',
-      key3: ''
+      key3: '',
+      key4: '',
+      key5: ''
     },
     isShowForm: {
       key1: false,
-      key2: false
+      key2: false,
+      key5: false
     },
     inputFocus: {
       key1: false,
-      key2: false
+      key2: false,
+      key5: false
     },
 
 

pages/add/index.wxml

@@ -3,66 +3,110 @@
 	<navBar title-text="CoffeeTalk" back-icon="/img/nav/back@3x.png" background="none" bindback="back" />
 	<view class="title-img"></view>
 	<view class="list">
-		<!-- 活动名称 -->
-		<view class="label" catchtap="showInput" data-key='key1'>
-			<!-- <view class='icon'></view> -->
-			<view class="input" wx:if='{{!isShowForm.key1}}'>
-				<view class="input-des"></view>
-				<input placeholder="输入活动名称" focus="{{inputFocus.key1}}" placeholder-class="text-888" value='{{form.key1}}' bindinput="inputVal" data-key='key1' bindblur="inputBlur"></input>
+		<scroll-view style="height: 100%;" scroll-y>
+			<view class="black-112"></view>
+			<!-- 活动名称 -->
+			<view class="label" catchtap="showInput" data-key='key1'>
+				<!-- <view class='icon'></view> -->
+				<view class="input" wx:if='{{!isShowForm.key1}}'>
+					<view class="input-des"></view>
+					<input placeholder="输入活动名称" focus="{{inputFocus.key1}}" placeholder-class="text-888" value='{{form.key1}}' bindinput="inputVal" data-key='key1' bindblur="inputBlur"></input>
+				</view>
+				<view class="input-detail" wx:else>
+					<view class='input-title'>活动名称</view>
+					<view class="input-section text-overflow">{{form.key1}}</view>
+				</view>
 			</view>
-			<view class="input-detail" wx:else>
-				<view class='input-title'>活动名称</view>
-				<view class="input-section text-overflow">{{form.key1}}</view>
+			<!-- 活动地点 -->
+			<view class="label" catchtap="showInput" data-key='key2'>
+				<view class='icon'></view>
+				<view class="input" wx:if='{{!isShowForm.key2}}'>
+					<view class="input-des"></view>
+					<input placeholder="输入活动名称" focus="{{inputFocus.key2}}" placeholder-class="text-888" value='{{form.key2}}' bindinput="inputVal" data-key='key2' bindblur="inputBlur"></input>
+				</view>
+				<view class="input-detail" wx:else>
+					<view class='input-title'>活动地点</view>
+					<view class="input-section text-overflow">{{form.key2}}</view>
+				</view>
 			</view>
-		</view>
-		<!-- 活动地点 -->
-		<view class="label" catchtap="showInput" data-key='key2'>
-			<view class='icon'></view>
-			<view class="input" wx:if='{{!isShowForm.key2}}'>
-				<view class="input-des"></view>
-				<input placeholder="输入活动名称" focus="{{inputFocus.key2}}" placeholder-class="text-888" value='{{form.key2}}' bindinput="inputVal" data-key='key2' bindblur="inputBlur"></input>
-			</view>
-			<view class="input-detail" wx:else>
-				<view class='input-title'>活动地点</view>
-				<view class="input-section text-overflow">{{form.key2}}</view>
-			</view>
-		</view>
-		<!-- 选择活动时间 -->
-		<view class="label">
-			<view class='icon'></view>
-			<view class="input" wx:if='{{!form.key3}}'>
-				<view class="input-des"></view>
-				<input disabled placeholder="输入活动时间" ></input>
-			</view>
-			<view class="input-detail" wx:else>
-				<view class='input-title'>活动时间</view>
-				<view class="input-section text-overflow">{{form.key3}}</view>
-			</view>
-			<picker class="picker-box" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" data-key='key3' bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
+			<!-- 选择活动时间 -->
+			<view class="label">
+				<view class='icon'></view>
+				<view class="input" wx:if='{{!form.key3}}'>
+					<view class="input-des"></view>
+					<input disabled placeholder="输入活动时间"></input>
+				</view>
+				<view class="input-detail" wx:else>
+					<view class='input-title'>活动时间</view>
+					<view class="input-section text-overflow">{{form.key3}}</view>
+				</view>
+				<picker class="picker-box" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" data-key='key3' bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
 					<view class="tui-picker-detail">
 						<!-- 选择活动时间 -->
 						<!-- {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}} -->
 					</view>
 				</picker>
-		</view>
-		<!-- 选择报名截止时间 -->
-		<view class="label">
-			<view class='icon'></view>
-			<view class="input" wx:if='{{!form.key4}}'>
-				<view class="input-des"></view>
-				<input disabled placeholder="选择报名截止时间" ></input>
-			</view>
-			<view class="input-detail" wx:else>
-				<view class='input-title'>报名截止时间</view>
-				<view class="input-section text-overflow">{{form.key4}}</view>
 			</view>
-			<picker class="picker-box" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" data-key='key4' bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
+			<!-- 选择报名截止时间 -->
+			<view class="label">
+				<view class='icon'></view>
+				<view class="input" wx:if='{{!form.key4}}'>
+					<view class="input-des"></view>
+					<input disabled placeholder="选择报名截止时间"></input>
+				</view>
+				<view class="input-detail" wx:else>
+					<view class='input-title'>报名截止时间</view>
+					<view class="input-section text-overflow">{{form.key4}}</view>
+				</view>
+				<picker class="picker-box" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" data-key='key4' bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
 					<view class="tui-picker-detail">
 						<!-- 选择活动时间 -->
 						<!-- {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}} -->
 					</view>
 				</picker>
-		</view>
+			</view>
+			<!-- 输入活动描述 -->
+			<view class="label label-textarea" catchtap="showInput" data-key='key5'>
+				<!-- <view class='icon'></view> -->
+				<view class="input" wx:if='{{!isShowForm.key5}}'>
+					<view class="input-des"></view>
+					<textarea auto-height placeholder="输入活动描述" focus="{{inputFocus.key5}}" placeholder-class="text-888" maxlength='-1' value='{{form.key5}}' bindinput="inputVal" data-key='key5' bindblur="inputBlur"></textarea>
+				</view>
+				<view class="input-detail textarea-detail" wx:else>
+					<view class='input-title'>活动描述</view>
+					<view class="input-section text-overflow-line">{{form.key5}}</view>
+					<!-- <image class="textarea-dowm-img" src="../../img/down.png"></image> -->
+				</view>
+			</view>
+			<!-- 添加图片 -->
+			<view class="pic-list">
+				<view class="pic-item">
+					<image class="pic" src="../../img/plus.png"></image>
+					<view class="pic-close">
+						<image src="../../img/close.png"></image>
+					</view>
+				</view>
+				<view class="pic-item">
+					<image class="pic" src="../../img/plus.png"></image>
+					<view class="pic-close">
+						<image src="../../img/close.png"></image>
+					</view>
+				</view>
+				<view class="pic-item">
+					<image class="pic" src="../../img/plus.png"></image>
+					<view class="pic-close">
+						<image src="../../img/close.png"></image>
+					</view>
+				</view>
+				<view class="pic-add">
+					<image src="../../img/plus.png"></image>
+					<text>添加图片</text>
+				</view>
 
+			</view>
+			<!-- 提交 -->
+			<view class="btn">发起活动</view>
+			<view class="black-100"></view>
+		</scroll-view>
 	</view>
 </view>

pages/add/index.wxss

@@ -18,12 +18,13 @@ page {
 
 .list {
   position: absolute;
-  top: 292rpx;
+  top: 176rpx;
   left: 50rpx;
   right: 50rpx;
   bottom: 0;
 }
-.label{
+
+.label {
   position: relative;
   display: flex;
   align-items: center;
@@ -33,43 +34,153 @@ page {
   background-color: #fff;
   border-radius: 16rpx;
   box-sizing: border-box;
-  padding:0 40rpx;
+  padding: 0 40rpx;
   margin-bottom: 40rpx;
 }
-.label .icon{
+
+.label .icon {
   width: 48rpx;
   height: 48rpx;
   margin-right: 40rpx;
 }
-.label .input{
-  flex:1;
-  color:#333;
-  font-size:32rpx;
+
+.label .input {
+  flex: 1;
+  color: #333;
+  font-size: 32rpx;
 }
-.text-888{
-  color:#888;
+
+.text-888 {
+  color: #888;
 }
-.input-detail{
+
+.input-detail {
   flex: 1;
   overflow: hidden;
 }
-.input-title{
+
+.input-title {
   font-size: 24rpx;
-  color:#636363;
+  color: #636363;
   padding-bottom: 6rpx;
 }
-.input-section{
+
+.input-section {
   font-size: 31rpx;
-  color:#313131;
+  color: #313131;
 }
-.label .picker-box{
+
+.label .picker-box {
   position: absolute;
-  top:0;
-  left:0;
-  bottom:0;
-  right:0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
-.label .picker-box .tui-picker-detail{
+
+.label .picker-box .tui-picker-detail {
   width: 100%;
   height: 120rpx;
 }
+
+.input textarea {
+  width: 100%;
+}
+
+.label-textarea {
+  padding: 20rpx 40rpx;
+  box-sizing: border-box;
+  height: auto;
+  min-height: 120rpx;
+}
+
+.textarea-detail {
+  position: relative;
+  /* padding-right: 90rpx; */
+}
+
+/* .textarea-dowm-img{
+  position: absolute;
+  right: 16rpx;
+  top: 28rpx;
+  width: 40rpx;
+  height: 40rpx;
+} */
+.pic-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100rpx;
+  height: 100rpx;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 16rpx;
+  font-size: 20rpx;
+  color: #676767;
+}
+
+.pic-add image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.pic-item {
+  position: relative;
+  width: 140rpx;
+  height: 100rpx;
+  background: rgba(216, 216, 216, 1);
+  border-radius: 10rpx;
+  margin-right: 40rpx;
+  margin-bottom: 20rpx;
+}
+
+.pic-item image.pic {
+  width: 100%;
+  height: 100%;
+}
+
+.pic-item .pic-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 26rpx;
+  height: 26rpx;
+  top: -12rpx;
+  right: -12rpx;
+  background: rgba(6, 5, 5, 0.5);
+  border-radius: 50%;
+}
+
+.pic-close image {
+  width: 16rpx;
+  height: 16rpx;
+}
+
+.pic-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 30rpx;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: #fff;
+  width: 650rpx;
+  height: 100rpx;
+  background: linear-gradient(135deg, rgba(143, 103, 232, 1) 0%, rgba(99, 87, 204, 1) 100%);
+  border-radius: 50rpx;
+}
+.black-100{
+  height: 100rpx;
+  overflow: hidden;
+  clear: both;
+}
+.black-112{
+  height: 112rpx;
+  overflow: hidden;
+  clear: both;
+}

pages/detail/index.js

@@ -1,18 +1,58 @@
 // pages/detail/index.js
+const app = getApp();
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    navHeight: '',
+
+    //swiper
+    background: ['bg1', 'bg2', 'bg3'],
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500,
+    current:0,
+    //下啦
+    isScroll: false,
+    //地图
+    markers: [{
+      // iconPath: "/resources/others.png",
+      // id: 0,
+      latitude: 23.099994,
+      longitude: 113.324520,
+      // width: 50,
+      // height: 50
+    }],
+  },
+  change(e){
+    console.log(e)
+    this.setData({
+      current: e.detail.current
+    })
+  },
+  scroll(e){
+    if(e.detail.scrollTop > 1 && this.data.isScroll == false){
+      this.setData({
+        isScroll: true
+      })
+    }else if(e.detail.scrollTop < 1 && this.data.isScroll == true){
+      this.setData({
+        isScroll: false
+      })
+    }
   },
 
+
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    this.setData({
+      navHeight: app.globalData.navHeight
+    })
   },
 
   /**

pages/detail/index.wxml

@@ -1,2 +1,79 @@
 <!--pages/detail/index.wxml-->
-<text>pages/detail/index.wxml</text>
+<view class="container">
+	<navBar title-text="CoffeeTalk" back-icon="/img/nav/back@3x.png" background="none" bindback="back" />
+	<view class="container-bg {{background[current]}}" style="height: {{navHeight}}px;"></view>
+	<view class="swiper" style="height: {{isScroll?'644':'862'}}rpx;">
+		<swiper bindchange="change" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" indicator-color='rgba(255,255,255,.3)' indicator-active-color='#fff' style="height: 100%;">
+			<block wx:for="{{background}}" wx:key="*this">
+				<swiper-item>
+					<view class="swiper-item {{item}}"></view>
+				</swiper-item>
+			</block>
+		</swiper>
+		<!--重置小圆点的样式  -->
+		<view class="dots" style='bottom:{{isScroll?"150":"12"}}rpx'>
+			<block wx:for="{{background}}" wx:for-index="index" wx:key="index">
+				<view class="dot {{index == current?'active':''}}"></view>
+			</block>
+		</view>
+		<!--重置小圆点的样式 end -->
+	</view>
+	<view class="section {{isScroll?'section-scroll':''}}">
+		<scroll-view style="height:100%;" scroll-y bindscroll="scroll">
+			<view class="pd">
+				<view class="black-70"></view>
+				<view class="title">
+					<view class="title-l">Coffee Talk</view>
+					<view class="title-r">
+						<text>免费</text>
+						<text>/人</text>
+					</view>
+				</view>
+				<view class="label">
+					<view class="label-icon"></view>
+					<view class="label-text text-overflow">上海长宁区愚园路1107号1号楼509 </view>
+				</view>
+				<view class="label">
+					<view class="label-icon"></view>
+					<view class="label-text text-overflow time-text">
+						2020-07-22 14:00
+						<text>(最多2456 人)</text>
+					</view>
+				</view>
+        <view class="label">
+					<view class="label-icon"></view>
+					<view class="label-text text-overflow time-text">
+						报名截止：2020-07-22 13:00
+					</view>
+				</view>
+        <view class="activity">
+          <view class="activity-title">活动介绍</view>
+          <view class="activity-content">
+            <view>CoffeTalk是由一群热爱咖啡的人创建的活动，每期邀请1位嘉宾，分享1个主题。大家共同进行思想的碰撞，做些有意义的事。</view>
+            <view>本期活动嘉宾：</view>
+            <view>这里是人物介绍和描述。这里是人物介绍和描述。这里是人物介绍和描述。这里是人物介绍和描述。这里是人物介绍和描述。这里是人物介绍和描述。</view>
+            <view>本期活动主题：</view>
+            <view>这里是活动主题介绍和描述。这里是活动主题介绍和描述。这里是活动主题介绍和描述。这里是活动主题介绍和描述。这里是活动主题介绍和描述。这里是活动主题介绍和描述。</view>
+          </view>
+        </view>
+        <view class="sign-up">
+          <view class="sign-up-title">
+            已报名 <text>（22人）</text>
+          </view>
+          <view class="sign-up-list">
+            <view class="sign-up-item"></view>
+          </view>
+        </view>
+        <view class="traffic">
+          <view class="traffic-title"></view>
+          <view class="traffic-desc"></view>
+          <view class="traffic-map">
+            <map id="map" longitude="113.324520" latitude="23.099994" scale="14" markers="{{markers}}"></map>
+          </view>
+        </view>
+				<view class="black-210"></view>
+			</view>
+		</scroll-view>
+	</view>
+	<view class="submit">立即参加</view>
+</view>

pages/detail/index.wxss

@@ -1 +1,230 @@
-/* pages/detail/index.wxss */
+/* pages/detail/index.wxss */
+.container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.container-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(10px);
+}
+
+.swiper-item {
+  height: 100%;
+  background-size: cover;
+}
+
+.bg1 {
+  background: url(https://cirraybucket.oss-cn-shanghai.aliyuncs.com/nwres/1.jpg) no-repeat top center;
+}
+
+.bg2 {
+  background: url(https://cirraybucket.oss-cn-shanghai.aliyuncs.com/nwres/2.jpg) no-repeat top center;
+}
+
+.bg3 {
+  background: url(https://cirraybucket.oss-cn-shanghai.aliyuncs.com/nwres/3.jpg) no-repeat top center;
+}
+
+.swiper {
+  position: relative;
+  height: 862rpx;
+  transition: all ease .4s;
+}
+
+.submit {
+  z-index: 3;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 650rpx;
+  height: 100rpx;
+  background: linear-gradient(135deg, rgba(143, 103, 232, 1) 0%, rgba(99, 87, 204, 1) 100%);
+  border-radius: 50rpx;
+  font-size: 32rpx;
+  color: #fff;
+}
+
+.section {
+  flex: 1;
+  transition: all ease .4s;
+  background: #fff;
+  /* padding: 70rpx 50rpx 0; */
+  /* box-sizing: border-box; */
+  overflow: hidden;
+
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 56rpx;
+}
+
+.title-l {
+  line-height: 56rpx;
+  font-size: 40rpx;
+}
+
+.title-r {
+  font-size: 48rpx;
+}
+
+.title-r text:last-child {
+  font-size: 20rpx;
+  margin-left: 28rpx;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 98rpx;
+  border-bottom: 2rpx dashed #E5E5E5;
+}
+
+.label-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 16rpx;
+  background: red;
+}
+
+.label-icon image {
+  width: 100%;
+  height: 100%;
+}
+
+.label-text {
+  flex: 1;
+  font-size: 24rpx;
+  color: #313131;
+}
+
+.time-text {
+  font-size: 28rpx;
+}
+
+.time-text text {
+  color: #838383;
+}
+
+.pd {
+  padding: 0 50rpx;
+}
+
+.black-70 {
+  height: 70rpx;
+  clear: both;
+}
+
+.black-210 {
+  height: 210rpx;
+  clear: both;
+}
+
+.section-scroll {
+  z-index: 2;
+  border-top-left-radius: 80rpx;
+  border-top-right-radius: 80rpx;
+  margin-top: -80rpx;
+}
+
+
+.dots {
+  position: absolute;
+  right: 0;
+  bottom: 12rpx;
+  left: 0;
+  text-align: center;
+}
+
+/*未选中时的小圆点样式 */
+.dot {
+  display: inline-block;
+  width: 20rpx;
+  height: 20rpx;
+  margin: 0 10rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, .4);
+}
+
+/*选中以后的小圆点样式  */
+.active {
+  background-color: white;
+}
+
+.activity{
+
+  line-height: 44rpx;
+  font-size: 32rpx;
+  color:#313131;
+}
+.activity-title{
+  padding-top: 48rpx;
+  padding-bottom: 24rpx;
+}
+.activity .activity-content{
+  line-height: 50rpx;
+  font-size: 28rpx;
+}
+.sign-up{
+  padding-top:82rpx;
+}
+.sign-up-title{
+  font-size: 32rpx;
+  color:#313131;
+  padding-bottom: 40rpx;
+  line-height: 44rpx;
+}
+.sign-up-title text{
+  font-size: 28rpx;
+  color:#838383;
+}
+.sign-up-list{
+  display: flex;
+  align-items: center;
+}
+.sign-up-item{
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  overflow:hidden;
+  margin: 0  22rpx;
+  background: blue;
+  margin-bottom: 10rpx;
+}
+.traffic{
+  padding-top: 62rpx;
+  color:#313131;
+}
+.traffic-title{
+  font-size: 32rpx;
+}
+.traffic-desc{
+  font-size: 28rpx;
+}
+.traffic-map{
+  width:650rpx;
+height:250rpx;
+}
+.traffic-map map{
+  width: 100%;
+  height: 100%;
+}

pages/index/index.js

@@ -62,5 +62,10 @@ Page({
     wx.navigateTo({
       url: '/pages/add/index',
     })
+  },
+  goDetail(){ 
+    wx.switchTab({
+      url: '/pages/detail/index',
+    })
   }
 })

pages/index/index.wxml

@@ -10,7 +10,7 @@
 	<view class="list">
 		<scroll-view style="height: 100%;" scroll-y>
 			<view class="black-112"></view>
-			<view class="item">
+			<view class="item"  bindtap="goDetail">
 				<view class="item-img"></view>
 				<view class="item-content">
 					<view class="content-title">Coffee Talk</view>