|
|
|
@ -1,30 +1,37 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<uni-section title="选择图片分类上传" type="circle" padding> |
|
|
|
<view class="segmented-control"> |
|
|
|
<uni-segmented-control :current="typeCurrent" :values="typeList" :styleType="styleType" |
|
|
|
:active-color="activeColor" @clickItem="onClickType" /> |
|
|
|
</view> |
|
|
|
<uni-group mode="card"> |
|
|
|
<view class="example-body"> |
|
|
|
<uni-file-picker limit="9" title="最多选择9张图片" |
|
|
|
file-extname="png,jpg,gif,jpeg" mode="grid" |
|
|
|
file-mediatype="image" @success="successHandler" |
|
|
|
@fail="failHandler" @delete="deleteHandler" autoUpload="false" |
|
|
|
@select="selectHandler" :disabled="checkUpload"></uni-file-picker> |
|
|
|
</view> |
|
|
|
</uni-group> |
|
|
|
<view class="uploadNum">今日还可上传次数<span class="uploadText">{{getUploadNum}}</span>,已上传次数<span class="uploadText">{{uploadedNum}}</span></view> |
|
|
|
</uni-section> |
|
|
|
<uni-section title="选择图片标签" subTitle="最多选择3个" type="circle" padding> |
|
|
|
<uni-group mode="card"> |
|
|
|
<view class="segmented-control"> |
|
|
|
<view>标签列表</view> |
|
|
|
<uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList" @change="selectedSign" max="3"></uni-data-checkbox> |
|
|
|
</view> |
|
|
|
</uni-group> |
|
|
|
</uni-section> |
|
|
|
<button class="upLoadBtn" size="default" :loading="loadingFlag" @click="$noMultipleClicks(saveImg)" :disabled="checkUpload">点击上传</button> |
|
|
|
<view class="page-content"> |
|
|
|
<uni-section title="选择图片分类上传" type="circle"> |
|
|
|
</uni-section> |
|
|
|
<view class="section-content"> |
|
|
|
<view class="type-choice-comp"> |
|
|
|
<view class="type-item uni-secondary-color" v-for="(val, i) in typeList" |
|
|
|
:index="i" :key="i" |
|
|
|
:class="typeCurrent === i ? 'type-active' : ''" |
|
|
|
@click="onClickType({currentIndex: i})" |
|
|
|
> |
|
|
|
<view class="type-text">{{val}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uni-file-picker limit="9" title="最多选择9张图片" |
|
|
|
:file-extname="fileExtname" mode="grid" |
|
|
|
file-mediatype="image" |
|
|
|
@success="successHandler" |
|
|
|
@fail="failHandler" |
|
|
|
@delete="deleteHandler" |
|
|
|
autoUpload="false" |
|
|
|
@select="selectHandler" |
|
|
|
:disabled="checkUpload"> |
|
|
|
</uni-file-picker> |
|
|
|
<view class="uploadNum">今日还可上传次数<span class="uploadText"> {{ getUploadNum }} </span>，已上传次数<span class="uploadText"> {{ uploadedNum }} </span></view> |
|
|
|
</view> |
|
|
|
<uni-section title="选择图片标签" subTitle="最多选择3个" type="circle"> |
|
|
|
</uni-section> |
|
|
|
<view class="section-content"> |
|
|
|
<view class="segmented-control"> |
|
|
|
<uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList" @change="selectedSign" max="3"></uni-data-checkbox> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<button class="upLoadBtn" size="default" :loading="loadingFlag" @click="$noMultipleClicks(saveImg)" :disabled="checkUpload">点击上传</button> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -42,6 +49,7 @@ |
|
|
|
activeColor: '#007aff', |
|
|
|
typeCurrent: 0, |
|
|
|
typeId: 1, |
|
|
|
fileExtname: "png,jpg,jpeg", |
|
|
|
signList:[], |
|
|
|
signObject:{}, |
|
|
|
typeList:[], |
|
|
|
@ -83,7 +91,7 @@ |
|
|
|
}, |
|
|
|
//动态设置上传组件禁用 |
|
|
|
checkUpload(){ |
|
|
|
return this.uploadedNum >= 50? true:false; |
|
|
|
return this.uploadedNum >= 50; |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
@ -96,7 +104,7 @@ |
|
|
|
if (res.data.code === 200) { |
|
|
|
for (let s of res.data.data) { |
|
|
|
let signObject = {} |
|
|
|
signObject.text = s.name |
|
|
|
signObject.text = "#" +s.name |
|
|
|
signObject.value = s.id |
|
|
|
that.signList.push(signObject) |
|
|
|
} |
|
|
|
@ -149,6 +157,7 @@ |
|
|
|
onClickType(e2){ |
|
|
|
let that = this; |
|
|
|
that.flag = false; |
|
|
|
that.typeCurrent = e2.currentIndex; |
|
|
|
that.typeId = that.typeIdList[e2.currentIndex]; |
|
|
|
//console.log('typeId',that.typeId) |
|
|
|
uni.showLoading({ |
|
|
|
@ -300,26 +309,137 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
typeId(newValue) { |
|
|
|
if (newValue === 2) { //gif |
|
|
|
this.fileExtname = ".gif"; |
|
|
|
} else { |
|
|
|
this.fileExtname = "png,jpg,jpeg"; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.upLoadBtn{ |
|
|
|
width: 750rpx; |
|
|
|
height: 60rpx; |
|
|
|
background-color: royalblue; |
|
|
|
color: #ffffff; |
|
|
|
font-size: 30rpx; |
|
|
|
line-height: 62rpx; |
|
|
|
border-radius: 17rpx; |
|
|
|
margin-top:100rpx; |
|
|
|
} |
|
|
|
.uploadNum{ |
|
|
|
font-size: 25rpx; |
|
|
|
|
|
|
|
.uploadText{ |
|
|
|
color:red; |
|
|
|
} |
|
|
|
} |
|
|
|
<style lang="scss" scoped> |
|
|
|
.page-content { |
|
|
|
min-height: 100vh; |
|
|
|
background: $uni-bg-color; |
|
|
|
width: 750rpx; |
|
|
|
|
|
|
|
::v-deep .uni-section { |
|
|
|
background: none !important; |
|
|
|
margin-top: 0 !important; |
|
|
|
color: $uni-white; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .uni-section__content-title { |
|
|
|
color: $uni-white !important; |
|
|
|
font-size: 28rpx !important; |
|
|
|
} |
|
|
|
|
|
|
|
.section-content { |
|
|
|
width: 654rpx; |
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.type-choice-comp { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: nowrap; |
|
|
|
overflow: scroll; |
|
|
|
padding-top: 20rpx; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
|
|
|
|
.type-item { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
padding: 0 20rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
|
|
|
|
.type-text { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.type-active { |
|
|
|
background: $uni-primary; |
|
|
|
color: $uni-white !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .file-title { |
|
|
|
color: $uni-white !important; |
|
|
|
font-size: 24rpx !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .file-count { |
|
|
|
color: $uni-white !important; |
|
|
|
font-size: 24rpx !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .file-picker__box-content { |
|
|
|
border-color: $uni-secondary-color !important; |
|
|
|
} |
|
|
|
::v-deep .icon-add { |
|
|
|
background-color: $uni-secondary-color !important; |
|
|
|
} |
|
|
|
|
|
|
|
.uploadNum{ |
|
|
|
color: $uni-white; |
|
|
|
font-size: 24rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
.uploadText{ |
|
|
|
color: $uni-primary; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.upLoadBtn{ |
|
|
|
width: 654rpx; |
|
|
|
height: 100rpx; |
|
|
|
line-height: 100rpx; |
|
|
|
background: linear-gradient(180.00deg, $uni-primary 0%, $uni-primary 100%); |
|
|
|
margin: 60rpx auto; |
|
|
|
color: $uni-white; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
