flat: 信箱、投诉建议

pageMy/setUserBase/mailbox.vue

@@ -1,91 +1,125 @@
 <template>
-	<view>
-		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
-		<view class="u-page">
-            <u-list
-                @scrolltolower="getList('add')"
+    <view class="app_cotainer">
+        <u--form
+            labelPosition="left"
+            :fromData="fromData"
+            :model="fromData"
+            :rules="rules"
+            ref="uForm"
+        >
+            <u-form-item
+                label="咨询部门:"
+                prop="consultDeptName"
+                labelWidth="80"
+                borderBottom
             >
-                <u-list-item
-                    v-for="(item, index) in recordList"
-                    :key="index"
-                >
-                    <u-cell @click="navTo(`/pageMy/setUserBase/subPage/mailboxDetail?id=${item.id}`)" isLink center>
-                        <view slot="title" class="title_style pro_warp2"> {{item.consultTopic}} </view>
-                        <view slot="label" class="label_style pro_warp2"> {{item.consultContent}} </view>
-                    </u-cell>
-                </u-list-item>
-            </u-list>
+                <u--input v-model="fromData.consultDeptName" border="surround" placeholder="请输入咨询部门" ></u--input>
+            </u-form-item>
+            <u-form-item
+                label="咨询题目:"
+                prop="consultTopic"
+                labelWidth="80"
+                borderBottom
+            >
+                <u--input v-model="fromData.consultTopic" border="surround" placeholder="请输入咨询题目" ></u--input>
+            </u-form-item>
+            <u-form-item
+                label="联系电话:"
+                prop="consultPhone"
+                labelWidth="80"
+                borderBottom
+            >
+                <u--input v-model="fromData.consultPhone" border="surround" placeholder="请输入11位电话号码" ></u--input>
+            </u-form-item>
+            <u-form-item
+                label="咨询内容:"
+                prop="consultContent"
+                labelWidth="80"
+                borderBottom
+            >
+                <u--textarea v-model="fromData.consultContent" placeholder="请输入咨询内容" ></u--textarea>
+            </u-form-item>
+        
+        </u--form>
+        <view class="btn_add">
+            <u-button type="primary" size="large" text="发送信件" @click="addConsult" ></u-button>
         </view>
-        <view class="btn_add" >
-            <u-button type="primary" size="large" text="添加信件" @click="addConsult"></u-button>
-        </view>
-	</view>
+    </view>
 </template>
 
 <script>
-import { getConsultMailboxInfo } from '@/api/content.js'
-export default {
-	data() {
-		return {
-            recordList: [],
-            pageNumber: 1,
-            pageSize: 10,
-		};
-	},
-    onReady() {
-        this.getList("refresh")
-    },
-    created() {
-    },
-    onReachBottom() {
-      console.log('触底了')  
-    },
-	methods: {
-        addConsult() {
-            this.navTo(`/pageMy/setUserBase/subPage/mailboxDetail`)
+    import { dateFormat } from '@/untils/format.js'
+    import { addConsultMailboxInfo } from '@/api/content'
+    const formData = {
+        consultContent: '',
+        consultPhone: '',
+        consultTopic: '',
+        consultDeptName: '',
+    }
+    const rules = {
+        'consultPhone': {
+            type: 'string',
+            required: true,
+            pattern:  /^1[3-9]{1}\d{9}/,
+            message: '请填写联系电话',
+            trigger: ['blur', 'change']
         },
-        async getList(type) {
-            if (type === "refresh") {
-              this.pageNumber = 1;
-            }
-            let params = {
-              page: this.pageNumber,
-              size: 10,
+        'consultContent': {
+            type: 'string',
+            required: true,
+            message: '请填写咨询内容',
+            trigger: ['blur', 'change']
+        },
+        'consultTopic': {
+            type: 'string',
+            required: true,
+            message: '请填写咨询题目',
+            trigger: ['blur', 'change']
+        },
+        'consultDeptName': {
+            type: 'string',
+            required: true,
+            message: '请填写咨询部门',
+            trigger: ['blur', 'change']
+        },
+    }
+    export default {
+        data() {
+            return {
+                fromData: Object.assign({}, formData),
+                rules: Object.assign({}, rules),
             };
-            if (this.status) {
-            }
-            uni.showLoading({ title: '加载中' })
-            let resData = await getConsultMailboxInfo({})
-            uni.hideLoading()
-            if (resData.data?.code === 200) {
-              const { records, total, current, size } = resData.data.data;
-              if (!records.length) {
-                return this.$Api.msg("没有更多");
-              }
-              switch (type) {
-                case "add":
-                  this.recordList = [...this.recordList, ...records];
-                  break;
-                case "refresh":
-                  this.recordList = records;
-                  break;
-              }
-              console.log(this.recordList)
-              this.pageNumber += 1;
-            }
         },
-	},
-};
+        onLoad() {
+        },
+        computed: {
+        },
+        methods: {
+            addConsult() {
+                this.$refs.uForm.validate().then(async(res) => {
+                    let resData = await addConsultMailboxInfo(this.fromData)
+                    if(resData.data?.code === 200) {
+                        uni.$u.toast(resData.data.msg)
+                    }
+                }).catch((errors) => {
+                    this.$api.msg('请输入完整信件信息')
+                })
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-    .label_style{
-        width: 440rpx;
+.app_cotainer{
+    padding: 24rpx;
+    .picker_flag{
+        border: 0;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+        padding: 0;
     }
-    .title_style{
-        width: 400rpx;
-        font-weight: bold;
-        font-size: 36rpx;
+    .reply_info{
     }
     .btn_add{
         position: fixed;
@@ -98,4 +132,5 @@ export default {
         text-align: center;
         line-height: 110rpx;
     }
-</style>
+}
+</style>