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

 /*
  * @Date: 2022-10-20 13:15:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-21 17:29:36
+ * @LastEditTime: 2022-10-24 14:34:36
  * @FilePath: /swx/src/api/Member/index.js
  * @Description: 主办方用户
  */
@@ -9,6 +9,9 @@ import { fn, fetch } from '../fn';
 
 const Api = {
   MEMBER_INFO: '/srv/?a=member_info',
+  MEMBER_LIST: '/srv/?a=member_list',
+  MEMBER_TRACE_LIST: '/srv/?a=member_my_trace_list',
+  MEMBER_EDIT: '/srv/?a=member_edit',
 }
 
 /**
@@ -16,3 +19,21 @@ const Api = {
  * @returns
  */
 export const infoMemberAPI = (params) => fn(fetch.get(Api.MEMBER_INFO, params));
+
+/**
+ * @description: 主办方用户列表
+ * @returns
+ */
+export const listMemberAPI = (params) => fn(fetch.get(Api.MEMBER_LIST, params));
+
+/**
+ * @description: 我陪伴的用户列表
+ * @returns
+ */
+export const traceMemberAPI = (params) => fn(fetch.get(Api.MEMBER_TRACE_LIST, params));
+
+/**
+ * @description: 修改用户资料
+ * @returns
+ */
+export const editMemberAPI = (params) => fn(fetch.post(Api.MEMBER_EDIT, params));

 <!--
  * @Date: 2022-09-30 09:53:14
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-30 14:45:05
+ * @LastEditTime: 2022-10-24 15:54:12
  * @FilePath: /swx/src/pages/editInfo/index.vue
  * @Description: 文件描述
 -->
@@ -17,88 +17,315 @@
       <view class="at-input" style="margin-right: 1rem;">
         <view class="at-input__container">
           <label class="h5-label at-input__title at-input__title">用户名</label>
-          <input class="h5-input at-input__input" placeholder-class="placeholder" :placeholder="username" :disabled="true"/>
+          <input class="h5-input at-input__input" placeholder-class="placeholder" @input="bindUsernameInput" :value="username" :placeholder="username"/>
         </view>
       </view>
       <view class="at-input" style="margin-right: 1rem;">
         <view class="at-input__container">
-          <label class="h5-label at-input__title at-input__title">状态</label>
-          <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择用户状态" :disabled="true"/>
-          <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
+          <label class="h5-label at-input__title at-input__title">手机号</label>
+          <input class="h5-input at-input__input" placeholder-class="placeholder" @input="bindPhoneInput" :value="phone" :placeholder="phone"/>
         </view>
       </view>
-      <view class="at-input" style="margin-right: 1rem;">
+      <view v-if="role === 'player'" class="at-input">
         <view class="at-input__container">
-          <label class="h5-label at-input__title at-input__title">类型</label>
-          <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择用户类型" :disabled="true"/>
-          <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
+          <label class="h5-label at-input__title at-input__title">年龄段</label>
+          <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="age_group" placeholder="请选择年龄范围" :disabled="true"/>
+          <view style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
+        </view>
+      </view>
+      <view class="at-input">
+        <view class="at-input__container">
+          <label class="h5-label at-input__title at-input__title">性别</label>
+          <van-radio-group
+            :value="user_sex"
+            @change="onSexChange"
+            direction="horizontal"
+          >
+            <van-radio name="man" checked-color="#199A74">男士</van-radio>
+            <van-radio name="woman" checked-color="#199A74">女士</van-radio>
+          </van-radio-group>
         </view>
       </view>
       <view class="at-input" style="margin-right: 1rem;">
         <view class="at-input__container">
-          <label class="h5-label at-input__title at-input__title">推荐人</label>
-          <input class="h5-input at-input__input" placeholder-class="placeholder" placeholder="请输入推荐人姓名" :disabled="true"/>
+          <label class="h5-label at-input__title at-input__title">状态</label>
+          <input @tap="show_status_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择用户状态" :disabled="true"/>
+          <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon @tap="show_status_popup=true" :name="icon_sel" color="" /></view>
         </view>
       </view>
       <view class="at-input" style="margin-right: 1rem;">
         <view class="at-input__container">
+          <label class="h5-label at-input__title at-input__title">类型</label>
+          <input @tap="show_type_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_type" placeholder="请选择用户类型" :disabled="true"/>
+          <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon @tap="show_type_popup=true" :name="icon_sel" color="" /></view>
+        </view>
+      </view>
+      <view v-if="role === 'volunteer'" class="at-input" style="margin-right: 1rem;">
+        <view class="at-input__container">
           <label class="h5-label at-input__title at-input__title">陪伴者</label>
-          <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_status" placeholder="请选择跟踪人" :disabled="true"/>
-          <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
+          <input @tap="show_partner_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="user_partner.text" placeholder="请选择跟踪人" :disabled="true"/>
+          <view style="margin-right: 0; margin-top: 0.5rem;"><van-icon @tap="show_partner_popup=true" :name="icon_sel" color="" /></view>
         </view>
       </view>
     </view>
   </view>
   <bottom-button @on-submit="onSubmit">保存</bottom-button>
 
+  <!-- 年龄段弹出框 -->
+  <van-popup :show="show_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
+    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="age_columns" toolbar-class="picker-toolbar"
+      :default-index="defaultIndex"
+      @confirm="onAgeConfirm" @cancel="onAgeCancel" @change="onAgeChange" />
+  </van-popup>
   <!-- 陪伴状态弹出框 -->
-  <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
-    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="columns" toolbar-class="picker-toolbar"
-      @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
+  <van-popup :show="show_status_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
+    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_columns" toolbar-class="picker-toolbar"
+    :default-index="defaultStatusIndex"
+      @confirm="onStatusConfirm" @cancel="onStatusCancel" />
+  </van-popup>
+  <!-- 陪伴类型弹出框 -->
+  <van-popup :show="show_type_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
+    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="type_columns" toolbar-class="picker-toolbar"
+    :default-index="defaultTypeIndex"
+      @confirm="onTypeConfirm" @cancel="onTypeCancel" />
+  </van-popup>
+  <!-- 陪伴者弹出框 -->
+  <van-popup :show="show_partner_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
+    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="partner_columns" toolbar-class="picker-toolbar"
+      :default-index="defaultPartnerIndex"
+      @confirm="onPartnerConfirm" @cancel="onPartnerCancel" />
   </van-popup>
+  <van-toast id="van-toast" />
+
 </template>
 
 <script setup>
-import { ref } from "vue";
-
+import { ref, onMounted, getCurrentInstance } from "vue";
 import icon_sel from '@/images/icon/sel@2x.png'
 import bottomButton from "@/components/bottom-button";
 import Taro from '@tarojs/taro'
+import { getCurrentPageParam } from "@/utils/weapp";
+import { DEFAULT_HOST_STATUS, DEFAULT_HOST_TYPE } from '@/utils/sysData'
+import { hostInfoAPI } from '@/api/Host/index';
+import { listMemberAPI, editMemberAPI, infoMemberAPI } from '@/api/Member/index';
+import Toast from '@/components/vant-weapp/toast/toast';
 
-const username = ref('精妙');
-const message = ref('');
+/**
+ * 活动参与者有年龄段字段，没有陪伴者字段
+ * 义工没有年龄段字段，有陪伴者字段
+ * */
+const id = ref('');
+const username = ref('');
+const phone = ref('');
+const user_sex = ref('');
+const age_group = ref('');
+const role = ref('');
+const partner = ref('');
+const status_columns = ref([]);
+const type_columns = ref([]);
+const partner_columns = ref([]);
+const defaultStatusIndex = ref(0);
+const defaultTypeIndex = ref(0);
+const defaultPartnerIndex = ref(0);
 
-const onSubmit = (val) => {
-  console.warn(val);
-  Taro.showToast({
-    title: '请检查输入项',
-    icon: 'error',
-    duration: 2000
+onMounted(async () => {
+  const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id });
+  if (code) {
+    username.value = data.member.name;
+    age_group.value = data.member.age_group;
+    user_sex.value = data.member.gender;
+    id.value = data.member.id;
+    phone.value = data.member.phone;
+    user_type.value = data.member.type;
+    user_status.value = data.member.status;
+    role.value = data.member.role;
+    partner.value = data.member.partner;
+  }
+  // 年龄段存在，默认选中
+  if (age_group.value) {
+    age_columns.forEach((item, index) => {
+      if (age_group.value === item) {
+        defaultIndex.value = index;
+      }
+    })
+  }
+  const host = await hostInfoAPI({ i: getCurrentPageParam().host_id });
+  if (host.code) {
+    status_columns.value = [...DEFAULT_HOST_STATUS, ...host.data.user_status];
+    type_columns.value = [...DEFAULT_HOST_TYPE, ...host.data.user_type];
+  }
+  // 还原选中状态
+  status_columns.value.forEach((item, index) => {
+    if (data.member.status === item) {
+      defaultStatusIndex.value = index;
+    }
   });
-  Taro.redirectTo({
-    url: '../joinSuccess/index'
-  })
-}
+  type_columns.value.forEach((item, index) => {
+    if (data.member.type === item) {
+      defaultTypeIndex.value = index;
+    }
+  });
+  const member = await listMemberAPI({ host_id: getCurrentPageParam().host_id, role: 'volunteer', limit: 1000 });
+  if (member.code) {
+    partner_columns.value = member.data.member_list.map(item => ({ key: item.id, text: item.name }));
+    // 义工类型，陪伴者存在时
+    if (partner.value) {
+      member.data.member_list.forEach((item, index) => {
+        if (partner.value === item.id) {
+          defaultPartnerIndex.value = index;
+          user_partner.value = {
+            key: item.id,
+            text: item.name,
+          };
+        }
+      })
+    }
+  }
+});
 
 const show_popup = ref(false);
+const age_columns = ['10-19岁', '20-29岁', '30-39岁', '40-49岁', '50-59岁', '60-69岁', '70-79岁', '80岁以上']
+const defaultIndex = ref(0);
+const onAgeChange = (event) => {
+}
+const onAgeConfirm = (event) => {
+  const detail = event.detail;
+  age_group.value = detail.value;
+  show_popup.value = false;
+}
+const onAgeCancel = (event) => {
+  show_popup.value = false;
+}
+
+const onSexChange = ({ detail }) => {
+  user_sex.value = detail;
+}
+
+const show_status_popup = ref(false);
+const show_type_popup = ref(false);
+const show_partner_popup = ref(false);
 const user_status = ref('');
-const columns = ref(['跟进', '引导']);
-const onChange = (event) => {
+const user_type = ref('');
+const user_partner = ref({});
+
+const onStatusConfirm = (event) => {
   const { picker, value, index } = event.detail;
+  user_status.value = value;
+  show_status_popup.value = false;
 }
-const onConfirm = (event) => {
+const onStatusCancel = (event) => {
+  show_status_popup.value = false;
+}
+const onTypeConfirm = (event) => {
   const { picker, value, index } = event.detail;
-  user_status.value = value;
-  show_popup.value = false;
+  user_type.value = value;
+  show_type_popup.value = false;
 }
-const onCancel = (event) => {
-  show_popup.value = false;
+const onTypeCancel = (event) => {
+  show_type_popup.value = false;
+}
+const onPartnerConfirm = (event) => {
+  const { picker, value, index } = event.detail;
+  user_partner.value.text = value.text
+  user_partner.value.key = value.key
+  show_partner_popup.value = false;
+}
+const onPartnerCancel = (event) => {
+  show_partner_popup.value = false;
+}
+
+const bindUsernameInput = (e) => {
+  username.value = e.detail.value;
+}
+const bindPhoneInput = (e) => {
+  phone.value = e.detail.value;
+}
+
+const validForm = () => {
+  if (!username.value) {
+    Toast('姓名不能为空');
+    return false;
+  }
+  if (!phone.value) {
+    Toast('手机号不能为空');
+    return false;
+  }
+  const pattern = /^\d{11}$/;
+  if (!pattern.test(phone.value)) {
+    Toast('请输入正确手机号');
+    return false;
+  }
+  if (role.value === 'player' && !age_group.value) {
+    Toast('年龄段不能为空');
+    return false;
+  }
+  if (!user_sex.value) {
+    Toast('性别不能为空');
+    return false;
+  }
+  if (!user_status.value) {
+    Toast.fail('用户状态为空');
+    return false;
+  }
+  if (!user_type.value) {
+    Toast.fail('用户类型为空');
+    return false;
+  }
+  return true;
+}
+
+const onSubmit = async (val) => {
+  if (validForm()) {
+    const params = {
+      i: id.value,
+      name: username.value,
+      phone: phone.value,
+      gender: user_sex.value,
+      age_group: age_group.value,
+      status: user_status.value,
+      type: user_type.value,
+      partner: user_partner.value.key,
+    }
+    const { code, data } = await editMemberAPI(params);
+    if (code) {
+      Taro.showToast({
+        title: '修改成功',
+        icon: 'success',
+        duration: 2000
+      });
+      Taro.navigateBack();
+    }
+  }
 }
 </script>
 
 <script>
 import "./index.less";
+import mixin from '@/utils/mixin';
+
 export default {
-  name: "demoPage",
+  name: "editInfoPage",
+  mixins: [mixin.init],
+  // data () {
+  //   return {
+  //     name: '',
+  //     age_group: '',
+  //     gender: '',
+  //     id: '',
+  //     phone: '',
+  //     type: '',
+  //   }
+  // },
+  // async onShow () {
+  //   const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id });
+  //   if (code) {
+  //     this.name = data.member.name;
+  //     this.age_group = data.member.age_group;
+  //     this.gender = data.member.gender === 'man' ?  '男士' : '女士';
+  //     this.id = data.member.id;
+  //     this.phone = data.member.phone;
+  //     this.type = data.member.type;
+  //   }
+  // }
 };
 </script>