Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
85c5e7e7 1 parent a4a363ba

新增主办方管理页面

Inline Side-by-side
Showing 5 changed files with 306 additions and 3 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-09 09:25:56 5 + * @LastEditTime: 2022-10-09 11:48:35
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -38,6 +38,7 @@ export default { ...@@ -38,6 +38,7 @@ export default {
38 'pages/myFollowUser/index', 38 'pages/myFollowUser/index',
39 'pages/projectManage/index', 39 'pages/projectManage/index',
40 'pages/createProject/index', 40 'pages/createProject/index',
41 + 'pages/userManage/index',
41 ], 42 ],
42 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 43 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
43 { 44 {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-10-09 09:50:24 4 + * @LastEditTime: 2022-10-09 13:08:46
5 * @FilePath: /swx/src/pages/projectManage/index.vue 5 * @FilePath: /swx/src/pages/projectManage/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 </view> 22 </view>
23 </van-col> 23 </van-col>
24 <van-col span="4"> 24 <van-col span="4">
25 - <view style="color: #199A74; border: 1px solid #199A74; border-radius: 2rem; text-align: center; margin-top: 0.5rem;">管理</view> 25 + <view @tap="onManage" style="color: #199A74; border: 1px solid #199A74; border-radius: 2rem; text-align: center; margin-top: 0.5rem;">管理</view>
26 </van-col> 26 </van-col>
27 </van-row> 27 </van-row>
28 </view> 28 </view>
...@@ -74,6 +74,12 @@ const onSubmit = () => { ...@@ -74,6 +74,12 @@ const onSubmit = () => {
74 url: '../createProject/index' 74 url: '../createProject/index'
75 }) 75 })
76 } 76 }
77 +
78 +const onManage = () => {
79 + Taro.navigateTo({
80 + url: '../userManage/index'
81 + })
82 +}
77 </script> 83 </script>
78 84
79 <script> 85 <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-09 14:36:51
5 + * @FilePath: /swx/src/pages/userManage/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 style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
28 + <view style="display: flex; text-align: center;">
29 + <view @tap="goToAddUser" style="flex: 1;">
30 + <van-icon :name="icon_add" size="3.5rem" color="" style="vertical-align: middle;" />
31 + <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;添加成员</text>
32 + </view>
33 + <view @tap="goToSearchUser" style="flex: 1; border-left: 1px solid #F5F5F5;">
34 + <van-icon :name="icon_user" size="3.5rem" color="" style="vertical-align: middle;" />
35 + <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;搜索用户</text>
36 + </view>
37 + </view>
38 + </view>
39 + </view>
40 + <view class="list-wrapper" style="margin: 1rem;">
41 + <view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
42 + <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
43 + <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">所有用户</view>
44 + </view>
45 + <view style="display: inline-block; line-height: 60rpx; position: relative;">
46 + <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">全部成员</view>
47 + </view>
48 + </view>
49 + <view>
50 + <view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;">
51 + <van-row>
52 + <van-col span="6">
53 + <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }"></view>
54 + </van-col>
55 + <van-col span="14">
56 + <view class="content">
57 + <view class="title">{{ item.name }}</view>
58 + <view style="color: #199A74; margin-top: 0.5rem;" class="phone" @tap="onPhoneClick(item.phone)">
59 + <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
60 + {{ item.phone }}
61 + </view>
62 + </view>
63 + </van-col>
64 + <van-col span="4">
65 + <view style="margin-top: 0.5rem;">
66 + <van-tag v-if="item.status === '1'" :round="true" color="#FFF5E4" text-color="#FF7808" size="large">待分配</van-tag>
67 + <van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">已分配</van-tag>
68 + </view>
69 + </van-col>
70 + </van-row>
71 + <view style="position: absolute; right: 0; bottom: 0.75rem;">
72 + <view @tap="addUser" style="color: #FFFFFF; background-color: #199A74; border-bottom-left-radius: 0.85rem; border-top-left-radius: 0.85rem; padding: 0.25rem 0.5rem 0.25rem 1rem; font-size: 0.9rem;">添加成员</view>
73 + </view>
74 + </view>
75 + </view>
76 + </view>
77 + <view style="height: 2rem;"></view>
78 + </div>
79 + <van-dialog id="van-dialog" />
80 +</template>
81 +
82 +<script setup>
83 +import { ref } from "vue";
84 +import icon_vip from '@/images/icon/vip@2x.png'
85 +import Taro from '@tarojs/taro'
86 +import { AtAvatar } from 'taro-ui-vue3'
87 +import "taro-ui-vue3/dist/style/components/avatar.scss"
88 +import icon_tel from '@/images/icon/tel@2x.png'
89 +import icon_add from '@/images/icon/chengyuan@2x.png'
90 +import icon_user from '@/images/icon/yonghu@2x.png'
91 +import Dialog from '@vant/weapp/dist/dialog/dialog';
92 +
93 +const activityList = ref([{
94 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
95 + name: '净妙',
96 + phone: '18789800786',
97 + status: '1',
98 +}, {
99 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
100 + name: '人在路途',
101 + phone: '18789800786',
102 + status: '2',
103 +}, {
104 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
105 + name: '寒潭秋月心如洗',
106 + phone: '18789800786',
107 + status: '3',
108 +}, {
109 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
110 + name: '净妙',
111 + phone: '18789800786',
112 + status: '1',
113 +}, {
114 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
115 + name: '人在路途',
116 + phone: '18789800786',
117 + status: '2',
118 +}, {
119 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
120 + name: '寒潭秋月心如洗',
121 + phone: '18789800786',
122 + status: '3',
123 +}])
124 +
125 +const onPhoneClick = (number) => {
126 + Taro.makePhoneCall({
127 + phoneNumber: number
128 + })
129 +}
130 +
131 +const activated = ref(1);
132 +const toggleColum = (type) => {
133 + if (type === 'activity') {
134 + activityList.value = [{
135 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
136 + name: '净妙',
137 + phone: '18789800786',
138 + status: '1',
139 + }, {
140 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
141 + name: '人在路途',
142 + phone: '18789800786',
143 + status: '2',
144 + }, {
145 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
146 + name: '寒潭秋月心如洗',
147 + phone: '18789800786',
148 + status: '3',
149 + }, {
150 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
151 + name: '净妙',
152 + phone: '18789800786',
153 + status: '1',
154 + }, {
155 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
156 + name: '人在路途',
157 + phone: '18789800786',
158 + status: '2',
159 + }, {
160 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
161 + name: '寒潭秋月心如洗',
162 + phone: '18789800786',
163 + status: '3',
164 + }];
165 + activated.value = 1
166 + } else {
167 + activityList.value = [];
168 + activated.value = 2
169 + }
170 +}
171 +
172 +const goToUserInfo = () => {
173 + Taro.navigateTo({
174 + url: '../userInfo/index'
175 + })
176 +}
177 +
178 +const goToAddUser = () => {
179 + Taro.navigateTo({
180 + url: '../userAdd/index'
181 + })
182 +}
183 +
184 +const goToSearchUser = () => {
185 + Taro.navigateTo({
186 + url: '../userSearch/index'
187 + })
188 +}
189 +
190 +const addUser = () => {
191 + Dialog.confirm({
192 + title: '温馨提示',
193 + message: '是否确认添加成员？',
194 + // confirmButtonColor: '#199A74'
195 + })
196 + .then(() => {
197 + // on confirm
198 + })
199 + .catch(() => {
200 + // on cancel
201 + });
202 +}
203 +</script>
204 +
205 +<script>
206 +import "./index.less";
207 +export default {
208 + name: "demoPage",
209 +};
210 +</script>