|
|
@@ -0,0 +1,149 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const active = ref(0)
|
|
|
+
|
|
|
+const formData = ref({})
|
|
|
+const range = ref([
|
|
|
+ {
|
|
|
+ text: '功能问题',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '界面问题',
|
|
|
+ value: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '其他问题',
|
|
|
+ value: '3',
|
|
|
+ },
|
|
|
+])
|
|
|
+/**
|
|
|
+ * 上传图片
|
|
|
+ */
|
|
|
+const imageValue = ref([])
|
|
|
+const select = (e) => {}
|
|
|
+const progress = (e) => {
|
|
|
+ console.log(e)
|
|
|
+}
|
|
|
+const success = (e) => {
|
|
|
+ console.log(e)
|
|
|
+}
|
|
|
+const fail = (e) => {
|
|
|
+ console.log(e)
|
|
|
+}
|
|
|
+
|
|
|
+const submit = () => {
|
|
|
+ console.log(formData.value)
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 已上报问题
|
|
|
+ */
|
|
|
+const list = ref([])
|
|
|
+const onLoad = () => {
|
|
|
+ list.value.push('列表')
|
|
|
+}
|
|
|
+const loading = ref(false)
|
|
|
+const finished = ref(false)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 跳转问题详情 */
|
|
|
+const handleGoDetail = () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/subPages/pages/reportProblems/questDetail',
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <van-tabs v-model:active="active" type="card" class="top-tabs">
|
|
|
+ <van-tab title="上报问题">
|
|
|
+ <view class="tab-container">
|
|
|
+ <uni-forms :modelValue="formData">
|
|
|
+ <uni-forms-item label="问题类型" name="type">
|
|
|
+ <uni-data-select v-model="formData.type" :localdata="range"></uni-data-select>
|
|
|
+ </uni-forms-item>
|
|
|
+ <!-- 问题标题 -->
|
|
|
+ <uni-forms-item label="问题标题" name="title">
|
|
|
+ <uni-easyinput v-model="formData.title" placeholder="请输入问题标题"></uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <!-- 问题内容 -->
|
|
|
+ <uni-forms-item label="问题内容" name="content">
|
|
|
+ <uni-easyinput v-model="formData.content" type="textarea" placeholder="请输入问题内容"></uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <!-- 问题所在地 -->
|
|
|
+ <uni-forms-item label="问题所在地" name="location">
|
|
|
+ <uni-easyinput v-model="formData.location" placeholder="请输入问题所在地"></uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <!-- 上传附件 -->
|
|
|
+ <uni-forms-item label="上传附件" name="attachment">
|
|
|
+ <uni-file-picker
|
|
|
+ v-model="imageValue"
|
|
|
+ fileMediatype="image"
|
|
|
+ mode="grid"
|
|
|
+ @select="select"
|
|
|
+ @progress="progress"
|
|
|
+ @success="success"
|
|
|
+ @fail="fail"
|
|
|
+ />
|
|
|
+ <view class="mt-[10px]">支持上传jpg、png、jpeg、pdf的格式</view>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <van-button type="primary" @click="submit">提交</van-button>
|
|
|
+ </view>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="已上报问题">
|
|
|
+ <view class="tab-container">
|
|
|
+ <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
|
|
+ <view class="list-item-style">
|
|
|
+ <view class="top">
|
|
|
+ <view class="title">xxx</view>
|
|
|
+ <van-button plain hairline size="mini" type="primary" @click="handleGoDetail">查看详情</van-button>
|
|
|
+ </view>
|
|
|
+ <view>定位：xxxx</view>
|
|
|
+ <view class="flex gap-3">
|
|
|
+ <view class="type">问题类型</view>
|
|
|
+ <van-tag color="#7232dd">标签</van-tag>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-list>
|
|
|
+ </view>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.top-tabs {
|
|
|
+ :deep(.van-tabs__nav) {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tab-container {
|
|
|
+ padding: 20px;
|
|
|
+ min-height: calc(100vh - var(--van-tabs-card-height));
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.list-item-style {
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background-color: white;
|
|
|
+ > view {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
梦辉