用户体系优化V1.0.0

components/uni-tag/uni-tag.vue

@@ -0,0 +1,210 @@
+<template>
+	<view :class="[
+      'uni-tag--' + type,
+      disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
+      inverted === true || inverted === 'true' ? type + '-uni-tag--inverted' : '',
+      circle === true || circle === 'true' ? 'uni-tag--circle' : '',
+      mark === true || mark === 'true' ? 'uni-tag--mark' : '',
+      'uni-tag--' + size
+    ]" @click="onClick()" class="uni-tag" v-if="text">
+		<text :class="[type === 'default' ? 'uni-tag--default':'uni-tag-text',inverted === true || inverted === 'true' ? 'uni-tag-text--'+type : '',size === 'small' ? 'uni-tag-text--small':'' ]">{{ text }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "UniTag",
+		props: {
+			type: {
+				// 标签类型default、primary、success、warning、error、royal
+				type: String,
+				default: "default"
+			},
+			size: {
+				// 标签大小 normal, small
+				type: String,
+				default: "normal"
+			},
+			// 标签内容
+			text: {
+				type: String,
+				default: ""
+			},
+			disabled: {
+				// 是否为禁用状态
+				type: [String, Boolean],
+				defalut: false
+			},
+			inverted: {
+				// 是否为空心
+				type: [String, Boolean],
+				defalut: false
+			},
+			circle: {
+				// 是否为圆角样式
+				type: [String, Boolean],
+				defalut: false
+			},
+			mark: {
+				// 是否为标记样式
+				type: [String, Boolean],
+				defalut: false
+			}
+		},
+		methods: {
+			onClick() {
+				if (this.disabled === true || this.disabled === "true") {
+					return;
+				}
+				this.$emit("click");
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.uni-tag {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding: 0px 16px;
+		height: 30px;
+		line-height: 30px;
+		justify-content: center;
+		color: #333;
+		border-radius: 6rpx;
+		background-color: #f8f8f8;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #f8f8f8;
+	}
+
+	.uni-tag--circle {
+		border-radius: 15px;
+	}
+
+	.uni-tag--mark {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+		border-top-right-radius: 15px;
+		border-bottom-right-radius: 15px;
+	}
+
+	.uni-tag--disabled {
+		opacity: 0.5;
+	}
+
+	.uni-tag--small {
+		height: 20px;
+		padding: 0px 8px;
+		line-height: 20px;
+		font-size: 24rpx;
+	}
+
+	.uni-tag--default {
+		color: #333;
+		font-size: 28rpx;
+	}
+
+	.uni-tag-text--small {
+		font-size: 24rpx !important;
+	}
+
+	.uni-tag-text {
+		color: #fff;
+		font-size: 28rpx;
+	}
+
+	.uni-tag--default {
+		color: #333;
+		font-size: 28rpx;
+	}
+
+	.uni-tag-text--primary {
+		color: #007aff !important;
+	}
+
+	.uni-tag-text--success {
+		color: #4cd964 !important;
+	}
+
+	.uni-tag-text--warning {
+		color: #f0ad4e !important;
+	}
+
+	.uni-tag-text--error {
+		color: #dd524d !important;
+	}
+
+	.uni-tag--primary {
+		color: #fff;
+		background-color: #007aff;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #007aff;
+	}
+
+	.primary-uni-tag--inverted {
+		color: #007aff;
+		background-color: #ffffff;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #007aff;
+	}
+
+	.uni-tag--success {
+		color: #fff;
+		background-color: #4cd964;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #4cd964;
+	}
+
+	.success-uni-tag--inverted {
+		color: #4cd964;
+		background-color: #ffffff;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #4cd964;
+	}
+
+	.uni-tag--warning {
+		color: #fff;
+		background-color: #f0ad4e;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #f0ad4e;
+	}
+
+	.warning-uni-tag--inverted {
+		color: #f0ad4e;
+		background-color: #ffffff;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #f0ad4e;
+	}
+
+	.uni-tag--error {
+		color: #fff;
+		background-color: #dd524d;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #dd524d;
+	}
+
+	.error-uni-tag--inverted {
+		color: #dd524d;
+		background-color: #ffffff;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #dd524d;
+	}
+
+	.uni-tag--inverted {
+		color: #333;
+		background-color: #ffffff;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: #f8f8f8;
+	}
+</style>

pages/user-module/register.vue

@@ -157,6 +157,62 @@
 					</view>
 				</view>
 			</view>
+			<view class="register-row clearfix">
+				<view class="register-from picker">
+					<view class="label">机构类型:</view>
+					<picker @change="bindPickerChange" :value="index" :range="organizationTypeList" range-key="name">
+						<view class="row-input">{{organizationTypeList[typtIndex].name}}</view>
+					</picker>
+					<text class="iconfont icon-xiayibu"></text>
+				</view>
+			</view>
+			<view class="register-row clearfix">
+				<view class="register-from radio">
+					<radio-group @change="radioChange">
+						<label class="row-input" v-for="(item, index) in beautyList" :key="item.value">
+							<radio class="row-radio" :value="item.value" :checked="index === current" color="#E15616"/>
+							<view class="row-text">{{item.name}}</view>
+						</label>
+					</radio-group>
+				</view>
+			</view>
+			<view class="register-row clearfix">
+				<view class="register-picture">
+					<view class="label zz">医疗执业许可证:</view>
+					<view class="upload-picture">
+						<view class="upload-none" v-if="uploadMedicalImage === ''" @click="chooseMedicalImage"><text class="iconfont icon-jiahao"></text></view>
+						<view class="upload-image" v-else>
+							<image :src="uploadMedicalImage" mode=""  @click="viewMedicalImage"></image>
+							<view class="upload-del" @click="delMedicalImage">
+								<text class='iconfont icon-shanchu1'></text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="register-row clearfix">
+				<view class="register-from">
+					<view class="label">科室:</view>
+					<input class="row-input keshi" type="text" v-model="clubContact" placeholder="请填写经营的科室，至少三个，用逗号隔开" maxlength="16"/>
+				</view>
+			</view>
+			<view class="register-row clearfix">
+				<view class="register-from radio">
+					<view class="label">主营内容:</view>
+					<checkbox-group class="content-class" @change="chooseMaleLike">
+						<label class="item" v-for="(item, index) in mentuzCampList" :key="index" :class="{on: item.checked}">
+						   <checkbox :value="item.value"></checkbox>
+						   <text class="item-text">{{item.name}}</text>
+						</label>
+				    </checkbox-group>
+					<checkbox-group class="content-class" @change="chooseMaleLikes">
+						<label class="item" v-for="(item, index) in medicaCampList" :key="index" :class="{on: item.checked}">
+						   <checkbox :value="item.value"></checkbox>
+						   <text class="item-text">{{item.name}}</text>
+						</label>
+				    </checkbox-group>
+				</view>	
+			</view>
 			<view class="register-fiexd clearfix">
 				<view class="register-agree">
 					<view class="agree-text"  @tap.stop="agreeCheck()">
@@ -164,7 +220,7 @@
 						我已阅读并同意<text>《机构协议》</text><text>《用户协议》</text>及<text>《隐私权政策》</text>
 					</view>
 				</view>
-				<view class="register-row">
+				<view class="register-row ">
 					<view class="register-btn sub">提交审核</view>
 				</view>
 				<view class="register-row clearfix">
@@ -184,11 +240,13 @@
 <script>
 	import { mapMutations } from 'vuex';
 	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
+	import uniTag from '@/components/uni-tag/uni-tag.vue';
 	import authorize from '@/common/config/authorize.js' 
 	import URLCONFIG from '@/common/config/config.js' 
 	var self;
 	export default{
 		components:{
+			uniTag,
 			mpvueCityPicker
 		},
 		data() {
@@ -199,6 +257,26 @@
 				isCheck:false,		//是否全选
 				uploadBusinessImage:'',
 				uploadMentuzImage:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1431188283,1203112303&fm=26&gp=0.jpg',
+				uploadMedicalImage:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1431188283,1203112303&fm=26&gp=0.jpg',
+				isVisible:false,
+				organizationTypeList:[
+					{name:'医美',type:1},
+					{name:'生美',type:1}
+				],
+				beautyList:[{name:'诊所'},{name:'门诊'},{name:'医院'}],
+				mentuzCampList:[{value:'1',name:'整形'},{value:'2',name:'轻医美'},{value:'3',name:'皮肤科'}],
+				medicaCampList:[
+					{value:'1',name:'美容'},
+					{value:'2',name:'美体'},
+					{value:'3',name:'美发'},
+					{value:'4',name:'皮肤管理'},
+					{value:'5',name:'光电'},
+					{value:'6',name:'综合类'},
+					{value:'7',name:'中医养生'},
+					{value:'8',name:'spa'}
+				],
+				typtIndex:0,
+				organizationType:'请选择机构类型',
 				invitationCode:'',  //获取用户登录的邀请码
 				isToast:false,		//控制显示未输入邀请码提示	
 				isUserInfo:false,	//控制显示授权弹窗
@@ -271,6 +349,7 @@
 					}
 				})
 			},
+			
 			// 三级联动选择
 			showMulLinkageThreePicker() {
 				this.isShowInput = true
@@ -281,6 +360,42 @@
 				this.addressData.address = e.name;
 				this.addressData.townID = e.cityCode;	
 			},	
+			bindPickerChange(e) {
+				console.log('picker发送选择改变，携带值为：' + e.target.value)
+				this.typtIndex = e.target.value
+			},
+			radioChange(evt) {
+				for (let i = 0; i < this.beautyList.length; i++) {
+					if (this.beautyList[i].value === evt.target.value) {
+						this.current = i;
+						break;
+					}
+				}
+			},
+			chooseMaleLike(e){
+				let items = this.mentuzCampList
+				let	values = e.detail.value
+				for (var i = 0, lenI = items.length; i < lenI; ++i) {
+					const item = items[i]
+					if(values.indexOf(item.value) >= 0){
+						this.$set(item,'checked',true)
+					}else{
+						this.$set(item,'checked',false)
+					}
+				}
+			},
+			chooseMaleLikes(e){
+				let items = this.medicaCampList
+				let	values = e.detail.value
+				for (var i = 0, lenI = items.length; i < lenI; ++i) {
+					const item = items[i]
+					if(values.indexOf(item.value) >= 0){
+						this.$set(item,'checked',true)
+					}else{
+						this.$set(item,'checked',false)
+					}
+				}
+			},
 			onTextareaInput(e){
 			   this.addressData.addressDetail = e.detail.value;
 			   // console.log(this.addressData.addressDetail)
@@ -302,7 +417,7 @@
 							},
 							success: function (data) {
 								console.log(data.data);
-								this.uploadBusinessImage = res.tempFilePaths
+								self.uploadBusinessImage = res.tempFilePaths
 							},
 							error : function(e){
 								 console.log(e);
@@ -329,7 +444,33 @@
 							},
 							success: function (res) {
 								console.log(res.data);
-								this.uploadMentuzImage = res.data
+								self.uploadMentuzImage = res.data
+							},
+							error : function(e){
+								 console.log(e);
+							}
+						})
+					}
+				});
+			},
+			chooseMedicalImage() {
+				let self = this;
+				uni.chooseImage({
+					count: 1, //默认1
+					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album','camera'], //从相册选择
+					success: (res) => {
+						const tempFilePaths = res.tempFilePaths;
+						const uploadTask = uni.uploadFile({
+							url : 'https://mall-b.caimei365.com/formData/MultiPictareaddData',
+							filePath: tempFilePaths[0],
+							name: 'file',
+							formData: {
+								'user': 'test'
+							},
+							success: function (res) {
+								console.log(res.data);
+								self.uploadMedicalImage = res.data
 							},
 							error : function(e){
 								 console.log(e);
@@ -352,11 +493,21 @@
 					current: e.currentTarget.dataset.url
 				});
 			},
+			viewMedicalImage(e) {
+				let self = this
+				uni.previewImage({
+					urls: self.uploadMedicalImage,
+					current: e.currentTarget.dataset.url
+				});
+			},
 			delBusinessImage(){
 				this.uploadBusinessImage = ''
 			},
 			delMentuzImage(){
 				this.uploadMentuzImage = ''
+			},			
+			delMedicalImage(){
+				this.uploadMedicalImage = ''
 			},
 			agreeCheck() {
 				this.isCheck = !this.isCheck
@@ -428,6 +579,9 @@
 				font-size: $font-size-sm;
 				color: #FF0000;
 				margin-bottom: 40rpx;
+				.iconfont{
+					font-size: $font-size-sm;
+				}
 			}
 			.register-row{
 				width: 702rpx;
@@ -440,6 +594,7 @@
 					padding: 24rpx;
 					background: $sub-bg-color;
 					border-radius: 14rpx;
+					position: relative;
 					.label{
 						text-align: left;
 						font-size: $font-size-base;
@@ -454,9 +609,13 @@
 						color: $text-color;
 						line-height: 40rpx;
 						float: left;
+						height: 40rpx;
 						&.none{
 							color: #999999;
 						}
+						&.keshi{
+							width: 550rpx;
+						}
 					}
 					&.img-btn{
 						width: 220rpx;
@@ -535,9 +694,75 @@
 							}
 						}
 					}
+					&.picker{
+						padding: 0 24rpx;
+						width: 654rpx;
+						height: 88rpx;
+						line-height: 88rpx;
+						.label{
+							line-height: 88rpx;
+						}
+						.row-input{
+							width: 470rpx;
+							height: 88rpx;
+							line-height: 88rpx;
+							padding-left: 30rpx;
+						}
+					}
+					&.radio{
+						padding: 0 24rpx;
+						width: 654rpx;
+						height: auto;
+						background: #FFFFFF;
+						.row-input{
+							width: 100%;
+							height: 88rpx;
+							line-height: 88rpx;
+							padding-left: 0;
+						}
+						.row-radio{
+							float: left;
+						}
+						.row-text{
+							width: 100rpx;
+							text-align: center;
+							float: left;
+						}
+					}
+					.content-class {
+						width: 520rpx;
+						margin: 20rpx auto;
+						display: flex;
+						flex-flow: row wrap;
+						justify-content: space-between;
+						.item {
+						  width: 156rpx;
+						  height: 60rpx;
+						  font-size:$font-size-base;
+						  line-height: 60rpx;
+						  border-radius:10rpx;
+						  margin-bottom: 20rpx;
+						  text-align: center;
+						  box-sizing: border-box;
+						  border: 1rpx solid #EFEFEF;
+						  checkbox {
+							display: none;
+						  }
+						}
+						.on {
+						  border-color: $color-system;
+						  color:$color-system;
+						}
+					}
 				}
 				.icon-xiayibu{
-					float: right;
+					width: 88rpx;
+					height: 88rpx;
+					position: absolute;
+					right: 0;
+					top: 0;
+					line-height: 88rpx;
+					text-align: center;
 				}
 				&.text-textarea{
 					background: #FFFFFF;
@@ -564,11 +789,14 @@
 				margin: 30rpx 0 0 0;
 				.label{
 					float: left;
-					font-size: $font-size-base;
+					font-size: $font-size-lg;
 					color: $text-color;
 					line-height: 102rpx;
-					width: 120rpx;
+					width: 150rpx;
 					text-align: right;
+					&.zz{
+						width: 240rpx;
+					}
 				}
 				.upload-picture{
 					float: left;
@@ -634,9 +862,10 @@
 			.register-fiexd{
 				width: 100%;
 				height: auto;
-				// position: fixed;
-				// bottom: 0;
-				// left: 0;
+				position: fixed;
+				bottom: 0;
+				left: 0;
+				z-index: 9999;
 				background: #FFFFFF;
 				.register-agree{
 					display: flex;