opms_wechat/frontend_mobile/pages/publicPages/follow.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-17 16:55:08
 * @Description: file content
 * @FilePath: \oms\pages\publicPages\follow.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" @click="goBack()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>填写跟进</text>
        </view>
      </view>
    </view>
    <view class="main">
      <u-form :model="addForm" :rules="rules" ref="addForm" label-width="0">
        <u-form-item prop="content" customStyle="padding:40rpx 0 34rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            跟进内容
          </view>
          <u-textarea
            v-model="addForm.content"
            placeholder="请输入跟进内容"
            maxlength="800"
            height="190rpx"
            count
            customStyle="border-radius:16rpx"></u-textarea>
        </u-form-item>
        <u-form-item prop="date" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            跟进时间
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择跟进时间"
            v-model="addForm.date"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="mode" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showMode = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            跟进方式
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择跟进方式"
            v-model="addForm.mode"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="contactsName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="open">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            联系人
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择客户联系人"
            v-model="addForm.contactsName"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
      </u-form>
      <view class="upload-file-box">
        <view class="form-label flex_l">
          <view class="label-tag"></view>
          附件
        </view>
        <uni-file-picker
          file-mediatype="all"
          v-model="imageValue"
          mode="grid"
          @select="select"
          @progress="progress"
          @success="success"
          @fail="fail"
          ref="upload"
          limit="1">
          <view class="upload-btn">
            <u-icon name="plus-circle-fill" color="blue" size="28"></u-icon>
          </view>
        </uni-file-picker>
      </view>
      <view class="save" @click="handleAdd">保存</view>
      <!-- 选择跟进方式 -->
      <u-picker
        :show="showMode"
        :columns="modeColumns"
        keyName="label"
        @cancel="showMode = false"
        @confirm="pickMode"></u-picker>
      <!-- 选择下次时间 -->
      <u-datetime-picker
        v-if="showDate"
        :show="showDate"
        mode="datetime"
        v-model="addForm.date"
        @cancel="showDate = false"
        @confirm="pickDate"></u-datetime-picker>
    </view>
    <u-notify ref="uNotify"></u-notify>
    <u-toast ref="uToast"></u-toast>
    <!-- 客户联系人 -->
    <customer-contact ref="concat" @close="closeConcat"></customer-contact>
    <!-- 项目联系人 -->
    <project-contact ref="projectConcat" @close="closeConcat"></project-contact>
  </view>
</template>
<script>
  import { mapGetters } from 'vuex'
  import to from 'await-to-js'
  import customerApi from '../../api/customer'
  import ProjectContact from '../../components/ProjectContact'
  import CustomerContact from '../../components/CustomerContact'
  export default {
    name: 'omsIndex',
    components: { CustomerContact, ProjectContact },
    data() {
      return {
        imageValue: [],
        height: '',
        paddingTop: '',
        showMode: false, //选择行业
        showDate: false,
        modeColumns: [
          [
            {
              label: '电话',
              id: '10',
            },
            {
              label: '邮件',
              id: '20',
            },
            {
              label: '拜访',
              id: '30',
            },
          ],
        ],
        addForm: {
          files: [],
          date: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'), //时间
          content: '', //客户姓名
          mode: '', //跟进方式
          modeId: 0,
          fileName: '', //附件
          contactsName: '', //联系人
          contactsId: 0, //联系人ID
        },
        targetType: 0, //跟进对象类型(10客户，20项目，30合同，40回款)
        rules: {
          content: {
            type: 'string',
            required: true,
            message: '请填写跟进内容',
            trigger: ['blur'],
          },
          date: {
            type: 'string',
            required: true,
            message: '请填写跟进时间',
            trigger: ['blur'],
          },
          mode: {
            type: 'string',
            required: true,
            message: '请选择跟进方式',
            trigger: ['blur', 'change'],
          },
          contactsName: {
            type: 'string',
            required: true,
            message: '请选择联系人',
            trigger: ['blur', 'change'],
          },
        },
      }
    },
    computed: {
      ...mapGetters(['followPageDetail']),
    },
    onLoad(option) {
      this.targetType = option.targetType
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    mounted() {
      console.log(this.followPageDetail)
    },
    methods: {
      // 打开客户联系人
      open() {
        console.log(this.followPageDetail)
        if (this.targetType == '10') {
          this.$refs.concat.open(this.followPageDetail.id)
        } else if (this.targetType == '20') {
          this.$refs.projectConcat.open(this.followPageDetail.id, this.followPageDetail.custId)
        }
      },
      // 行业选择
      pickMode(e) {
        console.log(e)
        this.addForm.modeId = e.value[0].id
        this.addForm.mode = e.value[0].label
        this.showMode = false
      },
      async pickDate(e) {
        this.showDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
        this.addForm.date = timeValue
        console.log(timeValue)
      },
      // 关闭选择用户
      closeConcat(user) {
        if (user) {
          console.log(user)
          this.addForm.contactsName = user.label
          this.addForm.contactsId = user.id
        }
      },
      handleAdd() {
        console.log(this.followPageDetail)
        this.$refs.addForm
          .validate()
          .then(async () => {
            let idParams = {}
            if (this.targetType == '10') {
              idParams = {
                custId: this.followPageDetail.id,
                custName: this.followPageDetail.custName,
                targetId: this.followPageDetail.id,
                targetName: this.followPageDetail.custName,
              }
            } else if (this.targetType == '20') {
              idParams = {
                custId: this.followPageDetail.custId,
                custName: this.followPageDetail.custName,
                targetId: this.followPageDetail.custId,
                targetName: this.followPageDetail.custName,
              }
            }
            let params = Object.assign(
              {
                contactsId: this.addForm.contactsId,
                contactsName: this.addForm.contactsName,
                followContent: this.addForm.content,
                followDate: this.addForm.date,
                followType: this.addForm.modeId,
                targetType: this.targetType,
                files: this.addForm.files,
              },
              idParams
            )
            const [err, res] = await to(customerApi.createFollow(params))
            if (err) return
            if (res && res.code == 200) {
              this.$refs.uToast.show({
                type: 'success',
                message: '创建成功',
                complete: () => {
                  uni.navigateBack({
                    //关闭当前页面，返回上一页面或多级页面。
                    delta: 1,
                  })
                },
              })
            }
          })
          .catch((err) => {
            console.log(err)
            this.$refs.uNotify.show({
              top: this.height + this.paddingTop + 10,
              type: 'warning',
              message: err[0].message,
              duration: 1000 * 3,
            })
          })
      },
      // // 选择上传触发函数
      select(e) {
        console.log(e)
        let url = process.uniEnv.VUE_APP_UPLOAD_WEED
        uni.request({
          url, //仅为示例，并非真实接口地址。
          success: (res) => {
            this.uploadFiles(e, res.data)
          },
        })
      },
      // 上传函数
      async uploadFiles(e, res) {
        let action = 'http://' + res.url + '/' + res.fid
        uni.uploadFile({
          url: action,
          filePath: e.tempFilePaths[0],
          name: 'file',
          formData: {
            file: e.tempFiles[0].file,
          },
          success: (res) => {
            this.addForm.files = [{ fileName: e.tempFiles[0].file.name, fileUrl: action }]
          },
          fail: () => {
            console.log('err')
          },
        })
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },

      // 上传成功
      success(e) {
        console.log('上传成功')
      },

      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      },
      goBack() {
        uni.navigateBack({
          //关闭当前页面，返回上一页面或多级页面。
          delta: 1,
        })
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3e7ef8;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 188rpx);
      background: #ffffff;
      box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
      border-radius: 31rpx 31rpx 0 0;
      padding: 0 32rpx;
      overflow: auto;
      padding-bottom: 64rpx;
      .form-label {
        font-size: 32rpx;
        font-weight: bold;
        color: #323232;
        padding-bottom: 18rpx;
        .label-tag {
          width: 15rpx;
          height: 15rpx;
          background: rgba(62, 126, 248, 0.6);
          border-radius: 50%;
          margin-right: -4rpx;
        }
      }
      .upload-file-box {
        padding: 20rpx 0;
        position: relative;
        .upload-btn {
          position: absolute;
          right: 0;
          top: 26rpx;
        }
      }
    }
    .save {
      width: 569rpx;
      height: 92rpx;
      background: #3e7ef8;
      border-radius: 31rpx;
      margin: 116rpx auto 0;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
      line-height: 92rpx;
    }
  }
</style>