dating-operation-opr/src/views/clue/customer/index.vue

<template>
  <div class="flex-col" style="height:100%;padding: 16px;" v-if="details">
    <div class="flex-row" style="background: white;width: 100%;padding: 10px;">
      <CropperAvatar :value="avatar" width="90px" @change="uploadAvatarAfter"/>
      <div class="flex-col" style="flex: 1;margin-left: 10px;">
        <div class="flex-row-center-start">
          <span style="font-size: 18px;font-weight: bold;">{{details.nickName}}</span>
          <!-- <Icon icon="ant-design:edit-twotone" size="18px" style="margin-left: 12px;color:#0960bd;"/> -->
          <Button type="link"><template #icon><Icon icon="ant-design:edit-twotone" size="16px" style="margin-left: 12px;color:#0960bd;"/></template></Button>
          <span style="color: #666;margin: 0 12px;">(ID：{{details.id}} | 渠道来源：{{channelList.find((find) => find.value === details.channelType)?.label}})</span>
          <Tag color="#d5d5d5">#线索阶段-0呼</Tag>
        </div>
        <div class="flex-row-center-start" style="margin-top: 8px;">
          <div class="flex-row-center-start" style="width: 240px;">
            <span style="color: #666;">电话：</span>
            <span style="color: #333;font-weight: bold;">{{details.phone}}</span>
          </div>
          <div class="flex-row-center-start" style="width: 240px;">
            <span style="color: #666;">微信：</span>
            <span style="color: #333;font-weight: bold;">{{details.weChatId || '--'}}</span>
          </div>
          <div class="flex-row-center-start" style="width: 240px;">
            <span style="color: #666;">客户标签：</span>
            <Tag color="#f50">无效</Tag>
            <Button style="height: 22px;line-height: 22px;width: 24px;border: 1px solid #0960bd;"><template #icon><Icon icon="ant-design:plus-outlined" size="14px" style="color:#0960bd;display: block;"/></template></Button>
          </div>
        </div>
        <div class="flex-row-center-start" style="margin-top: 8px;">
          <div class="flex-row-center-start" style="width: 240px;">
            <span style="color: #666;">下次跟进时间：</span>
            <span style="color: #333;">{{details.nextFollowTime || '--'}}</span>
          </div>
          <!-- <div class="flex-row-center-start" style="width: 240px;">
            <span style="color: #666;">创建人：</span>
            <span style="color: #333;">{{details.creatorName || '--'}}</span>
          </div> -->
          <div class="flex-row-center-start" style="width: 240px;">
            <span style="color: #666;">跟进人：</span>
            <span style="color: #333;">{{details.followName || '--'}}</span>
          </div>
          <div class="flex-row-center-end" style="flex:1;padding-right: 32px;">
            <Button size="small" type="primary">查看下一个客户</Button>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-col" style="background: white;width: 100%;margin-top: 16px;padding: 12px 40px 12px 40px;">
      <div class="flex-row-center-space">
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--</span>
        </div>
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--</span>
        </div>
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--</span>
        </div>
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--</span>
        </div>
      </div>
      <div class="flex-row-center-space" style="margin-top: 8px;">
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--</span>
        </div>
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--</span>
        </div>
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--</span>
        </div>
        <div class="flex-row-center-start" style="width: 240px;">
          <span style="color: #666;">签约红娘：</span>
          <span style="color: #333;font-weight: bold;">--dddd</span>
        </div>
      </div>
    </div>
    <div class="flex-row" style="width: 100%;flex: 1;margin-top: 16px;">
      <div style="flex: 1;background: white;padding: 0px 10px 10px 10px;">
        <Tabs v-model:activeKey="activeKey" :animated="false">
          <TabPane key="1" tab="客户资料">
            <div class="flex-col" style="padding-right: 48px; flex:1;padding-top: 16px;">
              <BasicForm @register="registerForm1"></BasicForm>
            </div>
          </TabPane>
          <TabPane key="2" tab="邀约进店">
            <Spin :spinning="spinning">
              <Result subTitle="暂无数据"></Result>
            </Spin>
          </TabPane>
          <TabPane key="3" tab="合同">
            <Result subTitle="暂无数据"></Result>
          </TabPane>
          <TabPane key="4" tab="约见记录">
            <Result subTitle="暂无数据"></Result>
          </TabPane>
          <template v-if="activeKey == '1'" #tabBarExtraContent>
            <Button type="link"><template #icon><Icon icon="ant-design:edit-twotone" size="16px" style="margin-right: -4px;"/></template>编辑资料</Button>
          </template>
        </Tabs>
      </div>
      <div style="width: 480px;background: white;margin-left: 16px;padding: 0px 10px 10px 10px;">
        <Tabs v-model:activeKey="activeKey2" :animated="false">
          <TabPane key="1" tab="跟进小计">
            <div class="flex-col-center-center" style="flex:1;padding-top: 16px;">
              <BasicForm @register="registerForm"></BasicForm>
              <Button type="primary" style="width: 160px;margin-top: 48px;">保存</Button>
            </div>
          </TabPane>
          <TabPane key="2" tab="跟进记录" style="flex:1;padding: 16px 16px 0px 16px;">
            <Timeline>
              <TimelineItem color="green">Create a services site 2015-09-01</TimelineItem>
              <TimelineItem color="red">
                <p>Solve initial network problems 1</p>
                <p>Solve initial network problems 2</p>
                <p>Solve initial network problems 3 2015-09-01</p>
              </TimelineItem>
              <TimelineItem>
                <p>Technical testing 1</p>
                <p>Technical testing 3 2015-09-01</p>
              </TimelineItem>
              <TimelineItem color="gray">
                <p>Technical testing 1</p>
                <p>Technical testing 2</p>
                <p>Technical testing 3 2015-09-01</p>
              </TimelineItem>
              <TimelineItem color="gray">
                <p>Technical testing 1</p>
                <p>Technical testing 3 2015-09-01</p>
              </TimelineItem>
            </Timeline>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router'
  import { onMounted, ref } from 'vue'
  import { Tabs, Card, Table, Button, TabPane, Tag, Timeline, TimelineItem, Result, Spin } from 'ant-design-vue'
  import { Icon } from '/@/components/Icon'
  import { CropperAvatar } from '/@/components/Cropper';
  import BasicForm from '/@/components/Form/src/BasicForm.vue'
  import { useForm } from '/@/components/Form'
  import { basicSchema, modalFormSchema } from './data'
  import { getClueInfo } from '/@/api/clue'
  import { genderList, channelList, clueStatusList } from '/@/enums/customerEnum'

  const details = ref<any>()
  onMounted(() => {
    initFetch()
  })

  async function initFetch() {
    const { query } = useRoute()
    const { id } = query || {}
    if (!id) return
    details.value = await getClueInfo(`${id}`)
  }
  
  const activeKey = ref<string>('1')
  const activeKey2 = ref<string>('1')
  const avatar = ref<string>('')

  // 基础信息表单配置
  const [registerForm1, { validate: validate1, setFieldsValue: setFieldsValue1 }] = useForm({
    labelWidth: 120,
    schemas: basicSchema,
    baseColProps: { span: 22 },
    showActionButtonGroup: false,
  })

  //这里是上传头像成功后的回调
  function uploadAvatarAfter(value) {
    //修改表单的值
    // setFieldsValue1({
    //   avatar: value,
    // });
  }

  const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue, updateSchema }] =
    useForm({
      labelWidth: 90,
      schemas: modalFormSchema,
      baseColProps: { span: 22 },
      showActionButtonGroup: false,
    })

  const spinning = ref<boolean>(false)
</script>
<style scoped lang="less">

</style>