285 lines
7.6 KiB
Vue
285 lines
7.6 KiB
Vue
<template>
|
||
<!-- 首页/发布页 -->
|
||
<view class="release">
|
||
<!-- 自定义导航栏 -->
|
||
<u-navbar :autoBack="true" placeholder>
|
||
<view slot="center">
|
||
<view class="flex justify-center items-center text-30 w-100" @click="changeAction">
|
||
{{actionCurrent}}
|
||
<view class="iconfont iconxiala2"></view>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
<view class="wrap-card">
|
||
<!-- 文本域 -->
|
||
<view class="text-gray-500 my-20">
|
||
想说点啥
|
||
</view>
|
||
<u-textarea v-model="textContent" maxlength='100' height="100" placeholder="随便说点儿什么吧..." count
|
||
confirmType="done">
|
||
</u-textarea>
|
||
<!-- 上传多图 -->
|
||
<view class="text-gray-500 my-20">
|
||
分享图片
|
||
</view>
|
||
<u-upload ref="upload" :fileList="imgList" @afterRead="handUpload" @delete="deletePic" name="1" multiple
|
||
:maxCount="9" previewFullImage>
|
||
</u-upload>
|
||
</view>
|
||
<!-- 底部操作栏 -->
|
||
<view class="bottom-handle">
|
||
<view class="iconfont iconcaidan text-50 mx-10 animate__animated" hover-class="animate__jello"></view>
|
||
<view class="iconfont iconhuati text-50 mx-10 animate__animated" hover-class="animate__jello"></view>
|
||
<view class="iconfont icontupian text-50 mx-10 animate__animated" hover-class="animate__jello"
|
||
@click="handleBottom('upload')"></view>
|
||
<view class="ml-auto mr-20">
|
||
<u-button text="发布" color="linear-gradient(to right, #dcc20b, #01906c)"
|
||
:customStyle="{width:'150rpx',height:'60rpx'}" @click="submit"></u-button>
|
||
</view>
|
||
</view>
|
||
<!-- 中间弹出公告栏 -->
|
||
<u-popup :show="popupShow" round="20" mode="center" :customStyle="{width:'80%'}">
|
||
<view class="flex flex-col justify-center items-center m-20">
|
||
<view class="flex justify-center items-center">
|
||
<image class="notice-img" src="/static/img/demo/winter.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="flex flex-col my-20">
|
||
<view>严禁发表以下信息：</view>
|
||
<view>1、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的信息</view>
|
||
<view>2、侮辱或者诽谤他人，侵害他人合法权益的信息</view>
|
||
<view>3、煽动民族仇恨、民族歧视，破坏民族团结的信息</view>
|
||
</view>
|
||
<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="closePopup">朕知道了</u-button>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 底部弹出操作菜单 -->
|
||
<u-action-sheet :description="actionDesc" round="20" :actions="actionList" :show="actionShow"
|
||
:safeAreaInsetBottom="true" cancelText="取消" @select="selectAction" @close="actionShow = false">
|
||
</u-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
textContent: '',
|
||
// 操作菜单
|
||
actionCurrent: '所有人可见',
|
||
actionDesc: '请设置您本条信息的访问权限',
|
||
actionList: [{
|
||
name: '所有人可见'
|
||
},
|
||
{
|
||
name: '仅好友可见'
|
||
},
|
||
{
|
||
name: '仅自己可见'
|
||
},
|
||
],
|
||
actionShow: false,
|
||
// 图片列表
|
||
imgList: [{
|
||
url: '/static/img/demo/winter.png',
|
||
},
|
||
{
|
||
url: '/static/img/demo/winter.png',
|
||
}
|
||
],
|
||
// 弹窗公告
|
||
popupShow: true,
|
||
// 按钮配置
|
||
btnStyle: {
|
||
width: "450rpx",
|
||
height: "75rpx",
|
||
background: "linear-gradient(-45deg,#01906c,#34D399)",
|
||
color: "#FFFFFF",
|
||
fontSize: "30rpx"
|
||
},
|
||
// 草稿箱提示
|
||
draftShow: true,
|
||
form: {
|
||
imgs: ''
|
||
}
|
||
}
|
||
},
|
||
// 监听返回按钮
|
||
onBackPress() {
|
||
// 如果有内容
|
||
if ((this.textContent || this.imgList.length) && this.draftShow) {
|
||
this.tipDraft()
|
||
return true // 不执行默认返回
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.getStorage({
|
||
key: 'releaseDraft',
|
||
success: (res) => {
|
||
const data = JSON.parse(res.data)
|
||
this.textContent = data.textContent
|
||
this.imgList = data.imgList
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
// 提示保存为草稿
|
||
tipDraft() {
|
||
uni.showModal({
|
||
content: "是否要保存为草稿",
|
||
cancelText: "不保存",
|
||
confirmText: "保存",
|
||
success: res => {
|
||
// 确定
|
||
if (res.confirm) this.saveDraft()
|
||
// 取消
|
||
else uni.removeStorage({
|
||
key: 'releaseDraft'
|
||
})
|
||
this.draftShow = false
|
||
uni.navigateBack()
|
||
}
|
||
})
|
||
},
|
||
// 保存草稿
|
||
saveDraft() {
|
||
uni.setStorage({
|
||
key: 'releaseDraft',
|
||
data: JSON.stringify({
|
||
textContent: this.textContent,
|
||
imgList: this.imgList
|
||
})
|
||
})
|
||
},
|
||
// 提交
|
||
submit() {
|
||
this.draftShow = false
|
||
this.$u.route({
|
||
type: 'navigateBack'
|
||
})
|
||
},
|
||
// 选择访问
|
||
changeAction() {
|
||
this.actionShow = true
|
||
},
|
||
// 选中操作菜单
|
||
selectAction(e) {
|
||
this.actionCurrent = e.name
|
||
this.actionShow = false
|
||
},
|
||
// 关闭公告
|
||
closePopup() {
|
||
this.popupShow = false
|
||
},
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this.imgList.splice(event.index, 1)
|
||
},
|
||
// 自动上传
|
||
async autoUpload(event) {
|
||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let chooseList = [].concat(event.file) // 当前选中列表
|
||
let fileListLen = this.imgList.length // 原始文件列表
|
||
// 将选中的文件添加到文件列表
|
||
chooseList.map((item) => {
|
||
this.imgList.push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
// 遍历选中的文件依次上传
|
||
for (let i = 0; i < chooseList.length; i++) {
|
||
// 上传成功后返回数据
|
||
const url = await this.uploadFilePromise(chooseList[i].url)
|
||
// 获取当前文件信息：原始文件列表长度，就是当前新增开始的索引
|
||
let item = this.imgList[fileListLen]
|
||
// 改变最后一个文件信息：状态、url
|
||
this.imgList.splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url
|
||
}))
|
||
// 文件索引后移一位
|
||
fileListLen++
|
||
}
|
||
},
|
||
// 手动上传
|
||
async handUpload(event) {
|
||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let chooseList = [].concat(event.file) // 当前选中列表
|
||
let fileListLen = this.imgList.length // 原始文件列表
|
||
// 将选中的文件添加到文件列表
|
||
chooseList.map((item) => {
|
||
this.imgList.push({
|
||
...item,
|
||
status: '',
|
||
message: ''
|
||
})
|
||
})
|
||
},
|
||
// 手动上传提交
|
||
async handUploadSubmit() {
|
||
if (!this.imgList.length) return uni.showToast({
|
||
title: '请选择文件',
|
||
icon: 'none'
|
||
})
|
||
let imgList = []
|
||
for (let index of this.imgList) {
|
||
let url = this.imgList[index].url
|
||
// 上传本地文件
|
||
if (url.startsWith('blob')) url = await this.uploadFilePromise(url)
|
||
imgList[index] = url
|
||
}
|
||
this.form.imgs = imgList.join(',')
|
||
},
|
||
// 上传图片
|
||
uploadFilePromise(url) {
|
||
return new Promise((resolve, reject) => {
|
||
let a = uni.uploadFile({
|
||
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||
filePath: url,
|
||
name: 'file',
|
||
formData: {
|
||
user: 'test'
|
||
},
|
||
success: (res) => {
|
||
setTimeout(() => {
|
||
resolve(res.data.url)
|
||
}, 1000)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
// 底部操作
|
||
handleBottom(type) {
|
||
switch (type) {
|
||
case 'upload':
|
||
this.$refs.upload.chooseFile()
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.release {
|
||
.notice-img {
|
||
height: 300rpx;
|
||
width: 300rpx;
|
||
}
|
||
|
||
.bottom-handle {
|
||
border-top: 1px solid $uni-border-color1;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 85rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|