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.
377 lines
9.7 KiB
377 lines
9.7 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="文章分享" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="content">
|
|
<uv-form
|
|
ref="form"
|
|
:model="form"
|
|
:rules="getRules()"
|
|
labelPosition="left"
|
|
labelWidth="300rpx"
|
|
:labelStyle="{
|
|
color: '#1B1B1B',
|
|
fontSize: '32rpx',
|
|
fontWeight: 'bold',
|
|
}"
|
|
errorType="toast"
|
|
>
|
|
<view class="form-item">
|
|
<uv-form-item label="用户ID" prop="userId">
|
|
<view class="form-item-content">
|
|
<text>{{ userId }}</text>
|
|
<view style="margin-left: 20rpx;">
|
|
<button class="btn-simple" plain @click="$utils.copyText(userId)">
|
|
<uv-icon name="file-text" color="#05D9A2" size="28rpx"></uv-icon>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="选择封面图" prop="headImage">
|
|
<view class="form-item-content">
|
|
<formUpload v-model="form.headImage">
|
|
<template v-slot="{ value }">
|
|
<view class="flex" style="min-width: 116rpx; height: 45rpx;">
|
|
<image
|
|
:src="value"
|
|
mode="aspectFill"
|
|
style="width: 68rpx; height: 68rpx;"
|
|
radius="14rpx"
|
|
/>
|
|
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
|
|
</view>
|
|
</template>
|
|
</formUpload>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="标题" labelWidth="84rpx" prop="headTitle">
|
|
<view class="form-item-content">
|
|
<formInput v-model="form.headTitle" placeholder="请输入你的文章标题" width="584rpx"></formInput>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="设置转发次数（次）" prop="num">
|
|
<view class="form-item-content">
|
|
<formNumberBox v-model="form.num" ></formNumberBox>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="选择二维码" prop="wxCodeImage">
|
|
<view class="form-item-content">
|
|
<formUpload v-model="form.wxCodeImage">
|
|
<template v-slot="{ value }">
|
|
<view class="flex" style="min-width: 93rpx; height: 45rpx;">
|
|
<image
|
|
:src="value"
|
|
mode="aspectFill"
|
|
style="width: 45rpx; height: 45rpx;"
|
|
radius="14rpx"
|
|
/>
|
|
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
|
|
</view>
|
|
</template>
|
|
</formUpload>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="文章内容" prop="textDetails" labelPosition="top">
|
|
<view class="editor__view" style="margin-top: 32rpx;">
|
|
<editor id="editor" class="editor"
|
|
placeholder="请输入你的文章内容"
|
|
@ready="onEditorReady"
|
|
@input="onEditroInput"
|
|
></editor>
|
|
<view class="flex editor-tools">
|
|
<view style="flex: 1;">
|
|
<button @click="insertImage" plain class="btn-simple" style="float: left; font-size: 0;">
|
|
<image src="../static/record/icon-add.png" style="width: 126rpx; height: 126rpx;" ></image>
|
|
</button>
|
|
</view>
|
|
<view style="flex: 1; text-align: right;">
|
|
<text class="editor-count">{{ `${descLen}/${descLengthLimit}` }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
</uv-form>
|
|
</view>
|
|
|
|
<!-- 审核通过 -->
|
|
<button v-if="status === 1" class="button-submit" open-type="share">
|
|
发布
|
|
</button>
|
|
<!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
|
|
<button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
|
|
提交审核
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
import formInput from '../components/formInput.vue'
|
|
import formNumberBox from '../components/formNumberBox.vue'
|
|
import formUpload from '../components/formUpload.vue'
|
|
import formTextarea from '../components/formTextarea.vue'
|
|
|
|
export default {
|
|
components: {
|
|
formInput,
|
|
formNumberBox,
|
|
formUpload,
|
|
formTextarea,
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
status: null,
|
|
form: {
|
|
userId: null,
|
|
headImage: null,
|
|
headTitle: null,
|
|
num: 10,
|
|
wxCodeImage: null,
|
|
textDetails: null,
|
|
},
|
|
editorCtx: null,
|
|
descLen: 0,
|
|
descLengthLimit: 1000,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo']),
|
|
userId() {
|
|
return this.form.userId || this.userInfo?.id
|
|
},
|
|
},
|
|
onLoad(option) {
|
|
const { id } = option
|
|
|
|
if (!id) {
|
|
return
|
|
}
|
|
|
|
this.id = id
|
|
|
|
this.fetchDetails(id)
|
|
},
|
|
onShareAppMessage(res) {
|
|
const {
|
|
headTitle,
|
|
headImage,
|
|
} = this.form
|
|
|
|
let o = {
|
|
title : headTitle,
|
|
imageUrl: headImage,
|
|
path: `/pages_order/sharing/article?id=${this.id}&state=3&shareId=${this.userInfo.id}`
|
|
}
|
|
|
|
// todo: get times and check is unlocked
|
|
|
|
this.isLocked = false
|
|
|
|
return o
|
|
},
|
|
methods: {
|
|
onEditorReady() {
|
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
|
this.editorCtx = res.context
|
|
}).exec()
|
|
},
|
|
onEditroInput(e) {
|
|
const { text } = e.detail
|
|
|
|
this.descLen = text?.length || 0
|
|
},
|
|
insertImage() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
// this.editorCtx.insertImage({
|
|
// src: res.tempFilePaths[0],
|
|
// alt: '图像',
|
|
// })
|
|
|
|
// todo: check
|
|
this.$Oss.ossUpload(res.tempFilePaths[0]).then(url => {
|
|
this.editorCtx.insertImage({
|
|
src: url,
|
|
alt: '图像',
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
setEditorContents(html) {
|
|
if (!this.editorCtx) {
|
|
setTimeout(() => {
|
|
this.setEditorContents(html)
|
|
}, 200)
|
|
|
|
return
|
|
}
|
|
|
|
this.editorCtx.setContents({ html })
|
|
},
|
|
getEditorContents() {
|
|
return new Promise((resolve, reject) => {
|
|
this.editorCtx.getContents({
|
|
success: (e) => {
|
|
const { html, text } = e
|
|
resolve({ html, text })
|
|
},
|
|
fail: () => {
|
|
reject()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
getRules() {
|
|
const textDetailsValidator = async (rule, value, callback) => {
|
|
const textDetails = (await this.getEditorContents())?.html
|
|
|
|
if (textDetails) {
|
|
callback()
|
|
return
|
|
}
|
|
|
|
callback(new Error('请输入你的文案'))
|
|
}
|
|
|
|
return {
|
|
'headImage': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择头像',
|
|
},
|
|
'headTitle': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入你的昵称',
|
|
},
|
|
'num': {
|
|
type: 'number',
|
|
required: true,
|
|
message: '请设置转发次数',
|
|
},
|
|
'wxCodeImage': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择二维码',
|
|
},
|
|
'textDetails': {
|
|
asyncValidator: textDetailsValidator,
|
|
},
|
|
}
|
|
},
|
|
async fetchDetails(id) {
|
|
try {
|
|
const result = await this.$fetch('getArticleShareInfo', { id })
|
|
|
|
const {
|
|
userId,
|
|
headImage,
|
|
headTitle,
|
|
num,
|
|
wxCodeImage,
|
|
textDetails,
|
|
status,
|
|
} = result || {}
|
|
|
|
this.form = {
|
|
userId,
|
|
headImage,
|
|
headTitle,
|
|
num,
|
|
wxCodeImage,
|
|
textDetails,
|
|
}
|
|
this.status = status
|
|
|
|
this.setEditorContents(textDetails)
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
async onSubmit() {
|
|
try {
|
|
|
|
await this.$refs.form.validate()
|
|
|
|
const textDetails = (await this.getEditorContents())?.html
|
|
// todo: decode?
|
|
|
|
console.log(textDetails)
|
|
|
|
const {
|
|
headImage,
|
|
headTitle,
|
|
num,
|
|
wxCodeImage,
|
|
} = this.form
|
|
|
|
const params = {
|
|
id: this.id,
|
|
userId: this.userId,
|
|
headImage,
|
|
headTitle,
|
|
num,
|
|
wxCodeImage,
|
|
textDetails,
|
|
}
|
|
|
|
await this.$fetch('saveOrUpdateArticleShare', params)
|
|
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'none'
|
|
})
|
|
|
|
setTimeout(uni.navigateBack, 1000, -1)
|
|
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
onPublish() {
|
|
// todo
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '../styles/pageForm.scss';
|
|
|
|
.editor__view {
|
|
background-color: #F3F3F3;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.editor {
|
|
height: 253rpx;
|
|
padding: 20rpx;
|
|
|
|
&-tools {
|
|
align-items: flex-end;
|
|
padding: 0 20rpx 16rpx 14rpx;
|
|
}
|
|
|
|
&-count {
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
</style>
|