init

xhs-mini-demos/common/component/api-status/index.css

@@ -0,0 +1,59 @@
+.title {
+  text-align: center;
+  font-weight: 600;
+}
+
+.status-container {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+
+.status-container > view {
+  padding: 5px 10px;
+  transition: all 0.3s;
+  border-radius: 10px;
+  border: 1px solid grey;
+  color: grey;
+}
+
+/* .status-success {
+  border: 1px solid green;
+  color: green;
+} */
+
+.status-container .status-success-active {
+  border: 1px solid green;
+  background-color: green;
+  color: white
+}
+
+/* .status-fail {
+  border: 1px solid red;
+  color: red;
+} */
+
+.status-container .status-fail-active {
+  border: 1px solid red;
+  background-color: red;
+  color: white
+}
+
+/* .status-complete {
+  border: 1px solid blue;
+  color: blue;
+} */
+
+.status-container .status-complete-active {
+  border: 1px solid green;
+  background-color: green;
+  color: white
+}
+
+.text-area {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid red;
+  border-radius: 10px;
+}

xhs-mini-demos/common/component/api-status/index.js

@@ -0,0 +1,42 @@
+const formatJsonForNotes = require("../../../util/formatJson");
+
+Component({
+  properties: {
+    success: {
+      type: Boolean,
+      value: false,
+    },
+    fail: {
+      type: Boolean,
+      value: false,
+    },
+    complete: {
+      type: Boolean,
+      value: false,
+    },
+    text: {
+      type: String,
+      value: ''
+    },
+    showStatus: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  data: {
+    formatText: ''
+  }, 
+
+  observers: {
+    text(value) {
+      let t = '';
+      try {
+        t = formatJsonForNotes(value);
+      } catch(err) {
+        t = value || '无返回值';
+      }
+      this.setData('formatText', t);
+    }
+  }
+});

xhs-mini-demos/common/component/api-status/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/api-status/index.xhsml

@@ -0,0 +1,26 @@
+<view>
+  <block xhs:if="{{showStatus}}">
+    <view class="title">
+      api调用状态
+    </view>
+    <view class="status-container">
+      <view class="status-success{{success ? '-active' : ''}}">
+        成功
+      </view>
+      <view class="status-fail{{fail ? '-active' : ''}}">
+        失败
+      </view>
+      <view class="status-complete{{complete ? '-active' : ''}}">
+        完成
+      </view>
+    </view>
+  </block>
+  <view class="title" xhs:if="{{text}}" style="padding-bottom: 10px;">
+    api调用返回结果
+  </view>
+  <scroll-view scroll-y class="text-area" xhs:if="{{text}}">
+    <text style="white-space:break-spaces;">
+      {{formatText}}
+    </text>
+  </scroll-view>
+</view>

xhs-mini-demos/common/component/apipan/index.js

@@ -0,0 +1,7 @@
+Component({
+  properties: {
+    success: '',
+    fail: '',
+    complete: '',
+  },
+});

xhs-mini-demos/common/component/apipan/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/apipan/index.xhsml

@@ -0,0 +1,4 @@
+<view class="inner">
+  {{innerText}}
+  31313123
+</view>

xhs-mini-demos/common/component/container/index.js

@@ -0,0 +1,24 @@
+Component({
+  properties: {
+    pad: {
+      type: String,
+      value: '16px',
+    },
+    pt: {
+      type: String,
+      value: undefined,
+    },
+    pb: {
+      type: String,
+      value: undefined,
+    },
+    pl: {
+      type: String,
+      value: undefined,
+    },
+    pr: {
+      type: String,
+      value: undefined,
+    }
+  }
+});

xhs-mini-demos/common/component/container/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/container/index.xhsml

@@ -0,0 +1,5 @@
+<view 
+  style="padding: {{pad}}; padding-top: {{pt}}; padding-bottom: {{pb}}; padding-left: {{pl}}; padding-right: {{pr}};"
+>
+  <slot></slot>
+</view>

xhs-mini-demos/common/component/example/index.css

@@ -0,0 +1,15 @@
+.container {
+  margin-bottom: 20px;
+}
+
+.container view{
+  text-align: center;
+}
+
+._ui-space > * {
+  margin-bottom: 20px;
+}
+
+._ui-space > *:last-child  {
+  margin-bottom: 0;
+}

xhs-mini-demos/common/component/example/index.js

@@ -0,0 +1,24 @@
+Component({
+  properties: {
+    value: Number
+  },
+
+  data: {
+    value2: ''
+  },
+
+  methods: {
+    onClick() {
+      this.triggerEvent('myevent');
+    }
+  },
+
+  observers: {
+    value: function(value) {
+      // 在 numberA 或者 numberB 被设置时，执行这个函数
+      this.setData({
+        value2: value && '[' + value + ']' 
+      });
+    }
+  }
+});

xhs-mini-demos/common/component/example/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/example/index.xhsml

@@ -0,0 +1,5 @@
+<view class="container _ui-space">
+  <view>组件内部的value值: {{value}}</view>
+  <view>监听组件value值的变化: {{value2}}</view>
+  <button bindtap="onClick" class="_ui-button" hover-class="_ui-button-hover">组件内重置value值</button>
+</view>

xhs-mini-demos/common/component/showbox/index.css

@@ -0,0 +1,35 @@
+.xhs-demo-card {
+  margin: 10px;
+  background-color: white;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.xhs-demo-card-title {
+  margin: 0 16px;
+  padding: 15px 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.xhs-demo-card-content {
+  background-color: #ffffff;
+}
+
+.xhs-demo-card-spiver{
+  position: relative;
+  border: 0;
+}
+
+.xhs-demo-card-spiver:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #efefef;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+}

xhs-mini-demos/common/component/showbox/index.js

@@ -0,0 +1,9 @@
+Component({
+  // behaviors: [{}],
+  properties: {
+    title: {
+      type: String,
+      value: '',
+    }
+  }
+});

xhs-mini-demos/common/component/showbox/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/showbox/index.xhsml

@@ -0,0 +1,8 @@
+<view class="xhs-demo-card">
+  <view xhs:if="{{title}}" class="xhs-demo-card-title xhs-demo-card-spiver">
+    {{title}}
+  </view>
+  <view class="xhs-demo-card-content">
+   <slot></slot>
+  </view>
+</view>