feat: 服务项目

components/cust-form/index.vue

@@ -68,6 +68,17 @@
                         <up-icon name="arrow-right"></up-icon>
                     </template>
                 </up-form-item>
+
+                <up-form-item v-if="item.type === 'cascader'" :label="item.label" :prop="item.key" borderBottom
+                    labelWidth="94" :required="item.required">
+                    <view @click.self="() => clickPick(item)">
+                        <up-input v-model="formData[item.key]" disabled disabledColor="#ffffff"
+                            :placeholder="'请选择' + item.label" border="none"></up-input>
+                    </view>
+                    <template #right>
+                        <up-icon name="arrow-right"></up-icon>
+                    </template>
+                </up-form-item>
             </view>
         </up-form>
         <!-- <up-button type="primary" text="提交" customStyle="margin-top: 50px" @click="onSubmit"></up-button> -->
@@ -81,19 +92,21 @@
 
         <!-- 省市区选择 province city area初始省市区设置 show:是否显示  @changeClick：更改省市区事件 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
         <CcSelectDity :province="cityData.province" :city="cityData.city" :area="cityData.area" :show="cityShow"
-            @sureSelectArea="onsetCity" @cityShow="() => cityShow = false"></CcSelectDity>
+            @sureSelectArea="onsetCity" @hideShow="onCityShow"></CcSelectDity>
+
+        <Picker :columnData="pickerData" ref="pickerRef" @submit="ActionSheetSelect" />
     </view>
 </template>
 <script setup>
 import { onMounted, reactive, ref } from "vue";
 import CcSelectDity from '@/components/cc-selectDity/cc-selectDity.vue';
-
+import Picker from '@/components/picker/index.vue'
 const props = defineProps({
     column: {
         type: Array,
         default: [],
     },
-    isCode:{
+    isCode: {
         type: Boolean,
         default: true
     }
@@ -119,6 +132,57 @@ const showSex = ref(false);
 const actions = ref({
     option: []
 });
+const pickerData = ref([
+    {
+        businessName: '家庭教育',
+        id: '1',
+        children: [
+            {
+                businessName: '语文',
+                id: '2',
+                children: [
+                    {
+                        businessName: '一年级',
+                        id: '4',
+                    },
+                    {
+                        businessName: '二年级',
+                        id: '5',
+                    }
+                ]
+            },
+            {
+                businessName: '数学',
+                id: '3',
+            }
+        ]
+    },
+    {
+        businessName: '家庭清洁',
+        id: '6',
+        children: [
+            {
+                businessName: '清洁1',
+                id: '7',
+                children: [
+                    {
+                        businessName: '清洁11',
+                        id: '8',
+                    },
+                    {
+                        businessName: '清洁22',
+                        id: '9',
+                    }
+                ]
+            },
+            {
+                businessName: '清洁3',
+                id: '10',
+            }
+        ]
+    }
+])
+const pickerRef = ref(null)
 
 const cityData = reactive({
     province: "广东省",
@@ -144,6 +208,10 @@ function openActionSheet(row) {
     showSex.value = true;
     actions.value = row
 }
+function onCityShow() {
+    console.log('onCityShow');
+    cityShow.value = false;
+}
 
 function openCity(row) {
     console.log(row);
@@ -166,6 +234,11 @@ function ActionSheetSelect(e) {
     Object.assign(formData, {
         [actions.value.key]: e.key || e.name
     })
+    if(actions.value.type === 'cascader'){
+        Object.assign(formData, {
+            [actions.value.key + 'key' ]: e.value
+        })
+    }
     console.log('formData.value', formData);
 
     // form_ref.value.validateField(actions.key)
@@ -201,11 +274,25 @@ function startFace() {
 
 
 function setData(data) {
-    console.log('setData=>data',data);
-    
-    Object.assign(formData, {...data,
-        sex: data.sex === 0 ? '男' : '女',
+    console.log('setData=>data', data);
+    for (let i = 0; i < props.column.length; i++) {
+        const element = props.column[i];
+        
+        if(element.type === 'cascader') {
+            const key = "5"
+            const lable =  pickerRef.value.piceInit(key);
+            console.log('element.type',lable,key);
+            Object.assign(formData, {
+                    [element.key]: lable,
+                    [element.key+'key']: key
+                })
+        }
+        
+    }
 
+    Object.assign(formData, {
+        ...data,
+        sex: data.sex === 0 ? '男' : '女',
     })
 }
 
@@ -226,19 +313,21 @@ function onResetField() {
     form_ref.value.clearValidate()
 }
 
-function cityChange(e) {
-    console.log('e', e);
+function clickPick(row) {
+    console.log('e', row);
+    actions.value = row
+    console.log('e', actions.value);
+    pickerRef.value.show();
 
 }
 
+
 onMounted(() => {
     const rules = {};
     for (let i = 0; i < props.column.length; i++) {
         rules[props.column[i].key] = props.column[i].rules
     }
     form_ref.value && form_ref.value.setRules(rules)
-
-
     console.log('uni=====>', uni);
 
 })

components/picker/index.vue

@@ -1,36 +1,160 @@
 <template>
-    <up-picker :show="show" ref="uPickerRef" :columns="columns" @confirm="confirm" @change="changeHandler"></up-picker>
+  <up-picker :show="show" :defaultIndex="pickValue.indexs" ref="uPickerRef" valueKey="id" :columns="columns" @confirm="confirm" @change="changeHandler"></up-picker>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-
-const show = ref(true);
-const columns = reactive([
-  ['中国', '美国'],
-  ['深圳', '厦门', '上海', '拉萨']
-]);
-const columnData = reactive([
-  ['深圳', '厦门', '上海', '拉萨'],
-  ['得州', '华盛顿', '纽约', '阿拉斯加']
-]);
+import { ref, reactive, computed } from 'vue';
+
+
+const props = defineProps({
+  columnData: {
+    type: Array,
+    default: []
+  }
+});
+
+const emit = defineEmits(['submit']);
+
+
+const show = ref(false);
+
+const pickValue = ref({
+  indexs: [0, 0, 1],
+});
+
+const cate = ref(5);
+
+/**
+ * 
+ * 根据下标获取显示数据
+ */
+function getDataByKeys(array, keys) {
+  const result = [];
+  let currentLevel = array;
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const currentItems = currentLevel.map(item => item.businessName);
+    result.push(currentItems);
+
+    if (currentLevel[key] && currentLevel[key].children) {
+      currentLevel = currentLevel[key].children;
+    } else {
+      // 如果没有 children，则在结果中添加一个空数组
+      result.push([]);
+      break;
+    }
+  }
+
+  if (result.length > keys.length) {
+    result.pop();
+  }
+  return result;
+}
+
+
+
+const columns = computed(() => {
+  const data = props.columnData;
+  const { indexs } = pickValue.value
+  const result = getDataByKeys(data, indexs);
+  console.log('=====>', result);
+  console.log('data', data);
+  return result;
+});
+
 
 const uPickerRef = ref(null)
 const changeHandler = (e) => {
-  const {
-    columnIndex,
-    value,
-    values,
-    index,
-  } = e;
-
-  if (columnIndex === 0) {
-    uPickerRef.value.setColumnValues(1, columnData[index]);
-  }
+  console.log('e', e);
+  pickValue.value = e;
 };
 
+/**
+ * 
+ * 根据下标获取id
+ */
+function getid(keys) {
+  let currentLevel = props.columnData;
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    if (currentLevel[key] && currentLevel[key].children) {
+      currentLevel = currentLevel[key].children;
+    } else {
+      if (currentLevel[key]) {
+        return currentLevel[key].id;
+      }
+      break;
+    }
+  }
+
+  return null; // 如果没有找到对应的项，返回 null
+}
+
+
 const confirm = (e) => {
-  console.log('confirm', e);
+  console.log(e);
+  
+  const id = getid(e.indexs);
+  emit('submit', {key:  e.value.join('/'),value: id });
   show.value = false;
 };
+
+//根据id获取下标
+function idToIndexs(array, targetId, path = []) {
+    for (let i = 0; i < array.length; i++) {
+        const item = array[i];
+        const currentPath = path.concat(i);
+
+        if (item.id === targetId) {
+            return currentPath
+        }
+
+        if (item.children) {
+            const result = idToIndexs(item.children, targetId, currentPath);
+            if (result) {
+                return result;
+            }
+        }
+    }
+
+    return null; // 如果没有找到对应的项，返回 null
+}
+
+function indexsToNames(indexs){
+            let currentLevel = props.columnData;
+    const names = [];
+
+    for (let i = 0; i < indexs.length; i++) {
+        const key = indexs[i];
+
+        if (currentLevel[key]) {
+            names.push(currentLevel[key].businessName);
+            if (currentLevel[key].children) {
+                currentLevel = currentLevel[key].children;
+            }
+        } else {
+            break;
+        }
+    }
+
+    return names;
+        }
+const piceInit = (id) => {
+  console.log('piceInit-id',id);
+  const indexs =  idToIndexs(props.columnData,id)
+  const names = indexsToNames(indexs)
+  console.log('piceInit-indexs', indexs,names,names.join('/'));
+  pickValue.value.indexs = indexs;
+
+  return names.join('/')
+}
+
+defineExpose({
+  show() {
+    show.value = true;
+  },
+  piceInit
+});
 </script>

config.js

@@ -3,7 +3,7 @@ const config = {
 	// baseUrl: 'https://vue.ruoyi.vip/prod-api',
 	//cloud后台网关地址
 	// baseUrl: 'http://192.168.10.3:8080',
-	baseUrl: 'http://192.168.100.86:9527',
+	baseUrl: 'http://192.168.100.121:9527',
 	// 应用信息
 	appInfo: {
 		// 应用名称

pages_home/pages/register/data.js

@@ -83,6 +83,14 @@ const rules = {
             message: '请填写技能简介',
             trigger: ['blur', 'change']
         }
+    ],
+    businessManagementId: [
+        {
+            type: 'string',
+            required: true,
+            message: '请选择服务项目',
+            trigger: ['blur', 'change']
+        }
     ]
 }
 
@@ -115,13 +123,14 @@ const chatting = [
         key: "phonenumber",
         type: "phone-code",
     },
-    // {
-    //     label: "服务类型",
-    //     key: "",
-    //     type: "select",
-    //     option: city_option,
-    //     rules: rules.city
-    // },
+    {
+        label: "服务项目",
+        key: "businessManagementId",
+        type: "cascader",
+        cascaderKey:'0',
+        rules: rules.businessManagementId,
+        required:true
+    },
     {
         label: "地区",
         key: "city",
@@ -175,6 +184,14 @@ const education = [
         key: "phonenumber",
         type: "phone-code",
     },
+    {
+        label: "服务项目",
+        key: "businessManagementId",
+        type: "cascader",
+        cascaderKey:'0',
+        rules: rules.businessManagementId,
+        required:true
+    },
     {
         label: "证件号",
         key: "idCard",

pages_home/pages/register/index.vue

@@ -1,11 +1,21 @@
 <template>
 	<view class="register-main">
-		<up-alert description="您已完成账户注册" type="success" showIcon closable v-if="!isAdd"></up-alert>
+		<up-alert description="您的注册被驳回，请查看驳回原因" type="warning" showIcon closable
+			v-if="details.appStatus === 3"></up-alert>
+		<up-alert description="您已完成账户注册" type="success" showIcon closable
+			v-if="!isAdd && details.appStatus !== 3"></up-alert>
 		<view class="register-user-info">
 			<FontTitle title="请完成注册信息填报" />
 			<CustForm :column="com_column" ref="cust_form_ref" :isCode="isAdd" />
 		</view>
 
+		<view class="register-card" v-if="details.appStatus === 3">
+			<view class="font-title">驳回原因</view>
+			<view class="info-list">
+				{{ details.rejectReason }}
+			</view>
+		</view>
+
 		<view v-for="item in updata_list" :key="item.key" class="updata-imgs">
 			<UpdataImgs :fileList="file_url[item.key]" :data="item" ref="zsImg"
 				v-if="item.permission.includes(data.key)" @onSubmit="onChange" />
@@ -69,6 +79,8 @@ const file_url = reactive({});
 
 const isAdd = ref(true);//是否已经注册
 
+const details = ref({});//详情数据
+
 const sex_status = {
 	'男': 0,
 	'女': 1
@@ -117,11 +129,15 @@ function onSubmit() {
 			};
 			for (const key in res) {
 				parmas[key] = key == 'sex' ? sex_status[res[key]] : res[key];
+				if(key === 'businessManagementIdkey' ){
+					parmas['businessManagementId'] = res[key]
+					delete parmas['businessManagementIdkey'];
+				}
 			}
 
 			console.log('提交', parmas);
 
-			// return;
+			return;
 			// 提交接口，注册人员
 			const submit_res = await add(parmas);
 			if (submit_res.code == 200) {
@@ -169,6 +185,7 @@ async function getRegister() {
 		const res = await getVolunteerInfo({ serviceCategory: data.value.key });
 		if (res.data) {
 			cust_form_ref.value.setData(res.data);
+			details.value = res.data;
 			Object.assign(file_url, {
 				volunteerPicture: res.data.volunteerPicture,
 				idCardPicture: res.data.idCardPicture,
@@ -230,4 +247,20 @@ onLoad((options) => {
 
 	}
 }
+
+.register-card {
+	margin-bottom: 12px;
+	background-color: #fff;
+	border-radius: 8px;
+	padding: 18px 16px;
+}
+
+.info-list {
+	flex: 1;
+	font-size: 14px;
+	font-weight: 500;
+	letter-spacing: 0px;
+	line-height: 23.27px;
+	color: rgba(51, 51, 51, 1);
+}
 </style>