uni-app 11设置备注和标签页

<template>
  <view class="page"> 
    <!-- 导航栏 -->
    <free-nav-bar title="设置备注和标签" showBack :showRight="true">
      <free-main-button name="完成" slot="right" @click="submit"></free-main-button>
    </free-nav-bar>
    
    <view class="flex flex-column">
      <text class="font-sm text-secondary px-3 py-2">备注名</text>
      <input type="text" class="font-md border bg-white px-3" placeholder="请填写备注名" style="height: 100rpx;" v-model="nickname"/>
    </view>
    
    <view class="flex flex-column">
      <text class="font-sm text-secondary px-3 py-2">标签</text>
      <view class="border bg-white px-3 flex align-center flex-wrap pt-3 pb-2" @click="openTagSet">
        <view class="border border-main rounded-circle px-2 py-1 mr-1 mb-1" v-for="(item,index) in tagList" :key="index">
          <text class="font main-text-color">{{item}}</text>
        </view>
      </view>
    </view>
    
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  
  export default {
    components: {
      freeNavBar,
      freeMainButton
    },
    data() {
      return {
        id:0,
        nickname:"",
        tagList:['朋友','同学','家人']
      }
    },
    onLoad(e) {
      // if(!e.params){
      //  return this.backToast()
      // }
      // let params = JSON.parse(e.params)
      // this.id = params.user_id
      // this.nickname = params.nickname
      // this.tagList = params.tags == '' ? [] : params.tags.split(',')
      uni.$on('updateTag',(e)=>{
        this.tagList = e
      })
    },
    beforeDestroy() {
      uni.$off('updateTag')
    },
    methods: {
      openTagSet(){
        uni.navigateTo({
          url: '../user-tag-set/user-tag-set?detail='+JSON.stringify(this.tagList)
        });
      },
      // 完成
      submit(){
        uni.$emit('saveRemarkTag',{
          nickname:this.nickname,
          tagList:this.tagList
        });
        uni.navigateBack({
          delta:1
        })
        // $H.post('/friend/setremarktag/'+this.id,{
        //  nickname:this.nickname,
        //  tags:this.tagList.join(',')
        // }).then(res=>{
        //  uni.showToast({
        //    title: '修改成功',
        //    icon: 'none'
        //  });
        //  uni.navigateBack({
        //    delta: 1
        //  });
        // })
      }
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="添加标签" showBack :showRight="true">
      <free-main-button name="保存" slot="right" @click="save"></free-main-button>
    </free-nav-bar>
    
    <view class="px-3 pt-3 pb-2 border-bottom flex align-center flex-wrap">
      <view class="border border-main rounded-circle py-1 px-2 flex align-center mb-1 mr-1 justify-center" v-for="(item,index) in list" :key="index" @click="delTag(index)">
        <text class="font main-text-color">{{item}}</text>
      </view>
      
      <input type="text" value="" class="border bg-white font rounded-circle text-center" placeholder="添加标签" style="border-style: dashed; width: 180rpx;" v-model="tag" @confirm="addTag" confirm-type="send"/>
    </view>
    
    <view class="flex flex-column">
      <text class="font-sm text-secondary px-3 py-2">所有标签</text>
      <view class="px-3 flex align-center flex-wrap pt-3 pb-2" @click="openTagSet">
        <view class="border bg-white rounded-circle px-2 py-1 mr-1 mb-1" v-for="(item,index) in allList" :key="index" @click="fastAddTag(item)">
          <text class="font text-dark">{{item}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  export default {
    components:{
      freeNavBar,
      freeMainButton
    },
    data() {
      return {
        tag:'',
        list:['123'],
        allList:['家人','哈哈哈','朋友']
      }
    },
    methods: {
      // 保存
      save(){
        uni.$emit('updateTag',this.list)
        uni.navigateBack({
          delta:1
        })
      },
      // 增加标签
      addTag(){
        if(this.tag===''){
          return;
        }
        if(this.list.indexOf(this.tag) !== -1){
            this.tag='';
          return uni.showToast({
            title: '标签已存在',
            icon:'none'
          });
        }
        this.list.push(this.tag);
        this.tag = '';
      },
      // 快捷增加标签
      fastAddTag(item){
        if(this.list.indexOf(item) !== -1){
          return uni.showToast({
            title:'标签已存在',
            icon:'none'
          })
        }
        this.list.push(item)
      },
      // 删除标签
      delTag(index){
        uni.showModal({
          content:'是否删除该标签',
          success:(res)=>{
            if(res.confirm){
              this.list.splice(index,1);
            }
          }
        })
      }
    },
    onLoad(e) {
      if(e.detail){
        this.list = JSON.parse(e.detail);
        console.log(this.list);
      }
    }
  }
</script>
<style>
</style>