Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5cd25246 1 parent e55477f6

新增陪伴的用户页面

Inline Side-by-side
Showing 5 changed files with 309 additions and 5 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-27 15:57:59 3 * @Date: 2022-05-27 15:57:59
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-10-08 11:56:16 5 + * @LastEditTime: 2022-10-08 14:04:37
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -35,6 +35,7 @@ export default { ...@@ -35,6 +35,7 @@ export default {
35 'pages/editInfo/index', 35 'pages/editInfo/index',
36 'pages/myActivityList/index', 36 'pages/myActivityList/index',
37 'pages/myCreateActivity/index', 37 'pages/myCreateActivity/index',
38 + 'pages/myFollowUser/index',
38 ], 39 ],
39 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 40 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
40 { 41 {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-21 14:51:44 2 * @Date: 2022-09-21 14:51:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-30 17:17:49 4 + * @LastEditTime: 2022-10-08 11:58:10
5 * @FilePath: /swx/src/pages/my/index.vue 5 * @FilePath: /swx/src/pages/my/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 </view> 26 </view>
27 <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;"> 27 <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
28 <view style="display: flex; text-align: center;"> 28 <view style="display: flex; text-align: center;">
29 - <view style="flex: 1; line-height: 60rpx;"> 29 + <view @tap="joinActivity" style="flex: 1; line-height: 60rpx;">
30 <view> 30 <view>
31 <van-icon :name="icon_join" size="3rem" color="" style="vertical-align: sub;" /> 31 <van-icon :name="icon_join" size="3rem" color="" style="vertical-align: sub;" />
32 </view> 32 </view>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 <text style="font-size: 1rem; color: #222;">参加的活动</text> 34 <text style="font-size: 1rem; color: #222;">参加的活动</text>
35 </view> 35 </view>
36 </view> 36 </view>
37 - <view style="flex: 1; line-height: 60rpx;"> 37 + <view @tap="createActivity" style="flex: 1; line-height: 60rpx;">
38 <view> 38 <view>
39 <van-icon :name="icon_create" size="3rem" color="" style="vertical-align: sub;" /> 39 <van-icon :name="icon_create" size="3rem" color="" style="vertical-align: sub;" />
40 </view> 40 </view>
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
42 <text style="font-size: 1rem; color: #222;">创建的活动</text> 42 <text style="font-size: 1rem; color: #222;">创建的活动</text>
43 </view> 43 </view>
44 </view> 44 </view>
45 - <view style="flex: 1; line-height: 60rpx;"> 45 + <view @tap="followUser" style="flex: 1; line-height: 60rpx;">
46 <view> 46 <view>
47 <van-icon :name="icon_user" size="3rem" color="" style="vertical-align: sub;" /> 47 <van-icon :name="icon_user" size="3rem" color="" style="vertical-align: sub;" />
48 </view> 48 </view>
...@@ -98,6 +98,25 @@ const activity_list = ref([{ ...@@ -98,6 +98,25 @@ const activity_list = ref([{
98 title: '八段锦', 98 title: '八段锦',
99 address: '', 99 address: '',
100 }]); 100 }]);
101 +
102 +// 参加的活动
103 +const joinActivity = () => {
104 + Taro.navigateTo({
105 + url: '../myActivityList/index'
106 + })
107 +}
108 +// 创建的活动
109 +const createActivity = () => {
110 + Taro.navigateTo({
111 + url: '../myCreateActivity/index'
112 + })
113 +}
114 +// 陪伴的用户
115 +const followUser = () => {
116 + Taro.navigateTo({
117 + url: '../myFollowUser/index'
118 + })
119 +}
101 </script> 120 </script>
102 121
103 <script> 122 <script>
......
1 +/*
2 + * @Date: 2022-10-08 11:04:11
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-10-08 14:04:54
5 + * @FilePath: /swx/src/pages/myFollowUser/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '陪伴的用户',
10 + usingComponents: {
11 + },
12 +}
1 +.my-create-activity-header {
2 + background-color: white;
3 + margin: 1rem;
4 + padding: 0.5rem;
5 + border-radius: 1rem;
6 + .header-info {
7 + display: flex;
8 + text-align: center;
9 + padding-bottom: 1rem;
10 + margin-top: 0.5rem;
11 + .activity {
12 + flex: 1;
13 + height: 50rpx;
14 + line-height: 50rpx;
15 + }
16 + .job {
17 + flex: 1;
18 + border-right: 1px solid #F5F5F5;
19 + border-left: 1px solid #F5F5F5;
20 + height: 100rpx;
21 + line-height: 50rpx;
22 + }
23 + .sign {
24 + flex: 1;
25 + height: 50rpx;
26 + line-height: 50rpx;
27 + }
28 + }
29 +}
30 +
31 +.activity-title {
32 + background-color: #FFFFFF;
33 + .box {
34 + padding: 1rem 1rem 0.5rem 1rem;
35 + }
36 +}
37 +
38 +.bg-gradient {
39 + background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
40 + /*调整下划线的宽度占百分之百 高度是3px */
41 + background-size: 100% 1vw;
42 + /* 调整下划线的起始位置 左侧是0 上边是1.15em */
43 + background-position: 0 1.1rem;
44 +}
45 +
46 +.inactivate {
47 + font-size: 1rem;
48 + color: #999999;
49 +}
50 +.list-item {
51 + background-color: white;
52 + padding: 0.75rem;
53 + border-radius: 0.65rem;
54 + position: relative;
55 + margin-bottom: 1rem;
56 + .avatar {
57 + width: 100%;
58 + height: 5rem;
59 + background-size: cover;
60 + background-repeat: no-repeat;
61 + background-position: center;
62 + border-radius: 0.5rem;
63 + }
64 + .content {
65 + padding: 0.5rem 1rem;
66 + .title {
67 + font-size: 1.25rem;
68 + }
69 + .phone {
70 + color: #199A74;
71 + margin-top: 0.5rem;
72 + }
73 + }
74 +}
1 +<!--
2 + * @Date: 2022-09-19 14:11:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-10-08 15:21:37
5 + * @FilePath: /swx/src/pages/myFollowUser/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="my-create-activity-page">
10 + <view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
11 + <view style="height: 4rem; padding: 1rem;">
12 + <van-row>
13 + <van-col span="18">
14 + <view style="position: relative;">
15 + <AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
16 + <view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
17 + <text style="font-size: 1.05rem;">周三读书会（主办方）</text>
18 + <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
19 + </view>
20 + </view>
21 + </van-col>
22 + <van-col span="6">
23 + <view @tap="editInfo()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
24 + </van-col>
25 + </van-row>
26 + </view>
27 + <view class="my-create-activity-header">
28 + <view class="activity-title">
29 + <view class="box">
30 + <text class="bg-gradient" style="font-size: 1.15rem;">用户统计</text>
31 + </view>
32 + </view>
33 + <view class="header-info">
34 + <view class="activity">
35 + <view><text style="font-size: 1.25rem;">5</text>人</view>
36 + <view>
37 + <text style="font-size: 0.9rem; color: #999999;">新用户</text>
38 + </view>
39 + </view>
40 + <view class="job">
41 + <text style="font-size: 1.25rem;">24</text>人
42 + <view>
43 + <text style="font-size: 0.9rem; color: #999999;">待陪伴</text>
44 + </view>
45 + </view>
46 + <view class="job">
47 + <text style="font-size: 1.25rem;">24</text>人
48 + <view>
49 + <text style="font-size: 0.9rem; color: #999999;">用户总数</text>
50 + </view>
51 + </view>
52 + <view class="sign">
53 + <view><text style="font-size: 1.25rem;">233</text>次</view>
54 + <view>
55 + <text style="font-size: 0.9rem; color: #999999;">跟踪总数</text>
56 + </view>
57 + </view>
58 + </view>
59 + </view>
60 + </view>
61 + <view class="list-wrapper" style="margin: 1rem;">
62 + <view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
63 + <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
64 + <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">全部用户</view>
65 + </view>
66 + <view style="display: inline-block; line-height: 60rpx; position: relative;">
67 + <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">待陪伴</view>
68 + <view style="position: absolute; right: -1rem; top: 0; color: white; background-color: red; border-radius: 0.58rem; width: 1rem; height: 1rem; font-size: 0.8rem; line-height: 1rem; text-align: center;">2</view>
69 + </view>
70 + </view>
71 + <view>
72 + <view v-for="(item, index) in activityList" :key="index" class="list-item">
73 + <van-row>
74 + <van-col span="6">
75 + <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }">
76 + <view style="position: absolute; right: -0.5rem; top: -0.5rem; background-color: #FCEAE7; border-radius: 0.58rem; width: 1.2rem; height: 1.2rem; font-size: 0.7rem; line-height: 1.2rem; text-align: center; color: #E21A1A;">新</view>
77 + </view>
78 + </van-col>
79 + <van-col span="18">
80 + <view class="content">
81 + <view class="title">{{ item.name }}</view>
82 + <!-- <view class="phone" @tap="onPhoneClick(item.phone)">
83 + <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
84 + {{ item.phone }}
85 + </view> -->
86 + <view style="color: #999999;">时间描述</view>
87 + <view style="color: #999999;" class="van-ellipsis">对比上次净妙这次参与活动明显的能够融入进</view>
88 + </view>
89 + </van-col>
90 + </van-row>
91 + </view>
92 + </view>
93 + </view>
94 + <view style="height: 2rem;"></view>
95 + </div>
96 +
97 +</template>
98 +
99 +<script setup>
100 +import { ref } from "vue";
101 +import icon_vip from '@/images/icon/vip@2x.png'
102 +import Taro from '@tarojs/taro'
103 +import { AtAvatar } from 'taro-ui-vue3'
104 +import "taro-ui-vue3/dist/style/components/avatar.scss"
105 +import icon_tel from '@/images/icon/tel@2x.png'
106 +
107 +const activityList = ref([{
108 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
109 + name: '净妙',
110 + phone: '18789800786',
111 + status: '1',
112 +}, {
113 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
114 + name: '人在路途',
115 + phone: '18789800786',
116 + status: '2',
117 +}, {
118 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
119 + name: '寒潭秋月心如洗',
120 + phone: '18789800786',
121 + status: '3',
122 +}, {
123 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
124 + name: '净妙',
125 + phone: '18789800786',
126 + status: '1',
127 +}, {
128 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
129 + name: '人在路途',
130 + phone: '18789800786',
131 + status: '2',
132 +}, {
133 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
134 + name: '寒潭秋月心如洗',
135 + phone: '18789800786',
136 + status: '3',
137 +}])
138 +
139 +const onPhoneClick = (number) => {
140 + Taro.makePhoneCall({
141 + phoneNumber: number
142 + })
143 +}
144 +
145 +const activated = ref(1);
146 +const toggleColum = (type) => {
147 + if (type === 'activity') {
148 + activityList.value = [{
149 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
150 + name: '净妙',
151 + phone: '18789800786',
152 + status: '1',
153 + }, {
154 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
155 + name: '人在路途',
156 + phone: '18789800786',
157 + status: '2',
158 + }, {
159 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
160 + name: '寒潭秋月心如洗',
161 + phone: '18789800786',
162 + status: '3',
163 + }, {
164 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
165 + name: '净妙',
166 + phone: '18789800786',
167 + status: '1',
168 + }, {
169 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
170 + name: '人在路途',
171 + phone: '18789800786',
172 + status: '2',
173 + }, {
174 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
175 + name: '寒潭秋月心如洗',
176 + phone: '18789800786',
177 + status: '3',
178 + }];
179 + activated.value = 1
180 + } else {
181 + activityList.value = [];
182 + activated.value = 2
183 + }
184 +}
185 +
186 +const goToUserInfo = () => {
187 + Taro.navigateTo({
188 + url: '../userInfo/index'
189 + })
190 +}
191 +</script>
192 +
193 +<script>
194 +import "./index.less";
195 +export default {
196 + name: "demoPage",
197 +};
198 +</script>