dvcp_v2_wxcp_app/src/apps/AppInterview/detail.vue

<template>
  <div class="interviewDetail">
    <template v-if="isEdit">
      <u-form ref="interviewForm" label-position="top" :rules="rules" :model="form">
        <u-form-item label="调查走访事项" prop="title" required>
          <u-input v-model="form.title" placeholder="请输入，最多30字" maxlength="30"/>
        </u-form-item>
        <u-form-item label="调查走访内容" prop="content">
          <ai-textarea v-model="form.content" placeholder="请输入，最多500字" :maxlength="500"/>
        </u-form-item>
        <u-form-item label="图片（最多9张）">
          <ai-uploader multiple :limit="9" :def.sync="form.fileList" action="/admin/file/add2"/>
        </u-form-item>
      </u-form>
      <div bottom>
        <u-button type="primary" @tap="submitForm">保存</u-button>
      </div>
    </template>
    <template v-else>
      <div class="headerPane">
        <b>{{ form.title }}</b>
        <div>记录时间：{{ form.createTime }}</div>
      </div>
      <div class="contentPane">
        <div v-html="form.content"/>
        <div flex class="wrap">
          <ai-image v-for="(op,i) in form.fileList" :src="op.accessUrl" preview :key="i"/>
        </div>
      </div>
    </template>
    <ai-back/>
  </div>
</template>

<script>
import UButton from "../../uview/components/u-button/u-button";
import AiUploader from "../../components/AiUploader";
import UInput from "../../uview/components/u-input/u-input";
import AiImage from "../../components/AiImage";
import AiTextarea from "../../components/AiTextarea";
import UFormItem from "../../uview/components/u-form-item/u-form-item";
import AiBack from "../../components/AiBack";

export default {
  name: 'interviewDetail',
  components: {AiBack, UFormItem, AiTextarea, AiImage, UInput, AiUploader, UButton},
  computed: {
    isEdit() {
      let flag = this.$route.query?.detail != 1
      !flag && uni.setNavigationBarTitle({title: "走访详情"})
      return flag
    },
    rules() {
      return {
        title: [{required: true, message: '请输入 调查走访事项'}],
        // content: [{required: true, message: '请输入 调查走访内容'}],
      }
    }
  },
  data() {
    return {
      form: {
        fileList: []
      }
    }
  },
  created() {
    this.searchDetail();
  },
  methods: {
    submitForm() {
      this.$refs.interviewForm?.validate(v => {
        if (v) {
          this.$http.post(`/app/appinterview/add-xcx`, {
            ...this.form
          }).then(res => {
            if (res?.code == 0) {
              this.$u.toast("提交成功！")
              uni.navigateBack()
            }
          })
        }
      })
    },
    searchDetail() {
      let {id} = this.$route.query
      id && this.$http.post(`/app/appinterview/queryDetailById`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.form = {...res.data};
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.interviewDetail {
  background: #F3F6F9;
  min-height: 100%;

  .u-form {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #f3f6f9;
    position: relative;
    padding: 0 0 188px;
    box-sizing: border-box;
    font-size: 30px;

    ::v-deep textarea {
      width: 100%;
    }

    ::v-deep .u-form-item {
      margin-bottom: 16px;

      .u-form-item--left__content__label {
        font-weight: 400;
      }

      div[flex] {
        width: 100%;
      }
    }
  }

  div[bottom] {
    z-index: 99;
    padding: 0;
    height: 112px;

    .u-btn {
      height: 100%;
      border-radius: 0;
    }
  }

  ::v-deep .headerPane {
    width: 100%;
    background: #3975C6;
    color: #fff;
    padding: 24px 32px 32px;
    box-sizing: border-box;
    font-size: 28px;

    b {
      display: block;
      font-size: 40px;
      line-height: 64px;
      letter-spacing: 2px;
      margin-bottom: 16px;
    }
  }

  ::v-deep .contentPane {
    padding: 32px;
    width: 100%;
    box-sizing: border-box;
    font-size: 32px;
    font-weight: 400;
    color: #666;
    line-height: 56px;

    .wrap {
      margin-top: 32px;
    }

    .AiImage {
      width: 31%;
      margin-bottom: 16px;
      margin-right: 16px;

      image {
        width: 100%;
        height: 218px;
      }
    }
  }
}
</style>