修改注册手机号的翻译、区号的布局样式

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

@@ -395,7 +395,7 @@
 		"a0": "Mobile registration",
 		"a1": "Register Account",
 		"a2": "Mobile Phone",
-		"a3": "Please enter your mobile number",
+		"a3": "Enter your phone number",
 		"a4": "Email",
 		"a5": "Enter your email address",
 		"a6": "Email verification Code",
@@ -541,7 +541,8 @@
 		"a7": "Register Now",
 		"a8": "Mobile",
 		"a9": "mailbox",
-		"b0": "Done"
+		"b0": "Done",
+		"country": "Country code"
 	},
 	"contract": {
 		"a0": "Open Position",

i18n/lang/zh-TW.json

@@ -539,7 +539,8 @@
 		"a7": "立即註冊",
 		"a8": "手機",
 		"a9": "郵箱",
-		"b0": "完成"
+		"b0": "完成",
+		"country": "區號"
 	},
 	"contract": {
 		"a0": "開倉",

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

@@ -72,12 +72,19 @@
 		<view class="form-item border-b m-b-md p-b-xs">
 			<view>
 			  <view class="label m-b-xs">{{$t('reg.a2')}}</view>
-			  <v-input v-model="form.phone" class="color-light" :placeholder="$t('reg.a3')">
-			    <template #left>
-			      <v-country ref="country" style="width: 80rpx;height: 40rpx;border: 1px solid #ccc;text-align: center;line-height: 40rpx;"
-				  @country_code="country_code=$event" class="m-r-xs" v-model="form.country_id" />
-			    </template>
-			  </v-input>
+			  <view class="d-flex">
+				  <view style="width: 30%;margin-right: 20rpx;">
+					<el-select v-model="form.country_id" filterable :placeholder="$t('login.country')" 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')">
+				    <!-- <template #left>
+				      <v-country ref="country" style="width: 80rpx;height: 40rpx;border: 1px solid #ccc;text-align: center;line-height: 40rpx;"
+				  				  @country_code="country_code=$event" class="m-r-xs" v-model="form.country_id" />
+				    </template> -->
+				  </v-input>
+			  </view>
 			</view>
 		</view>
 		
@@ -174,8 +181,10 @@
 </template>
 <script>
 import Member from "@/api/member";
+import serve from "@/api/serve/index";
 import app from "app.js";
 import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
+import { mapState, mapActions } from "vuex";
 
 export default {
   data() {
@@ -183,7 +192,7 @@ export default {
       form: {
         type: 2,
         country_code: "",
-        country_id: 1,
+        country_id: "",
         account: "",
         code: "",
         password: "",
@@ -214,6 +223,9 @@ export default {
    
   },
   computed: {
+	  ...mapState({
+	    countryList: "countryList",
+	  }),
   },
 	components:{tfVerifyImg},
   methods: {
@@ -243,7 +255,7 @@ export default {
 	  	this.$toast(this.$t('common.c14'));
 	  	return;
 	  }
-	  if(!this.country_code||!this.form.phone){
+	  if(!this.form.country_code||!this.form.phone){
 		this.$toast(this.$t('common.phonenumber'));
 	  	return;
 	  }
@@ -345,24 +357,34 @@ export default {
       });
     },
 	
-		// 拼图滑块
-		changeSLider(){
+	// 拼图滑块
+	changeSLider(){
+		this.showVerify = true;
+	},
+	open(){
+			// console.log("open");
 			this.showVerify = true;
-		},
-		open(){
-				// console.log("open");
-				this.showVerify = true;
-		},
-		chenggong(){
-				uni.showToast({
-						title: this.$t('homeNewText.dd1')
-				});
-				this.showVerify = false;
-				this.sendAAA = true;
-		}
+	},
+	chenggong(){
+			uni.showToast({
+					title: this.$t('homeNewText.dd1')
+			});
+			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