功能实现

components/alert/pointAuth.vue

@@ -0,0 +1,52 @@
+<template>
+	<u-popup :custom-style="popupStyle" class="auth-point" v-model="show" mode="center" width="80%" border-radius="18" >
+		<image class="auth-bg" mode="aspectFill" src="../../static/poster/bg_shouyetc.png">
+			<view class="auth-msg">
+			</view>
+			<u-button :custom-style="customStyle" shape="circle" >去授权</u-button>
+		</image>
+
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		name:"pointAuth",
+		data() {
+			return {
+				show: true,
+				popupStyle: {
+					'u-mode-center-box': 'red'
+				},
+				customStyle: {
+					color: 'white',
+					background: "#E72226",
+					width: '400rpx',
+					margin: '25rpx auto'
+				}
+			};
+		},
+
+		methods: {
+			showAuth(){
+				this.show = true;
+			},
+			hide(){
+				this.show = false;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.auth-bg{
+		width: 100%;
+		height: 266rpx;
+	}
+	.auth-msg{
+		padding: 40rpx 40rpx 20rpx 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: left;
+	}
+</style>

components/alert/smsAlert.vue

@@ -0,0 +1,104 @@
+<template>
+	<u-popup v-model="show" mode="center" width="80%" border-radius="15" :closeable="true">
+		<view class="sms-alert-container">
+			<view class="title">短信验证</view>
+			<view class="info-msg">验证码已发送至{{phoneInfo}}</view>
+			<view class="input-box">
+				<u-input class="input-content" type="number" maxlength="6" placeholder="请输入验证码" v-model="code"/>
+				<view class="code-button">
+					<view v-if="sending==true">
+						<u-loading mode="circle"></u-loading>
+					</view>
+					<view v-else-if="seconds > 0"><span class="text-red">{{seconds+'s '}} </span>可重发</view>
+					<view v-else><u-button @click="$u.debounce(sendMessage, 500)" plain size="mini">重新发送</u-button></view>
+				</view>
+			</view>
+			<u-button @click="$u.debounce(validateCode, 500)" :custom-style="customStyle" shape="circle" >确认</u-button>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		name:"smsAlert",
+		data() {
+			return {
+				show: true,
+				sending: true,
+				phone: '13126058204',
+				code: '',
+				seconds: -1,
+				customStyle: {
+					color: 'white',
+					background: "#E72226",
+					width: '400rpx'
+				}
+			};
+		},
+		computed:{
+			phoneInfo(){
+				return this.phone.substr(0,4)+"****"+this.phone.substr(7,this.phone.length);
+			}
+		},
+		methods: {
+			async showSmsAndSend(phone){
+				if(this.$u.test.mobile(phone)){
+					uni.showToast({
+					    title: '手机号码格式错误',
+					    icon: 'none'
+					});
+					return;
+				}
+				this.phone = phone;
+				await sendMessage();
+				this.show = true;
+			},
+			hideSms(){
+				this.show = false;
+			},
+			async sendMessage(){
+				this.sending = true;
+				//发送验证码
+				this.sending= false;
+			},
+			validateCode(){
+				this.$emit("validateResult",{result: true})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.sms-alert-container{
+		padding: 50rpx;
+		.title{
+			width: 100%;
+			text-align: center;
+			 padding:  0rpx 10rpx 50rpx 10rpx ;
+			font-weight: 500;
+			color: #353535;
+			letter-spacing: 2rpx;
+			font-size: 30rpx;
+		}
+		.info-msg{
+			padding: 5rpx 5rpx 20rpx 5rpx;
+			color: #353535;
+		}
+		.input-box{
+			display: flex;
+			align-items: center;
+			justify-content: left;
+			border: 1rpx solid #DDDDDD;
+			border-radius: 10rpx;
+			margin: 0 0 50rpx 0;
+			padding:  5rpx 5rpx 5rpx 30rpx;
+		}
+		.input-content{
+			width: 66%;
+		}
+		.code-button{
+			width: 34%;
+			border-left: 1rpx solid #DDDDDD;text-align: center;
+		}
+	}
+</style>

components/alert/votePopup.vue

@@ -0,0 +1,66 @@
+<template>
+	<u-popup v-model="show" mode="bottom" width="100%" height="750" border-radius="15" :closeable="true">
+		<view class="padding-30">
+			<view class="padding-top-20 text-bold text-xl">投票助力</view>
+			<view class="padding-20" style="color: #888888;font-size: 22rpx;" >{{}}</view>
+			<view>
+				
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		name:"votePopup",
+		data() {
+			return {
+				show: true,
+			};
+		},
+		
+		methods: {
+			showVote(){
+				this.show = true;
+			},
+			hideVote(){
+				this.show = false;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.sms-alert-container{
+		padding: 50rpx;
+		.title{
+			width: 100%;
+			text-align: center;
+			 padding:  0rpx 10rpx 50rpx 10rpx ;
+			font-weight: 500;
+			color: #353535;
+			letter-spacing: 2rpx;
+			font-size: 30rpx;
+		}
+		.info-msg{
+			padding: 5rpx 5rpx 20rpx 5rpx;
+			color: #353535;
+		}
+		.input-box{
+			display: flex;
+			align-items: center;
+			justify-content: left;
+			border: 1rpx solid #DDDDDD;
+			border-radius: 10rpx;
+			margin: 0 0 50rpx 0;
+			padding:  5rpx 5rpx 5rpx 30rpx;
+		}
+		.input-content{
+			width: 66%;
+		}
+		.code-button{
+			width: 34%;
+			border-left: 1rpx solid #DDDDDD;text-align: center;
+		}
+	}
+</style>