12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <template>
- <view>
- <uni-nav-bar
- status-bar = true
- fixed = true
- background-color="#03b6b3"
- color="#ffffff"
- left-icon="arrowleft"
- @clickLeft="navigateBack">
- <text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">国家</text>
- </uni-nav-bar>
- <uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
- </view>
- </template>
- <script>
- import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
- import uniIndexedList from "@/components/uni-indexed-list/uni-indexed-list.vue";
- export default {
- comments: {uniNavBar, uniIndexedList},
- data() {
- return {
- list: [],
- sourceList: []
- }
- },
- mounted(){
- this.initDicts();
- },
- methods: {
- bindClick(e){
- // console.log(e)
- let key;
- this.sourceList.forEach(item => {
- // console.log(item)
- if(e.item.name == item.label){
- key = item.value;
- }
- })
-
- let selectedCountry = e.item.name;
- const eventChannel = this.getOpenerEventChannel();
- eventChannel.emit('acceptSelectedCountry', {country: selectedCountry, key: key});
- uni.navigateBack();
- },
- navigateBack() {
- uni.navigateBack()
- },
- async initDicts(){
- const res= await this.$myRequest({
- url: '/sys/sysDicts',
- data: {
- type: 'unit_country_dict'
- }
- })
- this.sourceList = res.data[0];
- res.data[0].forEach(code => {
- let letter = code.value[0].toUpperCase();
- let itemValue = code.label;
- if(this.list.length){
- let hasSameLetter = false;
- let listItemIndex;
- for(let l = 0; l < this.list.length; l++){
- if(this.list[l].letter == letter){
- hasSameLetter = true;
- listItemIndex = l;
- break;
- }
- }
- if(hasSameLetter){
- this.list[listItemIndex].data.push(itemValue);
- }else{
- this.list.push({
- letter: letter,
- data: [itemValue]
- });
- }
- }else{
- this.list.push({
- letter: letter,
- data: [itemValue]
- });
- }
- this.list.sort(function(a, b){
- return a.letter.charCodeAt()-b.letter.charCodeAt();
- })
- })
- },
- }
- }
- </script>
- <style scoped>
- /deep/ .uni-indexed-list__menu{
- width: 30px;
- }
- </style>
|