aaa-ui-test 1.0.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "aaa-ui-test",
+  "version": "1.0.0",
+  "main": "lib/index.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs",
+    "build:module": "cross-env NODE_ENV=production gulp",
+    "build:main": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
+    "test": "cross-env NODE_ENV=test jest --config .jest.conf.js",
+    "update:jest": "cross-env NODE_ENV=test jest --config .jest.conf.js --updateSnapshot",
+    "postinstall": " node ./babel-plugin-on-demand-load/report.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "better-scroll": "^1.15.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-object-assign": "^7.8.3",
+    "@babel/plugin-transform-typeof-symbol": "^7.2.0",
+    "@vue/cli-plugin-babel": "^3.3.0",
+    "@vue/cli-plugin-eslint": "^3.3.0",
+    "@vue/cli-service": "^3.3.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-istanbul": "^5.1.1",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-vue-compiler": "^1.0.0-beta.1",
+    "highlight.js": "^9.13.1",
+    "jest": "^24.1.0",
+    "jest-serializer-vue": "^2.0.2",
+    "jest-transform-stub": "^2.0.0",
+    "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^7.1.0",
+    "through2": "^3.0.1",
+    "uglifyjs-webpack-plugin": "^2.1.2",
+    "vue": "^2.5.21",
+    "vue-highlight.js": "^3.0.1",
+    "vue-jest": "^3.0.4",
+    "vue-router": "^3.0.2",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "no-console": 0
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  }
+}

package/src/assets/css/common/_mixin.scss

@@ -0,0 +1,130 @@
+@charset "utf-8";
+
+@mixin jdd-border-1px($color:#eeeeee, $radius:2px) {
+  position: relative;
+
+  &::before {
+      display: block;
+      content: " ";
+      position: absolute;
+      pointer-events: none;
+      backface-visibility: hidden;
+      transform-origin: left top;
+      z-index: 0;
+      left: 0;
+      top: 0;
+      border: 1px solid $color;
+      border-radius: $radius;
+
+      @media (min-resolution: 2dppx) {
+          border-radius: $radius*2;
+          right: -100%;
+          bottom: -100%;
+          transform: scale(0.5);
+      }
+
+      @media (min-resolution: 3dppx) {
+          border-radius: $radius*3;
+          right: -200%;
+          bottom: -200%;
+          transform: scale(0.333333);
+      }
+  }
+
+}
+
+@mixin jdd-border-top ($color:#eeeeee,$left:0) {
+  position: relative;
+
+  &::before {
+      content: " ";
+      position: absolute;
+      display: block;
+      transform-origin: top;
+      z-index: 0;
+      left: $left;
+      top: 0;
+      right: 0;
+      border-top: 1px solid $color;
+
+      @media (min-resolution: 2dppx) {
+          transform: scaleY(0.5);
+      }
+
+      @media (min-resolution: 3dppx) {
+          transform: scaleY(0.333333);
+      }
+  }
+}
+
+@mixin jdd-border-right($color:#eeeeee,$top:0){
+  position: relative;
+
+  &::after {
+      content: " ";
+      position: absolute;
+      display: block;
+      transform-origin: right;
+      z-index: 0;
+      right: 0;
+      bottom: 0;
+      top: $top;
+      border-bottom: 1px solid $color;
+
+      @media (min-resolution: 2dppx) {
+          transform: scaleX(0.5);
+      }
+
+      @media (min-resolution: 3dppx) {
+          transform: scaleX(0.333333);
+      }
+  }
+}
+
+@mixin jdd-border-bottom ($color:#eeeeee,$left:0){
+  position: relative;
+
+  &::after {
+      content: " ";
+      position: absolute;
+      display: block;
+      transform-origin: bottom;
+      z-index: 0;
+      left: $left;
+      bottom: 0;
+      right: 0;
+      border-bottom: 1px solid $color;
+
+      @media (min-resolution: 2dppx) {
+          transform: scaleY(0.5);
+      }
+
+      @media (min-resolution: 3dppx) {
+          transform: scaleY(0.333333);
+      }
+  }
+}
+
+@mixin jdd-border-left ($color:#eeeeee,$top:0){
+  position: relative;
+
+  &::before {
+      content: " ";
+      position: absolute;
+      display: block;
+      transform-origin: left;
+      z-index: 0;
+      left: 0;
+      bottom: 0;
+      top: $top;
+      border-left: 1px solid $color;
+
+      @media (min-resolution: 2dppx) {
+          transform: scaleX(0.5);
+      }
+
+      @media (min-resolution: 3dppx) {
+          transform: scaleX(0.333333);
+      }
+  }
+}

package/src/assets/css/common/_var.scss

@@ -0,0 +1,69 @@
+@charset "utf-8";
+// 背景
+$bg: #f6f8fc;
+// 强化背景
+$darkBg: #ecf0f9;
+// 弱化背景
+$weakBg: #fafbfd;
+// 分隔线、边框                              
+$borderColor: #eee;
+// 分隔线、边框                              
+$borderWeak: #999;
+// 标题、强化                                  
+$cMainStrong: #444;
+// 正文
+$cMain: #727682;
+//弱化/辅助文案
+$cMainWeak: #999;
+// 辅助
+$cRemark: #bec1ca;
+
+// 蓝色
+$blue: #0074ff;
+$blueDark: #006def;
+$blueActive: #0064da;
+$blueDisabled: #9fcbff;
+// 绿色
+$green: #0bdba8;
+// 橙色
+$orange: #ffb540;
+// 红色
+$red: #f52f3e;
+$redDark: #de2b38;
+$redDisabled: #feadb3;
+// 白色
+$white: #fff;
+// 粉色
+$pink: #ff3f80;
+// 滚动条颜色
+$scroll: #c1c4cc;
+// border-radius
+$borderRadius: 2px;
+// 动画时间
+$animateTime: .2s;
+
+// border-radius
+$borderRadius: 2px;
+
+// 项目前缀
+$proPrefix: "jdd-";
+
+// fontSize
+$sizeLarge: 18px;
+$sizeMedium: 16px;
+$sizeNormal: 14px;
+$sizeSmall: 12px;
+
+// padding
+$baseNum: 16px;
+
+// z-index
+$z-index-description: 50;
+$z-index-mask: 100;
+$z-index-popup: 200;
+$z-index-addrPicker: 240;
+$z-index-actionsheet: 300;
+$z-index-alert: 500;
+$z-index-modal: 500;
+$z-index-loading: 600;
+$z-index-toast: 999;

package/src/components/address/index.js

@@ -0,0 +1,8 @@
+import Address from './src/address.vue';
+import "./index.scss"
+
+Address.install = function(Vue){
+    Vue.component(Address.name, Address);
+}
+
+export default Address;

package/src/components/address/index.scss

@@ -0,0 +1,72 @@
+.jdd-address {
+    &-main {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      flex: 1;
+      height: 100%;
+    }
+  
+    &-chose-area {
+      transition: transform 0.3s cubic-bezier(0.1, 0.57, 0.1, 1);
+      flex: 1;
+      display: flex;
+      width: 100%;
+      position: absolute;
+    top: 109px;
+    bottom: 0;
+    bottom: constant(safe-area-inset-bottom) !important;
+    bottom: env(safe-area-inset-bottom) !important;
+      .jdd-radio-item-active p {
+        color: #4d7bfe;
+      }
+    }
+    &-radio-item {
+      flex: 0 0 100%;
+      -webkit-overflow-scrolling: touch;
+      max-height: 100%;
+    }
+    &-area-active {
+      overflow: auto;
+    }
+    &-item-text {
+      line-height: 56px;
+      height: 56px;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #333333;
+      padding-left: 16px;
+    }
+    &-tab-active {
+      &::after {
+        content: "";
+        position: absolute;
+        height: 3px;
+        width: 20px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background-color: #333333;
+      }
+    }
+    &-chosen {
+      flex-shrink: 0;
+      display: flex;
+      line-height: 44px;
+      height: 44px;
+      padding-left: 16px;
+      padding-right: 16px;
+      overflow-x: auto;
+      li {
+        margin-right: 24px;
+        position: relative;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        flex-shrink: 0;
+      }
+    }
+  }
+  .jdd-address-popup .jdd-popup-content{
+    flex: 1;
+  }

package/src/components/address/src/address.vue

@@ -0,0 +1,238 @@
+<template>
+  <jdd-popup :visible.sync="isVisible" pop-height="80%" class="jdd-address-popup">
+    <jdd-popup-header :main-title="mainTitle" slot="popup-header"></jdd-popup-header>
+    <div class="jdd-address-main">
+      <ul class="jdd-address-chosen">
+        <li
+          v-for="(item,index) in selectData"
+          :key="index"
+          @click="clickTab(item,index)"
+          :class="{'jdd-address-tab-active':index===current}"
+        >{{item.name}}</li>
+      </ul>
+      <div class="jdd-address-chose-area" :style="{'transform':getTrans}">
+        <jdd-radio
+          :options="item"
+          v-model="selectArray[index]"
+          :select-field="selectField"
+          @select-item="selectValue"
+          :auto-close="false"
+          v-for="(item,index) in myData"
+          :key="index"
+          :class="[index===current?'jdd-address-area-active':'','jdd-address-radio-item']"
+        >
+          <template slot-scope="{slotProps}">
+            <p class="jdd-address-item-text">{{slotProps.name}}</p>
+          </template>
+        </jdd-radio>
+      </div>
+    </div>
+  </jdd-popup>
+</template>
+<script>
+import JddPopup from "../../popup";
+import JddPopupHeader from "../../popup-header";
+import JddRadio from "../../radio";
+import visibleMixin from "@/mixins/visible";
+import axios from "axios";
+export default {
+  name: "JddAddress",
+  props: {
+    mainTitle: {
+      type: String,
+      default: "请选择地址"
+    },
+    options: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    value: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    selectField: {
+      type: String,
+      default: "code"
+    },
+    queryUrl: {
+      required: true,
+      type: String,
+      default: ""
+    },
+    otherParam: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    selectRange: {
+      type: Number,
+      default: 99
+    },
+    resolveData:{
+      default:null
+    }
+  },
+  components: {
+    JddPopup,
+    JddPopupHeader,
+    JddRadio
+  },
+  mixins: [visibleMixin],
+  created() {
+    axios
+      .get(this.queryUrl, {
+        params: {
+          reqData: Object.assign(
+            {
+              type: "area",
+              parentCode: ""
+            },
+            this.otherParam
+          )
+        }
+      })
+      .then(response => {
+        let resData = response.data.resultData.data;
+        if(this.resolveData){
+            resData  = this.resolveData(resData,0);
+        }
+        this.myData.splice(0, 1, resData || []);
+        if (this.value[0]) {
+          for (let i = 0; i < resData.length; i++) {
+            const element = resData[i];
+            if (element[this.selectField] === this.value[0]) {
+              this.selectData[0] = element;
+              break;
+            }
+          }
+        }
+      });
+    if (this.value.length > 1) {
+      for (let index = 0; index < this.value.length - 1; index++) {
+        axios
+          .get(this.queryUrl, {
+            params: {
+              reqData: Object.assign(
+                {
+                  type: "area",
+                  parentCode: this.value[index]
+                },
+                this.otherParam
+              )
+            }
+          })
+          .then(response => {
+            let resData = response.data.resultData.data;
+            if(this.resolveData){
+              resData  = this.resolveData(resData,index);
+            }
+            this.myData[index + 1] = resData;
+            // for (const iterator of resData) {
+            //   debugger
+            //   if (iterator[this.selectField] === this.value[index + 1]) {
+            //     this.selectData[index + 1] = iterator;
+            //     break;
+            //   }
+            // }
+            for (let i = 0; i < resData.length; i++) {
+              const element = resData[i];
+              if (element[this.selectField] === this.value[index + 1]) {
+                this.selectData[index + 1] = element;
+                break;
+              }
+            }
+          });
+      }
+    }
+    // }
+  },
+  data() {
+    return {
+      activeTab: 0,
+      currentData: [],
+      myData: [],
+      current: 0,
+      selectArray: [...this.value],
+      selectData: [{ name: "请选择" }]
+    };
+  },
+  computed: {
+    getTrans() {
+      return `translateX(-${this.current * 100}%)`;
+    }
+  },
+  methods: {
+    clickTab(item, index) {
+      this.current = index;
+    },
+    selectValue(val) {
+      this.$emit("select-item", val, this.current);
+      if (this.current < this.selectRange-1) {
+        axios
+          .get(this.queryUrl, {
+            params: {
+              reqData: Object.assign(
+                {
+                  type: "area",
+                  parentCode: val[this.selectField]
+                },
+                this.otherParam
+              )
+            }
+          })
+          .then(response => {
+            let _this = this;
+            let resData = response.data.resultData.data;
+            if(this.resolveData){
+            resData  = this.resolveData(resData,this.current + 1);
+            }
+            if (resData && resData.length) {
+              this.myData.splice(
+                this.current + 1,
+                this.myData.length - this.current,
+                resData
+              );
+              this.selectData.splice(
+                this.current,
+                this.selectData.length - this.current,
+                val,
+                { name: "请选择" }
+              );
+              this.selectArray.splice(
+                this.current,
+                this.selectArray.length - this.current,
+                val[this.selectField]
+              );
+              this.current++;
+              //   this.selectArray.splice(this.current, this.selectArray.length-this.current, val.id);
+              //  this.selectData.splice(this.current, 1, val);
+            } else {
+              this.selectData.splice(this.current, 1, val);
+              this.selectArray.splice(this.current, 1, val[this.selectField]);
+              this.$emit("select-change", [...this.selectData]);
+              this.$emit("input", [...this.selectArray]);
+              setTimeout(function() {
+                _this.isVisible = false;
+              }, 300);
+            }
+          });
+      } else {
+        this.selectData.splice(this.current, 1, val);
+        this.selectArray.splice(this.current, 1, val[this.selectField]);
+        this.$emit("select-change", [...this.selectData]);
+        this.$emit("input", [...this.selectArray]);
+        setTimeout(()=>{
+          this.isVisible = false;
+        }, 300);
+      }
+    }
+  }
+};
+</script>
+
+

package/src/components/amount/index.js

@@ -0,0 +1,6 @@
+import Amount from './src/amount.vue';
+import "./index.scss";
+Amount.install = function(Vue){
+    Vue.component(Amount.name, Amount);
+}
+export default Amount;

package/src/components/amount/index.scss

@@ -0,0 +1,88 @@
+.jdd-amount {
+    &-wrap {
+        display: flex;
+        position: relative;
+        height: 80px;
+        background: #fff;
+        padding: 0 16px;
+
+    }
+    
+    &-icon,
+    &-value {
+        font-size: 26px;
+        font-family: "UDC1.04-Bold", "UDC104";
+
+        line-height: 80px;
+    }
+    &-shine {
+        display: inline-block;
+        animation: change-bordercolor 0.7s infinite ease-in-out;
+        width: 2px;
+        background-color: transparent;
+        height: 40px;
+        align-self: center;
+      }
+     
+    &-edit {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    &-icon {
+        margin-right: 10px;
+        color: rgba(51, 51, 51, 1);
+    }
+    &-unit-wrap {
+        display: flex;
+        position: absolute;
+        top: 7px;
+    }
+    &-line {
+        display: inline-block;
+        width: 1px;
+        height: 20px;
+        background:rgba(221,221,221,1);
+        margin-right: 6px;
+    }
+    &-unit {
+        display: inline-block;
+        text-align: center;
+        line-height: 14px;
+        width: 26px;
+        height: 14px;
+        background: rgba(221, 221, 221, 1);
+        border-radius: 3px;
+        font-size: 10px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+    }
+    &-slot {
+        font-size:12px; 
+        color:#4D7BFE;
+        padding-top: 38px;
+        margin-left: 16px;
+    }
+    &-hasvalue {
+        .jdd-amount-value {
+            flex-grow: 0;
+            font-size: 36px;
+            color: rgba(51, 51, 51, 1);
+        }
+    }
+
+    &-value {
+        color: rgba(204, 204, 204, 1);
+        flex-grow: 1;
+    }
+}
+@keyframes change-bordercolor {
+    0% {
+      background-color: transparent;
+    }
+    100% {
+      background-color: #3385ff;
+    }
+  }