调整分红转账时效选择地区问题处理

src/components/chat-content.vue

@@ -428,7 +428,8 @@
             item.cmd == 'wnzhzzsx' ||
             item.cmd == 'tbzzsx' ||
             item.cmd == 'dkzzsx' ||
-            item.cmd == 'lpzzsx')
+            item.cmd == 'lpzzsx' ||
+            item.cmd == '$zzsx-da') // $zzsx-da这是展示的答案
         ">
           <div class="chat-content-left">
             <div class="content-left-icon">
@@ -439,7 +440,7 @@
             </div>
             <div class="chat-items">
               <div class="content-left-main computing-text-box" style="padding: 14px">
-                <transfer-accounts :itemList="item" :disabled="true"></transfer-accounts>
+                <transfer-accounts :itemList="item" :disabled="isHistory"></transfer-accounts>
               </div>
             </div>
           </div>
@@ -1187,7 +1188,7 @@ import DynamicImage from '@/components/common/DynamicImage.vue';
 import imageService from '@/utils/imageService';
 import wx from 'weixin-js-sdk';
 export default {
-  props: ["historylist", "tokenExist", "lostChatInfoNum"],
+  props: ["historylist", "tokenExist", "lostChatInfoNum", "isHistory"],
   components: {
     [Loading.name]: Loading,
     // TextContent,

src/components/chat-new.vue

@@ -333,7 +333,7 @@ watch(
         <van-loading type="spinner" size="18px" />
       </div>
       <div class="historicRecords" v-if="historylist.length > 0">
-        <chatContent :historylist="historylist" :isWX="isWX" :tokenExist="tokenExist"
+        <chatContent :historylist="historylist" :isWX="isWX" :tokenExist="tokenExist" :isHistory="true"
           :lostChatInfoNum="lostChatInfoNum" />
       </div>
       <div class="this-news-box opacity" v-if="historylist.length > 0">

src/components/transfer-accounts.vue

@@ -3,63 +3,98 @@
     <div class="edit-address-box" v-if="transferAccountsType == 1">
       <div class="edit-address-title-hd">{{ itemList.msgText }}</div>
       <div class="edit-address-edit-box" v-if="networkPickShow">
-        <van-field readonly clickable label-class="edit-box-cell" name="picker" v-model="selectedNetwork" label="业务类型"
-          placeholder="请选择业务类型" right-icon="arrow" :disabled="disabled"
-          @click.stop="!disabled && (selectedNetworkShow = true)">
+        <van-field
+          readonly
+          clickable
+          label-class="edit-box-cell"
+          name="picker"
+          v-model="selectedNetwork"
+          label="业务类型"
+          placeholder="请选择业务类型"
+          right-icon="arrow"
+          :disabled="disabled"
+          @click.stop="!disabled && (selectedNetworkShow = true)"
+        >
         </van-field>
-        <div v-if="networkPickShowtishi" style="text-align: right; color: red; font-size: 0.32rem">
+        <div v-if="networkPickShowtishi" style="text-align: right; color: red; font-size: 12rem">
           请选择业务类型
         </div>
       </div>
 
       <div class="edit-address-edit-box" v-if="areaListPickShow">
-        <van-field readonly clickable label-class="edit-box-cell" name="picker" v-model="selectedCompany" label="所在地区"
-          placeholder="点击此处选择分公司/支公司" right-icon="arrow" :disabled="disabled" @click.stop="areaListPickClick">
+        <van-field
+          readonly
+          clickable
+          label-class="edit-box-cell"
+          name="picker"
+          v-model="selectedCompany"
+          label="所在地区"
+          placeholder="点击此处选择分公司/支公司"
+          right-icon="arrow"
+          :disabled="disabled"
+          @click.stop="areaListPickClick"
+        >
         </van-field>
-        <div v-if="areaListPickShowtishi" style="text-align: right; color: red; font-size: 0.32rem">
+        <div v-if="areaListPickShowtishi" style="text-align: right; color: red; font-size: 12rem">
           请选择所在分、支公司
         </div>
       </div>
 
       <div class="van-address-edit-btn">
-        <van-button round block color="#5A9CFF" :disabled="submitDisabled || disabled" :loading="submitLoad" type="info"
-          loading-text="变更中..." @click.stop="submitInfo">确 认</van-button>
+        <van-button
+          round
+          block
+          color="#5A9CFF"
+          :disabled="submitDisabled || disabled"
+          :loading="submitLoad"
+          loading-text="变更中..."
+          @click.stop="submitInfo"
+          >确 认</van-button
+        >
       </div>
     </div>
 
     <div class="networkInfo" v-else>
       <template v-if="networkInfo && networkInfo.infos && networkInfo.infos.length > 0">
         <div>
-          <div class="networkInfo-title displayleft" style="margin: 10px 0; font-size: 16px; align-items: center">
-            <img src="../assets/images/company.png" style="width: 19px; height: 17px; margin-right: 8px" alt="" />
+          <div
+            class="networkInfo-title displayleft"
+            style="margin: 10rem 0; font-size: 16rem; align-items: center"
+          >
+            <img
+              src="../assets/images/company.png"
+              style="width: 19rem; height: 17rem; margin-right: 8rem"
+              alt=""
+            />
             <div>{{ networkInfo.orgName }}</div>
           </div>
 
-          <div v-for="(items, indexs) in networkInfo.infos" :key="indexs"
-            :style="{ 'border-top': indexs > 0 ? '1px dashed #666' : '' }">
-            <div class="displayleft" style="margin: 10px 0">
-              <div style="width: 80px; color: #f58019">账户类型：</div>
-              <div style="color: #f58019; flex: 1; font-size: 12px">
+          <div
+            v-for="(items, indexs) in networkInfo.infos"
+            :key="indexs"
+            :style="{ 'border-top': indexs > 0 ? '1rem dashed #666' : '' }"
+          >
+            <div class="displayleft" style="margin: 10rem 0">
+              <div style="width: 80rem; color: #f58019">账户类型：</div>
+              <div style="color: #f58019; flex: 1; font-size: 12rem">
                 {{ items.accountType }}
               </div>
             </div>
-            <div class="displayleft" style="margin: 10px 0">
-              <div style="width: 80px">转账银行：</div>
-              <div style="color: #666; flex: 1; font-size: 12px">
+            <div class="displayleft" style="margin: 10rem 0">
+              <div style="width: 80rem">转账银行：</div>
+              <div style="color: #666; flex: 1; font-size: 12rem">
                 {{ items.transBank }}
               </div>
             </div>
-            <div class="displayleft" style="margin: 10px 0">
-              <div style="width: 80px">转账时效：</div>
-              <div style="color: #666; flex: 1; font-size: 12px">
+            <div class="displayleft" style="margin: 10rem 0">
+              <div style="width: 80rem">转账时效：</div>
+              <div style="color: #666; flex: 1; font-size: 12rem">
                 {{ items.transTime }}
               </div>
             </div>
-            <div class="displayleft" style="margin: 10px 0" v-if="items.remark">
-              <div style="width: 80px">
-                备<span style="opacity: 0">备注</span>注：
-              </div>
-              <div style="color: #666; flex: 1; font-size: 12px">
+            <div class="displayleft" style="margin: 10rem 0" v-if="items.remark">
+              <div style="width: 80rem">备<span style="opacity: 0">备注</span>注：</div>
+              <div style="color: #666; flex: 1; font-size: 12rem">
                 {{ items.remark }}
               </div>
             </div>
@@ -67,45 +102,72 @@
         </div>
       </template>
       <template v-else>
-        <div style="text-align: left; font-size: 14px; color: #666">
-          暂无数据
-        </div>
+        <div style="text-align: left; font-size: 14rem; color: #666">暂无数据</div>
       </template>
     </div>
 
-    <van-popup class="edit-address-popup-box" v-model:show="isEditShow" get-container="body" position="bottom"
-      :duration="0.2">
-      <van-picker show-toolbar value-key="name" :columns="columns" :item-height="40" @cancel="onCompanyCancel"
-        @confirm="onCompanyConfirm" @change="companyChange" />
+    <van-popup
+      class="edit-address-popup-box"
+      v-model:show="isEditShow"
+      teleport="body"
+      position="bottom"
+      :duration="0.2"
+    >
+      <van-picker
+        show-toolbar
+        :columns="columns"
+        :columns-field-names="{ text: 'name' }"
+        :item-height="40"
+        @cancel="onCompanyCancel"
+        @confirm="onCompanyConfirm"
+        @change="companyChange"
+      />
     </van-popup>
 
-    <van-popup class="edit-address-popup-box" v-model:show="selectedNetworkShow" get-container="body" position="bottom"
-      :duration="0.2">
-      <van-picker show-toolbar value-key="title" :columns="selectedNetworkColums" :item-height="40"
-        @cancel="selectedNetworkShow = false" @confirm="onNetworkConfirm" />
+    <van-popup
+      class="edit-address-popup-box"
+      v-model:show="selectedNetworkShow"
+      teleport="body"
+      position="bottom"
+      :duration="0.2"
+    >
+      <van-picker
+        show-toolbar
+        :columns="selectedNetworkColums"
+        :columns-field-names="{ text: 'title' }"
+        :item-height="40"
+        @cancel="selectedNetworkShow = false"
+        @confirm="onNetworkConfirm"
+      />
     </van-popup>
   </div>
 </template>
 
 <script setup>
-import { ref, inject, onMounted, nextTick } from 'vue'
-import { showToast, Field, Button, Popup, Picker } from 'vant'
-import { pcaList } from '@/mock/network-code'
+import { ref, nextTick, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppStore } from '@/store/app.js'
+import { Post } from '@/utils/https'
 
 const props = defineProps({
   disabled: { type: Boolean, default: false },
-  itemList: { type: Object, default: () => ({}) }
+  itemList: { type: Object, default: () => ({}) },
 })
 
-const store = inject('appStore', null)
-const userId = inject('userId', ref(''))
-const sessionId = inject('sessionId', ref(''))
-const source = inject('source', ref(''))
-const mescrollContent = inject('mescrollContent', ref(null))
-
-const Networkinf = { yhzzsx: 0, fhzzsx: 2, scjzzsx: 3, wnzhzzsx: 4, tbzzsx: 6, dkzzsx: 1, lpzzsx: 5 }
+const store = useAppStore()
+const { userId, sessionId, source, mescrollContent } = storeToRefs(store)
+
+// cmd -> 业务类型 id 映射
+const Networkinf = {
+  yhzzsx: 0,
+  fhzzsx: 2,
+  scjzzsx: 3,
+  wnzhzzsx: 4,
+  tbzzsx: 6,
+  dkzzsx: 1,
+  lpzzsx: 5,
+}
 
-const areaList = pcaList
 const isEditShow = ref(false)
 const columns = ref([])
 const changeCompany_fen = ref('')
@@ -125,53 +187,15 @@ const transferAccountsType = ref(1)
 const networkPickShowtishi = ref(false)
 const areaListPickShowtishi = ref(false)
 
-onMounted(async () => {
-  submitDisabled.value = props.disabled
-  nextTick(() => { scrollTopBody() })
-
-  if (props.itemList.cmd == 'yhzzsx') {
-    networkPickShow.value = true
-    let param = { queryType: 1, businessType: 0 }
-    initPages(param)
-  } else if (props.itemList.cmd == '$zzsx-da') {
-    transferAccountsType.value = 0
-    await store?.dispatch?.('post', {
-      url: 'transTimeQuery/queryInfo',
-      data: Object.assign({}, props.itemList.msgText, { qaId: props.itemList.qaId })
-    }).then(res => {
-      networkInfo.value = res.data
-      scrollTopBody()
-    }).catch(error => { console.log(error) })
-  } else {
-    networkPickShow.value = false
-    businessType.value = Networkinf[props.itemList.cmd]
-    let param = { queryType: 1, businessType: businessType.value }
-    initPages(param)
-  }
-})
-
-function initPages(param) {
-  if (props.disabled) return
-  store?.dispatch?.('post', {
-    url: 'transTimeQuery/queryOrg',
-    data: param
-  }).then(async res => {
-    selectedNetworkColums.value = res.data.business
-    let info = []
-    res.data.infos.forEach(element => {
-      info.push({ name: element })
-    })
-    await getfenCompany(info)
-  }).catch(error => { console.log(error) })
-}
-
 function scrollTopBody() {
   setTimeout(() => {
+    // 滚动到底部
     try {
-      if (mescrollContent.value) {
-        mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
-      }
-    } catch (error) { console.log(error.message) }
+      const el = mescrollContent.value
+      if (el) el.scrollTop = el.scrollHeight || 0
+    } catch (error) {
+      console.log(error.message)
+    }
   }, 300)
 }
 
@@ -180,6 +204,7 @@ function verification() {
     networkPickShowtishi.value = true
     return false
   }
+
   if (areaListPickShow.value && !selectedCompany.value) {
     areaListPickShowtishi.value = true
     return false
@@ -187,52 +212,55 @@ function verification() {
   return true
 }
 
-function onNetworkConfirm(value) {
+// 选择业务类型确认
+function onNetworkConfirm({ selectedOptions }) {
+  const value = selectedOptions[0] || {}
   selectedNetwork.value = value.title
   businessType.value = value.id
   selectedNetworkShow.value = false
   networkPickShowtishi.value = false
-  let param = { queryType: 1, businessType: businessType.value }
-  initPages(param)
+  initPages({ queryType: 1, businessType: businessType.value })
 }
 
-function onCompanyConfirm(value, itemIndex) {
-  var fenIndex = itemIndex[0]
-  var zhiIndex = itemIndex[1]
-  var fen = columns.value[fenIndex]
-  var zhi = columns.value[fenIndex].children[zhiIndex]
-  company_fen.value = fen.name
-  company_zhi.value = zhi.name
-  selectedCompany.value = `${fen.name + zhi.name}`
+// 公司选择确认
+function onCompanyConfirm({ selectedOptions }) {
+  const fen = selectedOptions[0] || {}
+  const zhi = selectedOptions[1] || {}
+
+  company_fen.value = fen.name || ''
+  company_zhi.value = zhi.name || ''
+  selectedCompany.value = `${fen.name || ''}${zhi.name || ''}`
   isEditShow.value = false
   areaListPickShowtishi.value = false
 }
 
+// 公司选择取消
 function onCompanyCancel() {
   isEditShow.value = false
 }
 
-function companyChange(picker, values) {
-  if (values[0] !== changeCompany_fen.value) {
-    changeCompany_fen.value = values[0]
-    let param = { queryType: 2, businessType: 1, branchName: values[0] }
-    store?.dispatch?.('post', {
-      url: 'transTimeQuery/queryOrg',
-      data: param
-    }).then(res => {
-      let info = []
-      res.data.infos.forEach(element => {
-        info.push({ name: element, children: [{ name: '' }] })
-      })
-      columns.value[picker.getColumnIndex(0)].children = info
-      picker.setColumnValues(1, info)
-    }).catch(error => { console.log(error) })
-  }
+function companyChange({ columnIndex, selectedOptions }) {
+  if (columnIndex !== 0) return
+  const fen = selectedOptions[0]
+  if (!fen || fen.name === changeCompany_fen.value) return
+  changeCompany_fen.value = fen.name
+
+  const param = { queryType: 2, businessType: 1, branchName: fen.name }
+  Post('transTimeQuery/queryOrg', param)
+    .then((res) => {
+      // vant 4 Picker 没有 setColumnValues 实例方法，直接改响应式 columns 数据刷新子级
+      fen.children = (res.data.infos || []).map((element) => ({ name: element }))
+    })
+    .catch((error) => {
+      console.log(error)
+    })
 }
 
 function submitInfo() {
-  if (!verification()) return
-  let info = {
+  if (!verification()) {
+    return
+  }
+  const info = {
     cmd: '$zzsx-da',
     customerServiceName: null,
     evaluation: null,
@@ -244,7 +272,7 @@ function submitInfo() {
     msgText: {
       businessType: businessType.value,
       orgName: company_zhi.value,
-      userInfoId: userId.value
+      userInfoId: userId.value,
     },
     msgType: '01',
     qaId: props.itemList.qaId,
@@ -254,17 +282,17 @@ function submitInfo() {
     seatNum: '洋洋机器人',
     sessionId: sessionId.value,
     source: source.value,
-    timestamp: new Date().getTime(),
+    timestamp: Date.now(),
     userId: 408,
     userName: null,
     voiceData: null,
-    voiceUrl: null
+    voiceUrl: null,
   }
-  store?.commit?.('set_chatList', info)
+  store.setChatList(info)
   scrollTopBody()
 }
 
-async function areaListPickClick() {
+function areaListPickClick() {
   if (props.disabled) return
   if (props.itemList.cmd == 'yhzzsx' && selectedNetwork.value == '') {
     networkPickShowtishi.value = true
@@ -274,33 +302,76 @@ async function areaListPickClick() {
 }
 
 function getfenCompany(infoArray) {
+  if (!infoArray || !infoArray.length) return
   company_fen.value = infoArray[0].name
   changeCompany_fen.value = infoArray[0].name
-  let param = { queryType: 2, businessType: 1, branchName: infoArray[0].name }
-  store?.dispatch?.('post', {
-    url: 'transTimeQuery/queryOrg',
-    data: param
-  }).then(res => {
-    let info = []
-    res.data.infos.forEach(element => {
-      info.push({ name: element })
+  const param = { queryType: 2, businessType: 1, branchName: infoArray[0].name }
+  Post('transTimeQuery/queryOrg', param)
+    .then((res) => {
+      infoArray[0].children = (res.data.infos || []).map((element) => ({ name: element }))
+      columns.value = infoArray
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+function initPages(param) {
+  if (props.disabled) return
+  Post('transTimeQuery/queryOrg', param)
+    .then((res) => {
+      selectedNetworkColums.value = res.data.business
+      const info = (res.data.infos || []).map((element) => ({ name: element }))
+      getfenCompany(info)
     })
-    infoArray[0].children = info
-    columns.value = infoArray
-  }).catch(error => { console.log(error) })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+async function initTransferAccounts() {
+  submitDisabled.value = props.disabled
+  nextTick(() => scrollTopBody())
+
+  // 银行转账时效处理
+  if (props.itemList.cmd == 'yhzzsx') {
+    networkPickShow.value = true
+    initPages({ queryType: 1, businessType: 0 })
+  } else if (props.itemList.cmd == '$zzsx-da') {
+    transferAccountsType.value = 0
+    try {
+      const res = await Post('transTimeQuery/queryInfo', {
+        ...(props.itemList.msgText || {}),
+        qaId: props.itemList.qaId,
+      })
+      networkInfo.value = res.data
+      scrollTopBody()
+    } catch (error) {
+      console.log(error)
+    }
+  } else {
+    networkPickShow.value = false
+    businessType.value = Networkinf[props.itemList.cmd]
+    initPages({ queryType: 1, businessType: businessType.value })
+  }
 }
+
+onMounted(() => {
+  initTransferAccounts()
+})
 </script>
 
 <style scoped>
 .displayleft {
   display: flex;
+  /* align-items: center; */
   justify-content: flex-start;
 }
 
 .edit-address-title-hd {
   font-family: NotoSansHans-Regular;
-  font-size: 14px;
-  line-height: 21px;
+  font-size: 14rem;
+  line-height: 21rem;
   font-weight: 700;
   color: #333333;
   word-wrap: break-word;
@@ -308,11 +379,11 @@ function getfenCompany(infoArray) {
   overflow: hidden;
   -webkit-user-select: text;
   user-select: text;
-  padding-bottom: 15px;
+  padding-bottom: 15rem;
 }
 
 .edit-address-edit-box .van-cell {
-  padding: 10px 0;
+  padding: 10rem 0;
 }
 
 .edit-address-edit-box .van-cell:not(:last-child)::after {
@@ -320,7 +391,7 @@ function getfenCompany(infoArray) {
 }
 
 .edit-address-edit-box :deep(.van-field__label.edit-box-cell) {
-  width: 75px;
+  width: 75rem;
 }
 
 .code-btn.code-btn-disabled {
@@ -331,12 +402,12 @@ function getfenCompany(infoArray) {
 }
 
 .edit-box-checkbox-item {
-  padding: 20px 0 0 0;
+  padding: 20rem 0 0 0;
   display: inline-block;
 }
 
 .edit-box-checkbox-item :deep(.van-checkbox__label) {
-  margin-top: 2px;
+  margin-top: 2rem;
 }
 
 .edit-address-popup-box {
@@ -344,6 +415,6 @@ function getfenCompany(infoArray) {
 }
 
 .edit-address-box .van-address-edit-btn {
-  padding: 30px 0 10px 0;
+  padding: 30rem 0 10rem 0;
 }
 </style>