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.
398 lines
9.2 KiB
398 lines
9.2 KiB
<template>
|
|
<view class="container">
|
|
<template v-if="!isPublish">
|
|
<image :src="$picUrl+'/static/publish-banner.png'" mode="aspectFill" class="banner"></image>
|
|
<view class="publish-box">
|
|
<view class="upload-images">
|
|
<view v-for="(item, index) in imageList" :key="index" class="image-box">
|
|
<image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
|
|
<image src="/static/delete.png" mode="aspectFill" class="delete" @click.stop="deleteImage(index)"></image>
|
|
</view>
|
|
<view class="upload-btn" v-if="imageList.length < 9" @click="addImage">
|
|
<image src="/static/add.png" mode="aspectFill"></image>
|
|
<text class="tip">添加照片</text>
|
|
<text class="tip sub-tip">最多9张</text>
|
|
</view>
|
|
</view>
|
|
<textarea placeholder="请输入您想发布的内容哦~" placeholder-class="textarea-placeholer" id="" cols="30" rows="10" v-model="content" maxlength="3000"></textarea>
|
|
<view class="text-num">已写<text>{{ content.length }}</text>/3000个字</view>
|
|
</view>
|
|
<view class="file-upload">
|
|
<view v-for="(file, index) in fileList" :key="index" class="file-box" @click="previewFile(file.url)">
|
|
<image src="/static/xls.jpeg" mode="aspectFill"></image>
|
|
<text>{{ file.name }}</text>
|
|
<image src="/static/delete.png" mode="aspectFill" class="delete" @click.stop="deleteFile(index)"></image>
|
|
</view>
|
|
<view class="upload-btn" @click="addFile">上传附件</view>
|
|
</view>
|
|
<view class="good">
|
|
<view class="label">关联商品:</view>
|
|
<view class="content els" :style="{ color: !good.goods_name ? '#999999' : ''}" @click="selectGood">{{ good.goods_name || '请选择' }}</view>
|
|
</view>
|
|
<view class="cate">
|
|
<view class="label">文章类别:</view>
|
|
<view class="content">
|
|
<picker :range="cateList" mode="selector" :style="{ color: !cateList[cateIndex] ? '#999999' : ''}" @change="changePicker">{{ cateList[cateIndex] || '请选择' }}</picker>
|
|
<image src="/static/arrow-right.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="submit" @click="submit">发布</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="success">
|
|
<image :src="$picUrl+ '/static/success.png'" mode="aspectFill"></image>
|
|
<view class="success-tip">发布成功</view>
|
|
<text>您的作品已经发布成功，</text>
|
|
<text>快去看看吧~</text>
|
|
</view>
|
|
<view class="submit back" @click="back">完成</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import * as UploadApi from '@/api/upload'
|
|
import * as Api from '@/api/squareDynamic/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
imageList: [],
|
|
uploadImages: [],
|
|
content: '',
|
|
cateList: ['推荐', '精选','晒单', '日常', '文章'],
|
|
cateIndex: -1,
|
|
isPublish: false,
|
|
loading: false,
|
|
good: {},
|
|
fileList: [],
|
|
uploadFiles: [],
|
|
};
|
|
},
|
|
methods: {
|
|
addImage() {
|
|
const that = this;
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|
success({
|
|
tempFiles
|
|
}) {
|
|
console.log(that.imageList, tempFiles);
|
|
that.imageList.push(tempFiles[0].path)
|
|
that.upload(tempFiles[0], 'image')
|
|
}
|
|
});
|
|
},
|
|
async upload(path, type) {
|
|
const that = this;
|
|
// 批量上传
|
|
return new Promise((resolve, reject) => {
|
|
if (path) {
|
|
UploadApi.image([path])
|
|
.then(fileIds => {
|
|
console.log(fileIds);
|
|
if (type === 'image') {
|
|
that.uploadImages.push(fileIds[0]);
|
|
} else {
|
|
that.uploadFiles.push(fileIds[0])
|
|
}
|
|
resolve(fileIds)
|
|
})
|
|
.catch(reject)
|
|
} else {
|
|
resolve()
|
|
}
|
|
})
|
|
},
|
|
deleteImage(index) {
|
|
this.imageList.splice(index, 1);
|
|
this.uploadImages.splice(index, 1);
|
|
},
|
|
previewImage(item) {
|
|
uni.previewImage({
|
|
urls:this.imageList,
|
|
});
|
|
},
|
|
addFile() {
|
|
const that = this;
|
|
uni.chooseMessageFile({
|
|
count: 1,
|
|
success({
|
|
tempFiles
|
|
}) {
|
|
const nameArr = tempFiles[0].name.split('.');
|
|
const fileType = nameArr[nameArr.length - 1];
|
|
if (!['xls', 'xlsx'].includes(fileType)) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '文件格式错误'
|
|
});
|
|
}
|
|
console.log(tempFiles);
|
|
that.fileList.push({ url: tempFiles[0].path, name: tempFiles[0].name.replace(`.${fileType}`, '') });
|
|
that.upload(tempFiles[0], 'file');
|
|
},
|
|
fail(e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
},
|
|
deleteFile(index) {
|
|
this.fileList.splice(index, 1);
|
|
this.uploadFiles.splice(index, 1);
|
|
},
|
|
previewFile(url) {
|
|
uni.openDocument({
|
|
filePath: url,
|
|
});
|
|
},
|
|
changePicker(e) {
|
|
console.log(e);
|
|
this.cateIndex = e.detail.value;
|
|
},
|
|
submit() {
|
|
if (this.uploadImages.length === 0 && !this.content) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '请填写动态内容',
|
|
});
|
|
return false;
|
|
}
|
|
if (this.cateIndex < 0) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '请选择文章类别',
|
|
});
|
|
return false;
|
|
}
|
|
if (!this.loading) {
|
|
this.loading = true;
|
|
Api.publishDynamic({
|
|
imgs: this.uploadImages.join(','),
|
|
content: this.content,
|
|
cate: this.cateList[this.cateIndex],
|
|
goods_id: this.good.goods_id,
|
|
files: this.uploadFiles.join(',')
|
|
})
|
|
.then(res => {
|
|
console.log(res);
|
|
this.loading = false;
|
|
this.isPublish = true;
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
})
|
|
}
|
|
},
|
|
back() {
|
|
uni.navigateBack();
|
|
},
|
|
selectGood() {
|
|
uni.navigateTo({
|
|
url: `/pages/goods/list?from=dynamic`
|
|
})
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding: 20rpx 24rpx 50rpx;
|
|
background: #F7F8FA;
|
|
position: relative;
|
|
min-height: calc(100vh - 88rpx);
|
|
.banner {
|
|
width: 702rpx;
|
|
height: 200rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
.publish-box {
|
|
padding: 30rpx 30rpx 60rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
.upload-images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
>view {
|
|
margin: 0 12rpx 12rpx 0;
|
|
border-radius: 5rpx;
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.image-box {
|
|
position: relative;
|
|
image {
|
|
width: 206rpx;
|
|
height: 206rpx;
|
|
}
|
|
.delete {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
.upload-btn {
|
|
width: 206rpx;
|
|
height: 206rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #F8F8F8;
|
|
>image {
|
|
width: 46rpx;
|
|
height: 37rpx;
|
|
}
|
|
.tip {
|
|
margin: 19rpx 0 13rpx;
|
|
color: #333333;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
&.sub-tip {
|
|
color: #999999;
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
textarea {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
.textarea-placeholer {
|
|
color: #CCCCCC;
|
|
font-size: 30rpx;
|
|
}
|
|
.text-num {
|
|
position: absolute;
|
|
right: 31rpx;
|
|
bottom: 29rpx;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #999;
|
|
text {
|
|
color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
.cate, .good, .file-upload {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 120rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
image {
|
|
width: 11rpx;
|
|
height: 20rpx;
|
|
margin-left: 25rpx;
|
|
}
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
margin-left: 40rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.file-upload {
|
|
display: block;
|
|
padding: 30rpx;
|
|
height: fit-content;
|
|
.file-box {
|
|
border-bottom: 1px solid #ddd;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 10rpx 20rpx;
|
|
height: 80rpx;
|
|
margin-bottom: 20rpx;
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
>image {
|
|
&:first-child {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin: 0 10rpx 0 0;
|
|
}
|
|
}
|
|
>text {
|
|
width: calc(100% - 120rpx);
|
|
}
|
|
.delete {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
.upload-btn {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: #4680ff;
|
|
border-radius: 30rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.good {
|
|
height: fit-content;
|
|
.content {
|
|
padding: 30rpx 0;
|
|
}
|
|
}
|
|
.submit {
|
|
margin-top: 222rpx;
|
|
height: 98rpx;
|
|
background: #F34A40;
|
|
border-radius: 49rpx;
|
|
color: #FFFFFF;
|
|
font-size: 30rpx;
|
|
line-height: 98rpx;
|
|
text-align: center;
|
|
}
|
|
.success {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 140rpx;
|
|
>image {
|
|
width: 189rpx;
|
|
height: 166rpx;
|
|
}
|
|
.success-tip {
|
|
margin: 34rpx 0 28rpx;
|
|
color: #222222;
|
|
font-size: 36rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
uni-text {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
.back {
|
|
position: fixed;
|
|
left: 24rpx;
|
|
width: 702rpx;
|
|
bottom: 43rpx;
|
|
}
|
|
}
|
|
</style> |