1

lxf

2025-06-23 1e47b1681854ea564215482fb3b2d73934fa3edc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
  <div class="selectPay pb-10">
    <fx-header>
      <template #title>{{ $t('allPay') }}</template>
    </fx-header>
    <!-- <van-search v-model="value1" placeholder="请输入搜索关键词" /> -->
    <van-index-bar v-for="(item, index) in keyList" :key="index" :index-list="newLetter">
      <van-index-anchor class="index-anchor" :index="item.name" />
      <div @click="openAdd(items)" class="item-cell ml-4 py-4" v-for="(items, index) in item.list" :key="index">
        {{ items }}
        <!-- {{ $t(`${items}`) }} -->
      </div>
    </van-index-bar>
  </div>
</template>
 
<script setup>
import { onBeforeMount, ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _getC2cPaymentMethodConfig } from "@/service/user.api.js";
import Pinyin from '@/utils/ChinesePY'
import { useI18n } from "vue-i18n";
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
let value1 = ref('')
let keysList = ref(null)
let keyList = ref([])
let newLetter = ref([])
 
const openAdd = (val) => {
  let id = ''
  for (const key in keysList.value) {
    if (keysList.value.hasOwnProperty.call(keysList.value, key)) {
      if (keysList.value[key] === val) {
        id = key
      }
    }
  }
  sessionStorage.setItem("editAdd", JSON.stringify({ id: id, name: val, type: 'add' }));
  router.push('add')
}
onMounted(async () => {
  console.log(route.query.name);
  getC2cPaymentMethodConfig()
})
watch(value1, (val, oldVal) => {
  if (!val) {
    return
  }
  keyList.value.map((item) => {
    item.list.map((item2) => {
      if (item2.indexOf(val) !== -1) {
        console.log(item2)
      }
    })
  })
  this.filterFruitList = this.fruitList.filter((item) => {
    return item.name.indexOf(val) !== -1;
  })
  if (!val) {
    return
  }
  // for (let i = 0; i < keyList.value.length; i++) {
  //     for (let j = 0; j < keyList.value[i].list.length; j++) {
  //         // console.log(keyList.value[i].list[j])
  //         console.log(keyList.value[i].list[j].indexOf(val))
  //         if (keyList.value[i].list[j].indexOf(val) === -1) {
  //             // console.log(keyList.value[i].list[j])
  //         } else {
  //             console.log(keyList.value[i].list[j])
  //         }
  //     }
 
  // }
})
const getC2cPaymentMethodConfig = () => {
  _getC2cPaymentMethodConfig().then((res) => {
    keysList.value = res
    let arry = Object.values(res)
    let nweArry = []
    let letter = []
    arry.map((item) => {
      let obj = {
        name: item,
        code: Pinyin.getWordsCode(item).substring(0, 1)
      }
      letter.push(Pinyin.getWordsCode(item).substring(0, 1))
      nweArry.push(obj)
    })
    newLetter.value = Array.from(new Set(letter))
    newLetter.value.map((item) => {
      let obj = {
        name: item,
        list: []
      }
      nweArry.map((items) => {
        if (item == items.code) {
          obj.list.push(items.name)
        }
      })
      keyList.value.push(obj)
    })
  })
}
</script>
<style lang="scss" scoped>
.selectPay {
  .index-anchor {
    background: #232C46;
  }
 
 
}
 
:deep(.van-index-anchor) {
  font-size: 16px;
}
 
:deep(.van-index-bar__index) {
  color: $active_line;
  font-size: 14px;
  margin-top: 6px;
  display: none;
}
 
.item-cell {
  border-bottom: 1px solid #474b62;
  font-size: 15px;
}
</style>