增加新需求以及页面

src/pages.json

@@ -22,6 +22,12 @@
             "style": {
                 "navigationBarTitleText": "意见收集"
             }
+        },
+        {
+            "path": "pages/error/index",
+            "style": {
+                "navigationBarTitleText": "意见收集"
+            }
         }
     ],
     "globalStyle": {

src/pages/error/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <view class="content">
+        <view class="success-container">
+            <up-icon name="close" color="#ff0000" size="80" bold="true"></up-icon>
+            <text class="success">此二维码已失效</text>
+        </view>
+    </view>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.content {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f5f5;
+    overflow-y: auto;
+}
+::v-deep .opinion-form {
+    width: 90%;
+    height: auto;
+}
+
+.input-content {
+    background-color: #fff;
+}
+
+.success-container {
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 120rpx 0;
+    background-color: #fff;
+    box-sizing: border-box;
+
+    .success {
+        font-weight: bold;
+        font-size: 16px;
+    }
+
+    .thanks {
+        font-size: 13px;
+        padding: 10rpx 0;
+        color: #848181;
+    }
+}
+</style>

src/pages/index/index.vue

@@ -1,244 +1,48 @@
 <template>
     <view class="content">
-        <!-- 意见收集 -->
+        <text class="text-box">
-        <template v-if="!isSuccess">
+            &emsp;&emsp;我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约
-            <up-form
+        </text>
-                labelPosition="top"
-                :model="opinionModel"
-                ref="opinionModelRef"
-                :rules="opinionRules"
-                labelWidth="auto"
-                class="opinion-form"
-            >
-                <up-form-item label="姓名" prop="userName" required>
-                    <up-input
-                        v-model="opinionModel.userName"
-                        class="input-content"
-                        placeholder="填写姓名"
-                        clearable
-                    />
-                </up-form-item>
-                <up-form-item label="电话" prop="userPhone" required>
-                    <up-input
-                        v-model="opinionModel.userPhone"
-                        class="input-content"
-                        placeholder="填写电话"
-                        clearable
-                    />
-                </up-form-item>
-                <up-form-item label="意见归属单位/部门" prop="userCompany">
-                    <up-input
-                        v-model="opinionModel.unit"
-                        class="input-content"
-                        placeholder="填写归属单位/部门"
-                        clearable
-                    />
-                </up-form-item>
-                <up-form-item label="意见" prop="options" required>
-                    <up-textarea
-                        v-model="opinionModel.options"
-                        placeholder="请输入内容"
-                        class="input-content"
-                        :maxlength="500"
-                        count
-                        style="max-height: 500px; overflow-y: auto"
-                        height="300px"
-                        clearable
-                    >
-                    </up-textarea>
-                </up-form-item>
 
-                <up-form-item>
+        <view>
-                    <up-button
+            <up-button
-                        type="primary"
+                type="primary"
-                        text="提交意见"
+                text="填写意见"
-                        style="margin-top: 30rpx"
+                style="margin-top: 30rpx"
-                        @tap="onSubmitOptions"
+                @tap="onSubmitOptions"
-                    />
+            />
-                </up-form-item>
+        </view>
-            </up-form>
-        </template>
-
-        <template v-else>
-            <view class="success-container">
-                <up-icon name="checkbox-mark" color="#2979ff" size="80" bold="true"></up-icon>
-                <text class="success">提交成功</text>
-                <text class="thanks">感谢您宝贵的意见</text>
-            </view>
-            <view style="width: 100vw">
-                <up-button
-                    type="primary"
-                    text="返回"
-                    @tap="onContinueFill"
-                    style="width: 95%; margin: 30rpx auto"
-                />
-                <!-- <up-button
-                    text="退出"
-                    :plain="true"
-                    type="primary"
-                    @tap="onExit"
-                    style="width: 95%; margin: 0 auto"
-                /> -->
-            </view>
-        </template>
-
-        <up-modal
-            :show="showModal"
-            title="温馨提示"
-            content="是否确认退出？"
-            showCancelButton
-            @confirm="onConfirm"
-        />
     </view>
 </template>
 
 <script setup>
-import { submitOptionsApi } from '@/services/options.js'
 import { ref } from 'vue'
+const isError = ref(false)
 
-// 表单数据源
+// 填写意见按钮
-const opinionModel = ref({
-    userName: '',
-    userPhone: '',
-    unit: '',
-    options: '',
-})
-
-const opinionRules = ref({
-    userName: [
-        {
-            type: 'string',
-            required: true,
-            message: '请填写姓名',
-            trigger: ['blur', 'change'],
-        },
-        {
-            pattern: /^[\u4e00-\u9fa5]{2,6}$/,
-            // 正则检验前先将值转为字符串
-            transform(value) {
-                return String(value)
-            },
-            message: '请填写正确的姓名',
-        },
-    ],
-    userPhone: [
-        {
-            type: 'string',
-            required: true,
-            message: '请填写电话',
-            trigger: ['blur', 'change'],
-        },
-
-        {
-            pattern: /^1[3-9]\d{9}$/,
-            // 正则检验前先将值转为字符串
-            transform(value) {
-                return String(value)
-            },
-            message: '请填写正确的手机号码',
-        },
-    ],
-    options: [
-        {
-            type: 'string',
-            required: true,
-            message: '请填写意见',
-            trigger: ['blur', 'change'],
-        },
-        {
-            max: 500,
-            message: '字数不能超过500',
-        },
-    ],
-})
-
-// 表单实例
-const opinionModelRef = ref(null)
-
-// 是否提交成功
-const isSuccess = ref(false)
-
-// 提示弹框
-const showModal = ref(false)
-
-// 提交按钮
 const onSubmitOptions = () => {
-    opinionModelRef.value
+    uni.navigateTo({ url: '/pages/opinion/index' })
-        .validate()
-        .then(async (valid) => {
-            if (valid) {
-                console.log('opinionModel.value', opinionModel.value)
-                const res = await submitOptionsApi(opinionModel.value)
-
-                if (res.code === 0) {
-                    uni.$u.toast('提交成功')
-                    isSuccess.value = true
-                    opinionModel.value.options = ''
-                    opinionModel.value.userPhone = ''
-                    opinionModel.value.userName = ''
-                    opinionModel.value.unit = ''
-                } else {
-                    uni.$u.toast(res.msg + '提交失败')
-                }
-            }
-        })
-        .catch(() => {
-            // 处理验证错误
-        })
 }
 
-// 继续填写
+if (isError.value) {
-const onContinueFill = () => {
+    uni.redirectTo({ url: '/pages/error/index' })
-    isSuccess.value = false
-}
-// 退出
-const onExit = () => {
-    showModal.value = true
-}
-
-// 确认退出
-const onConfirm = () => {
-    uni.redirectTo({ url: '/pages/index/index' })
 }
 </script>
 
 <style lang="scss" scoped>
 .content {
     height: 100vh;
+    padding: 20px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    justify-content: space-between;
     background-color: #f5f5f5;
     overflow-y: auto;
-}
-::v-deep .opinion-form {
-    width: 90%;
-    height: auto;
-}
 
-.input-content {
+    .text-box {
-    background-color: #fff;
+        line-height: 2.2;
-}
+        font-size: 12px;
-
+        letter-spacing: 2px;
-.success-container {
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    padding: 120rpx 0;
-    background-color: #fff;
-    box-sizing: border-box;
-
-    .success {
-        font-weight: bold;
-        font-size: 16px;
-    }
-
-    .thanks {
-        font-size: 13px;
-        padding: 10rpx 0;
-        color: #848181;
     }
 }
 </style>

src/pages/opinion/index.vue

@@ -10,44 +10,64 @@
                 labelWidth="auto"
                 class="opinion-form"
             >
-                <up-form-item label="姓名" prop="userName" required>
+                <up-form-item label="姓名" prop="userName">
                     <up-input
                         v-model="opinionModel.userName"
                         class="input-content"
                         placeholder="填写姓名"
+                        clearable
                     />
                 </up-form-item>
-                <up-form-item label="电话" prop="userPhone" required>
+                <up-form-item label="电话" prop="userPhone">
                     <up-input
                         v-model="opinionModel.userPhone"
                         class="input-content"
                         placeholder="填写电话"
+                        clearable
                     />
                 </up-form-item>
-                <up-form-item label="意见归属单位/部门" prop="userCompany">
+                <!-- <up-form-item label="意见归属单位/部门" prop="userCompany">
                     <up-input
                         v-model="opinionModel.unit"
                         class="input-content"
                         placeholder="填写归属单位/部门"
+                        clearable
                     />
-                </up-form-item>
+                </up-form-item> -->
                 <up-form-item label="意见" prop="options" required>
                     <up-textarea
                         v-model="opinionModel.options"
                         placeholder="请输入内容"
                         class="input-content"
-                        style="min-height: 30vh"
+                        :maxlength="500"
-                        :maxlength="3"
                         count
+                        style="max-height: 500px; overflow-y: auto"
+                        height="300px"
+                        clearable
+                    >
+                    </up-textarea>
+                </up-form-item>
+
+                <up-form-item label="附件(最多上传5张图片)">
+                    <up-upload
+                        name="1"
+                        multiple
+                        :maxCount="5"
+                        accept="image"
+                        @delete="deletePic"
+                        :fileList="fileList"
+                        @afterRead="afterRead"
                     />
                 </up-form-item>
 
-                <up-button
+                <up-form-item>
-                    type="primary"
+                    <up-button
-                    text="提交意见"
+                        type="primary"
-                    style="margin-top: 30rpx"
+                        text="提交意见"
-                    @tap="onSubmitOptions"
+                        style="margin-top: 30rpx"
-                ></up-button>
+                        @tap="onSubmitOptions"
+                    />
+                </up-form-item>
             </up-form>
         </template>
 
@@ -60,17 +80,17 @@
             <view style="width: 100vw">
                 <up-button
                     type="primary"
-                    text="继续填写"
+                    text="返回"
                     @tap="onContinueFill"
                     style="width: 95%; margin: 30rpx auto"
                 />
-                <up-button
+                <!-- <up-button
                     text="退出"
                     :plain="true"
                     type="primary"
                     @tap="onExit"
                     style="width: 95%; margin: 0 auto"
-                />
+                /> -->
             </view>
         </template>
 
@@ -88,8 +108,6 @@
 import { submitOptionsApi } from '@/services/options.js'
 import { ref } from 'vue'
 
-console.log('submitOptionsApi', submitOptionsApi)
-
 // 表单数据源
 const opinionModel = ref({
     userName: '',
@@ -97,30 +115,43 @@ const opinionModel = ref({
     unit: '',
     options: '',
 })
-const opinionRules = ref({
-    userName: {
-        type: 'string',
-        required: true,
-        message: '请填写姓名',
-        trigger: ['blur', 'change'],
-    },
-    userPhone: [
-        {
-            type: 'string',
-            required: true,
-            message: '请填写电话',
-            trigger: ['blur', 'change'],
-        },
 
-        {
+const fileList = ref([])
-            pattern: /^1[3-9]\d{9}$/,
+
-            // 正则检验前先将值转为字符串
+const opinionRules = ref({
-            transform(value) {
+    // userName: [
-                return String(value)
+    //     {
-            },
+    //         type: 'string',
-            message: '请填写正确的手机号码',
+    //         required: true,
-        },
+    //         message: '请填写姓名',
-    ],
+    //         trigger: ['blur', 'change'],
+    //     },
+    //     {
+    //         pattern: /^[\u4e00-\u9fa5]{2,6}$/,
+    //         // 正则检验前先将值转为字符串
+    //         transform(value) {
+    //             return String(value)
+    //         },
+    //         message: '请填写正确的姓名',
+    //     },
+    // ],
+    // userPhone: [
+    //     {
+    //         type: 'string',
+    //         required: true,
+    //         message: '请填写电话',
+    //         trigger: ['blur', 'change'],
+    //     },
+
+    //     {
+    //         pattern: /^1[3-9]\d{9}$/,
+    //         // 正则检验前先将值转为字符串
+    //         transform(value) {
+    //             return String(value)
+    //         },
+    //         message: '请填写正确的手机号码',
+    //     },
+    // ],
     options: [
         {
             type: 'string',
@@ -128,6 +159,10 @@ const opinionRules = ref({
             message: '请填写意见',
             trigger: ['blur', 'change'],
         },
+        {
+            max: 500,
+            message: '字数不能超过500',
+        },
     ],
 })
 
@@ -179,6 +214,54 @@ const onExit = () => {
 const onConfirm = () => {
     uni.redirectTo({ url: '/pages/index/index' })
 }
+
+// 删除图片
+const deletePic = (event) => {
+    fileList.value.splice(event.index, 1)
+}
+
+// 新增图片
+const afterRead = async (event) => {
+    console.log('event', event)
+    let lists = [].concat(event.file)
+    let fileListLen = fileList.value.length
+    lists.map((item) => {
+        fileList.value.push({
+            ...item,
+            status: 'uploading',
+            message: '上传中',
+        })
+    })
+    for (let i = 0; i < lists.length; i++) {
+        const result = await uploadFilePromise(lists[i].url)
+        let item = fileList.value[fileListLen]
+        fileList.value.splice(fileListLen, 1, {
+            ...item,
+            status: 'success',
+            message: '',
+            url: result,
+        })
+        fileListLen++
+    }
+}
+
+const uploadFilePromise = (url) => {
+    return new Promise((resolve, reject) => {
+        let a = uni.uploadFile({
+            url: 'http://192.168.2.21:7001/upload',
+            filePath: url,
+            name: 'file',
+            formData: {
+                user: 'test',
+            },
+            success: (res) => {
+                setTimeout(() => {
+                    resolve(res.data.data)
+                }, 1000)
+            },
+        })
+    })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -188,9 +271,11 @@ const onConfirm = () => {
     flex-direction: column;
     align-items: center;
     background-color: #f5f5f5;
+    overflow-y: auto;
 }
 ::v-deep .opinion-form {
     width: 90%;
+    height: auto;
 }
 
 .input-content {

src/utils/http.js

@@ -1,14 +1,12 @@
 import { useMemberStore } from '@/stores'
 
-console.log('useMemberStore()', useMemberStore())
-
 /**
  *  添加拦截器
  *  拦截 request 请求
  *  baseURL 设置请求ip地址和端口
  */
 const ENV = process.env.NODE_ENV
-const baseURL = ENV === 'development' ? 'http://192.168.0.38:8080' : 'http://192.168.0.14:21666'
+const baseURL = ENV === 'development' ? '/api' : 'http://192.168.0.14:21666'
 
 /**
  * httpInterceptor 分别拦截 request 和 uploadFile 请求