jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseCardDetail/JfbBaseCardDetailLess.less

@@ -13,18 +13,30 @@
 
 //start
 .jfb-base-card-detail {
-  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-card-detail {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseCardDetail/JfbBaseCardDetailMixin.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-card-detail'
     }
   },
   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/JfbBaseCardDetail/Mock.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  getCardYue: {},
+  getBaseByIdCardDetail: {"is_show_qrcode_logo":'Y', "card_number": "101001000008076", "card_point": 20367, "card_type_name": "多余额福卡", "end_time": "2025-04-30 23:59:59", "card_status": "Y", "card_status_name": "开启", "card_qrcode": "\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/qrcode?code_content=h.161.ktrd9ie2jnbkdb8", "barcode": "\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/barcode?code_content=h.161.ktrd9ie2jnbkdb8", "card_qrcode_expire": 600, "unit": "点", "main_business_code_name": "蛋糕(勿改)", "other_card_point": 4073, "is_exchange": "N", "exchange_card_type_name": "福券", "exchange_card_point": 18330, "card_point_type": 2, "request_id": "ce26274fa52c8412" }
+}

package/src/components/JfbBaseCardDetail/XdEditPwd.vue

@@ -0,0 +1,299 @@
+<template>
+  <view>
+    <xd-dailog
+      :show.sync="uiShow"
+      width="90%"
+      title="设置支付密码"
+      :cancel="false"
+      :confirm="false"
+      :zIndex="1100"
+      :showClose="showClose"
+      @close="handleClose"
+    >
+      <view class="pwd">
+        <view class="pwd__title" v-if="title">
+          <view>
+            {{title}}
+          </view>
+        </view>
+        <view class="pwd__form">
+          <view class="pwd__form-item">
+            <view>
+              手机号：
+            </view>
+            <view>
+              <input
+                :disabled="editPhone!==''"
+                :style="{width:370+'rpx'}"
+                type="number"
+                placeholder="请输入手机号"
+                :adjust-position="false"
+                v-model="form.phone"
+              />
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view style="display: flex;align-items: center;flex: 1;
+          width: 0;">
+              <view>验证码：</view>
+              <view>
+                <input
+                  :style="{width:160+'rpx',marginRight:30+'rpx'}"
+                  type="text"
+                  placeholder="请输入验证码"
+                  :adjust-position="false"
+                  v-model="form.sms_code"/>
+              </view>
+            </view>
+            <view style="flex-shrink: 0;">
+              <xd-button
+                size="mini"
+                type="default"
+                @click="getSmsCodeHandle"
+                :disabled="!form.phone || status"
+                :style="{width:codeWidth+'rpx'}"
+              >
+                {{statusMsg}}
+              </xd-button>
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view>设置支付密码：</view>
+            <view>
+              <input
+                type="password"
+                placeholder="请输入六位纯数字密码"
+                :adjust-position="false"
+                v-model="form.password"
+                maxlength="6"
+              />
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view>确认支付密码：</view>
+            <view>
+              <input
+                type="password"
+                placeholder="请输入确认密码"
+                :adjust-position="false"
+                v-model="form.confirmPwd"
+                maxlength="6"
+              />
+            </view>
+          </view>
+        </view>
+
+        <view>
+          <xd-button
+            type="primary"
+            size="mini"
+            :disabled="!form.phone || !form.sms_code || !form.password || !form.confirmPwd"
+            @click="submit"
+          >确定</xd-button>
+        </view>
+      </view>
+    </xd-dailog>
+  </view>
+</template>
+
+<script>
+  import XdDailog from "@/components/XdDailog/XdDailog";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    name: "SetPassword",
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      editPhone: {
+        type: String,
+        default: ''
+      },
+      showClose: {
+        type: Boolean,
+        default: true
+      }
+    },
+    components: {
+      XdDailog,
+      XdButton
+    },
+    data() {
+      return {
+        form: {
+          sms_code: '',
+          phone: '', //手机号
+          password: '',
+          confirmPwd: '',
+        },
+        status: false,
+        second: 0,
+        statusMsg: '获取验证码',
+        codeWidth: '200',
+        confirm: true,
+        uiShow: false
+      }
+    },
+    created() {
+      if (this.editPhone) {
+        this.form.phone = this.editPhone
+      }
+      this.uiShow = this.show;
+    },
+    computed: {},
+    watch: {
+      'form.password': {
+        handler: function (val, oldval) {
+          let num = val.charAt(val.length - 1);
+          let reg = new RegExp("^[0-9]*$");
+          if (!reg.test(num)) {
+            setTimeout(() => {
+              this.form.password = val.slice(0, -1);
+            }, 0);
+          } else {
+            setTimeout(() => {
+              this.form.password = val;
+            }, 0);
+          }
+
+        },
+      },
+
+      'form.confirmPwd': {
+        handler: function (val, oldval) {
+          let num = val.charAt(val.length - 1);
+          let reg = new RegExp("^[0-9]*$");
+          if (!reg.test(num)) {
+            setTimeout(() => {
+              this.form.confirmPwd = val.slice(0, -1);
+            }, 0);
+          } else {
+            setTimeout(() => {
+              this.form.confirmPwd = val;
+            }, 0);
+          }
+
+        },
+      },
+
+      show(newVal) {
+        this.uiShow = newVal;
+
+      },
+
+      uiShow(value) {
+        this.$emit('update:show', value);
+      }
+    },
+    methods: {
+      getSmsCodeHandle() {
+        //无手机号
+        if (!this.form.phone) {
+          this.$xdAlert({
+            content: '请输入手机号!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+
+        if (this.status) {
+          return;
+        }
+        this.$emit('onGetCode', this.form.phone, () => {
+          this.sendSmsSuccess()
+        })
+
+      },
+
+      sendSmsSuccess() {
+        this.status = true;
+        this.second = 119;
+        this.codeWidth = '300';
+        this.statusMsg = `短信已发送:${this.second}s`;
+        let time = setInterval(() => {
+          this.statusMsg = `短信已发送:${this.second}s`;
+          this.second--;
+          if (this.second === 0) {
+            clearInterval(time);
+            this.status = false;
+            this.second = 0;
+            this.codeWidth = '200';
+            this.statusMsg = '获取验证码';
+          }
+        }, 1000)
+      },
+
+      submit() {
+
+        if (this.form.password.length < 6 || this.form.confirmPwd.length < 6) {
+          this.$xdAlert({
+            content: '密码长度不能少于六位!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+
+        if (this.form.password !== this.form.confirmPwd) {
+          this.$xdAlert({
+            content: '确认密码和密码不一致!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+        this.$emit('onSubmit', this.form)
+      },
+
+      handleClose() {
+        this.$emit('onClose')
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .pwd {
+    font-size: @xd-font-size-base;
+
+    &__title {
+      border: 1px solid #ccc;
+      padding: unit(20, rpx);
+      text-align: center;
+      font-size: @xd-font-size-base + 4;
+      margin-bottom: unit(20, rpx);
+    }
+
+    &__form {
+      margin-bottom: unit(27, rpx);
+
+      &-item {
+        display: flex;
+        align-items: center;
+        padding: unit(10, rpx) 0;
+
+        input {
+          font-size: @xd-font-size-base;
+          border-bottom: 1px solid #ccc;
+          text-align: left;
+          padding: unit(10, rpx);
+        }
+      }
+    }
+  }
+
+</style>
+