|
|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <view class="safe-area-inset-bottom">
|
|
|
+ <u-cell-item title="已添加标签" hover-class="none" :arrow="false" :value-style="valueStyle" :value="isEdit?'完成':'编辑'" @click="edit"></u-cell-item>
|
|
|
+ <view class="content">
|
|
|
+ <u-row gutter="0" justify="center" >
|
|
|
+ <u-col span="3" v-for="(item,index) in tagsList" :key="index" @click="deleteTag(item.id)">
|
|
|
+ <view class="item" >
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ <u-icon v-if="isEdit" class="u-icon" name="close-circle-fill" ></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="item add" @click="add"><u-icon name="plus"></u-icon></view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
+ <u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom">
|
|
|
+ <view class="popup-title">添加新标签</view>
|
|
|
+ <scroll-view scroll-y="true">
|
|
|
+ <view class="popup-content">
|
|
|
+ <view v-for="(item,index) in tagsSelect" :class="[selectTags.indexOf(item.id)!='-1'?'active':'','popupItem']" :key="index" @click="selectTag(item.id)">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="popup-confirm" @click="confirm">确定</view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import myBar from "@/components/my-bar.vue"
|
|
|
+ export default{
|
|
|
+ components:{
|
|
|
+ myBar
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ valueStyle:{
|
|
|
+ 'color':'#EF9944'
|
|
|
+ },
|
|
|
+ tagsList:[],
|
|
|
+ tagsSelect:[],
|
|
|
+ isEdit:false,
|
|
|
+ show:false,
|
|
|
+ selectTags:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getTagManageList()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getTagManageList(){
|
|
|
+ let params = {}
|
|
|
+ // params['name'] = ''
|
|
|
+ params['size'] = 50
|
|
|
+ params['current'] = 0
|
|
|
+ params['mallId'] = this.vuex_mallId
|
|
|
+ this.$api.mall.getTagManageList(params).then(res => {
|
|
|
+ this.tagsList = res.data.records
|
|
|
+ this.selectTags = res.data.records.map((item)=>{
|
|
|
+ return item.labelId
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectTag(id){
|
|
|
+ if(this.selectTags.indexOf(id)=="-1"){
|
|
|
+ this.selectTags.push(id)
|
|
|
+ }else{
|
|
|
+ let idx = this.selectTags.indexOf(id)
|
|
|
+ this.selectTags.splice(idx,1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ add(){
|
|
|
+ this.show = true
|
|
|
+ let params = {}
|
|
|
+ params['size'] = 50
|
|
|
+ params['current'] = 0
|
|
|
+ this.$api.mall.getTagSelect(params).then(res => {
|
|
|
+ this.tagsSelect = res.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ this.getSetTag()
|
|
|
+ },
|
|
|
+ edit(){
|
|
|
+ this.isEdit = !this.isEdit
|
|
|
+ },
|
|
|
+ getSetTag(type){
|
|
|
+ let params = {}
|
|
|
+ params['labelIds'] = this.selectTags.length>0?this.selectTags.join(","):''
|
|
|
+ params['mallId'] = this.vuex_mallId
|
|
|
+ this.$api.mall.getSetTag(params).then(res => {
|
|
|
+ this.show = false
|
|
|
+ this.getTagManageList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTagRemove(id){
|
|
|
+ this.$api.mall.getTagRemove(id).then(res => {
|
|
|
+ this.show = false
|
|
|
+ this.getTagManageList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteTag(id){
|
|
|
+ if(!this.isEdit)return
|
|
|
+ // this.selectTag(id)
|
|
|
+ this.getTagRemove(id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .content{
|
|
|
+ padding: 20rpx 12rpx;
|
|
|
+ .item{
|
|
|
+ text-align: center;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: $base-color;
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 20rpx 20rpx 20rpx;
|
|
|
+ .u-icon{
|
|
|
+ color: $uni-color-error;
|
|
|
+ position: absolute;
|
|
|
+ right: -17rpx;
|
|
|
+ top: -17rpx;
|
|
|
+ font-size: 35rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add{
|
|
|
+ border: 1px dashed $base-color;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-content{
|
|
|
+ height: 40vh;
|
|
|
+ padding: 20rpx 32rpx 32rpx 32rpx;
|
|
|
+ }
|
|
|
+ .popup-title{
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .popupItem{
|
|
|
+ border: 1px solid #999;
|
|
|
+ color: #999;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: $base-color;
|
|
|
+ border: 1px solid $base-color;
|
|
|
+ }
|
|
|
+ .popup-confirm{
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 32rpx;
|
|
|
+ border-radius: 25px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: $base-color;
|
|
|
+ }
|
|
|
+</style>
|
