✨ feat: 新增活动详情功能栏组件

+<!--
+ * @Date: 2022-09-26 16:10:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-26 17:14:29
+ * @FilePath: /swx/src/components/activity-bar.vue
+ * @Description: 文件描述
+-->
+<template>
+  <view class="activity-bar-page">
+    <van-row>
+      <van-col span="5">
+        <view @tap="goTo()" class="home">
+          <view style="height: 1.75rem;">
+            <van-icon :name="icon_home1" size="1.75rem" color="" />
+          </view>
+          <view><text class="home-text">首页</text></view>
+        </view>
+      </van-col>
+      <van-col span="19">
+        <view v-if="status === '1'" class="user-not-reg">
+          <view class="button">义工报名</view>
+          <view class="button">活动报名</view>
+        </view>
+        <view v-if="status === '2'" class="user-reg">
+          <view class="button">报名信息</view>
+        </view>
+        <view v-if="status === '3'" class="admin-control">
+          <view class="edit">修改活动</view>
+          <view class="list">报名列表</view>
+        </view>
+        <view v-if="status === '4'" class="staff-join">
+          <view class="button">报名活动</view>
+        </view>
+        <view v-if="status === '5'" class="staff-not-join">
+          <view class="button">义工报名</view>
+        </view>
+      </van-col>
+    </van-row>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import icon_home1 from '@/images/icon/home01@2x.png'
+
+import Taro from '@tarojs/taro'
+
+const goTo = () => {
+  Taro.redirectTo({
+    url: '../index/index'
+  })
+}
+
+// TODO: 状态待定-后期根据实际状态判断
+const status = '5';
+
+</script>
+
+<style lang="less">
+@import '@/assets/styles/base.less';
+
+.activity-bar-page {
+  position: fixed;
+  bottom: 0;
+  background-color: #FFFFFF;
+  padding-top: 0.5rem;
+  height: 5rem;
+  width: 100%;
+  box-shadow: 0rem -0.17rem 0.67rem 0rem rgba(0, 0, 0, 0.05);
+  padding-bottom: 1rem;
+
+  .home {
+    text-align: center;
+    margin-top: 0.5rem;
+  }
+
+  .home-text {
+    color: #222222;
+    font-size: 0.9rem;
+  }
+
+  .user-not-reg {
+    display: flex;
+    text-align: center;
+
+    .button {
+      padding: 0.8rem;
+      border-radius: 2rem;
+      background-color: #199A74;
+      color: #FFFFFF;
+      margin: 0.5rem 0.8rem;
+      width: 50%;
+    }
+  }
+
+  .user-reg {
+    display: flex;
+    text-align: center;
+
+    .button {
+      padding: 0.8rem;
+      border-radius: 2rem;
+      border: 1px solid #199A74;
+      background-color: #FFFFFF;
+      color: #199A74;
+      margin: 0.5rem 0.8rem;
+      width: 100%;
+    }
+  }
+
+  .admin-control {
+    display: flex;
+    text-align: center;
+
+    .edit {
+      padding: 0.8rem;
+      border-radius: 2rem;
+      background-color: #199A74;
+      color: #FFFFFF;
+      margin: 0.5rem 0.8rem;
+      width: 50%;
+    }
+
+    .list {
+      padding: 0.8rem;
+      border-radius: 2rem;
+      border: 1px solid #199A74;
+      background-color: #FFFFFF;
+      color: #199A74;
+      margin: 0.5rem 0.8rem;
+      width: 50%;
+    }
+  }
+
+  .staff-join {
+    display: flex;
+    text-align: center;
+
+    .button {
+      padding: 0.8rem;
+      border-radius: 2rem;
+      background-color: #199A74;
+      color: #FFFFFF;
+      margin: 0.5rem 0.8rem;
+      width: 100%;
+    }
+  }
+
+  .staff-not-join {
+    display: flex;
+    text-align: center;
+
+    .button {
+      padding: 0.8rem;
+      border-radius: 2rem;
+      background-color: #199A74;
+      color: #FFFFFF;
+      margin: 0.5rem 0.8rem;
+      width: 100%;
+    }
+  }
+}
+</style>