bnyer-cloud-hub/pages/index/upload/customSign.vue

<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>