147 lines
2.9 KiB
Vue
147 lines
2.9 KiB
Vue
<template>
|
|
<view id="release">
|
|
<!-- 标签 -->
|
|
<view>
|
|
<view class="titles">标签</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}}</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: []
|
|
}
|
|
},
|
|
props:['fileListes'],
|
|
methods: {
|
|
show_add() {
|
|
console.log(this.show)
|
|
this.show = !this.show
|
|
},
|
|
// 颜色切换
|
|
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)
|
|
},
|
|
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.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'success'
|
|
})
|
|
this.$emit("chuangjian")
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#release {
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
|
|
.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;
|
|
}
|
|
|
|
.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>
|