gx

queenwuli

2021-01-25 c4246ca910f28014efaace64ebf92f47a673a9cf

 hive-app/pages/member/addLabel.vue

@@ -1,48 +1,130 @@
<template>
   <!-- 添加标签 -->
   <view>
      <search-bar placeholder="搜索标签名称" class="ml-10 mr-10"></search-bar>
      <view class="font-14 content">
         <view class="content-title">
      <search-bar @confirm="search" placeholder="搜索标签名称" class="ml-10 mr-10"></search-bar>
      <view class="content">
         <view class="title">
            <text>常用标签</text>
         </view>
         <view>
            <checkbox-group>
               <label v-for="(item,index) in list" class="flex align-center">
                  <view class="ml-10">
                     <checkbox color="#518EFF"></checkbox>
                  </view>
                  <view class="ml-10 checkbox-text">{{item.name}}</view>
               </label>
            </checkbox-group>
         <view class="list" v-for="(item,index) in list" @click="lableChange(item)">
            <text class="iconfont" 
               :class="item.isCheck?'icontubiao-duoxuandianji':'iconcheckbox-full'" 
               :style="{color: item.color}"></text>
            <view class="ml-10 name">{{item.label}}</view>
         </view>
         <view class="title">
            <text>我的标签</text>
         </view>
			
         <uni-swipe-action>
             <uni-swipe-action-item :right-options="options"  @click="bindClick($event, item.id)" v-for="(item,index) in myList">
                 <view class="list" @click="lableChange(item)">
                    <text class="iconfont"
                       :class="item.isCheck?'icontubiao-duoxuandianji':'iconcheckbox-full'" 
                       :style="{color: item.color}"></text>
                    <view class="ml-10 name">{{item.label}}</view>
                 </view>
             </uni-swipe-action-item>
         </uni-swipe-action>
      </view>
      <button class="sticky-footer blue-btn">创建标签</button>
      <button class="sticky-footer blue-btn" @click="confirm">确认</button>
   </view>
</template>

<script>
   import searchBar from '../../components/searchBar/index.vue';
   import {uniSwipeAction} from '../../components/uni-swipe-action/uni-swipe-action.vue'
   import {uniSwipeActionItem} from '../../components/uni-swipe-action-item/uni-swipe-action-item.vue'
   export default {
      components:{
         searchBar
      },
      data(){
         return{
            list:[
               {name:'痘坑'},
               {name:'美白'},
               {name:'祛斑'},
               {name:'瘦身'},
               {name:'祛痘'},
               {name:'塑性'},
               {name:'双眼皮'},
               {name:'白富美'},
               {name:'轻度色斑'},
               {name:'瘦脸'},
               {name:'减肥美白'},
               {name:'胎记'}
            ]
            queryKey: '',
            list:[],
            myList:[],
            selectId: '',
            options:[{
                  text: '删除',
                  style: {
                     backgroundColor: '#dd524d'
                  }
               }
             ]
         }
      },
      onShow() {
         this.loadList()
      },
      onLoad(options) {
         if(options.selectId){
            this.selectId = options.selectId
         }
      },
      onNavigationBarButtonTap(e){
         if(e.index==0){
            uni.navigateTo({
               url:"./createLabel"
            })
         }
      },
      methods:{
         loadList(){
            let selectedArr = this.selectId?this.selectId.split(','):[];
            this.$httpUtils.request('/api/label/findLabelList', {
               label: this.queryKey
            }, 'POST').then((res) => {
               if(res.status == 200){
                  this.list = res.mapInfo.allLabel.map((item) => {
                     if(this.selectId && selectedArr.includes(item.id.toString())){
                        return Object.assign(item, {isCheck: true})
                     }
                     return Object.assign(item, {isCheck: false})
                  });
                  this.myList = res.mapInfo.myLabel.map((item) => {
                     if(this.selectId && selectedArr.includes(item.id.toString())){
                        return Object.assign(item, {isCheck: true})
                     }
                     return Object.assign(item, {isCheck: false})
                  });
               }
            })
         },
         search(val){
            this.queryKey = val;
            this.loadList();
         },
         lableChange(item){
            item.isCheck = !item.isCheck;
         },
         confirm(){
            let result = this.list.concat(this.myList);
            let selectItems = result.filter((item) => {
               return item.isCheck
            });
            let pages = getCurrentPages();
            let prevPage = pages[ pages.length - 2 ]; 
            if(selectItems.length){
               prevPage.$vm.setLabel && prevPage.$vm.setLabel(selectItems);
            }
            uni.navigateBack()
         },
         bindClick(e, id){
            uni.showModal({
                title: '提示',
                content: '确定删除该标签吗？',
                success: (res) => {
                    if (res.confirm) {
                     this.$httpUtils.request('/api/label/delById/'+id).then((res) => {
                        if(res.status == 200){
                           this.loadList()
                        }
                        this.$toast.info(res.info);
                     })
                    }
                }
            });
         }
      }
   }
@@ -52,14 +134,25 @@
   .content{
      margin-bottom: 60px;
   }
   .content-title{
   .title{
      background: #F2F2F2;
      padding: 10px;
      font-size: 15px;
   }
   .checkbox-text{
   .list{
      width: 100%;
      padding: 10px 0;
      display: flex;
      align-items: center;
      padding-left: 10px;
   }
   .list .iconfont{
      font-size: 18px;
   }
   .list .name{
      width: 100%;
      padding: 10px 5px;
      border-bottom: 1px solid #EDEAF4;
      font-size: 14px;
   }
   .sticky-footer{
      bottom: 10px;