Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
173f6269 1 parent 2c599bca

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

Inline Side-by-side
Showing 3 changed files with 127 additions and 7 deletions
<!--
* @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;
}
}
......
.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;
}
}
}
......
<!--
* @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>
......