[完成] 添加微信号页面UI

pages.json

@@ -284,6 +284,14 @@
 				"navigationBarBackgroundColor": "#FE3EA5",
 				"navigationBarTextStyle": "white"
 			}
+		},
+		{
+			"path": "pages/my/addWechatNumber",
+			"style": {
+				"navigationBarTitleText": "添加微信号",
+				"navigationBarBackgroundColor": "#FE3EA5",
+				"navigationBarTextStyle": "white"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -61,9 +61,11 @@
 			}
 		},
 		onLoad(){
+			// #ifdef H5
 			this.href_str = JSON.stringify(location.href);
 			let options = this.strToObj();
 			console.log("options", options)
+			// #endif
 		},
 		methods: {
 			strToObj(){

pages/my/addWechatNumber.vue

@@ -0,0 +1,138 @@
+<template>
+	<view>
+		<view class="head">
+			<image class="img" src="../../static/images/add_wechat.png"></image>
+		</view>
+		<view class="content">
+			<view class="title">添加微信号</view>
+			<view class="desc">请输入正确的微信号，以便客服人员能准确的联系到你哟～</view>
+			<view class="input-box">
+				<input v-model="wechat_num" 
+					:adjust-position="false" 
+					:auto-blur="true" 
+					@focus="inputFocus"
+					@blur="inputBlur"
+					placeholder="请输入微信号" />
+				<view class="clear" v-if="wechat_num.length" @click="wechat_num = ''">
+					<text class="lf-iconfont icon-shanchu"></text>
+				</view>
+			</view>
+			<button class="confirm" hover-class="lf-opacity" @click="confirm">确认</button>
+		</view>
+		<view class="hide-view" :style="is_focus ? 'height: 540rpx' : 'height: 40rpx'"></view>
+	</view>
+</template>
+
+<script>
+	let time = null;
+	export default {
+		data(){
+			return {
+				wechat_num: '',
+				is_focus: false,
+				button_click: false
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			inputFocus(){
+				time = setTimeout(() => {
+					this.is_focus = true;
+				}, 0); // 给blur事件留出时间
+				setTimeout(() => {
+					uni.pageScrollTo({
+						scrollTop: 190,
+						duration: 100
+					})
+				}, 200);
+			},
+			inputBlur(){
+				time = setTimeout(() => {
+					this.is_focus = false;
+				}, 0); // 给click事件留出时间
+			},
+			confirm(){
+				this.$msg('确定')
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		width: 100vw;
+		height: 100%;
+		/* overflow-x: hidden; */
+		/* background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%); */
+		background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.head{
+		width: 100vw;
+		height: max-content;
+		display: flex;
+		justify-content: center;
+		padding-top: 80rpx;
+		.img{
+			width: 661rpx;
+			height: 620rpx;
+		}
+	}
+	
+	.content{
+		width: 630rpx;
+		height: 572rpx;
+		background: #FFFFFF;
+		border-radius: 60rpx;
+		position: relative;
+		z-index: 2;
+		margin: 0 auto;
+		margin-top: -150rpx;
+		box-sizing: border-box;
+		padding: 60rpx;
+		.title{
+			text-align: center;
+			font-weight: bold;
+			font-size: 32rpx;
+			color: #222222;
+		}
+		.desc{
+			font-size: 24rpx;
+			margin-top: 20rpx;
+			color: #999999;
+		}
+		.input-box{
+			margin-top: 60rpx;
+			border-bottom: 1rpx solid #e5e5e5;
+			width: 100%;
+			height: 80rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			& > input{
+				width: 430rpx;
+				height: 80rpx;
+				font-size: 28rpx;
+			}
+			.clear{
+				padding: 20rpx;
+			}
+		}
+		.confirm{
+			width: 100%;
+			height: 100rpx;
+			background: #E21196;
+			border-radius: 60rpx;
+			margin-top: 80rpx;
+			color: #FFFFFF;
+			line-height: 100rpx;
+		}
+	}
+	
+	.hide-view{
+		background-color: #fe7054;
+	}
+</style>