index.vue
4.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!--
* @Date: 2022-09-21 14:51:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 16:04:59
* @FilePath: /swx/src/pages/my/index.vue
* @Description: 文件描述
-->
<template>
<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="18">
<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="6">
<view @tap="myProject()" 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 @tap="joinActivity" 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 @tap="createActivity" 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 @tap="followUser" 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: '',
}]);
// 参加的活动
const joinActivity = () => {
Taro.navigateTo({
url: '../myActivityList/index'
})
}
// 创建的活动
const createActivity = () => {
Taro.navigateTo({
url: '../myCreateActivity/index'
})
}
// 陪伴的用户
const followUser = () => {
Taro.navigateTo({
url: '../myFollowUser/index'
})
}
// 我的主办方
const myProject = () => {
Taro.navigateTo({
url: '../projectManage/index'
})
}
</script>
<script>
import "./index.less";
export default {
name: "myPage",
};
</script>