14 changed files with 762 additions and 941 deletions
@ -1,180 +1,79 @@ |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
// export default { |
|||
// data() { |
|||
// return { |
|||
// hotCreatorList: [], |
|||
// 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; |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: {}, |
|||
} |
|||
}, |
|||
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> |
|||
|
|||
@ -1,25 +1,306 @@ |
|||
<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="saveImg" :disabled="checkUpload">点击上传</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getSignList |
|||
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 |
|||
} |
|||
}, |
|||
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: { |
|||
|
|||
} |
|||
//获取标签列表 |
|||
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> |
|||
|
|||
<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> |
|||
|
|||
Loading…
Reference in new issue