chushih

components/country-code/country-code.vue

@@ -0,0 +1,201 @@
+<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;
+    }
+  }
+}
+/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>