crm-app-vue3/pages/orderDetail/page/detail.vue

<template>
  <view class="clueDetail_wrap">
    <view class="telPhone">
      <view class="left">
        <view class="phone"
          >电话:
          <show-real-text
            :real="receiptDetail.phone"
            :type="params.type"
            v-if="receiptDetail.phone"
          ></show-real-text>
        </view>
        <view
          class="copy_btn"
          v-if="params.type != '1'"
          @click="handleCopy(receiptDetail)"
          >复制</view
        >
      </view>
      <view class="right"> 发单人 : {{ receiptDetail.createNickName }} </view>
    </view>
    <view class="clueDetail_top_info">
      <view class="top_info_item">
        <view class="top">
          {{ defaultText(receiptDetail.clueOwnerName) }}
        </view>
        <view class="bottom"> 线索所属人 </view>
      </view>
      <view class="top_info_item">
        <view class="top">
          {{ defaultText(receiptDetail.brand) }}
        </view>
        <view class="bottom"> 品牌 </view>
      </view>
      <view class="top_info_item">
        <view class="top">
          {{ defaultText(receiptDetail.identificationName) }}
        </view>
        <view class="bottom"> 接单人 </view>
      </view>
      <view class="top_info_item">
        <view class="top">
          {{ crmFormCategoryFormat(receiptDetail.category) }}
        </view>
        <view class="bottom"> 类别 </view>
      </view>
      <view class="top_info_item">
        <view class="top">
          {{ crmFormTacticFormat(receiptDetail.tactic) }}
        </view>
        <view class="bottom"> 采用战术 </view>
      </view>
      <view class="top_info_item status-item">
        <view class="top">
          {{ crmFollowStatusFormat(receiptDetail.status) }}
        </view>
        <view class="bottom"> 跟进状态 </view>
      </view>
    </view>

    <view class="clue_state_wrap">
      <view class="top_left">阶段:</view>
      <view class="steps_wrap">
        <ld-select
          v-model="receiptDetail.state"
          :list="crmFormStateDict"
          value-key="dictValue"
          label-key="dictLabel"
          placeholder="点击选择阶段"
          @change="handleStateConfirm"
        >
        </ld-select>
      </view>
    </view>

    <!-- 跟进状态 -->
    <view class="order_action_wrap">
      <view class="action_title">状态:</view>
      <view
        class="action_buttons"
        v-if="['1', '2'].includes(receiptDetail.status)"
      >
        <u-button
          v-if="receiptDetail.status === '1'"
          type="success"
          size="small"
          text="接单"
          @click="handleOrderForm"
          customStyle="margin-right: 20rpx;"
        ></u-button>
        <u-button
          v-if="receiptDetail.status === '2'"
          type="primary"
          size="small"
          text="收单"
          @click="handleReceiptForm"
          customStyle="margin-right: 20rpx;"
        ></u-button>
        <u-button
          v-if="receiptDetail.status === '2'"
          type="warning"
          size="small"
          text="未收"
          @click="handleDenialForm"
          customStyle="margin-right: 20rpx;"
        ></u-button>
        <u-button
          v-if="receiptDetail.status === '1'"
          type="error"
          size="small"
          text="撤销"
          @click="handleDelete"
          customStyle="margin-right: 20rpx;"
        ></u-button>
      </view>
      <view v-else class="last_status">
        该订单{{ crmFollowStatusFormat(receiptDetail.status) }}不可再操作
      </view>
    </view>

    <view class="clue_tag_wrap">
      <view class="clue_tag_add_btn" @click="handleAddClueTag">
        + 添加标签
      </view>
      <u-tag
        :text="tag.name"
        plain
        plainFill
        :closable="true"
        @close="hanldeTagClose(tag)"
        borderColor="#fff"
        v-for="tag in receiptDetail.tags"
        :key="tag.id"
        style="margin-left: 10px; margin-bottom: 10px"
        :bgColor="tag.color"
        color="#fff"
      ></u-tag>
    </view>

    <yui-tabs
      :tabs="tabs"
      v-model="activeIndex"
      :lineWidth="'120rpx'"
      :isLazyRender="false"
      color="#108cff"
      titleActiveColor="#108cff"
      :swipeable="true"
      :swiper="false"
      :ellipsis="false"
      :scroll-threshold="3"
    >
      <template #chatFile>
        <upload-file
          :clueId="clueId"
          :sourceId="orderId"
          ref="uploadFile1"
          type="2"
          orderFileType="1"
          isDuplicate="1"
        ></upload-file>
      </template>
      <template #quoteFile>
        <upload-file
          :clueId="clueId"
          :sourceId="orderId"
          ref="uploadFile2"
          type="2"
          orderFileType="2"
          isDuplicate="1"
        ></upload-file>
      </template>
      <template #hdImageFile>
        <upload-file
          :clueId="clueId"
          :sourceId="orderId"
          ref="uploadFile3"
          type="2"
          orderFileType="3"
          isDuplicate="1"
        ></upload-file>
      </template>
      <template #otherFile>
        <upload-file
          :clueId="clueId"
          :sourceId="orderId"
          ref="uploadFile4"
          type="2"
          orderFileType="4"
          isDuplicate="1"
        ></upload-file>
      </template>
      <template #frontendFile>
        <upload-file
          :clueId="clueId"
          ref="uploadFile5"
          type="6"
          isDuplicate="1"
        ></upload-file>
      </template>
      <template #frontendFollow>
        <clue-follow :clueId="clueId" ref="clueFollow" type="4"></clue-follow>
      </template>
      <template #followRecord>
        <clue-follow :clueId="clueId" ref="follow" type="5"></clue-follow>
      </template>
      <template #receiptInfo>
        <receipt-form-list
          :sendFormId="orderId"
          :clueId="clueId"
          :receiptDetail="receiptDetail"
          ref="receiptFormList"
        ></receipt-form-list>
      </template>
      <template #commissionInfo>
        <commission-form-list
          :sendFormId="orderId"
          :clueId="clueId"
          ref="commissionFormList"
        ></commission-form-list>
      </template>
    </yui-tabs>

    <u-tabbar
      class="clueDetail_tabber"
      :fixed="true"
      inactiveColor="#ffffff"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        text="拨打电话"
        icon="../../static/clueDetail/icon-phone.png"
        @click="handleCallPhone"
      ></u-tabbar-item>
      <u-tabbar-item
        text="添加收单"
        icon="../../static/orderDetail/sd.png"
        @click="handleAddReceiptForm"
      ></u-tabbar-item>
      <u-tabbar-item
        text="新增分成"
        icon="../../static/orderDetail/add_commission.png"
        @click="handleAddCommission"
      ></u-tabbar-item>
      <u-tabbar-item
        text="添加跟进"
        icon="../../static/caseDetail/icon-follow.png"
        @click="handleAddFollow"
      ></u-tabbar-item>
    </u-tabbar>

    <group-select
      class="clueTagsSelect"
      :list="clueTagGroupVoList"
      scrollHeight="720rpx"
      groupName="groupName"
      groupChild="clueTagDataList"
      label-key="name"
      value-key="id"
      placeholder="请选择线索标签"
      v-model="checkTags"
      multiple
      clearable
      ref="clueTag"
      @confirm="handleClueTagConfirm"
    ></group-select>
  </view>
</template>

<script>
import { cloneDeep } from "lodash";
import { selectDictLabel } from "@/utils/util";
import uploadFile from "../tabs/uploadFile/index.vue";
import clueFollow from "../tabs/followRecord/index.vue";
import receiptFormList from "../tabs/receiptFormList/receiptFormList.vue";
import commissionFormList from "../tabs/commissionFormList/commissionFormList.vue";
export default {
  components: {
    uploadFile,
    clueFollow,
    receiptFormList,
    commissionFormList,
  },
  props: {
    orderId: {
      type: [String, Number],
      required: true,
    },
    clueId: {
      type: [String, Number],
      required: true,
    },
    params: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showModal: false,
      showStateSelect: false,
      receiptDetail: {},
      checkTags: [],
      clueTagGroupVoList: [],
      crmFormCategoryDict: [],
      crmFormTacticDict: [],
      crmFormStateDict: [],
      crmHandelStatusDict: [],
      tabs: [
        {
          label: "聊天附件",
          slot: "chatFile",
        },
        {
          label: "报价附件",
          slot: "quoteFile",
        },
        {
          label: "高清图附件",
          slot: "hdImageFile",
        },
        {
          label: "其他附件",
          slot: "otherFile",
        },
        {
          label: "前端附件",
          slot: "frontendFile",
        },
        {
          label: "前端跟进",
          slot: "frontendFollow",
        },
        {
          label: "跟进记录",
          slot: "followRecord",
        },
        {
          label: "收单信息",
          slot: "receiptInfo",
        },
        {
          label: "收单分成",
          slot: "commissionInfo",
        },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    async hanldeTagClose(tag) {
      const { id, tags } = this.receiptDetail;
      const copyTags = cloneDeep(tags);
      if (id == null) {
        uni.$u.toast("修改异常");
        return;
      }
      const index = copyTags.findIndex((v) => v.id === tag.id);
      if (index !== -1) {
        copyTags.splice(index, 1);
        const allTags = copyTags.map((v) => v.id).join(",");
        await uni.$u.api.updateTags({
          id: id,
          allTags,
        });
        this.receiptDetail.tags = copyTags;
        this.checkTags = this.receiptDetail.tags.map((v) => v.id);
      }
    },
    async handleClueTagConfirm() {
      const allTags = this.checkTags.join(",");
      await uni.$u.api.updateTags({
        id: this.receiptDetail.id,
        allTags,
      });
      this.getDetail();
    },
    handleAddClueTag() {
      this.$refs.clueTag.showModal();
    },
    async handleStateConfirm(e) {
      const state = e.value;
      await uni.$u.api.updateOrderState({
        id: this.receiptDetail.id,
        state,
      });
      uni.$u.toast("操作成功");
    },
    defaultText(text) {
      return text ? text : "-";
    },
    crmFormCategoryFormat(v) {
      return v ? selectDictLabel(this.crmFormCategoryDict, v) : "-";
    },
    crmFormTacticFormat(v) {
      return v ? selectDictLabel(this.crmFormTacticDict, v) : "-";
    },
    crmFollowStatusFormat(v) {
      return selectDictLabel(this.crmHandelStatusDict, v);
    },
    selectDictLabel,
    handleCopy(item) {
      uni.setClipboardData({
        data: item.phone,
        success: function () {
          uni.$u.toast("复制成功");
        },
      });
    },
    // 添加联系人
    handleCallPhone() {
      uni.makePhoneCall({
        phoneNumber: this.receiptDetail.phone,
        success: () => {
          this.$store.commit("call/SET_FORM", {
            clueId: this.receiptDetail.clueId,
            type: "3",
            callee: this.receiptDetail.phone,
          });
        },
      });
    },
    // 添加跟进记录
    handleAddFollow() {
      uni.navigateTo({
        url: `/pages/addFollow/index?orderId=${this.orderId}`,
      });
    },
    // 跳转到收单表单页面
    handleAddReceiptForm() {
      uni.navigateTo({
        url: `/pages/receiptForm/index?orderId=${this.orderId}&clueId=${this.clueId}`,
      });
    },
    // 跳转到新增分成页面
    handleAddCommission() {
      uni.navigateTo({
        url: `/pages/commissionForm/index?sendFormId=${this.orderId}&clueId=${this.clueId}`,
      });
    },
    handleUploadRecord() {
      uni.navigateTo({
        url: `/pages/uploadRecord/index?clueId=${this.orderId}`,
      });
    },
    // 接单操作
    async handleOrderForm() {
      if (this.receiptDetail.status === "2") {
        uni.$u.toast("当前订单已经被接单");
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确定要接单吗？",
        success: async (res) => {
          if (res.confirm) {
            try {
              await uni.$u.api.oderForm({
                status: "2",
                id: this.receiptDetail.id,
              });
              uni.$u.toast("接单成功");
              this.getDetail(); // 刷新详情
            } catch (error) {
              uni.$u.toast("接单失败");
            }
          }
        },
      });
    },
    // 收单操作
    async handleReceiptForm() {
      if (
        this.receiptDetail.status === "3" ||
        this.receiptDetail.status === "4"
      ) {
        uni.$u.toast("当前订单已经被收单或未收");
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确定要收单吗？",
        success: async (res) => {
          if (res.confirm) {
            try {
              await uni.$u.api.oderForm({
                status: "3",
                id: this.receiptDetail.id,
              });
              uni.$u.toast("收单成功");
              this.getDetail(); // 刷新详情
            } catch (error) {
              uni.$u.toast("收单失败");
            }
          }
        },
      });
    },
    // 未收操作
    async handleDenialForm() {
      if (
        this.receiptDetail.status === "3" ||
        this.receiptDetail.status === "4"
      ) {
        uni.$u.toast("当前订单已经被收单或未收");
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确定要标记为未收吗？",
        success: async (res) => {
          if (res.confirm) {
            try {
              await uni.$u.api.oderForm({
                status: "4",
                id: this.receiptDetail.id,
              });
              uni.$u.toast("标记未收成功");
              this.getDetail(); // 刷新详情
            } catch (error) {
              uni.$u.toast("操作失败");
            }
          }
        },
      });
    },
    // 撤销操作
    async handleDelete() {
      uni.showModal({
        title: "提示",
        content: "是否确定撤销?",
        success: async (res) => {
          if (res.confirm) {
            try {
              await uni.$u.api.deleteOrder([this.receiptDetail.id]);
              uni.$u.toast("撤销成功");
              // 撤销后返回上一页
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            } catch (error) {
              uni.$u.toast("撤销失败");
            }
          }
        },
      });
    },
    // 初始化详情页
    async handleInit() {
      this.getDetail();
      this.$getDicts("crm_form_category").then((res) => {
        this.crmFormCategoryDict = res;
      });
      this.$getDicts("crm_form_tactic").then((res) => {
        this.crmFormTacticDict = res;
      });
      this.$getDicts("crm_form_state").then((res) => {
        this.crmFormStateDict = res;
      });
      this.$getDicts("crm_form_status").then((res) => {
        this.crmHandelStatusDict = res;
      });
      uni.$u.api
        .getClueTagGroupVoList({
          tagGroupApplication: "2",
        })
        .then(({ data }) => {
          this.clueTagGroupVoList = data;
        });
    },
    getDetail() {
      uni.$u.api
        .getClueSendFormVoByOrderId({
          id: this.orderId,
        })
        .then((res) => {
          this.receiptDetail = res.data;
          this.checkTags = this.receiptDetail.tags
            ? this.receiptDetail.tags.map((v) => v.id)
            : [];
        });
    },
  },
  created() {
    this.handleInit();
  },
};
</script>

<style lang="scss" scoped>
.clueTagsSelect {
  height: 0;
  overflow: hidden;
}

.clue_tag_wrap {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 10px;
  margin: 20px 0;
  flex-wrap: wrap;
  min-height: 50px;

  .clue_tag_add_btn {
    font-size: 14px;
    color: #108cff;
  }
}

.clue_state_wrap {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .top_left {
    font-size: 16px;
    flex: 0 0 50px;
  }

  .steps_wrap {
    flex: 1;
  }
}

.order_action_wrap {
  padding: 10px;
  margin: 15px 0;
  background: #fff;
  display: flex;
  align-items: center;

  .action_title {
    font-size: 16px;
    flex: 0 0 50px;
  }
  .last_status {
    color: #c0c0c7;
    font-size: 14px;
  }

  .action_buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    ::v-deep .u-button {
      height: 30px !important;
      font-size: 12px !important;
      border-radius: 8px !important;
      border: 1px solid #e2e8f0 !important;
      background: #ffffff !important;
      color: #2d3748 !important;
      font-weight: 500 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;

      &.u-button--success {
        background: #ffd025 !important;
        color: white !important;
        border-color: #ffd025 !important;
      }

      // 特别样式化不同按钮类型
      &.u-button--primary {
        background: #35dbd9 !important;
        color: white !important;
        border-color: #35dbd9 !important;
      }

      &.u-button--warning {
        background: #ba9fb0 !important;
        color: white !important;
        border-color: #ba9fb0 !important;
      }

      &.u-button--error {
        background: #e53e3e !important;
        color: white !important;
        border-color: #e53e3e !important;
      }
    }
  }
}

.clueDetail_tabber {
  ::v-deep .u-tabbar__content {
    background: #108cff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
}

.clueDetail_wrap {
  .telPhone {
    display: flex;
    background: #fff;
    padding: 20px;
    justify-content: space-between;

    .left {
      display: flex;
    }

    .copy_btn {
      color: #4fa5fe;
      margin-left: 10px;
    }
  }

  .clueDetail_top_info {
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    padding-top: 20px;
    margin: 18px 0;

    .top_info_item {
      width: 33.33%;
      text-align: center;
      margin-bottom: 20px;

      .top {
        font-size: 15px;
        color: #202020;
        margin-bottom: 5px;
        font-weight: bold;
      }

      .bottom {
        font-size: 15px;
        color: #c0c0c7;
      }
    }
  }
}
</style>