jiaoyi_cxicoin_h5/pages/auth/primary.vue

<template>
  <v-page>
    <v-header :title="$t('auth.a1')"></v-header>
    <main class=" m-lg  bg-panel-3 rounded-md p-x-md box-shadow">
			<!-- 国籍 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.a7')}}</view>
        <view class="input color-light" >
          <v-picker :value="form.country_id" @change="selectCountry" :list="countryList" range-value="id" range-label="name">
            <v-input disabled :value="activeCountry.name" :placeholder="$t('auth.a8')">
              <template #right>
                <van-icon class="color-default" name="arrow" />
              </template>
            </v-input>
          </v-picker>
        </view>
      </view>
			<!-- 姓名 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.a9')}}</view>
        <view class="input color-light">
          <v-input v-model="form.realname" :placeholder="$t('auth.b0')"></v-input>
        </view>
      </view>
			<!-- 出生日期 -->
			<view class="form-item border-b p-md m-b-md">
			  <view class="label m-b-xs">{{$t('auth.d0')}}</view>
			  <view class="input color-light" >
			    <uni-datetime-picker
			    	type="date"
			    	:value="single"
			    	start="1900-1-1"
			    	end="2050-12-12"
			    	@change="selectDate"
			    />
			  </view>
			</view>
			<!-- 证件号类型 -->
			<view class="form-item border-b p-md m-b-md">
			  <view class="label m-b-xs">{{$t('auth.d1')}}</view>
			  <view class="input color-light" >
			    <v-picker :value="form.type" @change="selectType" :list="typeList" range-value="value" range-label="label">
			      <v-input disabled :value="activeType.label" :placeholder="$t('auth.d13')">
			        <template #right>
			          <van-icon class="color-default" name="arrow" />
			        </template>
			      </v-input>
			    </v-picker>
			  </view>
			</view>
			<!-- 证件号 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.b1')}}</view>
        <view class="input color-light">
          <v-input v-model="form.id_card" :placeholder="$t('auth.b2')"></v-input>
        </view>
      </view>
			<!-- 居住地址 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.d5')}}</view>
        <view class="input color-light">
          <v-input v-model="form.address" :placeholder="$t('auth.d6')"></v-input>
        </view>
      </view>
			<!-- 城市 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.d7')}}</view>
        <view class="input color-light">
          <v-input v-model="form.city" :placeholder="$t('auth.d8')"></v-input>
        </view>
      </view>
			<!-- 邮政区号 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.d9')}}</view>
        <view class="input color-light">
          <v-input v-model="form.postal_code" :placeholder="$t('auth.d10')"></v-input>
        </view>
      </view>
			<!-- 电话 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.d11')}}</view>
        <view class="input color-light">
          <v-input v-model="form.phone" :placeholder="$t('auth.d12')"></v-input>
        </view>
      </view>
	  <view class="p-md ">
	    <v-button block type="blue" class="w-max rounded-md" ref="btn" @click="primaryAuth">{{$t('auth.b3')}}</v-button>
	  </view>
    </main>



    <van-toast id="van-toast" />
  </v-page>
</template>
<script>
import Profile from "@/api/profile";
import Member from "@/api/member";
export default {
  data() {
    return {
      detail: {},
      countryList: [],
      form: {
				type: "",
        id_card: "",
        realname: "",
        country_id: "",
        country_code: "",
				birthday: "",
				address: "",
				city: "",
				postal_code: "",
				phone: "",
      },
			single: "2023-06-3",
			typeList: [
				{
						label: this.$t('auth.d2'),
						value: 1,
				},
				{
						label: this.$t('auth.d3'),
						value: 2,
				},
				{
						label: this.$t('auth.d4'),
						value: 3,
				},
			]
    };
  },
  computed: {
    activeCountry() {
      return (
        this.countryList.find((item) => item.id == this.form.country_id) || {}
      );
    },
		activeType(){
			return (
			  this.typeList.find((item) => item.value == this.form.type) || {}
			);
		},
    activeIndex(){
       return this.countryList.findIndex((item) => item.id == this.form.country_id)
    },
  },
  methods: {
    getAuthInfo() {
      Profile.getAuthInfo().then((res) => {
        this.detail = res.data;
      });
    },
    // 获取区号
    getCountryCode() {
      Member.getCountryCode()
        .then((res) => {
					console.info(res)
          this.countryList = res.data;
          this.form.country_id = this.countryList[res.data.length-1].id;
        })
        .catch(() => {});
    },
    selectCountry(value) {
      this.form.country_id = value
    },
		selectDate(value){
			this.form.birthday = value;
		},
		selectType(value){
			this.form.type = value;
		},
    // 认证
    primaryAuth() {
      let data = this.form;
      data.country_code = this.activeCountry.country_code;
      Profile.primaryAuth(data,{btn:this.$refs.btn}).then(() => {
        this.$toast.success(this.$t('auth.b4'));
        // this.$back();
				uni.navigateBack({
					delta: 1
				})
      }).catch(()=>{});
    },
  },
  created() {
    this.getAuthInfo();
    this.getCountryCode();
  },
	onShow() {
		let date = new Date;
		this.single = date.getFullYear()+'-'+((date.getMonth()+1).toString().length==1?'0'+(date.getMonth()+1):(date.getMonth()+1))+'-'+date.getDate();
	}
};
</script>
<style lang="scss">
</style>