jufubao-base 1.0.160-beta1 → 1.0.162-beta10

package/src/components/JfbBaseSweep/JfbBaseSweep.vue

@@ -0,0 +1,353 @@
+<template>
+  <view
+    class="jfb-base-sweep"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-sweep__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-sweep__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view
+      :style="{ height: layoutInfo.bodyMinHeightRpx + 'rpx' }"
+      class="jfb-base-sweep__body"
+    >
+      <view
+        :style="{ background: backgroundColor, color: warningColor }"
+        class="jfb-base-sweep__body-pop"
+        v-if="isPreview"
+        >设置背景模式方便编辑(占位)，在线上此模块不显</view
+      >
+      <view class="jfb-base-sweep__body-other" v-if="other">
+        <view>
+          <xd-font-icon
+            color="red"
+            size="240"
+            icon="iconmingchengtubiao"
+          ></xd-font-icon>
+          <view class="jfb-base-sweep__body-other-text">无法识别该界面</view>
+        </view>
+        <view class="jfb-base-sweep__body-footer" :style="prod_bottom">
+          <XdButton @click="scan" type="primary" radius="50rpx" width="50%"
+            >重试</XdButton
+          >
+        </view>
+      </view>
+       <view class="jfb-base-sweep__body-other" v-if="show">
+        <view>
+          <image style="width: 500rpx;height:500rpx" src="https://img0.jufubao.cn/common/qrcode-dome.png?ver=1"></image>
+          <view style="color:#000000;font-size:48rpx" class="jfb-base-sweep__body-other-text">重新扫码</view>
+        </view>
+        <view class="jfb-base-sweep__body-footer" :style="prod_bottom">
+          <XdButton @click="scan" type="primary" radius="50rpx" width="50%"
+            >扫一扫</XdButton
+          >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseSweepMixin from "./JfbBaseSweepMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { mapState } from "vuex";
+import { parseNetworkURL } from "@/utils/linkUrl";
+const Color = require("color");
+
+export default {
+  name: "JfbBaseSweep",
+  components: {
+    XdFontIcon,
+    XdButton,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseSweepMixin],
+  data() {
+    return {
+      isPreview: false,
+      backgroundColor: "",
+      other: false,
+      show: true
+    };
+  },
+  computed: {
+    ...mapState({
+      jwxSDK: (state) => state.jwxSDK,
+    }),
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+  },
+  watch: {
+    container(value) {
+      this.init(value);
+    },
+  },
+  async created() {
+    this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
+    this.isPreview = this.$configProject["isPreview"];
+    this.init(this.container);
+    //#ifdef H5
+    if (!this.$configProject.isPreview) {
+      await jfbRootExec("getH5WxAuthorize", {
+        vm: this,
+        data: {site_id: "wx_pub"},
+      })
+        .then(res => {
+          console.log(0)
+          this.$xdHideLoading();
+          this.scan();
+        })
+        .catch(error=>{
+          this.$xdAlert({
+            content: error,
+          });
+        })
+    }
+    // #endif
+  },
+  methods: {
+    onJfbLoad(options) {
+      if (!this.isPreview) {
+        this.$xdShowLoading({
+          isMask: true
+        });
+        //#ifdef MP-WEIXIN
+        this.$xdHideLoading();
+        this.scan();
+        //#endif
+      }
+    },
+    extractDomain(hostname) {
+      // 匹配并提取顶级域名后的两个标签（例如：.com、.co.uk）
+      const matches = hostname.match(/[^.]+\.[^.]+$/);
+      return matches ? matches[0] : hostname;
+    },
+    handleH5() {
+      // 判断jwxSDK是否为空
+      if (this.jwxSDK !== null) {
+        // 调用jwxSDK的scanQRCode方法，扫描二维码
+        this.jwxSDK.scanQRCode({
+          // 需要返回结果
+          needResult: 1,
+          // 扫描类型为二维码
+          scanType: ["qrCode"],
+          // 扫描成功后的回调函数
+          success: (res) => {
+            // 定义一个变量params，将url按照"?"进行分割，获取到参数部分
+            let params = res.resultStr.split("?")[1]
+              ? res.resultStr.split("?")[1]
+              : "";
+            // 将参数部分按照"&"进行分割，获取到每个参数
+            const queryArr = params.split("&");
+            // 定义一个空对象queryobjArr，用于存储参数
+            let queryobjArr = {};
+            // 遍历参数数组，将参数名和参数值存储到queryobjArr中
+            queryArr.forEach((item, index) => {
+              const Strindex = item.indexOf("=");
+              queryobjArr[item.slice(0, Strindex)] = item.slice(Strindex + 1);
+            });
+            // 判断queryobjArr中是否存在"x-params"参数
+            if (queryobjArr["x-params"]) {
+              // 如果存在，则将参数拼接到url中，并跳转到该url
+              let path = `${this.change_url}?x-params=${queryobjArr["x-params"]}&refrom=official`;
+              this.$xdUniHelper.navigateTo({
+                url: path,
+              });
+              return;
+            }
+            if (queryobjArr["pa"]) {
+              // 如果queryobjArr中有pa属性，则获取pa属性的值，并将其拼接到bind_url后面，然后使用navigateTo方法跳转到该路径
+              let qrcode = encodeURIComponent(res.resultStr)
+              let path = `${this.bind_url}?qrcode=${qrcode}`;
+              console.log(path,'pathpath');
+              this.$xdUniHelper.navigateTo({
+                url: path,
+              });
+              return;
+            }
+            // 如果res.resultStr是以http或https开头的字符串，则进行以下操作
+            if (/^https?:/.test(res.resultStr)) {
+              // 获取res.resultStr中的host属性
+              let host = this.$xdUniHelper.parseURL(res.resultStr).host;
+              // 获取当前页面的域名
+              let domain = document.domain;
+              // 如果host属性以当前页面的域名结尾，则进行以下操作
+              if (host.substr(-domain.length) === domain) {
+                // 获取res.resultStr的值
+                let path = res.resultStr;
+                // 使用navigateTo方法跳转到该路径
+                this.$xdUniHelper.navigateTo({
+                  url: path,
+                });
+                return;
+              }
+            }
+            this.other = true;
+            this.show = false;
+          },
+          // 扫描失败后的回调函数
+          fail: (error) => {
+            console.log(44444);
+            this.other = true;
+            this.show = false;
+            // 如果error是字符串类型，则将其转换为对象类型
+            if (typeof error === "string") error = { error: error };
+            // 如果window["jwxJfbSDKParams"]存在，则将error对象与window["jwxJfbSDKParams"]合并
+            if (window["jwxJfbSDKParams"])
+              error = Object.assign(error, window["jwxJfbSDKParams"]);
+            // 调用$xdLog的setARMSError方法，记录错误信息
+            this.$xdLog.setARMSError(error);
+          },
+          error: ()=>{
+             console.log(44444);
+            this.other = true;
+            this.show = false;
+          }
+        });
+      }
+    },
+    handleMP() {
+      // 调用uni.scanCode方法，扫描二维码
+      uni.scanCode({
+        scanType: ["qrCode"],
+        success: (res) => {
+          // 定义一个变量params，将url按照"?"进行分割，获取到参数部分
+          let params = res.result.split("?")[1] ? res.result.split("?")[1] : "";
+          // 将参数部分按照"&"进行分割，获取到每个参数
+          const queryArr = params.split("&");
+          // 定义一个空对象queryobjArr，用于存储参数
+          let queryobjArr = {};
+          // 遍历参数数组，将参数名和参数值存储到queryobjArr中
+          queryArr.forEach((item, index) => {
+            const Strindex = item.indexOf("=");
+            queryobjArr[item.slice(0, Strindex)] = item.slice(Strindex + 1);
+          });
+          // 判断queryobjArr中是否存在"x-params"参数
+          if (queryobjArr["x-params"]) {
+            // 如果存在，则将参数拼接到url中，并跳转到该url
+            let path = `${this.change_url}?x-params=${queryobjArr["x-params"]}&refrom=official`;
+            this.$xdUniHelper.navigateTo({
+              url: path,
+            });
+            return;
+          }
+          if (queryobjArr["pa"]) {
+            // 如果queryobjArr中有pa属性，则获取pa属性的值，并将其拼接到bind_url后面，然后使用navigateTo方法跳转到该路径
+            let qrcode = encodeURIComponent(res.result)
+            let path = `${this.bind_url}?qrcode=${qrcode}`;
+            this.$xdUniHelper.navigateTo({
+              url: path,
+            });
+            return;
+          }
+          // 如果res.result是以http或https开头的字符串，则进行以下操作
+          if (/^https?:/.test(res.result)) {
+            // 获取res.result中的host属性
+            let host = parseNetworkURL(res.result).host;
+            // 获取当前页面的域名
+            console.log(host, 2222);
+            let domain = this.extractDomain(this.projectAttr.host);
+            console.log(this.extractDomain(this.projectAttr.host), 333);
+            // 如果host属性以当前页面的域名结尾，则进行以下操作
+            if (host.substr(-domain.length) === domain) {
+              // 获取res.resultStr的值
+              let path = res.result;
+              // 使用navigateTo方法跳转到该路径
+              this.$xdUniHelper.navigateTo({
+                url: path,
+              });
+              return;
+            }
+          }
+          this.other = true;
+          this.show = false;
+        },
+        fail: (error) => {
+          // 如果扫描失败，则调用$xdLog.setARMSError方法记录错误信息
+          this.other = true;
+          this.show = false;
+          this.$xdLog.setARMSError(error);
+        },
+      });
+    },
+    scan() {
+      try {
+        //#ifdef H5
+        this.handleH5();
+        //#endif
+        //#ifdef MP-WEIXIN
+        this.handleMP();
+        //#endif
+      } catch (err) {
+        this.$xdLog.setARMSError(err);
+      }
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.change_url = getContainerPropsValue(
+        container,
+        "content.change_url",
+        { value: "" }
+      ).value;
+      this.bind_url = getContainerPropsValue(container, "content.bind_url", {
+        value: "",
+      }).value;
+    },
+    onJfbShow(options) {
+      console.log("event.onJfbShow", options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseSweepLess.less";
+
+.jfb-base-sweep {
+  &__body {
+    min-height: 100rpx;
+    &-other {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 300rpx;
+      align-items: center;
+      flex-direction: column;
+      height: 100%;
+      &-text {
+        margin-top: 40rpx;
+        color: #666;
+        font-size: unit(24, rpx);
+        text-align: center;
+      }
+    }
+    &-pop {
+      min-height: 100rpx;
+      text-align: center;
+      vertical-align: middle;
+      color: #666;
+      font-size: unit(24, rpx);
+      line-height: 100rpx;
+    }
+    &-footer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      height: unit(200, rpx);
+    }
+  }
+}
+</style>

package/src/components/JfbBaseSweep/JfbBaseSweepLess.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-base-sweep {
+  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: 4;
+      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-base-sweep {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseSweep/JfbBaseSweepMixin.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-base-sweep'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseSweep/Mock.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {}