jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseLogin/JfbBaseLoginLess.less

@@ -13,18 +13,30 @@
 
 //start
 .jfb-base-login {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
 
-  &.editx {
-    position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
   }
 
-  &:hover {
-    border: 1px dashed blue;
+  &.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;
+    }
+
   }
 
 
@@ -55,3 +67,13 @@
   }
 }
 //end
+
+
+/**notPreview**/
+.jfb-base-login {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseLogin/JfbBaseLoginMixin.js

@@ -1,114 +1,22 @@
 'use strict';
 
+
 //@AttrImport
 import Attr from "./Attr";
 //@EndAttrImport
 
-import {getContainerPropsValue} from "@/utils/xd.base";
+
 export default {
-  props: {
-    /**
-     * @description 插件在页面中到唯一ID
-     */
-    cid:{
-      type: null|String|Number,
-      default: null,
-    },
-    /**
-     * @description 业务插件相关数据集合
-     */
-    container:{
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    /**
-     * @description 页面框架属性
-     */
-    layoutInfo: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    /**
-     * @description 页面属性
-     */
-    pageAttr: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    /**
-     * @description 业务插件元素属性（插件管理时候填写属性）
-     */
-    componentAttr: {
-      type: Object|Array,
-      default() {
-        return {}
-      }
-    },
-    /**
-     * @description 业务插件所属插件库属性（业务插件库）
-     */
-    appAttr: {
-      type: Object|Array,
-      default() {
-        return {}
-      }
-    },
-    /**
-     * @description 项目配置
-     */
-    settings: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    /**
-     * @description 业务插件库所用风格属性
-     */
-    styles: {
-      type: Object || null,
-      default() {
-        return {}
-      }
-    },
-    /**
-     * @description 项目配置文件
-     */
-    projectAttr: {
-      type: Object || null,
-      default() {
-        return {}
-      }
-    }
-  },
   data() {
     return {
-      containerId: null, //容器ID
       //#ifdef H5
       
       //@AttrData
       Attr:{}, //对外开发编辑属性
       //@EndAttrData
       
-      active: false, //是否选择当前状态
-      isEditx: true, //当前为Editx模式
-      edit: false, //是否开启编辑模式
       // #endif
-
-      //风格键
-      mainColor: '',
-      successColor: '',
-      warningColor: '',
-      subMainColor: '',
-      infoColor: '',
-      defaultColor: '',
-      dangerColor: ''
+      cssRoot: 'jfb-base-login'
     }
   },
   created() {
@@ -118,105 +26,5 @@ export default {
     //@EndAttrDataCreated
     
 
-    //设置插件cid
-    if (this.cid) {
-      this.containerId = this.cid;
-    } else {
-      this.containerId = this.$xdUniHelper.randomChar(20);
-    }
-
-    //初始化风格
-    this.initThemesToData();
-
-    //#ifdef H5
-    //监听用户点击状态显示虚框
-    XdBus.addEvent('select', ({containerId}) => {
-      this.active = containerId === this.containerId;
-    });
-
-    //业务面板选中插件操作
-    XdBus.addEvent('onBoardSelect', ({containerId}) => {
-      if (containerId === this.containerId) {
-        this.handleSelect()
-      }
-    });
-    // #endif
   },
-  methods: {
-
-    /**
-     * 检查插件是否加载成功
-     */
-    onCheck() {
-    },
-
-    /***
-     * @description 业务组件风格map到data中
-     */
-    initThemesToData() {
-      Object.keys(this.styles).map(key => {
-        let k = key.replace('$', '');
-        if (this[k] !== undefined) this[k] = this.styles[key];
-      });
-      console.log('initThemesToData',this)
-    },
-
-    /**
-     * @description 其子级插件获取当前插件的业务组件风格列表
-     * @returns {*}
-     */
-    getParentThemes(){
-      return this.styles;
-    },
-
-
-    //#ifdef H5
-    /**
-     * @description 点击删除操作按钮
-     */
-    delEdit(){
-      XdBus.send('onDelPackage', {
-        containerId: this.containerId,
-        componentAtrr: this.componentAtrr,
-        cid: this.cid,
-        container: this.container
-      })
-    },
-    //#endif
-
-    /**
-     * @description 点击选择插件显示边框
-     */
-    handleSelect() {
-      //#ifdef H5
-      if (this.active) return;
-      this.active = true;
-      let AttrObj = this.$xdUniHelper.checkVarType(this.Attr) === 'object' ?
-        this.Attr : { style: [], advanced: [], content: []};
-      console.log('handleSelect.Attr', AttrObj);
-
-      //设置已绑定数据
-      Object.keys(AttrObj).map(type=>{
-        AttrObj[type].map(item=>{
-           if(item.value !== undefined) item.value = getContainerPropsValue(this.container, `${type}.${item.valueKey}`, item.value);
-           if(item.defaultValue !== undefined) item.defaultValue = getContainerPropsValue(this.container, `${type}.${item.valueKey}`, item.value);
-        })
-      });
-
-      //发送点击组件事件
-      XdBus.send('onSelectPackage', {
-        containerId: this.containerId,
-        Attr: AttrObj,
-        container: this.$xdUniHelper.cloneDeep(this.container)
-      });
-
-      //绑定选中插件事件
-      XdBus.message('select', {
-        containerId: this.containerId,
-      })
-      //#endif
-    },
-
-
-  }
 }

package/src/components/JfbBaseLogin/Mock.js

@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = {
+  listSiteProvider: {
+    "quick":{
+      "provider_id":"6319bcac7fe94cdbc8861d6a",
+      "login_platform_code":"wx_pub","is_redirect":"Y",
+      "redirect_url":"https:\/\/open.weixin.qq.com\/connect\/oauth2\/authorize?appid=wxad70f65127f9471c&redirect_uri=http%3A%2F%2Fsandbox-wxaopen.jufubao.cn%2Frest%2F2.0%2Fwxaopen%2Fbusiness%2Fredirect%3Fauthorizer_appid%3Dwxad70f65127f9471c%26uri%3Dhttps%25253A%25252F%25252Fsandbox-apis.jufubao.cn%25252Fpassport%25252Fv1%25252Fuser%25252Fwx-login-redirect%25253Fprovider_id%25253D6319bcac7fe94cdbc8861d6a%252526x-site%25253D161-a3e8b499a07507a2-.0%252526callback_url%25253Dhttp%2525253A%2525252F%2525252Fsandbox-template.jufubao.cn%2525252Fpages%2525252Fcindex%2525252Fcindex%2525257Chttp%2525253A%2525252F%2525252Fsandbox-template.jufubao.cn%2525252Fpages%2525252Fregester%2525252Fregester%2525257Chttp%2525253A%2525252F%2525252Fsandbox-template.jufubao.cn%2525252Fpages%2525252Fcollect%2525252Fcollect&response_type=code&scope=snsapi_userinfo&state=723056e8bd96b1b6e994929a73182978&component_appid=wx35e4a6b371f6506b#wechat_redirect",
+      "provider_name":"贵阳聚福宝测试"
+    },
+    "quick_enabled":true,
+    "others":[
+      {"provider_id":"62fde9432583a19c58fd937a","login_platform_code":"phone_number","is_redirect":"N","redirect_url":"","provider_name":"手机验证码登录"},
+      {"provider_id":"62fde99f2583a19c58fd937b","login_platform_code":"account","is_redirect":"N","redirect_url":"","provider_name":"账号密码登录"}
+    ],"request_id":"124ae47c9b08e93c"
+  }
+}

package/src/components/JfbBaseLoginForgetPwd/Api.js

@@ -0,0 +1,36 @@
+'use strict';
+
+/**
+ * @description API模型
+ * 建议：Ffff=>模块  Xxxx=>自定义名字
+ * 获取单记录(getByIdFfffXxxx)
+ * 获取列表记录(getByListFfffXxxx)
+ * 添加列表记录(addFfffXxxxx)
+ * 删除列表记录(removeFfffXxxxx|deleteFfffXxxx)
+ * 更新列表记录(updateFfffXxxxx)
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'sendMsg',
+    title: '发送验证码',
+    path: '/common/v1/valid_code/sms/send',
+    isRule: false,
+    data: {
+      phone_number: ['手机号', 'String', '必选'],
+      biz_name: ['业务名称', 'String', '必选']
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: "verifyPhoneCode",
+    title: "验证手机验证码",
+    path: "/passport/v1/user/check-forget-password-verification-code",
+    isRule: false,
+    params: {
+      phone_number: ['手机号', 'String', '必填'],
+      verification_code: ['验证码', 'String', 'false']
+    }
+  },
+];

package/src/components/JfbBaseLoginForgetPwd/Attr.js

@@ -0,0 +1,61 @@
+'use strict';
+
+export default {
+  style: [],
+  advanced: [],
+  content(data){
+    let showHotLine = 'N';
+    if(data.showHotLine) showHotLine = data.showHotLine;
+    return [
+      {
+        label: "是否弹出客服热线提示:",
+        ele: "xd-radio",
+        valueKey: "showHotLine",
+        groupKey: 'content',
+        value: showHotLine,
+        list: [
+          {label: "是", value: "Y"},
+          {label: "否", value: "N"}
+        ]
+      },
+      showHotLine === 'Y' && {
+        label: '客服热线:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'content',
+        valueKey: 'tell_hot',
+        value: data['tell_hot'],
+        placeholder: '请输入客服电话号码',
+        classNmae: 'input80',
+        rules: [
+          {
+            required: true,
+            message: '请输入客服电话号码',
+            trigger: 'blur'
+          },
+          {
+            validator: (rule, value, callback) => {
+              value = value.trim();
+              if (value.length > 15) callback('请输入正确的联系方式');
+              else callback()
+            },
+            trigger: 'blur'
+          }
+
+        ]
+      },
+      {
+        label: '重新设置密码地址:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'reset_pwd_url',
+        groupKey: 'advanced',
+        placeholder: '请选择跳转地址',
+        value: data.reset_pwd_url || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
+    ].filter(i=>i);
+  }
+}

package/src/components/JfbBaseLoginForgetPwd/JfbBaseLoginForgetPwd.vue

@@ -0,0 +1,267 @@
+<template>
+  <view
+    class="jfb-base-login-forget-pwd"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-login-forget-pwd__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-login-forget-pwd__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-login-forget-pwd__body">
+      <view class="panel-forget-password">
+        <view class="form-group" style="padding-top: 60rpx;padding-bottom: 40rpx;">
+          <view style="font-size: 36rpx;color: #333;">请输入手机号</view>
+          <view style="font-size: 26rpx; color: #999; margin-top: 20rpx">为了您的账号安全，请先验证手机号</view>
+        </view>
+        <xd-form
+          label-width="170"
+          label-align="right"
+          content-align="left"
+          :border="true"
+          paddingBetween="40"
+        >
+          <xd-form-item label="手机号" content-align="left">
+            <xd-form-input
+              v-model="resetForm.phone_number"
+              placeholder="请输入11位手机号"
+            />
+          </xd-form-item>
+          <xd-form-item label="验证码" content-align="left">
+            <view class="flex align-center">
+              <xd-form-input
+                v-model="resetForm.verification_code"
+                placeholder="请输入验证码"
+              />
+              <view
+                class="get_code"
+                @click="reGetCode"
+                :tyle="{
+                  color: mainColor
+                }"
+                >{{ time ? time + "秒后获取" : "获取验证码" }}</view
+              >
+            </view>
+          </xd-form-item>
+        </xd-form>
+        <view class="form-group">
+          <xd-button type="primary" radius="10rpx" @click="toResetPassword"
+            >确定</xd-button
+          >
+        </view>
+        <xd-dailog :show.sync="showHotLine" :cancel="false" :confirm="false"  :showClose="false" title="温馨提示">
+          <view class="phone">
+            <view>亲爱的用户，为了您的账户安全请联系管理员，或拨打客服热线</view>
+            <view class="contact_phone" :style="{color:mainColor}">{{ tell_hot }}</view>
+            <xd-button
+              type="primary"
+              :bgColor="mainColor"
+              style="width: 360rpx;margin-top: 30rpx;"
+              @click="showHotLine=false"
+            >知道了</xd-button>
+          </view>
+        </xd-dailog>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseLoginForgetPwdMixin from "./JfbBaseLoginForgetPwdMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdFormItem from "@/components/XdFormItem/XdFormItem";
+import XdForm from "@/components/XdForm/XdForm";
+import XdFormInput from "@/components/XdFormInput/XdFormInput";
+import XdButton from "@/components/XdButton/XdButton";
+import XdDailog from "@/components/XdDailog/XdDailog";
+
+export default {
+  name: "JfbBaseLoginForgetPwd",
+  components: {
+    XdFontIcon,
+    XdFormItem,
+    XdForm,
+    XdFormInput,
+    XdButton,
+    XdDailog,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseLoginForgetPwdMixin],
+  data() {
+    return {
+      resetForm: {
+        phone_number: "",
+        verification_code: "",
+      },
+      time: 0,
+      interval: null,
+      tell_hot: "",
+      reset_pwd_url: "",
+      showHotLine: false
+      //todo
+    };
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+    "resetForm.verification_code"(value) {
+      if (value && value.length >= 8 && value.length % 2 === 0) {
+        let start = value.slice(0, value.length / 2);
+        let end = value.slice(value.length / 2);
+        if (start === end) {
+          this.accountForm.verification_code = start;
+        }
+      }
+    }
+  },
+  created() {
+    this.init(this.container);
+
+    //todo
+  },
+  methods: {
+    onJfbLoad(options) {},
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(value) {
+      this.tell_hot = getContainerPropsValue(value, "content.tell_hot");
+      this.reset_pwd_url = getContainerPropsValue(
+        value,
+        "content.reset_pwd_url",
+        {value: ''}
+      ).value;
+      let showHotLine = getContainerPropsValue(value, "content.showHotLine");
+      this.showHotLine = showHotLine == "Y";
+      //this.bgcolor = getContainerPropsValue(value, 'content.bgcolor', '#fff');
+      //this.height = getContainerPropsValue(value, 'content.height', 10);
+    },
+    reGetCode() {
+      if (this.time > 0) return;
+      const { phone_number } = this.resetForm;
+      if (!/^1[3-9]\d{9}$/.test(phone_number)) {
+        uni.showToast({
+          title: "请填写正确的手机号",
+          icon: "none",
+        });
+        return false;
+      }
+      this.$xdShowLoading({});
+      jfbRootExec("sendMsg", {
+        vm: this,
+        data: {
+          phone_number,
+          biz_name: "passport-password",
+        },
+      }).then((res) => {
+        this.$xdHideLoading();
+        this.time = 120;
+        this.interval = setInterval(() => {
+          this.time--;
+          if (this.time == 0) {
+            clearTimeout(this.interval);
+          }
+        }, 1000);
+      }).catch(err => {
+        this.$xdHideLoading();
+        this.$xdLog.catch(err)
+      });
+    },
+    toResetPassword() {
+      const { verification_code, phone_number } = this.resetForm;
+      if (!verification_code || !phone_number) {
+        return uni.showToast({
+          title: "填写手机号跟验证码",
+          icon: "none",
+        });
+      }
+      jfbRootExec("verifyPhoneCode", {
+        vm: this,
+        data: this.resetForm,
+      }).then((res) => {
+        const { forget_password_verification_code } = res;
+        this.$xdUniHelper.navigateTo({
+          url:
+            this.reset_pwd_url +
+            "?" +
+            this.$xdUniHelper.jsonToParams({...this.resetForm, forget_password_verification_code}),
+        });
+      });
+    },
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseLoginForgetPwdLess.less";
+
+.jfb-base-login-forget-pwd {
+  &__body {
+    .xd-form-checkbox {
+      /deep/ .checklist-content .checklist-text {
+        font-size: 26rpx !important;
+      }
+    }
+
+    .form-group {
+      padding: 40rpx 70rpx;
+    }
+
+    .get_code {
+      color: @xd-base-color;
+      font-size: 24rpx;
+      margin-right: unit(20,rpx);
+      flex-shrink: 0;
+    }
+    .panel-forget-password {
+      /deep/ .uni-forms-item__label {
+        .label-text {
+          font-size: 26rpx;
+          color: #a6a6a6;
+        }
+      }
+      /deep/ .uni-easyinput__placeholder-class {
+        font-size: 26rpx;
+        color: #d4d4d4;
+      }
+
+    }
+    .phone {
+      .contact_phone {
+        padding-top: 20rpx;
+        font-size: 36rpx;
+        font-weight: 500;
+      }
+    }
+  }
+
+
+
+}
+.flex {
+  display: flex;
+}
+.flex-sub {
+  flex: 1;
+}
+.align-center {
+  align-items: center;
+}
+</style>