jufubao-forms 1.0.0-beta1

package/src/components/JfbFormsList/JfbFormsListLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-forms-list {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: var(--preview-z-index);
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-forms-list {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbFormsList/JfbFormsListMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-forms-list'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbFormsList/Mock.js

@@ -0,0 +1,38 @@
+"use strict";
+
+module.exports = {
+  getSaasFormList: {
+    total_size: 1,
+    next_page_token: "",
+    list: [
+      {
+        form_id: 33,
+        form_name: "员工调研",
+        cover: "/uploads/20240905/3b599a80e11de676fca13db5cf1bd369.png",
+        status: "Ok",
+        tip: "",
+        start_time: 1725292800,
+        end_time: 1729526400
+      },
+      {
+        form_id: 34,
+        form_name: "员工调研2",
+        cover: "/uploads/20240905/3b599a80e11de676fca13db5cf1bd369.png",
+        status: "Ok",
+        tip: "",
+        start_time: 1725292800,
+        end_time: 1729526400
+      },
+      {
+        form_id: 34,
+        form_name: "员工调研3",
+        cover: "/uploads/20240905/3b599a80e11de676fca13db5cf1bd369.png",
+        status: "Ok",
+        tip: "",
+        start_time: 1725292800,
+        end_time: 1729526400
+      }
+    ],
+    request_id: "db8a06d15c6bf2a2"
+  }
+};

package/src/components/JfbFormsQuestionAndAnswer/Api.js

@@ -0,0 +1,43 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Question
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: "getDynamicForm",
+    title: '动态表单内容 - 获取',
+    path: '/forms/v1/sms-form-field/field-by-form-id',
+    isRule: false,
+    params: {
+      form_id: ['表单ID', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'submitDynamicForm',
+    title: '动态表单内容 - 提交',
+    path: '/forms/v1/sms-form-content',
+    isRule: false,
+    data: {
+      form_id: ['表单ID', 'Number', '必选'],
+      contents: ['内容', 'array[object(FrontSmsFormContent)]', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: "checkValidCode",
+    title: "图片验证码 - 校验",
+    path: "/common/v1/valid_code/image/check",
+    isRule: false,
+    data: {
+      token: ['随机请求码，前端生成', 'String', '必选'],
+      valid_code: ['验证码', 'String', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  }
+];

package/src/components/JfbFormsQuestionAndAnswer/Attr.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbFormsQuestionAndAnswer/JfbFormsQuestionAndAnswer.vue

@@ -0,0 +1,506 @@
+<template>
+  <view
+    class="jfb-forms-question-and-answer"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-forms-question-and-answer__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-forms-question-and-answer__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-forms-question-and-answer__body" :style="{
+      '--main-color': mainColor,
+      '--main-color-alpha': mainColorAlpha,
+    }">
+      <view v-if="loaded">
+        <view v-if="form_status === 'content'">
+          <view style="background: #FFFFFF;">
+            <view class="qa_title">{{ formName }}</view>
+            <view class="qa_progress">
+              <view class="progress_text">{{curIndex+1}}/{{ formList.length }}</view>
+              <view class="qa_progress_bar">
+                <view class="qa_progress_bar_inner" :style="[progressBarInnerStyle]"></view>
+              </view>
+            </view>
+            <view v-if="curQA" class="qa_content">
+              <view class="qa_type">【{{qaType}}】</view>
+              <view class="qa_question">{{ curIndex+1 }}.{{ curQA.field_name }}</view>
+              <view class="qa_answer">
+                <view class="answer_column" v-for="o in curQA.options" :key="o.value"
+                  @click="handleCheck(o.value)"
+                >
+                  <xd-radio v-if="curQA.field_type==='radio'"
+                    :value="qaValue==o.value" :isClickEvent="false" :iconSize="20"></xd-radio>
+                  <xd-radio v-if="curQA.field_type==='checkbox'" class="qa_checkbox"
+                    :value="qaValue.includes(o.value)" :isClickEvent="false" :iconSize="20"></xd-radio>
+                  <view>{{ o.label }}</view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view v-if="qaResult" class="qa_result">
+            <view class="result_status" v-if="qaResult.right">
+              <xd-font-icon class="icon_font" icon="iconzan_mian"></xd-font-icon> 恭喜您，回答正确！</view>
+            <template v-else>
+              <view class="result_status error">
+                <xd-font-icon class="icon_font" icon="iconmingchengtubiao"></xd-font-icon> 回答有误，再接再厉哦！</view>
+              <view class="ans_right">正确选项: {{ qaResult.answer }}</view>
+
+              <view>
+                <view>答案解析：</view>
+                <view class="ans_explain">{{ qaResult.explain }}</view>
+              </view>
+            </template>
+            
+          </view>
+          <view class="bottom_fixed">
+            <xd-button type="primary" :disabled="curIndex === 0"
+              :style="[fixedButtonStyle]" @click="handlePrev">上一题</xd-button>
+            <xd-button type="primary" :disabled="curQA.required && (!qaValue || qaValue.length === 0)"
+              :style="[fixedButtonStyle]" @click="handleNext">{{isLastQA ? '确认提交':'下一题'}}</xd-button>
+          </view>
+        </view>
+        <view v-if="form_status === 'success'" class="form_status form_success">
+          <xd-font-icon icon="iconchenggong" color="#06bc85" :size="64"></xd-font-icon>
+          <view class="status_tip">您已成功提交</view>
+          <view class="status_name">{{ formName }}</view>
+          <view class="status_btn_wrap">
+            <view class="status_btn">关闭</view>
+            <view class="status_btn" v-if="marketToolText" 
+              style="background:#FE7A63;"
+              @click="handleMarketToolBtn"
+            >{{ marketToolText }}</view>
+          </view>
+        </view>
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox"
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdRadio from "@/components/XdRadio/XdRadio"
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbFormsQuestionAndAnswerMixin from "./JfbFormsQuestionAndAnswerMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import Color from "color"
+  export default {
+    name: "JfbFormsQuestionAndAnswer",
+    components: {
+      XdFontIcon,
+      XdFormCheckbox,
+      XdRadio,
+      XdButton,
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbFormsQuestionAndAnswerMixin
+    ],
+    data() {
+      return {
+        form_id: '',
+        loaded: false,
+        isPreview: false,
+        form_status: "content",
+        formName: "",
+        marketing_tool: "",
+        activity_page_url: "",
+        activity_id: "",
+        
+        value: [],
+        qaValue: "",
+
+        mainColorAlpha: "",
+        formList: [],
+
+        curIndex: 0,
+        //todo
+      }
+    },
+    computed: {
+      progressBarInnerStyle(){
+        let width = ((this.curIndex + 1) / this.formList.length) * 100 + '%';
+        return {
+          width: width
+        }
+      },
+      curQA(){
+        return this.formList[this.curIndex];
+      },
+      isLastQA(){
+        return this.curIndex === (this.formList.length - 1);
+      },
+      qaType(){
+        let types = {radio: '单选', checkbox: '多选'};
+        return types[this.curQA.field_type];
+      },
+      qaResult(){
+        if(!this.curQA) return null;
+        //是否需要校验
+        let is_verify_answer = this.curQA.is_verify_answer;
+        if(is_verify_answer === "N") return null;
+
+        let result = this.curQA.value;
+        if(result && result.length > 0){
+          let answer = this.curQA.answer;
+          let isRight = false;
+
+          if(this.curQA.field_type === 'radio'){
+            isRight = result === answer[0]; //答案正确
+          }else if(this.curQA.field_type === 'checkbox'){
+            isRight = this.isSameArray(result, answer);
+          }
+          if(isRight) return {right: true};
+          else {
+            return {
+              right: false,
+              answer: answer,
+              explain: this.curQA.answer_analysis,
+            }
+          }
+        }
+        return null;
+      },
+      marketToolText(){
+        let toolText = {
+          prize: '去抽奖',
+          coupon: '去领券',
+          walking: '健步走',
+        };
+        let btnText = toolText[this.marketing_tool];
+        return btnText ? btnText : '';
+      },
+      fixedButtonStyle(){
+        return {
+          width: '300rpx',
+          height: '70rpx',
+          lineHeight: '70rpx',
+          fontSize: '28rpx',
+        }
+      },
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      curIndex(value, oldValue){
+        console.log('curIndex', value, oldValue);
+        if(value !== oldValue && this.curQA){
+          if(this.curQA.value){
+            this.qaValue = this.curQA.value;
+          }else{
+            let field_type = this.curQA.field_type;
+            if(field_type === 'radio') this.qaValue = '';
+            else if(field_type === 'checkbox') this.qaValue = [];
+          }
+        }
+      }
+    },
+    created() {
+      this.init(this.container);
+      this.mainColorAlpha = Color(this.mainColor).alpha(0.15).string();
+      this.isPreview = this.$configProject['isPreview'];
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+
+        if(!this.isPreview && !options.form_id) {
+          return uni.showToast({
+            title: '请配置表单id',
+            duration: 2000
+          });
+        }
+        if(this.isPreview) {
+          this.form_id = '123';
+        }else{
+          this.form_id = options.form_id;
+        }
+        this.$xdShowLoading({});
+        jfbRootExec("getDynamicForm", {
+          vm: this,
+          data: {
+            form_id: this.form_id,
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          this.loaded = true;
+          this.formList = res.list;
+          this.formName = res.form_name;
+        })
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+
+        //this.height = getContainerPropsValue(container, 'content.height', 10);
+      },
+      handlePrev(){
+        if(this.curIndex > 0){
+          this.curIndex--;
+        }
+      },
+      handleNext(){
+
+        if(this.isLastQA){
+          return this.p_submitQaForm();
+        }
+        if(this.curIndex < this.formList.length - 1){
+          this.curIndex++;
+        }
+      },
+      p_submitQaForm(){
+        uni.showModal({
+          title: '提示',
+          content: '您已完成所有题目，是否提交？',
+          success: (res) => {
+            if(res.confirm){
+              jfbRootExec("submitDynamicForm", {
+                vm: this,
+                data: {
+                  form_id: this.form_id,
+                  contents: this.formList.map(item => {
+                    let content = Array.isArray(item.value) ? item.value : [item.value];
+                    return {
+                      field_id: item.field_id,
+                      content: JSON.stringify(content)
+                    }
+                  }),
+                }
+              }).then(res => {
+                const { activity_id, marketing_tool, activity_page_url } = res;
+                this.marketing_tool = marketing_tool;
+                this.activity_page_url = activity_page_url;
+                this.activity_id = activity_id;
+
+                // uni.showToast({title: '提交成功'});
+                this.form_status = 'success';
+              })
+            }
+          }
+        })
+      },
+      handleMarketToolBtn(){
+        let url = this.checkUrlIsValid(this.activity_page_url);
+        if(url){
+          if(this.marketing_tool === 'prize') url = url + '?id=' + this.activity_id;
+          if(this.marketing_tool === 'coupon') url = url + '?activity_id=' + this.activity_id;
+          else url = url + `?id=${this.activity_id}&activity_id=${this.activity_id}`;
+          this.$xdUniHelper.navigateTo({
+            url: url
+          })
+        }
+      },
+      handleCheck(radio){
+        let field_type = this.curQA.field_type;
+
+        if(field_type == 'radio'){
+          if(this.qaValue == radio) this.qaValue = '';
+          else this.qaValue = radio;
+        }
+        if(field_type === 'checkbox'){
+          if(this.qaValue.includes(radio)) {
+            let index = this.qaValue.indexOf(radio);
+            this.qaValue.splice(index, 1)
+          }else{
+            this.qaValue.push(radio);
+          }
+        }
+
+        this.$set(this.formList[this.curIndex], 'value', this.qaValue);
+      },
+      //判断两个包含数组是否相同
+      isSameArray(arr1, arr2){
+        if(arr1.length != arr2.length) return false;
+        for (let i = 0; i < arr1.length; i++) {
+          if(!arr2.includes(arr1[i])){
+            return false;
+          }
+        }
+        return true;
+      },
+      onJfbScroll(options) {
+        // console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        // console.log('event.onJfbShow', options)
+        this.onJfbLoad(options);
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbFormsQuestionAndAnswerLess.less";
+
+  .jfb-forms-question-and-answer {
+    &__body{
+      .qa_title{
+        text-align: center;
+        padding: 40rpx 0;
+        font-size: 32rpx;
+        color: #333333;
+        font-weight: 400;
+      }
+      .qa_progress{
+        .progress_text{
+          text-align: center;
+          font-size: 28rpx;
+          margin-bottom: 8rpx;
+        }
+        .qa_progress_bar{
+          background-color: #D8D8D8;
+          width: 100%;
+          height: 6px;
+          .qa_progress_bar_inner{
+            background-color: #007AFF;
+            height: 100%;
+          }
+        }
+      }
+      .qa_content{
+        padding: 24rpx;
+        .qa_type{
+          color: var(--main-color);
+          background: var(--main-color-alpha);
+          display: inline-block;
+          padding: 4rpx 8rpx;
+          border-radius: 8rpx;
+          font-size: 28rpx;
+        }
+        .qa_question{
+          color: var(--main-color);
+          margin-top: 16rpx;
+          font-size: 28rpx;
+        }
+        .qa_answer{
+          margin-top: 40rpx;
+          font-size: 28rpx;
+          .answer_column{
+            display: flex;
+            align-items: center;
+
+            ::v-deep .xd-radio{
+              width: 50rpx !important;
+              height: 50rpx !important;
+            }
+            ::v-deep .qa_checkbox{
+              .xd-radio__body{
+                border-radius: 8rpx !important;
+              }
+            }
+          }
+          ::v-deep .mySelfCheckbox{
+            .checklist-group{
+              flex-direction: column;
+              .checklist-text{
+                line-height: 32rpx;
+              }
+            }
+          }
+        }
+      }
+      .qa_result{
+        padding: 24rpx;
+        font-size: 28rpx;
+        .ans_right{
+          margin: 24rpx 0;
+        }
+        .ans_explain{
+          text-indent: 1em;
+        }
+        .result_status{
+          display: flex;
+          align-items: center;
+          .icon_font{
+            margin-right: 8rpx;
+          }
+
+          &.error{
+            color: rgba(212, 48, 48, 1);
+          }
+        }
+      }
+      .bottom_fixed{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #fff;
+        padding: 24rpx;
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+      }
+
+      .form_status{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 100rpx;
+        .status_tip{
+          color: #06bc85;
+          margin-top: 32rpx;
+          font-size: 40rpx;
+          &.error_tip{
+            color: #f0413d;
+          }
+        }
+        .status_name{
+          font-size: 32rpx;
+          margin: 78rpx 0;
+        }
+        .status_btn_wrap{
+          display: flex;
+          justify-content: center;
+          width: 80%;
+        }
+        .status_btn{
+          width: 80%;
+          border-radius: 40px;
+          background: #06bc85;
+          color: #fff;
+          font-size: 26rpx;
+          height: 80rpx;
+          line-height: 80rpx;
+          text-align: center;
+
+          & + .status_btn{
+            margin-left: 32rpx;
+          }
+        }
+      }
+    }
+  }
+</style>