客户线索

src/api/customer/customerLeads.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+let getway = window.lwConfig.services.system + window.lwConfig.services.wecom
+// const service = getway + '/field'
+
+// 线索列表
+export function getList(params) {
+  return request({
+    url: '/chinacoal/customerLeads/list',
+    method: 'get',
+    params
+  })
+}
+
+// 新增线索
+export function addCustomer(data) {
+  return request({
+    url:  '/chinacoal/customerLeads/process',
+    data,
+    method: 'post'
+  })
+}
+
+// 线索详情
+export function getDetail(params) {
+  return request({
+    url: '/chinacoal/customerLeads/detail',
+    method: 'get',
+    params
+  })
+}
+
+// 线索反馈
+export function getFeedback(params) {
+  return request({
+    url: '/chinacoal/customerLeads/feedback',
+    method: 'get',
+    params
+  })
+}

src/views/customerManage/customerLeadsDetails.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <!-- 模板内容 -->
+    <div class="g-card">
+      <!-- 表单 -->
+      <!-- 模板内容 -->
+      <div class="box">
+        <el-form
+          ref="queryForm"
+          :model="queryForm"
+          label-width="100px"
+          :disabled="true"
+          style="width: 50%"
+        >
+          <span class="g-card-title">用户详情</span>
+          <el-form-item label="用户ID" prop="userId">
+            <el-input
+              v-model="queryForm.userId"
+              placeholder="用户ID"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="用户姓名" prop="userName">
+            <el-input
+              v-model="queryForm.userName"
+              placeholder="请输入用户姓名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="性别" prop="gender">
+            <el-input
+              v-model="queryForm.gender"
+              placeholder="请输入性别"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="生日" prop="birthDate">
+            <el-input
+              v-model="queryForm.birthDate"
+              placeholder="请输入生日"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="手机号" prop="phone">
+            <el-input
+              v-model="queryForm.phone"
+              placeholder="请输入手机号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="用户状态" prop="userStatus">
+            <el-input
+              v-model="queryForm.userStatus"
+              placeholder="用户状态"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="用户类型" prop="userType">
+            <el-input
+              v-model="queryForm.userType"
+              placeholder="用户类型"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="触发时间" prop="registerTime">
+            <el-input
+              v-model="queryForm.registerTime"
+              placeholder="触发时间"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="line">
+          <span class="g-card-title">客户线索</span>
+          <el-timeline :reverse="reverse">
+            <el-timeline-item
+              v-for="(activity, index) in activities"
+              :key="index"
+              :timestamp="activity.createdTime"
+              color="#0bbd87"
+            >
+              <span style="display: block;margin-bottom: 5px"
+                >客户意向：
+                {{
+                  activity.customerIntent == 1 ? "初步了解" : "确认投保"
+                }}</span
+              >
+              <span>关键信息描述：{{ activity.keyInfoDescription }}</span>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<!-- 行为区域 -->
+<script>
+import { getDetail, getFeedback } from "@/api/customer/customerLeads.js";
+export default {
+  // 数据存放区域
+  data() {
+    return {
+      queryForm: {},//左侧信息数据
+      activities: [],//右侧时间轴数据
+    };
+  },
+  // 生命周期函数
+  created() {
+    this.initData();
+    this.getFeedback();
+  },
+  // 方法函数
+  methods: {
+    //获取左侧信息数据
+    initData() {
+      getDetail({
+        userId: this.$route.query.userId,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.queryForm = {
+            userId: res.data.userId,
+            userName: res.data.userName,
+            gender: res.data.gender == 1 ? "男" : "女",
+            birthDate: res.data.birthDate,
+            phone: res.data.phone,
+            userStatus: res.data.userStatus == 1 ? "正式用户" : "临时用户",
+            userType: res.data.userType == 1 ? "普通用户" : "会员用户",
+            registerTime: res.data.registerTime,
+          };
+        }
+      });
+    },
+    //获取时间轴数据
+    getFeedback() {
+      getFeedback({
+        userId: this.$route.query.userId,
+      }).then((res) => {
+        this.activities = res.rows;
+      });
+    },
+  },
+  // 计算属性
+  computed: {},
+};
+</script>
+<!-- 样式区域 -->
+<style lang='scss' scoped>
+.box {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .line {
+    width: 50%;
+  }
+}
+</style>

src/views/customerManage/customerLeadsList.vue

@@ -0,0 +1,386 @@
+<template>
+  <div>
+    <el-form
+      ref="queryForm"
+      :model="query"
+      inline
+      class="top-search"
+      label-position="left"
+      label-width="80px"
+    >
+      <el-form-item label="用户id">
+        <el-input v-model="query.userId" placeholder="请输入用户id" type="number"></el-input>
+      </el-form-item>
+      <el-form-item label="用户姓名">
+        <el-input
+          v-model="query.userName"
+          placeholder="请输入用户姓名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="手机号">
+        <el-input v-model="query.phone" placeholder="请输入手机号" type="number"></el-input>
+      </el-form-item>
+      <el-form-item label="用户来源">
+        <el-select
+          :popper-append-to-body="false"
+          v-model="query.userSource"
+          placeholder="请选择用户来源"
+        >
+          <el-option label="晋掌柜" value="1"></el-option>
+          <el-option label="掌柜生活" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户状态">
+        <el-select
+          :popper-append-to-body="false"
+          v-model="query.userStatus"
+          placeholder="请选择用户状态"
+        >
+          <el-option label="正式用户" value="1"></el-option>
+          <el-option label="临时用户" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="处理状态">
+        <el-select
+          :popper-append-to-body="false"
+          v-model="query.processingStatus"
+          placeholder="请选择处理状态"
+        >
+          <el-option label="已处理" value="1"></el-option>
+          <el-option label="未处理" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户意向">
+        <el-select
+          :popper-append-to-body="false"
+          v-model="query.customerIntent"
+          placeholder="请选择客户意向"
+        >
+          <el-option label="初步了解" value="1"></el-option>
+          <el-option label="确认投保" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label=" ">
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button @click="resetQuery">清空</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="g-card">
+      <el-table ref="table" row-key="id" :data="list" v-loading="loading"  v-disable-resize="false">
+        <el-table-column
+          label="用户id"
+          align="center"
+          prop="userId"
+        ></el-table-column>
+        <el-table-column label="用户姓名" align="center" prop="userName">
+        </el-table-column>
+        <el-table-column label="性别" align="center" prop="gender">
+          <template #default="{ row }">
+            {{ row.gender == 1 ? "男" : "女" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="生日"
+          align="center"
+          prop="birthDate"
+        ></el-table-column>
+        <el-table-column
+          label="手机号"
+          align="center"
+          prop="phone"
+        ></el-table-column>
+        <el-table-column label="用户来源" align="center" prop="userSource">
+          <template #default="{ row }">
+            {{ row.userSource == 1 ? "晋掌柜 " : "掌柜生活" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="用户状态" align="center" prop="userStatus">
+          <template #default="{ row }">
+            {{ row.userStatus == 1 ? "正式用户 " : "临时用户" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="用户类型" align="center" prop="userType">
+          <template #default="{ row }">
+            {{ row.userType == 1 ? "普通用户 " : "会员用户" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="触发时间"
+          align="center"
+          prop="triggerTime"
+        ></el-table-column>
+        <el-table-column
+          label="处理状态"
+          align="center"
+          prop="processingStatus"
+        >
+          <template #default="{ row }">
+            {{ row.processingStatus == 1 ? "已处理 " : "未处理" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="客户意向" align="center" prop="customerIntent">
+          <template #default="{ row }">
+            {{ row.customerIntent == 1 ? "初步了解 " : "确认投保" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="text"
+              :disabled="row.isDefault == 1"
+              @click="examine(row)"
+              >查看</el-button
+            >
+            <el-button
+              type="text"
+              :disabled="row.isDefault == 1"
+              @click="manage(row)"
+              v-if="row.processingStatus!==1"
+              >处理</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog
+      :title="dialog.title"
+      :visible.sync="dialog.show"
+      :close-on-click-modal="false"
+    >
+      <div>
+        <el-form
+          ref="form"
+          :rules="rules"
+          :model="form"
+          label-position="left"
+          label-width="120px"
+        >
+          <el-form-item label="客户意向" prop="customerIntent">
+            <el-radio-group v-model="form.customerIntent" @change="setChange">
+              <el-radio :label="1">初步了解</el-radio>
+              <el-radio :label="2">确认投保</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="关键信息描述" prop="keyInfoDescription">
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 3, maxRows: 4 }"
+              placeholder="请输入内容"
+              v-model="form.keyInfoDescription"
+            >
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer">
+        <el-button @click="dialog.show = false">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Sortable from "sortablejs";
+import { getList, addCustomer } from "@/api/customer/customerLeads.js";
+export default {
+  name: "define-customer-attr",
+  data() {
+    return {
+      queryTag: [],
+      dialogVisible: false,
+      loading: false,
+      infoType: [
+        { name: "文本", key: 1 },
+        { name: "时间", key: 2 },
+        { name: "勾选项", key: 3 },
+      ],
+      query: {
+        userId: "",
+        userName: "",
+        phone: "",
+        userSource: "",
+        userStatus: "",
+        processingStatus: "",
+      },
+      list: [],
+      dialog: {
+        title: "处理线索",
+        state: "add",
+        show: false,
+      },
+      tagList: [],
+      showSelectTag: false,
+      form: {
+        userId: "", //用户ID
+        customerIntent: "", //客户意向
+        keyInfoDescription: "", //关键信息描述
+      },
+      visibleAdd: false,
+      newInput: "",
+      rules: {
+        customerIntent: [
+          {
+            required: true,
+            message: "客户意向不能为空",
+            trigger: "blur",
+          },
+        ],
+        keyInfoDescription: [
+          {
+            required: true,
+            message: "关键信息描述不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    updateSort() {
+      this.list.forEach((item, index) => {
+        item.labelSort = this.list.length - index;
+      });
+      multiField(this.list);
+    },
+    dragSort() {
+      const el = this.$refs.table.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      this.sortable = Sortable.create(el, {
+        ghostClass: "sortable-ghost",
+        setData: function (dataTransfer) {
+          dataTransfer.setData("Text", "");
+        },
+        onEnd: (e) => {
+          if (e.oldIndex !== e.newIndex) {
+            const targetRow = this.list.splice(e.oldIndex, 1)[0];
+            this.list.splice(e.newIndex, 0, targetRow);
+            this.updateSort();
+          }
+        },
+      });
+    },
+    //处理线索
+    manage(data) {
+      console.log(data);
+      this.form.userId = data.userId;
+      this.dialog.show = true;
+    },
+    //查看线索详情
+    examine(data) {
+      console.log(data);
+      //customerLeadsDetails  
+      this.$router.push({ path:'customerLeadsDetails', query: { userId: data.userId } })
+    },
+    setChange(type) {
+      if (type !== 3) {
+        delete this.form.typeSub;
+        this.form.otherContent = [];
+      }
+    },
+    submit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          addCustomer(this.form)
+            .then((res) => {
+              this.$message.success("操作成功！");
+              this.dialog.show = false;
+              this.getList(1);
+              this.$refs["form"].resetFields();
+              this.form = {
+                userId: "", 
+                customerIntent: "", 
+                keyInfoDescription: "", 
+              };
+            })
+            .catch((error) => {
+              this.$message.error("操作失败，请重试！");
+            });
+        }
+      });
+    },
+    setField(type) {
+      this.form = {
+        labelName: "",
+        businessType: 1,
+        visualTagIds: "",
+        type: 1,
+      };
+      this.tagList = [];
+      this.dialog.show = true;
+    },
+    showInput() {
+      this.visibleAdd = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+    newInputConfirm() {
+      let name = this.newInput;
+      if (name) {
+        Array.isArray(this.form.otherContent) || (this.form.otherContent = []);
+        let isExist = this.form.otherContent.some((e) => {
+          return e.labelName === name;
+        });
+        if (isExist) {
+          this.msgError("内容项已存在，不可重复添加");
+          return;
+        }
+        this.form.otherContent.push({ labelName: name });
+      }
+      this.visibleAdd = false;
+      this.newInput = "";
+    },
+    resetQuery() {
+      // this.query.labelName = ''
+      // this.query.type = null
+      // this.query.visualTagIds = ''
+      (this.query = {
+        userId: "",
+        userName: "",
+        phone: "",
+        userSource: "",
+        userStatus: "",
+        processingStatus: "",
+      }),
+        (this.queryTag = []);
+      this.getList();
+    },
+    submitSelectTag(data) {
+      this.tagList = data;
+      this.form.visualTagIds = data
+        .map((dd) => {
+          return dd.tagId;
+        })
+        .join(",");
+    },
+    getList(type) {
+      this.loading = true;
+      getList(this.query).then((res) => {
+        this.loading = false;
+
+        this.list = res.rows;
+        console.log(this.list);
+        if (type == "init") {
+          this.dragSort();
+        }
+        if (type == "delete") {
+          this.updateSort();
+        }
+      });
+    },
+  },
+  mounted() {
+    this.getList("init");
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sub-des {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+}
+</style>