created
This commit is contained in:
@@ -0,0 +1,516 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user