@uxda/appkit 4.2.0 → 4.2.2

package/src/balance/components/BalanceCard.vue

@@ -1,215 +1,215 @@
-<template>
-  <div class="account-card">
-    <div class="card">
-      <div class="card-row">
-        <div class="card-row-left">
-          <div class="bean-box">
-            <div class="bean-icon-box">
-              <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
-            </div>
-            <span class="baan-name">云豆</span>
-          </div>
-          <div class="bean-nums number">{{ formatAmount(balance.total || 0) }}</div>
-        </div>
-        <div class="card-row-right">
-          <div class="account-info-entry" @click="gotoDetail">
-            <div class="account-info-name">账户明细</div>
-            <div class="account-info-icon">
-              <img class="icon"
-                src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDI3LjVDMjEuOTAzNiAyNy41IDI3LjUgMjEuOTAzNiAyNy41IDE1QzI3LjUgOC4wOTY0NCAyMS45MDM2IDIuNSAxNSAyLjVDOC4wOTY0NCAyLjUgMi41IDguMDk2NDQgMi41IDE1QzIuNSAyMS45MDM2IDguMDk2NDQgMjcuNSAxNSAyNy41WiIgZmlsbD0iIzM1MzUzNSIgc3Ryb2tlPSIjMzUzNTM1IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTEgMTUuMTU2MkgxOS4zMTI1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuODQ3MjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTUuMTU2NyAxMUwxOS4zMTMgMTUuMTU2MkwxNS4xNTY3IDE5LjMxMjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS44NDcyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="line"></div>
-      <div class="card-row">
-        <div class="card-row-left desc">权益使用时自动扣减云豆</div>
-        <div class="card-row-right">
-          <div class="pay" @click="gotoRecharge">
-            <div>充值</div>
-            <img
-              class="pay-icon"
-              src="https://cdn.ddjf.com/static/images/bpms-workBench/bean-right.png"
-            />
-          </div>
-        </div>
-      </div> -->
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { endpoints, useHttp } from '../api'
-import { Balance } from '../types'
-import { useDidShow } from '@tarojs/taro'
-import { useAmount } from '../../shared/composables/useAmount'
-
-type BalanceCardProps = {
-  app: string
-}
-const props = withDefaults(defineProps<BalanceCardProps>(), {
-  app: '',
-})
-
-const { formatAmount } = useAmount()
-const balance = ref<Balance>({
-  total: 0,
-  privileges: [],
-})
-
-const gotoRecharge = () => {
-  emit('recharge')
-}
-
-async function loadBalance() {
-  const $http = useHttp()
-  $http
-    .get<Balance>(endpoints.获取余额明细, {
-      app: props.app,
-    })
-    .then((data) => {
-      // balance.value = data
-      balance.value.total = data.total || (data.commonAccount as number)
-    })
-}
-
-const emit = defineEmits([
-  /**
-   * 跳账户详情
-   */
-  'drill',
-  /**
-   * 跳充值页
-   */
-  'recharge',
-])
-
-function gotoDetail() {
-  emit('drill')
-}
-
-useDidShow(() => {
-  loadBalance()
-})
-
-defineExpose({
-  reload: loadBalance,
-})
-</script>
-
-<style lang="scss">
-.account-card {
-  .card {
-    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
-    border-radius: 10px;
-    padding: 14px 20px;
-    margin: 0;
-
-    .card-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .card-row-left {
-        display: flex;
-        flex-direction: column;
-
-        .bean-box {
-          display: flex;
-          align-items: center;
-
-          .bean-icon-box {
-            width: 20px;
-            height: 20px;
-            margin-right: 8px;
-
-            .bean-icon {
-              display: block;
-              font-size: 0;
-              width: 100%;
-              height: 100%;
-            }
-          }
-
-          .baan-name {
-            color: #375264;
-            font-size: 16px;
-          }
-        }
-
-        .bean-nums {
-          color: #353535;
-          line-height: 25px;
-          font-weight: bold;
-          font-size: 20px;
-          margin-top: 3px;
-        }
-      }
-
-      .desc {
-        font-size: 10px;
-        color: #ccc;
-        line-height: 14px;
-      }
-    }
-
-    .line {
-      margin: 6px 0px 8px 0px;
-      height: 0.5px;
-      background: rgb(195, 195, 195);
-      opacity: 0.2;
-    }
-
-    .card-row-right {
-      .pay {
-        padding: 0 8px;
-        line-height: 18px;
-        color: #ffd6a5;
-        border: 1px solid #ffd6a5;
-        border-radius: 9px;
-        font-size: 12px;
-        display: flex;
-        align-items: center;
-
-        .pay-icon {
-          display: block;
-          font-size: 0;
-          width: 3.5px;
-          height: 6px;
-          margin-left: 6px;
-        }
-      }
-
-      .account-info-entry {
-        display: flex;
-        align-items: center;
-        padding: 0 10px;
-        height: 28px;
-        line-height: 28px;
-        border-radius: 14px;
-        background: rgba(255, 255, 255, 0.8);
-
-        .account-info-name {
-          color: #353535;
-          font-size: 13px;
-          font-weight: 500;
-          margin-right: 8px;
-        }
-
-        .account-info-icon {
-          width: 15px;
-          height: 15px;
-
-          .icon {
-            display: block;
-            font-size: 0;
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="account-card">
+    <div class="card">
+      <div class="card-row">
+        <div class="card-row-left">
+          <div class="bean-box">
+            <div class="bean-icon-box">
+              <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
+            </div>
+            <span class="baan-name">云豆</span>
+          </div>
+          <div class="bean-nums number">{{ formatAmount(balance.total || 0) }}</div>
+        </div>
+        <div class="card-row-right">
+          <div class="account-info-entry" @click="gotoDetail">
+            <div class="account-info-name">账户明细</div>
+            <div class="account-info-icon">
+              <img class="icon"
+                src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDI3LjVDMjEuOTAzNiAyNy41IDI3LjUgMjEuOTAzNiAyNy41IDE1QzI3LjUgOC4wOTY0NCAyMS45MDM2IDIuNSAxNSAyLjVDOC4wOTY0NCAyLjUgMi41IDguMDk2NDQgMi41IDE1QzIuNSAyMS45MDM2IDguMDk2NDQgMjcuNSAxNSAyNy41WiIgZmlsbD0iIzM1MzUzNSIgc3Ryb2tlPSIjMzUzNTM1IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTEgMTUuMTU2MkgxOS4zMTI1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuODQ3MjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTUuMTU2NyAxMUwxOS4zMTMgMTUuMTU2MkwxNS4xNTY3IDE5LjMxMjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS44NDcyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="line"></div>
+      <div class="card-row">
+        <div class="card-row-left desc">权益使用时自动扣减云豆</div>
+        <div class="card-row-right">
+          <div class="pay" @click="gotoRecharge">
+            <div>充值</div>
+            <img
+              class="pay-icon"
+              src="https://cdn.ddjf.com/static/images/bpms-workBench/bean-right.png"
+            />
+          </div>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { endpoints, useHttp } from '../api'
+import { Balance } from '../types'
+import { useDidShow } from '@tarojs/taro'
+import { useAmount } from '../../shared/composables/useAmount'
+
+type BalanceCardProps = {
+  app: string
+}
+const props = withDefaults(defineProps<BalanceCardProps>(), {
+  app: '',
+})
+
+const { formatAmount } = useAmount()
+const balance = ref<Balance>({
+  total: 0,
+  privileges: [],
+})
+
+const gotoRecharge = () => {
+  emit('recharge')
+}
+
+async function loadBalance() {
+  const $http = useHttp()
+  $http
+    .get<Balance>(endpoints.获取余额明细, {
+      app: props.app,
+    })
+    .then((data) => {
+      // balance.value = data
+      balance.value.total = data.total || (data.commonAccount as number)
+    })
+}
+
+const emit = defineEmits([
+  /**
+   * 跳账户详情
+   */
+  'drill',
+  /**
+   * 跳充值页
+   */
+  'recharge',
+])
+
+function gotoDetail() {
+  emit('drill')
+}
+
+useDidShow(() => {
+  loadBalance()
+})
+
+defineExpose({
+  reload: loadBalance,
+})
+</script>
+
+<style lang="scss">
+.account-card {
+  .card {
+    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
+    border-radius: 10px;
+    padding: 14px 20px;
+    margin: 0;
+
+    .card-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .card-row-left {
+        display: flex;
+        flex-direction: column;
+
+        .bean-box {
+          display: flex;
+          align-items: center;
+
+          .bean-icon-box {
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+
+            .bean-icon {
+              display: block;
+              font-size: 0;
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .baan-name {
+            color: #375264;
+            font-size: 16px;
+          }
+        }
+
+        .bean-nums {
+          color: #353535;
+          line-height: 25px;
+          font-weight: bold;
+          font-size: 20px;
+          margin-top: 3px;
+        }
+      }
+
+      .desc {
+        font-size: 10px;
+        color: #ccc;
+        line-height: 14px;
+      }
+    }
+
+    .line {
+      margin: 6px 0px 8px 0px;
+      height: 0.5px;
+      background: rgb(195, 195, 195);
+      opacity: 0.2;
+    }
+
+    .card-row-right {
+      .pay {
+        padding: 0 8px;
+        line-height: 18px;
+        color: #ffd6a5;
+        border: 1px solid #ffd6a5;
+        border-radius: 9px;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+
+        .pay-icon {
+          display: block;
+          font-size: 0;
+          width: 3.5px;
+          height: 6px;
+          margin-left: 6px;
+        }
+      }
+
+      .account-info-entry {
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 14px;
+        background: rgba(255, 255, 255, 0.8);
+
+        .account-info-name {
+          color: #353535;
+          font-size: 13px;
+          font-weight: 500;
+          margin-right: 8px;
+        }
+
+        .account-info-icon {
+          width: 15px;
+          height: 15px;
+
+          .icon {
+            display: block;
+            font-size: 0;
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/balance/components/BalanceReminder.vue

@@ -1,85 +1,85 @@
-<template>
-  <nut-popup
-    pop-class="balance-reminder-popup"
-    round
-    teleport="#app"
-    :visible="modelValue"
-    :close-on-click-overlay="false">
-    <div class="balance-reminder">
-      <div class="body">
-        <h2>操作失败</h2>
-        <p>您的账户可用余额不足，请充值后再进行查询</p>
-      </div>
-      <div class="footer">
-        <div class="col">
-          <nut-button
-            class="cancel-button"
-            @click="emit('update:modelValue', false)"
-            block>取消</nut-button>
-        </div>
-        <div class="col">
-          <nut-button block
-            class="recharge-button"
-            @click="emit('recharge')">{{buttonText}}</nut-button>
-        </div>
-      </div>
-    </div>
-  </nut-popup>
-</template>
-
-<script setup lang="ts">
-interface BalanceReminderProps {
-  modelValue: boolean
-  buttonText?: string
-}
-
-const emit = defineEmits(['recharge', 'update:modelValue'])
-
-withDefaults(
-  defineProps<BalanceReminderProps>(), {
-    modelValue: () => false,
-    buttonText: '去充值'
-  }
-)
-</script>
-
-<style lang="scss">
-.balance-reminder-popup {
-  width: 90%;
-}
-.balance-reminder {
-  --primary-button-background: linear-gradient(135deg, #098C9D 0%, #66BF97 100%);
-  h2 {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 14px;
-  }
-  .body {
-    height: 120px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px 10px 10px 10px;
-    font-size: 14px;
-    text-align: center;
-    color: #666;
-  }
-  .footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: stretch;
-    align-items: center;
-    padding: 10px 20px 20px 20px;
-    .col {
-      flex-grow: 1;
-      padding: 6px;
-    }
-    .recharge-button {
-      color: #fff;
-      background: var(--primary-button-background);
-    }
-  }
-}
-</style>
+<template>
+  <nut-popup
+    pop-class="balance-reminder-popup"
+    round
+    teleport="#app"
+    :visible="modelValue"
+    :close-on-click-overlay="false">
+    <div class="balance-reminder">
+      <div class="body">
+        <h2>操作失败</h2>
+        <p>您的账户可用余额不足，请充值后再进行查询</p>
+      </div>
+      <div class="footer">
+        <div class="col">
+          <nut-button
+            class="cancel-button"
+            @click="emit('update:modelValue', false)"
+            block>取消</nut-button>
+        </div>
+        <div class="col">
+          <nut-button block
+            class="recharge-button"
+            @click="emit('recharge')">{{buttonText}}</nut-button>
+        </div>
+      </div>
+    </div>
+  </nut-popup>
+</template>
+
+<script setup lang="ts">
+interface BalanceReminderProps {
+  modelValue: boolean
+  buttonText?: string
+}
+
+const emit = defineEmits(['recharge', 'update:modelValue'])
+
+withDefaults(
+  defineProps<BalanceReminderProps>(), {
+    modelValue: () => false,
+    buttonText: '去充值'
+  }
+)
+</script>
+
+<style lang="scss">
+.balance-reminder-popup {
+  width: 90%;
+}
+.balance-reminder {
+  --primary-button-background: linear-gradient(135deg, #098C9D 0%, #66BF97 100%);
+  h2 {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 14px;
+  }
+  .body {
+    height: 120px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 10px 10px 10px;
+    font-size: 14px;
+    text-align: center;
+    color: #666;
+  }
+  .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: center;
+    padding: 10px 20px 20px 20px;
+    .col {
+      flex-grow: 1;
+      padding: 6px;
+    }
+    .recharge-button {
+      color: #fff;
+      background: var(--primary-button-background);
+    }
+  }
+}
+</style>