202 lines
4.1 KiB
Vue
202 lines
4.1 KiB
Vue
<template>
|
|
<u-popup :show="show" mode="bottom">
|
|
<view class="popup-view">
|
|
<view class="title">
|
|
<u-icon
|
|
@tap="$emit('close')"
|
|
class="btn"
|
|
size="42rpx"
|
|
name="arrow-leftward"
|
|
></u-icon>
|
|
请选择区号
|
|
</view>
|
|
<u-index-list
|
|
ref="uIndexList"
|
|
class="scroll-view"
|
|
:index-list="indexList"
|
|
:customNavHeight="0"
|
|
>
|
|
<template v-for="(item, index) in countoryList">
|
|
<!-- #ifdef APP-NVUE -->
|
|
<u-index-anchor
|
|
height="64rpx"
|
|
:text="indexList[index]"
|
|
:key="index"
|
|
></u-index-anchor>
|
|
<!-- #endif -->
|
|
<u-index-item :key="index">
|
|
<!-- #ifndef APP-NVUE -->
|
|
<u-index-anchor
|
|
height="64rpx"
|
|
:text="indexList[index]"
|
|
></u-index-anchor>
|
|
<!-- #endif -->
|
|
<view v-for="(cell, i) in item" :key="i">
|
|
<view
|
|
@click="selectCountryTap(index, cell)"
|
|
class="list-cell"
|
|
:class="cell.en === country ? 'list-cell-active' : ''"
|
|
>
|
|
<view class="cell-left">
|
|
<view class="cn-name">{{ cell.cn }}</view>
|
|
<view class="en-name">{{ cell.en }}</view>
|
|
</view>
|
|
<view class="cell-right">{{ cell.code }}</view>
|
|
</view>
|
|
</view>
|
|
</u-index-item>
|
|
</template>
|
|
</u-index-list>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import countory from "./country.js";
|
|
export default {
|
|
name: "countryCode",
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
anchor: {
|
|
type: [String, Number],
|
|
default: "",
|
|
},
|
|
country: {
|
|
type: [String, Object],
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
indexList() {
|
|
const list = [];
|
|
countory.list.forEach((v) => {
|
|
list.push(v.letter);
|
|
});
|
|
return list;
|
|
},
|
|
countoryList() {
|
|
const list = [];
|
|
countory.list.forEach((v) => {
|
|
list.push(v.data);
|
|
});
|
|
return list;
|
|
},
|
|
},
|
|
watch: {
|
|
show(state) {
|
|
if (state) {
|
|
this.$nextTick(() => {
|
|
// uni.$u.config.unit = "px";
|
|
this.$refs.uIndexList.setValueForTouch(this.anchor);
|
|
});
|
|
} else {
|
|
// uni.$u.config.unit = "rpx";
|
|
}
|
|
},
|
|
},
|
|
destroyed() {
|
|
// uni.$u.config.unit = "rpx";
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
selectCountryTap(index, data) {
|
|
let postData = {
|
|
anchor_index: index,
|
|
country_en: data.en,
|
|
country_cn: data.cn,
|
|
country_code: data.code,
|
|
};
|
|
this.$emit("select", postData);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.popup-view {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #fff;
|
|
.title {
|
|
text-align: center;
|
|
height: 88rpx;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
font-weight: 600;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.btn {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
padding: 24rpx 30rpx;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .u-index-bar__sidebar {
|
|
z-index: 999;
|
|
}
|
|
.scroll-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.list-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 40rpx;
|
|
height: 110rpx;
|
|
border-bottom: 1px solid #f9f9fa;
|
|
|
|
.cell-left {
|
|
flex: 0 0 60%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.cn-name {
|
|
color: #1b252f;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.en-name {
|
|
color: #7d8894;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.cell-right {
|
|
flex: 0 0 40%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #7d8894;
|
|
font-size: 26rpx;
|
|
padding-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.list-cell-active {
|
|
background-color: #f9f9fa;
|
|
|
|
.cell-left {
|
|
.cn-name,
|
|
.en-name {
|
|
color: #416fff;
|
|
}
|
|
}
|
|
|
|
.cell-right {
|
|
color: #416fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|