fix: 农机预约表单样式修改

src/pages/nongjifuwu/components/apply-dialog.vue

@@ -2,11 +2,19 @@
     import { reactive } from 'vue'
     import * as NongjifuwuAPI from '@/api/model/nongjifuwu'
     import { useUserStore } from '@/store/modules/user'
+    import { areaOptions, getText } from '@/utils/dict/area'
 
     const { getUserInfo } = useUserStore()
 
     const pageData = reactive({
         show: false,
+        areaShow: {
+            time: false,
+            classify: false,
+            address: false,
+        },
+        options: null,
+        scopeText: null,
         content: '',
         form: {
             machineId: '',
@@ -65,6 +73,7 @@
     }
 
     function open(params) {
+        reset()
         pageData.form.machineId = params.id
         pageData.form.serviceType = params.serviceType
         pageData.form.userId = getUserInfo.id
@@ -72,6 +81,7 @@
     }
     function close() {
         pageData.show = false
+        pageData.areaShow.address = false
     }
     function reset() {
         pageData.form = {
@@ -86,6 +96,7 @@
             phone: '',
             demand: '',
         }
+        pageData.scopeText = null
     }
     const formRef = ref()
     function submit() {
@@ -102,6 +113,14 @@
             }
         })
     }
+    function handleChangeAddress(e) {
+        pageData.form.scope = e.value.join(',')
+        pageData.scopeText = getText(pageData.form.scope, ' / ')
+        pageData.areaShow.address = false
+    }
+    onShow(() => {
+        pageData.options = areaOptions
+    })
     defineExpose({
         open,
         close,
@@ -116,8 +135,8 @@
         </view>
         <view class="text-left">
             <fui-form ref="formRef">
-                <fui-input marginTop="30" size="24" placeholder="请填写手机号码" v-model="pageData.form.phone" required placeholderStyle="margin-left: 10rpx;"/>
-                <fui-input marginTop="30" size="24" placeholder="请选择作业区域" v-model="pageData.form.scope" required placeholderStyle="margin-left: 10rpx;"/>
+                <fui-input marginTop="30" size="24" type="number" maxlength="11" placeholder="请填写手机号码" v-model="pageData.form.phone" required placeholderStyle="margin-left: 10rpx;"/>
+                <fui-input marginTop="30" size="24" disabled @click="pageData.areaShow.address = true" placeholder="请选择作业区域" v-model="pageData.scopeText" required placeholderStyle="margin-left: 10rpx;"/>
                 <fui-input marginTop="30" size="24" placeholder="请填写详细地址" v-model="pageData.form.address" required placeholderStyle="margin-left: 10rpx;"/>
                 <fui-input marginTop="30" size="24" placeholder="请选择作业时间" v-model="pageData.form.time" @click="dict.show.time = true" required placeholderStyle="margin-left: 10rpx;"/>
                 <fui-textarea v-model="pageData.form.demand" :marginTop="30" size="24" placeholder="简要说明作业需求" flexStart required placeholderStyle="margin-left: 10rpx;"/>
@@ -128,6 +147,14 @@
         </view>
     </fui-dialog>
     <fui-date-picker :show="dict.show.time" type="3" range @change="handleTimeChange" @cancel="handleTimeCancel" />
+    <fui-picker
+        :show="pageData.areaShow.address"
+        :options="pageData.options"
+        :linkage="true"
+        :layer="3"
+        @change="handleChangeAddress"
+        @cancel="pageData.areaShow.address = false"
+    />
 </template>
 
 <style lang="scss" scoped>