fission-star-applet-250304/pages_order/record/articleSharing.vue

<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>