个人中心活动参与跳转

2020-12-28 14:12:43 +08:00
parent 734d3a9377
commit 092f0bad14
16 changed files with 832 additions and 79 deletions
--- a/pages/user/companyMine/companyOrder.js
+++ b/pages/user/companyMine/companyOrder.js
@@ -0,0 +1,29 @@
+// pages/companyOrder/companyOrder.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    type: 0, //全部0  待付款1 待发货2 待收货3 退款/售后4
+  },
+
+  onLoad() {
+
+  },
+
+  /**
+   * 点击按钮触发事件
+   */
+  menuSelect: function (e) {
+    console.log(e.currentTarget.dataset.id);
+    if (this.data.type != e.currentTarget.dataset.id) {
+      this.setData({
+        type: e.currentTarget.dataset.id
+      })
+      if (e.currentTarget.dataset.id == 3) {
+        this.selectComponent('#categoryTypeList').crowdfundcategory(this.data.company_id);
+      }
+    }
+  },
+})
--- a/pages/user/companyMine/companyOrder.json
+++ b/pages/user/companyMine/companyOrder.json
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "项目预购",
+  "navigationBarTextStyle": "white",
+  "navigationBarBackgroundColor": "#378fff"
+}
--- a/pages/user/companyMine/companyOrder.wxml
+++ b/pages/user/companyMine/companyOrder.wxml
@@ -0,0 +1,16 @@
+<!-- 滚动菜单 -->
+<view class="scroll_menu">
+  <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
+    <view id="menu1" catchtap="menuSelect" data-id='0'
+      class="scroll-view-item_H {{type==0?'scroll_view_select':''}}">全部</view>
+    <view id="menu2" catchtap="menuSelect" data-id='1'
+      class="scroll-view-item_H {{type==1?'scroll_view_select':''}}">待付款</view>
+    <view id="menu3" catchtap="menuSelect" data-id='2'
+      class="scroll-view-item_H {{type==2?'scroll_view_select':''}}">待发货</view>
+    <view id="menu4" catchtap="menuSelect" data-id='3'
+      class="scroll-view-item_H {{type==3?'scroll_view_select':''}}">待收货</view>
+    <view id="menu4" catchtap="menuSelect" data-id='4'
+      class="scroll-view-item_H {{type==4?'scroll_view_select':''}}">退款/售后</view>
+  </scroll-view>
+</view>
+<!-- 列表 -->
--- a/pages/user/companyMine/companyOrder.wxss
+++ b/pages/user/companyMine/companyOrder.wxss
@@ -0,0 +1,33 @@
+/* 滚动菜单 */
+.scroll_menu {
+  background-color: #fff;
+  box-shadow: 0 0rpx 10px rgba(0, 0, 0, 0.1);
+  font-size: 28rpx;
+}
+
+.scroll-view_H {
+  white-space: nowrap;
+  color: #000;
+}
+
+.scroll-view-item {
+  height: 90rpx;
+  line-height: 90rpx;
+}
+
+.scroll-view-item_H {
+  display: inline-block;
+  width: 22%;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: center;
+  border-bottom: solid 4rpx #fff;
+}
+
+.scroll_view_select {
+  border-bottom: solid 4rpx #378fff;
+  color: #378fff;
+  font-weight: 600;
+}
+
+/* 列表 */
--- a/pages/user/companyMine/myActives/activeDetail/activeDetail.js
+++ b/pages/user/companyMine/myActives/activeDetail/activeDetail.js
@@ -0,0 +1,109 @@
+// pages/companyModule/companyMoreVideo/companyMoreVideo.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    acted: false, //已经报名true
+    showBeSureActed: false, //显示确认弹窗
+    indicatorDots: true,
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500,
+    active_id: '', //活动id
+    info: '', //详情信息
+    loaded:false,
+  },
+  onLoad(e) {
+    this.setData({
+      active_id: e.id
+    })
+  },
+  onShow() {
+    this.activesDetail(this.data.active_id);
+  },
+
+  /**
+   * 现在报名
+   */
+  nowActed: function (e) {
+    console.log()
+    if (!e.currentTarget.dataset.acted) {
+      this.setData({
+        showBeSureActed: true,
+      })
+    } else {
+      wx.showToast({
+        icon: 'none',
+        title: '已报名，等待活动开始',
+      })
+    }
+  },
+  /**
+   * 关闭弹窗
+   */
+  close() {
+    this.setData({
+      showBeSureActed: false
+    })
+  },
+  /**
+   * 确认报名
+   */
+  beSure() {
+    wx.login({
+      success:res=>{
+        wx.$api.companyModule.activesEnroll(res.code,this.data.active_id).then(res => {
+          if(Number(this.data.info.price)>0){
+            var resss=JSON.parse(res);
+            console.log('可支付')
+            wx.requestPayment({
+              timeStamp: resss.timeStamp,
+              nonceStr: resss.nonceStr,
+              package: resss.package,
+              signType: 'MD5',
+              paySign: resss.paySign,
+              success:res=>{
+                this.close();
+                wx.navigateTo({
+                  url: '/pages/companyModule/activeSuccess/activeSuccess?cover='+this.data.info.pictures[0],
+                })
+              },
+              fail(res) {
+                wx.showToast({
+                  title: '支付失败',
+                })
+              }
+            })
+    
+          }else{
+            console.log('不用支付')
+            this.close();
+            wx.navigateTo({
+              url: '/pages/companyModule/activeSuccess/activeSuccess?cover='+this.data.info.pictures[0],
+            })
+          }
+        })
+      }
+    })
+  },
+  /**
+   * 获取详情
+   */
+  activesDetail() {
+    wx.$api.companyModule.activesDetail(this.data.active_id).then(res => {
+      var nodes = res.content.replace('<img', '<img style="max-width:100%;height:auto""');
+      console.log(nodes);
+      this.setData({
+        info: res,
+        content:nodes,
+        loaded:true,
+      })
+    })
+  },
+  
+
+
+})
--- a/pages/user/companyMine/myActives/activeDetail/activeDetail.json
+++ b/pages/user/companyMine/myActives/activeDetail/activeDetail.json
@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "活动详情",
+  "navigationBarTextStyle": "white",
+  "navigationBarBackgroundColor": "#378fff"
+}
--- a/pages/user/companyMine/myActives/activeDetail/activeDetail.wxml
+++ b/pages/user/companyMine/myActives/activeDetail/activeDetail.wxml
@@ -0,0 +1,58 @@
+<block wx:if='{{loaded}}'>
+  <view class="active_content" >
+    <!-- 轮播图 -->
+    <view class="active_cover">
+      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="{{interval}}" duration="{{duration}}">
+        <block wx:for="{{info.pictures}}" wx:key="*this">
+          <swiper-item>
+            <view class="swiper-item {{item}}">
+              <image class="active_cover_bg" src="{{item}}" mode="aspectFill"></image>
+            </view>
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
+    <!-- 文字介绍 -->
+    <view class="active_title">{{info.title}}</view>
+    <view class="active_des">{{info.description}}</view>
+    <view class="active_line"></view>
+    <view class="active_bottom">
+      <view class="left">{{info.price > 0? '￥' + info.price:'免费'}} </view>
+      <span>报名上限：{{info.limits}}人</span>
+    </view>
+  </view>
+  <!-- 地址报名信息 -->
+  <view class="active_detail">
+    <view class="active_time">截止时间：<span>{{info.deadlined_at}}</span></view>
+    <view class="active_time">活动时间：<span>{{info.started_at}}至{{info.ended_at}}</span></view>
+    <view class="active_time">活动地点：<span>{{info.address}}
+        <!-- <image mode="widthFix"
+        src="/static/images/location.png"></image>3.2KM  -->
+      </span>
+    </view>
+    <view class="active_time">联系人电话：<span>{{info.contact}}</span></view>
+  </view>
+  <!-- 活动详情 -->
+  <view class="active_detail_html">
+    <view class="active_nav">活动详情</view>
+    <rich-text nodes="{{content}}" style="width:100%;"></rich-text>
+  </view>
+
+  <!-- 底部按钮 -->
+  <view class="active_now_act {{!info.canEnroll?'acted':''}}" catchtap="{{info.canEnroll?'nowActed':''}}" data-acted='{{acted}}'>
+    <view class="left">{{info.price> 0 ? '￥' + info.price:'免费'}} </view>
+    <span>{{!info.canEnroll?'无法报名':'立即报名'}}</span>
+  </view>
+</block>
+
+<!-- 确认弹窗 -->
+<view class="active_be_sure" wx:if='{{showBeSureActed}}'>
+  <view class="bg" catchtap="close"></view>
+  <view class="content">
+    <image class="active_cover" src="{{info.pictures[0]?info.pictures[0]:'/static/images/company_bg4.png'}}" mode="aspectFill"></image>
+    <view class="txt1">是否对该活动进行报名</view>
+    <view class="txt2">活动名称：{{info.title}}</view>
+    <view class="txt3" catchtap="beSure">确认报名</view>
+    <view class="txt4" catchtap="close">我再想想</view>
+  </view>
+</view>
--- a/pages/user/companyMine/myActives/activeDetail/activeDetail.wxss
+++ b/pages/user/companyMine/myActives/activeDetail/activeDetail.wxss
@@ -0,0 +1,245 @@
+.active_content {
+  background-color: #fff;
+  box-sizing: border-box;
+  padding-bottom: 10rpx;
+}
+
+.active_cover {
+  width: 100%;
+  height: 300rpx;
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 0;
+}
+
+.active_cover_bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.active_type_icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #ffcc00;
+  color: #4a1900;
+  padding: 4rpx 20rpx;
+  border-radius: 10rpx 0 20rpx 0;
+  font-size: 24rpx;
+  z-index: 1;
+}
+
+.active_title {
+  margin-top: 30rpx;
+  padding: 0 30rpx;
+  color: #333;
+  font-weight: 600;
+  font-size: 32rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.active_des {
+  margin-top: 14rpx;
+  padding: 0 30rpx;
+  color: #666;
+  font-size: 24rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.active_time {
+  margin-top: 14rpx;
+  /* padding: 0 10rpx; */
+  color: #666;
+  font-size: 26rpx;
+  /* overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; */
+}
+
+.active_time image {
+  width: 30rpx;
+  position: relative;
+  bottom: -6rpx;
+  right: 0;
+  margin-left: 30rpx;
+  margin-right: 4rpx;
+}
+
+.active_line {
+  margin: 20rpx 20rpx 0 20rpx;
+  border-bottom: solid 1rpx #f7f7f7;
+}
+
+.active_bottom {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #333;
+  padding: 0 30rpx;
+  margin-top: 20rpx;
+}
+
+.active_bottom span {
+  color: #999;
+  font-size: 24rpx;
+  padding-left: 10rpx;
+  font-weight: normal;
+}
+
+
+.active_detail {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+}
+
+.active_detail_html {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-bottom: 150rpx;
+}
+
+.active_detail_html img{
+  width: 100%;
+}
+
+.active_nav {
+  color: #333;
+  font-weight: 600;
+  font-size: 32rpx;
+  padding-bottom: 30rpx;
+}
+
+/* 立即报名 */
+.active_now_act {
+  margin-top: 20rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #333;
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 120rpx;
+}
+
+.active_now_act span {
+  margin-left: 60rpx;
+  flex: 1;
+  display: inline-block;
+  background-color: #378fff;
+  color: #fff;
+  font-size: 30rpx;
+  border-radius: 50rpx;
+  padding: 20rpx 100rpx;
+  text-align: center;
+  font-weight: 600;
+}
+
+.acted span {
+  background-color: #999;
+}
+
+.active_be_sure {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  z-index: 1;
+}
+
+.active_be_sure .bg {
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.active_be_sure .content {
+  width: 600rpx;
+  background-color: #fff;
+  position: relative;
+  z-index: 3;
+  border-radius: 20rpx;
+  text-align: center;
+  padding-bottom: 30rpx;
+}
+
+.active_be_sure .content .active_cover {
+  width: 100%;
+  height: 360rpx;
+  border-radius: 20rpx 20rpx 0 0;
+}
+
+.active_be_sure .content .txt1 {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #333;
+  padding-top: 40rpx;
+}
+
+.active_be_sure .content .txt2 {
+  padding-top: 20rpx;
+  font-size: 24rpx;
+  color: #999;
+}
+
+.active_be_sure .content .txt3 {
+  font-size: 32rpx;
+  color: #fff;
+  background-color: #378fff;
+  font-weight: 600;
+  width: 70%;
+  margin-left:15%;
+  box-sizing: border-box;
+  padding: 20rpx 30rpx;
+  border-radius: 50rpx;
+  margin-top: 30rpx;
+}
+
+.active_be_sure .content .txt4 {
+  font-size: 26rpx;
+  color: #999;
+  padding:20rpx 30rpx;
+}
+
+img{
+  max-width: 100%;
+}
--- a/pages/user/companyMine/myActives/myActives.js
+++ b/pages/user/companyMine/myActives/myActives.js
@@ -0,0 +1,75 @@
+// pages/companyOrder/companyOrder.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    state: 'unstart', //未开始 unstart  进行中start 已结束end 
+    lists: [],
+    page: 1,
+    has_more: true,
+  },
+
+  onLoad() {
+    this.userActives();
+  },
+
+  /**
+   * 点击按钮触发事件
+   */
+  menuSelect: function (e) {
+    if (this.data.state != e.currentTarget.dataset.state) {
+      wx.showLoading({
+        title: '请求中...',
+        mask: true
+      })
+      this.setData({
+        state: e.currentTarget.dataset.state,
+        page: 1,
+        lists: [],
+        has_more: true
+      })
+    }
+    this.userActives();
+  },
+  // 获取活动列表
+  userActives() {
+    wx.$api.companyModule.userActives(this.data.state, this.data.page).then(res => {
+      setTimeout(() => {
+        wx.hideLoading({})
+      }, 1000);
+      var lists = this.data.lists.concat(res.data)
+      if (res.page.has_more) {
+        this.setData({
+          has_more: res.page.has_more,
+          page: page + 1,
+          lists: lists
+        })
+      } else {
+        this.setData({
+          has_more: res.page.has_more,
+          lists: lists
+        })
+      }
+    })
+  },
+  // 触底加载更多
+  onReachBottom() {
+    console.log('触底')
+    if (this.data.has_more) {
+      this.userActives();
+    } else {
+      wx.showToast({
+        icon: 'none',
+        title: '没有更多',
+      })
+    }
+  },
+  //跳转到详情页 
+  goUrl(e) {
+    wx.navigateTo({
+      url: '/pages/companyModule/activeDetail/activeDetail?id=' + e.currentTarget.dataset.id,
+    })
+  }
+})
--- a/pages/user/companyMine/myActives/myActives.json
+++ b/pages/user/companyMine/myActives/myActives.json
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "活动参与",
+  "navigationBarTextStyle": "white",
+  "navigationBarBackgroundColor": "#378fff"
+}
--- a/pages/user/companyMine/myActives/myActives.wxml
+++ b/pages/user/companyMine/myActives/myActives.wxml
@@ -0,0 +1,31 @@
+<!-- 滚动菜单 -->
+<view class="scroll_menu">
+  <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
+    <view id="menu1" catchtap="menuSelect" data-state='unstart'
+      class="scroll-view-item_H {{state=='unstart'?'scroll_view_select':''}}">
+      未开始</view>
+    <view id="menu2" catchtap="menuSelect" data-state='start'
+      class="scroll-view-item_H {{state=='start'?'scroll_view_select':''}}">
+      进行中</view>
+    <view id="menu3" catchtap="menuSelect" data-state='end'
+      class="scroll-view-item_H {{state=='end'?'scroll_view_select':''}}">
+      已结束</view>
+  </scroll-view>
+</view>
+<!-- 列表 -->
+<view class="list_content" wx:for="{{lists}}">
+  <view class="fixed">最新</view>
+  <image class="left" src="{{item.active.pictures[0]}}" mode="aspectFill"></image>
+  <view class="right">
+    <view class="title">{{item.active.title}}</view>
+    <view class="money">{{item.active.price> 0 ? '￥' + item.active.price:'免费'}} <span>{{item.active.started_at}}</span>
+    </view>
+    <view class="check" catchtap="goUrl" data-id='{{item.active.active_id}}'>查看活动</view>
+  </view>
+</view>
+
+
+<view class="has_more">
+  <image wx:if='{{lists.length==0}}' src="/static/images/no_list.png" style="width:200rpx;" mode="widthFix"></image>
+  <span>{{has_more?'~ 上拉加载更多 ~':'~ 暂无更多数据 ~'}}</span>
+</view>
--- a/pages/user/companyMine/myActives/myActives.wxss
+++ b/pages/user/companyMine/myActives/myActives.wxss
@@ -0,0 +1,133 @@
+/* 滚动菜单 */
+.scroll_menu {
+  background-color: #fff;
+  box-shadow: 0 0rpx 10px rgba(0, 0, 0, 0.1);
+  font-size: 28rpx;
+}
+
+.scroll-view_H {
+  white-space: nowrap;
+  color: #000;
+}
+
+.scroll-view-item {
+  height: 90rpx;
+  line-height: 90rpx;
+}
+
+.scroll-view-item_H {
+  display: inline-block;
+  width: 22%;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: center;
+  border-bottom: solid 4rpx #fff;
+}
+
+.scroll_view_select {
+  border-bottom: solid 4rpx #378fff;
+  color: #378fff;
+  font-weight: 600;
+}
+
+/* 列表 */
+
+.list_content {
+  margin: 20rpx;
+  border-radius: 10rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  padding: 20rpx;
+  background-color: #Fff;
+  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+.list_content .left {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 3rpx;
+}
+
+.list_content .right {
+  width: calc(100% - 160rpx);
+  padding: 0 0 20rpx 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.list_content .right .title {
+  margin-top: 10rpx;
+  width: 100%;
+  font-size: 30rpx;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list_content .right .money {
+  margin-top: 30rpx;
+  width: 100%;
+  font-size: 34rpx;
+  color: #000;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.list_content .right .money span {
+  color: #666;
+  font-weight: normal;
+  font-size: 24rpx;
+  margin-left: 10rpx;
+}
+
+.list_content .right .check {
+  margin-top: 10rpx;
+  font-size: 22rpx;
+  color: #fff;
+  background-color: #378fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  padding: 4rpx 20rpx;
+  border-radius: 30rpx;
+}
+
+.has_more {
+  color: #999;
+  font-size: 26rpx;
+  text-align: center;
+  padding: 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-top: 30rpx;
+}
+
+.has_more image {
+  margin-bottom: 30rpx;
+}
+
+.fixed {
+  position: absolute;
+  top: 36rpx;
+  left: 20rpx;
+  background-color: #ffcc00;
+  color: #4a1900;
+  border-radius: 0 20rpx 20rpx 0;
+  font-size: 20rpx;
+  padding: 2rpx 12rpx;
+}
--- a/pages/user/index.wxml
+++ b/pages/user/index.wxml
@@ -59,12 +59,12 @@
        更多服务
    </view>
    <view class="userTool-list">
-        <view class="userTool-label">
+        <navigator hover-class="none" url="/pages/user/companyMine/myActives/myActives" class="userTool-label">
            <view class="userTool-label-img">
                <image src="/static/user_iocn/userTool_00.png"></image>
            </view>
            <text>活动参与</text>
-        </view>
+        </navigator>
        <view class="userTool-label">
            <view class="userTool-label-img">
                <image src="/static/user_iocn/userTool_01.png"></image>