feats

src/view/closehouse/index.vue

@@ -1,12 +1,16 @@
 <template>
+  <van-nav-bar
+    title="关闭房源"
+    left-text="返回"
+    left-arrow
+    @click-left="$router.go(-1)"
+  />
   <div class="closehouse">
-    <van-form @submit="onSubmit">
+    <van-form @submit="handleSumbit">
       <van-field
-        v-model="state.id"
-        name="id"
-        label="房源编号"
         readonly
-        placeholder="房源编号"
+        v-model="roomCode"
+        label="房源编号"
       />
       <van-field
         v-model="state.building"
@@ -22,35 +26,23 @@
         label="所属楼盘"
         readonly
         placeholder="所属楼盘"
-       
       />
-
       <van-field
-        v-model="pickerState.value"
-        readonly
-        clickable
-        required
-        name="address"
-        label="所属楼盘"
-        placeholder="所属楼盘"
-        @click="pickerState.showPicker = true"
-        :rules="[{ required: true, message: '请选择所属楼盘' }]"
-      />
-      <van-popup v-model:show="pickerState.showPicker" position="bottom">
-        <van-picker
-          :columns="columns"
-          @confirm="onConfirm"
-          @cancel="pickerState.showPicker = false"
-        />
-      </van-popup>
-      <!-- <van-field
-        v-model="state.building"
         required
         name="type"
         label="关闭类型"
         placeholder="请选择"
         :rules="[{ required: true, message: '请填写密码' }]"
-      /> -->
+      >
+        <template #input>
+          <van-radio-group v-model="checked" direction="horizontal">
+            <van-radio name="0">暂不出售</van-radio>
+            <van-radio name="1">无效</van-radio>
+            <van-radio name="2">他售</van-radio>
+          </van-radio-group>
+        </template>
+      </van-field>
+
       <van-field
         v-model="state.explain"
         required
@@ -63,7 +55,7 @@
         :rules="[{ required: true, message: '请填写关闭说明' }]"
       />
       <div style="margin: 16px;">
-        <van-button round block type="primary" native-type="submit">
+        <van-button block type="warning" native-type="submit">
           提交
         </van-button>
       </div>
@@ -72,27 +64,37 @@
 </template>
 
 <script>
-import { reactive } from "vue";
-import { Form, Button, Field, Picker, Popup } from "vant";
+import { computed, reactive } from "vue"
+import { NavBar, Form, Button, Field, Picker, Popup, RadioGroup, Radio } from "vant"
+import { useModel } from '@zjxpcyc/vue-tiny-store/dist'
 
 export default {
   name: "closehouse",
   components: {
+    [NavBar.name]: NavBar,
     [Form.name]: Form,
     [Button.name]: Button,
     [Field.name]: Field,
     [Popup.name]: Popup,
     [Picker.name]: Picker,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
     // Secondhand:secondhand,
   },
-  data() {
-    return {};
-  },
   setup() {
-    const state = reactive({
-      id: "",
-      building: "",
+    const { detail } = useModel('room')
+
+    const formData = reactive({
+      roomId: undefined,
+      type: undefined,
+      reason: undefined,
+      content: undefined,
     });
+
+    const roomCode = () => computed(() => {
+      return `${detail.roomInfo?.roomCode}${detail.roomInfo?.id}`
+    })
+
     const onSubmit = (values) => {
       console.log("submit", values);
     };
@@ -109,7 +111,8 @@ export default {
     };
 
     return {
-      state,
+      formData,
+      roomCode,
       pickerState,
       columns,
       onConfirm,
@@ -120,4 +123,9 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.closehouse {
+  padding: 1em;
+  padding-top: 2em;
+}
+</style>

vue.config.js

@@ -41,6 +41,8 @@ module.exports = {
             // // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
             // hack: `true; @import "your-less-file-path.less";`,
             '@dialog-border-radius': '4px',
+            '@nav-bar-icon-color': '#d75e3a',
+            '@nav-bar-text-color': '#d75e3a'
           },
         },
       },