注册页面新增手机号和区号

element/index.js

@@ -1,8 +1,12 @@
-// 导入自己需要的组件
-import { Slider } from 'element-ui'
+import { Slider,Progress,Steps,Step,Select,Option } from 'element-ui'
+const components = [Slider,Progress,Steps,Step,Select,Option]
 const element = {
   install: function (Vue) {
     Vue.use(Slider)
+    // Vue.use(Slider)
+	components.forEach(component => {
+	  Vue.use(component)
+	})
   }
 }
 export default element

i18n/lang/en.json

@@ -244,6 +244,7 @@
 		"d11": "Phone Number",
 		"d12": "Please enter your phone number",
 		"d13": "Please select",
+		"d14": "Please select an area code.",
 		"SelectAreaCode": "Select Area Code"
 	},
 	"exchange": {

i18n/lang/zh-TW.json

@@ -243,6 +243,7 @@
 		"d11": "電話號碼",
 		"d12": "請輸入手機號",
 		"d13": "請選擇",
+		"d14": "請選擇區號",
 		"SelectAreaCode": "選擇區號"
 	},
 	"exchange": {

main.js

@@ -3,9 +3,9 @@ import App from './App.vue'
 import '@/plugins'
 import i18n from "./i18n";
 import store from './store'
-// import 'element-ui/lib/theme-chalk/index.css'
-// import element from './element/index'
-// Vue.use(element)
+import 'element-ui/lib/theme-chalk/index.css'
+import element from './element/index'
+Vue.use(element)
 //把vuex定义成全局组件
 Vue.prototype.$store = store
 Vue.prototype._i18n = i18n;

pages/reg/index.vue

@@ -56,6 +56,22 @@
             </view>
           </template>
         </view>
+		
+		<view class="form-item m-b-md p-b-xs">
+			<view>
+			  <view class="label m-b-xs">{{$t('reg.a2')}}</view>
+			  <view class="d-flex align-center login_box3">
+				  <view style="width: 30%;margin-right: 20rpx;">
+					<el-select v-model="form.country_id" filterable :placeholder="$t('auth.SelectAreaCode')" no-match-text="No matching data">
+					    <el-option v-for="(item, index) in countryList" :key="index" :value="`${item.id}`" :label="`+${item.country_code} ${item.name}`"></el-option>
+					</el-select>
+				  </view>
+				  <v-input style="width: 380rpx;" v-model="form.phone" class="color-light" :placeholder="$t('reg.a3')">
+				  </v-input>
+			  </view>
+			</view>
+		</view>
+		
 		<!--图形验证码-->
 		<view class="form-item m-b-md p-b-xs" >
 			<view class="label m-b-xs black">{{$t('homeNewText.ee6')}}</view>
@@ -150,7 +166,9 @@
 </template>
 <script>
 import Member from "@/api/member";
+import serve from "@/api/serve/index";
 import app from "app.js";
+import { mapState, mapActions } from "vuex";
 import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
 
 export default {
@@ -159,14 +177,15 @@ export default {
       form: {
         type: 2,
         country_code: "",
-        country_id: 1,
+        country_id: "",
         account: "",
         code: "",
         password: "",
 		// withdrawal_psw:"",
         password_confirmation: "",
         invite_code: "",
-				gr_code: "",
+		gr_code: "",
+		phone:""
       },
 			captcha: '',
 			Graph_che:'',
@@ -189,6 +208,9 @@ export default {
    
   },
   computed: {
+	...mapState({
+		countryList: "countryList",
+	}),
   },
 	components:{tfVerifyImg},
   methods: {
@@ -214,12 +236,21 @@ export default {
 	    this.$toast(this.$t('reg.c7'));
 	    return;
 	  }
+	  if(!this.form.phone){
+	  	this.$toast(this.$t('auth.d12'));
+	  	return;
+	  }
+	  if(!this.form.country_id){
+	  	this.$toast(this.$t('auth.d14'));
+	  	return;
+	  }
 	  // if (!this.form.withdrawal_psw) {
 	  // 	this.$toast(this.$t('common.c14'));
 	  // 	return;
 	  // }
       this.form.type=this.form.type
-      this.form.country_code = this.country_code || 86;
+      // this.form.country_code = this.country_code || 86;
+      this.form.country_code = this.form.country_id || 86;
 
       Member.register(this.form).then((res) => {
  
@@ -293,7 +324,7 @@ export default {
 		
 		//注册完成后登录
 		login(){
-			let data={type: 2,account:this.form.account,password: this.form.password}
+			let data={type: 2,account:this.form.account,password: this.form.password,phone: this.form.phone,country_id:this.form.country_id}
 			Member.login(this.form)
 			  .then((res) => {
 					this.loginSuccess(res.data);
@@ -329,10 +360,19 @@ export default {
 				});
 				this.showVerify = false;
 				this.sendAAA = true;
-		}
+		},
+		...mapActions({
+		  setCountryList: "countryList",
+		}),
+		getCountry() {
+		  serve.get("/getCountryList").then((res) => {
+		    this.setCountryList(res.data);
+		  });
+		},
   },
   mounted() {
 		this.gett_gc_code();
+		this.getCountry();
   },
   onLoad(query){
     this.query = query