@xysfe/actui2 0.0.1

package/lib/GoldFinanceV2/benefit/slider/index.mjs

@@ -0,0 +1,137 @@
+import BScroll from "better-scroll";
+import { n as normalizeComponent } from "../../../common/index.mjs";
+import './style.css';var _sfc_main = {
+  name: "ActGoldBenefitSlider",
+  data: function data() {
+    return {
+      windowX: 0,
+      listScroll: null,
+      forbidScrollEnd: false
+    };
+  },
+  props: {
+    element: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    unit: function unit() {
+      return ~~this.element.range[0].unit || "";
+    },
+    step: function step() {
+      return ~~(this.element.attr && this.element.attr.step) || 5;
+    },
+    min: function min() {
+      return ~~this.element.range[0].min || ~~(this.element.attr && this.element.attr.min) || 0;
+    },
+    max: function max() {
+      return ~~this.element.range[0].max || ~~(this.element.attr && this.element.attr.max) || 100;
+    },
+    chooseAge: function chooseAge() {
+      var realValue = ~~this.element.value || 80;
+      if (realValue < this.min) {
+        return this.min;
+      } else if (realValue > this.max) {
+        return this.max;
+      }
+      return realValue;
+    },
+    during: function during() {
+      return this.max - this.min + 1;
+    },
+    width: function width() {
+      return 12 * (this.max - this.min) + 1;
+    }
+  },
+  methods: {
+    initScroll: function initScroll() {
+      var _this = this;
+      var wrapper = document.querySelector(".wrapper");
+      var startX = (this.min - this.chooseAge) * 12;
+      this.$refs.wrappercontent.style.width = ~~this.windowX + this.width + "px";
+      this.$nextTick(function() {
+        var that = _this;
+        if (!_this.listScroll) {
+          _this.listScroll = new BScroll(wrapper, {
+            probeType: 3,
+            startX,
+            scrollX: true,
+            scrollY: false
+          });
+          that.listScroll.on("scrollEnd", function(pos) {
+            if (that.forbidScrollEnd) {
+              that.forbidScrollEnd = false;
+              return;
+            }
+            var chooseAge2;
+            if (pos.x >= 0) {
+              chooseAge2 = that.min;
+            } else if (Math.abs(pos.x) >= that.width) {
+              chooseAge2 = that.max;
+            } else {
+              chooseAge2 = Math.floor(Math.abs(pos.x) / 12 + 1 + that.min);
+              var scrollX = -(Math.floor(Math.abs(pos.x) / 12 + 1) * 12);
+              that.forbidScrollEnd = true;
+              that.listScroll.scrollTo(scrollX, 0, 0);
+            }
+            that.$emit("updateAge", chooseAge2);
+          });
+        } else {
+          if (startX >= 0) {
+            _this.$emit("updateAge", _this.min);
+            startX = 0;
+          }
+          _this.listScroll.refresh();
+          _this.forbidScrollEnd = true;
+          _this.listScroll.scrollTo(startX, 0, 0);
+        }
+      });
+    }
+  },
+  mounted: function mounted() {
+    var containerWidth = this.$refs.chooseContainer && this.$refs.chooseContainer.offsetWidth;
+    this.windowX = containerWidth || window.innerWidth || document.body && document.body.clientWidth;
+    this.windowX = this.windowX > 750 ? 750 : this.windowX;
+    this.initScroll();
+  },
+  watch: {
+    min: function min2() {
+      this.initScroll();
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("div", {
+    ref: "chooseContainer",
+    staticClass: "choose"
+  }, [_c("div", {
+    staticClass: "choose-container wrapper"
+  }, [_c("div", {
+    ref: "wrappercontent",
+    staticClass: "choose-content"
+  }, _vm._l(_vm.during, function(number) {
+    return _c("div", {
+      key: number,
+      staticClass: "choose-item"
+    }, [_c("span", {
+      staticClass: "number-item",
+      class: {
+        "number-part": (number + _vm.min - 1) % _vm.step == 0
+      }
+    }), (number + _vm.min - 1) % _vm.step == 0 ? _c("span", {
+      staticClass: "number-text"
+    }, [_vm._v(_vm._s(number + _vm.min - 1) + _vm._s(_vm.unit))]) : _vm._e()]);
+  }), 0)]), _c("div", {
+    staticClass: "choose-value skin-bg"
+  })])]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "183f8ac6");
+var benefitSlider = __component__.exports;
+export {
+  benefitSlider as b
+};

package/lib/GoldFinanceV2/benefit/slider/style.css

@@ -0,0 +1 @@
+.choose[data-v-183f8ac6]{position:relative;width:100%;height:58px;overflow:hidden;margin-bottom:1.3rem}.choose .choose-value[data-v-183f8ac6]{position:absolute;top:0;left:50%;width:3px;height:28px;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-top-left-radius:2px;border-top-right-radius:2px;background-color:#f05a4b!important}.choose .choose-container[data-v-183f8ac6]{width:100%;height:58px;overflow:hidden}.choose .choose-content[data-v-183f8ac6]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;height:58px;padding:14px 50% 0}.choose .choose-content .number-item[data-v-183f8ac6]{margin-top:8px;width:100%;height:6px;border-left:1px solid #e2e5e7;border-bottom:1px solid #f5f5f5}.choose .choose-content .number-part[data-v-183f8ac6]{margin-top:0;height:14px}.choose .choose-item[data-v-183f8ac6]{-webkit-flex-shrink:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;width:12px}.choose .choose-item .number-text[data-v-183f8ac6]{margin:5px 0 0 -12px;line-height:1;font-size:12px;color:#999;text-align:center;white-space:nowrap}.choose .choose-item[data-v-183f8ac6]:last-child{width:1px}

package/lib/GoldFinanceV2/benefit/style.css

@@ -0,0 +1 @@
+.benefit.cps[data-v-bca01161]{background-image:url(../../assets/price-bg.f8a6.png)}.benefit[data-v-bca01161]{position:relative;border-top:1px solid #f5f5f5;min-height:278.5px;padding:53.5px 0 20px;text-align:center;font-size:13px;line-height:1;color:#666;background-image:url(../../assets/price-bg.dd60.png);background-size:100% 100%}.benefit>.visible-hide[data-v-bca01161]{visibility:hidden}

package/lib/GoldFinanceV2/benefit/text/index.js

@@ -0,0 +1 @@
+"use strict";require('./style.css');var common=require("../../../common/index.js");var _sfc_main={name:"ActGoldBenefitText",props:{element:{type:Object,default:function _default(){return{}}}}};var _sfc_render=function render(){var _vm=this,_c=_vm._self._c;return _c("div",[_c("p",{staticClass:"desc",domProps:{"innerHTML":_vm._s(_vm.element.value)}})])};var _sfc_staticRenderFns=[];var __component__=common.normalizeComponent(_sfc_main,_sfc_render,_sfc_staticRenderFns,false,null,"c6b0a179");var benefitText=__component__.exports;exports.benefitText=benefitText;

package/lib/GoldFinanceV2/benefit/text/index.mjs

@@ -0,0 +1,27 @@
+import { n as normalizeComponent } from "../../../common/index.mjs";
+import './style.css';var _sfc_main = {
+  name: "ActGoldBenefitText",
+  props: {
+    element: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("p", {
+    staticClass: "desc",
+    domProps: {
+      "innerHTML": _vm._s(_vm.element.value)
+    }
+  })]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "c6b0a179");
+var benefitText = __component__.exports;
+export {
+  benefitText as b
+};

package/lib/GoldFinanceV2/benefit/text/style.css

@@ -0,0 +1 @@
+.desc[data-v-c6b0a179]{display:inline-block;padding-bottom:6px;font-size:12px;color:#b3b3b3;white-space:nowrap}

package/lib/GoldFinanceV2/benefit/title/index.js

@@ -0,0 +1 @@
+"use strict";require('./style.css');var common=require("../../../common/index.js");var _sfc_main={name:"ActGoldBenefitTitle",data:function data(){return{trackName:{"/":"titleqm_sx","/my":"titleqm_xq","/addmore":"titleqm_zj"}}},props:{element:{type:Object,default:function _default(){return{}}},path:{type:String,default:""},theme:{type:Object,default:function _default2(){return{}}}},computed:{hasQuesMask:function hasQuesMask(){return this.element.attr&&this.element.attr.hasQuesMask&&~~this.element.attr.hasQuesMask}},methods:{showTable:function showTable(){this.$emit("showTable")}}};var _sfc_render=function render(){var _vm=this,_c=_vm._self._c;return _vm.element.value!==""?_c("p",[_c("span",{domProps:{"innerHTML":_vm._s(_vm.element.value)}}),_vm.hasQuesMask===1?_c("button",{staticClass:"question",style:{background:_vm.theme.brandColor},on:{"click":_vm.showTable}},[_vm._v(" 利益演示 > ")]):_vm._e()]):_vm._e()};var _sfc_staticRenderFns=[];var __component__=common.normalizeComponent(_sfc_main,_sfc_render,_sfc_staticRenderFns,false,null,"278d85bc");var benefitTitle=__component__.exports;exports.benefitTitle=benefitTitle;

package/lib/GoldFinanceV2/benefit/title/index.mjs

@@ -0,0 +1,63 @@
+import { n as normalizeComponent } from "../../../common/index.mjs";
+import './style.css';var _sfc_main = {
+  name: "ActGoldBenefitTitle",
+  data: function data() {
+    return {
+      trackName: {
+        "/": "titleqm_sx",
+        "/my": "titleqm_xq",
+        "/addmore": "titleqm_zj"
+      }
+    };
+  },
+  props: {
+    element: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    path: {
+      type: String,
+      default: ""
+    },
+    theme: {
+      type: Object,
+      default: function _default2() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    hasQuesMask: function hasQuesMask() {
+      return this.element.attr && this.element.attr.hasQuesMask && ~~this.element.attr.hasQuesMask;
+    }
+  },
+  methods: {
+    showTable: function showTable() {
+      this.$emit("showTable");
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _vm.element.value !== "" ? _c("p", [_c("span", {
+    domProps: {
+      "innerHTML": _vm._s(_vm.element.value)
+    }
+  }), _vm.hasQuesMask === 1 ? _c("button", {
+    staticClass: "question",
+    style: {
+      background: _vm.theme.brandColor
+    },
+    on: {
+      "click": _vm.showTable
+    }
+  }, [_vm._v(" 利益演示 > ")]) : _vm._e()]) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "278d85bc");
+var benefitTitle = __component__.exports;
+export {
+  benefitTitle as b
+};

package/lib/GoldFinanceV2/benefit/title/style.css

@@ -0,0 +1 @@
+.question[data-v-278d85bc]{position:absolute;top:16px;right:13.5px;width:72px;height:22px;opacity:0.6;border-radius:11px;font-size:12px;text-align:center;color:#ffffff;line-height:20px;border:none;background:#8c7fee}

package/lib/GoldFinanceV2/caseDemo/index.js

@@ -0,0 +1 @@
+"use strict";require('./style.css');var _JSON$stringify=require("@babel/runtime-corejs3/core-js/json/stringify");var _forEachInstanceProperty=require("@babel/runtime-corejs3/core-js/instance/for-each");var _sortInstanceProperty=require("@babel/runtime-corejs3/core-js/instance/sort");var _flatInstanceProperty=require("@babel/runtime-corejs3/core-js/instance/flat");var _concatInstanceProperty=require("@babel/runtime-corejs3/core-js/instance/concat");var common=require("../../common/index.js");function deepCopy(obj){if(!obj)return obj;return JSON.parse(_JSON$stringify(obj))}function isUndefined(obj){return obj===void 0}var _sfc_main={name:"ActGoldCaseDemo",data:function data(){return{caseData:{},caseEdge:{},caseAccount:[],tempData:{},tempEdge:{},tempAccount:[],hasName:false,minWidth:4.8,maxWidth:32,textExtraWidth:3.2,singleNumWidth:.6675,singleTextWidth:1.2,edgeOffset:.4,accountOffset:.3,errorOffset:-1.2,prevWidth:[0],residueWidth:[],repeatPoint:{}}},props:{caseInfo:{type:Object,default:function _default(){return{}}},loading:{type:Boolean,default:false},isCps:{type:Boolean,default:false},pxToRem:{type:Number,default:0}},computed:{infoPaddingTop:function infoPaddingTop(){if(this.residueWidth.length<2)return 0;return(this.residueWidth.length-1)*3},edgeColor:function edgeColor(){if(this.isCps){return{1:"#72b2fc",2:"#ffab45",3:"#ff5a6e"}}else{return{1:"#8c7fee",2:"#ffb229",3:"#ff5a6e"}}},colorType:function colorType(){if(this.isCps){return{1:"linear-gradient(90deg,#73b3fc,#499eff)",2:"linear-gradient(90deg,#ffab45,#ffa142)",3:"linear-gradient(90deg,#ff8695,#ff5a6e)"}}else{return{1:"linear-gradient(90deg,#a59bff,#8b7fed)",2:"linear-gradient(90deg,#ffc85a,#ffae1f)",3:"linear-gradient(90deg,#ff8695,#ff5a6e)"}}},matchUnit:function matchUnit(){return this.pxToRem>0?"rem":"px"},matchRatio:function matchRatio(){return this.pxToRem>0?this.pxToRem*10:10}},methods:{calTextWidth:function calTextWidth(item){var numReg=new RegExp(/[^0-9]/gi);var numLen=item.text.replace(numReg,"").length;var textLen=item.text.length-numLen;var width=numLen*this.singleNumWidth+textLen*this.singleTextWidth+this.textExtraWidth;return width},calAccountWidth:function calAccountWidth(item){var width=this.calTextWidth(item);while(true){if(width>this.residueWidth[item.row]){item.row+=1}else{this.residueWidth[item.row]=(this.residueWidth[item.row]||this.maxWidth)-width;break}}if(!item.bindStartPoint||!item.bindEndPoint){if(item.caseType==="1"){return width>this.minWidth?width:this.minWidth}else{return this.minWidth}}else{return width>this.minWidth?width:this.minWidth}},calAccountLeft:function calAccountLeft(item,edgeKey){if(this.tempData[item.bindPoint]&&this.tempData[item.bindPoint].isEndPoint==="1"){item.right=-1}else if(this.tempData[edgeKey.split("_")[1]]&&this.tempData[edgeKey.split("_")[1]].isEndPoint==="1"){item.right=0}if(isUndefined(this.repeatPoint[item.bindPoint])){this.repeatPoint[item.bindPoint]={};item.left=this.accountOffset+(this.tempData[item.bindStartPoint].left||this.prevWidth[this.prevWidth.length-1]);this.repeatPoint[item.bindPoint].left=item.left;this.repeatPoint[item.bindPoint].count=1}else{item.left=this.repeatPoint[item.bindPoint].left;this.repeatPoint[item.bindPoint].count++}},calEdgeLeft:function calEdgeLeft(edgeKey){if(!this.tempEdge[edgeKey])return;if(isUndefined(this.tempEdge[edgeKey].left)){this.tempEdge[edgeKey].left=this.edgeOffset+this.prevWidth[this.prevWidth.length-1]}},calEdgeWidth:function calEdgeWidth(caseType,edgeKey,width){if(!this.tempEdge[edgeKey])return;if(!this.tempEdge[edgeKey].width){if(this.tempData[edgeKey.split("_")[1]].isEndPoint==="1"){this.tempEdge[edgeKey].right=0}else{this.tempEdge[edgeKey].width=width+(caseType==="1"?this.errorOffset:1.5*this.errorOffset)}}},calStartPointLeft:function calStartPointLeft(item){if(this.tempData[item.bindPoint]&&this.tempData[item.bindPoint].isEndPoint==="1"){this.tempData[item.bindPoint].right=0;return}if(isUndefined(this.tempData[item.bindStartPoint].left)){this.tempData[item.bindStartPoint].left=this.prevWidth[this.prevWidth.length-1]}},calEndPointLeft:function calEndPointLeft(item,width){if(isUndefined(this.tempData[item.bindEndPoint]))return;if(isUndefined(this.tempData[item.bindEndPoint].left)){if(this.tempData[item.bindEndPoint]&&this.tempData[item.bindEndPoint].isEndPoint==="1"){this.tempData[item.bindEndPoint].right=0}else{this.tempData[item.bindEndPoint].left=width+this.prevWidth[this.prevWidth.length-1]+(item.caseType==="1"?this.errorOffset:1.5*this.errorOffset)}}},calPrevWidth:function calPrevWidth(edgeKey,width,item){if(!isUndefined(this.tempEdge[edgeKey])){if(this.repeatPoint[item.bindPoint].count){this.prevWidth.push(this.tempEdge[edgeKey].width+this.minWidth)}else{this.prevWidth.push(this.prevWidth[this.prevWidth.length-1]+this.minWidth)}}else{if(item.caseType==="1"&&!this.prevWidth[this.prevWidth.length-1]){this.prevWidth.push(width)}else{if(!this.hasName){this.prevWidth.push(this.prevWidth[this.prevWidth.length-1]+this.minWidth)}else{this.prevWidth.push(this.prevWidth[this.prevWidth.length-1])}}}},calAccountBindEndPoint:function calAccountBindEndPoint(item){var textWidth=this.calTextWidth(item);if(this.tempData[item.bindPoint]&&this.tempData[item.bindPoint].isEndPoint==="1"){item.left=this.maxWidth-this.edgeOffset;item.textLeft=-textWidth}},sortAccountDataByCaseType:function sortAccountDataByCaseType(){var _context;var tempArr=[[],[],[]];_forEachInstanceProperty(_context=this.tempAccount).call(_context,function(item){return tempArr[Number(item.caseType)-1].push(item)});_forEachInstanceProperty(tempArr).call(tempArr,function(item){return _sortInstanceProperty(item).call(item,function(a,b){if(a.order&&b.order){return~~b.order-~~a.order}else{return(b.bindEndPoint||"").length-(a.bindEndPoint||"").length}})});this.tempAccount=_flatInstanceProperty(tempArr).call(tempArr)},reducePrevWidth:function reducePrevWidth(item){if(this.tempData[item.bindStartPoint].display===false){this.prevWidth[this.prevWidth.length-1]=this.prevWidth[this.prevWidth.length-1]-this.minWidth+.8}},accountHasName:function accountHasName(item){if(item.name){this.hasName=true}},calPosition:function calPosition(){var _context2,_this=this;this.prevWidth=[0];this.residueWidth=[];this.repeatPoint={};this.tempData=deepCopy(this.caseInfo.caseData);this.tempEdge=deepCopy(this.caseInfo.caseEdge);this.tempAccount=deepCopy(this.caseInfo.caseAccount);this.sortAccountDataByCaseType();_forEachInstanceProperty(_context2=this.tempAccount).call(_context2,function(item){var _context3;var edgeKey=_concatInstanceProperty(_context3="".concat(item.bindStartPoint,"_")).call(_context3,item.bindEndPoint);_this.accountHasName(item);var width=_this.calAccountWidth(item);_this.reducePrevWidth(item);_this.calAccountLeft(item,edgeKey);_this.calEdgeWidth(item.caseType,edgeKey,width);_this.calEdgeLeft(edgeKey);_this.calStartPointLeft(item);_this.calEndPointLeft(item,width);_this.calAccountBindEndPoint(item);_this.calPrevWidth(edgeKey,width,item)});this.caseData=this.tempData;this.caseEdge=this.tempEdge;this.caseAccount=this.tempAccount}},beforeMount:function beforeMount(){this.calPosition()},watch:{caseInfo:{handler:function handler(){this.calPosition()},deep:true}}};var _sfc_render=function render(){var _context4,_context5;var _vm=this,_c=_vm._self._c;return _c("div",{staticClass:"box",class:_vm.isCps?"cps":"",style:_concatInstanceProperty(_context4="padding-bottom: ".concat(_vm.infoPaddingTop*_vm.matchRatio)).call(_context4,_vm.matchUnit)},[_c("div",{staticClass:"main-line",style:!_vm.hasName?_concatInstanceProperty(_context5="margin-left: ".concat(3*_vm.matchRatio)).call(_context5,_vm.matchUnit):""},[_vm._l(_vm.caseData,function(item,key){var _context6,_context7,_context8,_context9,_context0;return _c("div",{key,staticClass:"pay-point",style:_concatInstanceProperty(_context6=_concatInstanceProperty(_context7=_concatInstanceProperty(_context8=_concatInstanceProperty(_context9="\n        left: ".concat(item.left*_vm.matchRatio)).call(_context9,_vm.matchUnit,";\n        right: ")).call(_context8,item.right*_vm.matchRatio)).call(_context7,_vm.matchUnit,";\n        background: ")).call(_context6,_vm.colorType[item.colorType])},[_c("div",{directives:[{name:"show",rawName:"v-show",value:!(item.display===false),expression:"!(item.display === false)"}],staticClass:"head",style:"".concat(item.isEndPoint==="1"?_concatInstanceProperty(_context0="left: unset;right: -".concat(1*_vm.matchRatio)).call(_context0,_vm.matchUnit):"")},[_c("div",{staticClass:"title"},[_vm._v(" "+_vm._s(item.title)+" ")]),_c("div",{staticClass:"sub-title"},[_vm._v(" "+_vm._s(item.desc)+" ")])])])}),_vm._l(_vm.caseEdge,function(item,key){var _context1,_context10,_context11,_context12,_context13,_context14;return _c("div",{key,staticClass:"pay-line",style:_concatInstanceProperty(_context1=_concatInstanceProperty(_context10=_concatInstanceProperty(_context11=_concatInstanceProperty(_context12=_concatInstanceProperty(_context13=_concatInstanceProperty(_context14="\n        width: ".concat(item.width*_vm.matchRatio)).call(_context14,_vm.matchUnit,";\n        left: ")).call(_context13,item.left*_vm.matchRatio)).call(_context12,_vm.matchUnit,";\n        right: ")).call(_context11,item.right*_vm.matchRatio)).call(_context10,_vm.matchUnit,";\n        border-top: 1px dotted ")).call(_context1,_vm.edgeColor[item.caseType])})}),_vm._l(_vm.caseAccount,function(item,index){var _context15,_context16,_context17,_context18,_context19,_context20,_context21,_context22,_context23,_context24,_context25,_context26;return _c("div",{key:index,staticClass:"desc",style:_concatInstanceProperty(_context15=_concatInstanceProperty(_context16="\n        left: ".concat(item.left.length?item.left*_vm.matchRatio:_concatInstanceProperty(_context17="".concat(item.left*_vm.matchRatio)).call(_context17,_vm.matchUnit),";\n        right: ")).call(_context16,item.right*_vm.matchRatio)).call(_context15,_vm.matchUnit)},[item.text?[_c("div",{staticClass:"desc-vertical-line",style:_concatInstanceProperty(_context18=_concatInstanceProperty(_context19=_concatInstanceProperty(_context20=_concatInstanceProperty(_context21=_concatInstanceProperty(_context22="\n            height: ".concat((2+(item.row-1)*4)*_vm.matchRatio)).call(_context22,_vm.matchUnit,";\n            margin-left: ")).call(_context21,item.lineLeft*_vm.matchRatio,";\n            margin-right: ")).call(_context20,item.lineRight*_vm.matchRatio)).call(_context19,_vm.matchUnit,";\n            background: ")).call(_context18,_vm.colorType[_vm.caseData[item.bindPoint].caseType])}),_c("div",{staticClass:"text",style:_concatInstanceProperty(_context23=_concatInstanceProperty(_context24=_concatInstanceProperty(_context25=_concatInstanceProperty(_context26="\n            margin-left: ".concat(item.textLeft*_vm.matchRatio)).call(_context26,_vm.matchUnit,";\n            margin-right: ")).call(_context25,item.textRight*_vm.matchRatio)).call(_context24,_vm.matchUnit,";\n            background: ")).call(_context23,_vm.colorType[_vm.caseData[item.bindPoint].caseType])},[_c("div",{class:{"icon":true,"icon-pay":_vm.caseData[item.bindPoint].caseType==="1","icon-get":_vm.caseData[item.bindPoint].caseType!=="1"}}),_c("span",[_vm._v(_vm._s(item.text))]),_c("span",{directives:[{name:"show",rawName:"v-show",value:item.name,expression:"item.name"}],staticClass:"account"},[_vm._v(_vm._s(item.name))])])]:_vm._e()],2)})],2)])};var _sfc_staticRenderFns=[];var __component__=common.normalizeComponent(_sfc_main,_sfc_render,_sfc_staticRenderFns,false,null,"2963a04e");var GoldCaseDemo=__component__.exports;exports.GoldCaseDemo=GoldCaseDemo;

package/lib/GoldFinanceV2/caseDemo/index.mjs

@@ -0,0 +1,380 @@
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js/instance/for-each";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { n as normalizeComponent } from "../../common/index.mjs";
+import './style.css';function deepCopy(obj) {
+  if (!obj) return obj;
+  return JSON.parse(_JSON$stringify(obj));
+}
+function isUndefined(obj) {
+  return obj === void 0;
+}
+var _sfc_main = {
+  name: "ActGoldCaseDemo",
+  data: function data() {
+    return {
+      caseData: {},
+      caseEdge: {},
+      caseAccount: [],
+      tempData: {},
+      tempEdge: {},
+      tempAccount: [],
+      hasName: false,
+      minWidth: 4.8,
+      maxWidth: 32,
+      textExtraWidth: 3.2,
+      singleNumWidth: 0.6675,
+      singleTextWidth: 1.2,
+      edgeOffset: 0.4,
+      accountOffset: 0.3,
+      errorOffset: -1.2,
+      prevWidth: [0],
+      residueWidth: [],
+      repeatPoint: {}
+    };
+  },
+  props: {
+    caseInfo: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    isCps: {
+      type: Boolean,
+      default: false
+    },
+    pxToRem: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    infoPaddingTop: function infoPaddingTop() {
+      if (this.residueWidth.length < 2) return 0;
+      return (this.residueWidth.length - 1) * 3;
+    },
+    edgeColor: function edgeColor() {
+      if (this.isCps) {
+        return {
+          1: "#72b2fc",
+          2: "#ffab45",
+          3: "#ff5a6e"
+        };
+      } else {
+        return {
+          1: "#8c7fee",
+          2: "#ffb229",
+          3: "#ff5a6e"
+        };
+      }
+    },
+    colorType: function colorType() {
+      if (this.isCps) {
+        return {
+          1: "linear-gradient(90deg,#73b3fc,#499eff)",
+          2: "linear-gradient(90deg,#ffab45,#ffa142)",
+          3: "linear-gradient(90deg,#ff8695,#ff5a6e)"
+        };
+      } else {
+        return {
+          1: "linear-gradient(90deg,#a59bff,#8b7fed)",
+          2: "linear-gradient(90deg,#ffc85a,#ffae1f)",
+          3: "linear-gradient(90deg,#ff8695,#ff5a6e)"
+        };
+      }
+    },
+    matchUnit: function matchUnit() {
+      return this.pxToRem > 0 ? "rem" : "px";
+    },
+    matchRatio: function matchRatio() {
+      return this.pxToRem > 0 ? this.pxToRem * 10 : 10;
+    }
+  },
+  methods: {
+    /**
+     * 计算文字的总宽度
+     */
+    calTextWidth: function calTextWidth(item) {
+      var numReg = new RegExp(/[^0-9]/gi);
+      var numLen = item.text.replace(numReg, "").length;
+      var textLen = item.text.length - numLen;
+      var width = numLen * this.singleNumWidth + textLen * this.singleTextWidth + this.textExtraWidth;
+      return width;
+    },
+    /**
+    * 计算账户描述的宽度
+    */
+    calAccountWidth: function calAccountWidth(item) {
+      var width = this.calTextWidth(item);
+      while (true) {
+        if (width > this.residueWidth[item.row]) {
+          item.row += 1;
+        } else {
+          this.residueWidth[item.row] = (this.residueWidth[item.row] || this.maxWidth) - width;
+          break;
+        }
+      }
+      if (!item.bindStartPoint || !item.bindEndPoint) {
+        if (item.caseType === "1") {
+          return width > this.minWidth ? width : this.minWidth;
+        } else {
+          return this.minWidth;
+        }
+      } else {
+        return width > this.minWidth ? width : this.minWidth;
+      }
+    },
+    /**
+     * 计算账户描述的左距离
+     */
+    calAccountLeft: function calAccountLeft(item, edgeKey) {
+      if (this.tempData[item.bindPoint] && this.tempData[item.bindPoint].isEndPoint === "1") {
+        item.right = -1;
+      } else if (this.tempData[edgeKey.split("_")[1]] && this.tempData[edgeKey.split("_")[1]].isEndPoint === "1") {
+        item.right = 0;
+      }
+      if (isUndefined(this.repeatPoint[item.bindPoint])) {
+        this.repeatPoint[item.bindPoint] = {};
+        item.left = this.accountOffset + (this.tempData[item.bindStartPoint].left || this.prevWidth[this.prevWidth.length - 1]);
+        this.repeatPoint[item.bindPoint].left = item.left;
+        this.repeatPoint[item.bindPoint].count = 1;
+      } else {
+        item.left = this.repeatPoint[item.bindPoint].left;
+        this.repeatPoint[item.bindPoint].count++;
+      }
+    },
+    /**
+     * 计算边的左距离
+     */
+    calEdgeLeft: function calEdgeLeft(edgeKey) {
+      if (!this.tempEdge[edgeKey]) return;
+      if (isUndefined(this.tempEdge[edgeKey].left)) {
+        this.tempEdge[edgeKey].left = this.edgeOffset + this.prevWidth[this.prevWidth.length - 1];
+      }
+    },
+    /**
+     * 计算边的宽度
+     */
+    calEdgeWidth: function calEdgeWidth(caseType, edgeKey, width) {
+      if (!this.tempEdge[edgeKey]) return;
+      if (!this.tempEdge[edgeKey].width) {
+        if (this.tempData[edgeKey.split("_")[1]].isEndPoint === "1") {
+          this.tempEdge[edgeKey].right = 0;
+        } else {
+          this.tempEdge[edgeKey].width = width + (caseType === "1" ? this.errorOffset : 1.5 * this.errorOffset);
+        }
+      }
+    },
+    /**
+     * 计算起点的位置
+     */
+    calStartPointLeft: function calStartPointLeft(item) {
+      if (this.tempData[item.bindPoint] && this.tempData[item.bindPoint].isEndPoint === "1") {
+        this.tempData[item.bindPoint].right = 0;
+        return;
+      }
+      if (isUndefined(this.tempData[item.bindStartPoint].left)) {
+        this.tempData[item.bindStartPoint].left = this.prevWidth[this.prevWidth.length - 1];
+      }
+    },
+    /**
+     * 计算(线段)终点的位置
+     */
+    calEndPointLeft: function calEndPointLeft(item, width) {
+      if (isUndefined(this.tempData[item.bindEndPoint])) return;
+      if (isUndefined(this.tempData[item.bindEndPoint].left)) {
+        if (this.tempData[item.bindEndPoint] && this.tempData[item.bindEndPoint].isEndPoint === "1") {
+          this.tempData[item.bindEndPoint].right = 0;
+        } else {
+          this.tempData[item.bindEndPoint].left = width + this.prevWidth[this.prevWidth.length - 1] + (item.caseType === "1" ? this.errorOffset : 1.5 * this.errorOffset);
+        }
+      }
+    },
+    /**
+     * 计算已占的宽度
+     */
+    calPrevWidth: function calPrevWidth(edgeKey, width, item) {
+      if (!isUndefined(this.tempEdge[edgeKey])) {
+        if (this.repeatPoint[item.bindPoint].count) {
+          this.prevWidth.push(this.tempEdge[edgeKey].width + this.minWidth);
+        } else {
+          this.prevWidth.push(this.prevWidth[this.prevWidth.length - 1] + this.minWidth);
+        }
+      } else {
+        if (item.caseType === "1" && !this.prevWidth[this.prevWidth.length - 1]) {
+          this.prevWidth.push(width);
+        } else {
+          if (!this.hasName) {
+            this.prevWidth.push(this.prevWidth[this.prevWidth.length - 1] + this.minWidth);
+          } else {
+            this.prevWidth.push(this.prevWidth[this.prevWidth.length - 1]);
+          }
+        }
+      }
+    },
+    /**
+     * 当绑定终点时账户描述的样式变动
+     */
+    calAccountBindEndPoint: function calAccountBindEndPoint(item) {
+      var textWidth = this.calTextWidth(item);
+      if (this.tempData[item.bindPoint] && this.tempData[item.bindPoint].isEndPoint === "1") {
+        item.left = this.maxWidth - this.edgeOffset;
+        item.textLeft = -textWidth;
+      }
+    },
+    /**
+     * 对账户描述数据进行排序，先按照caseType为1、2、3的顺序排列，在caseType相同的情况下，将终点为空的账户描述放到后面
+     */
+    sortAccountDataByCaseType: function sortAccountDataByCaseType() {
+      var _context;
+      var tempArr = [[], [], []];
+      _forEachInstanceProperty(_context = this.tempAccount).call(_context, function(item) {
+        return tempArr[Number(item.caseType) - 1].push(item);
+      });
+      _forEachInstanceProperty(tempArr).call(tempArr, function(item) {
+        return _sortInstanceProperty(item).call(item, function(a, b) {
+          if (a.order && b.order) {
+            return ~~b.order - ~~a.order;
+          } else {
+            return (b.bindEndPoint || "").length - (a.bindEndPoint || "").length;
+          }
+        });
+      });
+      this.tempAccount = _flatInstanceProperty(tempArr).call(tempArr);
+    },
+    /**
+     * 当前点的标题需要隐藏时, 说明这个点和前一个点是挨着的, 不需要隔出一个minWidth, 所以需要减去之前加的minWidth
+     * 不需要隐藏时, 这段代码无用
+     */
+    reducePrevWidth: function reducePrevWidth(item) {
+      if (this.tempData[item.bindStartPoint].display === false) {
+        this.prevWidth[this.prevWidth.length - 1] = this.prevWidth[this.prevWidth.length - 1] - this.minWidth + 0.8;
+      }
+    },
+    /**
+     * 判断账户描述是否有账户名称，用于判断案例演示整体的位置
+     */
+    accountHasName: function accountHasName(item) {
+      if (item.name) {
+        this.hasName = true;
+      }
+    },
+    calPosition: function calPosition() {
+      var _context2, _this = this;
+      this.prevWidth = [0];
+      this.residueWidth = [];
+      this.repeatPoint = {};
+      this.tempData = deepCopy(this.caseInfo.caseData);
+      this.tempEdge = deepCopy(this.caseInfo.caseEdge);
+      this.tempAccount = deepCopy(this.caseInfo.caseAccount);
+      this.sortAccountDataByCaseType();
+      _forEachInstanceProperty(_context2 = this.tempAccount).call(_context2, function(item) {
+        var _context3;
+        var edgeKey = _concatInstanceProperty(_context3 = "".concat(item.bindStartPoint, "_")).call(_context3, item.bindEndPoint);
+        _this.accountHasName(item);
+        var width = _this.calAccountWidth(item);
+        _this.reducePrevWidth(item);
+        _this.calAccountLeft(item, edgeKey);
+        _this.calEdgeWidth(item.caseType, edgeKey, width);
+        _this.calEdgeLeft(edgeKey);
+        _this.calStartPointLeft(item);
+        _this.calEndPointLeft(item, width);
+        _this.calAccountBindEndPoint(item);
+        _this.calPrevWidth(edgeKey, width, item);
+      });
+      this.caseData = this.tempData;
+      this.caseEdge = this.tempEdge;
+      this.caseAccount = this.tempAccount;
+    }
+  },
+  beforeMount: function beforeMount() {
+    this.calPosition();
+  },
+  watch: {
+    caseInfo: {
+      handler: function handler() {
+        this.calPosition();
+      },
+      deep: true
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _context4, _context5;
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", {
+    staticClass: "box",
+    class: _vm.isCps ? "cps" : "",
+    style: _concatInstanceProperty(_context4 = "padding-bottom: ".concat(_vm.infoPaddingTop * _vm.matchRatio)).call(_context4, _vm.matchUnit)
+  }, [_c("div", {
+    staticClass: "main-line",
+    style: !_vm.hasName ? _concatInstanceProperty(_context5 = "margin-left: ".concat(3 * _vm.matchRatio)).call(_context5, _vm.matchUnit) : ""
+  }, [_vm._l(_vm.caseData, function(item, key) {
+    var _context6, _context7, _context8, _context9, _context0;
+    return _c("div", {
+      key,
+      staticClass: "pay-point",
+      style: _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = _concatInstanceProperty(_context8 = _concatInstanceProperty(_context9 = "\n        left: ".concat(item.left * _vm.matchRatio)).call(_context9, _vm.matchUnit, ";\n        right: ")).call(_context8, item.right * _vm.matchRatio)).call(_context7, _vm.matchUnit, ";\n        background: ")).call(_context6, _vm.colorType[item.colorType])
+    }, [_c("div", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: !(item.display === false),
+        expression: "!(item.display === false)"
+      }],
+      staticClass: "head",
+      style: "".concat(item.isEndPoint === "1" ? _concatInstanceProperty(_context0 = "left: unset;right: -".concat(1 * _vm.matchRatio)).call(_context0, _vm.matchUnit) : "")
+    }, [_c("div", {
+      staticClass: "title"
+    }, [_vm._v(" " + _vm._s(item.title) + " ")]), _c("div", {
+      staticClass: "sub-title"
+    }, [_vm._v(" " + _vm._s(item.desc) + " ")])])]);
+  }), _vm._l(_vm.caseEdge, function(item, key) {
+    var _context1, _context10, _context11, _context12, _context13, _context14;
+    return _c("div", {
+      key,
+      staticClass: "pay-line",
+      style: _concatInstanceProperty(_context1 = _concatInstanceProperty(_context10 = _concatInstanceProperty(_context11 = _concatInstanceProperty(_context12 = _concatInstanceProperty(_context13 = _concatInstanceProperty(_context14 = "\n        width: ".concat(item.width * _vm.matchRatio)).call(_context14, _vm.matchUnit, ";\n        left: ")).call(_context13, item.left * _vm.matchRatio)).call(_context12, _vm.matchUnit, ";\n        right: ")).call(_context11, item.right * _vm.matchRatio)).call(_context10, _vm.matchUnit, ";\n        border-top: 1px dotted ")).call(_context1, _vm.edgeColor[item.caseType])
+    });
+  }), _vm._l(_vm.caseAccount, function(item, index) {
+    var _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26;
+    return _c("div", {
+      key: index,
+      staticClass: "desc",
+      style: _concatInstanceProperty(_context15 = _concatInstanceProperty(_context16 = "\n        left: ".concat(item.left.length ? item.left * _vm.matchRatio : _concatInstanceProperty(_context17 = "".concat(item.left * _vm.matchRatio)).call(_context17, _vm.matchUnit), ";\n        right: ")).call(_context16, item.right * _vm.matchRatio)).call(_context15, _vm.matchUnit)
+    }, [item.text ? [_c("div", {
+      staticClass: "desc-vertical-line",
+      style: _concatInstanceProperty(_context18 = _concatInstanceProperty(_context19 = _concatInstanceProperty(_context20 = _concatInstanceProperty(_context21 = _concatInstanceProperty(_context22 = "\n            height: ".concat((2 + (item.row - 1) * 4) * _vm.matchRatio)).call(_context22, _vm.matchUnit, ";\n            margin-left: ")).call(_context21, item.lineLeft * _vm.matchRatio, ";\n            margin-right: ")).call(_context20, item.lineRight * _vm.matchRatio)).call(_context19, _vm.matchUnit, ";\n            background: ")).call(_context18, _vm.colorType[_vm.caseData[item.bindPoint].caseType])
+    }), _c("div", {
+      staticClass: "text",
+      style: _concatInstanceProperty(_context23 = _concatInstanceProperty(_context24 = _concatInstanceProperty(_context25 = _concatInstanceProperty(_context26 = "\n            margin-left: ".concat(item.textLeft * _vm.matchRatio)).call(_context26, _vm.matchUnit, ";\n            margin-right: ")).call(_context25, item.textRight * _vm.matchRatio)).call(_context24, _vm.matchUnit, ";\n            background: ")).call(_context23, _vm.colorType[_vm.caseData[item.bindPoint].caseType])
+    }, [_c("div", {
+      class: {
+        "icon": true,
+        "icon-pay": _vm.caseData[item.bindPoint].caseType === "1",
+        "icon-get": _vm.caseData[item.bindPoint].caseType !== "1"
+      }
+    }), _c("span", [_vm._v(_vm._s(item.text))]), _c("span", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: item.name,
+        expression: "item.name"
+      }],
+      staticClass: "account"
+    }, [_vm._v(_vm._s(item.name))])])] : _vm._e()], 2);
+  })], 2)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "2963a04e");
+var GoldCaseDemo = __component__.exports;
+export {
+  GoldCaseDemo as G
+};

package/lib/GoldFinanceV2/caseDemo/style.css

@@ -0,0 +1 @@
+.cps .main-line .desc .icon-get[data-v-2963a04e]::after{background-image:url(../../assets/icon-get.44f5.png)}.cps .main-line .desc .icon-pay[data-v-2963a04e]::after{background-image:url(../../assets/icon-pay.8d08.png)}.box[data-v-2963a04e]{position:relative;overflow:hidden;line-height:1.4;background-color:#fff;padding-top:6px}.main-line[data-v-2963a04e]{position:relative;width:320px;height:1px;border-top:1px dotted #e2e5e7;margin:60px 25px;margin-left:40px}.main-line .pay-point[data-v-2963a04e]{position:absolute;width:8px;height:8px;background:red;border-radius:50%;top:-4px;z-index:2}.main-line .pay-line[data-v-2963a04e]{position:absolute;height:1px;border-top:1px dotted red;top:-1px}.main-line .head[data-v-2963a04e]{position:absolute;left:-20px;top:-40px;white-space:nowrap;text-align:center}.main-line .head .title[data-v-2963a04e]{font-size:13px}.main-line .head .sub-title[data-v-2963a04e]{font-size:12px;color:#999}.main-line .desc[data-v-2963a04e]{position:absolute;top:4px;left:3px}.main-line .desc .desc-vertical-line[data-v-2963a04e]{position:relative;width:2px;height:20px;background:red;z-index:1}.main-line .desc .icon[data-v-2963a04e]{margin-right:3px;width:19px;height:19px;border-radius:50%;background-color:#fff;-webkit-box-flex:0;-webkit-flex:0 0 19px;flex:0 0 19px}.main-line .desc .icon-get[data-v-2963a04e]::after{position:absolute;display:block;content:"";left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:12px;height:12px;background:url(../../assets/icon-get.2212.png) no-repeat;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.main-line .desc .icon-pay[data-v-2963a04e]::after{position:absolute;display:block;content:"";left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:12px;height:12px;background:url(../../assets/icon-pay.4ffc.png) no-repeat;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.main-line .desc .text[data-v-2963a04e]{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:0 7px 0 3px;margin-left:-10px;line-height:24px;font-size:11px;color:#fff;border-radius:12px;white-space:nowrap;background:lightpink;z-index:2}.main-line .account[data-v-2963a04e]{position:absolute;left:-15px;width:10px;top:-5px;white-space:pre-wrap;line-height:1.3;bottom:-5px;color:#999;font-size:12px}.info[data-v-2963a04e]{padding:40px 15px 10px 25px;line-height:20px;font-size:13px;color:#999;text-align:left}.info p[data-v-2963a04e]{position:relative}.info p[data-v-2963a04e]::before{content:"";display:block;position:absolute;top:8px;left:-10px;width:4px;height:4px;border-radius:50%;background-color:#999}