horzi_rai_wxa/activityPages/components/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" style="color: #2c83ff" @click="areacode('86')">大陆+86</view>
      <view class="box" style="color: #2c83ff" @click="areacode('852')">香港+852</view>
      <view class="box" style="color: #2c83ff" @click="areacode('886')">台湾+886</view>
      <view class="box" style="color: #2c83ff" @click="areacode('1')">美国+1</view>
      <view class="box" style="color: #2c83ff" @click="areacode('65')">新加坡+65</view>
      <view class="box box-bottom" style="color: #a9afb8" @click="cancel">取消</view>
    </u-popup>
  </view>
</template>

<script>
import { User } from "@/config/api.js";
export default {
  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.isNeedAddCountryCode = 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>