标签管理

components/mp-tree/code.js

@@ -0,0 +1,311 @@
+	import search from './components/search/index.vue'
+	export default {
+		name: "tree",
+		props: {
+			trees: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			//是否开启选中
+			isCheck: {
+				type: Boolean,
+				default: () => {
+					return false
+				}
+			},
+			parent:{
+				type: Boolean,
+				default: () => {
+					return false
+				}
+			},
+			max:{
+				type: Number,
+				default: () => {
+					return 2
+				}
+			},
+			checkList: {
+				type: Array,
+				default: () => []
+			},
+			parentList: {
+				type: Array,
+				default: () => []
+			},
+			searchIf: {
+				type: Boolean,
+				default: () => true
+			},
+			props: {
+				type: Object,
+				default: () => {
+					return {
+						label: 'name',
+						children: 'children',
+						multiple: false,
+						checkStrictly: false,//不关联
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				isre: false,
+				tree: this.trees,
+				newNum: 0,
+				oldNum: 0,
+				allData: this.trees,
+				tree_stack: [1],
+				parent_data: this.parentList||[],//选择父辈
+				searchResult: [],
+				tochild: false,
+				newCheckList: this.checkList,
+				scrollLeft: 999,
+				nodePathArray: []
+			}
+		},
+		components: {
+			search
+		},
+		mounted() {
+			if(this.props.multiple&&this.props.checkStrictly){
+				if(this.newCheckList.length!=0){
+					 this.checkAllChoose();
+					 return
+				}
+				for(let i = 0; i<this.tree.length;i++){
+					this.$set(this.tree[i],'bx',0)
+					this.$set(this.tree[i],'qx',0)
+				}
+			}
+			if(!this.props.multiple&&this.newCheckList.length>0) {
+				this.getNodeRoute(this.allData,this.newCheckList[0].id)
+				let arr = this.nodePathArray.reverse()
+				if(arr.length == 0)return
+				this.tree_stack = this.tree_stack.concat(arr);
+				this.tree = this.tree_stack[this.tree_stack.length-1].children;
+			}
+		},
+		methods: {
+			//多选
+			async checkboxChange(item, index, bx, qx) {
+				var that = this;
+				if(!this.props.multiple) return;
+				let findIdex = that.newCheckList.findIndex(e=>{return item.id==e.id});
+				if (findIdex>-1) { //反选
+					if (that.props.checkStrictly) {//关联子级
+						if (item.hasChildren) {//用户
+							that.newCheckList.splice(findIdex,1) 
+						} else {//非用户，取消所有下一级
+							that.getIdBydelete(item.children)
+						}
+					} else {
+						that.newCheckList.splice(findIdex,1) 
+					}
+				} else { //选中
+					if (!item.hasChildren&&that.props.checkStrictly) {//选中下一级
+						if(qx||bx){//取消下级
+							await that.getIdBydelete(item.children);
+							item.qx = 0;item.bx = 0;
+						}
+						else{
+							item.qx = 1;item.bx = 0;
+							await that.chooseChild(item.children,item.id);
+						}
+						that.$forceUpdate()
+						return
+					}
+					// if(item.hasChildren&&this.props.checkStrictly) this.getNodeRoute(this.allData,item.id);
+					that.newCheckList.push({...item});
+				}
+			},
+			// 取消下一级的选中
+			getIdBydelete(arr) {
+				arr.forEach(e=>{
+					if(e.hasChildren){
+						for(var i = 0; i<this.newCheckList.length;i++){
+							if(e.id == this.newCheckList[i].id) {
+								this.newCheckList.splice(i,1)
+								break;
+							}
+						}
+					}
+					if(!e.hasChildren){
+						this.getIdBydelete(e.children)
+					}
+				})
+			},
+			//取消父级
+			// deleteParent(id){
+			// 	for(var i = 0; i<this.parent_data.length;i++){
+			// 		if(id == this.parent_data[i].id) {
+			// 			this.parent_data.splice(i,1)
+			// 			break;
+			// 		}
+			// 	}
+			// },
+			
+			// 关联下一级,选中
+			chooseChild(arr,pid) {
+				let that = this;
+				for (var i = 0, len = arr.length; i < len; i++) {
+					let item = arr[i];
+					if(item.hasChildren) {
+						that.newCheckList.push({...item,tree_stackId:pid})
+					}
+					if (!item.hasChildren) {
+						this.chooseChild(item.children,item.id)
+					}
+				}
+			},
+			
+			// (tree为目标树，targetId为目标节点id) 
+			 getNodeRoute(tree, targetId) {
+				for (let index = 0; index < tree.length; index++) {
+					if (tree[index].children) {
+						let endRecursiveLoop = this.getNodeRoute(tree[index].children, targetId)
+						if (endRecursiveLoop) {
+							this.nodePathArray.push(tree[index])
+							return true
+						}
+					}
+					if (tree[index].id === targetId) {
+						return true
+					}
+				}
+			},
+			
+			//单选
+			checkbox(item, index) {
+				var that = this;
+				that.newCheckList = []
+				that.newCheckList.push(that.tree[index])
+			},
+			//到下一级
+			 toChildren(item) {
+				if(item.hasChildren) return
+				var that = this;
+				this.tochild = true;
+				let children = that.props.children;
+				if (!item.hasChildren && item[children].length > 0) {
+					that.tree = item[children];
+					if (that.tree_stack[0].id == item.id) {
+					} else {
+						that.tree_stack.push(item);
+					}
+				}
+				this.$nextTick(() => {
+					this.scrollLeft += 200;
+				})
+				if(this.props.checkStrictly) this.checkAllChoose();
+				this.$forceUpdate()
+			},
+			//搜索
+			confirmSearch(val) {
+				this.searchResult = []
+				this.search(this.allData, val)
+				this.isre = true
+				this.tree_stack.splice(1, 6666)
+				uni.showLoading({
+					title: '正在查找'
+				})
+				setTimeout(() => {
+					this.tree = this.searchResult
+					uni.hideLoading()
+				}, 300)
+			},
+			search(data, keyword) {
+				var that = this
+				let children = that.props.children
+				for (var i = 0, len = data.length; i < len; i++) {
+					if (data[i].name.indexOf(keyword) >= 0) {
+						that.searchResult.push(data[i])
+					}
+					if (!data[i].hasChildren && data[i][children].length > 0) {
+						that.search(data[i][children], keyword)
+					}
+				}
+			},
+			
+			 checkAllChoose(){
+				 let o = false,t = true;
+				this.tree.forEach((e,i)=>{
+					console.log(e.hasChildren,"****");
+					if(!e.hasChildren){
+						e.qx = o;
+						e.bx = o;
+						let num2 = this.computAllNumber(e.children);
+						if(this.newNum!=0&&this.oldNum!=0){
+							if(this.newNum==this.oldNum) {
+								e.qx = t;e.bx = o;
+							}else{
+								e.qx = o;e.bx = t;
+							}
+						}
+						if(this.newNum!=0&&this.oldNum == 0){
+							this.$set(this.tree[i],'bx',o); this.$set(this.tree[i],'qx',o);
+						}
+						this.$forceUpdate()
+						this.newNum=0
+						this.oldNum=0
+					}
+				})
+			},
+
+			computAllNumber(arr) {
+				for(let j = 0; j<arr.length;j++){
+					var e = arr[j];
+					if(arr[j].hasChildren) {this.newNum ++;}
+					this.checkSum(e.id)
+					if(!e.hasChildren){
+						this.computAllNumber(e.children)
+					}
+				}
+			},
+			
+			checkSum(id){
+				for(let i = 0; i<this.newCheckList.length;i++){
+					if(id == this.newCheckList[i].id) {
+						this.oldNum++;
+						break
+					}
+				}
+			},
+			
+			//返回其它层
+			backTree(item, index) {
+				let that = this,max = this.max;
+				if (index == -1) {
+					that.tree = that.allData
+					that.tree_stack.splice(1, max)
+					that.isre = false
+					that.$refs.sea.clears()
+				} else if (index == -2) {
+					that.tree = that.searchResult
+					that.tree_stack.splice(1, max)
+				} else {
+					if (that.tree_stack.length - index > 2) {
+						that.tree_stack.forEach((item, i) => {
+							if (i > index) {
+								that.tree_stack.splice(i, max)
+							}
+						})
+					} else if (index == that.tree_stack.length - 1) {
+						
+					} else {
+						that.tree_stack.splice(that.tree_stack.length - 1, 1)
+					}
+					that.tree = item[that.props.children]
+				}
+				if(this.props.checkStrictly) this.checkAllChoose();
+				this.$forceUpdate()
+			},
+			backConfirm(){
+				this.$emit('sendValue',this.newCheckList,'back')
+			}
+
+		}
+	}

components/mp-tree/components/search/index.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="tmp-box">
+		<view class='filterBox'>
+			<view class='filter-input'>
+				<text style="color: #b8b8b8;"  class="iconfont icon-sousuo filterImg"/>
+				<input class="text" type='text' v-model="inputVal" confirm-type="搜索" @confirm='handleFllter' placeholder='搜索'></input>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				inputVal: "",
+
+			};
+		},
+		methods: {
+			handleFllter(e) {
+				// console.log(e.detail.value)
+				this.$emit("confirm", e.detail.value)
+			},
+			clears(){
+				console.log(this.inputVal)
+				this.inputVal=""
+				console.log('清除了内容')
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.filterBox {
+		padding: 15rpx 32rpx;
+		background-color: #fff;
+		.filter-input {
+			height: 80rpx;
+			background-color: #eeeff0;
+			border-radius: 40rpx;
+			display: flex;
+			align-items: center;
+			
+			padding-left: 40rpx;
+			.filterImg {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 20rpx;
+				margin-bottom: 5rpx;
+			}
+			.filterImgs {
+				width: 32rpx;
+				height: 32rpx;
+				
+			}
+			.text {
+				width: 84%;
+				background-color: #eeeff0;
+				font-size: 32rpx;
+				color: #000;
+			}
+		}
+	}
+	@import url("../../css/icon.css");
+</style>

components/mp-tree/css/icon.css

@@ -0,0 +1,342 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2009600 */
+  src: url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.woff2?t=1620633089023') format('woff2'),
+       url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.woff?t=1620633089023') format('woff'),
+       url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.ttf?t=1620633089023') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-banxuanzhongshousuo1-shi:before {
+  content: "\e682";
+}
+
+.icon-xuanzhong3:before {
+  content: "\e6bb";
+}
+
+.icon-weixuanzhong2:before {
+  content: "\e62e";
+}
+
+.icon-danxuanxuanzhong:before {
+  content: "\e631";
+}
+
+.icon-xuanzhong4:before {
+  content: "\e63e";
+}
+
+.icon-xuanzhong1:before {
+  content: "\e62d";
+}
+
+.icon-xuanzhong2:before {
+  content: "\e656";
+}
+
+.icon-selected:before {
+  content: "\e615";
+}
+
+.icon-weixuanzhong1:before {
+  content: "\e614";
+}
+
+.icon-xingzhuang6kaobei3-copy-copy:before {
+  content: "\e613";
+}
+
+.icon-radio-checked:before {
+  content: "\e63f";
+}
+
+.icon-huifu:before {
+  content: "\e619";
+}
+
+.icon-dizhi:before {
+  content: "\e64a";
+}
+
+.icon-kuaijiecaidan:before {
+  content: "\e60a";
+}
+
+.icon-z043:before {
+  content: "\e62f";
+}
+
+.icon-guanbi:before {
+  content: "\e607";
+}
+
+.icon-xuanze:before {
+  content: "\e623";
+}
+
+.icon-caidanzhaolinggan:before {
+  content: "\e616";
+}
+
+.icon-xitongshezhi:before {
+  content: "\e60c";
+}
+
+.icon-xitongshezhi1:before {
+  content: "\e633";
+}
+
+.icon-lunbo:before {
+  content: "\e692";
+}
+
+.icon-shuping:before {
+  content: "\e659";
+}
+
+.icon-tongzhi:before {
+  content: "\e641";
+}
+
+.icon-pinglunguanlishezhi:before {
+  content: "\e6ac";
+}
+
+.icon-icon:before {
+  content: "\e600";
+}
+
+.icon-liuyanguanli:before {
+  content: "\e61d";
+}
+
+.icon-xuanzhong:before {
+  content: "\e669";
+}
+
+.icon--:before {
+  content: "\e622";
+}
+
+.icon-tushu:before {
+  content: "\e604";
+}
+
+.icon-huishouzhan:before {
+  content: "\e61c";
+}
+
+.icon-yonghutouxiang:before {
+  content: "\e617";
+}
+
+.icon-liebiao:before {
+  content: "\e630";
+}
+
+.icon-fenlei:before {
+  content: "\e621";
+}
+
+.icon-tushu1:before {
+  content: "\e605";
+}
+
+.icon-tubiao-:before {
+  content: "\e620";
+}
+
+.icon-weixuanze:before {
+  content: "\e624";
+}
+
+.icon-tushujieyue:before {
+  content: "\e690";
+}
+
+.icon-lunbo1:before {
+  content: "\e6c5";
+}
+
+.icon-shanchu:before {
+  content: "\e67b";
+}
+
+.icon-lunbo2:before {
+  content: "\e61e";
+}
+
+.icon-huaban:before {
+  content: "\e663";
+}
+
+.icon-kehuan:before {
+  content: "\e608";
+}
+
+.icon-icon02:before {
+  content: "\e601";
+}
+
+.icon-huishouzhan1:before {
+  content: "\e612";
+}
+
+.icon-huishouzhan2:before {
+  content: "\e63d";
+}
+
+.icon-sousuo:before {
+  content: "\e62c";
+}
+
+.icon-xingzhuang:before {
+  content: "\e625";
+}
+
+.icon-lunbobankuai:before {
+  content: "\e61f";
+}
+
+.icon-shangchuan:before {
+  content: "\e602";
+}
+
+.icon-yonghu:before {
+  content: "\e761";
+}
+
+.icon-tongzhi1:before {
+  content: "\e603";
+}
+
+.icon-jingsong:before {
+  content: "\e65c";
+}
+
+.icon-fenlei1:before {
+  content: "\e6c6";
+}
+
+.icon-xieshupingicon:before {
+  content: "\e72d";
+}
+
+.icon-liuyan:before {
+  content: "\e626";
+}
+
+.icon-weixuanzhong:before {
+  content: "\e627";
+}
+
+.icon-youxiang:before {
+  content: "\e646";
+}
+
+.icon-lunboguanggao:before {
+  content: "\e6b3";
+}
+
+.icon-xuanze1:before {
+  content: "\e60d";
+}
+
+.icon-chushaixuanxiang:before {
+  content: "\e606";
+}
+
+.icon-liuyanguanli1:before {
+  content: "\e61a";
+}
+
+.icon-shanchu1:before {
+  content: "\e609";
+}
+
+.icon-huishouzhan3:before {
+  content: "\e642";
+}
+
+.icon-shangchuan1:before {
+  content: "\e823";
+}
+
+.icon-huishouzhan4:before {
+  content: "\e61b";
+}
+
+.icon-chuangzuo:before {
+  content: "\e8ad";
+}
+
+.icon-dianzan:before {
+  content: "\e8ae";
+}
+
+.icon-paihangbang:before {
+  content: "\e8b3";
+}
+
+.icon-shouye:before {
+  content: "\e8b9";
+}
+
+.icon-shoucang:before {
+  content: "\e8c6";
+}
+
+.icon-addApp:before {
+  content: "\e60b";
+}
+
+.icon-huishouzhan5:before {
+  content: "\e63a";
+}
+
+.icon-add1:before {
+  content: "\e60e";
+}
+
+.icon-shoucang1:before {
+  content: "\e60f";
+}
+
+.icon-canshutongji:before {
+  content: "\e618";
+}
+
+.icon-rizhiguanli:before {
+  content: "\e628";
+}
+
+.icon-shanchu2:before {
+  content: "\e629";
+}
+
+.icon-xinzeng:before {
+  content: "\e62a";
+}
+
+.icon-zhankailiebiao:before {
+  content: "\e62b";
+}
+
+.icon-xiala-copy:before {
+  content: "\e610";
+}
+
+.icon-shangla:before {
+  content: "\e64e";
+}
+
+.icon-xianxingshezhi:before {
+  content: "\e611";
+}

components/mp-tree/css/style.scss

@@ -0,0 +1,116 @@
+.flex_between_center {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.checkbox {
+		position: relative;
+		height: 36rpx;
+		margin-left: 10rpx;
+		margin-right: 0px;
+		width: 36rpx;
+		.color {
+			color: #00aaff;
+			background-color: #00aaff;
+		}
+		.txt {
+			font-size: 44rpx;
+			line-height: 36rpx;
+			width: 100%;
+			height: 100%;
+			display: flex;
+		}
+	}
+	.checkBorder {
+		border: 1px solid #ecdee4;
+	}
+	.header {
+		width: 100%;
+		position: fixed;
+		background-color: #fff;
+		z-index: 9999;
+		.title {
+			height: 90rpx;
+			padding: 0 32rpx;
+			line-height: 90rpx;
+			font-size: 30rpx;
+			background-color: #f5f5f5;
+			color: #606064;
+			.iconclass {
+				display: inline-block;
+				margin: 0 12rpx;
+				color: #D0D4DB;
+				font-size: 28rpx;
+			}
+		}
+	}
+	.container-list {
+		overflow-y: scroll;
+		overflow-x: hidden;
+		padding-bottom: 160rpx;
+		padding-top: 200rpx;
+		.common {
+			background-color: #fff;
+			border-bottom: 1rpx solid #f4f4f4;
+			padding-left: 10rpx;
+			.content {
+				display: flex;
+				align-items: center;
+				min-height: 60rpx;
+				width: 100%;
+				padding: 15rpx 0;
+				position: relative;
+				font-size: 32rpx;
+				
+				.right {
+					position: absolute;
+					right: 30rpx;
+					color: #babdc3;
+					font-size: 32rpx;
+				}
+			}
+		}
+	}
+	.active {
+		color: #4297ED !important;
+	}
+	.none {
+		color: #666666;
+	}
+	.icon-selected{
+		color: #0095F2!important;
+		font-size: 40rpx!important;
+	}
+	.icons{
+		color: #0095F2!important;
+		font-size: 40rpx!important;
+	}
+	.inline-item {
+		display: inline-block
+	}
+	
+	.content-item{
+		display: flex;
+		position: relative;
+		align-items: center;
+	}
+	
+	.box_sizing {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+	
+	.btn {
+		position: fixed;
+		bottom: 0;
+		padding: 10px;
+		background-color: #fff;
+		width: 100%;
+	
+		.sureBtn {
+			background-color: #0095F2;
+			color: #fff;
+		}
+	}

components/mp-tree/tree.vue

@@ -0,0 +1,69 @@
+<template>
+	<view>
+		<view class="header">
+			<search v-if="searchIf" ref="sea" @confirm="confirmSearch" />
+			<view class="title">
+				<scroll-view scroll-x style="width: 100%;white-space: nowrap;" :scroll-left="scrollLeft">
+					<view v-for="(item,index) in tree_stack" class="inline-item" :key="index">
+						<view class="inline-item" v-if="index==0" @click="backTree(item,-1)">
+							<text v-if="index==tree_stack.length-1&&!isre" class="none">全部</text>
+							<text v-else class="active">全部</text>
+						</view>
+						<view v-if="index==0&&isre" @click="backTree(item,-2)" :class="[index==tree_stack.length-1&&isre]?'none inline-item':'active inline-item'">
+							<i class="iconfont icon-z043 iconclass"/>
+							搜索结果
+						</view>
+						<view class="inline-item" @click="backTree(item,index)" v-if="index!=0">
+							<i v-if="index!=0" class="iconfont icon-z043 iconclass"/>
+							<text v-if="index==tree_stack.length-1" class="none inline-item">
+								{{item[props.label]}}
+							</text>
+							<text v-else class="active">
+								{{item[props.label]}}
+							</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+		<view>
+			<view class="container-list">
+				<view class="common" v-for="(item, index) in tree" @click="toChildren(item)" :key="index">
+					<label class="content">
+						<view class="checkbox" v-if="isCheck&&props.multiple" @click.stop="checkboxChange(item,index,item.bx,item.qx)">
+							<span v-if="(newCheckList.findIndex(e=>{return item.id==e.id}))>-1&&!item.qx">
+								<i v-if="item.bx&&props.multiple" class="iconfont icon-banxuanzhongshousuo1-shi icons"/>
+								<i v-else class="iconfont icon-xuanzhong txt icon-selected"/>
+							</span>
+							<i v-else-if="props.multiple&&item.qx" class="iconfont icon-xuanzhong txt icon-selected"/>
+							<i v-else-if="item.bx&&props.multiple" class="iconfont icon-banxuanzhongshousuo1-shi icons"/>
+							<i style="color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt"/>
+						</view>
+						<view class="checkbox" v-if="isCheck&&!props.multiple&&props.nodes&&item.user" @click.stop="checkbox(item,index)">
+							<i v-if="newCheckList.length>0&&item.id == newCheckList[0].id" class="txt iconfont icon-selected"/>
+							<i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1"/>
+						</view>
+						<view class="checkbox" v-if="isCheck&&!props.multiple&&!props.nodes" @click.stop="checkbox(item,index)">
+							<i v-if="newCheckList.length>0&&item.id == newCheckList[0].id" class="txt iconfont icon-selected"/>
+							<i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1"/>
+						</view>
+						<view v-if="item.user" @click.stop="checkboxChange(item,index,item.bx,item.qx)"><slot v-bind:item="item"></slot></view>
+						<slot v-else v-bind:item="item"></slot>
+						<view class="right"><i v-if="!item.user&&item.children.length>0" class="iconfont icon-z043"></i></view>
+					</label>
+				</view>
+			</view>
+		</view>
+		<view class="btn box_sizing">
+			<button class="sureBtn" type="primary" @click="backConfirm">确认</button>
+		</view>
+	</view>
+</template>
+
+<script src="./code.js" type="text/javascript"></script>
+<style lang="scss" scoped>
+	@import './css/style.scss';
+	@import url("./css/icon.css");
+</style>
+
+

pages.json

@@ -180,6 +180,24 @@
             }
             
         }
+        ,{
+            "path" : "pages/chooseLable/chooseLable",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "选择标签",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/test/test",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "提交成功",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/chooseLable/chooseLable.vue

@@ -0,0 +1,116 @@
+<template>
+	<view>
+		<mp-tree v-slot:default="{item}" :checkList="checkList" v-if="tree.length>0"  :props="prop"
+			@sendValue="confirm" :parent="false" :isCheck="true" :trees="tree">
+			<!-- 内容插槽 -->
+			<view>
+				<view class="content-item">
+					<view class="word">{{item.dictKey}}</view>
+				</view>
+			</view>
+		</mp-tree>
+
+	</view>
+</template>
+
+<script>
+	import mpTree from '@/components/mp-tree/tree.vue';
+	export default {
+		components: {
+			mpTree
+		},
+		data() {
+			return {
+				tree: [],
+				checkList: [{
+					dictKey: "美食",
+					dictValue: "美食",
+					hasChildren: true,
+					id: "1430416319940947969"
+				}],
+				prop: {
+					label: 'dictKey',
+					children: 'children',
+					multiple: true,
+					checkStrictly: true
+				},
+			}
+		},
+		onLoad(option) {
+			this.getLabel()
+		},
+		methods: {
+			getLabel(){
+				let params={
+					code:'business_label'
+				}
+				this.$api.dict.dictionaryTree(params).then(res=>{
+					this.tree=res.data
+				})
+			},
+			//获取选中的值
+			confirm(val, back) {
+				let checkList=[]
+				val.forEach(item=>{
+					let obj={
+						id:item.id,
+						hasChildren:item.hasChildren,
+						dictKey:item.dictKey,
+						dictValue:item.dictValue
+					}
+					checkList.push(obj)
+				})
+				console.log(checkList);
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.box_sizing {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	.btn {
+		position: fixed;
+		bottom: 0;
+		padding: 10px;
+		background-color: #fff;
+		width: 100%;
+
+		.sureBtn {
+			background-color: #0095F2;
+			color: #fff;
+		}
+	}
+
+	.content-item {
+		display: flex;
+		position: relative;
+		align-items: center;
+
+		.person {
+			height: 64rpx;
+			min-width: 64rpx;
+			border-radius: 50%;
+			border: 1rpx solid rgba(0, 149, 235, 0.15);
+			background-color: rgba(0, 149, 235, 0.1);
+			margin-left: 0px;
+			color: #0095F2;
+			line-height: 64rpx;
+			font-size: 22rpx;
+			text-align: center;
+			margin-left: 20rpx;
+		}
+
+		.word {
+			margin-left: 16rpx;
+			font-size: 30rpx;
+			color: #5b5757;
+			width: 500rpx;
+			word-break: break-all;
+		}
+	}
+</style>

pages/test/test.vue

@@ -0,0 +1,214 @@
+<template>
+	<view class="margin-30">
+		<view class="bank">
+			<view class="left center">
+				<image src="@/static/bank/BOC.png" mode=""></image>
+				<view class="content">
+					<text>中国银行</text>
+					<text>尾号8888储蓄卡</text>
+				</view>
+			</view>
+			
+			<view class="center">
+				<text class="cuIcon-right" style="font-size: 36rpx;color: #888888;"></text>
+			</view>
+		</view>
+		
+		<view class="card">
+			<text class="title">提现金额</text>
+			
+			<view class="input">
+				<text class="text-price center  text-bold" style="font-size: 60rpx;"></text>
+				<view class="margin-left-20" style="width: 60%;">
+					<u-input placeholder="请输入提现金额" ></u-input>
+				</view>
+				<view class="center margin-bottom-10 margin-left-20">
+					<view class="cu-btn withdraw-btn sm round center" >
+						<text>全部提现</text>
+					</view>
+				</view>
+			</view>
+			
+			<view class="canWithdraw">
+				可提现金额
+				<text class="text-price margin-left-20" style="font-size: 34rpx;">18.00</text>
+			</view>
+			<view class="rate">
+				<view class="item">
+					<text>服务费</text>
+					<text class="text-price">0.10</text>
+				</view>
+				<view class="item">
+					<view class="">
+						<text>费率</text>
+						<text @click="rateShow=true" class="cuIcon-question margin-left-10 text-lg"></text>
+					</view>
+					<text class="">0.05%</text>
+				</view>
+			</view>
+		</view>
+		
+		<block>
+			<view  class="footer-fixed center" style="bottom: 15%;z-index: 9;">
+				<view @click="pass" class="cu-btn df btn-bg-color  radius " style="width: 86%;height: 86rpx;">
+					<text>确认提现</text>
+				</view>
+			</view>
+		</block>
+		
+		<u-popup v-model="rateShow" :mask-close-able="false" mode="center" height="40%" width="76%" borderRadius="20" negative-top="100">
+			<view class="popup-content" style="height: 98%;">
+				<view class="">
+					<text class="popup-title">费率说明</text>
+					<view class="popup-desc">
+						<text>累计营收0-1000元，费率为0.5%;</text>
+						<text>1001-10000元，费率为0.38%;</text>
+						<text>10000-100000元，费率0.3%;</text>
+						<text>100000元起申请更低费率。</text>
+					</view>
+				</view>
+				<view class="center">
+					<view  class="cu-btn btn-bg-color round" style="height: 80rpx;font-size: 30rpx;width: 80%;" @click="rateShow=false">
+						确认
+					</view>
+				</view>
+				
+			</view>
+		</u-popup>
+		
+	</view>
+</template>
+
+<script>
+export default {
+	name: '',
+	data() {
+		return {
+			rateShow:true
+		};
+	},
+	onLoad() {
+		
+	},
+	methods:{
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.bank{
+		border-radius: 20rpx;
+		background-color: #FFFFFF;
+		padding: 40rpx;
+		display: flex;
+		justify-content: space-between;
+		
+		.left{
+			display: flex;
+			image{
+				width: 80rpx;
+				height: 80rpx;
+				margin-right: 20rpx;
+			}
+			
+			.content{
+				display: flex;
+				flex-direction: column;
+				
+				text:first-child{
+					color: #252525;
+					font-weight: 800;
+					font-size: 34rpx;
+				}
+				
+				text:last-child{
+					margin-top: 10rpx;
+					color: #888888;
+					font-size: 26rpx;
+				}
+			}
+		}
+	}
+	
+	.card{
+		border-radius: 20rpx;
+		margin-top: 30rpx;
+		padding: 40rpx;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		.title{
+			font-size: 36rpx;
+			font-weight: 800;
+			margin-bottom: 30rpx;
+		}
+		
+		.input{
+			display: flex;
+			border-bottom: 1rpx solid #DFDFDF;
+			
+			.withdraw-btn{
+				background-color: #FFFFFF;
+				color: #EE9230;
+				border: 1rpx solid #EE9230;
+				height: 54rpx;width: 180rpx;font-size: 28rpx;line-height: 54rpx;
+			}
+		}
+		
+		.canWithdraw{
+			margin-top: 24rpx;
+			color: #252525;
+		}
+		
+		.rate{
+			margin-top: 40rpx;
+			
+			.item{
+				margin-bottom: 20rpx;
+				display: flex;
+				justify-content: space-between;
+				
+				text:first-child{
+					color: #252525;
+				}
+				text:last-child{
+					color: #999999;
+				}
+			}
+		}
+		
+		
+	}
+	
+	.submit-btn{
+		background-color: #EE9230;	
+		color: #FFFFFF;
+		border-radius: 10rpx;
+	}
+	
+	.popup-content{
+		height: 100%;
+		padding: 50rpx 60rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		
+		
+		.popup-title{
+			font-size: 38rpx;
+			font-weight: 800;
+		}
+		
+		.popup-desc{
+			margin-top: 50rpx;
+			color: #666666;
+			display: flex;
+			flex-direction: column;
+			text{
+				line-height: 40rpx;
+				margin-bottom: 10rpx;
+			}
+		}
+	}
+</style>

utils/dialog.js

@@ -3,12 +3,13 @@ let dialog = {};
 /**
  * 封装模态框
  */
-dialog.showModal=(content,isShowCancel=true,title='提示',)=>{
+dialog.showModal=(content,showCancel=true,confirmColor)=>{
     return new Promise((resolve,reject)=>{
         uni.showModal({
-			title: title,
-			content: content,
-			showCancel:isShowCancel,
+			title:'提示',
+			content,
+			showCancel,
+			confirmColor:confirmColor?confirmColor:'#2979ff',
 			success: (res)=>{
 				if (res.confirm) {
 					resolve(res)
@@ -32,6 +33,7 @@ dialog.showModalAndBack=(content)=>{
     	}
     });
 }
+
 dialog.showLoading=(title='加载中...')=>{
 	uni.showLoading({
 		title