✨ feat: 新增我参加的活动页面

hookehuyr
Commit 173f6269d276311c947b71bb09ef75f91ba4520c 173f6269 1 parent 2c599bca
Showing 3 changed files with 127 additions and 7 deletions
src/components/activity-card.vue
src/pages/my/index.less
src/pages/my/index.vue
--- a/src/components/activity-card.vue
View file @173f626
+++ b/src/components/activity-card.vue
View file @173f626
 <!--
  * @Date: 2022-09-20 15:39:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-26 14:40:18
+ * @LastEditTime: 2022-09-30 17:13:41
  * @FilePath: /swx/src/components/activity-card.vue
  * @Description: 活动卡片组件
 -->
@@ -15,8 +15,12 @@
         <van-col :span="14">
           <view class="card-main-text">
             <view style="font-size: 1.1rem;">{{ data.title }}</view>
-            <view class="status-text">
+            <!-- <view class="status-text">
               <text>网络活动</text>
+            </view> -->
+            <view class="status-text">
+              <van-tag :round="true" color="#E9FAF4" text-color="#199A74" size="large">网络活动</van-tag>
+              <van-tag :round="true" color="#D7FFD7" text-color="#019200" size="large">报名中</van-tag>
             </view>
             <view style="font-size: 0.95rem;">
               <van-icon name="clock-o" color="#BBBBBB" />&nbsp;2022-08-25 14:00
@@ -24,6 +28,7 @@
           </view>
         </van-col>
       </van-row>
+      <view style="position: absolute; right: 0; bottom: 1rem; background-color: #BBBBBB; color: white; padding: 0.25rem; padding-left: 1rem; padding-right: 0.5rem; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; font-size: 0.85rem;">编辑</view>
     </view>
     <view class="card-sub">
       <van-row v-if="data.address">
@@ -41,12 +46,13 @@
             <text>岗位：333</text>
           </view>
         </van-col>
-        <van-col :span="5">
+        <van-col v-if="type === 'home'" :span="5">
           <view @tap="goTo()" class="status-button">
             <text>我要报名</text>
           </view>
         </van-col>
       </van-row>
+      <view style="position: absolute; right: 0; bottom: 1rem; background-color: #199A74; color: white; padding: 0.25rem; padding-left: 1rem; padding-right: 0.5rem; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;">复制</view>
     </view>
   </view>
 </template>
@@ -59,7 +65,8 @@ import icon_address from '@/images/icon/address@2x.png'
 import Taro from '@tarojs/taro'
 const props = defineProps({
-  data: Object
+  data: Object,
+  type: String
 })
 const goTo = () => {
@@ -78,6 +85,7 @@ const goTo = () => {
   .card-main {
     padding: 0.8rem;
     border-bottom: 1px solid #F2F2F2;
+    position: relative;
     .card-main-text {
       padding: 0 0.5rem;
     }
@@ -85,6 +93,7 @@ const goTo = () => {
   .card-sub {
     padding: 0.85rem;
     font-size: 0.85rem;
+    position: relative;
   }
 }
--- a/src/pages/my/index.less
View file @173f626
+++ b/src/pages/my/index.less
View file @173f626
+.my-page {
+  .bg-header {
+    height: 12rem;
+    width: 100%;
+    background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  .header-info {
+    display: flex;
+    text-align: center;
+    .activity {
+      flex: 1;
+      height: 50rpx;
+      line-height: 50rpx;
+    }
+    .job {
+      flex: 1;
+      height: 100rpx;
+      line-height: 50rpx;
+    }
+    .sign {
+      flex: 1;
+      height: 50rpx;
+      line-height: 50rpx;
+    }
+  }
+}
--- a/src/pages/my/index.vue
View file @173f626
+++ b/src/pages/my/index.vue
View file @173f626
 <!--
  * @Date: 2022-09-21 14:51:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-21 16:13:17
+ * @LastEditTime: 2022-09-30 17:17:49
  * @FilePath: /swx/src/pages/my/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <view>my</view>
+  <view class="my-page">
+    <view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
+      <view style="height: 4rem; padding: 1rem;">
+        <van-row>
+          <van-col span="17">
+            <view style="position: relative;">
+              <AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
+              <view style="display: inline-block; position: absolute; top: 30%; left: 30%;">
+                <text style="font-size: 1.15rem;">微信昵称</text>
+                <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
+              </view>
+            </view>
+          </van-col>
+          <van-col span="7">
+            <view @tap="editInfo()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.9rem;margin-top: 1rem;">我的主办方</view>
+          </van-col>
+        </van-row>
+      </view>
+      <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
+        <view style="display: flex; text-align: center;">
+          <view style="flex: 1; line-height: 60rpx;">
+            <view>
+              <van-icon :name="icon_join" size="3rem" color="" style="vertical-align: sub;" />
+            </view>
+            <view>
+              <text style="font-size: 1rem; color: #222;">参加的活动</text>
+            </view>
+          </view>
+          <view style="flex: 1; line-height: 60rpx;">
+            <view>
+              <van-icon :name="icon_create" size="3rem" color="" style="vertical-align: sub;" />
+            </view>
+            <view>
+              <text style="font-size: 1rem; color: #222;">创建的活动</text>
+            </view>
+          </view>
+          <view style="flex: 1; line-height: 60rpx;">
+            <view>
+              <van-icon :name="icon_user" size="3rem" color="" style="vertical-align: sub;" />
+            </view>
+            <view>
+              <text style="font-size: 1rem; color: #222;">陪伴的用户</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view style="padding: 1rem; padding-top: 0;">
+      <view v-for="(item, index) in activity_list" :key="index">
+        <view style="padding: 1rem 0.5rem; display: flex;">
+          <van-icon :name="icon_company" size="2.5rem" color="" style="vertical-align: sub; margin-right: 0.5rem;" /><text style="color: #222222; font-size: 1.15rem; margin-top: 0.5rem;">星光读书会</text>
+        </view>
+        <activity-card :data="item" type="me"></activity-card>
+      </view>
+    </view>
+  </view>
+  <view style="height: 6rem;"></view>
   <navbar activated="my" />
-
 </template>
 <script setup>
 import { ref } from "vue";
+import icon_vip from '@/images/icon/vip@2x.png'
+import Taro from '@tarojs/taro'
+import { AtAvatar } from 'taro-ui-vue3'
+import "taro-ui-vue3/dist/style/components/avatar.scss"
+import icon_join from '@/images/icon/canjia@2x.png'
+import icon_create from '@/images/icon/chuangjian@2x.png'
+import icon_user from '@/images/icon/peiban@2x.png'
+import icon_company from '@/images/icon/zhubanfang@2x.png'
 import navbar from '@/components/navbar.vue'
+import activityCard from '@/components/activity-card.vue'
+const activity_list = ref([{
+  title: '智慧没有烦恼',
+  address: '上海市杨浦区军工路100号A座05室',
+}, {
+  title: '万人共乘浪漫热气球',
+  address: '',
+}, {
+  title: '八段锦',
+  address: '',
+}, {
+  title: '智慧没有烦恼',
+  address: '上海市杨浦区军工路100号A座05室',
+}, {
+  title: '万人共乘浪漫热气球',
+  address: '',
+}, {
+  title: '八段锦',
+  address: '',
+}]);
 </script>
 <script>