horzi_rai_wxa/components/activity/areaCode.vue

<template>
  <view class="select-box">
    <u-popup v-model="areacodeShow" mode="bottom" @close="cancel">
      <view class="box" style="color: #333333; font-size: 28rpxrpx">请选择您的国际区号</view>
      <view class="box" v-for="item in mobileAreaCode" :key="item.code" style="color: #2c83ff" @click="areacode(item.code)">{{ item.name }}</view>
      <view class="box box-bottom" style="color: #a9afb8" @click="cancel">取消</view>
    </u-popup>
  </view>
</template>

<script>
import { User } from "@/config/api.js";
import { MobileAreaCode } from "@/utils/mobileCode";

export default {
  computed: {
    mobileAreaCode() {
      return MobileAreaCode;
    },
  },
  watch: {
    isAreaCode() {
      this.areacodeShow = this.isAreaCode;
    },
    typesignup() {
      this.signupType = this.typesignup;
    },
  },
  data() {
    return {
      areacodeShow: false,
    };
  },
  props: {
    isAreaCode: {
      type: Boolean,
      default: false,
    },
    areaCode: {
      type: Object,
    },
  },
  methods: {
    areacode(num) {
      User.countryCcodeAdd({
        CountryCode: num,
      }).then((res) => {
        if (res.Ret == 200) {
          this.areacodeShow = false;
          this.$parent.isAreaCode = false;
          this.$parent.signupAdd(this.areaCode.id, this.areaCode.type);
        }
      });
    },
    cancel() {
      this.areacodeShow = false;
      this.$parent.isAreaCode = false;
    },
  },
};
</script>

<style scoped lang="scss">
.select-box {
  width: 100%;

  .box {
    height: 95prx;
    line-height: 95rpx;
    text-align: center;
    font-size: 32rpx;
    border-bottom: 1rpx solid #ebebeb;
  }

  .box-bottom {
    border-bottom: none !important;
  }
}
</style>