jufubao-forms 1.0.5 → 1.0.6-beta21

package/package.json

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

package/src/components/JfbFormsDynamicForm/JfbFormsDynamicForm.vue

@@ -15,9 +15,12 @@
       </view>
     </view>
     <!-- #endif -->
-    <view class="jfb-forms-dynamic-form__body">
+    <view class="jfb-forms-dynamic-form__body" :style="[formBodyStyleComp]">
       <view v-if="loaded">
         <view v-if="form_status === 'content'" class="form_content">
+          <view v-if="banner_image" class="form_banner">
+            <image mode="widthFix" :src="banner_image"></image>
+          </view>
           <view class="jfb-forms-dynamic-form__title">{{ formName }}</view>
           <xd-form labelPosition="top" labelAlign="left" :model="form" :paddingBetween="0" :key="renderForm">
             <xd-form-item v-for="(item, i) in dynamicFormList" :key="item.created_time"
@@ -224,6 +227,7 @@
     ],
     data() {
       return {
+        closeMask: true,
         formName: "",
         form: {},
         formPaly: {},
@@ -247,6 +251,8 @@
         uploadImgList: [],
         uploadVideoList: [],
         imgHost: "",
+        background_image: "",
+        banner_image: "",
 
         //面板
         submitPagePath: "",
@@ -276,6 +282,13 @@
       },
       showUploadVideos(){
         return this.uploadVideoList.map(item => getServiceUrl(item))
+      },
+      formBodyStyleComp(){
+        return {
+          backgroundImage: `url(${this.background_image})`,
+          backgroundSize: '100% auto',
+          backgroundRepeat: 'no-repeat',
+        }
       }
     },
     watch: {
@@ -330,6 +343,8 @@
           this.$xdHideLoading();
           this.loaded = true;
           this.formName = res.form_name;
+          this.background_image = res.background_image ? getServiceUrl(res.background_image) : "";
+          this.banner_image = res.banner_image ? getServiceUrl(res.banner_image) : "";
           this.err_msg = res.message;
           if(res.message){
             this.form_status = "error";
@@ -882,6 +897,14 @@
   .jfb-forms-dynamic-form {
     &__body{
       padding: 32rpx 24rpx;
+      .form_banner{
+        width: 100%;
+        box-sizing: border-box;
+        image{
+          display: block;
+          width: 100%;
+        }
+      }
       .form_status{
         display: flex;
         flex-direction: column;

package/src/components/JfbFormsDynamicForm/Mock.js

@@ -2,6 +2,8 @@
 
 module.exports = {
   getDynamicForm: {
+    background_image: "https://sandbox-img.jufubao.cn/uploads/20250722/7ae3b43b654a73f0d9d118d5eb37c51b.png?x-oss-process=style/size3&ver=1766456894",
+    banner_image: "https://sandbox-img.jufubao.cn/uploads/20251223/3d20ded5738f4c37547b962c58b4b468.png",
     form_name: "普益调查",
     list: [
       {

package/src/components/JfbFormsQuestionAndAnswer/JfbFormsQuestionAndAnswer.vue

@@ -15,13 +15,12 @@
       </view>
     </view>
     <!-- #endif -->
-    <view class="jfb-forms-question-and-answer__body" :style="{
-      '--main-color': mainColor,
-      '--main-color-alpha': mainColorAlpha,
-      'min-height': layoutInfo.bodyMinHeight
-    }">
+    <view class="jfb-forms-question-and-answer__body" :style="[formBodyStyleComp]">
       <view v-if="loaded">
         <view v-if="form_status === 'content'">
+          <view v-if="banner_image" class="form_banner">
+            <image mode="widthFix" :src="banner_image"></image>
+          </view>
           <view style="background: #FFFFFF;">
             <view class="qa_title">{{ formName }}</view>
             <view class="qa_progress">
@@ -121,6 +120,7 @@
     ],
     data() {
       return {
+        closeMask: true,
         form_id: '',
         foreign_id: "",
         loaded: false,
@@ -141,7 +141,8 @@
 
         curIndex: '',
         //todo
-
+        background_image: "",
+        banner_image: "",
         qaResultPath: "",
         qaListPath: "",
       }
@@ -218,6 +219,16 @@
           return !this.qaResult.right;
         }
         return false;
+      },
+      formBodyStyleComp(){
+        return {
+          backgroundImage: `url(${this.background_image})`,
+          backgroundSize: '100% auto',
+          backgroundRepeat: 'no-repeat',
+          '--main-color': this.mainColor,
+          '--main-color-alpha': this.mainColorAlpha,
+          'min-height': this.layoutInfo.bodyMinHeight
+        }
       }
     },
     watch: {
@@ -275,6 +286,8 @@
           this.loaded = true;
           this.formList = res.list;
           this.formName = res.form_name;
+          this.background_image = res.background_image ? getServiceUrl(res.background_image) : "";
+          this.banner_image = res.banner_image ? getServiceUrl(res.banner_image) : "";
           this.err_msg = res.message;
           this.curIndex = 0
           if(res.message){
@@ -423,6 +436,14 @@
 
   .jfb-forms-question-and-answer {
     &__body{
+      .form_banner{
+        width: 100%;
+        box-sizing: border-box;
+        image{
+          display: block;
+          width: 100%;
+        }
+      }
       .qa_title{
         text-align: center;
         padding: 40rpx 0;

package/src/components/JfbFormsQuestionAndAnswer/Mock.js

@@ -2,6 +2,8 @@
 
 module.exports = {
   getDynamicForm: {
+    background_image: "https://sandbox-img.jufubao.cn/uploads/20250722/7ae3b43b654a73f0d9d118d5eb37c51b.png?x-oss-process=style/size3&ver=1766456894",
+    banner_image: "https://sandbox-img.jufubao.cn/uploads/20251223/3d20ded5738f4c37547b962c58b4b468.png",
     message: "",
     form_name: "抽奖11",
     list: [