feat: 提交

components/doctorInfoInput.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="input-wrapper">
+		<view class="ft32 left">{{label}}</view>
+		<view class="right">
+			<input v-if="type==='normal'" class="ft32 inputValue" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"/>
+			<view class="vertifyWrap" v-else-if="type==='vertify'">
+				<input class="ft32 inputValue" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"/>
+				<view class="ft28 button">发送验证码</view>
+			</view>
+			<slot v-else></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"doctorInfoInput",
+		data() {
+			return {
+				
+			};
+		},
+		props: {
+			label: {
+				type: String,
+				default: '个人照片'
+			},
+			type: {
+				type: String,
+				default: ''
+			},
+			value: {
+				type: String,
+				default: ""
+			},
+			holder: {
+				  type: String,
+				  default: ''
+			},
+		},
+		methods: {
+		  handleBlur(e) {
+				var value = e.detail.value
+				var res = this.check(value);
+				if(!res){
+					this.$emit('blurEvent', value, false)
+					return
+				}
+				this.$emit('blurEvent', value, true)
+		  },
+			handleInput(e){
+				if(!this.errormsg) return;
+				var value = e.detail.value
+				var res = this.check(value);
+				if(!res){
+					this.$emit('blurEvent', value, false)
+					return
+				}
+				this.$emit('blurEvent', value, true)
+			},
+		}
+	}
+</script>
+
+<style>
+.input-wrapper{
+	padding: 40rpx 12rpx;
+	border-bottom:2rpx solid rgba(151,151,151,0.15);;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	
+	&:last-child {
+		border: none;
+	}
+	.left {
+		font-weight: 500;
+		color: #000000;
+		line-height: 44rpx;
+		letter-spacing: 2rpx;
+		text-wrap: nowrap;
+	}
+	.right {
+		.inputValue {
+			text-align: right;
+		}
+		.vertifyWrap {
+			display: flex;
+			align-items: center;
+			.button {
+				color: #55C483;
+				line-height: 70rpx;
+				text-align: center;
+				
+				width: 192rpx;
+				height: 70rpx;
+				background: #EBFFF1;
+				border-radius: 8rpx;
+				margin-left: 24rpx;
+			}
+		}
+	}
+}
+</style>

components/doctorInfoTextarea.vue

@@ -0,0 +1,55 @@
+<template>
+	<view class="textarea-wrapper">
+		<view class="ft32 title">{{title}}</view>
+		<textarea class="content" :auto-height="true" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"></textarea>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"doctorInfoTextarea",
+		data() {
+			return {
+				
+			};
+		},
+		props: {
+			title: {
+				type: String,
+				default: '一句话介绍'
+			},
+			value: {
+				type: String,
+				default: ''
+			},
+			holder: {
+				type: String,
+				default: '14个字介绍自己亮点'
+			}
+		},
+		methods: {
+			handleBlur() {},
+			handleInput() {}
+		}
+	}
+</script>
+
+<style>
+.textarea-wrapper {
+	.title{
+		font-weight: 500;
+		color: #222222;
+		line-height: 44px;
+		letter-spacing: 2px;
+	}
+	.content {
+		width:100%;
+		height: 100rpx;
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		border: 2rpx solid #E6E6E6;
+		padding: 28rpx 26rpx;
+		box-sizing: border-box;
+	}
+}
+</style>

pages.json

@@ -50,6 +50,14 @@
         	"path" : "pages/mine/mine",
         	"style" : 
         	{
+        		"navigationBarTitleText" : "我的",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/doctorInfo/doctorInfo",
+        	"style" : 
+        	{
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}

pages/doctorInfo/doctorInfo.vue

@@ -0,0 +1,79 @@
+<template>
+	<view class="doctor-info-page btPadding">
+		<view class="basic-wrapper">
+			<input-box label="个人照片">
+				<view v-slot class="upload">
+					<view class="picture"></view>
+					<view class="ft22 button">点击上传照片</view>
+				</view>
+			</input-box>
+			<input-box label="医生姓名" type="normal" holder="请填写本人姓名"></input-box>
+			<input-box label="手机号" type="normal" holder="请填写手机号"></input-box>
+			<input-box label="验证码" type="vertify" holder="填写验证码"></input-box>
+		</view>
+		<view class="introduce-wrapper">
+			<textarea-box></textarea-box>
+		</view>
+	</view>
+</template>
+
+<script>
+	import InputBox from '@/components/doctorInfoInput.vue';
+	import TextareaBox from '@/components/doctorInfoTextarea.vue'
+	
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		components:{
+			InputBox,
+			TextareaBox
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+.doctor-info-page {
+	padding: 20rpx 17rpx;
+	.basic-wrapper {
+		padding: 0 12px;
+		background-color: rgba(255, 255, 255, 1);
+		box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.03);
+		border-radius: 0rpx 0rpx 8rpx 8rpx;
+		.upload {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			.picture {
+				width: 160rpx;
+				height: 160rpx;
+				background: #F8F8F8;
+				border-radius: 12rpx;
+			}
+			.button {
+				color: #FFFFFF;
+				
+				width: 160rpx;
+				height: 44rpx;
+				text-align: center;
+				line-height: 44rpx;
+				background: rgba(0,0,0,0.28);
+				border-radius: 12rpx;
+			}
+		}
+	}
+	.introduce-wrapper {
+		margin: 20px auto 0;
+		padding: 0 36px;
+		background-color: rgba(255, 255, 255, 1);
+		box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.03);
+		border-radius: 0rpx 0rpx 8rpx 8rpx;
+	}
+}
+</style>