静态页面

src/pages/index/activityDetail/index.jsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
-import Taro from "@tarojs/taro";
-import withLayout from "@/layout";
+import { useState, useEffect } from 'react';
+import Taro from '@tarojs/taro';
+import withLayout from '@/layout';
 import {
   ScrollView,
   Image,
@@ -9,42 +9,42 @@ import {
   Text,
   Input,
   Picker,
-} from "@tarojs/components";
-import Disclaimer from "@/components/Disclaimer";
-import { useSelector } from "react-redux";
+  Button
+} from '@tarojs/components';
+import Disclaimer from '@/components/Disclaimer';
+import { useSelector } from 'react-redux';
 import {
-  // addActivityShareNum,
   signupActivity,
   queryActivityDetail,
-} from "@/services/activity";
-import { getImgURL } from "@/utils/image";
-import getDateFormat from "@/utils/chatDate";
-import useParams from "@/utils/hooks/useParams";
-import useShare from "@/utils/hooks/useShare";
-import useFavor from "@/utils/hooks/useFavor";
-import { getDownloadURL, times, transferImage } from "@/utils/tools";
-import "./index.scss";
+} from '@/services/activity';
+import { getImgURL } from '@/utils/image';
+import getDateFormat from '@/utils/chatDate';
+import useParams from '@/utils/hooks/useParams';
+import useShare from '@/utils/hooks/useShare';
+import useFavor from '@/utils/hooks/useFavor';
+import { times } from '@/utils/tools';
+import './index.scss';
 
 const activityStatusDict = {
   0: {
-    text: "立即参与",
-    text1: "立即参团",
-    className: "yellow",
+    text: '立即参与',
+    text1: '立即参团',
+    className: 'yellow',
   },
   1: {
-    text: "未开始",
-    text1: "未开始",
-    className: "blue",
+    text: '未开始',
+    text1: '未开始',
+    className: 'blue',
   },
   2: {
-    text: "已结束",
-    text1: "已结束",
-    className: "grey",
+    text: '已结束',
+    text1: '已结束',
+    className: 'grey',
   },
   3: {
-    text: "已参与",
-    text1: "已结束",
-    className: "yellow",
+    text: '已参与',
+    text1: '已结束',
+    className: 'yellow',
   },
 };
 
@@ -54,11 +54,11 @@ export default withLayout((props) => {
 
   const user = useSelector((state) => state.user);
 
-  const [detail, setDetail] = useState();
-  const [canChoose, setCanChoose] = useState("none");
-  const [inputName, setInputName] = useState("");
-  const [selectorChecked, setSelectorChecked] = useState("1");
-  const [selector, setSelector] = useState("");
+  const [detail, setDetail] = useState({})
+  const [canChoose, setCanChoose] = useState('none');
+  const [inputName, setInputName] = useState('');
+  const [selectorChecked, setSelectorChecked] = useState('1');
+  const [selector, setSelector] = useState('');
 
   const buildingId = detail?.buildingId;
 
@@ -105,31 +105,77 @@ export default withLayout((props) => {
     if (id) {
       getDetail(id);
     }
-  }, [id]);
+  }, [id])
+
+  const [CountDown, setCountDown] = useState({
+    day: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  })
+
+  useEffect(() => {
+    if(detail.title) {
+      const CountsTime = new Date(detail.enlistEnd).getTime() - Date.now()
+      if(CountsTime) {
+        SetCountsDown(CountsTime)
+      }
+    }
+  }, [detail])
+
+  const SetCountsDown = (counts) => {
+    let Num = counts - 0
+    let Timer = setInterval(() => {
+      if(Num) {
+        Num -= 1000
+        let Time = Num
+        let day = Math.floor(Time / 1000 / 60 / 60 / 24)
+        Time = Time % (1000 * 60 * 60 * 24) 
+        let hours = Math.floor(Time / 1000 / 60 / 60)
+        Time = Time % (1000 * 60 * 60) 
+        let minutes = Math.floor(Time / 1000 / 60)
+        Time = Time % (1000 * 60) 
+        let seconds = Math.floor(Time / 1000)
+        setCountDown({
+          day,
+          hours,
+          minutes,
+          seconds
+        })
+      } else {
+        clearInterval(Timer)
+        setCountDown({
+          day: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+        })
+      }
+    }, 1000)
+  }
 
   const handleSignup = () => {
-    const { buildingId, dynamicId, isSign } = detail;
+    const { isSign } = detail;
 
     if (isSign) {
       Taro.showToast({
-        icon: "none",
-        title: "你已报名成功",
+        icon: 'none',
+        title: '你已报名成功',
       });
       return;
     }
-    setCanChoose("block");
+    setCanChoose('block');
   };
 
-  const comfire = (e) => {
-    const { dynamicId } =detail;
-    // console.log(user, "user");
-    const { userInfo: { person: { phone,  tel } } } = user
-    if (inputName == "") {
+  const comfire = () => {
+    const { dynamicId } = detail
+    const { userInfo: { person: { phone, tel } } } = user
+    if (inputName === '') {
       Taro.showToast({
-        title: "请输入姓名",
-        icon: "none",
-      });
-      return;
+        title: '请输入姓名',
+        icon: 'none'
+      })
+      return
     }
 
     const payload = {
@@ -140,23 +186,19 @@ export default withLayout((props) => {
       attendNum: selectorChecked,
     };
 
-    signupActivity(payload).then((res) => {
+    signupActivity(payload).then(() => {
       Taro.showToast({
-        title: "报名成功",
-      });
+        title: '报名成功',
+      })
       setSelector('none')
-      // this.setState({
-      //   isSign: true,
-      //   canChoose: "none",
-      // });
       setTimeout(() => {
-        getDetail(id);
-      }, 500);
+        getDetail(id)
+      }, 500)
     });
   };
 
-  function hideModal() {
-    setCanChoose("none");
+  function hideModal () {
+    setCanChoose('none');
   }
 
   const onInputText = (e) => {
@@ -164,159 +206,209 @@ export default withLayout((props) => {
   };
 
   const dymic = () => (
-    <view className="Info">
+    <view className='Info'>
       <view>
-        <view className="Title flex-h">
-          <view className="flex-item">
+        <view className='Title flex-h'>
+          <view className='flex-item'>
             <text>{detail.halfTitle}</text>
           </view>
-          <text className="Tips">{detail.enlisted || 0}人已报名</text>
+          <text className='Tips'>{detail.enlisted || 0}人已报名</text>
         </view>
-        <text className="Time">
+        <text className='Time'>
           报名截止时间：
           {getDateFormat(
             new Date(detail.enlistEnd).valueOf(),
             true,
-            "yyyy/M/d"
+            'yyyy/M/d'
           )}
         </text>
-        <text className="Name">{detail.title}</text>
-        <view className="flex-h Address">
+        <text className='Name'>{detail.title}</text>
+        <view className='flex-h Address'>
           <text>地址：</text>
-          <view className="flex-item">
+          <view className='flex-item'>
             <text>{detail.address}</text>
           </view>
         </view>
-        <view className="flex-h Date">
+        <view className='flex-h Date'>
           <text>时间：</text>
-          <view className="flex-item">
+          <view className='flex-item'>
             <text>
               {getDateFormat(
                 new Date(detail.startDate).valueOf(),
                 true,
-                "yyyy/M/d"
-              )}{" "}
-              -{" "}
+                'yyyy/M/d'
+              )}{' '}
+              -{' '}
               {getDateFormat(
                 new Date(detail.endDate).valueOf(),
                 true,
-                "yyyy/M/d"
+                'yyyy/M/d'
               )}
             </text>
           </view>
         </view>
-        <view className="Btn">
-          <button open-type="share">
+        <view className='Btn'>
+          <Button open-type='share'>
             <text>分享好友</text>
-          </button>
+          </Button>
         </view>
       </view>
     </view>
   );
 
   const house = () => (
-    <view className="houseInfo">
-      {/* <view> */}
-      <view className="flex-h">
-        <view className="left">
-          <view className="Title">
-            <view className="flex-item">
-              <text>{detail.title}</text>
-            </view>
-          </view>
-          <view className="flex-h Address">
-            <text className="iconfont icon-dingwei"></text>
-            <view className="flex-item">
+
+    <view className='BuildingInfo'>
+
+      <view className='flex-h Title'>
+        <view className='flex-item'>
+          <text className='Name'>{detail.title}</text>
+          <view className='Address flex-h'>
+            <text className='iconfont icon-dingwei'></text>
+            <view className='flex-item'>
               <text>{detail.address}</text>
             </view>
-            <text className="price">价格待定</text>
+            <text className='Price'>价格待定</text>
           </view>
-          <text className="flex-h Time">
-            时间：
-            {getDateFormat(
-              new Date(detail.startDate).valueOf(),
-              true,
-              "yyyy/M/d"
-            )}{" "}
-            -{" "}
-            {getDateFormat(
-              new Date(detail.endDate).valueOf(),
-              true,
-              "yyyy/M/d"
-            )}
-          </text>
+          <text className='Time'>时间：{getDateFormat(new Date(detail.startDate).valueOf(), true, 'yyyy/M/d')} - {getDateFormat(new Date(detail.endDate).valueOf(), true, 'yyyy/M/d')}</text>
         </view>
-        <view className="right">
+        <view className='Option'>
           <view>
-            <button open-type="share">
-              <text className="iconfont icon-fenxiang"></text>
-              <text>分享</text>
-            </button>
-            {/* <text className="iconfont icon-dingwei"></text>
-            <text>分享</text> */}
+            <text className='iconfont icon-fenxiang1'></text>
+            <text>分享</text>
+            <Button open-type='share' className='ShareBtn'>分享</Button>
           </view>
           <view>
-            <text className="iconfont icon-dingwei"></text>
+            <text className='iconfont icon-haibao'></text>
             <text>海报</text>
           </view>
         </view>
       </view>
 
-      <view className="lastdate">
-        <text className="text">距离结束还有</text>
-        <text className="text day">7</text>
-        <text className="text">天</text>
-        <text className="text time">2</text>
-        <text className="text">时</text>
-        <text className="text time">4</text>
-        <text className="text">分</text>
-        <text className="text time">5</text>
-        <text className="text">秒</text>
-        {/* <view>距离结束还有</view> */}
+      <view className='CountDown'>
+        <text>距离结束还有</text>
+        <text className='Red'>{CountDown.day}</text>
+        <text>天</text>
+        <text className='Number' style={{ marginLeft: '40rpx' }}>{CountDown.hours}</text>
+        <text className='active'>时</text>
+        <text className='Number'>{CountDown.minutes}</text>
+        <text className='active'>分</text>
+        <text className='Number'>{CountDown.seconds}</text>
+        <text className='active'>秒</text>
       </view>
 
-      <view className="flex-h join">
-        <view className="Collect" onClick={handleFavor}>
-          <text
-            className="iconfont icon-shoucang"
-            style={isSaved ? { color: "red" } : undefined}
-          ></text>
-          <text>{isSaved ? "已收藏" : "收藏"}</text>
+      <view className='Apply flex-h'>
+        <view className='Collect' onClick={handleFavor}>
+          <text className='iconfont icon-shoucang' style={isSaved ? { color: 'red' } : undefined}></text>
+          <text>{isSaved ? '已收藏' : '收藏'}</text>
         </view>
-        <view className="enlisted">
-          <view>
-            <text className="iconfont icon-shoucang"></text>
-            <text>{detail.enlisted || 0}人已报名</text>
-          </view>
-        </view>
-        <view className="btn" onClick={handleSignup}>
-          <text>{activityStatusDict[detail.activityStatus]?.text1}</text>
+        <text className='iconfont icon-baoming'></text>
+        <view className='flex-item'>
+          <text>{detail.enlisted || 0}人已报名</text>
         </view>
+        <text className='Btn' onClick={handleSignup}>{activityStatusDict[detail.activityStatus]?.text1}</text>
       </view>
-      {/* </view> */}
+
     </view>
+    // <view className='houseInfo'>
+    //   {/* <view> */}
+    //   <view className='flex-h'>
+    //     <view className='left'>
+    //       <view className='Title'>
+    //         <view className='flex-item'>
+    //           <text>{detail.title}</text>
+    //         </view>
+    //       </view>
+    //       <view className='flex-h Address'>
+    //         <text className='iconfont icon-dingwei'></text>
+    //         <view className='flex-item'>
+    //           <text>{detail.address}</text>
+    //         </view>
+    //         <text className='price'>价格待定</text>
+    //       </view>
+    //       <text className='flex-h Time'>
+    //         时间：
+    //         {getDateFormat(
+    //           new Date(detail.startDate).valueOf(),
+    //           true,
+    //           'yyyy/M/d'
+    //         )}{' '}
+    //         -{' '}
+    //         {getDateFormat(
+    //           new Date(detail.endDate).valueOf(),
+    //           true,
+    //           'yyyy/M/d'
+    //         )}
+    //       </text>
+    //     </view>
+    //     <view className='right'>
+    //       <view>
+    //         {/* <Button open-type='share'>
+    //           <text className='iconfont icon-fenxiang'></text>
+    //           <text>分享</text>
+    //         </Button> */}
+    //         <text className='iconfont icon-fenxiang'></text>
+    //         <text>分享</text>
+    //       </view>
+    //       <view>
+    //         <text className='iconfont icon-dingwei'></text>
+    //         <text>海报</text>
+    //       </view>
+    //     </view>
+    //   </view>
+
+    //   <view className='lastdate'>
+    //     <text className='text'>距离结束还有</text>
+    //     <text className='text day'>7</text>
+    //     <text className='text'>天</text>
+    //     <text className='text time'>2</text>
+    //     <text className='text'>时</text>
+    //     <text className='text time'>4</text>
+    //     <text className='text'>分</text>
+    //     <text className='text time'>5</text>
+    //     <text className='text'>秒</text>
+    //     {/* <view>距离结束还有</view> */}
+    //   </view>
+
+    //   <view className='flex-h join'>
+    //     <view className='Collect' onClick={handleFavor}>
+    //       <text className='iconfont icon-shoucang' style={isSaved ? { color: 'red' } : undefined}></text>
+    //       <text>{isSaved ? '已收藏' : '收藏'}</text>
+    //     </view>
+    //     <view className='enlisted'>
+    //       <view>
+    //         <text className='iconfont icon-shoucang'></text>
+    //         <text>{detail.enlisted || 0}人已报名</text>
+    //       </view>
+    //     </view>
+    //     <view className='btn' onClick={handleSignup}>
+    //       <text>{activityStatusDict[detail.activityStatus]?.text1}</text>
+    //     </view>
+    //   </view>
+    //   {/* </view> */}
+    // </view>
   );
 
   return (
     <>
       {detail && (
-        <view className="Page activityDetail flex-v">
-          <view className="flex-item">
+        <view className='Page activityDetail flex-v'>
+          <view className='flex-item'>
             <view>
               <ScrollView scroll-y>
-                <view className="PageContent">
-                  <view className="Top">
+                <view className='PageContent'>
+                  <view className='Top'>
                     <Image
-                      mode="aspectFill"
+                      mode='aspectFill'
                       src={getImgURL(detail.bannerListImg)}
-                      className="centerLabel"
+                      className='centerLabel'
                     ></Image>
                   </view>
 
-                  {detail.type == "dymic" && dymic()}
-                  {detail.type == "house" && house()}
-                  <view className="ActivityIntro">
-                    <view className="Title">
+                  {detail.type == 'dymic' && dymic()}
+                  {detail.type == 'house' && house()}
+                  <view className='ActivityIntro'>
+                    <view className='Title'>
                       <text>活动介绍</text>
                     </view>
                     <RichText nodes={detail.desc} />
@@ -327,22 +419,22 @@ export default withLayout((props) => {
               </ScrollView>
             </view>
           </view>
-          {detail.type == "dymic" && (
-            <view className="PageBottom flex-h">
-              <button className="Share" open-type="share">
-                <text className="iconfont icon-fenxiang"></text>
+          {detail.type == 'dymic' && (
+            <view className='PageBottom flex-h'>
+              <Button className='Share' open-type='share'>
+                <text className='iconfont icon-fenxiang'></text>
                 <text>分享</text>
-              </button>
-              <view className="Collect" onClick={handleFavor}>
+              </Button>
+              <view className='Collect' onClick={handleFavor}>
                 <text
-                  className="iconfont icon-shoucang"
-                  style={isSaved ? { color: "red" } : undefined}
+                  className='iconfont icon-shoucang'
+                  style={isSaved ? { color: 'red' } : undefined}
                 ></text>
-                <text>{isSaved ? "已收藏" : "收藏"}</text>
+                <text>{isSaved ? '已收藏' : '收藏'}</text>
               </view>
-              <view className="flex-item"></view>
+              <view className='flex-item'></view>
 
-              <text className="Post" onClick={handleSignup}>
+              <text className='Post' onClick={handleSignup}>
                 {activityStatusDict[detail.activityStatus]?.text}
               </text>
             </view>
@@ -350,29 +442,29 @@ export default withLayout((props) => {
         </view>
       )}
 
-      <View className="page-body" style={{ display: canChoose }}>
-        <View className="mask" onClick={() => hideModal()}></View>
-        <View className="page-section">
-          <Text className="page-section__title">报名信息</Text>
-          <View className="page-content">
+      <View className='page-body' style={{ display: canChoose }}>
+        <View className='mask' onClick={() => hideModal()}></View>
+        <View className='page-section'>
+          <Text className='page-section__title'>报名信息</Text>
+          <View className='page-content'>
             <Input
-              className="inputName"
+              className='inputName'
               onInput={onInputText}
-              type="text"
-              placeholder="请输入姓名"
+              type='text'
+              placeholder='请输入姓名'
             />
             <Picker
-              mode="selector"
+              mode='selector'
               range={selector}
               onChange={(e) => setSelectorChecked(selector[e.detail.value])}
             >
-              <View className="picker">
+              <View className='picker'>
                 <Text>参加人数</Text>
-                <Text className="content">{selectorChecked}</Text>
+                <Text className='content'>{selectorChecked}</Text>
                 <Text>人</Text>
               </View>
             </Picker>
-            <View onClick={comfire} className="comfire">
+            <View onClick={comfire} className='comfire'>
               确认
             </View>
           </View>

src/pages/index/activityDetail/index.scss

@@ -17,6 +17,210 @@
           position: relative;
           overflow: hidden;
           min-height: 100vh;
+          .BuildingInfo {
+            padding: 0 30px;
+            position: relative;
+            overflow: hidden;
+            margin-top: 40px;
+            >.Title {
+              align-items: center;
+              >.flex-item {
+                margin-right: 30px;
+                position: relative;
+                overflow: hidden;
+                padding-right: 30px;
+                &::after {
+                  content: '';
+                  width: 2px;
+                  height: 100%;
+                  background: rgba(0, 0, 0, 0.1);
+                  display: block;
+                  position: absolute;
+                  right: 0;
+                  top: 0;
+                }
+                >.Name {
+                  display: block;
+                  font-size: 34px;
+                  font-weight: bold;
+                  line-height: 1;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+                >.Address {
+                  align-items: center;
+                  margin-top: 28px;
+                  >.iconfont {
+                    font-size: 20px;
+                    color: #666;
+                    line-height: 1.1;
+                  }
+                  >.flex-item {
+                    margin-left: 4px;
+                    >text {
+                      display: block;
+                      font-size: 26px;
+                      font-weight: bold;
+                      white-space: nowrap;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      line-height: 1.1;
+                    }
+                  }
+                  >.Price {
+                    font-size: 26px;
+                    font-weight: bold;
+                    color: #FF0000;
+                    margin-left: 30px;
+                    line-height: 1.1;
+                  }
+                }
+                >.Time {
+                  display: block;
+                  font-size: 24px;
+                  color: #666;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  margin-top: 28px;
+                }
+              }
+              >.Option {
+                >view {
+                  font-size: 0;
+                  white-space: nowrap;
+                  text-align: center;
+                  margin-top: 30px;
+                  padding-right: 30px;
+                  position: relative;
+                  overflow: hidden;
+                  >.ShareBtn {
+                    display: block;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    z-index: 2;
+                    opacity: 0;
+                  }
+                  &:first-child {
+                    margin-top: 0;
+                  }
+                  >text {
+                    display: inline-block;
+                    vertical-align: middle;
+                    font-size: 24px;
+                    margin-left: 10px;
+                    position: relative;
+                    z-index: 1;
+                    &:first-child {
+                      margin-left: 0;
+                      font-size: 30px;
+                    }
+                  }
+                }
+              }
+            }
+            >.CountDown {
+              position: relative;
+              overflow: hidden;
+              background: rgba(25, 60, 131, 0.08);
+              padding: 23px 0;
+              text-align: center;
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 44px;
+              border-radius: 8px;
+              >text {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 28px;
+                line-height: 1;
+                margin-left: 10px;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  color: #193C83;
+                }
+                &.Number {
+                  color: #fff;
+                  background: #193C83;
+                  width: 38px;
+                  line-height: 38px;
+                  text-align: center;
+                  border-radius: 4px;
+                }
+                &.Red {
+                  color: #FF0000;
+                }
+              }
+            }
+            >.Apply {
+              position: relative;
+              overflow: hidden;
+              background: rgba(25, 60, 131, 0.08);
+              align-items: center;
+              margin-top: 40px;
+              border-radius: 8px;
+              >.Collect {
+                position: relative;
+                overflow: hidden;
+                width: 90px;
+                &::after {
+                  content: '';
+                  width: 2px;
+                  height: 34px;
+                  background: rgba(0, 0, 0, 0.08);
+                  display: block;
+                  position: absolute;
+                  right: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  -webkit-transform: translateY(-50%);
+                }
+                >text {
+                  display: block;
+                  text-align: center;
+                  font-size: 24px;
+                  line-height: 1;
+                  margin-top: 10px;
+                  &:first-child {
+                    margin-top: 0;
+                    font-size: 30px;
+                  }
+                }
+              }
+              >text {
+                &.iconfont {
+                  font-size: 30px;
+                  color: #193C83;
+                  margin-left: 24px;
+                }
+                &.Btn {
+                  font-size: 32px;
+                  width: 360px;
+                  line-height: 92px;
+                  border-radius: 92px;
+                  background: #193C83;
+                  text-align: center;
+                  margin-left: 0;
+                  color: #fff;
+                }
+              }
+              >.flex-item {
+                margin-left: 12px;
+                >text {
+                  display: block;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  font-size: 30px;
+                }
+              }
+            }
+          }
           > .Top {
             width: 100%;
             padding-bottom: 56%;