193 lines
4.5 KiB
Vue
193 lines
4.5 KiB
Vue
<template>
|
|
<view id="release">
|
|
<!-- 标签 -->
|
|
<view>
|
|
<view class="titles flex-title">
|
|
<text>标签</text>
|
|
<text @click="editing">{{ is_edit ? "取消编辑" : "编辑" }}</text>
|
|
</view>
|
|
<view class="form-view" @click="show_add()">+ 新建标签</view>
|
|
<view class="form-view" :class=" {'cur': rSelect.indexOf(item.id)!=-1} " @tap="tapInfo(item.id)" v-for="(item,index) in fileListes"
|
|
:key="index">
|
|
{{item.name}}
|
|
<u-icon v-show="is_edit && item.user_id != 0" class="close" name="close" color="#666" size="18" @click="isTable(item.id,index)"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 添加标签的按钮 -->
|
|
<u-popup v-model="show" mode="center" border-radius="14" :closeable="true">
|
|
<view class="text">
|
|
创建属于你的标签吧
|
|
</view>
|
|
<view class="u-inputes">
|
|
<u-input v-model="form.name" />
|
|
</view>
|
|
<u-button class="custom-style-button" shape="circle" size="default" @click="chuangjian">确定</u-button>
|
|
</u-popup>
|
|
<u-toast ref="uToast" />
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
name: '',
|
|
intro: '',
|
|
sex: ''
|
|
},
|
|
// 演示地址，请勿直接使用
|
|
action: 'http://www.example.com/upload',
|
|
fileList: [],
|
|
show: false,
|
|
rSelect: [],
|
|
is_edit: false,
|
|
}
|
|
},
|
|
props:['fileListes'],
|
|
methods: {
|
|
show_add() {
|
|
console.log(this.show)
|
|
this.show = !this.show
|
|
},
|
|
// 编辑标签
|
|
editing() {
|
|
this.is_edit = !this.is_edit;
|
|
},
|
|
// 颜色切换
|
|
tapInfo(e) {
|
|
if (this.rSelect.indexOf(e) == -1) {
|
|
console.log(e) //打印下标
|
|
this.rSelect.push(e); //选中添加到数组里
|
|
} else {
|
|
this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
|
|
}
|
|
this.$emit("qiehuan",this.rSelect)
|
|
},
|
|
// 删除标签
|
|
isTable(id,index) {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "是否删除此标签？",
|
|
success: (res) => {
|
|
console.log();
|
|
if (res.confirm) {
|
|
this.delTable(id,index);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
delTable(id,index) {
|
|
let me = this;
|
|
this.$u.post("Streaming/deltLabel", {label_id: id}).then(res => {
|
|
if (res.errCode == 0) {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'success'
|
|
});
|
|
this.fileListes.splice(index,1);
|
|
}
|
|
})
|
|
},
|
|
chuangjian(){
|
|
this.$u.api.createLivesp({spec_name:this.form.name}).then((res)=>{
|
|
if(res.errCode != 0){
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'error'
|
|
})
|
|
}else{
|
|
this.show_add();
|
|
this.fileListes.push(res.data);
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'success'
|
|
})
|
|
this.$emit("chuangjian")
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#release {
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
|
|
.flex-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.form-view {
|
|
background: rgba(255, 255, 255, 1);
|
|
border-radius: 6rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 24rpx;
|
|
padding: 8rpx 20rpx;
|
|
display: inline-block;
|
|
margin-bottom: 28rpx;
|
|
color: #333;
|
|
.close {
|
|
margin-left: 10rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.titles {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 1);
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
textarea {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.custom-style {
|
|
background: rgba(255, 120, 15, 1) !important;
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.custom-style-button {
|
|
background: rgba(255, 120, 15, 1) !important;
|
|
color: #fff !important;
|
|
font-size: 28rpx;
|
|
width: 200rpx;
|
|
margin-bottom: 23rpx;
|
|
line-height: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.cur {
|
|
color: white;
|
|
background-color: #ff5d00;
|
|
}
|
|
}
|
|
|
|
.u-mode-center-box {
|
|
padding: 120rpx;
|
|
|
|
.text {
|
|
font-size: 30rpx;
|
|
margin-top: 74rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.u-inputes {
|
|
margin: 30rpx 0;
|
|
border: 1px #ececec solid;
|
|
padding-left: 14rpx;
|
|
width: 420rpx;
|
|
}
|
|
</style>
|