jufubao-forms 1.0.4-beta2 → 1.0.4-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-forms",
-  "version": "1.0.4-beta2",
+  "version": "1.0.4-beta3",
   "private": false,
   "description": "聚福宝表单业务插件库",
   "main": "index.js",

package/src/components/JfbFormsDynamicForm/JfbFormsDynamicForm.vue

@@ -84,7 +84,7 @@
               <template v-if="item.field_type === 'media'">
                 <view v-if="item.validate_type==='image'" class="img_list">
                   <view class="img_box" v-for="(img, i) in form[item.field_value]" :key="i">
-                    <image :src="getServiceUrl(img)" class="img_item" mode="aspectFit" @click="handlePreview(i)"></image>
+                    <image :src="getServiceUrl(img)" class="img_item" mode="widthFix" @click="handlePreview(i, item)"></image>
                     <view class="close_box" @click.stop="removeMedia(item, i)">
                       <view class="close_box-inner">
                         <xd-font-icon icon="iconguanbi" color="#333333" size="28"></xd-font-icon>
@@ -97,7 +97,20 @@
                 </view>
                 <view v-else-if="item.validate_type==='video'" class="img_list">
                   <view class="img_box" v-for="(videoSrc, i) in form[item.field_value]" :key="i">
-                    <video style="width: 100%;height: 100%;" :src="getServiceUrl(videoSrc)"></video>
+                    <video style="width: 100%;height: 100%;"
+                      :id="'video_' + item.field_value"
+                      :src="getServiceUrl(videoSrc)"
+                      :controls="false"
+                      :show-center-play-btn="false"
+                      @pause="handleVideoPause(item)"
+                      @ended="handleVideoPause(item)"
+                    ></video>
+                    <view v-if="!formPaly[item.field_value + '_play']" class="video_cover">
+                      <image :src="formPaly[item.field_value + '_cover']" style="width: 100%;height: 100%;" mode="aspectFit"></image>
+                      <view class="video_play" @click="handleVideoPlay(item)">
+                        <xd-font-icon icon="iconplayright" color="#fff" size="60"></xd-font-icon>
+                      </view>
+                    </view>
                     <view class="close_box" @click.stop="removeMedia(item, i)">
                       <view class="close_box-inner">
                         <xd-font-icon icon="iconguanbi" color="#333333" size="28"></xd-font-icon>
@@ -186,7 +199,7 @@
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import { mapState } from "vuex";
-  import getServiceUrl from "@/common/getServiceUrl";
+  import getServiceUrl, {getVideoUrl} from "@/common/getServiceUrl";
   export default {
     name: "JfbFormsDynamicForm",
     components: {
@@ -210,6 +223,7 @@
       return {
         formName: "",
         form: {},
+        formPaly: {},
         marketing_tool: "",
         activity_page_url: "",
         activity_id: "",
@@ -461,33 +475,43 @@
       },
       doAddImage(item){
         uni.chooseImage({
-          count: 1,
+          count: Number(item.media_count),
           sourceType: ['album', 'camera'],
           success: async (res) => {
             console.log('chooseImage',res);
-            // let filePath = res.tempFilePaths[0];
-            let file = res.tempFiles[0];
-            //文件file不能大于item.media_size(MB)
-            if(file.size > item.media_size * 1024 * 1024){
-              uni.showToast({
-                title: '图片大小不能超过' + item.media_size + 'MB',
-                duration: 2000,
-                icon: "none"
-              });
-              return;
-            }
             this.$xdShowLoading({});
-            try{
-              let image = await this.uploadImage(file);
-              this.form[item.field_value].push(image);
-              this.handleClearError(item);
-              this.$xdHideLoading();
-            }catch(err){
-              this.$xdHideLoading();
+            for(let i = 0; i < res.tempFiles.length; i++){
+              let file = res.tempFiles[i];
+              //文件file不能大于item.media_size(MB)
+              if(file.size > item.media_size * 1024 * 1024){
+                uni.showToast({
+                  title: '图片大小不能超过' + item.media_size + 'MB',
+                  duration: 2000,
+                  icon: "none"
+                });
+                this.$xdHideLoading();
+                return;
+              }
+              await this.uploadOneImage(file, item);
             }
+            this.$xdHideLoading();
           }
         })
       },
+      async uploadOneImage(file, item){
+        let image = await this.uploadImage(file);
+        this.form[item.field_value].push(image);
+      },
+      handleVideoPlay(item){
+        let videoContext = uni.createVideoContext('video_' + item.field_value, this);
+        if(videoContext){
+          videoContext.play();
+          this.$set(this.formPaly, item.field_value + '_play', true)
+        }
+      },
+      handleVideoPause(item){
+        this.$set(this.formPaly, item.field_value + '_play', false)
+      },
       doAddVideo(item){
         uni.chooseVideo({
           sourceType: ['album', 'camera'],
@@ -505,7 +529,10 @@
             this.$xdShowLoading({});
             try{
               let video = await this.uploadImage(file);
+              let videoUrl = getVideoUrl(video);
+              console.log("videoUrl", videoUrl);
               this.form[item.field_value].push(video);
+              this.formPaly[item.field_value + '_cover'] = videoUrl.url_cover;
               this.handleClearError(item);
               this.$xdHideLoading();
             }catch(err){
@@ -549,10 +576,10 @@
           })
         })
       },
-      handlePreview(i){
+      handlePreview(i, item){
         uni.previewImage({
           current: i,
-          urls: this.showUploadImages
+          urls: this.form[item.field_value].map(item => getServiceUrl(item))
         })
       },
       handleClearError(item){
@@ -882,11 +909,34 @@
           margin-right: 20rpx;
           margin-bottom: 20rpx;
           position: relative;
+          overflow: hidden;
+          .video_cover{
+            position: absolute;
+            z-index: 2;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .video_play{
+              width: 60rpx;
+              height: 60rpx;
+              background-color: rgba(0, 0, 0, .5);
+              border-radius: 50%;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+            }
+          }
           .close_box{
             position: absolute;
             top: 0;
             right: 0;
             padding: 10rpx;
+            z-index: 5;
             .close_box-inner{
               width: 40rpx;
               height: 40rpx;