feat: 初步完成登录页

pages.json

@@ -250,6 +250,13 @@
 					}
 				}
 			}
+		},
+		{
+			"path" : "pages/webview/webview",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

pages/public/components/checkArea.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="checkModal">
+		<view class="topModal" @click.stop="closeModal"></view>
+		<view class="checkArea" >
+			<view class="checkBox">
+				<view class="checkTitle">
+					{{'选择国家地/地区'}}
+				</view>
+				<scroll-view scroll-y="true" class="checkList">
+					<view v-for="item in data.areaList" :key="item.countryCode" @click="checked(item)" class="checkItem">
+						<text>{{item.countryName}}</text>
+						<text>{{item.countryCode}}</text>
+					</view>
+				</scroll-view>
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'CheckArea',
+		props: {
+			data: {
+				default: () => {},
+				type: Object,
+			}
+		},
+		methods: {
+			closeModal() {
+				this.$emit('closeModal', 'area');
+			},
+			checked(item) {
+				this.$emit('checkedCode', item);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.checkModal {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100vh;
+		width: 100vw;
+		z-index: 9;
+		background-color: rgba(0, 0, 0, 0.4);
+		
+		.topModal {
+			height: 100vh;
+			width: 100vw;
+		}
+
+		.checkArea {
+			width: 100vw;
+			position: absolute;
+			top: 34vh;
+			left: 0;
+			animation: fade-in 0.6s;
+
+			.checkBox {
+				width: 100vw;
+				height: 66vh;
+				background: #fff;
+				border-radius: 48upx 48upx 0 0;
+				display: flex;
+				flex-direction: column;
+				
+				
+				.checkTitle {
+					height: 96upx;
+					line-height: 96upx;
+					text-align: center;
+					font-size: 36upx;
+				}
+				.checkList {
+					height: calc(66vh - 96upx);
+					padding-bottom: 48rpx;
+					.checkItem {
+						height: 48upx;
+						line-height: 48upx;
+						font-size: 32upx;
+						display: flex;
+						justify-content: space-between;
+						padding: 24upx;
+						box-sizing: content-box;
+					}
+				}
+			}
+		}
+	}
+	@keyframes fade-in {
+	  0% {
+	    top: 100vh
+	  }
+	  100% {
+	    top:34vh
+	  }
+	}
+</style>

pages/public/login.vue

@@ -12,8 +12,8 @@
 				<view class="tips_text">{{tips.text}}</view>
 			</view>
 			<view class="input_box">
-				<view class="area_select">
+				<view class="area_select" @click="isShowAreaCheck = true">
-					<view class="area">{{area}}</view>
+					<view class="area">{{checkData.checkedCode}}</view>
 					<image class="icon_down" src="@/static/icons/icon_down.png"></image>
 				</view>
 				<input type="number" maxlength="11" v-model="mobile" placeholder="输入手机号" />
@@ -23,7 +23,9 @@
 				@click="getCode">获取短信验证码</button>
 			<view class="checkbox_box">
 				<label class="radio" @click="isRead = !isRead">
-					<radio value="" :checked="isRead" />已阅读并同意《用户协议》、《隐私政策》
+					<radio value="" :checked="isRead" />已阅读并同意 <text class="textBtn"
+						@click.stop="toRead(0)">《用户协议》</text>、
+					<text class="textBtn" @click.stop="toRead(1)">《隐私政策》</text>
 				</label>
 			</view>
 			<view class="login_icon">
@@ -33,6 +35,7 @@
 		</view>
 		<check-code :data="showData" @closeModal="closeModal" @login="doLogin" @regetCode="regetCode" v-if="isShowCode"
 			class="modal-box" />
+		<check-area :data="checkData" @closeModal="closeModal" @checkedCode="checkedCode" v-if="isShowAreaCheck" />
 	</view>
 </template>
 
@@ -45,9 +48,11 @@
 		sendsms,
 		appLogin,
 		wxIdLogin,
-		memberInfo
+		memberInfo,
+		supportedCountryCode,
 	} from '@/api/member.js';
 	import CheckCode from './components/checkCode.vue'
+	import CheckArea from './components/checkArea.vue'
 	import rule from '@/utils/rule.js'
 	export default {
 		data() {
@@ -75,11 +80,18 @@
 					deviceId: '',
 					mobileCheckCode: '',
 					deviceBrand: ''
+				},
+				// 是否显示区号选择页面
+				isShowAreaCheck: false,
+				checkData: {
+					areaList: [],
+					checkedCode: '+86'
 				}
 			}
 		},
 		components: {
-			CheckCode
+			CheckCode,
+			CheckArea
 		},
 		computed: {
 			...mapState(['theme', 'deviceId', 'deviceBrand']),
@@ -87,7 +99,9 @@
 				return this.mobile.length === 11 && !this.isLogining
 			}
 		},
-		onLoad() {},
+		onLoad() {
+			this.getCountryCode()
+		},
 		methods: {
 			...mapMutations(['login']),
 			navBack() {
@@ -105,9 +119,13 @@
 				this.regetCode()
 			},
 			closeModal(type) {
+				console.log('close', type)
 				if (type === 'code') {
 					this.isShowCode = false
 				}
+				if (type === 'area') {
+					this.isShowAreaCheck = false
+				}
 			},
 			async doLogin(data) {
 				uni.showLoading({
@@ -116,9 +134,9 @@
 				})
 				appLogin(data)
 					.then(res => {
-						if(res.code === 200 &&  res.data) {
+						if (res.code === 200 && res.data) {
-							uni.setStorageSync('token',res.data);
+							uni.setStorageSync('token', res.data);
-							memberInfo().then(response=>{
+							memberInfo().then(response => {
 								this.login(response.data);
 								uni.navigateBack();
 							});
@@ -139,6 +157,8 @@
 			},
 			regetCode() {
 				this.isLogining = true
+				this.isShowCode = true
+				return
 				sendsms({
 						mobile: this.mobile,
 						deviceId: this.deviceId
@@ -166,7 +186,43 @@
 					.finally(() => {
 						this.isLogining = false
 					})
-
+			},
+			toRead(index) {
+				const item = [{
+						url: 'https://m.indie.cn/agreement/registrationAgreement.html',
+						webviewStyles: {
+							progress: true
+						}
+					},
+					{
+						url: 'https://m.indie.cn/agreement/privacyPolicy.html',
+						webviewStyles: {
+							progress: true
+						}
+					}
+				]
+				uni.navigateTo({
+					url: '/pages/webview/webview?item=' + encodeURIComponent(JSON.stringify(item[index]))
+				})
+			},
+			getCountryCode() {
+				supportedCountryCode()
+				.then(res => {
+					console.log(res)
+					if(res.code === 200 && res.data) {
+						this.checkData = {
+							areaList: res.data,
+							checkedCode: '+86' 
+						}
+					}
+				})
+				.catch(err => {
+					console.log(err)
+				})
+			},
+			checkedCode(item) {
+				this.checkData.checkedCode = item.countryCode
+				this.isShowAreaCheck = false
 			}
 		},
 
@@ -201,10 +257,10 @@
 			font-size: 40upx;
 			color: $font-color-dark;
 			z-index: 9;
-			
+
 			image {
-				width: 40rpx;
+				width: 40upx;
-				height: 40rpx;
+				height: 40upx;
 			}
 		}
 
@@ -215,7 +271,7 @@
 			.tips {
 				width: 100%;
 				height: 136upx;
-				padding: 0 48rpx;
+				padding: 0 48upx;
 
 				.tips_title {
 					font-size: 64upx;
@@ -288,6 +344,16 @@
 
 				.radio {
 					font-size: 24upx;
+					vertical-align: middle;
+
+					.textBtn {
+						display: inline-block;
+						height: 24upx;
+						line-height: 24upx;
+						font-size: 24upx;
+						margin: 0;
+						padding: 0;
+					}
 				}
 
 				radio {

pages/webview/webview.vue

@@ -0,0 +1,28 @@
+<template>
+	<web-view :src="url" :webview-styles="webviewStyles"></web-view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				url: '',
+				webviewStyles: {}
+
+			};
+		},
+		onLoad: function(option) {
+			const item = JSON.parse(decodeURIComponent(option.item));
+			const {
+				url,
+				webviewStyles
+			} = item
+			this.url = url
+			this.webviewStyles = webviewStyles ? webviewStyles : {}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>