3.23

代码量：50

博客：1

一些模板测试代码uniapp(新增)

<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="form" labelWidth="80px">
    <!-- <uni-forms-item label="访客记录id" name="recordsId"
    >
      <uni-easyinput v-model="form.recordsId" placeholder="请输入访客记录id" />
    </uni-forms-item>
    <uni-forms-item label="类目id" name="itemsId"
    >
      <uni-easyinput v-model="form.itemsId" placeholder="请输入类目id" />
    </uni-forms-item> -->
  <uni-forms-item label="描述内容" name="itemsDescribe"
  >
    <piaoyiEditor :values="form.itemsDescribe" @changes="itemsDescribeEditorContens" :maxlength="3000" :readOnly="false"/>
  </uni-forms-item>
  <uni-forms-item label="图片文件" name="pictureFileId"
  >
    <uni-file-picker limit="9" @delete="pictureFileIdUploadDelete" @select="pictureFileIdUploadSelect" title="最多选择9张图片"></uni-file-picker>
  </uni-forms-item>
  <uni-forms-item label="视频文件" name="videoFileId"
  >
    <uni-file-picker limit="5" file-mediatype="all" @delete="videoFileIdUploadDelete" @select="videoFileIdUploadSelect" title="最多选择5个文件"></uni-file-picker>
  </uni-forms-item>
      </uni-forms>
      <view class="button-group">
        <button type="default" style="padding:0 3em;font-size:14px"  class="button" @click="reset">重置</button>
        <button type="primary" style="padding:0 3em;font-size:14px"  class="button" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>


<script>
    import { addRecordsItems,getRecordsItems,listRecordsItems } from "@/api/business/recordsItems";
    import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
    import { uploadFile } from "@/api/common";
    import config from '@/config';
    const baseUrl = config.baseUrl

  // import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"

export default {
components: {
    // zxzUniDataSelect
      piaoyiEditor,
},
data() {
  return {
    //字典类型筛选options
    form: {},
    rules: {
    }
  }
},
onLoad(option) {
  //字典类型查询
},
onReady() {
  this.$refs.form.setRules(this.rules)
},
methods: {
      //文本编辑器
      itemsDescribeEditorContens(e) {
        this.form.itemsDescribe = e.html
      },
      // 选取文件后触发上传
      pictureFileIdUploadSelect(e){
        console.log('选择文件：',e)
        let data = {name: 'file', filePath: e.tempFilePaths[0]}
        uploadFile(data).then(response => {
          var res = this.$myUtils.addUploadData(response,this.form.pictureFileId,this.form.pictureFileIdTempFilePath,e.tempFilePaths[0])
          this.form.pictureFileId = res.fileId
          this.form.pictureFileIdTempFilePath = res.fileIdTempFilePath
          uni.showToast({ title: "上传成功", icon: 'success' })
        })
      },
      //删除文件
      pictureFileIdUploadDelete(e){
        var arr = this.$myUtils.addUploadDelete(this.form.pictureFileIdTempFilePath,this.form.pictureFileId,e.tempFilePath)
        if(arr.length>0){
          this.form.pictureFileId = arr.join(",");
        }else{
          this.form.pictureFileId = ""
        }
      },
      // 选取文件后触发上传
      videoFileIdUploadSelect(e){
        console.log('选择文件：',e)
        let data = {name: 'file', filePath: e.tempFilePaths[0]}
        uploadFile(data).then(response => {
          var res = this.$myUtils.addUploadData(response,this.form.videoFileId,this.form.videoFileIdTempFilePath,e.tempFilePaths[0])
          this.form.videoFileId = res.fileId
          this.form.videoFileIdTempFilePath = res.fileIdTempFilePath
          uni.showToast({ title: "上传成功", icon: 'success' })
        })
      },
      //删除文件
      videoFileIdUploadDelete(e){
        var arr = this.$myUtils.addUploadDelete(this.form.videoFileIdTempFilePath,this.form.videoFileId,e.tempFilePath)
        if(arr.length>0){
          this.form.videoFileId = arr.join(",");
        }else{
          this.form.videoFileId = ""
        }
      },
  /* 提交*/
  submit() {
    console.log(this.form)
    this.$refs.form.validate().then(res => {
      addRecordsItems(this.form).then(response => {
        this.$modal.msgSuccess("新增成功")
        setTimeout(() => {
          // 返回到上一级父页面
          this.$tab.navigateBack();
        },500)
      })
    })
  },
  /* 表单重置*/
  reset(){
    this.form = {};
  }
}
}
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }
  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }
</style>