2024.04.27\

- 提现申请页关联结算框增大宽度，关联订单和佣金记录和代金券记录分别判断显示关联用户信息，佣金记录完善来源和目标的相关字段显示；

src/views/finance/withdrawal/components/DetailModal.vue

@@ -69,54 +69,6 @@
         </div>
         <div v-else style="font-size: 16px;font-weight: bold;">无结算数据</div>
       </el-tab-pane>
-      <el-tab-pane label="关联用户列表" name="relatedBuyerUsers">
-        <div v-if="formData.relatedBuyerUsers && formData.relatedBuyerUsers.length" style="margin-top: 32px;">
-          <el-table
-            v-loading="!formData.relatedBuyerUsers.length" height="60vh" element-loading-text="暂无用户数据" :data="formData.relatedBuyerUsers"
-            v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
-          >
-            <el-table-column align="center" min-width="80" prop="buyerUserId" label="用户ID" show-overflow-tooltip />
-            <el-table-column align="center" width="100" label="头像" prop="headImage">
-              <template slot-scope="{ row }">
-                <el-image
-                  v-if="row.headImage" lazy :src="common.seamingImgUrl(row.headImage)"
-                  style="width:40px; height:40px" fit="cover"
-                  :preview-src-list="[ common.seamingImgUrl(row.headImage) ]"
-                />
-                <span v-else>--</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="注册来源" prop="terminal">
-              <template slot-scope="{ row }">
-                <span v-if="row.terminal === 1">APP</span>
-                <span v-else-if="row.terminal === 2">小程序</span>
-                <span v-else-if="row.terminal === 3">H5</span>
-                <span v-else-if="row.terminal === 4">支付宝小程序</span>
-                <span v-else-if="row.terminal === 5">PC</span>
-                <span v-else>未知</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" min-width="120" prop="birthday" label="生日" show-overflow-tooltip />
-            <el-table-column align="center" min-width="80" prop="sex" label="性别" show-overflow-tooltip />
-            <el-table-column align="center" min-width="100" prop="name" label="用户昵称" show-overflow-tooltip />
-            <el-table-column align="center" min-width="100" prop="phone" label="用户手机号" show-overflow-tooltip />
-            <el-table-column align="center" min-width="100" prop="wechatName" label="微信名称" show-overflow-tooltip />
-            <!-- <el-table-column align="center" min-width="120" prop="channelCode" label="渠道编码" show-overflow-tooltip /> -->
-            <!-- <el-table-column align="center" min-width="120" prop="credit" label="积分" show-overflow-tooltip />
-              <el-table-column align="center" min-width="120" prop="growth" label="成长值" show-overflow-tooltip /> -->
-            <el-table-column align="center" min-width="100" label="是否黑名单" prop="ifBlack">
-              <template slot-scope="{ row }">
-                <el-tag v-if="row.ifBlack === 0" effect="plain" type="info">否</el-tag>
-                <el-tag v-else-if="row.ifBlack === 1" effect="plain" type="danger">是</el-tag>
-                <span v-else>--</span>
-              </template>
-            </el-table-column>
-            <!-- <el-table-column align="center" min-width="120" prop="state" label="状态" show-overflow-tooltip /> -->
-            <el-table-column align="center" min-width="150" prop="createTime" label="创建时间" show-overflow-tooltip />
-          </el-table>
-        </div>
-        <div v-else style="font-size: 16px;font-weight: bold;">无关联用户数据</div>
-      </el-tab-pane>
     </el-tabs>
   </el-dialog>
 </template>
@@ -134,7 +86,7 @@ export default {
     return {
       modalOptions: {
         closeOnClickModal: false,
-        width: '800px',
+        width: '1220px',
         title: '查看提现详情'
       },
       visible: false,

src/views/finance/withdrawal/components/RelatedCommissionLogs.vue

@@ -7,8 +7,48 @@
         v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
       >
         <el-table-column align="center" min-width="80" prop="recordId" label="ID" show-overflow-tooltip />
-        <!-- <el-table-column align="center" min-width="150" prop="acquirerId" label="得到方ID" show-overflow-tooltip /> -->
-        <el-table-column align="center" min-width="100" label="类型" prop="type">
+        <el-table-column align="center" min-width="120" label="来源用户ID" prop="buyerUserId">
+          <template slot-scope="{ row }">
+            <div>
+              <span>{{ row.buyerUserId }}</span>
+              <el-button
+                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.buyerUserId)"
+                style="margin-left: 14px;"
+                type="warning" size="mini"
+                @click="handleOpenUserDetails(row.buyerUserId)"
+              >
+                详情
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column align="center" width="100" label="来源用户头像" prop="imgOne">
+          <template slot-scope="{ row }">
+          <el-image
+          v-if="row.imgOne" lazy :src="common.seamingImgUrl(row.imgOne)"
+          style="width:40px; height:40px" fit="cover"
+          :preview-src-list="[ common.seamingImgUrl(row.imgOne) ]"
+          />
+          <span v-else>--</span>
+          </template>
+          </el-table-column>
+          <el-table-column align="center" min-width="150" prop="userNameOne" label="来源用户名称" show-overflow-tooltip /> -->
+        <el-table-column align="center" min-width="120" label="目标用户ID" prop="acquirerId">
+          <template slot-scope="{ row }">
+            <div>
+              <span>{{ row.acquirerId }}</span>
+              <el-button
+                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.acquirerId)"
+                style="margin-left: 14px;"
+                type="warning" size="mini"
+                @click="handleOpenUserDetails(row.acquirerId)"
+              >
+                详情
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100" label="来源类型" prop="type">
           <template slot-scope="{ row }">
             <span v-if="row.type === 1">关系链</span>
             <span v-else-if="row.type === 2">商城</span>
@@ -20,7 +60,7 @@
             <span v-else>--</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" min-width="100" label="变化金额" prop="amount">
+        <el-table-column align="center" min-width="100" label="分配佣金" prop="amount">
           <template slot-scope="{ row }">
             <span>
               {{ [5, 7].includes(row.type) ? '-' : [1, 2, 3, 4, 6].includes(row.type) ? '+' : '' }}
@@ -29,21 +69,20 @@
           </template>
         </el-table-column>
         <el-table-column align="center" min-width="150" prop="orderSn" label="订单编号" show-overflow-tooltip />
-        <el-table-column align="center" min-width="100" prop="totalAmount" label="订单总额" show-overflow-tooltip />
+        <el-table-column align="center" min-width="100" prop="totalAmount" label="佣金总额" show-overflow-tooltip />
         <el-table-column align="center" min-width="150" prop="createTime" label="创建时间" show-overflow-tooltip />
-        <el-table-column align="center" min-width="80" prop="buyerUserId" label="用户ID" show-overflow-tooltip />
-        <el-table-column align="center" width="100" label="来源用户头像" prop="imgOne">
+        <el-table-column align="center" min-width="100" label="佣金比例" prop="proportion">
           <template slot-scope="{ row }">
-            <el-image
-              v-if="row.imgOne" lazy :src="common.seamingImgUrl(row.imgOne)"
-              style="width:40px; height:40px" fit="cover"
-              :preview-src-list="[ common.seamingImgUrl(row.imgOne) ]"
-            />
-            <span v-else>--</span>
+            <span>
+              {{ typeof row.proportion === Number ? `${row.proportion * 100}%` : '--' }}
+            </span>
           </template>
         </el-table-column>
-        <el-table-column align="center" min-width="150" prop="userNameOne" label="来源用户名称" show-overflow-tooltip />
+        <el-table-column align="center" min-width="150" prop="transactionSn" label="佣金支付流水" show-overflow-tooltip />
       </el-table>
+
+      <!-- 用户详情 -->
+      <UserDetails ref="UserDetails" />
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -54,9 +93,13 @@
 </template>
 
 <script>
+import UserDetails from './UserDetails'
 
 export default {
   name: 'RelatedCommissionLogs',
+  components: {
+    UserDetails
+  },
   data() {
     return {
       modalOptions: {
@@ -66,7 +109,8 @@ export default {
       },
       visible: false,
       formData: {
-        relatedCommissionLogsList: []
+        relatedCommissionLogsList: [],
+        relatedBuyerUsers: []
       }
     }
   },
@@ -74,12 +118,19 @@ export default {
     handleClose() {
       this.visible = false
     },
-    handleOpen(params = []) {
+    handleOpen(params = [], { userList = [] }) {
       this.formData.relatedCommissionLogsList = params
+      this.formData.relatedBuyerUsers = userList
       this.visible = true
       this.$forceUpdate()
       // this.$refs.formData && this.$refs.formData.resetFields()
     },
+    handleOpenUserDetails(buyerUserId) {
+      const userMsg = this.formData.relatedBuyerUsers.find((item) => item.buyerUserId === buyerUserId)
+      if (userMsg) {
+        this.$refs.UserDetails && this.$refs.UserDetails.handleOpen(userMsg)
+      }
+    },
     handleSubmit() {
     }
   }

src/views/finance/withdrawal/components/RelatedOrders.vue

@@ -50,7 +50,7 @@
         <el-table-column align="center" min-width="100" label="售后状态" prop="afterState">
           <template slot-scope="{ row }">
             <span v-if="row.afterState === -1">无退货</span>
-            <span v-if="row.afterState === 1">审核中</span>
+            <span v-else-if="row.afterState === 1">审核中</span>
             <span v-else-if="row.afterState === 2">退款中</span>
             <span v-else-if="row.afterState === 3">退货中</span>
             <span v-else-if="row.afterState === 4">退款完成</span>
@@ -63,7 +63,21 @@
             <span v-else>--</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" min-width="80" prop="buyerUserId" label="客户ID" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" label="客户ID" prop="buyerUserId">
+          <template slot-scope="{ row }">
+            <div>
+              <span>{{ row.buyerUserId }}</span>
+              <el-button
+                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.buyerUserId)"
+                style="margin-left: 14px;"
+                type="warning" size="mini"
+                @click="handleOpenUserDetails(row.buyerUserId)"
+              >
+                详情
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column align="center" min-width="100" prop="customerName" label="下单账户" show-overflow-tooltip />
         <el-table-column align="center" min-width="120" prop="customerPhone" label="下单账户手机号" show-overflow-tooltip />
         <el-table-column align="center" min-width="150" prop="receiveAdress" label="收货人地址" show-overflow-tooltip />
@@ -75,13 +89,13 @@
           <template slot-scope="{ row }">
             <el-button
               v-if="formData.relatedPresenterVoucherLogs[row.orderFormid]" type="success" size="mini"
-              @click="$refs.RelatedVoucherLogs && $refs.RelatedVoucherLogs.handleOpen(formData.relatedPresenterVoucherLogs[row.orderFormid])"
+              @click="$refs.RelatedVoucherLogs && $refs.RelatedVoucherLogs.handleOpen(formData.relatedPresenterVoucherLogs[row.orderFormid], { userList: formData.relatedBuyerUsers })"
             >
               代金券记录
             </el-button>
             <el-button
               v-if="formData.relatedCommissionLogs[row.orderFormid]" type="success" size="mini"
-              @click="$refs.RelatedCommissionLogs && $refs.RelatedCommissionLogs.handleOpen(formData.relatedCommissionLogs[row.orderFormid])"
+              @click="$refs.RelatedCommissionLogs && $refs.RelatedCommissionLogs.handleOpen(formData.relatedCommissionLogs[row.orderFormid], { userList: formData.relatedBuyerUsers })"
             >
               佣金记录
             </el-button>
@@ -93,6 +107,8 @@
       <RelatedVoucherLogs ref="RelatedVoucherLogs" />
       <!-- 佣金记录 -->
       <RelatedCommissionLogs ref="RelatedCommissionLogs" />
+      <!-- 用户详情 -->
+      <UserDetails ref="UserDetails" />
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -105,12 +121,14 @@
 <script>
 import RelatedVoucherLogs from './RelatedVoucherLogs'
 import RelatedCommissionLogs from './RelatedCommissionLogs'
+import UserDetails from './UserDetails'
 
 export default {
   name: 'RelatedOrders',
   components: {
     RelatedVoucherLogs,
-    RelatedCommissionLogs
+    RelatedCommissionLogs,
+    UserDetails
   },
   data() {
     return {
@@ -124,7 +142,8 @@ export default {
         relatedSettlement: [],
         relatedOrders: {},
         relatedPresenterVoucherLogs: {},
-        relatedCommissionLogs: {}
+        relatedCommissionLogs: {},
+        relatedBuyerUsers: []
       },
       orderSn: ''
     }
@@ -141,6 +160,12 @@ export default {
       this.$forceUpdate()
       // this.$refs.formData && this.$refs.formData.resetFields()
     },
+    handleOpenUserDetails(buyerUserId) {
+      const userMsg = this.formData.relatedBuyerUsers.find((item) => item.buyerUserId === buyerUserId)
+      if (userMsg) {
+        this.$refs.UserDetails && this.$refs.UserDetails.handleOpen(userMsg)
+      }
+    },
     handleSubmit() {
     }
   }

src/views/finance/withdrawal/components/RelatedVoucherLogs.vue

@@ -6,8 +6,36 @@
         height="60vh" element-loading-text="暂无佣金记录数据" :data="formData.relatedPresenterVoucherLogsList"
         v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
       >
-        <el-table-column align="center" min-width="120" prop="holdId" label="支出方用户ID" show-overflow-tooltip />
-        <el-table-column align="center" min-width="120" prop="userId" label="收入方用户ID" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" label="支出方用户ID" prop="holdId">
+          <template slot-scope="{ row }">
+            <div>
+              <span>{{ row.holdId }}</span>
+              <el-button
+                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.holdId)"
+                style="margin-left: 14px;"
+                type="warning" size="mini"
+                @click="handleOpenUserDetails(row.holdId)"
+              >
+                详情
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="120" label="收入方用户ID" prop="userId">
+          <template slot-scope="{ row }">
+            <div>
+              <span>{{ row.userId }}</span>
+              <el-button
+                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.userId)"
+                style="margin-left: 14px;"
+                type="warning" size="mini"
+                @click="handleOpenUserDetails(row.userId)"
+              >
+                详情
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column align="center" min-width="100" label="用户类型" prop="type">
           <template slot-scope="{ row }">
             <span v-if="row.type === 1">总部</span>
@@ -38,6 +66,9 @@
         <el-table-column align="center" min-width="150" prop="createTime" label="发放时间" show-overflow-tooltip />
         <el-table-column align="center" min-width="200" prop="orderSn" label="订单编号/转赠流水号" show-overflow-tooltip />
       </el-table>
+
+      <!-- 用户详情 -->
+      <UserDetails ref="UserDetails" />
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -48,9 +79,13 @@
 </template>
 
 <script>
+import UserDetails from './UserDetails'
 
 export default {
   name: 'RelatedVoucherLogs',
+  components: {
+    UserDetails
+  },
   data() {
     return {
       modalOptions: {
@@ -60,7 +95,8 @@ export default {
       },
       visible: false,
       formData: {
-        relatedPresenterVoucherLogsList: []
+        relatedPresenterVoucherLogsList: [],
+        relatedBuyerUsers: []
       }
     }
   },
@@ -68,12 +104,19 @@ export default {
     handleClose() {
       this.visible = false
     },
-    handleOpen(params = []) {
+    handleOpen(params = [], { userList = [] }) {
       this.formData.relatedPresenterVoucherLogsList = params
+      this.formData.relatedBuyerUsers = userList
       this.visible = true
       this.$forceUpdate()
       // this.$refs.formData && this.$refs.formData.resetFields()
     },
+    handleOpenUserDetails(buyerUserId) {
+      const userMsg = this.formData.relatedBuyerUsers.find((item) => item.buyerUserId === buyerUserId)
+      if (userMsg) {
+        this.$refs.UserDetails && this.$refs.UserDetails.handleOpen(userMsg)
+      }
+    },
     handleSubmit() {
     }
   }

src/views/finance/withdrawal/components/UserDetails.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 用户详情信息 -->
+      <el-form-item label="用户ID" prop="buyerUserId">
+        {{ formData.buyerUserId || '--' }}
+      </el-form-item>
+      <el-form-item label="头像" prop="headImage">
+        <el-image
+          v-if="formData.headImage" lazy :src="common.seamingImgUrl(formData.headImage)"
+          style="width:40px; height:40px" fit="cover"
+          :preview-src-list="[ common.seamingImgUrl(formData.headImage) ]"
+        />
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="注册来源" prop="terminal">
+        <span v-if="formData.terminal === 1">APP</span>
+        <span v-else-if="formData.terminal === 2">小程序</span>
+        <span v-else-if="formData.terminal === 3">H5</span>
+        <span v-else-if="formData.terminal === 4">支付宝小程序</span>
+        <span v-else-if="formData.terminal === 5">PC</span>
+        <span v-else>未知</span>
+      </el-form-item>
+      <el-form-item label="生日" prop="birthday">
+        {{ formData.birthday || '--' }}
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        {{ formData.sex || '--' }}
+      </el-form-item>
+      <el-form-item label="用户昵称" prop="name">
+        {{ formData.name || '--' }}
+      </el-form-item>
+      <el-form-item label="用户手机号" prop="phone">
+        {{ formData.phone || '--' }}
+      </el-form-item>
+      <el-form-item label="微信名称" prop="wechatName">
+        {{ formData.wechatName || '--' }}
+      </el-form-item>
+      <!-- <el-form-item label="渠道编码" prop="channelCode">
+        {{ formData.channelCode || '--' }}
+        </el-form-item>
+        <el-form-item label="积分" prop="credit">
+        {{ formData.credit || '--' }}
+        </el-form-item>
+        <el-form-item label="成长值" prop="growth">
+        {{ formData.growth || '--' }}
+        </el-form-item> -->
+      <el-form-item label="是否黑名单" prop="ifBlack">
+        <el-tag v-if="formData.ifBlack === 0" effect="plain" type="info">否</el-tag>
+        <el-tag v-else-if="formData.ifBlack === 1" effect="plain" type="danger">是</el-tag>
+        <span v-else>--</span>
+      </el-form-item>
+      <!-- <el-form-item label="状态" prop="state">
+        {{ formData.state || '--' }}
+        </el-form-item> -->
+      <el-form-item label="创建时间" prop="createTime">
+        {{ formData.createTime || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看用户详情'
+      },
+      visible: false,
+      formData: {
+        buyerUserId: '',
+        headImage: '',
+        terminal: '',
+        birthday: '',
+        sex: '',
+        name: '',
+        phone: '',
+        wechatName: '',
+        channelCode: '',
+        credit: '',
+        growth: '',
+        ifBlack: '',
+        state: '',
+        createTime: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.buyerUserId) {
+        // this.getInfo(params.buyerUserId)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+