11

pages/packageOne/service/user/store_manage/add_message/add_message.vue

@@ -0,0 +1,486 @@
+<template>
+	<view class="wrap">
+		<view class="header">
+			<view class="header_lf">已添加的</view>
+			<view class="header_rg" @tap="confirm">确定</view>
+		</view>
+		<!-- 已选择 -->
+		<view class="message_list">
+			<view class="select_messgae">
+			    <view class="select_messgae_item select_messgae_item1" v-for="item,index in select_messgae" :key="index">
+			        <view class="select_messgae_item_text">{{item.name}}</view>
+			        <view class="iconfont close" @tap="close(item,index)"></view>
+			    </view>
+			</view>
+		</view>
+		<!-- 可添加的 -->
+		<view class="content">
+			<view class="content_item" v-for="item,index in allData.contain_rh_item_list" :key="index">
+				<view class="header1 clear" @tap="changeCurrent(item,index)">
+				    <view class="header_lf1">
+				        <view class="header_title">{{item.title}}</view>
+				    </view>
+				    <view class="header_rg1">
+				        <text :class="['iconfont',item.current == 0?'header_bottom':'top']"></text>
+				    </view>
+				</view>
+				<!-- 隐藏二级菜单 -->
+				<view :class="['content_list',item.current == 0?'':'show']">
+					<!--全选按钮-->
+					<view class="all_select" @tap="allSelect(item,index)">
+					    <image :src="item.allSelect == 1?'http://web.jzdsh.com/images/select.png':'http://web.jzdsh.com/images/no_select.png'" id="select_img" ></image>
+					    <view class="select_text">全选</view>
+					</view>
+					<view :class="['content_list_wrap',item.flodStatus == 1?'flod':'']">
+					    <view class="content_list_item" v-for="item,childIndex in item.arr" :key="childIndex">
+							<view :class="['content_list_item_text',item.active == 1?'active':'']" @tap="getValue(item,index,childIndex)">{{item.title}}</view>
+					    </view>
+					</view>
+					<!--折叠按钮-->
+					<view class="news_more" @tap="changeFlod(index)">{{flod}} <view class="iconfont header_bottom"></view></view>
+				</view>
+			</view>
+		</view>
+		<view class="footer">
+			<button class="submit" @tap="confirm">确定</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import api from "../../../../../../api.js";
+	let app = getApp();
+	export default {
+		data() {
+			return {
+				paramType:'',//分类信息  小型车等等
+				allData:{
+					contain_rh_item_list:[]
+				},//页面数据
+				select_messgae:[],//已选择的主营信息
+				select_small:[],//已选中的小分类信息
+				flod:'展开更多',//折叠按钮文字
+			}
+		},
+		onLoad(options) {
+			this.getData();
+		},
+		methods: {
+			//加载主营信息
+			getData(){
+				let data = {
+					token:app.globalData.token
+				}
+				api.getUserMyMessage(data).then((res)=>{
+					console.log(res);
+					let contain_rh_item_list = res.data.data.vo.data.contain_rh_item_list;
+					for (let i = 0; i < contain_rh_item_list.length; i++){
+					    let current = 0;
+					    let arr = contain_rh_item_list[i].arr;
+					    let length = arr.length;
+					    contain_rh_item_list[i].current = 0;
+					    contain_rh_item_list[i].flodStatus = 0;
+					    arr.map((item,index,arr)=>{
+					        if(item.active == 1){
+					            current++;
+					        }
+					        if(current == length){
+					            contain_rh_item_list[i].allSelect = 1;
+					        }else{
+					            contain_rh_item_list[i].allSelect = 0;
+					        }
+					    })
+					}
+					this.allData.contain_rh_item_list = contain_rh_item_list;
+					this.select_messgae = res.data.data.pMainBusinessList;
+					this.select_small = res.data.data.mainBusinessList;
+					// this.allData = res.data.data;
+				})
+			},
+			//点击展开二级菜单
+			changeCurrent(item,index){
+				let current = this.allData.contain_rh_item_list[index].current;
+				if(current == 0){
+					this.allData.contain_rh_item_list[index].current = 1;
+				}else{
+					this.allData.contain_rh_item_list[index].current = 0;
+				}
+				
+			},
+			//点击折叠按钮
+			changeFlod(index){
+				let flodStatus = this.allData.contain_rh_item_list[index].flodStatus;
+				if(flodStatus == 0){
+					this.allData.contain_rh_item_list[index].flodStatus = 1;
+					this.flod = '点击收起'
+				}else{
+					this.allData.contain_rh_item_list[index].flodStatus = 0;
+					this.flod = '展开更多'
+				}
+			},
+			//点击小分类
+			getValue(item,index,childIndex){
+				let active = this.allData.contain_rh_item_list[index].arr[childIndex].active;
+				let pId = this.allData.contain_rh_item_list[index].arr[childIndex].pId;
+				let pName = this.allData.contain_rh_item_list[index].arr[childIndex].pName;
+				let name = this.allData.contain_rh_item_list[index].arr[childIndex].title;
+				let arr = this.allData.contain_rh_item_list[index].arr;
+				let length = arr.length;
+				let current = 0;//判断全选
+				let select_messgaeArr = this.select_messgae;
+				if(active == 0){
+					this.allData.contain_rh_item_list[index].arr[childIndex].active = 1;
+					select_messgaeArr.push({pId:pId,name:pName});
+					this.select_small.push({pId:pId,name:name});
+					let res = this.doWeight(select_messgaeArr);
+					this.select_messgae = res;
+					//判断小类是否全部选中
+					arr.map((item,arr)=>{
+						if(item.active == 1){
+						  current ++;
+						}
+						if(current == length){
+							this.allData.contain_rh_item_list[index].allSelect = 1;
+						}
+					})
+				}else{
+					this.allData.contain_rh_item_list[index].arr[childIndex].active = 0;
+					let array = [];
+					this.select_small.map((item,index,select_small)=>{
+					    array.push(item.name);
+					});
+					let i = arr.indexOf(name);
+					this.select_small.splice(i,1);//删除对应小分类
+					let mianBusinessId = [];
+					this.select_small.map((item,index,select_small)=>{
+						mianBusinessId.push(item.pId)
+					})
+					let selectId = [];
+					this.select_messgae.map((item,index,select_messgae)=>{
+					    selectId.push(item.pId)
+					})
+					for(let i = 0;i<selectId.length;i++){
+						if(mianBusinessId.indexOf(selectId[i]) == -1){
+						  console.log(i);
+						  this.select_messgae.splice(i,1)
+						}
+					}
+					//判断小类是否全部选中
+					arr.map((item,arr)=>{
+						if(item.active == 0){
+						  current ++;
+						}
+						if(current == length){
+							this.allData.contain_rh_item_list[index].allSelect = 0;
+						}
+					})
+				}
+			},
+			//数组对象去重
+			doWeight(arr){
+				//数组对象去重
+				let res = []
+				let obj = {}
+				for (let i = 0; i < arr.length; i++) {
+				    if (!obj[arr[i].name]) { // name  对应数组中的name
+				        res.push(arr[i])
+				        obj[arr[i].name] = true
+				    }
+				}
+				return res;
+			},
+			//点击大分类的删除按钮
+			close(item,index){
+				console.log(item,index);
+				let pId = item.pId;
+				this.select_messgae.splice(index,1);  //删除掉大类
+				//删除掉对应小类
+				for (let i = this.select_small.length - 1; i >= 0; i--){
+				    if(this.select_small[i].pId === item.pId){
+				        this.select_small.splice(i,1)
+				    }
+				}
+				let array = this.allData.contain_rh_item_list;
+				for(let i = 0;i<array.length;i++){
+					if(array[i].ids == pId){
+						console.log(i);
+						array[i].allSelect = 0;
+						let arr = array[i].arr;
+						arr.map((item,index,arr)=>{
+						  item.active = 0
+						})
+					}
+				}
+				this.allData.contain_rh_item_list = array;
+			},
+			//全选按钮
+			allSelect(item,index){
+				console.log(item,index);
+				let arr = item.arr;
+				if(item.allSelect == 0){
+					this.allData.contain_rh_item_list[index].allSelect = 1;
+					for (let i = this.select_small.length - 1; i >= 0; i--){
+					    if(this.select_small[i].pId === item.ids){
+					        this.select_small.splice(i,1)
+					    }
+					}
+					arr.map((item,index,arr)=>{
+					    item.active = 1;
+					    this.select_small.push({pId:item.pId,name:item.title})
+					})
+					this.select_messgae.push({pId:item.ids,name:item.title});
+					let res = this.doWeight(this.select_messgae);
+					this.select_messgae = res;
+				}else{
+					this.allData.contain_rh_item_list[index].allSelect = 0;
+					for (let i = this.select_small.length - 1; i >= 0; i--){
+					    if(this.select_small[i].pId === item.ids){
+					        this.select_small.splice(i,1)
+					    }
+					}
+					arr.map((item,index,arr)=>{
+					    item.active = 0
+					});
+					let select = [];
+					this.select_messgae.map((item,index)=>{
+					    select.push(item.name)
+					})
+					let num = select.indexOf(item.title);
+					this.select_messgae.splice(num,1);
+				}
+			},
+			confirm(){
+				let select_messgae = this.select_messgae;
+				let select_small = this.select_small;
+				let select_messgaeArr = [];
+				select_messgae.map((item,index,select_messgae)=>{
+				    select_messgaeArr.push(item.name)
+				})
+				let select_smallArr = [];
+				select_small.map((item,index,select_small)=>{
+				    select_smallArr.push(item.name)
+				})
+				console.log(select_messgaeArr,select_smallArr);
+				
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+	  width: 100%;
+	  height:100%;
+	  background-color: #f9f9f9;
+	}
+	.header{
+	  width:100%;
+	  overflow: hidden;
+	  padding:0 24rpx 30rpx 30rpx;
+	  box-sizing: border-box;
+	  background: #ffffff;
+	}
+	.header_lf{
+	  font-size: 30rpx;
+	  color:#333333;
+	  font-weight: bold;
+	  float:left;
+	  margin-top:12rpx;
+	}
+	.header_rg{
+	  width:102rpx;
+	  height:48rpx;
+	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
+	  border-radius:6rpx;
+	  text-align: center;
+	  line-height: 48rpx;
+	  font-size: 24rpx;
+	  color:#ffffff;
+	  float:right;
+	  margin-top:10rpx;
+	}
+	.message_list{
+	  width: 100%;
+	  /* overflow: hidden; */
+	  /* padding:0 30rpx;
+	  margin-top:30rpx; */
+	  box-sizing: border-box;
+	}
+	.select_messgae{
+	  width:100%;
+	  padding:0 30rpx;
+	  box-sizing: border-box;
+	  background-color: #ffffff;
+	  border-bottom: 1px solid #f2f2f2;
+	}
+	.select_messgae_item{
+	  width:150rpx;
+	  height:78rpx;
+	  background:rgba(247,247,247,1);
+	  border-radius:6rpx;
+	  margin:0 30rpx 40rpx 0;
+	  text-align: center;
+	  line-height: 78rpx;
+	  color:#777777;
+	  font-size: 26rpx;
+	  display: inline-block;
+	  position: relative;
+	}
+	.select_messgae_item_text{
+	  width:100%;
+	  height:100%;
+	  overflow: hidden;
+	  text-overflow:ellipsis;
+	  white-space: nowrap;
+	}
+	.close{
+	  position: absolute;
+	  width:32rpx;
+	  height:32rpx;
+	  display: block;
+	  top:-16rpx;
+	  right:-16rpx;
+	  font-size: 32rpx;
+	  text-align: center;
+	  line-height: 32rpx;
+	  color:rgba(34,34,34,0.5);
+	}
+	.select_messgae_item:nth-child(4n){
+	  margin-right: 0;
+	}
+	.content{
+	  width:100%;
+	  margin-top:20rpx;
+	  overflow: hidden;
+	  padding-bottom: 120rpx;
+	}
+	.content_item{
+	  width:100%;
+	  background-color: #ffffff;
+	  box-sizing: border-box;
+	  margin-bottom: 20rpx;
+	}
+	.header1{
+	  height:100rpx;
+	  line-height: 100rpx;
+	  position: relative;
+	  padding:0 30rpx;
+	}
+	.header_lf image{
+	  float:left;
+	  width:26rpx;
+	  height:36rpx;
+	  margin-top:32rpx;
+	}
+	.header_title{
+	  font-size: 30rpx;
+	  color:#222222;
+	  float:left;
+	}
+	.header_rg1{
+	  float:right;
+	}
+	.header_bottom{
+	  font-size: 26rpx;
+	  color:#999999;
+	}
+	.top{
+	  font-size: 26rpx;
+	  color:#999999;
+	}
+	.content_list{
+	  width:100%;
+	  padding:0rpx 0 0 30rpx;
+	  overflow: hidden;
+	  display: none;
+	}
+	.show{
+	  display: block;
+	}
+	.content_list_item{
+	  width: 150rpx;
+	  height: 78rpx;
+	  background: rgba(247,247,247,1);
+	  border-radius: 6rpx;
+	  margin: 0 30rpx 40rpx 0;
+	  text-align: center;
+	  color: #777777;
+	  font-size: 26rpx;
+	  position: relative;
+	  display: table;
+	  float:left;
+	}
+	.content_list_item_text{
+	  width: 100%;
+	  height: 100%;
+	  display: table-cell;
+	  vertical-align: middle;
+	}
+	.active{
+	  border-color:#F67100;
+	  color:#F67100;
+	  background:rgba(231,120,23,0.1);
+	}
+	.content_list_item:nth-child(4n){
+	  margin-right: 0;
+	}
+	.content_list_wrap{
+	  height:200rpx;
+	  overflow: hidden;
+	  padding-top:20rpx;
+	}
+	.flod{
+	  height:auto;
+	}
+	.news_more{
+	  text-align: center;
+	  margin-top:16rpx;
+	  font-size: 24rpx;
+	  color:#E77817;
+	  margin-bottom: 30rpx;
+	  background-color: #ffffff
+	}
+	.header_bottom{
+	  display: inline-block;
+	  font-size:24rpx;
+	  margin-left: 10rpx;
+	  box-sizing: border-box;
+	}
+	.all_select{
+	  height:80rpx;
+	  display: flex;
+	  align-items: center;
+	}
+	#select_img{
+	  width:28rpx;
+	  height:28rpx;
+	}
+	.select_text{
+	  font-size: 28rpx;
+	  color:#666666;
+	  margin-left: 10rpx;
+	}
+	.footer{
+	  width:100%;
+	  height:100rpx;
+	  background:rgba(255,255,255,1);
+	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
+	  position: fixed;
+	  bottom:0;
+	  left:0;
+	  z-index:100;
+	}
+	.submit{
+	  width:690rpx;
+	  height:80rpx;
+	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
+	  border-radius:40rpx;
+	  text-align: center;
+	  font-size: 32rpx;
+	  color:#ffffff;
+	  position: absolute;
+	  top:10rpx;
+	  left:50%;
+	  transform: translateX(-50%)
+	}
+</style>