Files
jjx-wap/pages/user/components/news.vue
T
2026-10-08 18:34:09 +08:00

300 lines
16 KiB
Vue

<template>
<el-card>
<view class="flex justify-end items-center">
<u-button type="primary" @click="showAdd" v-if="!isAdd">新增新闻动态</u-button>
</view>
<view class="mt-20" v-if="isAdd">
<el-form ref="form" :model="form" label-width="110rpx">
<el-form-item label="标题" required>
<el-input v-model="form.title" placeholder="请输入标题"/>
</el-form-item>
<el-form-item label="内容">
<view class="editor_toolbox">
<view style="display: flex;">
<i class="iconfont icon-undo" data-method="undo" @click="onEdit"/>
<i class="iconfont icon-redo" data-method="redo" @click="onEdit"/>
<i class="iconfont icon-img" data-method="insertImg" @click="onEdit"/>
<i class="iconfont icon-text" data-method="insertText" @click="onEdit"/>
<i class="iconfont icon-clear" @click="clear"/>
</view>
</view>
<mp-html ref="article" container-style="padding:20px;height:600rpx"
:content="form.content" editable
domain="https://mp-html.oss-cn-hangzhou.aliyuncs.com" :tag-style="tagStyle"/>
</el-form-item>
</el-form>
<view class="mt-30 flex justify-center items-center">
<view class="flex-1 mx-20">
<u-button size="small" plain @click="cancel">取消</u-button>
</view>
<view class="flex-1 mx-20">
<u-button size="small" type="primary" @click="addArticle">确定</u-button>
</view>
</view>
</view>
<view v-else>
<view class="py-20 border-bottom flex justify-between items-center" v-for="(item, index) in list"
:key="index">
<view class="flex flex-col justify-start items-start">
<text>{{ item.title }}</text>
<text class="mt-20 text-gray text-28">{{ item._add_time_str }}</text>
</view>
<view class="flex flex-col justify-end">
<u-button type="primary" size="small" @click="edit(item)">编辑</u-button>
<view class="mt-20">
<u-button type="primary" size="small" @click="del(item._id)" plain>删除</u-button>
</view>
</view>
</view>
</view>
</el-card>
</template>
<script>
import MpHtml from "@/mp-html/components/mp-html/mp-html.vue";
import dayjs from "dayjs";
import md5 from "js-md5";
export default {
name: "news",
components: {MpHtml},
data() {
return {
isAdd: false,
form: {
_id: null,
title: '',
content: '',
},
list: [],
tagStyle: {
table: 'box-sizing:border-box;border-top:1px solid #dfe2e5;border-left:1px solid #dfe2e5',
th: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5',
td: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5',
li: 'margin:5px 0'
},
}
},
methods: {
async addArticle() {
if (!this.form.title) {
this.$message.error('请输入标题')
return
}
this.form.content = this.$refs.article.getContent()
if (!this.form.content) {
this.$message.error('请输入内容')
return
}
await vk.callFunction({
url: 'client/userArticle/kh/action',
data: this.form
})
this.$message.success(this.form._id ? '修改成功' : '新增成功')
await this.getList()
this.isAdd = false
this.form = {
_id: null,
title: '',
content: '',
}
},
async getList() {
const {rows} = await vk.callFunction({
url: 'client/userArticle/kh/getList',
})
this.list = rows
},
del(_id) {
this.$confirm('确认删除该新闻动态吗?', '提示', {
confirmButtonText: '确定',
showCancelButton: false,
type: 'warning'
}).then(async () => {
await vk.callFunction({
url: 'client/userArticle/kh/delete',
data: {_id}
})
await this.getList()
})
},
edit(item) {
for (let key in this.form) this.form[key] = item[key]
this.isAdd = true
this.changeEdit()
},
showAdd() {
this.isAdd = true
this.changeEdit()
},
cancel() {
this.isAdd = !this.isAdd
this.form = {
_id: null,
title: '',
content: '',
}
},
clear() {
uni.showModal({
title: '提示',
content: '确定清空内容吗?',
success: res => {
if (res.confirm)
this.$refs.article.clear()
}
})
},
onEdit(e) {
this.$refs.article[e.currentTarget.dataset.method](e.currentTarget.dataset.param)
},
changeEdit() {
this.$nextTick(() => {
this.$refs.article.getSrc = (type, value) => {
return new Promise((resolve, reject) => {
uni.chooseImage({
count: value === undefined ? 9 : 1,
success: res => {
uni.showLoading({
title: '上传中'
});
(async () => {
const arr = []
for (let item of res.tempFiles) {
const uploadRes = await this.uploadImg(item)
arr.push(uploadRes)
}
return arr
})().then(res => {
uni.hideLoading()
resolve(res)
})
},
fail: reject
})
})
}
})
},
uploadImg(item) {
const suffix = item.name.split('.').pop()
return new Promise((resolve, reject) => {
uniCloud.uploadFile({
filePath: item.path,
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
success: ({fileID}) => {
uniCloud.getTempFileURL({
fileList: [fileID]
}).then(uploadRes => {
console.log(uploadRes.fileList[0])
resolve(uploadRes.fileList[0].tempFileURL)
})
}
})
})
}
},
mounted() {
this.getList()
}
}
</script>
<style scoped>
.editor_toolbox {
width: 100%;
background-color: #ededed;
padding: 5px;
box-sizing: border-box;
}
@font-face {
font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
.iconfont {
flex: 1;
text-align: center;
font-family: "iconfont" !important;
font-size: 22px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-undo:before {
content: "\eb75";
}
.icon-redo:before {
content: "\eb71";
}
.icon-img:before {
content: "\e9ee";
}
.icon-video:before {
content: "\e9f0";
}
.icon-link:before {
content: "\eb05";
}
.icon-text:before {
content: "\ecdf";
}
.icon-line:before {
content: "\e7fd";
}
.icon-heading:before {
content: "\e735";
}
.icon-heading:before {
content: "\e735";
}
.icon-quote:before {
content: "\eb09";
}
.icon-table:before {
content: "\eb0a";
}
.icon-code:before {
content: "\e9ba";
}
.icon-emoji:before {
content: "\e7a1";
}
.icon-template:before {
content: "\e73d";
}
.icon-clear:before {
content: "\e6fc";
}
.icon-load:before {
content: "\e65d";
}
.icon-edit:before {
content: "\eb03";
}
.icon-save:before {
content: "\e747";
}
</style>