jiangbei-mini-h5/src/subPages/pages/reportServer/index.vue

<script lang="ts" setup>
import { addServiceReportData, pageServiceReportData } from '@/api/reportService'
import { addReportServiceDataReq, ReportServiceRes } from '@/api/reportService/types'
import { onMounted, ref } from 'vue'
import GridAddress from '@/components/address/gridAddress/index.vue'
import { getQuestionTypeList } from '@/api/questionReqort';
import { QuestionType } from '@/api/questionReqort/types';


const active = ref(0)

const formData = ref<Partial<addReportServiceDataReq>>({})
const rules = ref({
  type: [{ required: true, message: '请选择服务类型' }],
  title: [{ required: true, message: '请输入服务标题' }],
  content: [{ required: true, message: '请输入服务内容' }],
  contactPerson: [{ required: true, message: '请输入联系人' }],
  contactPhone: [{ required: true, message: '请输入联系电话' }],
  area: [{ required: true, message: '请选择服务区域' }],
})
// 服务类型
const range = ref<{text: string, value: string}[]>([])

const submit = async () => {
  const { data } = await addServiceReportData({
    ...formData.value,
    streetCode: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaCode : '',
    streetName: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaName : '',
    communityCode: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaCode : '',
    communityName: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaName : '',
    grid: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaCode : '',
    gridName: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaName : '',
  })
  if (data) {
    uni.showToast({
      title: '上报成功',
      icon: 'success',
      duration: 1000,
    })
    formData.value = {}
  }
}

/**
 * 已上报问题
 */
const list = ref<ReportServiceRes[]>([])
const loading = ref(false)
const finished = ref(false)
const pageInfo = ref({
  pageNumber: 1,
  pageSize: 10,
})
const reportServiceList = async () => {
  loading.value = true
  const { data } = await pageServiceReportData({
    pageNumber: pageInfo.value.pageNumber,
    pageSize: pageInfo.value.pageSize,
  })
  list.value = list.value.concat(data.records)
  pageInfo.value.pageNumber++
  loading.value = false
  finished.value = data.records.length < pageInfo.value.pageSize
  if (data.records.length === 0 || !data.records) {
    finished.value = true
  }
}

/** 跳转服务详情 */
const handleGoDetail = (item: ReportServiceRes) => {
  uni.navigateTo({
    url: `/subPages/pages/reportServer/detail?id=${item.uuid}`,
  })
}

/** 选择地区 */
const addressList = ref([])
const areaShow = ref(false)
const handleAddressFinish = (value) => {
  formData.value.area = value.selectedOptions[value.tabIndex].areaName
  addressList.value = value
}
const hanleSelectArea = () => {
  areaShow.value = true
}


onMounted(async () => {
  const {data} = await getQuestionTypeList({
    page: 1,
    limit: 9999,
    category:QuestionType.SERVICE
    
  })
  if (data.records) {
    range.value = data.records.map(item => {
      return {
        text: item.typeName,
        value: item.typeName
      }
    })
  } else {
     range.value = []
  }
})
</script>

<template>
  <van-tabs v-model:active="active" type="card" class="top-tabs">
    <van-tab title="上报服务">
      <view class="tab-container">
        <uni-forms :modelValue="formData" :rules="rules" label-width="110px" label-align="right">
          <uni-forms-item label="服务类型" required name="serviceType">
            <uni-data-select v-model="formData.serviceType" :localdata="range"></uni-data-select>
          </uni-forms-item>
          <!-- 问题标题 -->
          <uni-forms-item label="所需服务标题" required name="serviceTitle">
            <uni-easyinput v-model="formData.serviceTitle" placeholder="所需服务标题"></uni-easyinput>
          </uni-forms-item>
          <!-- 问题内容 -->
          <uni-forms-item label="所需服务内容" required name="serviceContent">
            <uni-easyinput v-model="formData.serviceContent" type="textarea" placeholder="所需服务内容"></uni-easyinput>
          </uni-forms-item>
          <!-- 问题所在地 -->
          <uni-forms-item label="所在区域" required name="area">
            <uni-easyinput :value="formData.area" placeholder="所在区域" @focus="hanleSelectArea"></uni-easyinput>
            <GridAddress v-model="areaShow" @finish="handleAddressFinish"></GridAddress>
          </uni-forms-item>
          <!-- 联系人姓名 -->
          <uni-forms-item label="联系人姓名" required name="contactPerson">
            <uni-easyinput v-model="formData.contactPerson" placeholder="联系人姓名"></uni-easyinput>
          </uni-forms-item>
          <!-- 联系人电话 -->
          <uni-forms-item label="联系人电话" required name="contactPhone">
            <uni-easyinput v-model="formData.contactPhone" placeholder="联系人电话"></uni-easyinput>
          </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="reportServiceList">
          <view v-for="item in list" :key="item.uuid" class="list-item-style">
            <view class="top">
              <view class="title">{{ item.serviceTitle }}</view>
              <van-button plain hairline size="mini" type="primary" @click="handleGoDetail(item)">查看详情</van-button>
            </view>
            <view>定位：{{ item.area }}</view>
            <view class="flex gap-3">
              <view class="type">问题类型</view>
              <van-tag color="#CFFECE" text-color="black">{{ item.serviceType }}</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;
  padding-bottom: 30px;
  min-height: calc(100vh - var(--van-tabs-card-height));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  > uni-view:first-child {
    flex: 1;
  }
}
.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>