Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9ab1f050 1 parent 28fb0236

✨ feat(主办方管理): API联调，搜索功能放在页面上，废弃头部设计稿设计，联调添加/删除成员功能

Inline Side-by-side
Showing 2 changed files with 215 additions and 149 deletions
1 -.my-create-activity-header { 1 +.my-create-activity-page {
2 - background-color: white; 2 + #page-header {
3 - margin: 1rem; 3 + width: 100%;
4 - padding: 0.5rem; 4 + background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png);
5 - border-radius: 1rem; 5 + background-size: contain;
6 - .header-info { 6 + background-repeat: no-repeat;
7 - display: flex; 7 + .toolbar-box {
8 - text-align: center; 8 + // background-color: white;
9 - padding-bottom: 1rem; 9 + margin: 1rem 0;
10 - margin-top: 0.5rem; 10 + padding: 1rem;
11 - .activity { 11 + padding-bottom: 0;
12 - flex: 1; 12 + border-radius: 1rem;
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 } 13 }
28 } 14 }
29 } 15 }
...@@ -71,4 +57,23 @@ ...@@ -71,4 +57,23 @@
71 margin-top: 0.5rem; 57 margin-top: 0.5rem;
72 } 58 }
73 } 59 }
60 + .handle-box {
61 + position: absolute; right: 0; bottom: 0.75rem;
62 + .add-user {
63 + color: #FFFFFF;
64 + background-color: #199A74;
65 + border-bottom-left-radius: 0.85rem;
66 + border-top-left-radius: 0.85rem;
67 + padding: 0.25rem 0.5rem 0.25rem 1rem;
68 + font-size: 0.9rem;
69 + }
70 + .del-user {
71 + color: #FFFFFF;
72 + background-color: #E32525;
73 + border-bottom-left-radius: 0.85rem;
74 + border-top-left-radius: 0.85rem;
75 + padding: 0.25rem 0.5rem 0.25rem 1rem;
76 + font-size: 0.9rem;
77 + }
78 + }
74 } 79 }
......
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-10 14:39:20 4 + * @LastEditTime: 2022-10-25 13:13:28
5 * @FilePath: /swx/src/pages/userManage/index.vue 5 * @FilePath: /swx/src/pages/userManage/index.vue
6 * @Description: 单个主办方管理页面 6 * @Description: 单个主办方管理页面
7 --> 7 -->
8 <template> 8 <template>
9 <div class="my-create-activity-page"> 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;"> 10 + <view id="page-header">
11 <view style="height: 4rem; padding: 1rem;"> 11 <view style="height: 4rem; padding: 1rem;">
12 <van-row> 12 <van-row>
13 <van-col span="18"> 13 <van-col span="18">
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
23 </van-col> 23 </van-col>
24 </van-row> 24 </van-row>
25 </view> 25 </view>
26 - <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;"> 26 + <view class="toolbar-box">
27 - <view style="display: flex; text-align: center;"> 27 + <!-- <view style="display: flex; text-align: center;">
28 <view @tap="goToAddUser" style="flex: 1;"> 28 <view @tap="goToAddUser" style="flex: 1;">
29 <van-icon :name="icon_add" size="3.5rem" color="" style="vertical-align: middle;" /> 29 <van-icon :name="icon_add" size="3.5rem" color="" style="vertical-align: middle;" />
30 <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;添加成员</text> 30 <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;添加成员</text>
...@@ -33,54 +33,72 @@ ...@@ -33,54 +33,72 @@
33 <van-icon :name="icon_user" size="3.5rem" color="" style="vertical-align: middle;" /> 33 <van-icon :name="icon_user" size="3.5rem" color="" style="vertical-align: middle;" />
34 <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;搜索用户</text> 34 <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;搜索用户</text>
35 </view> 35 </view>
36 + </view> -->
37 + <view style="border: 1px solid #199A74; border-radius: 2rem; background-color: #FFF;">
38 + <van-row>
39 + <van-col span="20">
40 + <view style="padding: 0.7rem 1rem 0rem 1.5rem;">
41 + <input :value="search" class="weui-input" @blur="bindKeyBlur" @input="bindKeyInput" placeholder="请输入用户名姓名/手机号查找" style="width: 100%;" />
42 + </view>
43 + </van-col>
44 + <van-col span="4">
45 + <view @tap="onSearch"
46 + style="background-color: #199A74; border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; text-align: center; height: auto;">
47 + <van-icon name="search" size="2.25rem" color="white" style="margin-top: 0.43rem;" />
48 + </view>
49 + </van-col>
50 + </van-row>
36 </view> 51 </view>
37 </view> 52 </view>
38 </view> 53 </view>
39 <view class="list-wrapper" style="margin: 1rem;"> 54 <view class="list-wrapper" style="margin: 1rem;">
40 - <view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;"> 55 + <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
41 <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;"> 56 <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
42 - <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">所有用户</view> 57 + <view @tap="toggleColum('player')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">所有用户</view>
43 </view> 58 </view>
44 <view style="display: inline-block; line-height: 60rpx; position: relative;"> 59 <view style="display: inline-block; line-height: 60rpx; position: relative;">
45 - <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">全部成员</view> 60 + <view @tap="toggleColum('volunteer')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">全部成员</view>
46 </view> 61 </view>
47 </view> 62 </view>
48 - <view> 63 + <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
49 - <view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;"> 64 + <view>
50 - <van-row> 65 + <view v-for="(item, index) in member_list" :key="index" class="list-item" style="position: relative;">
51 - <van-col span="6"> 66 + <van-row>
52 - <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }"></view> 67 + <van-col span="6">
53 - </van-col> 68 + <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar ? item.avatar : 'http://gyzs.onwall.cn/tou%402x.png'})`, position: 'relative' }"></view>
54 - <van-col span="14"> 69 + </van-col>
55 - <view class="content"> 70 + <van-col span="14">
56 - <view class="title">{{ item.name }}</view> 71 + <view class="content">
57 - <view style="color: #199A74; margin-top: 0.5rem;" class="phone" @tap="onPhoneClick(item.phone)"> 72 + <view class="title">{{ item.name }}</view>
58 - <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" /> 73 + <view style="color: #199A74; margin-top: 0.5rem;" class="phone" @tap="onPhoneClick(item.phone)">
59 - {{ item.phone }} 74 + <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
75 + {{ item.phone }}
76 + </view>
60 </view> 77 </view>
61 - </view> 78 + </van-col>
62 - </van-col> 79 + <van-col span="4">
63 - <van-col span="4"> 80 + <view v-if="item.role === 'player'" style="margin-top: 0.5rem;">
64 - <view style="margin-top: 0.5rem;"> 81 + <van-tag v-if="!item.partner" :round="true" color="#FFF5E4" text-color="#FF7808" size="large">待分配</van-tag>
65 - <van-tag v-if="item.status === '1'" :round="true" color="#FFF5E4" text-color="#FF7808" size="large">待分配</van-tag> 82 + <van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">已分配</van-tag>
66 - <van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">已分配</van-tag> 83 + </view>
67 - </view> 84 + </van-col>
68 - </van-col> 85 + </van-row>
69 - </van-row> 86 + <view class="handle-box">
70 - <view style="position: absolute; right: 0; bottom: 0.75rem;"> 87 + <view v-if="item.role === 'player'" @tap="addUser(item)" class="add-user">添加成员</view>
71 - <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> 88 + <view v-if="item.role === 'volunteer'" @tap="delUser(item)" class="del-user">删除成员</view>
89 + </view>
72 </view> 90 </view>
73 </view> 91 </view>
74 - </view> 92 + </scroll-view>
75 </view> 93 </view>
76 - <view style="height: 2rem;"></view>
77 </div> 94 </div>
78 <van-dialog id="van-dialog" /> 95 <van-dialog id="van-dialog" />
96 + <van-toast id="van-toast" />
79 </template> 97 </template>
80 98
81 <script setup> 99 <script setup>
82 import { ref, onMounted } from "vue"; 100 import { ref, onMounted } from "vue";
83 -import icon_vip from '@/images/icon/vip@2x.png' 101 +// import icon_vip from '@/images/icon/vip@2x.png'
84 import icon_p from '@/images/icon/zhubanfang@2x.png' 102 import icon_p from '@/images/icon/zhubanfang@2x.png'
85 import Taro from '@tarojs/taro' 103 import Taro from '@tarojs/taro'
86 import { AtAvatar } from 'taro-ui-vue3' 104 import { AtAvatar } from 'taro-ui-vue3'
...@@ -89,93 +107,21 @@ import icon_tel from '@/images/icon/tel@2x.png' ...@@ -89,93 +107,21 @@ import icon_tel from '@/images/icon/tel@2x.png'
89 import icon_add from '@/images/icon/chengyuan@2x.png' 107 import icon_add from '@/images/icon/chengyuan@2x.png'
90 import icon_user from '@/images/icon/yonghu@2x.png' 108 import icon_user from '@/images/icon/yonghu@2x.png'
91 import Dialog from '@vant/weapp/dist/dialog/dialog'; 109 import Dialog from '@vant/weapp/dist/dialog/dialog';
110 +import Toast from '@/components/vant-weapp/toast/toast';
92 111
93 let instance = Taro.getCurrentInstance(); 112 let instance = Taro.getCurrentInstance();
94 const $query = ref(''); 113 const $query = ref('');
95 -onMounted(() => { 114 +onMounted(async () => {
96 // 获取页面参数 115 // 获取页面参数
97 $query.value = instance.router.params; 116 $query.value = instance.router.params;
98 }) 117 })
99 118
100 -const activityList = ref([{
101 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
102 - name: '净妙',
103 - phone: '18789800786',
104 - status: '1',
105 -}, {
106 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
107 - name: '人在路途',
108 - phone: '18789800786',
109 - status: '2',
110 -}, {
111 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
112 - name: '寒潭秋月心如洗',
113 - phone: '18789800786',
114 - status: '3',
115 -}, {
116 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
117 - name: '净妙',
118 - phone: '18789800786',
119 - status: '1',
120 -}, {
121 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
122 - name: '人在路途',
123 - phone: '18789800786',
124 - status: '2',
125 -}, {
126 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
127 - name: '寒潭秋月心如洗',
128 - phone: '18789800786',
129 - status: '3',
130 -}])
131 -
132 const onPhoneClick = (number) => { 119 const onPhoneClick = (number) => {
133 Taro.makePhoneCall({ 120 Taro.makePhoneCall({
134 phoneNumber: number 121 phoneNumber: number
135 }) 122 })
136 } 123 }
137 124
138 -const activated = ref(1);
139 -const toggleColum = (type) => {
140 - if (type === 'activity') {
141 - activityList.value = [{
142 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
143 - name: '净妙',
144 - phone: '18789800786',
145 - status: '1',
146 - }, {
147 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
148 - name: '人在路途',
149 - phone: '18789800786',
150 - status: '2',
151 - }, {
152 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
153 - name: '寒潭秋月心如洗',
154 - phone: '18789800786',
155 - status: '3',
156 - }, {
157 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
158 - name: '净妙',
159 - phone: '18789800786',
160 - status: '1',
161 - }, {
162 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
163 - name: '人在路途',
164 - phone: '18789800786',
165 - status: '2',
166 - }, {
167 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
168 - name: '寒潭秋月心如洗',
169 - phone: '18789800786',
170 - status: '3',
171 - }];
172 - activated.value = 1
173 - } else {
174 - activityList.value = [];
175 - activated.value = 2
176 - }
177 -}
178 -
179 const goToUserInfo = () => { 125 const goToUserInfo = () => {
180 Taro.navigateTo({ 126 Taro.navigateTo({
181 url: '../userInfo/index' 127 url: '../userInfo/index'
...@@ -184,13 +130,13 @@ const goToUserInfo = () => { ...@@ -184,13 +130,13 @@ const goToUserInfo = () => {
184 130
185 const goToAddUser = () => { 131 const goToAddUser = () => {
186 Taro.navigateTo({ 132 Taro.navigateTo({
187 - url: '../userAdd/index' 133 + url: '../userAdd/index?host_id=' + getCurrentPageParam().host_id
188 }) 134 })
189 } 135 }
190 136
191 const goToSearchUser = () => { 137 const goToSearchUser = () => {
192 Taro.navigateTo({ 138 Taro.navigateTo({
193 - url: '../userSearch/index' 139 + url: '../userSearch/index?host_id=' + getCurrentPageParam().host_id
194 }) 140 })
195 } 141 }
196 142
...@@ -200,24 +146,139 @@ const editInfo = (id) => { ...@@ -200,24 +146,139 @@ const editInfo = (id) => {
200 }) 146 })
201 } 147 }
202 148
203 -const addUser = () => {
204 - Dialog.confirm({
205 - title: '温馨提示',
206 - message: '是否确认添加成员？',
207 - // confirmButtonColor: '#199A74'
208 - })
209 - .then(() => {
210 - // on confirm
211 - })
212 - .catch(() => {
213 - // on cancel
214 - });
215 -}
216 </script> 149 </script>
217 150
218 <script> 151 <script>
219 import "./index.less"; 152 import "./index.less";
153 +import { listMemberAPI, setRoleMemberAPI } from '@/api/Member/index';
154 +import { $ } from '@tarojs/extend'
155 +import mixin from '@/utils/mixin';
156 +import { getCurrentPageParam } from "@/utils/weapp";
157 +
220 export default { 158 export default {
221 - name: "demoPage", 159 + name: "userManagePage",
160 + mixins: [mixin.init],
161 + async onShow () {
162 + // 获取活动和轮播信息
163 + const { code, data } = await listMemberAPI({ host_id: getCurrentPageParam().host_id, role: this.role, page: this.page, limit: this.limit });
164 + if (code) {
165 + this.member_list = data.member_list;
166 + this.page = this.page + 1;
167 + }
168 + },
169 + onHide () { // 离开当前页面
170 + this.page = 0;
171 + this.flag = true;
172 + },
173 + mounted () {
174 + // 设置滚动列表可视高度
175 + const windowHeight = wx.getSystemInfoSync().windowHeight;
176 + setTimeout(async () => {
177 + const headerHeight = await $('#page-header').height();
178 + const navHeight = await $('#navbar-page').height();
179 + this.scrollStyle = {
180 + height: windowHeight - headerHeight - navHeight - 50 + 'px'
181 + }
182 + }, 500);
183 + },
184 + data() {
185 + return {
186 + member_list: [],
187 + role: 'player',
188 + flag: true,
189 + page: 0,
190 + limit: 10,
191 + scrollStyle: { height: '1000rpx' },
192 + activated: 1,
193 + search: ''
194 + };
195 + },
196 + methods: {
197 + onSearch () {
198 + this.member_list = [];
199 + this.page = 0;
200 + this.flag = true;
201 + this.getList()
202 + },
203 + bindKeyBlur (e) {
204 + this.search = e.detail.value;
205 + this.onSearch()
206 + },
207 + bindKeyInput (e) {
208 + this.search = e.detail.value;
209 + if (!this.search) {
210 + this.onSearch()
211 + }
212 + },
213 + onScrollToLower () {
214 + if(!this.flag){
215 + return
216 + }
217 + this.flag = false;
218 + this.getList();
219 + },
220 + async getList () {
221 + // 获取推荐活动列表
222 + const { code, data } = await listMemberAPI({ search: this.search, host_id: getCurrentPageParam().host_id, role: this.role, page: this.page, limit: this.limit });
223 + if (code) {
224 + if (data.member_list.length) {
225 + this.member_list = this.member_list.concat(data.member_list);
226 + this.page = this.page + 1;
227 + this.flag = true;
228 + } else {
229 + Toast('没有数据')
230 + }
231 + }
232 + },
233 + toggleColum (type) {
234 + if (type === 'player') {
235 + this.activated = 1;
236 + this.role = 'player';
237 + } else {
238 + this.activated = 2;
239 + this.role = 'volunteer';
240 + }
241 + this.member_list = [];
242 + this.flag = true;
243 + this.page = 0;
244 + this.getList();
245 + },
246 + addUser ({ id }) {
247 + Dialog.confirm({
248 + title: '温馨提示',
249 + message: '是否确认添加成员？',
250 + confirmButtonColor: '#199A74'
251 + })
252 + .then(async () => {
253 + // 添加成员
254 + const { code } = await setRoleMemberAPI({ i: id, role: 'volunteer' });
255 + if (code) {
256 + this.member_list.splice(this.member_list.findIndex(item => item.id === id), 1);
257 + Toast.success('添加成功');
258 + }
259 + })
260 + .catch(() => {
261 + // on cancel
262 + });
263 + },
264 + delUser ({ id }) {
265 + Dialog.confirm({
266 + title: '温馨提示',
267 + message: '是否确认删除成员？',
268 + confirmButtonColor: '#199A74'
269 + })
270 + .then(async () => {
271 + // 删除成员
272 + const { code } = await setRoleMemberAPI({ i: id, role: 'player' });
273 + if (code) {
274 + this.member_list.splice(this.member_list.findIndex(item => item.id === id), 1);
275 + Toast.success('删除成功');
276 + }
277 + })
278 + .catch(() => {
279 + // on cancel
280 + });
281 + },
282 + },
222 }; 283 };
223 </script> 284 </script>
......