From 0e2de9d6de691a28f23be793529191b662f33566 Mon Sep 17 00:00:00 2001
From: wangyang <test@qq.com>
Date: Mon, 18 Aug 2025 15:24:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E5=BD=92=E5=B1=9E=E4=BA=BA=E5=8F=98?=
 =?UTF-8?q?=E6=9B=B4=E6=9F=A5=E7=9C=8B-=E5=8A=9F=E8=83=BD=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/mainOwner/mainOwner.js            |  18 ++
 .../view/components/qianjue-step.vue          | 143 +++++++++++
 .../CRM/mainOwner/view/viewMainOwner.vue      | 233 ++++++++++++++++++
 .../mainOwner/view/viewMainOwnerDetail.vue    | 185 ++++++++++++++
 4 files changed, 579 insertions(+)
 create mode 100644 src/api/crm/mainOwner/mainOwner.js
 create mode 100644 src/pages/business/CRM/mainOwner/view/components/qianjue-step.vue
 create mode 100644 src/pages/business/CRM/mainOwner/view/viewMainOwner.vue
 create mode 100644 src/pages/business/CRM/mainOwner/view/viewMainOwnerDetail.vue

diff --git a/src/api/crm/mainOwner/mainOwner.js b/src/api/crm/mainOwner/mainOwner.js
new file mode 100644
index 0000000..c7c1ba5
--- /dev/null
+++ b/src/api/crm/mainOwner/mainOwner.js
@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+
+//主归属人变更信息查看（列表）
+export function queryViewMainOwnerList(params){
+    return request.get({
+        url: '/app/appCrmCusUserNewController/viewInformationChangesInprimaryOwnership',
+        data: params
+    },{isTransformResponse: false})
+}
+
+//主归属人变更信息查看（详情）
+export function queryViewMainOwnerDetail(params){
+    return request.get({
+        url: '/app/appCrmCusUserNewController/getCrmCusUserNewChangeOwnerList',
+        data: params
+    },{isTransformResponse: false})
+}
diff --git a/src/pages/business/CRM/mainOwner/view/components/qianjue-step.vue b/src/pages/business/CRM/mainOwner/view/components/qianjue-step.vue
new file mode 100644
index 0000000..fd8d1f2
--- /dev/null
+++ b/src/pages/business/CRM/mainOwner/view/components/qianjue-step.vue
@@ -0,0 +1,143 @@
+<template>
+	<view class="steps">
+		<view class="step" v-for="(item, i) in list" :key="i">
+			<!-- 左侧 -->
+			<view class="step_left"> {{ item.createTime !== null ? item.createTime : '未审核' }}</view>
+			<!-- 中部 -->
+			<view class="step_mid">
+				<view class="step_dot" :style="{ backgroundColor: item.stateFlow ? activeColor : '' }">{{ stepType === 'number' ? i + 1 : '' }}</view>
+				<template v-if="i < list.length - 1">
+					<view class="step_line" :style="{ backgroundColor: item.stateFlow ? activeColor : '' }"></view>
+				</template>
+			</view>
+			<!-- 右侧 -->
+			<view class="step_right">
+				<view class="step_name">{{ item.state }}</view>
+				<view class="step_idea"  :style="{ color: getStateColor(item.stateFlow) }">{{ getStateText(item.stateFlow) }}</view>
+				<view class="step_idea" :style="{ color: getStateColor(item.stateFlow) }" v-if="item.stateFlow==1">同意</view>
+				<view class="step_idea"> {{ item.opinionOwn !== null ? item.opinionOwn : '' }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		// 步骤条格式 数字或者为点
+		stepType: {
+			type: String,
+			default: 'dot'
+		},
+		// 激活颜色
+		activeColor: {
+			type: String,
+			default: '#55aaff'
+		},
+		// 数据列表
+		list: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		}
+	},
+	  methods: {
+	    // 根据 stateFlow 获取状态文本
+	    getStateText(stateFlow) {
+	      // 状态映射对象（可根据需求扩展）
+	      const stateMap = {
+	        0: '待审核',   // 未通过
+	        1: '已通过',   // 通过
+	        2: '已驳回'    // 驳回
+	      };
+	      // 未知状态返回默认文本
+	      return stateMap[stateFlow] || '未知状态';
+	    },
+	
+	    // 根据 stateFlow 获取状态颜色
+	    getStateColor(stateFlow) {
+	      // 颜色映射对象（可根据需求调整）
+	      const colorMap = {
+	        0: '#dcdcdc',  // 待审核：灰色
+	        1: '#55aaff',  // 已通过：蓝色（使用 activeColor）
+	        2: '#ff4d4f'   // 已驳回：红色
+	      };
+	      // 未知状态返回默认颜色
+	      return colorMap[stateFlow] || '#dcdcdc';
+	    }
+	  },
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.steps {
+	.step {
+		display: flex;
+		.step_left {
+			width: 150rpx;
+			margin-top: -5rpx;
+			font-size: 26rpx;
+			line-height: 36rpx;
+			text-align: right;
+		}
+		.step_mid {
+			// width: 50rpx;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			margin: 0 25rpx;
+			.step_dot {
+				width: 40rpx;
+				height: 40rpx;
+				background: #dcdcdc;
+				border: 5rpx solid #f5f5f5;
+				border-radius: 50%;
+				color: #ffffff;
+				font-size: 28rpx;
+				text-align: center;
+				line-height: 40rpx;
+			}
+			.active_dot {
+				background: #2a62ed;
+				border: 5rpx solid #e3ebff;
+			}
+			.step_line {
+				width: 4rpx;
+				height: 160rpx;
+				background-color: #eeeeee;
+			}
+			.active_line {
+				background: #2a62ed;
+			}
+		}
+		.step_right {
+			width: 430rpx;
+			height: fit-content;
+			padding: 25rpx 30rpx;
+			margin-top: -14rpx;
+			background-color: #f8f8f8;
+			border-radius: 10rpx;
+			display: flex;
+			flex-wrap: wrap;
+			align-content: center;
+
+			view {
+				width: 100%;
+			}
+			.step_name {
+				font-size: 30rpx;
+				margin-bottom: 10rpx;
+			}
+			.step_idea {
+				color: #999999;
+				font-size: 26rpx;
+				line-height: 40rpx;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/business/CRM/mainOwner/view/viewMainOwner.vue b/src/pages/business/CRM/mainOwner/view/viewMainOwner.vue
new file mode 100644
index 0000000..ab67f9f
--- /dev/null
+++ b/src/pages/business/CRM/mainOwner/view/viewMainOwner.vue
@@ -0,0 +1,233 @@
+<template>
+  <view class="con-body">
+    <view class="con-bg">
+      <!-- 头部 -->
+      <customHeader ref="customHeaderRef" :title="'查看主归属人变更'" :leftFlag="true" :rightFlag="false"></customHeader>
+      <!-- 高度来避免头部遮挡 -->
+      <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
+
+      <view class="all-body">
+        <!-- 搜索  @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"-->
+        <view class="search">
+          <uni-search-bar class="custom-search" radius="28" placeholder="检索功能待开发，感谢您的耐心等待" clearButton="auto"
+                          cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" v-model="searchValue" />
+          <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
+        </view>
+
+        <!-- 分页部分  -->
+        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+                      :up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"
+                      class="scroll-h" :class="{ 'loading-scroll': cssFlag }">
+          <view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index"
+                @click="showDetail(item)">
+            <view>
+              <view class="report-list">
+                <view class="title">客户：{{ item.cusName }}</view>
+                <view class="r-list">
+                  <view class="r-name">{{ item.visistCode }}</view>
+                  <view>
+
+                    <view
+                        class="r-right btn-blue"
+                        size="mini">
+                      查看
+                    </view>
+                  </view>
+
+                </view>
+                <view class="border-bottom"></view>
+                <view class="r-list">
+                  <view class="r-left">客户人员名称</view>
+                  <view class="r-right">{{ item.userName}}</view>
+                </view>
+                <view class="r-list" >
+                  <view class="r-left">目前业务员</view>
+                  <view class="r-right">{{ item.belonger }}</view>
+                </view>
+                <view class="border-bottom"></view>
+                <view class="r-list">
+                  <view class="r-left">创建时间</view>
+                  <view class="r-right">{{ item.createTime }}</view>
+                </view>
+                <view class="border-bottom"></view>
+                <view class="r-list">
+                  <view class="r-left">职能</view>
+                  <view class="r-right">{{ item.function }}</view>
+                </view>
+
+              </view>
+            </view>
+          </view>
+        </mescroll-uni>
+      </view>
+
+
+    </view>
+  </view>
+</template>
+
+<script setup>
+import customHeader from "../../../../../components/customHeader.vue";
+import { onMounted, ref } from 'vue';
+
+import {getNavBarPaddingTop} from "../../../../../utils/system";
+import MescrollUni from "mescroll-uni/mescroll-uni.vue";
+import {getQueryVisistList} from "../../../../../api/crm/activity/activity";
+import {queryViewMainOwnerList} from "../../../../../api/crm/mainOwner/mainOwner";
+import {onShow} from "@dcloudio/uni-app";
+
+
+// 获取导航栏高度用于内容区域padding
+const navBarPaddingTop = ref(0);
+
+let queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+})
+
+onMounted(() => {
+  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
+})
+onShow(()=>{
+  getList(queryParams)
+})
+
+
+let list = ref([])
+//获取列表信息
+function getList(queryParams){
+  queryViewMainOwnerList(queryParams.value).then(res => {
+      list.value = res.rows
+  })
+}
+
+let cssFlag = ref(false);//控制样式
+let mescrollRef = ref(null);
+
+const mescrollInit = (mescroll) => {
+  cssFlag.value = true;
+  mescrollRef.value = mescroll;
+};
+
+
+// 下拉刷新
+const downCallback = async (mescroll) => {
+  try {
+    setTimeout(async () => {
+      queryParams.pageNum = 1;
+      queryParams.pageSize = upOption.value.page.size;
+      //获取当前页的信息
+      const res = await queryViewMainOwnerList(queryParams)
+      cssFlag.value = false;
+      list.value = res.rows;
+      mescroll.resetUpScroll();
+    }, 500);
+  } catch (error) {
+    mescroll.endErr();
+  } finally {
+    setTimeout(async () => {
+      mescroll.endSuccess();
+    }, 500);
+  }
+}
+
+
+// 上拉加载更多
+const upCallback = async (mescroll) => {
+  try {
+    setTimeout(async () => {
+      queryParams.pageNum = 1;
+      queryParams.pageSize = upOption.value.page.size;
+      const res = await queryViewMainOwnerList(queryParams);
+      if (mescroll.num === 1) {
+        list.value = res.rows;
+      } else {
+        list.value.push(...res.rows);
+      }
+      mescroll.endBySize(res.rows.length, res.total);
+    }, 500);
+  } catch (error) {
+    mescroll.endErr();
+  }
+
+}
+
+const upOption = ref({
+  page: { num: 0, size: 10 },
+  noMoreSize: 5,
+  empty: { tip: '~ 空空如也 ~' },
+  textLoading: '加载中...',
+  textNoMore: '已经到底了'
+});
+
+const downOption = ref({
+  auto: true,
+  textInOffset: '下拉刷新',
+  textOutOffset: '释放更新',
+  textLoading: '刷新中...'
+});
+
+
+// 查看信息详情
+function showDetail(item) {
+  uni.navigateTo({
+    url: './viewMainOwnerDetail?userId=' + item.userId
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.all-body {
+  /* #ifdef APP-PLUS */
+  top: 150rpx;
+  height: calc(100vh - 75px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  top: 120rpx;
+  height: calc(100vh);
+  /* #endif */
+}
+
+.search {
+  display: flex;
+}
+
+.search .btn-search {
+  border: none;
+  background: none;
+  line-height: normal;
+  color: #fff;
+  line-height: 56rpx !important;
+  padding: 10rpx 0 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.search .btn-search::after {
+  display: none;
+}
+
+.search .custom-search {
+  width: 80%;
+
+}
+
+.search .custom-search.uni-searchbar {
+  padding-right: 0 !important;
+}
+
+.scroll-h {
+  /* #ifdef APP-PLUS */
+  height: calc(100vh - 120px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  height: calc(100vh - 110px);
+  /* #endif */
+}
+
+.white-bg {
+  padding-bottom: 10rpx;
+}
+</style>
diff --git a/src/pages/business/CRM/mainOwner/view/viewMainOwnerDetail.vue b/src/pages/business/CRM/mainOwner/view/viewMainOwnerDetail.vue
new file mode 100644
index 0000000..043ea67
--- /dev/null
+++ b/src/pages/business/CRM/mainOwner/view/viewMainOwnerDetail.vue
@@ -0,0 +1,185 @@
+<template>
+  <view class="con-body">
+    <view >
+      <!-- 头部 -->
+      <customHeader ref="customHeaderRef" :title="'查看主归属人变更详细信息'" :leftFlag="true"
+                    :rightFlag="false"></customHeader>
+      <!-- 高度来避免头部遮挡 -->
+      <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
+      <view class="all-body">
+        <!-- 分页部分  -->
+        <view>
+          <view class="report-list">
+            <view class="title">客户公司名称：{{ detailInfo.cusName }}</view>
+            <view class="border-bottom"></view>
+            <view class="r-list">
+              <view class="r-left">客户人员名称</view>
+              <view class="r-right">{{ detailInfo.userName }}</view>
+            </view>
+            <view class="r-list">
+              <view class="r-left">性别</view>
+              <view class="r-right">{{ detailInfo.sex }}</view>
+            </view>
+            <view class="r-list">
+              <view class="r-left">手机号</view>
+              <view class="r-right">{{ detailInfo.mobilePhone }}</view>
+            </view>
+            <view class="border-bottom"></view>
+            <view class="r-list">
+              <view class="r-left">部门</view>
+              <view class="r-right">{{ detailInfo.userDept }}</view>
+            </view>
+            <view class="border-bottom"></view>
+            <view class="r-list">
+              <view class="r-left">业务员认定等级</view>
+              <view class="r-right">{{ detailInfo.salesmanThinkLevel }}</view>
+            </view>
+
+          </view>
+        </view>
+
+        <view class="tezt">
+          <qianjue-step :list="list"></qianjue-step>
+        </view>
+
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<script setup>
+import customHeader from "../../../../../components/customHeader.vue";
+import {onMounted, reactive, ref} from "vue";
+import {onLoad, onShow} from "@dcloudio/uni-app";
+import {queryViewMainOwnerDetail, queryViewMainOwnerList} from "../../../../../api/crm/mainOwner/mainOwner";
+import QianjueStep from "./components/qianjue-step.vue";
+import {getNavBarPaddingTop} from "../../../../../utils/system";
+
+
+let userId = ref()
+let detailInfo = reactive({})
+let list = ref([])
+
+// 获取导航栏高度用于内容区域padding
+let navBarPaddingTop = ref(0);
+onMounted(() => {
+  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
+})
+
+onLoad(option => {
+  userId.value = option.userId
+})
+
+onMounted(() => {
+  getDetails()
+  getCrmCusUserNewChangeOwnerList()
+})
+
+function getDetails() {
+  let data = {
+    userId: userId.value
+  };
+  queryViewMainOwnerList(data).then(
+      res => {
+        if (res.code === 200) {
+          const targetUserId = userId.value;
+          const matchedItem = res.rows.find(item => item.userId == targetUserId);
+          if (matchedItem) {
+            Object.assign(detailInfo, matchedItem);
+          } else {
+            console.warn('没有找到匹配 userId 的数据');
+          }
+        } else {
+          uni.showToast({
+            title: res.msg,
+            icon: 'none',
+          });
+        }
+      },
+      rej => {
+      }
+  );
+}
+
+
+function getCrmCusUserNewChangeOwnerList() {
+  let data = {
+    userId: userId.value
+  };
+  queryViewMainOwnerDetail(data).then(
+      res => {
+        if (res.code == 200) {
+          list.value = res.rows
+        } else {
+          uni.showToast({
+            title: res.msg,
+            icon: 'none',
+          });
+        }
+      },
+      rej => {
+      }
+  );
+}
+
+</script>
+
+<style scoped>
+.all-body {
+  /* #ifdef APP-PLUS */
+  top: 150rpx;
+  height: calc(100vh - 75px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  top: 120rpx;
+  height: calc(100vh);
+  /* #endif */
+}
+
+.search {
+  display: flex;
+}
+
+.search .btn-search {
+  border: none;
+  background: none;
+  line-height: normal;
+  color: #fff;
+  line-height: 56rpx !important;
+  padding: 10rpx 0 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.search .btn-search::after {
+  display: none;
+}
+
+.search .custom-search {
+  width: 80%;
+
+}
+
+.search .custom-search.uni-searchbar {
+  padding-right: 0 !important;
+}
+
+.scroll-h {
+  /* #ifdef APP-PLUS */
+  height: calc(100vh - 120px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  height: calc(100vh - 110px);
+  /* #endif */
+}
+
+.white-bg {
+  padding-bottom: 10rpx;
+}
+
+.tezt {
+  padding-top: 50rpx;
+}
+
+</style>