feat: 资信管理-变更记录详情+核心人员兼容history模式

@@ -103,6 +103,13 @@
                 "navigationBarBackgroundColor": "#ffffff",
                 "navigationBarTextStyle": "black"
             }
+        }, {
+            "path": "pages/credit_manage/history_detail",
+            "style": {
+                "navigationBarTitleText": "变更记录详情",
+                "navigationBarBackgroundColor": "#ffffff",
+                "navigationBarTextStyle": "black"
+            }
         },
         {
             "path": "pages/flow/myflow",

 <template>
-    <view class="core-personnel">
-        <view class="header" :class="{'bp': mode !== 'add'}">
+    <view class="core-personnel" :class="{ 'history': mode == 'history' }">
+        <!-- 变更记录详情-核心人员 -->
+        <view v-if="mode === 'history'" class="header">
+            <text class="title">{{ title }}</text>
+        </view>
+        <!-- 新增&详情-核心人员 -->
+        <view v-else class="header" :class="{ 'bp': mode !== 'add' }">
             <image class="opCollapse" src="/static/images/title.png" />
             <text class="title">核心人员</text>
             <view class="ops">
@@ -90,7 +95,7 @@
             </view>
         </view>
 
-        <view v-else class="view-list" v-show="!collapsedView">
+        <view v-else-if="mode === 'view'" class="view-list" v-show="!collapsedView">
             <view v-for="(item, idx) in items" :key="'v-' + idx" class="card">
                 <view class="row"><text class="label">姓名</text><text class="value">{{ item.name }}</text></view>
                 <view class="row"><text class="label">性别</text><text class="value">{{ getSexName(item) }}</text></view>
@@ -103,6 +108,19 @@
                 <view class="row"><text class="label">现住址</text><text class="value">{{ item.address }}</text></view>
             </view>
         </view>
+        <view v-else-if="mode === 'history'" class="history-list" v-show="!collapsedView">
+            <view v-for="(item, idx) in items" :key="'v-' + idx" class="card">
+                <view class="row"><text class="label">姓名</text><text class="value" :class="{'change': item.nameChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.name }}</text></view>
+                <view class="row"><text class="label">性别</text><text class="value" :class="{'change': item.sexChange || ['ADD', 'DELETE'].includes(item.type)}">{{ getSexName(item) }}</text></view>
+                <view class="row"><text class="label">籍贯</text><text class="value" :class="{'change': item.nativePlaceChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.nativePlace }}</text></view>
+                <view class="row"><text class="label">年龄</text><text class="value" :class="{'change': item.ageChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.age }}</text></view>
+                <view class="row"><text class="label">职务</text><text class="value" :class="{'change': item.positionChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.position }}</text></view>
+                <view class="row"><text class="label">手机</text><text class="value" :class="{'change': item.mobileChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.mobile }}</text></view>
+                <view class="row"><text class="label">固定电话</text><text class="value" :class="{'change': item.phoneChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.phone }}</text></view>  
+                <view class="row"><text class="label">邮箱地址</text><text class="value" :class="{'change': item.emailChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.email }}</text></view>
+                <view class="row"><text class="label">现住址</text><text class="value" :class="{'change': item.addressChange || ['ADD', 'DELETE'].includes(item.type)}">{{ item.address }}</text></view>
+            </view>
+        </view>
         <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options"
             v-model="sheet.value" @confirm="onProductConfirm" />
     </view>
@@ -113,6 +131,7 @@ import { uuid } from '@/utils/uuid.js'
 export default {
     name: 'CorePersonnel',
     props: {
+        title: { type: String, default: '' },
         mode: { type: String, default: 'add' },
         list: { type: Array, default: () => [] },
         max: { type: Number, default: 8 },
@@ -240,6 +259,14 @@ export default {
 <style lang="scss" scoped>
 .core-personnel {
     margin-top: 10px;
+
+    &.history {
+        margin-top: 0;
+
+        .header {
+            padding: 32rpx 0 0 32rpx;
+        }
+    }
 }
 
 .header {
@@ -247,6 +274,7 @@ export default {
     display: flex;
     align-items: center;
     padding: 24rpx 32rpx;
+
     &.bp {
         border-bottom: 1rpx dashed #f0f0f0;
     }
@@ -382,41 +410,86 @@ export default {
 .view-list {
     padding: 26rpx 32rpx;
     background: #ffffff;
-}
 
-.card {
-    background: #f3f3f3;
-    border-radius: 16rpx;
-    padding: 32rpx 44rpx;
-    margin-bottom: 20rpx;
+    .card {
+        background: #f3f3f3;
+        border-radius: 16rpx;
+        padding: 32rpx 44rpx;
+        margin-bottom: 20rpx;
 
-    &:last-child {
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .row {
+        display: flex;
+        margin-bottom: 24rpx;
+        line-height: 32rpx;
+    }
+
+    .row:last-child {
         margin-bottom: 0;
     }
-}
 
-.row {
-    display: flex;
-    margin-bottom: 24rpx;
-    line-height: 32rpx;
-}
+    .label {
+        width: 180rpx;
+        margin-right: 14rpx;
+        color: rgba(0, 0, 0, 0.6);
+        font-size: 28rpx;
+    }
 
-.row:last-child {
-    margin-bottom: 0;
+    .value {
+        flex: 1;
+        color: rgba(0, 0, 0, 0.9);
+        font-size: 28rpx;
+        white-space: pre-wrap;
+        word-break: break-all;
+    }
 }
 
-.label {
-    width: 180rpx;
-    margin-right: 14rpx;
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 28rpx;
-}
+.history-list {
+    padding: 20rpx 32rpx;
+    background: #ffffff;
 
-.value {
-    flex: 1;
-    color: rgba(0, 0, 0, 0.9);
-    font-size: 28rpx;
-    white-space: pre-wrap;
-    word-break: break-all;
+    .card {
+        background: #f3f3f3;
+        border-radius: 16rpx;
+        padding: 32rpx 44rpx;
+        margin-bottom: 20rpx;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .row {
+        display: flex;
+        margin-bottom: 24rpx;
+        line-height: 32rpx;
+    }
+
+    .row:last-child {
+        margin-bottom: 0;
+    }
+
+    .label {
+        width: 180rpx;
+        margin-right: 14rpx;
+        color: rgba(0, 0, 0, 0.6);
+        font-size: 28rpx;
+    }
+
+    .value {
+        flex: 1;
+        color: rgba(0, 0, 0, 0.9);
+        font-size: 28rpx;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        &.change {
+            color: $theme-primary;
+        }
+    }
 }
 </style>

@@ -248,7 +248,10 @@ export default {
       }
     },
     onViewHistory(item) {
-      console.log('onViewHistory', item)
+      const id = item && (item.id)
+      if (!id) return
+      const query = '?id=' + encodeURIComponent(id)
+      uni.navigateTo({ url: '/pages/credit_manage/history_detail' + query })
     },
     getDicName,
     getCategoryClass(categoryName) {

+<template>
+  <view class="page">
+    <scroll-view class="scroll" scroll-y>
+      <view class="detail-page">
+        <view class="section">
+          <view class="row"><text class="label" style="color: rgba(0,0,0,0.9);">变更日期</text><text class="value">{{
+            changeTime || '' }}</text></view>
+        </view>
+        <view v-for="(it, idx) in otherList" :key="idx" class="section">
+          <view class="row row_head"><text class="label">序号{{ it.serialNumber }}</text></view>
+          <view class="row"><text class="label">变更前</text><text class="value">{{ it.beforeChange }}</text></view>
+          <view class="row"><text class="label">变更后</text><text class="value">{{ it.afterChange }}</text></view>
+        </view>
+
+        <CorePersonnel title="人员信息变更前" mode="history" :options="genderOptions" :list="personnelBefore" />
+        <CorePersonnel title="人员信息变更后" mode="history" :options="genderOptions" :list="personnelAfter" />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { getDicByCodeApi } from '@/api/base.js'
+import { getCreditHistoryList } from '@/api/credit_manage.js'
+import CorePersonnel from './corePersonnel.vue'
+
+export default {
+  name: 'CreditHistoryDetail',
+  components: { CorePersonnel },
+  data() {
+    return {
+      id: '',
+      otherList: [],
+      personnelBefore: [],
+      personnelAfter: [],
+      genderOptions: [],
+      changeTime: '',
+    }
+  },
+  created() {
+    this.loadGenderOptions()
+  },
+  onLoad(query) {
+    const id = (query && query.id) || ''
+    this.id = id
+    if (id) this.loadDetail(id)
+  },
+  methods: {
+    async loadDetail(id) {
+      try {
+        const res = await getCreditHistoryList(id);
+        const data = res.data || {};
+        this.otherList = Array.isArray(data.otherChangeList) ? data.otherChangeList : []
+        this.personnelAfter = Array.isArray(data.personnelAfterChangeList) ? data.personnelAfterChangeList : []
+        this.changeTime = data.changeTime ? data.changeTime : '';
+        this.personnelBefore = Array.isArray(data.personnelBeforeChangeList) ? data.personnelBeforeChangeList : []
+      } catch (e) {
+        this.otherList = []
+        this.personnelAfter = []
+        this.personnelBefore = []
+        this.changeTime = ''
+      }
+    },
+    async loadGenderOptions() {
+      try {
+        const res = await getDicByCodeApi('GENDER_TYPE')
+        const list = res.data || []
+        this.genderOptions = Array.isArray(list) ? list : []
+      } catch (e) {
+        this.genderOptions = []
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.scroll {
+  flex: 1;
+  padding: 8rpx 0 144rpx 0;
+}
+
+.detail-page {
+  background: #f3f3f3;
+}
+
+.section {
+  padding: 32rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+}
+
+.row {
+  display: flex;
+  margin-bottom: 24rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .label {
+    width: 120rpx;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .value {
+    flex: 1;
+    text-align: right;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  &.row_head {
+    padding-bottom: 20rpx;
+    border-bottom: 1rpx dashed #f0f0f0;
+
+    .label {
+      color: rgba(0, 0, 0, 0.9);
+      font-weight: 600;
+      padding-left: 6rpx;
+    }
+  }
+}
+
+.title-header {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 32rpx 32rpx 22rpx;
+
+  &_icon {
+    width: 32rpx;
+    height: 28rpx;
+    margin-right: 16rpx;
+    margin-top: 8rpx;
+  }
+
+  span {
+    color: rgba(0, 0, 0, 0.9);
+    font-size: 32rpx;
+    line-height: 44rpx;
+    font-weight: 600;
+  }
+}
+
+.mgb10 {
+  margin-bottom: 20rpx;
+}
+</style>
\ No newline at end of file