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>