7 changed files with 373 additions and 45 deletions
@ -0,0 +1,263 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<view class="head"> |
||||
|
<view> |
||||
|
<uni-group mode="card"> |
||||
|
<uni-icons custom-prefix="iconfont" type="icon-dengpao" :color="primaryColor" size="20"></uni-icons><text class="textstyle text-white">小贴士：</text><br/> |
||||
|
<text class="textstyle">1. 艺术家们可在下方列表选择一个标签当作自定义标签的父标签。</text><br/> |
||||
|
<text class="textstyle">2. 自定义标签的父标签一次仅可选择一个。</text><br/> |
||||
|
<text class="textstyle">3. 自定义标签长度最长8个字符。</text><br/> |
||||
|
<text class="textstyle">4. 一次性推荐最多创建5个自定义标签。</text><br/> |
||||
|
<text class="textstyle">5. 每个标签顿号隔开。如：花、太阳、雨、你。</text><br/> |
||||
|
<text class="textstyle">6. 自定义标签审核通过后即有机会展示在图片上传界面。</text><br/> |
||||
|
<text class="textstyle">7. 大胆发挥你们的想象，尽情开始创作吧！</text><br/> |
||||
|
</uni-group> |
||||
|
</view> |
||||
|
|
||||
|
<view> |
||||
|
<uni-group mode="card"> |
||||
|
<view class="section-content"> |
||||
|
<view class="segmented-control"> |
||||
|
<uni-data-checkbox mode="tag" v-model="signListSelected" :localdata="signList" @change="selectedSign" max="1"></uni-data-checkbox> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-group> |
||||
|
<uni-group mode="card"> |
||||
|
<uni-forms validate-trigger='blur' :modelValue="signCustomList" label-position="top" labelWidth="80" ref="form"> |
||||
|
<uni-forms-item label="标签名" required name="name"> |
||||
|
<uni-easyinput v-model="signCustomList.name" placeholder="请选择一个父标签并输入自定义标签名" :clearable="false" :inputBorder="false" trim="all" :maxlength="50"/> |
||||
|
</uni-forms-item> |
||||
|
</uni-forms> |
||||
|
</uni-group> |
||||
|
|
||||
|
<view> |
||||
|
<button class="confirmBtn" size="default" @click="$noMultipleClicks(creatorSign)">确定添加</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
getSignList |
||||
|
} from '@/api/index.js' |
||||
|
import { |
||||
|
creatorSign |
||||
|
} from '@/api/userInfo.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
primaryColor: '#0b6375', |
||||
|
signList:[], |
||||
|
signListSelected: undefined, |
||||
|
noClick:true, //防止重复提交 |
||||
|
signCustomList:{ |
||||
|
name: undefined |
||||
|
}, |
||||
|
|
||||
|
rules:{ |
||||
|
name:{ |
||||
|
rules: [{ |
||||
|
required: true, |
||||
|
errorMessage: '请输入自定义标签' |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
//设置校验规则 |
||||
|
this.$refs.form.setRules(this.rules); |
||||
|
}, |
||||
|
created() { |
||||
|
const userInfo = uni.getStorageSync('userInfo') |
||||
|
if (!userInfo) { |
||||
|
console.log('havent userInfo') |
||||
|
uni.showModal({ |
||||
|
content: '艺术家账户过期,请重新登录！', |
||||
|
showCancel: false, |
||||
|
success() { |
||||
|
//没有缓存则跳转登录页面 |
||||
|
uni.reLaunch({ |
||||
|
url: '/pages/login/login' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
this.userInfo = userInfo; |
||||
|
console.log('have userInfo') |
||||
|
} |
||||
|
this.getSignList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
//选中标签事件 |
||||
|
selectedSign(e){ |
||||
|
let that = this; |
||||
|
that.signListSelected = e.detail.value; |
||||
|
//console.log('that.signListSelected',that.signListSelected); |
||||
|
}, |
||||
|
|
||||
|
//获取标签列表 |
||||
|
async getSignList(){ |
||||
|
let that = this; |
||||
|
const res = await getSignList({}) |
||||
|
if (res.data.code === 200) { |
||||
|
for (let s of res.data.data) { |
||||
|
let signObject = {} |
||||
|
signObject.text = "#" +s.name |
||||
|
signObject.value = s.id |
||||
|
that.signList.push(signObject) |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
content: '标签列表加载失败！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//艺术家创作标签 |
||||
|
creatorSign(){ |
||||
|
const that = this; |
||||
|
if(that.signCustomList.name == null || that.signCustomList.name == '' || that.signCustomList.name == "" || that.signCustomList.name == undefined){ |
||||
|
uni.showModal({ |
||||
|
content: '请输入自定义标签名！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
}else if(that.signListSelected == null || that.signListSelected == undefined){ |
||||
|
uni.showModal({ |
||||
|
content: '请选择父标签后再编辑！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
}else{ |
||||
|
uni.showLoading({ |
||||
|
title: "添加中", |
||||
|
mask: true, |
||||
|
success() { |
||||
|
let param = { |
||||
|
name: that.signCustomList.name, |
||||
|
parentId: that.signListSelected |
||||
|
} |
||||
|
creatorSign(param).then(res =>{ |
||||
|
if (res.data.code === 200) { |
||||
|
uni.hideLoading(); |
||||
|
//清空选择项 |
||||
|
that.signCustomList.name = undefined, |
||||
|
that.signListSelected = undefined, |
||||
|
//跳转上传页 |
||||
|
uni.reLaunch({ |
||||
|
url: '/pages/index/upload/upload', |
||||
|
success() { |
||||
|
uni.showToast({ |
||||
|
title: '添加成功!', |
||||
|
icon: 'success', |
||||
|
duration: 1500 |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
}else{ |
||||
|
uni.hideLoading(); |
||||
|
uni.showModal({ |
||||
|
content: res.data.msg, |
||||
|
showCancel: false, |
||||
|
success() { |
||||
|
//清空选择项 |
||||
|
that.signCustomList.name = undefined |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.container { |
||||
|
width: 670rpx; |
||||
|
height: 100vh; |
||||
|
margin: 0 auto; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.textstyle{ |
||||
|
font-size: 26rpx; |
||||
|
color: $uni-secondary-color; |
||||
|
padding-top: 10rpx; |
||||
|
padding-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.text-white { |
||||
|
color: $uni-white !important; |
||||
|
} |
||||
|
|
||||
|
.section-content { |
||||
|
width: 654rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.segmented-control { |
||||
|
|
||||
|
|
||||
|
::v-deep .checklist-box { |
||||
|
border: none !important; |
||||
|
background: none !important; |
||||
|
margin-right: 0 !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .checklist-text { |
||||
|
color: $uni-secondary-color !important; |
||||
|
font-size: 24rpx !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .is-checked .checklist-text { |
||||
|
color: $uni-primary !important; |
||||
|
font-size: 24rpx !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .is-disable .checklist-text { |
||||
|
color: $uni-base-color !important; |
||||
|
font-size: 24rpx !important; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.head { |
||||
|
|
||||
|
::v-deep .uni-group--card { |
||||
|
margin: 0 0 40rpx 0 !important; |
||||
|
background: $uni-bg-base-color; |
||||
|
} |
||||
|
|
||||
|
::v-deep .uni-tag { |
||||
|
border-width: 2rpx !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .uni-forms-item__label { |
||||
|
color: $uni-white; |
||||
|
} |
||||
|
|
||||
|
::v-deep input { |
||||
|
background: $uni-bg-base-color !important; |
||||
|
border: 0 !important; |
||||
|
color: $uni-white !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .uni-file-picker__header { |
||||
|
.file-title { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
.file-count { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue