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