@uxda/appkit 4.2.16 → 4.2.20

package/src/balance/components/ConsumptionFilter.vue

@@ -1,219 +1,219 @@
-<template>
-  <div class="consumption-filter">
-    <div class="consumption-filter-title">
-      <h3>选择筛选项</h3>
-    </div>
-    <div class="consumption-filter-content">
-      <template v-for="(item, index) in filterSections" :key="index">
-        <div class="title">{{ item.title }}</div>
-        <div class="info">
-          <div
-            v-for="(it, i) in item.data"
-            @click="() => onFilterSectionClick(index, it.code)"
-            :class="getItemClass(index, it.code)"
-            class="info-item"
-            :key="i">
-            {{ typeof it === 'string' ? it : it.name }}
-          </div>
-        </div>
-      </template>
-    </div>
-    <div class="consumption-filter-btn spa-between">
-      <div class="btn" @click="reset">重置</div>
-      <div class="btn confirm" @click="onOkClick">确定</div>
-    </div>
-    <div class="consumption-filter-bottom"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from 'vue'
-import {
-  type ConsumptionDirection, 
-  type ConsumptionPosition, 
-  type ConsumptionType,
-  consumptionDirections,
-  consumptionPositions,
-  consumptionTypes,
-  权益类目,
-} from '../types'
-import { endpoints, useHttp } from '../api'
-
-const $http = useHttp()
-
-type ConsumptionFilterModelValue = [
-    ConsumptionPosition | '全部',
-    ConsumptionDirection | '全部',
-    ConsumptionType | '全部',
-    string | '',
-
-  ]
-type MixteValues =
-    ConsumptionPosition |
-    ConsumptionDirection |
-    ConsumptionType | 
-    string |''
-
-interface ConsumptionFilterProps {
-  modelValue: ConsumptionFilterModelValue
-}
-
-const props = withDefaults(
-  defineProps<ConsumptionFilterProps>(), {
-    modelValue: () => ['全部', '全部', '全部', '']
-  }
-)
-const emit = defineEmits(['complete'])
-
-const result = reactive<ConsumptionFilterModelValue>(props.modelValue)
-
-type FilterSecion = {
-  title: string,
-  data: {
-    code: string,
-    name: string
-  }[]
-}
-
-/**
- * 筛选项目里面所有按钮
- */
-const filterSections = ref<FilterSecion[]>([
-  {
-    title: '类型',
-    data: consumptionPositions.map(s => ({code: s, name: s})),
-  },
-  {
-    title: '收入/支出',
-    data: consumptionDirections.map(s => ({code: s, name: s})),
-  },
-  {
-    title: '明细类型',
-    data: consumptionTypes.map(s => ({code: s, name: s})),
-  },
-  {
-    title: '权益类目',
-    data: []
-  }
-])
-
-const getItemClass = (index: number, value) => result[index] === value ? ['current'] : ['']
-
-const onFilterSectionClick = (index: number, value: MixteValues) => {
-  result[index] = value
-}
-
-const reset = () => {
-  result[0] = '全部'
-  result[1] = '全部'
-  result[2] = '全部'
-  result[3] = ''
-}
-
-const 请求权益类目 = () => {
-  $http.get<权益类目[]>(endpoints.获取权益类目).then(data => {
-    filterSections.value[3].data = [
-      { code: '', name: '全部' },
-      ...data
-    ]
-  })
-}
-
-请求权益类目()
-
-const onOkClick = () => {
-  emit('complete', result)
-}
-</script>
-<style lang="scss">
-.consumption-filter {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  &-title {
-    position: relative;
-    height: 44px;
-    line-height: 44px;
-    font-size: 17px;
-    color: #353535;
-    background: #f5f5f5;
-    text-align: center;
-  }
-  &-content {
-    flex: 1;
-    margin: 15px;
-    overflow-y: scroll;
-    color: #353535;
-    font-size: 13px;
-    .title {
-      opacity: 0.6;
-      line-height: 18px;
-    }
-    .info {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-gap: 10px;
-      margin: 10px 0;
-      &-item {
-        height: 30px;
-        line-height: 30px;
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        text-align: center;
-      }
-      .current {
-        border-radius: 5px;
-        border: 1px solid #EFD082;
-        background: linear-gradient(180deg, #FFF7E3 0%, #FEFDE6 100%);
-      }
-    }
-  }
-  &-btn {
-    margin: 0 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .btn {
-      flex: 1;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      border: 1px solid #ccc;
-      box-sizing: border-box;
-      color: #666;
-      font-size: 16px;
-      border-radius: 6px;
-    }
-    .confirm {
-      margin-left: 11px;
-      color: #000;
-      border: none;
-      background: linear-gradient(
-        90deg,
-        #ffebc1 0%,
-        #ffd7a7 52.29%,
-        #ffb875 100%
-      );
-    }
-  }
-  &-bottom {
-    height: 32px;
-    background: #fff;
-  }
-  .icon {
-    display: block;
-    width: 20px;
-    height: 20px;
-    background-size: 40px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    &.icon-x {
-      position: absolute;
-      right: 10px;
-      top: 11px;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MSA0MUgxVjFINDFWNDFaIiBmaWxsPSIjRDhEOEQ4IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjM1NjEgMjAuOTk5OUwzMy45NjM3IDMxLjYwNzJDMzQuNjE0NiAzMi4yNTgxIDM0LjYxNDYgMzMuMzEzNCAzMy45NjM3IDMzLjk2NDJDMzMuMzQyNSAzNC41ODU1IDMyLjM1MjcgMzQuNjEzOCAzMS42OTc5IDM0LjA0ODlMMjAuOTk5NCAyMy4zNTY2TDEwLjM5MzUgMzMuOTY0MkM5Ljc0MjY1IDM0LjYxNTEgOC42ODczOCAzNC42MTUxIDguMDM2NSAzMy45NjQyQzcuNDE1MTkgMzMuMzQyOSA3LjM4Njk3IDMyLjM1MzIgNy45NTE3OSAzMS42OTg0TDE4LjY0MjggMjAuOTk5OUw4LjAzNjUgMTAuMzk0QzcuMzg1NjMgOS43NDMxNCA3LjM4NTYzIDguNjg3ODcgOC4wMzY1IDguMDM2OTlDOC42NTc3OSA3LjQxNTY4IDkuNjQ3NTQgNy4zODc0NiAxMC4zMDIzIDcuOTUyMjdMMjAuOTk5NCAxOC42NDMzTDMxLjYwNjcgOC4wMzY5OUMzMi4yNTc2IDcuMzg2MTIgMzMuMzEyOSA3LjM4NjEyIDMzLjk2MzcgOC4wMzY5OUMzNC41ODUgOC42NTgyOCAzNC42MTMzIDkuNjQ4MDMgMzQuMDQ4NSAxMC4zMDI4TDIzLjM1NjEgMjAuOTk5OVoiIGZpbGw9IiMxNzFBMUQiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1vcGFjaXR5PSIwLjAxIi8+Cjwvc3ZnPgo=")
-    }
-  }
-}
+<template>
+  <div class="consumption-filter">
+    <div class="consumption-filter-title">
+      <h3>选择筛选项</h3>
+    </div>
+    <div class="consumption-filter-content">
+      <template v-for="(item, index) in filterSections" :key="index">
+        <div class="title">{{ item.title }}</div>
+        <div class="info">
+          <div
+            v-for="(it, i) in item.data"
+            @click="() => onFilterSectionClick(index, it.code)"
+            :class="getItemClass(index, it.code)"
+            class="info-item"
+            :key="i">
+            {{ typeof it === 'string' ? it : it.name }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="consumption-filter-btn spa-between">
+      <div class="btn" @click="reset">重置</div>
+      <div class="btn confirm" @click="onOkClick">确定</div>
+    </div>
+    <div class="consumption-filter-bottom"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import {
+  type ConsumptionDirection, 
+  type ConsumptionPosition, 
+  type ConsumptionType,
+  consumptionDirections,
+  consumptionPositions,
+  consumptionTypes,
+  权益类目,
+} from '../types'
+import { endpoints, useHttp } from '../api'
+
+const $http = useHttp()
+
+type ConsumptionFilterModelValue = [
+    ConsumptionPosition | '全部',
+    ConsumptionDirection | '全部',
+    ConsumptionType | '全部',
+    string | '',
+
+  ]
+type MixteValues =
+    ConsumptionPosition |
+    ConsumptionDirection |
+    ConsumptionType | 
+    string |''
+
+interface ConsumptionFilterProps {
+  modelValue: ConsumptionFilterModelValue
+}
+
+const props = withDefaults(
+  defineProps<ConsumptionFilterProps>(), {
+    modelValue: () => ['全部', '全部', '全部', '']
+  }
+)
+const emit = defineEmits(['complete'])
+
+const result = reactive<ConsumptionFilterModelValue>(props.modelValue)
+
+type FilterSecion = {
+  title: string,
+  data: {
+    code: string,
+    name: string
+  }[]
+}
+
+/**
+ * 筛选项目里面所有按钮
+ */
+const filterSections = ref<FilterSecion[]>([
+  {
+    title: '类型',
+    data: consumptionPositions.map(s => ({code: s, name: s})),
+  },
+  {
+    title: '收入/支出',
+    data: consumptionDirections.map(s => ({code: s, name: s})),
+  },
+  {
+    title: '明细类型',
+    data: consumptionTypes.map(s => ({code: s, name: s})),
+  },
+  {
+    title: '权益类目',
+    data: []
+  }
+])
+
+const getItemClass = (index: number, value) => result[index] === value ? ['current'] : ['']
+
+const onFilterSectionClick = (index: number, value: MixteValues) => {
+  result[index] = value
+}
+
+const reset = () => {
+  result[0] = '全部'
+  result[1] = '全部'
+  result[2] = '全部'
+  result[3] = ''
+}
+
+const 请求权益类目 = () => {
+  $http.get<权益类目[]>(endpoints.获取权益类目).then(data => {
+    filterSections.value[3].data = [
+      { code: '', name: '全部' },
+      ...data
+    ]
+  })
+}
+
+请求权益类目()
+
+const onOkClick = () => {
+  emit('complete', result)
+}
+</script>
+<style lang="scss">
+.consumption-filter {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  &-title {
+    position: relative;
+    height: 44px;
+    line-height: 44px;
+    font-size: 17px;
+    color: #353535;
+    background: #f5f5f5;
+    text-align: center;
+  }
+  &-content {
+    flex: 1;
+    margin: 15px;
+    overflow-y: scroll;
+    color: #353535;
+    font-size: 13px;
+    .title {
+      opacity: 0.6;
+      line-height: 18px;
+    }
+    .info {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 10px;
+      margin: 10px 0;
+      &-item {
+        height: 30px;
+        line-height: 30px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        text-align: center;
+      }
+      .current {
+        border-radius: 5px;
+        border: 1px solid #EFD082;
+        background: linear-gradient(180deg, #FFF7E3 0%, #FEFDE6 100%);
+      }
+    }
+  }
+  &-btn {
+    margin: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn {
+      flex: 1;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+      color: #666;
+      font-size: 16px;
+      border-radius: 6px;
+    }
+    .confirm {
+      margin-left: 11px;
+      color: #000;
+      border: none;
+      background: linear-gradient(
+        90deg,
+        #ffebc1 0%,
+        #ffd7a7 52.29%,
+        #ffb875 100%
+      );
+    }
+  }
+  &-bottom {
+    height: 32px;
+    background: #fff;
+  }
+  .icon {
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-size: 40px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    &.icon-x {
+      position: absolute;
+      right: 10px;
+      top: 11px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MSA0MUgxVjFINDFWNDFaIiBmaWxsPSIjRDhEOEQ4IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjM1NjEgMjAuOTk5OUwzMy45NjM3IDMxLjYwNzJDMzQuNjE0NiAzMi4yNTgxIDM0LjYxNDYgMzMuMzEzNCAzMy45NjM3IDMzLjk2NDJDMzMuMzQyNSAzNC41ODU1IDMyLjM1MjcgMzQuNjEzOCAzMS42OTc5IDM0LjA0ODlMMjAuOTk5NCAyMy4zNTY2TDEwLjM5MzUgMzMuOTY0MkM5Ljc0MjY1IDM0LjYxNTEgOC42ODczOCAzNC42MTUxIDguMDM2NSAzMy45NjQyQzcuNDE1MTkgMzMuMzQyOSA3LjM4Njk3IDMyLjM1MzIgNy45NTE3OSAzMS42OTg0TDE4LjY0MjggMjAuOTk5OUw4LjAzNjUgMTAuMzk0QzcuMzg1NjMgOS43NDMxNCA3LjM4NTYzIDguNjg3ODcgOC4wMzY1IDguMDM2OTlDOC42NTc3OSA3LjQxNTY4IDkuNjQ3NTQgNy4zODc0NiAxMC4zMDIzIDcuOTUyMjdMMjAuOTk5NCAxOC42NDMzTDMxLjYwNjcgOC4wMzY5OUMzMi4yNTc2IDcuMzg2MTIgMzMuMzEyOSA3LjM4NjEyIDMzLjk2MzcgOC4wMzY5OUMzNC41ODUgOC42NTgyOCAzNC42MTMzIDkuNjQ4MDMgMzQuMDQ4NSAxMC4zMDI4TDIzLjM1NjEgMjAuOTk5OVoiIGZpbGw9IiMxNzFBMUQiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1vcGFjaXR5PSIwLjAxIi8+Cjwvc3ZnPgo=")
+    }
+  }
+}
 </style>

package/src/balance/components/ConsumptionRules.vue

@@ -1,68 +1,68 @@
-<template>
-  <div class="consumption-rules">
-    <div class="title">规则说明</div>
-    <div class="desc">
-      <div class="desc-title">【云豆】</div>
-      <div>
-        1、云豆系大道云平台为用户提供的数字化商品，用于大道云平台上的产品权益抵扣使用或者产品权益的兑换。
-      </div>
-      <div>
-        人民币与云豆的兑换比例：1人民币=1云豆。云豆购买成功过后不可转让或者逆向兑换。
-      </div>
-      <div>
-        2、云豆的使用范围：云豆可用于大道云平台各个系统的产品权益抵扣使用或兑换，系统包括但不限于企明星、AI审批、电子签约、蜂鸟周转系统、蜂鸟居间系统。
-      </div>
-      <div class="desc-title">【产品权益】</div>
-      <div>
-        1、产品权益系大道云平台各个系统产品的使用消耗标准，可直接用于单项产品的使用消耗。产品权益可通过人民币充值购买、云豆兑换或大道云平台赠送获得。产品权益仅用于指定的产品使用消耗，也无法逆向兑换成云豆或人民币。
-      </div>
-      <div>
-        2、产品权益的使用范围：产品权益用于大道云平台各个系统产品的消耗使用，系统包括但不限于企明星、AI审批、电子签约、蜂鸟周转系统、蜂鸟居间系统，各个系统的产品权益仅用于各产品专项使用，无法跨产品使用。
-      </div>
-    </div>
-    <div class="know" @click="emit('complete')">我知道了</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const emit = defineEmits(["complete"]);
-</script>
-<style lang="scss">
-.consumption-rules {
-  .title {
-    line-height: 16px;
-    font-weight: 500;
-    color: #1a1a1a;
-    font-size: 16px;
-    text-align: center;
-    width: 100%;
-  }
-  .desc {
-    flex: 1;
-    font-size: 14px;
-    line-height: 21px;
-    color: #666;
-    overflow-y: scroll;
-    margin: 10px 0;
-    &-title {
-      font-weight: 600;
-    }
-  }
-  .know {
-    background: linear-gradient(
-      90deg,
-      #ffebc1 0%,
-      #ffd7a7 52.29%,
-      #ffb875 100%
-    );
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    color: #353535;
-    border-radius: 15px;
-    width: 130px;
-    margin: 0 auto;
-    text-align: center;
-  }
-}
-</style>
+<template>
+  <div class="consumption-rules">
+    <div class="title">规则说明</div>
+    <div class="desc">
+      <div class="desc-title">【云豆】</div>
+      <div>
+        1、云豆系大道云平台为用户提供的数字化商品，用于大道云平台上的产品权益抵扣使用或者产品权益的兑换。
+      </div>
+      <div>
+        人民币与云豆的兑换比例：1人民币=1云豆。云豆购买成功过后不可转让或者逆向兑换。
+      </div>
+      <div>
+        2、云豆的使用范围：云豆可用于大道云平台各个系统的产品权益抵扣使用或兑换，系统包括但不限于企明星、AI审批、电子签约、蜂鸟周转系统、蜂鸟居间系统。
+      </div>
+      <div class="desc-title">【产品权益】</div>
+      <div>
+        1、产品权益系大道云平台各个系统产品的使用消耗标准，可直接用于单项产品的使用消耗。产品权益可通过人民币充值购买、云豆兑换或大道云平台赠送获得。产品权益仅用于指定的产品使用消耗，也无法逆向兑换成云豆或人民币。
+      </div>
+      <div>
+        2、产品权益的使用范围：产品权益用于大道云平台各个系统产品的消耗使用，系统包括但不限于企明星、AI审批、电子签约、蜂鸟周转系统、蜂鸟居间系统，各个系统的产品权益仅用于各产品专项使用，无法跨产品使用。
+      </div>
+    </div>
+    <div class="know" @click="emit('complete')">我知道了</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["complete"]);
+</script>
+<style lang="scss">
+.consumption-rules {
+  .title {
+    line-height: 16px;
+    font-weight: 500;
+    color: #1a1a1a;
+    font-size: 16px;
+    text-align: center;
+    width: 100%;
+  }
+  .desc {
+    flex: 1;
+    font-size: 14px;
+    line-height: 21px;
+    color: #666;
+    overflow-y: scroll;
+    margin: 10px 0;
+    &-title {
+      font-weight: 600;
+    }
+  }
+  .know {
+    background: linear-gradient(
+      90deg,
+      #ffebc1 0%,
+      #ffd7a7 52.29%,
+      #ffb875 100%
+    );
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    color: #353535;
+    border-radius: 15px;
+    width: 130px;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+</style>