You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
8.1 KiB
325 lines
8.1 KiB
<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>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getSignList,listType,insertTiktokImg,queryUploadNum
|
|
} from '@/api/index.js'
|
|
import {
|
|
deleteFile,uploadBatch
|
|
} from '@/api/common.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
styleType: 'button',
|
|
activeColor: '#007aff',
|
|
typeCurrent: 0,
|
|
typeId: 1,
|
|
signList:[],
|
|
signObject:{},
|
|
typeList:[],
|
|
typeIdList:[],
|
|
loadingFlag: false,
|
|
imgList:[],
|
|
signListSelected:[],
|
|
userInfo:{},
|
|
uploadedNum: 0,
|
|
noClick:true, //防止重复提交
|
|
}
|
|
},
|
|
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();
|
|
this.getTypeList();
|
|
this.queryUploadNum();
|
|
},
|
|
computed:{
|
|
//计算可上传次数
|
|
getUploadNum(){
|
|
return 50 - this.uploadedNum
|
|
},
|
|
//动态设置上传组件禁用
|
|
checkUpload(){
|
|
return this.uploadedNum >= 50? true:false;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
//获取标签列表
|
|
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)
|
|
}
|
|
//console.log('signList',that.signList)
|
|
} else {
|
|
uni.showModal({
|
|
content: '标签列表加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
|
|
//获取分类列表
|
|
async getTypeList(){
|
|
let that = this;
|
|
const res = await listType({})
|
|
if(res.data.code === 200){
|
|
for (let s of res.data.data) {
|
|
that.typeList.push(s.typeName);
|
|
that.typeIdList.push(s.id);
|
|
}
|
|
//console.log('分类列表',that.typeList)
|
|
//console.log('分类id列表',that.typeIdList)
|
|
}else{
|
|
uni.showModal({
|
|
content: '分类列表加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
|
|
//获取艺术家今日上传图片次数
|
|
async queryUploadNum(){
|
|
let that = this;
|
|
const checkParam = {
|
|
creatorId: that.userInfo.id
|
|
}
|
|
const res = await queryUploadNum(checkParam);
|
|
console.log(res)
|
|
if(res.data.code === 200){
|
|
that.uploadedNum = res.data.data;
|
|
}else{
|
|
uni.showModal({
|
|
content: '获取艺术家上传次数失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
//选中分类事件
|
|
onClickType(e2){
|
|
let that = this;
|
|
that.flag = false;
|
|
that.typeId = that.typeIdList[e2.currentIndex];
|
|
//console.log('typeId',that.typeId)
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
complete() {
|
|
uni.hideLoading();
|
|
},
|
|
});
|
|
},
|
|
|
|
//选中标签事件
|
|
selectedSign(e){
|
|
let that = this;
|
|
that.signListSelected = e.detail.value;
|
|
//console.log('that.signListSelected'+that.signListSelected);
|
|
},
|
|
//文件上传成功监听事件
|
|
successHandler(e){
|
|
console.log('文件上传成功！'+e)
|
|
},
|
|
//選擇文件监听事件
|
|
selectHandler(e){
|
|
console.log('选择了',e)
|
|
let that = this;
|
|
//检查是否可上传文件
|
|
if(that.uploadedNum >=50){
|
|
uni.showModal({
|
|
content: "当日已达上传图片上限,请明日再来！",
|
|
showCancel: false
|
|
});
|
|
return;
|
|
}
|
|
that.uploadHandler(e.tempFilePaths)
|
|
},
|
|
//文件上传失败监听事件
|
|
failHandler(e){
|
|
console.log('文件上传失败！'+e)
|
|
},
|
|
//文件删除监听事件
|
|
deleteHandler(e){
|
|
console.log('文件删除',e.tempFile.url)
|
|
//调用文件删除方法
|
|
const param = {
|
|
url: e.tempFile.url
|
|
};
|
|
deleteFile(param).then(res =>{
|
|
if(res.data.code != 200){
|
|
uni.showModal({
|
|
content: "删除失败！",
|
|
showCancel: false
|
|
});
|
|
}
|
|
})
|
|
},
|
|
//上传文件监听事件
|
|
uploadHandler:function(e){
|
|
let that = this;
|
|
uni.showLoading({
|
|
title: "上传中"
|
|
});
|
|
console.log('上传文件：',e)
|
|
const tempFilePaths = e;
|
|
for (var i = 0; i < tempFilePaths.length; i++) {
|
|
//const tempFile = e.tempFiles[i];
|
|
uni.uploadFile({
|
|
url: 'http://pc2zer.natappfree.cc/file/upload',
|
|
name: 'file',
|
|
// url: 'http://pc2zer.natappfree.cc/file/uploadBatch',
|
|
// name: 'files',
|
|
header:{
|
|
"Content-Type": "multipart/form-data"
|
|
},
|
|
filePath: tempFilePaths[i],
|
|
success:(uploadFileRes) => {
|
|
uni.hideLoading();
|
|
console.log('uploadFileRes',uploadFileRes);
|
|
const back = JSON.parse(uploadFileRes.data);
|
|
console.log("back",back)
|
|
if (back.code == 200) {
|
|
that.imgList.push(back.data);
|
|
}
|
|
//console.log('imgList',that.imgList);
|
|
},
|
|
fail:() => {
|
|
uni.hideLoading();
|
|
uni.showModal({
|
|
content: "上传失败，请联系客服！"
|
|
});
|
|
},
|
|
complete: function() {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
//提交表单
|
|
saveImg(){
|
|
let that = this;
|
|
//判断是否有上传图片
|
|
if(that.imgList.length === 0){
|
|
uni.showModal({
|
|
content: "请选择图片上传！",
|
|
showCancel: false,
|
|
});
|
|
return;
|
|
}
|
|
//检查是否可上传文件
|
|
if(that.uploadedNum >=50){
|
|
uni.showModal({
|
|
content: "当日已达上传图片上限,请明日再来！",
|
|
showCancel: false
|
|
});
|
|
return;
|
|
}else{
|
|
const param = {
|
|
creatorId: that.userInfo.id,
|
|
imgUrl: that.imgList,
|
|
signList: that.signListSelected,
|
|
status: 0,
|
|
typeId: that.typeId
|
|
}
|
|
insertTiktokImg(param).then(res =>{
|
|
console.log('res',res)
|
|
if(res.data.code === 200){
|
|
uni.showToast({
|
|
title: '上传成功!',
|
|
duration: 2000,
|
|
success:function(){
|
|
setTimeout(function () {
|
|
//返回主页，清空上传列表
|
|
that.imgList = []
|
|
that.signListSelected = []
|
|
that.typeId = 1
|
|
uni.reLaunch({
|
|
url: '../index'
|
|
});
|
|
}, 2000);
|
|
}
|
|
});
|
|
}else {
|
|
uni.showModal({
|
|
content: "艺术家图片上传失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
</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>
|
|
|