jjx-wap/pages/self/make.vue

<template>
  <view class="wrap">
    <!-- 吸顶 -->
    <u-sticky offset-top="0" customNavHeight="0">
      <!-- 顶部 -->
      <uititle title="金久信自营下询价单"></uititle>
    </u-sticky>
    <view class="bg-white p-30">
      <u-form ref="form" label-width="100px">
        <u-form-item label="联系人" required @click.native="showPicker = true">
          <!--                    <u-select v-model="name" placeholder="点击选择业务联系人"-->
          <!--                              class="w-100p" @change="selectContact">-->
          <!--                        <el-option-->
          <!--                            v-for="(item, index) in contactList"-->
          <!--                            :key="index"-->
          <!--                            :label="item.name"-->
          <!--                            :value="item.name">-->
          <!--                        </el-option>-->
          <!--                        <view slot="empty" class="text-gray pointer p-20">-->
          <!--                            <text>无业务联系人,请到</text>-->
          <!--                            <text class="text-main mx-15" @click="navToContact">个人中心</text>-->
          <!--                            <text>添加</text>-->
          <!--                        </view>-->
          <!--                    </u-select>-->
          <u-input v-model="name" placeholder="点击选择联系人" style="pointer-events:none" readonly/>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="联系方式" required>
          <u-input v-model="phone" placeholder="请输入联系方式" disabled/>
        </u-form-item>
        <u-form-item label="用户名称" required>
          <u-input v-model="company" placeholder="请输入您的用户名称"/>
        </u-form-item>
        <u-form-item label="询价单附件" required>
          <u-upload
            accept="file"
            :fileList="files"
            @afterRead="afterRead"
            @delete="deletePic"
            multiple
            :maxCount="10"
            width="70"
            height="70"
          ></u-upload>
          <!--                    <vk-data-upload v-model="files" accept="*" list-type="text">-->
          <!--                    </vk-data-upload>-->
        </u-form-item>
        <template v-if="files && files.length">
          <view v-for="(item, index) in files" :key="index" class="mr-10 mb-10 text-main text-25"
                @click="previewFile(item)">在线查看文件{{ index + 1 }}
          </view>
        </template>
        <!--                <p class="text-red text-25 mt-10">平台目前仅支持PDF文档上传，请你谅解！</p>-->
      </u-form>
      <view class="mt-20 flex justify-center items-center">
        <view>
          <u-button size="small" color="#A92924" text="取消" plain
                    @click="back"></u-button>
        </view>
        <view class="ml-20">
          <u-button size="small" color="#A92924" text="提交"
                    @click="addFiles"></u-button>
        </view>
      </view>
    </view>
    <u-picker :show="showPicker" :columns="[contactList]" keyName="name"
              @cancel="showPicker = false" @close="showPicker = false" closeOnClickOverlay
              @confirm="confirmContact"></u-picker>
  </view>
</template>

<script>
import uiheader from "@/components/index/header.vue";
import uititle from "@/components/common/title.vue";
import dayjs from "dayjs";
import md5 from "js-md5";

export default {
  name: "make",
  components: {uititle, uiheader},
  data() {
    return {
      files: [],
      name: null,
      phone: null,
      company: null,
      contactList: [],
      showPicker: false,
      province: null,
      city: null,
    }
  },
  methods: {
    navToContact() {
      uni.setStorageSync('user_tab', 8)
      uni.switchTab({
        url: '/pages/user/user?tab=8'
      })
    },
    async getContactList() {
      const {rows} = await vk.callFunction({
        url: 'client/businessContact/kh/getList',
      })
      this.contactList = rows
    },
    confirmContact({value}) {
      this.name = value[0].name
      this.phone = value[0].phone
      this.showPicker = false
    },
    afterRead({file}) {
      for (let i = 0; i < file.length; i++) {
        const item = file[i]
        // if (item.type !== 'application/pdf') {
        //   uni.showToast({
        //     title: '请上传PDF文件',
        //     icon: 'none'
        //   })
        //   return
        // }
        const suffix = item.name.split('.').pop()
        uniCloud.uploadFile({
          filePath: item.url,
          cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
          success: ({fileID}) => {
            uniCloud.getTempFileURL({
              fileList: [fileID]
            }).then(res => {
              this.files.push({
                url: res.fileList[0].tempFileURL,
                name: item.name
              })
            })
          }
        })
      }
    },
    deletePic({index}) {
      this.files.splice(index, 1)
    },
    back() {
      uni.navigateBack()
    },
    async addFiles() {
      if (!this.name) return this.$message({type: 'error', message: '请输入联系人'})
      if (!this.phone) return this.$message({type: 'error', message: '请输入联系方式'})
      if (!this.company) return this.$message({type: 'error', message: '请输入您的企业名称'})
      if (this.files.length === 0) return this.$message({type: 'error', message: '请上传询价单附件'})
      await vk.callFunction({
        url: 'client/selfSupport/kh/add',
        data: {
          files: this.files.map(item => item.url),
          city: this.city,
          province: this.province,
          name: this.name,
          phone: this.phone,
          company: this.company,
        }
      })
      this.$message({
        message: '下单成功',
        type: 'success'
      })
      uni.navigateBack()
    },
    previewFile(item) {
      window.location.href = item.url
    }
  },
  onLoad({province, city}) {
    this.province = JSON.parse(province)
    this.city = JSON.parse(city)
    this.getContactList()
    const user = uni.getStorageSync('uni_id_user_info')
    this.company = user.accountType === 2 ? user.company.companyName : user.person.personName

  }
}
</script>