Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9bb4a7cf 1 parent 83bf6e9b

✨ feat: 修改资料页面API联调

Inline Side-by-side
Showing 2 changed files with 287 additions and 39 deletions
1 /* 1 /*
2 * @Date: 2022-10-20 13:15:00 2 * @Date: 2022-10-20 13:15:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-10-21 17:29:36 4 + * @LastEditTime: 2022-10-24 14:34:36
5 * @FilePath: /swx/src/api/Member/index.js 5 * @FilePath: /swx/src/api/Member/index.js
6 * @Description: 主办方用户 6 * @Description: 主办方用户
7 */ 7 */
...@@ -9,6 +9,9 @@ import { fn, fetch } from '../fn'; ...@@ -9,6 +9,9 @@ import { fn, fetch } from '../fn';
9 9
10 const Api = { 10 const Api = {
11 MEMBER_INFO: '/srv/?a=member_info', 11 MEMBER_INFO: '/srv/?a=member_info',
12 + MEMBER_LIST: '/srv/?a=member_list',
13 + MEMBER_TRACE_LIST: '/srv/?a=member_my_trace_list',
14 + MEMBER_EDIT: '/srv/?a=member_edit',
12 } 15 }
13 16
14 /** 17 /**
...@@ -16,3 +19,21 @@ const Api = { ...@@ -16,3 +19,21 @@ const Api = {
16 * @returns 19 * @returns
17 */ 20 */
18 export const infoMemberAPI = (params) => fn(fetch.get(Api.MEMBER_INFO, params)); 21 export const infoMemberAPI = (params) => fn(fetch.get(Api.MEMBER_INFO, params));
22 +
23 +/**
24 + * @description: 主办方用户列表
25 + * @returns
26 + */
27 +export const listMemberAPI = (params) => fn(fetch.get(Api.MEMBER_LIST, params));
28 +
29 +/**
30 + * @description: 我陪伴的用户列表
31 + * @returns
32 + */
33 +export const traceMemberAPI = (params) => fn(fetch.get(Api.MEMBER_TRACE_LIST, params));
34 +
35 +/**
36 + * @description: 修改用户资料
37 + * @returns
38 + */
39 +export const editMemberAPI = (params) => fn(fetch.post(Api.MEMBER_EDIT, params));
......
1 <!-- 1 <!--
2 * @Date: 2022-09-30 09:53:14 2 * @Date: 2022-09-30 09:53:14
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-30 14:45:05 4 + * @LastEditTime: 2022-10-24 15:54:12
5 * @FilePath: /swx/src/pages/editInfo/index.vue 5 * @FilePath: /swx/src/pages/editInfo/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -17,88 +17,315 @@ ...@@ -17,88 +17,315 @@
17 <view class="at-input" style="margin-right: 1rem;"> 17 <view class="at-input" style="margin-right: 1rem;">
18 <view class="at-input__container"> 18 <view class="at-input__container">
19 <label class="h5-label at-input__title at-input__title">用户名</label> 19 <label class="h5-label at-input__title at-input__title">用户名</label>
20 - <input class="h5-input at-input__input" placeholder-class="placeholder" :placeholder="username" :disabled="true"/> 20 + <input class="h5-input at-input__input" placeholder-class="placeholder" @input="bindUsernameInput" :value="username" :placeholder="username"/>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="at-input" style="margin-right: 1rem;"> 23 <view class="at-input" style="margin-right: 1rem;">
24 <view class="at-input__container"> 24 <view class="at-input__container">
25 - <label class="h5-label at-input__title at-input__title">状态</label> 25 + <label class="h5-label at-input__title at-input__title">手机号</label>
26 - <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择用户状态" :disabled="true"/> 26 + <input class="h5-input at-input__input" placeholder-class="placeholder" @input="bindPhoneInput" :value="phone" :placeholder="phone"/>
27 - <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
28 </view> 27 </view>
29 </view> 28 </view>
30 - <view class="at-input" style="margin-right: 1rem;"> 29 + <view v-if="role === 'player'" class="at-input">
31 <view class="at-input__container"> 30 <view class="at-input__container">
32 - <label class="h5-label at-input__title at-input__title">类型</label> 31 + <label class="h5-label at-input__title at-input__title">年龄段</label>
33 - <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择用户类型" :disabled="true"/> 32 + <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="age_group" placeholder="请选择年龄范围" :disabled="true"/>
34 - <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view> 33 + <view style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
34 + </view>
35 + </view>
36 + <view class="at-input">
37 + <view class="at-input__container">
38 + <label class="h5-label at-input__title at-input__title">性别</label>
39 + <van-radio-group
40 + :value="user_sex"
41 + @change="onSexChange"
42 + direction="horizontal"
43 + >
44 + <van-radio name="man" checked-color="#199A74">男士</van-radio>
45 + <van-radio name="woman" checked-color="#199A74">女士</van-radio>
46 + </van-radio-group>
35 </view> 47 </view>
36 </view> 48 </view>
37 <view class="at-input" style="margin-right: 1rem;"> 49 <view class="at-input" style="margin-right: 1rem;">
38 <view class="at-input__container"> 50 <view class="at-input__container">
39 - <label class="h5-label at-input__title at-input__title">推荐人</label> 51 + <label class="h5-label at-input__title at-input__title">状态</label>
40 - <input class="h5-input at-input__input" placeholder-class="placeholder" placeholder="请输入推荐人姓名" :disabled="true"/> 52 + <input @tap="show_status_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择用户状态" :disabled="true"/>
53 + <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon @tap="show_status_popup=true" :name="icon_sel" color="" /></view>
41 </view> 54 </view>
42 </view> 55 </view>
43 <view class="at-input" style="margin-right: 1rem;"> 56 <view class="at-input" style="margin-right: 1rem;">
44 <view class="at-input__container"> 57 <view class="at-input__container">
58 + <label class="h5-label at-input__title at-input__title">类型</label>
59 + <input @tap="show_type_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_type" placeholder="请选择用户类型" :disabled="true"/>
60 + <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon @tap="show_type_popup=true" :name="icon_sel" color="" /></view>
61 + </view>
62 + </view>
63 + <view v-if="role === 'volunteer'" class="at-input" style="margin-right: 1rem;">
64 + <view class="at-input__container">
45 <label class="h5-label at-input__title at-input__title">陪伴者</label> 65 <label class="h5-label at-input__title at-input__title">陪伴者</label>
46 - <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择跟踪人" :disabled="true"/> 66 + <input @tap="show_partner_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_partner.text" placeholder="请选择跟踪人" :disabled="true"/>
47 - <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view> 67 + <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon @tap="show_partner_popup=true" :name="icon_sel" color="" /></view>
48 </view> 68 </view>
49 </view> 69 </view>
50 </view> 70 </view>
51 </view> 71 </view>
52 <bottom-button @on-submit="onSubmit">保存</bottom-button> 72 <bottom-button @on-submit="onSubmit">保存</bottom-button>
53 73
74 + <!-- 年龄段弹出框 -->
75 + <van-popup :show="show_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
76 + <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="age_columns" toolbar-class="picker-toolbar"
77 + :default-index="defaultIndex"
78 + @confirm="onAgeConfirm" @cancel="onAgeCancel" @change="onAgeChange" />
79 + </van-popup>
54 <!-- 陪伴状态弹出框 --> 80 <!-- 陪伴状态弹出框 -->
55 - <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true"> 81 + <van-popup :show="show_status_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
56 - <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="columns" toolbar-class="picker-toolbar" 82 + <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_columns" toolbar-class="picker-toolbar"
57 - @confirm="onConfirm" @cancel="onCancel" @change="onChange" /> 83 + :default-index="defaultStatusIndex"
84 + @confirm="onStatusConfirm" @cancel="onStatusCancel" />
85 + </van-popup>
86 + <!-- 陪伴类型弹出框 -->
87 + <van-popup :show="show_type_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
88 + <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="type_columns" toolbar-class="picker-toolbar"
89 + :default-index="defaultTypeIndex"
90 + @confirm="onTypeConfirm" @cancel="onTypeCancel" />
91 + </van-popup>
92 + <!-- 陪伴者弹出框 -->
93 + <van-popup :show="show_partner_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
94 + <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="partner_columns" toolbar-class="picker-toolbar"
95 + :default-index="defaultPartnerIndex"
96 + @confirm="onPartnerConfirm" @cancel="onPartnerCancel" />
58 </van-popup> 97 </van-popup>
98 + <van-toast id="van-toast" />
99 +
59 </template> 100 </template>
60 101
61 <script setup> 102 <script setup>
62 -import { ref } from "vue"; 103 +import { ref, onMounted, getCurrentInstance } from "vue";
63 -
64 import icon_sel from '@/images/icon/sel@2x.png' 104 import icon_sel from '@/images/icon/sel@2x.png'
65 import bottomButton from "@/components/bottom-button"; 105 import bottomButton from "@/components/bottom-button";
66 import Taro from '@tarojs/taro' 106 import Taro from '@tarojs/taro'
107 +import { getCurrentPageParam } from "@/utils/weapp";
108 +import { DEFAULT_HOST_STATUS, DEFAULT_HOST_TYPE } from '@/utils/sysData'
109 +import { hostInfoAPI } from '@/api/Host/index';
110 +import { listMemberAPI, editMemberAPI, infoMemberAPI } from '@/api/Member/index';
111 +import Toast from '@/components/vant-weapp/toast/toast';
67 112
68 -const username = ref('精妙'); 113 +/**
69 -const message = ref(''); 114 + * 活动参与者有年龄段字段，没有陪伴者字段
115 + * 义工没有年龄段字段，有陪伴者字段
116 + * */
117 +const id = ref('');
118 +const username = ref('');
119 +const phone = ref('');
120 +const user_sex = ref('');
121 +const age_group = ref('');
122 +const role = ref('');
123 +const partner = ref('');
124 +const status_columns = ref([]);
125 +const type_columns = ref([]);
126 +const partner_columns = ref([]);
127 +const defaultStatusIndex = ref(0);
128 +const defaultTypeIndex = ref(0);
129 +const defaultPartnerIndex = ref(0);
70 130
71 -const onSubmit = (val) => { 131 +onMounted(async () => {
72 - console.warn(val); 132 + const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id });
73 - Taro.showToast({ 133 + if (code) {
74 - title: '请检查输入项', 134 + username.value = data.member.name;
75 - icon: 'error', 135 + age_group.value = data.member.age_group;
76 - duration: 2000 136 + user_sex.value = data.member.gender;
137 + id.value = data.member.id;
138 + phone.value = data.member.phone;
139 + user_type.value = data.member.type;
140 + user_status.value = data.member.status;
141 + role.value = data.member.role;
142 + partner.value = data.member.partner;
143 + }
144 + // 年龄段存在，默认选中
145 + if (age_group.value) {
146 + age_columns.forEach((item, index) => {
147 + if (age_group.value === item) {
148 + defaultIndex.value = index;
149 + }
150 + })
151 + }
152 + const host = await hostInfoAPI({ i: getCurrentPageParam().host_id });
153 + if (host.code) {
154 + status_columns.value = [...DEFAULT_HOST_STATUS, ...host.data.user_status];
155 + type_columns.value = [...DEFAULT_HOST_TYPE, ...host.data.user_type];
156 + }
157 + // 还原选中状态
158 + status_columns.value.forEach((item, index) => {
159 + if (data.member.status === item) {
160 + defaultStatusIndex.value = index;
161 + }
77 }); 162 });
78 - Taro.redirectTo({ 163 + type_columns.value.forEach((item, index) => {
79 - url: '../joinSuccess/index' 164 + if (data.member.type === item) {
80 - }) 165 + defaultTypeIndex.value = index;
81 -} 166 + }
167 + });
168 + const member = await listMemberAPI({ host_id: getCurrentPageParam().host_id, role: 'volunteer', limit: 1000 });
169 + if (member.code) {
170 + partner_columns.value = member.data.member_list.map(item => ({ key: item.id, text: item.name }));
171 + // 义工类型，陪伴者存在时
172 + if (partner.value) {
173 + member.data.member_list.forEach((item, index) => {
174 + if (partner.value === item.id) {
175 + defaultPartnerIndex.value = index;
176 + user_partner.value = {
177 + key: item.id,
178 + text: item.name,
179 + };
180 + }
181 + })
182 + }
183 + }
184 +});
82 185
83 const show_popup = ref(false); 186 const show_popup = ref(false);
187 +const age_columns = ['10-19岁', '20-29岁', '30-39岁', '40-49岁', '50-59岁', '60-69岁', '70-79岁', '80岁以上']
188 +const defaultIndex = ref(0);
189 +const onAgeChange = (event) => {
190 +}
191 +const onAgeConfirm = (event) => {
192 + const detail = event.detail;
193 + age_group.value = detail.value;
194 + show_popup.value = false;
195 +}
196 +const onAgeCancel = (event) => {
197 + show_popup.value = false;
198 +}
199 +
200 +const onSexChange = ({ detail }) => {
201 + user_sex.value = detail;
202 +}
203 +
204 +const show_status_popup = ref(false);
205 +const show_type_popup = ref(false);
206 +const show_partner_popup = ref(false);
84 const user_status = ref(''); 207 const user_status = ref('');
85 -const columns = ref(['跟进', '引导']); 208 +const user_type = ref('');
86 -const onChange = (event) => { 209 +const user_partner = ref({});
210 +
211 +const onStatusConfirm = (event) => {
87 const { picker, value, index } = event.detail; 212 const { picker, value, index } = event.detail;
213 + user_status.value = value;
214 + show_status_popup.value = false;
88 } 215 }
89 -const onConfirm = (event) => { 216 +const onStatusCancel = (event) => {
217 + show_status_popup.value = false;
218 +}
219 +const onTypeConfirm = (event) => {
90 const { picker, value, index } = event.detail; 220 const { picker, value, index } = event.detail;
91 - user_status.value = value; 221 + user_type.value = value;
92 - show_popup.value = false; 222 + show_type_popup.value = false;
93 } 223 }
94 -const onCancel = (event) => { 224 +const onTypeCancel = (event) => {
95 - show_popup.value = false; 225 + show_type_popup.value = false;
226 +}
227 +const onPartnerConfirm = (event) => {
228 + const { picker, value, index } = event.detail;
229 + user_partner.value.text = value.text
230 + user_partner.value.key = value.key
231 + show_partner_popup.value = false;
232 +}
233 +const onPartnerCancel = (event) => {
234 + show_partner_popup.value = false;
235 +}
236 +
237 +const bindUsernameInput = (e) => {
238 + username.value = e.detail.value;
239 +}
240 +const bindPhoneInput = (e) => {
241 + phone.value = e.detail.value;
242 +}
243 +
244 +const validForm = () => {
245 + if (!username.value) {
246 + Toast('姓名不能为空');
247 + return false;
248 + }
249 + if (!phone.value) {
250 + Toast('手机号不能为空');
251 + return false;
252 + }
253 + const pattern = /^\d{11}$/;
254 + if (!pattern.test(phone.value)) {
255 + Toast('请输入正确手机号');
256 + return false;
257 + }
258 + if (role.value === 'player' && !age_group.value) {
259 + Toast('年龄段不能为空');
260 + return false;
261 + }
262 + if (!user_sex.value) {
263 + Toast('性别不能为空');
264 + return false;
265 + }
266 + if (!user_status.value) {
267 + Toast.fail('用户状态为空');
268 + return false;
269 + }
270 + if (!user_type.value) {
271 + Toast.fail('用户类型为空');
272 + return false;
273 + }
274 + return true;
275 +}
276 +
277 +const onSubmit = async (val) => {
278 + if (validForm()) {
279 + const params = {
280 + i: id.value,
281 + name: username.value,
282 + phone: phone.value,
283 + gender: user_sex.value,
284 + age_group: age_group.value,
285 + status: user_status.value,
286 + type: user_type.value,
287 + partner: user_partner.value.key,
288 + }
289 + const { code, data } = await editMemberAPI(params);
290 + if (code) {
291 + Taro.showToast({
292 + title: '修改成功',
293 + icon: 'success',
294 + duration: 2000
295 + });
296 + Taro.navigateBack();
297 + }
298 + }
96 } 299 }
97 </script> 300 </script>
98 301
99 <script> 302 <script>
100 import "./index.less"; 303 import "./index.less";
304 +import mixin from '@/utils/mixin';
305 +
101 export default { 306 export default {
102 - name: "demoPage", 307 + name: "editInfoPage",
308 + mixins: [mixin.init],
309 + // data () {
310 + // return {
311 + // name: '',
312 + // age_group: '',
313 + // gender: '',
314 + // id: '',
315 + // phone: '',
316 + // type: '',
317 + // }
318 + // },
319 + // async onShow () {
320 + // const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id });
321 + // if (code) {
322 + // this.name = data.member.name;
323 + // this.age_group = data.member.age_group;
324 + // this.gender = data.member.gender === 'man' ? '男士' : '女士';
325 + // this.id = data.member.id;
326 + // this.phone = data.member.phone;
327 + // this.type = data.member.type;
328 + // }
329 + // }
103 }; 330 };
104 </script> 331 </script>
......