From c4246ca910f28014efaace64ebf92f47a673a9cf Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Mon, 25 Jan 2021 11:47:46 +0800
Subject: [PATCH] gx
---
hive-app/pages/member/addLabel.vue | 153 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 123 insertions(+), 30 deletions(-)
diff --git a/hive-app/pages/member/addLabel.vue b/hive-app/pages/member/addLabel.vue
index 2655fb7..b856bd9 100644
--- a/hive-app/pages/member/addLabel.vue
+++ b/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;
--
Gitblit v1.9.1