创建岗位步骤 3 4

src/components/form/address-select.vue

+<template>
+    <wd-tabs v-model="tab" style="height: 400px">
+        <wd-tab :title="provinceText || '省'">
+            <wd-picker-view
+                :columns="provinceOptions"
+                v-model="provinceValue"
+                value-key="code"
+                label-key="name"
+                @change="provinceChange"
+            />
+        </wd-tab>
+        <wd-tab :title="cityText || '市'">
+            <wd-picker-view
+                v-if="tab == 1"
+                :columns="cityOptions"
+                v-model="cityValue"
+                value-key="code"
+                label-key="name"
+                @change="cityChange"
+            />
+        </wd-tab>
+        <wd-tab :title="districtText || '区/县'">
+            <wd-picker-view
+                v-if="tab == 2"
+                :columns="districtOptions"
+                v-model="districtValue"
+                value-key="code"
+                label-key="name"
+                @change="districtChange"
+            />
+        </wd-tab>
+        <wd-tab title="详细地址">
+            <view class="content">详细地址</view>
+        </wd-tab>
+    </wd-tabs>
+</template>
+
+<script setup>
+import { getTreeListApi } from "@/api/common";
+// 获取数据
+const getData = () => {
+    getTreeListApi().then(res => {
+        console.log(res);
+        provinceOptions.value = res.data;
+    });
+};
+// 激活标签索引
+const tab = ref(0);
+// 省
+const provinceOptions = ref([]);
+const provinceValue = ref("");
+const provinceText = ref("");
+getData();
+const provinceChange = e => {
+    const { children, name } = e.picker.getSelects();
+    provinceText.value = name;
+    // 重置选项
+    districtValue.value = "";
+    cityValue.value = "";
+
+    districtText.value = "";
+    cityText.value = "";
+
+    cityOptions.value = children;
+    districtOptions.value = [];
+
+    /* 如果只有一个子选项，则直接选中 */
+    if (children.length == 1) {
+        cityChange({ picker: { getSelects: () => ({ children, name }) } });
+        cityValue.value = children[0].code;
+    }
+};
+// 市
+const cityOptions = ref([]);
+const cityValue = ref("");
+const cityText = ref("");
+const cityChange = e => {
+    const { children, name } = e.picker.getSelects();
+    cityText.value = name;
+    // 重置选项
+    districtValue.value = "";
+    districtText.value = "";
+    districtOptions.value = children;
+};
+// 地区
+const districtOptions = ref([]);
+const districtValue = ref("");
+const districtText = ref("");
+const districtChange = e => {
+    const { children, name } = e.picker.getSelects();
+    districtText.value = name;
+    // 重置选项
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/form/form-row.vue

@@ -16,5 +16,6 @@ const props = defineProps({
 <style lang="scss" scoped>
 .form-row {
     display: grid;
+    gap: 50rpx;
 }
 </style>

src/pages/recommend/releasePostion/step3.vue

@@ -5,18 +5,31 @@
             <view class="t1">3/5工作地点</view>
             <view class="t2">添加准确的就职工作地址</view>
         </view>
+        <!-- <address-select></address-select> -->
         <view class="content">
             <view class="form-item">
                 <view class="form-item-title">工作地址</view>
-                <view :class="`inner flex-between ${address ? '' : 'placeholder'}`" @tap="getLocaltion">
-                    <view class="flex-align-center">
+                <view :class="`inner flex-between ${address ? '' : 'placeholder'}`">
+                    <!-- <view class="flex-align-center">
                         <image src="@/static/image/icon/position.png" />
                         {{ address || pinias.formData.address || "请选择工作地址" }}
-                    </view>
+                    </view> -->
+                    <wd-col-picker
+                        v-model="cityValue"
+                        :columns="cityOpstion"
+                        value-key="code"
+                        label-key="name"
+                        :column-change="columnChangeCity"
+                        @confirm="handleConfirmCity"
+                        use-default-slot
+                    >
+                        <p :class="{ placeholder: !cityText }" class="text-single">{{ cityText || "请选择公司所在地" }}</p>
+                    </wd-col-picker>
                     <view class="arrow"></view>
                 </view>
             </view>
         </view>
+
         <wd-tabbar
             @tap="next"
             custom-style="display: flex;justify-content: center !important;"
@@ -31,7 +44,8 @@
 
 <script setup>
 import { ref } from "vue";
-
+import AddressSelect from "@/components/form/address-select.vue";
+import { getTreeListApi } from "@/api/common";
 import { useReleasePostionStore } from "./store";
 /* tab */
 const pinias = useReleasePostionStore();
@@ -63,6 +77,38 @@ const getLocaltion = () => {
     });
 };
 
+// 地区选择
+/* 获取省市区 */
+const cityOpstion = ref([]);
+const cityValue = ref([]);
+
+const cityText = ref("");
+let citySelectedItems = [];
+getTreeListApi().then(res => {
+    cityOpstion.value.push(res.data);
+});
+const columnChangeCity = ({ selectedItem, resolve, finish }) => {
+    if (selectedItem.children) {
+        resolve(selectedItem.children);
+    } else {
+        finish();
+    }
+};
+const handleConfirmCity = ({ selectedItems }) => {
+    cityText.value = selectedItems.map(v => v.name).join("-");
+    citySelectedItems = selectedItems;
+    const [province, city, district] = selectedItems;
+    console.log([province, city, district]);
+
+    /*     params.provinceCode = province.code;
+    params.provinceName = province.name;
+    params.cityCode = city.code;
+    params.cityName = city.name;
+    params.districtCode = district.code;
+    params.districtName = district.name;
+    console.log(cityValue); */
+};
+
 const next = () => {
     if (validateForm(pinias.formData, ["address"])) {
         uni.navigateTo({
@@ -78,26 +124,27 @@ image {
     width: 12px;
     height: 13px;
 }
-
-:deep(#u-a-c .uni-system-choose-location .nav) {
+:deep(#u-a-c) {
+    .uni-system-choose-location .nav {
         top: 20px !important;
         background-image: none;
-}
-:deep(#u-a-c .uni-system-choose-location .nav-btn) {
-    background-color: #007aff;
-    border-radius: 10px;
-}
-:deep(#u-a-c .uni-system-choose-location .nav-btn.back) {
+    }
+    .uni-system-choose-location .nav-btn {
         background-color: #007aff;
         border-radius: 10px;
+    }
+    .uni-system-choose-location .nav-btn.back {
         top: 50px;
         left: 10px;
-}
-:deep(#u-a-c .uni-system-choose-location .nav-btn.confirm) {
         background-color: #007aff;
         border-radius: 10px;
+    }
+    .uni-system-choose-location .nav-btn.confirm {
         top: 50px;
         right: 10px;
+        background-color: #007aff;
+        border-radius: 10px;
+    }
 }
 .foot-btn {
     position: fixed;

src/pages/recommend/releasePostion/step4.vue

@@ -6,7 +6,56 @@
             <view class="t2">设置招聘偏好，让报名更精准</view>
         </view>
         <view class="content">
-            <view class="form-item">
+            <form-row>
+                <form-item title="身份要求">
+                    <wd-picker
+                        :columns="identityPostion"
+                        value-key="code"
+                        label-key="text"
+                        v-model="pinias.formData.identityRequirement"
+                        @confirm="handleConfirmIdentity"
+                        use-default-slot
+                    >
+                        <view :class="`inner flex-between ${identityText ? '' : 'placeholder'}`">
+                            <view class="flex-align-center" bind:tap="onShowIdentitySelect">
+                                {{ identityText || "请选择身份要求" }}
+                            </view>
+                        </view>
+                    </wd-picker>
+                </form-item>
+            </form-row>
+            <form-row :fill="false">
+                <form-item title="学历要求">
+                    <wd-picker
+                        :columns="educationPostion"
+                        value-key="code"
+                        label-key="text"
+                        v-model="pinias.formData.educationRequirement"
+                        @confirm="handleConfirmEducation"
+                        use-default-slot
+                    >
+                        <view :class="`inner flex-between ${educationText ? '' : 'placeholder'}`">
+                            <view class="flex-align-center" bind:tap="onShowIdentitySelect">
+                                {{ educationText || "请选择学历要求" }}
+                            </view>
+                        </view>
+                    </wd-picker>
+                </form-item>
+                <form-item title="学历要求">
+                    <wd-col-picker
+                        v-model="value"
+                        :columns="columns"
+                        :column-change="columnChange"
+                        @confirm="handleConfirm"
+                        use-default-slot
+                    >
+                        <view :class="`inner flex-between ${ageText ? '' : 'placeholder'}`" bind:tap="onOpen">
+                            {{ ageText || "请选择年龄要求" }}
+                        </view>
+                    </wd-col-picker>
+                </form-item>
+            </form-row>
+            <!-- <view class="form-item">
                 <view class="form-item-title">身份要求</view>
                 <wd-picker
                     :columns="identityPostion"
@@ -23,8 +72,8 @@
                         <view class="arrow"></view>
                     </view>
                 </wd-picker>
-            </view>
-            <view class="form-item">
+            </view> -->
+            <!-- <view class="form-item">
                 <view class="form-item-title">学历要求</view>
                 <wd-picker
                     :columns="educationPostion"
@@ -57,7 +106,24 @@
                         <view class="arrow"></view>
                     </view>
                 </wd-col-picker>
-            </view>
+            </view> -->
+            <form-row :fill="false">
+                <form-item title="专业技术职称" icon="edit">
+                    <input type="text" />
+                </form-item>
+                <form-item title=""> </form-item>
+            </form-row>
+            <form-row :fill="false">
+                <form-item title="职业资格/技能等级证书" icon="edit">
+                    <input type="text" />
+                </form-item>
+                <form-item title=""> </form-item>
+            </form-row>
+            <form-row>
+                <form-item title="特种作业证" icon="edit">
+                    <input type="text" />
+                </form-item>
+            </form-row>
         </view>
         <wd-tabbar
             @tap="next"
@@ -75,6 +141,8 @@
 import { ref } from "vue";
 import { getEumData, getEnumText } from "@/utils/utils";
 import { useReleasePostionStore } from "./store";
+import FormItem from "@/components/form/form-item.vue";
+import FormRow from "@/components/form/form-row.vue";
 /* tab */
 const pinias = useReleasePostionStore();
 const identityText = ref("");
@@ -172,6 +240,11 @@ initViewData();
 
 <style lang="scss" scoped>
 @import "./common.scss";
+.content {
+    .form-item {
+        padding-top: 0;
+    }
+}
 .foot-btn {
     position: fixed;
     display: flex;