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

<template>
  <view class="page">
		<navbar title="视频分享" leftClick @leftClick="$utils.navigateBack" />

    <view class="content">
      <uv-form 
        ref="form"
        :model="form"
        :rules="rules"
        labelPosition="left" 
        labelWidth="340rpx"
        :labelStyle="{
          color: '#1B1B1B',
          fontSize: '32rpx',
          fontWeight: 'bold',
        }"
        errorType="toast"
        >
        <view class="flex upload__view">
          <view class="upload upload-cover">
            <uv-form-item labelWidth="0" prop="indexImage">
              <formUpload  v-model="form.indexImage">
                <template v-slot="{ value }">
                  <!-- todo: 默认 -->
                  <image 
                    :src="value" 
                    mode="aspectFill" 
                    style="width: 344rpx; height: 344rpx;"
                    radius="14rpx"
                  />
                </template>
              </formUpload>
              <view class="upload-cover-text flex">设置封面</view>
            </uv-form-item>
          </view>
          <view class="upload upload-video">
            <uv-form-item labelWidth="0" prop="vio">
              <formUpload v-model="form.vio" accept="video">
                <template v-slot>
                  <video v-if="form.vio"
                    :src="form.vio" 
                    style="width: 344rpx; height: 344rpx;"
                    radius="14rpx"
                    :controls="false"
                    :autoplay="false"
                    :show-center-play-btn="false"
                  ></video>
                  <view v-else class="flex flex-column" style="width: 344rpx; height: 344rpx;">
                    <image src="../static/record/icon-camera.png" style="width: 130rpx; height: 105rpx;" ></image>
                    <text class="upload-video-text">上传视频</text>
                  </view>
                </template>
              </formUpload>
            </uv-form-item>
          </view>
        </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="设置广告弹出时间（s）" prop="timeNum">
            <view class="form-item-content">
              <formNumberBox v-model="form.timeNum" ></formNumberBox>
            </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 style="margin-top: 32rpx;">
              <formTextarea
                v-model="form.textDetails" 
                placeholder="请描述你的视频"
              ></formTextarea>
            </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="preSubmit">
      提交审核
    </button>

    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
  </view>
</template>

<script>
  import { mapState } from 'vuex'

  import formUpload from '../components/formUpload.vue'
  import formInput from '../components/formInput.vue'
  import formNumberBox from '../components/formNumberBox.vue'
  import formTextarea from '../components/formTextarea.vue'
  import autoCrop from '../components/autoCrop.vue'

	export default {
    components: {
      formUpload,
      formInput,
      formNumberBox,
      formTextarea,
      autoCrop,
    },
		data() {
      return {
        id: null,
        status: null,
        form: {
          headTitle: null,
          indexImage: null,
          vio: null,
          timeNum: 0,
          num: 0,
          wxCodeImage: null,
          textDetails: null,
        },
        rules: {
					'indexImage': {
						type: 'string',
						required: true,
						message: '请设置封面',
					},
					'vio': {
						type: 'string',
						required: true,
						message: '请上传视频',
					},
					'headTitle': {
						type: 'string',
						required: true,
						message: '请输入你的视频名称',
					},
					'timeNum': {
						type: 'number',
						required: true,
						message: '请设置广告弹出时间（大于1）',
            validator: (rule, value, callback) => {
              if (value > 1) {
                return true
              }
              
							return false;
						},
					},
					'num': {
						type: 'number',
						required: true,
						message: '请设置转发次数（大于0）',
            validator: (rule, value, callback) => {
              if (value > 0) {
                return true
              }
              
							return false;
						},
					},
					'wxCodeImage': {
						type: 'string',
						required: true,
						message: '请选择二维码',
					},
					'textDetails': {
						type: 'string',
						required: true,
						message: '请描述你的视频',
					},
				},
      }
    },
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(option) {
      const { id } = option

      if (!id) {
        return
      }

      this.id = id

      this.fetchDetails(id)
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
    onShareAppMessage(res) {
      const {
        headTitle,
        indexImage,
      } = this.form

      let o = {
        title : headTitle,
        imageUrl: indexImage,
        path: `/pages_order/sharing/video?id=${this.id}&state=1&shareId=${this.userInfo.id}`
      }

 //调用增加分享次数的方法
	  const params = {
	    id:this.id,
	    state:"1",
	  }
	  this.$fetch('addLogShareInfo', params)
      // todo: get times and check is unlocked

      this.isLocked = false

      return o
    },
    methods: {
      async fetchDetails(id) {
        try {
          const result = await this.$fetch('getVideoShareInfo', { id })

          const {
            headTitle,
            indexImage,
            vio,
            timeNum,
            num,
            wxCodeImage,
            textDetails,
            status,
          } = result || {}

          this.form = {
            headTitle,
            indexImage,
            vio,
            timeNum,
            num,
            wxCodeImage,
            textDetails,
          }
          this.status = status
        } catch (err) {
          
        }
      },
      async preSubmit() {
        try {
          await this.$refs.form.validate()
          this.$refs.autoCropRef.set(this.form.indexImage)
        } catch (err) {
          
        }
      },
      async onSubmit(indexImage) {
        try {

          await this.$refs.form.validate()

          const {
          headTitle,
          vio,
          timeNum,
          num,
          wxCodeImage,
          textDetails,
          } = this.form

          const params = {
            headTitle,
            indexImage,
            vio,
            timeNum,
            num,
            wxCodeImage,
            textDetails,
          }

          if (this.id) {
            params.id = this.id
          }
     
          await this.$fetch('saveOrUpdateVideoShare', params)
          
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          })

          setTimeout(uni.navigateBack, 1000, -1)
						
        } catch (err) {
          
        }

      },
      onPublish() {
        // todo
      },
    }
  }

</script>

<style scoped lang="scss">
@import '../styles/pageForm.scss';

.upload__view {
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.upload {
  background-color: $uni-fg-color;
  border-radius: 12rpx;
  overflow: hidden;

  /deep/ .uv-form-item__body {
    padding: 0 !important;
  }
}

.upload-video {
  &-text {
    color: #1B1B1B;
    font-size: 32rpx;
    font-weight: 700;
    margin-top: 35rpx;
  }
}

.upload-cover {
  position: relative;

  &-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba($color: #000000, $alpha: 0.6);
    color: #FFFFFF;
    padding: 21rpx 0;
  }
}

</style>