517 lines
11 KiB
Vue
517 lines
11 KiB
Vue
<template>
|
|
<view>
|
|
<uni-nav-bar
|
|
title="文章设置"
|
|
leftText="取消"
|
|
left-icon="left"
|
|
right-text="预览"
|
|
backgroundColor="#ffffff"
|
|
color="#000000"
|
|
@clickRight="toPreview()"
|
|
@clickLeft="back()">
|
|
</uni-nav-bar>
|
|
|
|
<uni-forms-item label="兵种">
|
|
<u-picker
|
|
:show="p_show"
|
|
:columns="pItems"
|
|
keyName="text"
|
|
@close="p_close"
|
|
@cancel="p_close"
|
|
@confirm="p_select"
|
|
closeOnClickOverlay="true">
|
|
</u-picker>
|
|
|
|
<view class="" @click="p_open()" style="margin-right: 50rpx;">
|
|
<u-input
|
|
v-model="pItems[0][p_index].text"
|
|
placeholder="请选择"
|
|
disabled
|
|
suffixIcon="arrow-right"/>
|
|
</view>
|
|
|
|
<!-- <uni-easyinput v-model="pItems[p_index].text" disabled @click="p_open()"></uni-easyinput> -->
|
|
<!-- <view class=""
|
|
style="border: 2rpx solid #000;text-align: center;padding: 20rpx 0rpx;margin: 0 50rpx;border-radius: 10rpx;background-color: #efefef;font-size: 36rpx;"
|
|
@click="p_open">
|
|
{{ pItems[0][p_index].text }}
|
|
</view> -->
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="文章分类">
|
|
<u-picker
|
|
:show="tag_show"
|
|
:columns="tags"
|
|
keyName="text"
|
|
@close="tag_close()"
|
|
@cancel="tag_close()"
|
|
@confirm="tag_select"
|
|
closeOnClickOverlay="true">
|
|
</u-picker>
|
|
|
|
<view class="" @click="tag_open()" style="margin-right: 50rpx;">
|
|
<u-input
|
|
v-model="tags[0][tag_index].text"
|
|
placeholder="请选择"
|
|
disabled
|
|
|
|
suffixIcon="arrow-right"/>
|
|
</view>
|
|
|
|
<!-- <uni-easyinput v-model="pItems[p_index].text" disabled @click="p_open()"></uni-easyinput> -->
|
|
<!-- <view class=""
|
|
style="border: 2rpx solid #000;text-align: center;padding: 20rpx 0rpx;margin: 0 50rpx;border-radius: 10rpx;background-color: #efefef;font-size: 36rpx;"
|
|
@click="p_open">
|
|
{{ pItems[0][p_index].text }}
|
|
</view> -->
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-section title="文章封面" type="line">
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<uni-data-checkbox
|
|
@change="thumbnailChange"
|
|
v-model="thumbMode"
|
|
:localdata="thumbnailType">
|
|
</uni-data-checkbox>
|
|
</view>
|
|
<view class="" v-if="thumbMode === 1">
|
|
|
|
<view class="container" @click="updateImage(0)">
|
|
<view v-if="!thumbnail[0]">
|
|
<view class="cross-line horizontal"></view>
|
|
<view class="cross-line vertical"></view>
|
|
</view>
|
|
<cloud-image v-else width="200rpx" height="200rpx" mode="scaleToFill" :src="thumbnail[0]">
|
|
</cloud-image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="parent-container" v-if="thumbMode === 3">
|
|
<view class="container"
|
|
|
|
@click="updateImage(index)"
|
|
v-for="(item, index) in thumbnail" :key="index">
|
|
<view v-if="!thumbnail[index] || !thumbnail[index]">
|
|
<view class="cross-line horizontal"></view>
|
|
<view class="cross-line vertical"></view>
|
|
</view>
|
|
<cloud-image v-else width="200rpx"
|
|
height="200rpx" mode="scaleToFill" :src="thumbnail[index]">
|
|
</cloud-image>
|
|
</view>
|
|
</view>
|
|
|
|
</uni-section>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uPicker from "@/uni_modules/uview-ui/components/u-picker/u-picker.vue";
|
|
import uInput from "@/uni_modules/uview-ui/components/u-input/u-input.vue";
|
|
import cloudImage from "@/components/cloud-image.vue"
|
|
export default {
|
|
components: {
|
|
uPicker,
|
|
uInput,
|
|
cloudImage
|
|
},
|
|
onHide() {
|
|
clearInterval(this.saveInterval);
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.saveInterval);
|
|
clearTimeout(this.saveInterval);
|
|
},
|
|
async onReady() {
|
|
},
|
|
async onShow() {
|
|
|
|
},
|
|
async onLoad() {
|
|
this.saveInterval = setInterval(this.save, 10000);
|
|
let cms = uni.getStorageSync("cms");
|
|
|
|
let res = await uniCloud.importObject("uni-cms-categories").getTags();
|
|
if (res.code === "200") {
|
|
this.tags = [res.tags];
|
|
}
|
|
|
|
if (cms.category_id) {
|
|
this.category_id = cms.category_id;
|
|
for (let i = 0 ; i < this.tags[0].length ; i ++ ) {
|
|
if ( this.category_id === this.tags[0][i].value ) {
|
|
this.tag_index = i ;
|
|
break;
|
|
}
|
|
}
|
|
|
|
} else {
|
|
this.category_id = this.tags[0][0].value;
|
|
this.tag_index = 0;
|
|
}
|
|
console.log(this.category_id)
|
|
console.log(cms.thumbnail);
|
|
if ( cms.thumbnail ) {
|
|
this.thumbMode = cms.thumbnail.length;
|
|
if (this.thumbMode === 0) {
|
|
this.thumbnail = [
|
|
{
|
|
src: "",
|
|
},
|
|
{
|
|
src: "",
|
|
},
|
|
{
|
|
src: "",
|
|
},
|
|
];
|
|
this.thumbMode = 0;
|
|
|
|
} else if (this.thumbMode === 1) {
|
|
this.thumbnail = [
|
|
cms.thumbnail[0],
|
|
{
|
|
src: "",
|
|
},
|
|
{
|
|
src: "",
|
|
},
|
|
];
|
|
this.thumbMode = 1;
|
|
} else if (this.thumbMode === 3) {
|
|
this.thumbnail = cms.thumbnail;
|
|
this.thumbMode = 3;
|
|
}
|
|
}
|
|
console.log(cms.p_type);
|
|
if (cms.p_type) {
|
|
this.p_type = cms.p_type;
|
|
|
|
for (let i = 0 ; i < this.pItems[0].length ; i ++ ) {
|
|
console.log(": ", this.pItems[0][i].value,this.p_type );
|
|
if ( this.p_type === this.pItems[0][i].value ) {
|
|
this.p_index = i ;
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
console.log(this.p_type);
|
|
},
|
|
data() {
|
|
return {
|
|
saveInterval: {},
|
|
|
|
tag_index: 0,
|
|
category_id: "",
|
|
tag_show: false,
|
|
tags: [],
|
|
|
|
thumbnailType:[
|
|
{
|
|
text: "无封面",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "单图模式",
|
|
value: 1,
|
|
},
|
|
{
|
|
text: "三图模式",
|
|
value: 3,
|
|
},
|
|
],
|
|
thumbMode: 0,
|
|
thumbnail: [
|
|
{
|
|
src: "",
|
|
},
|
|
{
|
|
src: "",
|
|
},
|
|
{
|
|
src: "",
|
|
},
|
|
],
|
|
|
|
p_show: false,
|
|
p_type: "1",
|
|
p_index: 0,
|
|
pItems: [
|
|
[
|
|
{
|
|
text: "空军",
|
|
value: "1"
|
|
},
|
|
{
|
|
text: "海军",
|
|
value: "2"
|
|
},
|
|
{
|
|
text: "陆军",
|
|
value: "3"
|
|
},
|
|
{
|
|
text: "地勤保障",
|
|
value: "4"
|
|
},
|
|
{
|
|
text: "武警",
|
|
value: "5"
|
|
},
|
|
]
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
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];
|
|
},
|
|
thumbnailChange(e) {
|
|
console.log(e)
|
|
// this.thumbMode = e.detail.value;
|
|
|
|
},
|
|
async updateImage(index) {
|
|
const that = this;
|
|
uni.chooseImage({
|
|
type: "image",
|
|
count: 1,
|
|
success: async (res) => {
|
|
console.log(res);
|
|
if (res.tempFilePaths.length > 0) {
|
|
let filePath = res.tempFilePaths[0];
|
|
let {
|
|
name,
|
|
extname
|
|
} = that.getFileInfo(filePath)
|
|
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
|
|
console.log(`thumbnail/${name}_${Math.random().toString(36).substr(2,6)}`)
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `thumbnail/${name}_${Math.random().toString(36).substr(2,6)}`
|
|
});
|
|
console.log(uploadFileOptionsRes)
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
success: () => {
|
|
const res = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
};
|
|
console.log(res)
|
|
console.log(this.thumbnail)
|
|
this.$set(this.thumbnail, index, res.fileID);
|
|
|
|
console.log("上传成功", res);
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err);
|
|
}
|
|
});
|
|
|
|
} else {
|
|
console.log("未选中文件")
|
|
}
|
|
}
|
|
});
|
|
},
|
|
tag_close() {
|
|
this.tag_show = false;
|
|
},
|
|
tag_open() {
|
|
console.log(111)
|
|
this.tag_show = true;
|
|
},
|
|
tag_select(e) {
|
|
let index = e.indexs[0];
|
|
|
|
let {
|
|
text,
|
|
value
|
|
} = e.value[0];
|
|
|
|
this.tag_index = index;
|
|
this.category_id = value;
|
|
this.tag_close();
|
|
},
|
|
p_select(e) {
|
|
console.log(e)
|
|
let index = e.indexs[0];
|
|
let {
|
|
text,
|
|
value
|
|
} = e.value[0];
|
|
|
|
this.p_index = index;
|
|
this.p_type = value;
|
|
this.p_close();
|
|
},
|
|
p_close() {
|
|
this.p_show = false;
|
|
},
|
|
p_open() {
|
|
this.p_show = true;
|
|
},
|
|
pItemChange(e) {
|
|
console.log(e)
|
|
},
|
|
getTexts(items) {
|
|
let lst = [];
|
|
for (let i = 0 ; i < items.length ; i ++ ) {
|
|
lst.push(items[i].text)
|
|
}
|
|
return lst;
|
|
},
|
|
bindPickerChange(e) {
|
|
console.log('picker发送选择改变，携带值为', e)
|
|
// this.index = e.detail.value
|
|
},
|
|
save() {
|
|
console.log(this.thumbMode,this.thumbnail)
|
|
let cms = uni.getStorageSync("cms");
|
|
|
|
cms.category_id = this.category_id;
|
|
|
|
cms.p_type = this.p_type;
|
|
|
|
if (this.thumbMode === 0) {
|
|
cms.thumbnail = [];
|
|
} else if (this.thumbMode === 1) {
|
|
let thumbnail = [this.thumbnail[0]];
|
|
cms.thumbnail = thumbnail;
|
|
} else if (this.thumbMode === 3) {
|
|
let thumbnail = thumbnail;
|
|
for (let i = 0 ; i < 3 ; i ++ ) {
|
|
if (this.thumbnail[i]) {
|
|
thumbnail.push(this.thumbnail[i])
|
|
}
|
|
}
|
|
cms.thumbnail = thumbnail;
|
|
}
|
|
|
|
console.log(cms)
|
|
|
|
},
|
|
back() {
|
|
this.save();
|
|
try {
|
|
uni.navigateBack({delta: 1});
|
|
} catch(e) {
|
|
uni.switchTab({
|
|
url:"/pages/index/index"
|
|
})
|
|
}
|
|
},
|
|
toPreview() {
|
|
let flag = true;
|
|
|
|
console.log(this.thumbMode,this.thumbnail)
|
|
let cms = uni.getStorageSync("cms");
|
|
|
|
cms.category_id = this.category_id;
|
|
|
|
cms.p_type = this.p_type;
|
|
|
|
if (!cms.p_type) {
|
|
uni.showLoading({ title: `兵种不能为空` });
|
|
setTimeout(() => uni.hideLoading(), 1000);
|
|
flag = false;
|
|
} else if (!cms.category_id) {
|
|
uni.showLoading({ title: `分类不能为空` });
|
|
setTimeout(() => uni.hideLoading(), 1000);
|
|
flag = false;
|
|
} else {
|
|
console.log(this.thumbMode, this.thumbnail)
|
|
if (this.thumbMode === 0) {
|
|
cms.thumbnail = [];
|
|
} else if (this.thumbMode === 1) {
|
|
let thumbnail = [this.thumbnail[0]];
|
|
cms.thumbnail = thumbnail;
|
|
} else if (this.thumbMode === 3) {
|
|
let thumbnail = thumbnail;
|
|
for (let i = 0 ; i < 3 ; i ++ ) {
|
|
if (this.thumbnail[i]) {
|
|
thumbnail.push(this.thumbnail[i])
|
|
}
|
|
}
|
|
cms.thumbnail = thumbnail;
|
|
}
|
|
}
|
|
for(let i = 0 ; i < cms.thumbnail.length ; i ++ ) {
|
|
if (cms.thumbnail[i] === "") {
|
|
uni.showLoading({ title: `封面图不能为空` });
|
|
setTimeout(() => uni.hideLoading(), 1000);
|
|
flag = false;
|
|
}
|
|
}
|
|
uni.setStorageSync("cms", cms)
|
|
|
|
if (flag) {
|
|
uni.navigateTo({
|
|
url:"/pages2/editCms/preview"
|
|
})
|
|
}
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.parent-container {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
flex-shrink: 0; /* 禁止宽度压缩 */
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border: 1rpx solid #ccc;
|
|
}
|
|
|
|
.cross-line {
|
|
position: absolute;
|
|
background-color: #ccc;
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
|
|
.horizontal {
|
|
width: 30rpx;
|
|
height: 5rpx;
|
|
border-radius: 2rpx;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.vertical {
|
|
height: 30rpx;
|
|
width: 5rpx;
|
|
border-radius: 2rpx;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|