[完成] 绑定手机号页面UI

[优化] 全局$msg方法，增加promise回调

common/mixin.js

@@ -57,13 +57,23 @@ export default{
 			}
 		},
 		$msg(title = '', param = {}) {
-			if(!title) return;
-			uni.showToast({
-				title,
-				duration: param.duration || 1500,
-				mask: param.mask || true, // 默认应该加mask 禁止提示时操作
-				icon: param.icon || 'none'
-			});
+			return new Promise((resolve, reject) => {
+				if(!title){
+					reject();
+					return;
+				}
+				uni.showToast({
+					title,
+					duration: param.duration || 1500,
+					mask: param.mask || true, // 默认应该加mask 禁止提示时操作
+					icon: param.icon || 'none',
+					complete: result => {
+						setTimeout(() => {
+							resolve();
+						}, param.duration || 1500);
+					}
+				});
+			})
 		},
 		$url(url, options = {}){
 			this.$u.throttle(() => {

pages.json

@@ -276,6 +276,14 @@
 			"style": {
 				"navigationBarTitleText": "获取红线"
 			}
+		},
+		{
+			"path": "pages/my/bindPhone",
+			"style": {
+				"navigationBarTitleText": "绑定手机号",
+				"navigationBarBackgroundColor": "#FE3EA5",
+				"navigationBarTextStyle": "white"
+			}
 		}
 	],
 	"globalStyle": {

pages/my/bindPhone.vue

@@ -0,0 +1,160 @@
+<template>
+	<view>
+		<view class="pure_top"></view>
+		<view class="content">
+			<view class="list">
+				<input class="input" placeholder="输入手机号" v-model="phone" maxlength="11" />
+				<view class="clear" v-if="phone.length" @click="phone = ''">
+					<text class="lf-iconfont icon-shanchu"></text>
+				</view>
+			</view>
+			<view class="list">
+				<input class="input input-code" placeholder="输入验证码" v-model="code" />
+				<view class="code" :class="{'active-bg': is_code}" @click="getCode">
+					<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text>
+				</view>
+			</view>
+			<button class="confirm" hover-class="lf-opacity" @click="confirm">确认</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				phone: '',
+				code: '',
+				is_code: false,
+				timer: null,
+				num: 10,
+				click_button: false
+			}
+		},
+		onLoad(){
+			
+		},
+		onUnload(){
+			if(this.timer){
+				clearInterval(this.timer);
+				this.timer = null;
+			}
+		},
+		methods: {
+			getCode(){
+				if(this.is_code) return;
+				this.is_code = true;
+				if(this.timer){
+					clearInterval(this.timer);
+					this.timer = null;
+				}
+				console.log("测试重复点击", Math.random())
+				// TODO 在此发送网络请求
+				this.timer = setInterval(() => {
+					this.num--;
+					if(this.num <= 0){
+						clearInterval(this.timer);
+						this.timer = null;
+						this.num = 10;
+						this.is_code = false;
+					}
+				}, 1000);
+			},
+			confirm(){
+				if(this.click_button) return;
+				this.click_button = true;
+				this.$msg('确定').then(() => this.click_button = false);
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #F5F5F5;
+		overflow: hidden;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.pure_top {
+		width: 100%;
+		height: 210rpx;
+		position: relative;
+		z-index: 1;
+	}
+	.pure_top::after {
+		content: '';
+		width: 140%;
+		height: 210rpx;
+		position: absolute;
+		left: -20%;
+		top: 0;
+		z-index: -1;
+		border-radius: 0 0 55% 55%;
+		background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
+	}
+	
+	.content{
+		width: 686rpx;
+		height: max-content;
+		background-color: #FFFFFF;
+		position: fixed;
+		top: 100rpx;
+		left: calc(50% - 343rpx);
+		z-index: 3;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		padding: 60rpx;
+		.list{
+			height: 106rpx;
+			width: 100%;
+			border-bottom: 1rpx solid #e5e5e5;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			&:nth-child(2n){
+				margin-top: 30rpx;
+			}
+			.input{
+				width: 490rpx;
+				height: 80rpx;
+				font-size: 32rpx;
+			}
+			.input-code{
+				width: 360rpx;
+			}
+			.clear{
+				padding: 20rpx;
+			}
+			.code{
+				min-width: 154rpx;
+				max-width: 220rpx;
+				height: 43rpx;
+				padding: 0 4rpx;
+				background: linear-gradient(180deg, #FE3EA5 0%, #FE7251 100%);
+				border-radius: 5rpx;
+				font-size: 24rpx;
+				color: #FFFFFF;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+			.active-bg{
+				background: #adb5bd;
+			}
+		}
+		.confirm{
+			width: 100%;
+			height: 100rpx;
+			background-color: #E21196;
+			border-radius: 60rpx;
+			color: #FFFFFF;
+			font-size: 36rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-top: 100rpx;
+			margin-bottom: 20rpx;
+		}
+	}
+</style>

pages/my/index.vue

@@ -12,7 +12,7 @@
 						<view class="head-text">资料审核中</view>
 					</view>
 				</view>
-				<view class="lf-bg-white span-btn1" @click="$url('/pages/my/exclusiveMatch')">
+				<view class="lf-bg-white span-btn1" @click="$url('/pages/my/bindPhone')">
 					绑定手机号
 				</view>
 			</view>