14 changed files with 762 additions and 941 deletions
@ -1,180 +1,79 @@ |
|||||
<template> |
<template> |
||||
<view class="container"> |
<view class="back"> |
||||
我是邀请更多页面 |
<view class="back-top"></view> |
||||
|
<view class="uni-radius back-con uni-shadow-sm"> |
||||
|
<view class=""> |
||||
|
<view class="back-con-top"> 邀请码 </view> |
||||
|
<view class="inviteCode"> |
||||
|
{{userInfo.inviteCode}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="border"></view> |
||||
|
<view class=""> |
||||
|
<view class="back-con-top"> 邀请链接 </view> |
||||
|
<view class="inviteUrl"> |
||||
|
http://AFJIASD?code={{userInfo.inviteCode}} |
||||
|
</view> |
||||
|
<button class="">点击复制</button> |
||||
|
</view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
// export default { |
export default { |
||||
// data() { |
data() { |
||||
// return { |
return { |
||||
// hotCreatorList: [], |
userInfo: {}, |
||||
// isTarget: true, |
|
||||
// showChoiceness:false |
|
||||
// } |
|
||||
// }, |
|
||||
// // 下拉刷新 |
|
||||
// onPullDownRefresh() { |
|
||||
// this.showChoiceness = false |
|
||||
// uni.stopPullDownRefresh() |
|
||||
// }, |
|
||||
// created() { |
|
||||
// const userInfo = uni.getStorageSync('userInfo') |
|
||||
// if (!userInfo) { |
|
||||
// console.log('havent userInfo') |
|
||||
// this.getUserInfo() |
|
||||
// } else { |
|
||||
// console.log('have userInfo') |
|
||||
// } |
|
||||
// }, |
|
||||
// onPageScroll(e) { |
|
||||
// // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
|
||||
|
|
||||
// if (e.scrollTop > 160) { |
|
||||
// this.showChoiceness = true |
|
||||
// // uni.redirectTo({ |
|
||||
// // url: '../index/choiceness' |
|
||||
// // }) |
|
||||
// } |
|
||||
// }, |
|
||||
// methods: { |
|
||||
// // 搜索 |
|
||||
// search(res) { |
|
||||
// if (res.value) { |
|
||||
// console.log('search', res.value) |
|
||||
// this.goCreatorDetail(res.value) |
|
||||
// } else { |
|
||||
// uni.showToast({ |
|
||||
// title: '请输入艺术家代号', |
|
||||
// icon: 'none' |
|
||||
// }) |
|
||||
// } |
|
||||
|
|
||||
// }, |
|
||||
// // 获取用户信息 |
|
||||
// getUserInfo() { |
|
||||
// wx.login({ |
|
||||
// force: true, |
|
||||
// success: res => { |
|
||||
// wx.getUserInfo({ |
|
||||
// withCredentials: true, |
|
||||
// success: userInfo => { |
|
||||
// const params = { |
|
||||
// code: res.code, |
|
||||
// encryptedData: userInfo.encryptedData, |
|
||||
// iv: userInfo.iv |
|
||||
// } |
|
||||
// // 用户授权登录 |
|
||||
// console.log('params',params); |
|
||||
// loginWx(params).then(res => { |
|
||||
// if (res.data.code === 200) { |
|
||||
// uni.setStorage({ |
|
||||
// key: 'userInfo', |
|
||||
// data: res.data.data.userInfo, |
|
||||
// }) |
|
||||
// } else { |
|
||||
// uni.showToast({ |
|
||||
// title: res.data.msg, |
|
||||
// icon: 'none' |
|
||||
// }) |
|
||||
// } |
|
||||
// }).catch(res => {}) |
|
||||
// console.log(`getUserInfo 调用成功`, userInfo); |
|
||||
// }, |
|
||||
// fail(userInfo) { |
|
||||
// console.log(`getUserInfo 调用失败`); |
|
||||
// }, |
|
||||
// }); |
|
||||
// }, |
|
||||
// fail(res) { |
|
||||
// console.log(`login 调用失败`); |
|
||||
// }, |
|
||||
// }); |
|
||||
|
|
||||
// }, |
|
||||
|
|
||||
|
|
||||
// // 滚动监听 |
|
||||
// handleScroll() { |
|
||||
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop |
|
||||
// console.log(scrollTop) |
|
||||
// }, |
|
||||
// }, |
|
||||
// } |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less"> |
|
||||
.container { |
|
||||
.top { |
|
||||
width: 100vw; |
|
||||
|
|
||||
image { |
|
||||
width: 100vw; |
|
||||
height: 400rpx; |
|
||||
} |
|
||||
|
|
||||
.uni-searchbar { |
|
||||
border: 1px solid #11A8FD; |
|
||||
margin: 0 40rpx; |
|
||||
border-radius: 16rpx; |
|
||||
padding: 0; |
|
||||
|
|
||||
.uni-searchbar__box { |
|
||||
padding: 0; |
|
||||
border-radius: 16rpx !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
>text { |
|
||||
font-weight: bold; |
|
||||
font-size: 14px; |
|
||||
display: block; |
|
||||
text-align: center; |
|
||||
padding-top: 40rpx; |
|
||||
padding-bottom: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.user-list { |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
overflow-x: auto; |
|
||||
|
|
||||
.user-list-box { |
|
||||
width: 140rpx; |
|
||||
padding: 20rpx; |
|
||||
text-align: center; |
|
||||
|
|
||||
image { |
|
||||
width: 100rpx; |
|
||||
height: 100rpx; |
|
||||
border-radius: 100rpx; |
|
||||
} |
|
||||
|
|
||||
text { |
|
||||
font-size: 24rpx; |
|
||||
color: #1E1E1E; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.middle { |
|
||||
text-align: center; |
|
||||
height: calc(100vh - 248rpx); |
|
||||
padding-top: 40rpx; |
|
||||
|
|
||||
text { |
|
||||
font-weight: bold; |
|
||||
font-size: 14px; |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
image { |
|
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
} |
} |
||||
|
}, |
||||
|
created() { |
||||
|
const userInfoSync = uni.getStorageSync('userInfo') |
||||
|
this.userInfo = userInfoSync |
||||
} |
} |
||||
} |
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.back { |
||||
|
width: 100%; |
||||
|
height: 320px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.back-con { |
||||
|
width: 95%; |
||||
|
left: 50%; |
||||
|
top: 42%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
background-color: white; |
||||
|
position: relative; |
||||
|
height: 440rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.back2 { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.back-top { |
||||
|
width: 100%; |
||||
|
position: absolute; |
||||
|
height: 240rpx; |
||||
|
background: #416bdc; |
||||
|
} |
||||
|
.back-con-top { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: 600; |
||||
|
margin: 40rpx 0 30rpx 0; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.border { |
||||
|
width: 95%; |
||||
|
height: 2rpx; |
||||
|
margin-top: 19rpx; |
||||
|
background-color: rgb(165, 165, 165); |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,25 +1,306 @@ |
|||||
<template> |
<template> |
||||
<view> |
<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="saveImg" :disabled="checkUpload">点击上传</button> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { |
import { |
||||
getSignList |
getSignList,listType,insertTiktokImg,queryUploadNum |
||||
} from '@/api/index.js' |
} from '@/api/index.js' |
||||
|
import { |
||||
|
deleteFile,uploadBatch |
||||
|
} from '@/api/common.js' |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
styleType: 'button', |
||||
|
activeColor: '#007aff', |
||||
|
typeCurrent: 0, |
||||
|
typeId: 1, |
||||
|
signList:[], |
||||
|
signObject:{}, |
||||
|
typeList:[], |
||||
|
typeIdList:[], |
||||
|
loadingFlag: false, |
||||
|
imgList:[], |
||||
|
signListSelected:[], |
||||
|
userInfo:{}, |
||||
|
uploadedNum: 0 |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getSignList(); |
||||
|
this.getTypeList(); |
||||
|
const userInfoSync = uni.getStorageSync("userInfo"); |
||||
|
this.userInfo = userInfoSync; |
||||
|
this.queryUploadNum(); |
||||
|
}, |
||||
|
computed:{ |
||||
|
//计算可上传次数 |
||||
|
getUploadNum(){ |
||||
|
return 50 - this.uploadedNum |
||||
|
}, |
||||
|
//动态设置上传组件禁用 |
||||
|
checkUpload(){ |
||||
|
return this.uploadedNum >= 50? true:false; |
||||
} |
} |
||||
|
|
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
|
|
||||
} |
//获取标签列表 |
||||
|
async getSignList(){ |
||||
|
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 |
||||
|
this.signList.push(signObject) |
||||
|
} |
||||
|
console.log('signList',this.signList) |
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
content: '标签列表加载失败！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//获取分类列表 |
||||
|
async getTypeList(){ |
||||
|
const res = await listType({}) |
||||
|
if(res.data.code === 200){ |
||||
|
for (let s of res.data.data) { |
||||
|
this.typeList.push(s.typeName); |
||||
|
this.typeIdList.push(s.id); |
||||
|
} |
||||
|
console.log('分类列表',this.typeList) |
||||
|
console.log('分类id列表',this.typeIdList) |
||||
|
}else{ |
||||
|
uni.showModal({ |
||||
|
content: '分类列表加载失败！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//获取艺术家今日上传图片次数 |
||||
|
async queryUploadNum(){ |
||||
|
const checkParam = { |
||||
|
creatorId: this.userInfo.id |
||||
|
} |
||||
|
const res = await queryUploadNum(checkParam); |
||||
|
console.log(res) |
||||
|
if(res.data.code === 200){ |
||||
|
this.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://48uu7a.natappfree.cc/file/upload', |
||||
|
name: 'file', |
||||
|
//url: 'http://localhost:7010/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> |
</script> |
||||
|
|
||||
<style> |
<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> |
</style> |
||||
|
|||||
Loading…
Reference in new issue