1171 lines
27 KiB
Vue
1171 lines
27 KiB
Vue
<template>
|
|
<view class="b_col_eee body">
|
|
<uni-nav-bar
|
|
leftText="取消"
|
|
left-icon="left"
|
|
right-text="下一步"
|
|
backgroundColor="#ffffff"
|
|
color="#000000"
|
|
@clickRight="toEditSetting()"
|
|
@clickLeft="back()">
|
|
</uni-nav-bar>
|
|
|
|
<uni-popup
|
|
ref="alertDialog"
|
|
type="dialog">
|
|
<uni-popup-dialog
|
|
type="info"
|
|
cancelText="放弃草稿"
|
|
confirmText="编辑草稿"
|
|
title="提示"
|
|
content="文章有草稿未完成,是否继续编辑草稿？"
|
|
@confirm="dialogConfirm"
|
|
@close="dialogClose">
|
|
</uni-popup-dialog>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="del_popup" type='bottom'>
|
|
<view class="del-popup">
|
|
<view class="margin_20_top padding_20 color-666 b_col_fff">
|
|
确认要删除当前文章段落
|
|
</view>
|
|
<view class="margin_4 padding_20 color-red b_col_fff" @click="delItem()">
|
|
<uni-icons type="trash" size="30" color="#f00"></uni-icons>
|
|
删除
|
|
</view>
|
|
<view class="text-center padding_20 margin_10_top b_col_fff" @click="close_del_popup()">
|
|
取消
|
|
</view>
|
|
</view>
|
|
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="popup" type='bottom'>
|
|
<view class="b_col_fff">
|
|
<view class="grid-container">
|
|
<view v-for="(item, index) in cmsType" :key="index" :class="{
|
|
'grid-item': true,
|
|
}" @click="addItem(item.type)">
|
|
<view class="grid-item-box">
|
|
<image :src="item.src" class="image" mode="aspectFill" />
|
|
<text class="text">
|
|
{{ item.text }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<view
|
|
@click="toTitleStyle()"
|
|
class="margin_50 b_col_fff padding_10"
|
|
style="display: flex; align-items: center; gap: 20rpx;">
|
|
<uni-easyinput
|
|
|
|
:inputBorder="false"
|
|
disabled
|
|
v-model="cms.title"
|
|
placeholder="请输入标题"
|
|
style="flex: 1;"
|
|
></uni-easyinput>
|
|
<view class="border_ff0" style="white-space: nowrap;">
|
|
<uni-icons type="gear" size="20" color="993300"></uni-icons>
|
|
标题样式
|
|
</view>
|
|
</view>
|
|
|
|
<view class="container">
|
|
<button class="add-button" @click="addEditItem(0)"></button>
|
|
</view>
|
|
|
|
<view v-for="(item, index) in cms.cmsLst" :key="index">
|
|
<view class="margin_20 b_col_fff edit_item padding_10">
|
|
|
|
<view class="part part1">
|
|
|
|
<view v-if="item.type === 'image'" @click="updateImage(index)">
|
|
<cloud-image
|
|
mode="scaleToFill"
|
|
width="100%"
|
|
height="200rpx"
|
|
v-if="item.image.src"
|
|
:src="item.image.src">
|
|
</cloud-image>
|
|
<view class="not-image" v-else>
|
|
<cloud-image
|
|
mode="scaleToFill"
|
|
width="100%"
|
|
height="150rpx"
|
|
:src="not_image">
|
|
</cloud-image>
|
|
<view class="not-font">
|
|
添加图片
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="video-container"
|
|
v-if="item.type === 'video'"
|
|
@click="updateVideoItem(index)">
|
|
<cloud-image
|
|
v-if="item.video.poster"
|
|
mode="scaleToFill"
|
|
width="100%"
|
|
height="200rpx"
|
|
:src="item.video.poster">
|
|
</cloud-image>
|
|
<cloud-image
|
|
class="icon-play"
|
|
mode="scaleToFill"
|
|
width="100rpx"
|
|
height="100rpx"
|
|
src="https://qnycdn.mymoyu.top/static/icon/stop.png">
|
|
</cloud-image>
|
|
</view>
|
|
|
|
<view
|
|
v-if="item.type === 'vote'">
|
|
<view class="not-image">
|
|
<view class="not-image-icon">
|
|
<cloud-image
|
|
mode="scaleToFill"
|
|
width="100%"
|
|
|
|
height="150rpx"
|
|
:src="is_vote">
|
|
</cloud-image>
|
|
</view>
|
|
<view class="not-font">
|
|
投票
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="part part2" @click="to(item.type, index)">
|
|
<view class="" v-if="item.type === 'vote'">
|
|
<view v-if="item.text">
|
|
{{ item.text }}
|
|
</view>
|
|
<view class="font-info" v-else>
|
|
点击添加文字
|
|
</view>
|
|
</view>
|
|
|
|
<view class="" v-else>
|
|
<view v-if="item.text">
|
|
{{ item.text }}
|
|
</view>
|
|
<view class="font-info" v-else>
|
|
点击添加文字
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="part part3">
|
|
<uni-icons
|
|
type="closeempty"
|
|
class="sub-area"
|
|
@click="open_del_popup(index)">
|
|
</uni-icons>
|
|
<uni-icons
|
|
type="bars"
|
|
class="sub-area">
|
|
</uni-icons>
|
|
<view class="sub-area item-no">
|
|
{{ index + 1 }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="container">
|
|
<button
|
|
class="add-button"
|
|
@click="addEditItem(index + 1)">
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
|
|
import cloudImage from "@/components/cloud-image.vue"
|
|
export default {
|
|
components: {
|
|
cloudImage
|
|
},
|
|
onHide() {
|
|
clearInterval(this.saveInterval);
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.saveInterval);
|
|
clearTimeout(this.saveInterval);
|
|
},
|
|
onReady() {
|
|
this.$refs.alertDialog.open();
|
|
this.saveInterval = setInterval(this.saveCms, 10000);
|
|
},
|
|
onLoad(e) {
|
|
console.log(e)
|
|
|
|
|
|
},
|
|
onShow(e) {
|
|
console.log(e)
|
|
|
|
let cms = uni.getStorageSync("cms");
|
|
if (cms) {
|
|
this.cms = cms;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
saveInterval: {},
|
|
|
|
is_vote: "https://qnycdn.mymoyu.top/static/icon/is_vote.png",
|
|
not_image:"https://qnycdn.mymoyu.top/static/icon/not_image.png",
|
|
// cmsType: [{
|
|
// type: "text",
|
|
// text: "文字",
|
|
// src: "https://qnycdn.mymoyu.top/static/icon/text.png",
|
|
// },
|
|
// {
|
|
// type: "video",
|
|
// text: "视频",
|
|
// src: "https://qnycdn.mymoyu.top/static/icon/video.png",
|
|
// },
|
|
// {
|
|
// type: "image",
|
|
// text: "图片",
|
|
// src: "https://qnycdn.mymoyu.top/static/icon/image.png",
|
|
// },
|
|
// {
|
|
// type: "vote",
|
|
// text: "投票",
|
|
// src: "https://qnycdn.mymoyu.top/static/icon/vote.png",
|
|
// },
|
|
// {
|
|
// type: "position",
|
|
// text: "位置",
|
|
// src: "https://qnycdn.mymoyu.top/static/icon/position.png",
|
|
// },
|
|
// {
|
|
// type: "title",
|
|
// text: "标题",
|
|
// src: "https://qnycdn.mymoyu.top/static/icon/title.png",
|
|
// },
|
|
// ],
|
|
cmsType: [{
|
|
type: "text",
|
|
text: "文字",
|
|
src: "https://qnycdn.mymoyu.top/static/icon/text.png",
|
|
},
|
|
{
|
|
type: "video",
|
|
text: "视频",
|
|
src: "https://qnycdn.mymoyu.top/static/icon/video.png",
|
|
},
|
|
{
|
|
type: "image",
|
|
text: "图片",
|
|
src: "https://qnycdn.mymoyu.top/static/icon/image.png",
|
|
},
|
|
{
|
|
type: "vote",
|
|
text: "投票",
|
|
src: "https://qnycdn.mymoyu.top/static/icon/vote.png",
|
|
},
|
|
{
|
|
type: "title",
|
|
text: "小标题",
|
|
src: "https://qnycdn.mymoyu.top/static/icon/title.png",
|
|
},
|
|
],
|
|
cms: {
|
|
title_html: "",
|
|
title_delta: {
|
|
|
|
},
|
|
title: "",
|
|
cmsLst: [
|
|
]
|
|
},
|
|
selectIndex: 0,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
to(type, index) {
|
|
console.log(index)
|
|
if (type === 'vote') {
|
|
this.toVote(index);
|
|
} else {
|
|
this.toeditText(index);
|
|
}
|
|
},
|
|
|
|
toEditSetting() {
|
|
this.saveCms();
|
|
uni.navigateTo({
|
|
url:"/pages2/editCms/editSetting"
|
|
})
|
|
},
|
|
saveCms() {
|
|
console.log(this.cms)
|
|
uni.setStorageSync("cms", this.cms);
|
|
},
|
|
open() {
|
|
|
|
this.$refs.popup.open()
|
|
},
|
|
/**
|
|
* 点击取消按钮触发
|
|
* @param {Object} done
|
|
*/
|
|
close() {
|
|
this.$refs.popup.close()
|
|
},
|
|
confirm(value) {
|
|
console.log(value)
|
|
this.$refs.popup.close()
|
|
},
|
|
async addEditItem(index) {
|
|
console.log(index)
|
|
this.selectIndex = index;
|
|
uni.setStorageSync("selectIndex", this.selectIndex);
|
|
this.open();
|
|
},
|
|
getFileInfo(path) {
|
|
const parts = path.split('/').pop();
|
|
const [filename, ...extParts] = parts.split('.');
|
|
const ext = extParts.length ? extParts.pop() : '';
|
|
return {
|
|
name: filename,
|
|
extname: ext
|
|
};
|
|
},
|
|
formatBytes(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
|
|
if (i >= sizes.length) return '> 1 TB';
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
},
|
|
async updateImage(index) {
|
|
const that = this;
|
|
uni.chooseImage({
|
|
sourceType:["album","camera"],
|
|
count: 1,
|
|
success: async (res) => {
|
|
|
|
console.log(res);
|
|
if (!this.cms.cmsLst[index] && this.cms.cmsLst[index].image.src) {
|
|
await uniCloudStorageExtCo.deleteFile({fileList: [this.cms.cmsLst[index].image.src]});
|
|
}
|
|
if (res.tempFilePaths.length > 0) {
|
|
let filePath = res.tempFilePaths[0];
|
|
let {
|
|
name,
|
|
extname
|
|
} = that.getFileInfo(filePath)
|
|
console.log(`cms/image/${name}_${Math.random().toString(36).substr(2,6)}`)
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `cms/image/${name}_${Math.random().toString(36).substr(2,6)}`
|
|
});
|
|
console.log(uploadFileOptionsRes)
|
|
|
|
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
success: async () => {
|
|
const res2 = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
};
|
|
console.log(res2)
|
|
|
|
const selectedMedia = {
|
|
src: res2.fileID,
|
|
alt: name
|
|
}
|
|
console.log(selectedMedia)
|
|
|
|
this.cms.cmsLst[index].image.src = selectedMedia.src;
|
|
console.log("上传成功", res2);
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err);
|
|
}
|
|
});
|
|
|
|
} else {
|
|
console.log("未选中文件")
|
|
}
|
|
}
|
|
});
|
|
},
|
|
async delItem() {
|
|
let index = this.selectIndex;
|
|
if (index >= 0 && this.cms.cmsLst.length >= 0) {
|
|
if (this.cms.cmsLst[index].type === "image" && this.cms.cmsLst[index].image.src) {
|
|
await uniCloudStorageExtCo.deleteFile({fileList: [this.cms.cmsLst[index].image.src]});
|
|
} else if (
|
|
this.cms.cmsLst[index].type === "video" &&
|
|
(
|
|
this.cms.cmsLst[index].video.src ||
|
|
this.cms.cmsLst[index].video.poster
|
|
)
|
|
) {
|
|
await uniCloudStorageExtCo.deleteFile({
|
|
fileList: [
|
|
this.cms.cmsLst[index].video.src,
|
|
this.cms.cmsLst[index].video.poster
|
|
]
|
|
});
|
|
}
|
|
console.log("success")
|
|
this.cms.cmsLst.splice(index, 1);
|
|
}
|
|
this.$refs.del_popup.close()
|
|
},
|
|
async updateImage(index) {
|
|
const that = this;
|
|
uni.chooseImage({
|
|
sourceType:["album","camera"],
|
|
count: 1,
|
|
success: async (res) => {
|
|
|
|
console.log(res);
|
|
if (!this.cms.cmsLst[index] && this.cms.cmsLst[index].image.src) {
|
|
await uniCloudStorageExtCo.deleteFile({fileList: [this.cms.cmsLst[index].image.src]});
|
|
}
|
|
if (res.tempFilePaths.length > 0) {
|
|
let filePath = res.tempFilePaths[0];
|
|
let {
|
|
name,
|
|
extname
|
|
} = that.getFileInfo(filePath)
|
|
console.log(`cms/image/${name}_${Math.random().toString(36).substr(2,6)}`)
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `cms/image/${name}_${Math.random().toString(36).substr(2,6)}`
|
|
});
|
|
console.log(uploadFileOptionsRes)
|
|
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
success: async () => {
|
|
const res2 = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
};
|
|
console.log(res2)
|
|
|
|
const selectedMedia = {
|
|
src: res2.fileID,
|
|
alt: name
|
|
}
|
|
console.log(selectedMedia)
|
|
|
|
this.cms.cmsLst[index].image.src = selectedMedia.src;
|
|
console.log("上传成功", res2);
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err);
|
|
}
|
|
});
|
|
|
|
} else {
|
|
console.log("未选中文件")
|
|
}
|
|
}
|
|
});
|
|
},
|
|
async addImageItem() {
|
|
const that = this;
|
|
uni.chooseImage({
|
|
sourceType:["album","camera"],
|
|
count: 9,
|
|
success: async (res) => {
|
|
console.log(res);
|
|
if (res.tempFilePaths.length > 0) {
|
|
|
|
for (let i = 0 ; i < res.tempFilePaths.length ; i ++ ) {
|
|
|
|
let filePath = res.tempFilePaths[i];
|
|
let {
|
|
name,
|
|
extname
|
|
} = that.getFileInfo(filePath)
|
|
|
|
console.log(`cms/image/${name}_${Math.random().toString(36).substr(2,6)}`)
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `cms/image/${name}_${Math.random().toString(36).substr(2,6)}`
|
|
});
|
|
console.log(uploadFileOptionsRes)
|
|
const uploadRes = await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath
|
|
});
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
success: async () => {
|
|
const res2 = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
};
|
|
console.log(res2)
|
|
|
|
const selectedMedia = {
|
|
src: res2.fileID,
|
|
alt: name
|
|
}
|
|
console.log(selectedMedia)
|
|
|
|
let item = {
|
|
type: "image",
|
|
text: "",
|
|
image: {
|
|
src: selectedMedia.src,
|
|
html: "",
|
|
delta:{}
|
|
}
|
|
}
|
|
console.log(this.selectIndex + i)
|
|
this.cms.cmsLst.splice(this.selectIndex + i, 0, item)
|
|
this.close()
|
|
|
|
|
|
console.log("上传成功", res2);
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
} else {
|
|
console.log("未选中文件")
|
|
}
|
|
}
|
|
});
|
|
},
|
|
async getSrc(src) {
|
|
if (src&&src.substring(0, 8) == "cloud://") {
|
|
uniCloud.getTempFileURL({
|
|
fileList: [src]
|
|
}).then(res=>{
|
|
return res.fileList[0].tempFileURL;
|
|
})
|
|
} else if (src&&src.substring(0, 8) == "qiniu://") {
|
|
const res = await uniCloudStorageExtCo.getTempFileURL({src: src});
|
|
return res.fileList[0].tempFileURL;
|
|
|
|
} else {
|
|
return src
|
|
}
|
|
},
|
|
back() {
|
|
this.saveCms();
|
|
try {
|
|
uni.navigateBack({delta: 1});
|
|
} catch(e) {
|
|
uni.switchTab({
|
|
url:"/pages/index/index"
|
|
})
|
|
}
|
|
},
|
|
toeditText(index) {
|
|
|
|
if (index >= 0) {
|
|
uni.setStorageSync("selectIndex", index);
|
|
|
|
}
|
|
this.saveCms();
|
|
uni.navigateTo({
|
|
url: "/pages2/editCms/editText"
|
|
})
|
|
},
|
|
open_del_popup(index) {
|
|
this.selectIndex = index;
|
|
this.$refs.del_popup.open();
|
|
},
|
|
close_del_popup() {
|
|
this.$refs.del_popup.close();
|
|
},
|
|
toTitleStyle() {
|
|
this.saveCms();
|
|
uni.navigateTo({
|
|
url: "/pages2/editCms/titleStyle"
|
|
})
|
|
},
|
|
toVote(index) {
|
|
|
|
console.log(index >= 0)
|
|
if(index >= 0 ) {
|
|
console.log(index)
|
|
uni.setStorageSync("selectIndex", index);
|
|
}
|
|
this.saveCms();
|
|
uni.navigateTo({
|
|
url: "/pages2/editCms/vote?type=edit"
|
|
})
|
|
},
|
|
async addItem(type) {
|
|
console.log(type)
|
|
if (type === "text") {
|
|
this.addTextItem();
|
|
} else if (type === "image") {
|
|
await this.addImageItem();
|
|
} else if (type === "video") {
|
|
await this.addVideoItem();
|
|
} else if (type === "title") {
|
|
this.addTitleItem();
|
|
} else if (type === "position") {
|
|
await this.addPositionItem();
|
|
} else if (type === "vote") {
|
|
this.addVoteItem();
|
|
}
|
|
},
|
|
async dialogClose() {
|
|
await uni.setStorageSync("cms", {
|
|
cmsLst: [],
|
|
title: "",
|
|
title_html: "",
|
|
title_delta: {},
|
|
})
|
|
this.cms = uni.getStorageSync("cms");
|
|
this.$refs.alertDialog.close();
|
|
|
|
},
|
|
async dialogConfirm() {
|
|
let cms = uni.getStorageSync("cms");
|
|
console.log(cms)
|
|
if (cms && cms.cmsLst) {
|
|
for (let i = i ; i <= cms.cmsLst.length ; i ++ ) {
|
|
if (this.cms.cmsLst[index].type === "image") {
|
|
await uniCloudStorageExtCo.deleteFile({fileList: [this.cms.cmsLst[index].image.src]});
|
|
} else if (this.cms.cmsLst[index].type === "video") {
|
|
await uniCloudStorageExtCo.deleteFile({
|
|
fileList: [
|
|
this.cms.cmsLst[index].video.src,
|
|
this.cms.cmsLst[index].video.poster
|
|
]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
this.$refs.alertDialog.close();
|
|
|
|
},
|
|
openAlertDialog() {
|
|
this.$refs.alertDialog.open();
|
|
},
|
|
async addVideoItem() {
|
|
const that = this;
|
|
uni.chooseVideo({
|
|
sourceType:['album', 'camera'],
|
|
success: async (res) => {
|
|
console.log(res);
|
|
let filePath = res.tempFilePath;
|
|
let {
|
|
name,
|
|
extname
|
|
} = that.getFileInfo(filePath)
|
|
|
|
let duration = res.duration;
|
|
|
|
console.log(`cms/video/${name}_${Math.random().toString(36).substr(2,6)}`)
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `cms/video/${name}_${Math.random().toString(36).substr(2,6)}`
|
|
});
|
|
console.log(uploadFileOptionsRes)
|
|
let lastUpdate = 0;
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
onUploadProgress: (progressEvent) => {
|
|
if (Date.now() - lastUpdate < 200) return;
|
|
console.log(progressEvent)
|
|
let loadingVisible = false;
|
|
if (!loadingVisible) {
|
|
uni.showLoading({ title: '初始化上传...', mask: true });
|
|
loadingVisible = true;
|
|
}
|
|
let progress =
|
|
Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
|
let remaining = this.formatBytes(progressEvent.total - progressEvent.loaded);
|
|
uni.hideLoading();
|
|
console.log(`进度: ${progress}%, 剩余 ${remaining}`)
|
|
uni.showLoading({
|
|
title: `进度: ${progress}%`
|
|
});
|
|
|
|
lastUpdate = Date.now();
|
|
},
|
|
success: async () => {
|
|
const res2 = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
};
|
|
console.log(res2)
|
|
|
|
const selectedMedia = {
|
|
src: res2.fileURL,
|
|
alt: name
|
|
}
|
|
console.log(selectedMedia)
|
|
let poster = "vframe/jpg/offset/0/w/440/h/264/"
|
|
let cover = res2.fileURL + "?" + poster;
|
|
|
|
let item = {
|
|
type: "video",
|
|
text: "",
|
|
video: {
|
|
src: selectedMedia.src,
|
|
poster: cover,
|
|
duration: duration,
|
|
html: "",
|
|
delta:{}
|
|
}
|
|
}
|
|
this.cms.cmsLst.splice(this.selectIndex, 0, item)
|
|
this.close()
|
|
console.log("上传成功", res2);
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err);
|
|
|
|
},
|
|
complete() {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
});
|
|
},
|
|
async updateVideoItem(index) {
|
|
const that = this;
|
|
uni.chooseVideo({
|
|
sourceType:['album', 'camera'],
|
|
success: async (res) => {
|
|
console.log(res);
|
|
if (!this.cms.cmsLst[index] && this.cms.cmsLst[index].video.src) {
|
|
await uniCloudStorageExtCo.deleteFile({
|
|
fileList:[
|
|
this.cms.cmsLst[index].video,
|
|
this.cms.cmsLst[index].poster
|
|
]
|
|
});
|
|
}
|
|
let filePath = res.tempFilePath;
|
|
let {
|
|
name,
|
|
extname
|
|
} = that.getFileInfo(filePath)
|
|
|
|
let duration = res.duration;
|
|
|
|
console.log(`cms/video/${name}_${Math.random().toString(36).substr(2,6)}`)
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `cms/video/${name}_${Math.random().toString(36).substr(2,6)}`
|
|
});
|
|
let lastUpdate = 0;
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
onUploadProgress: (progressEvent) => {
|
|
if (Date.now() - lastUpdate < 200) return;
|
|
console.log(progressEvent)
|
|
let loadingVisible = false;
|
|
if (!loadingVisible) {
|
|
uni.showLoading({ title: '初始化上传...', mask: true });
|
|
loadingVisible = true;
|
|
}
|
|
let progress =
|
|
Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
|
let remaining = this.formatBytes(progressEvent.total - progressEvent.loaded);
|
|
uni.hideLoading();
|
|
console.log(`进度: ${progress}%, 剩余 ${remaining}`)
|
|
uni.showLoading({
|
|
title: `进度: ${progress}%`
|
|
});
|
|
|
|
lastUpdate = Date.now();
|
|
},
|
|
success: async () => {
|
|
const res2 = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
};
|
|
console.log(res2)
|
|
|
|
const selectedMedia = {
|
|
src: res2.fileURL,
|
|
alt: name
|
|
}
|
|
console.log(selectedMedia)
|
|
let poster = "vframe/jpg/offset/0/w/440/h/264/"
|
|
let cover = res2.fileURL + "?" + poster;
|
|
|
|
let {
|
|
text,
|
|
html,
|
|
delta
|
|
} = {
|
|
text: this.cms.cmsLst[index].text,
|
|
html: this.cms.cmsLst[index].video.html,
|
|
delta: this.cms.cmsLst[index].video.delta
|
|
}
|
|
|
|
let item = {
|
|
type: "video",
|
|
text: text,
|
|
video: {
|
|
src: selectedMedia.src,
|
|
poster: cover,
|
|
duration: duration,
|
|
html: html,
|
|
delta: delta
|
|
}
|
|
}
|
|
this.cms.cmsLst[index] = item;
|
|
console.log(this.cms)
|
|
this.close()
|
|
|
|
console.log("上传成功", res2);
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err);
|
|
},
|
|
complete() {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
uni.hideLoading();
|
|
|
|
}
|
|
});
|
|
},
|
|
addTitleItem() {
|
|
this.saveCms();
|
|
uni.navigateTo({
|
|
url: "/pages2/editCms/smallTitle"
|
|
})
|
|
},
|
|
addTextItem() {
|
|
console.log(this.selectIndex)
|
|
this.cms.cmsLst.splice(this.selectIndex, 0, {
|
|
type: "image",
|
|
text: "",
|
|
image: {
|
|
src: "",
|
|
html: "",
|
|
delta:{}
|
|
}
|
|
})
|
|
this.toeditText();
|
|
},
|
|
addVoteItem() {
|
|
this.saveCms();
|
|
uni.navigateTo({
|
|
url: "/pages2/editCms/vote?type=add"
|
|
})
|
|
},
|
|
|
|
async addPositionItem() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.b_col_fff {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.b_col_eee {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.body {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.margin_20 {
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.margin_10_top {
|
|
margin-top: 10rpx;
|
|
}
|
|
.margin_10 {
|
|
margin-top: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.add-button {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #ccc;
|
|
background-color: #eee;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.add-button::before,
|
|
.add-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: #ccc;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.add-button::before {
|
|
/* 水平线 */
|
|
width: 24rpx;
|
|
height: 4rpx;
|
|
}
|
|
|
|
.color-red {
|
|
color: #f00;
|
|
}
|
|
|
|
.add-button::after {
|
|
/* 垂直线 */
|
|
width: 4rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
// .add-button:hover {
|
|
// transform: scale(1.1) rotate(90deg);
|
|
// box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
|
|
// }
|
|
|
|
.add-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.edit_item {
|
|
width: 100wv;
|
|
height: 200rpx;
|
|
display: flex;
|
|
|
|
.part {
|
|
height: 100%;
|
|
|
|
|
|
&.part1 {
|
|
flex: 0 0 30%;
|
|
}
|
|
|
|
// 第二部分
|
|
&.part2 {
|
|
flex: 0 0 63%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// 第三部分
|
|
&.part3 {
|
|
flex: 0 0 7%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.sub-area {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.item-no {
|
|
background-color: #ccc;
|
|
color: #fff;
|
|
text-align: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.margin_20_top {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.padding_10 {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.padding_20 {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.font-info {
|
|
color: #666;
|
|
}
|
|
|
|
.grid-container {
|
|
.grid-item {
|
|
width: calc(98% / 3);
|
|
}
|
|
|
|
display: flex;
|
|
/* 启用 Flex 布局 */
|
|
flex-wrap: wrap;
|
|
/* 允许换行 */
|
|
box-sizing: border-box;
|
|
/* 包含 padding 计算 */
|
|
padding: 10rpx;
|
|
/* 容器内边距（控制边缘间距） */
|
|
width: 100%;
|
|
/* 确保容器宽度占满父元素 */
|
|
}
|
|
|
|
.grid-item-box {
|
|
flex: 1;
|
|
// position: relative;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.grid-item-box-row {
|
|
flex: 1;
|
|
// position: relative;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.margin_4 {
|
|
margin-top: 4rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
|
|
.grid-dot {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 15px;
|
|
}
|
|
|
|
.image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
.not-image {
|
|
background-color: #eee;
|
|
width: 100%;
|
|
height: 200rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.not-image-icon {
|
|
justify-content: center; /* 垂直居中 */
|
|
align-items: center; /* 水平居中 */
|
|
text-align: center;
|
|
// height: 100%; /* 确保容器有明确高度 */
|
|
// display: flex;
|
|
// flex-direction: column; /* 纵向排列图片和文字 */
|
|
}
|
|
}
|
|
.not-font {
|
|
background-color: #7a7e83;
|
|
}
|
|
.margin_50 {
|
|
margin-top: 50rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.del-popup {
|
|
background-color: #ccc;
|
|
border-radius: 20rpx 0rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.margin_30_left {
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.color-eee {
|
|
color: #eee;
|
|
}
|
|
|
|
.color-666 {
|
|
color: #666;
|
|
}
|
|
.border_ff0 {
|
|
border: 2rpx solid #993300;
|
|
background-color: #ff0;
|
|
border-radius: 10rpx;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.icon-play {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 50rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.video-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 200rpx;
|
|
}
|
|
</style> |