@uxda/appkit 4.3.39 → 4.3.42

package/src/balance/components/AccountView.vue

@@ -1,834 +1,850 @@
-<template>
-  <div class="account-view">
-    <div class="scroll-content">
-      <page-header :title="Taro.getEnv() !== 'WEB' ? '我的账户' : ''" :class="{ 'with-background': scrolled > 0 }"
-        @close="onPageHeaderClose" />
-      <div class="row jusify-right">
-        <div class="small-bean-button" v-track-click @click="onSecondBalanceButtonClick">
-          <label class="label">收支明细</label>
-        </div>
-      </div>
-      <div class="balance">
-        <div class="bean-box spa-between">
-          <div class="bean-img">
-            <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
-            <div class="bean-tag tag">云豆</div>
-          </div>
-          <div v-if="!isAppEnv || (isAppEnv && !isIOS())" class="rule" v-track-click @click="rulesPopupOpen = true">规则说明</div>
-        </div>
-        <div class="bean-counts spa-between">
-          <div class="counts number">{{ formatAmount(balance.total || 0) }}</div>
-          <div v-if="!isAppEnv || (isAppEnv && !isIOS())" class="pay" v-track-click @click="gotoRecharge">云豆充值</div>
-        </div>
-      </div>
-      <Tip />
-      <!-- <div class="rights-card" v-if="bdxLiteRight">
-        <div class="title">风控个人风险Lite权益</div>
-        <div class="list">
-          <div class="item star-item">
-            <div class="item-count">
-              <span>{{ formatAmount(bdxLiteRight.count || 0) }}</span><span>{{ bdxLiteRight.unit }}</span>
-            </div>
-            <div class="item-title">
-              <div>{{ bdxLiteRight.title }}次数</div>
-              <div class="item-title-button" v-if="!isAppEnv || (isAppEnv && !isIOS())">
-                <div v-track-click @click="gotoTrade(bdxLiteRight)">风控个人风险Lite充值</div>
-                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div> -->
-      <div class="rights-card" v-if="bdxProRight">
-        <div class="title">风控个人风险Pro权益</div>
-        <div class="list">
-          <div class="item star-item">
-            <div class="item-count">
-              <span>{{ formatAmount(bdxProRight.count || 0) }}</span><span>{{ bdxProRight.unit }}</span>
-            </div>
-            <div class="item-title">
-              <div>{{ bdxProRight.title }}次数</div>
-              <div class="item-title-button" v-if="!isAppEnv || (isAppEnv && !isIOS())">
-                <div v-track-click @click="gotoTrade(bdxProRight)">风控个人风险Pro充值</div>
-                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="rights-card" v-if="bdxBillRight">
-        <div class="title">风控流水智报权益</div>
-        <div class="list">
-          <div class="item star-item">
-            <div class="item-count">
-              <span>{{ formatAmount(bdxBillRight.count || 0) }}</span><span>{{ bdxBillRight.unit }}</span>
-            </div>
-            <div class="item-title">
-              <div>{{ bdxBillRight.title }}次数</div>
-              <div class="item-title-button" v-if="!isAppEnv || (isAppEnv && !isIOS())">
-                <div v-track-click @click="gotoTrade(bdxBillRight)">风控流水智报充值</div>
-                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="rights-card" v-if="balance.privileges?.corporateStar">
-        <div class="title">企明星权益</div>
-        <div class="list">
-          <div class="item star-item" v-for="(item, index) in balance.privileges.corporateStar" :key="index">
-            <div class="item-count">
-              <span>{{ formatAmount(item.count || 0) }}</span><span>{{ item.unit }}</span>
-            </div>
-            <div class="item-title">
-              <div>{{ item.title }}次数</div>
-              <div class="item-title-button" v-if="item.id && (!isAppEnv || (isAppEnv && !isIOS()))">
-                <div v-track-click @click="gotoTrade(item)">企明星优惠充值</div>
-                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="rights-card" v-if="balance.privileges?.aiapprove">
-        <div class="title">AI审批权益</div>
-        <div class="list">
-          <div class="item star-item" v-for="(item, index) in balance.privileges.aiapprove" :key="index">
-            <div class="item-count">{{ formatAmount(item.count || 0) }}{{ item.unit }}</div>
-            <div class="item-title">
-              <div>{{ item.title }}次数</div>
-              <div class="item-title-button" v-if="item.id && (!isAppEnv || (isAppEnv && !isIOS()))">
-                <div v-track-click @click="gotoTrade(item)">AI审批充值</div>
-                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="rights-card" v-if="balance.privileges?.signkit">
-        <div class="title">电子签约权益</div>
-        <div class="list">
-          <div class="item" v-for="(item, index) in balance.privileges.signkit" :key="index">
-            <div class="item-count">{{ formatAmount(item.count || 0) }}{{ item.unit }}</div>
-            <div class="item-title">{{ item.title }}次数</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <nut-popup pop-class="consumption-rules-popup" v-model:visible="rulesPopupOpen" :close-on-click-overlay="false">
-    <consumption-rules @complete="rulesPopupOpen = false" />
-  </nut-popup>
-  <nut-popup position="bottom" :style="{ height: '40%' }" round :close-on-click-overlay="true"
-    v-model:visible="datePickerOpen">
-    <date-filter v-if="datePickerOpen" :from="filtering.dateFrom" :to="filtering.dateTo" @reset="onDateReset"
-      @complete="onDateFilterComplete" />
-  </nut-popup>
-  <nut-popup position="bottom" :style="{ height: '75%' }" round :close-on-click-overlay="true"
-    v-model:visible="filterOpen">
-    <consumption-filter :modelValue="[
-      filtering.账户类型,
-      filtering.收入还是支出,
-      filtering.交易类型,
-      filtering.权益类目,
-    ]" @complete="onFilterComplete" />
-  </nut-popup>
-  <app-drawer v-model="secondBalanceOpen" title="收支明细">
-    <div class="operation-box">
-      <div class="operation-title spa-between" :class="{ 'with-shadow': scrolled > 0 }">
-        <div class="search-time">
-          <div class="title">收支明细</div>
-          <div class="time" @click="openDateFilter" v-show="filtering.dateFrom">
-            <div class="text number">{{ dateRangeDisplay }}</div>
-            <img style="margin-top: -2px" class="time-icon"
-              src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-down.png" />
-          </div>
-        </div>
-        <div class="search" v-track-click @click="filterOpen = true">
-          <span class="text">筛选</span>
-          <img class="time-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png" />
-        </div>
-      </div>
-      <div class="operation-list">
-        <ScrollView class="operation-scroll" :scroll-y="true" @scroll="onScroll" :lower-threshold="100"
-          @scrolltolower="onReachBottom">
-          <div class="box" v-if="consumptionGroups.length > 0">
-            <div class="box-detail" v-for="(item, index) in consumptionGroups" :key="index">
-              <div class="title number">{{ item.date }}</div>
-              <div class="item" v-for="(it, i) in item.consumptions" :key="i">
-                <div class="item-type">
-                  {{ it.交易类型 }}
-                </div>
-                <div class="item-detail">
-                  <div class="item-info spa-between">
-                    <div>
-                      <div class="item-info-type">
-                        {{ it.账户类型 }}
-                      </div>
-                      <div class="item-info-title">{{ it.title }}</div>
-                    </div>
-                    <div class="item-info-amount number">
-                      {{ it.收入还是支出 == '支出' ? '-' : '+' }}{{ it.amount }}
-                    </div>
-                  </div>
-                  <div class="item-detail-remark">{{ it.description }}</div>
-                </div>
-              </div>
-            </div>
-            <div class="box-not-text" v-if="reachedLastPage">没有更多了</div>
-          </div>
-          <empty-view v-else></empty-view>
-        </ScrollView>
-      </div>
-    </div>
-  </app-drawer>
-</template>
-
-<script lang="ts" setup>
-import Taro, { useDidShow, showLoading, hideLoading } from '@tarojs/taro'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { endpoints, useHttp } from '../api'
-import { 账户流水筛选项, Balance, ConsumptionGroup, 账户流水 } from '../types'
-import ConsumptionFilter from './ConsumptionFilter.vue'
-import DateFilter from './DateFilter.vue'
-import ConsumptionRules from './ConsumptionRules.vue'
-import { AppDrawer, PageHeader, WithPaging } from '../../shared'
-import dayjs from 'dayjs'
-import EmptyView from '../../shared/components/EmptyView.vue'
-import Tip from './Tip.vue'
-import groupBy from 'lodash-es/groupBy'
-import { useAmount } from '../../shared/composables/useAmount'
-import { ScrollView } from '@tarojs/components'
-import { isApp } from '../../utils/utils'
-import { isIOS } from '../../shared/composables/useDeviceEnv'
-
-type AccountViewProps = {
-  app: string
-}
-const props = withDefaults(defineProps<AccountViewProps>(), {
-  app: '',
-})
-
-const refreshing = ref(false)
-const { formatAmount } = useAmount()
-const emit = defineEmits(['recharge', 'trade'])
-
-const filterOpen = ref<boolean>(false)
-
-// 规则说明弹窗
-const rulesPopupOpen = ref<boolean>(false)
-
-const filtering = reactive<账户流水筛选项>({
-  账户类型: '全部',
-  收入还是支出: '全部',
-  交易类型: '全部',
-  权益类目: '',
-  dateFrom: '',
-  dateTo: '',
-  page: 1,
-  pageSize: 20,
-})
-
-const reachedLastPage = ref<boolean>(false)
-
-/**
- * 全新搜索
- * 重置某些查询条件
- */
-function restartSearch() {
-  // 从第一页开始
-  filtering.page = 1
-  consumptionGroups.value = []
-  loadConsumptions()
-}
-
-// 时间筛选
-const datePickerOpen = ref<boolean>(false)
-
-function openDateFilter() {
-  datePickerOpen.value = true
-}
-
-const dateRangeDisplay = computed(() => {
-  let startTime = (filtering.dateFrom || '').replace(/-/g, '.').substring(2)
-  let endTime = (filtering.dateTo || '').replace(/-/g, '.').substring(2)
-  return startTime + ' - ' + endTime
-})
-
-const consumptionGroups = ref<ConsumptionGroup[]>([])
-
-/**
- * 余额数据
- */
-const balance = ref<Balance>({
-  total: 0,
-  privileges: {},
-})
-
-const activitykitPrivileges = computed(
-  () => balance.value.privileges?.activitykit ?? [],
-)
-// const bdxLiteRight = computed(() =>
-//   activitykitPrivileges.value.find((item: any) => item.code === 'bdxLiteQuery'),
-// )
-const bdxProRight = computed(() =>
-  activitykitPrivileges.value.find((item: any) => item.code === 'bdxProQuery'),
-)
-const bdxBillRight = computed(() =>
-  activitykitPrivileges.value.find((item: any) => item.code === 'bdxBillQuery'),
-)
-
-useDidShow(() => {
-  if (Taro.getEnv() !== 'WEB') {
-    Taro.setNavigationBarTitle({
-      title: '我的账户',
-    })
-  }
-  loadBalance()
-})
-
-function groupDataByDate(data: 账户流水[]): ConsumptionGroup[] {
-  // 按照日期分组
-  const groups: ConsumptionGroup[] = consumptionGroups.value || []
-  // [
-  //  date: '2023-10-1',
-  //  consumptions: []
-  // ]
-  // 组装成按日期分组
-  data.forEach((d) => {
-    const date = dayjs(d.time).format('YYYY-MM-DD')
-    let group: ConsumptionGroup | undefined = groups.find((g) => g.date === date)
-    if (!group) {
-      group = {
-        date,
-        consumptions: [],
-      }
-      groups.push(group)
-    }
-    group.consumptions.push(d)
-  })
-  groups.sort((a, b) => (a.date > b.date ? -1 : 1))
-  return groups
-}
-
-/**
- * 请求账户流水
- * @param append 搜索结果累加 上拉分页时
- */
-async function loadConsumptions(append: boolean = false) {
-  if (!append) {
-    consumptionGroups.value = []
-  }
-  const $http = useHttp()
-  showLoading({
-    title: `加载中...`,
-    mask: true,
-  })
-  $http
-    .get<WithPaging<账户流水[]>>(endpoints.获取账户流水, {
-      app: props.app,
-      ...filtering,
-    })
-    .then((response) => {
-      consumptionGroups.value = groupDataByDate(response.data)
-      if (filtering.page >= response.totalPages) {
-        filtering.page = response.totalPages
-        reachedLastPage.value = true
-      } else {
-        reachedLastPage.value = false
-      }
-    }).finally(() => {
-      hideLoading()
-    })
-}
-
-/**
- * 获取账户余额明细
- */
-async function loadBalance() {
-  const $http = useHttp()
-  $http
-    .get<Balance>(endpoints.获取余额明细, {
-      app: props.app,
-    })
-    .then((data) => {
-      const { privileges, total } = data
-      const filterData = {
-        total,
-        privileges: groupBy(privileges, 'appCode'),
-      }
-      balance.value = filterData
-    })
-}
-
-const onFilterComplete = (value) => {
-  filtering.账户类型 = value[0]
-  filtering.收入还是支出 = value[1]
-  filtering.交易类型 = value[2]
-  filtering.权益类目 = value[3]
-  filterOpen.value = false
-  restartSearch()
-}
-
-const onDateFilterComplete = (value) => {
-  filtering.dateFrom = value.from
-  filtering.dateTo = value.to
-  datePickerOpen.value = false
-  restartSearch()
-}
-
-function gotoRecharge() {
-  emit('recharge')
-}
-
-function gotoTrade(item: any) {
-  emit('trade', item)
-}
-
-function loadNextPage() {
-  filtering.page++
-  loadConsumptions(true)
-}
-
-// 以下这一大段处理下拉刷新、上滑分页以及弹窗与页面滑动的逻辑
-const scrolled = ref<number>(0)
-
-/**
- * 记录 scroll-view 滚动的位置
- */
-const onScroll = (e) => {
-  const { scrollTop } = e
-  scrolled.value = scrollTop
-}
-
-/**
- * 下拉刷新 pull down refresh
- */
-const onPullDownRefresh = () => {
-  refreshing.value = true
-  // 重新请求余额数据
-  loadBalance()
-  setTimeout(() => {
-    refreshing.value = false
-  }, 500)
-}
-
-/**
- * 滑动到底部请求下一页并合并查询结果
- */
-const onReachBottom = () => {
-  console.log('到底了')
-  if (reachedLastPage.value) {
-    return false
-  }
-  loadNextPage()
-}
-
-const secondBalanceOpen = ref<boolean>(false)
-
-function onSecondBalanceButtonClick() {
-  secondBalanceOpen.value = true
-  loadConsumptions()
-}
-
-watch(secondBalanceOpen, () => {
-  if (Taro.getEnv() !== 'WEB') {
-    Taro.setNavigationBarColor({
-      frontColor: secondBalanceOpen.value ? '#000000' : '#ffffff',
-      backgroundColor: '#ffffff',
-      animation: {
-        duration: 400,
-        timingFunc: 'easeIn',
-      },
-    })
-  }
-})
-
-function onDateReset() {
-  resetDateRange()
-  datePickerOpen.value = false
-  restartSearch()
-}
-
-/**
- * 充值筛选的起止时间
- */
-function resetDateRange() {
-  // 筛选的起止时间
-  filtering.dateTo = dayjs().format('YYYY-MM-DD')
-  filtering.dateFrom = dayjs().add(-3, 'M').format('YYYY-MM-DD')
-}
-
-function onPageHeaderClose() {
-  Taro.navigateBack({
-    delta: 1,
-  })
-}
-
-const isAppEnv = computed(() => {
-  return isApp()
-})
-
-onMounted(() => {
-  resetDateRange()
-})
-</script>
-
-<style lang="scss">
-.account-view {
-  height: 100vh;
-
-  .scroll-content {
-    background-image: url('https://cdn.ddjf.com/static/images/customer-center/blue-bg.png');
-    background-position: center 0;
-    background-repeat: no-repeat;
-    background-size: 100% 200px;
-  }
-
-  .page-header {
-    background-color: transparent;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    transition: background-color 0.3s;
-
-    &.with-background {
-      background-color: #3b393c;
-      color: #fff;
-    }
-  }
-
-  .spa-between {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    padding: 10px 15px;
-  }
-
-  .jusify-right {
-    justify-content: flex-end;
-  }
-
-  .small-bean-button {
-    height: 22px;
-    border-radius: 11px;
-    background-color: #fff;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 10px;
-    color: #353535;
-    font-size: 12px;
-
-    .label {
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDZMMTYgMTJMMTAgMThWNloiIGZpbGw9IiMzNTM1MzUiIHN0cm9rZT0iIzM1MzUzNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-      padding-right: 18px;
-      background-repeat: no-repeat;
-      background-position: right center;
-      background-size: 16px;
-    }
-  }
-
-  .balance {
-    border-radius: 15px;
-    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
-    height: 112px;
-    padding: 20px;
-    margin: 0 15px;
-    box-sizing: border-box;
-    font-size: 10px;
-
-    .bean-img {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      .bean-icon {
-        display: block;
-        font-size: 0;
-        width: 20px;
-        height: 20px;
-        margin-right: 4px;
-      }
-
-      .bean-tag {
-        color: #353535;
-        height: 15px;
-        line-height: 15px;
-        border-radius: 30px 50px 50px 0px;
-        background: rgba(#ff8320, 0.3);
-        padding-left: 5px;
-        padding-right: 10px;
-      }
-
-      .tag {
-        background: #ff8320;
-        color: #fff;
-      }
-    }
-
-    .rule {
-      color: #353535;
-      opacity: 0.5;
-    }
-  }
-
-  .bean-counts {
-    margin-top: 12px;
-
-    .counts {
-      color: #3d3835;
-      font-size: 32px;
-      font-weight: 700;
-    }
-
-    .pay {
-      padding: 0 20px;
-      height: 32px;
-      line-height: 32px;
-      background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
-      border-radius: 16px;
-      color: #e7caad;
-      font-size: 15px;
-      font-weight: 500;
-    }
-  }
-}
-
-.consumption-rules-popup {
-  border-radius: 16px;
-  width: 70%;
-  max-height: 80%;
-  padding: 24px;
-}
-
-.operation-box {
-  width: 100vw;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 87px);
-
-  .operation-title {
-    padding: 10px 15px;
-    background: #fff;
-    transition: box-shadow 0.3s;
-
-    &.with-shadow {
-      box-shadow: 0px 1px 10px 0px #99999933;
-    }
-
-    .text {
-      color: #353535;
-      font-size: 12px;
-      opacity: 0.5;
-    }
-
-    .time-icon {
-      display: block;
-      font-size: 0;
-      width: 12px;
-      height: 12px;
-      margin-left: 4px;
-    }
-
-    .search-time {
-      display: flex;
-      align-items: center;
-
-      .title {
-        color: #000;
-        font-weight: 500;
-        font-size: 17px;
-        margin-right: 10px;
-      }
-
-      .time {
-        height: 22px;
-        padding-right: 5px;
-        flex: 1;
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    .search {
-      display: flex;
-      align-items: center;
-      height: 22px;
-      padding-left: 5px;
-    }
-  }
-
-  .spa-between {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .operation-list {
-    flex: 1;
-    width: 100%;
-
-    .operation-scroll {
-      height: calc(100vh - 132px);
-      box-sizing: border-box;
-    }
-
-    .box {
-      padding: 0 10px;
-
-      &-detail {
-        .title {
-          line-height: 22px;
-          font-weight: 700;
-          font-size: 12px;
-          color: #000;
-          opacity: 0.5;
-          margin-bottom: 10px;
-        }
-
-        .item {
-          border-radius: 5px;
-          background: rgba(255, 255, 255, 0.5);
-          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-          border-radius: 5px;
-          padding: 12px 10px;
-          display: flex;
-          margin-bottom: 10px;
-
-          &-type {
-            background: linear-gradient(113.95deg, #f4e2ce 1.2%, #debb9b 77.63%);
-            width: 30px;
-            height: 30px;
-            border-radius: 15px;
-            margin-right: 15px;
-            line-height: 30px;
-            font-size: 10px;
-            font-weight: 500;
-            color: #000;
-            text-align: center;
-          }
-
-          &-detail {
-            flex: 1;
-
-            .item-info {
-              padding: 0;
-              font-size: 14px;
-              font-weight: 700;
-              color: #000;
-
-              &-type {
-                line-height: 15px;
-              }
-
-              &-title {
-                font-weight: 400;
-                opacity: 0.8;
-                font-size: 11px;
-              }
-
-              &-amount {
-                color: #9e7b5a;
-              }
-            }
-
-            &-remark {
-              opacity: 0.3;
-              line-height: 15px;
-              font-size: 10px;
-            }
-          }
-        }
-      }
-
-      &-not-text {
-        opacity: 0.4;
-        color: #353535;
-        font-size: 12px;
-        line-height: 20px;
-        margin: 0 auto 40px;
-        text-align: center;
-      }
-    }
-  }
-}
-
-.rights-card {
-  margin: 10px 15px 0px;
-  background: rgb(255, 248, 243, 0.8);
-  border-radius: 5px;
-  padding: 15px 20px;
-  box-shadow: 0px 5px 18.9px 2px #0000000D;
-
-
-  .title {
-    height: 25px;
-    line-height: 25px;
-    background: rgba($color: #ff8320, $alpha: 0.3);
-    border-radius: 20px 50px 50px 0px;
-    color: #353535;
-    font-size: 12px;
-    display: inline-block;
-    padding-left: 5px;
-    padding-right: 12px;
-  }
-
-  .list {
-    display: flex;
-    flex-wrap: wrap;
-
-    .item {
-      width: 50%;
-      margin-top: 15px;
-
-      .item-count {
-        font-size: 20px;
-        color: #353535;
-        font-weight: 700;
-        line-height: 23px;
-      }
-
-      .item-title {
-        line-height: 23px;
-        color: #987356;
-        font-size: 11px;
-        display: flex;
-        align-items: center;
-
-        .item-title-button {
-          padding: 0 14px;
-          height: 27px;
-          line-height: 27px;
-          background: -webkit-linear-gradient(262.82deg, #353535 10.04%, #433f46 90.21%);
-          background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
-          border-radius: 14px;
-          color: #e7caad;
-          font-size: 12px;
-          font-weight: 400;
-          margin-left: 20px;
-          display: flex;
-          align-items: center;
-
-          .button-icon {
-            display: block;
-            width: 12px;
-            height: 12px;
-            font-size: 0;
-            margin-left: 4px;
-          }
-        }
-      }
-    }
-
-    .star-item {
-      width: 100%;
-    }
-  }
-}
-</style>
+<template>
+  <div class="account-view">
+    <div class="scroll-content">
+      <page-header :title="Taro.getEnv() !== 'WEB' ? '我的账户' : ''" :class="{ 'with-background': scrolled > 0 }"
+        @close="onPageHeaderClose" />
+      <div class="row jusify-right">
+        <div class="small-bean-button" v-track-click @click="onSecondBalanceButtonClick">
+          <label class="label">收支明细</label>
+        </div>
+      </div>
+      <div class="balance">
+        <div class="bean-box spa-between">
+          <div class="bean-img">
+            <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
+            <div class="bean-tag tag">云豆</div>
+          </div>
+          <div v-if="!isAppEnv || (isAppEnv && !isIOS())" class="rule" v-track-click @click="rulesPopupOpen = true">规则说明</div>
+        </div>
+        <div class="bean-counts spa-between">
+          <div class="counts number">{{ formatAmount(balance.total || 0) }}</div>
+          <div v-if="props.app !== 'fnfundkit' && (!isAppEnv || (isAppEnv && !isIOS()))" class="pay" v-track-click @click="gotoRecharge">云豆充值</div>
+        </div>
+      </div>
+      <Tip />
+      <!-- <div class="rights-card" v-if="bdxLiteRight">
+        <div class="title">风控个人风险Lite权益</div>
+        <div class="list">
+          <div class="item star-item">
+            <div class="item-count">
+              <span>{{ formatAmount(bdxLiteRight.count || 0) }}</span><span>{{ bdxLiteRight.unit }}</span>
+            </div>
+            <div class="item-title">
+              <div>{{ bdxLiteRight.title }}次数</div>
+              <div class="item-title-button" v-if="!isAppEnv || (isAppEnv && !isIOS())">
+                <div v-track-click @click="gotoTrade(bdxLiteRight)">风控个人风险Lite充值</div>
+                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+      <div class="rights-card" v-if="bdxProRight">
+        <div class="title">风控个人风险Pro权益</div>
+        <div class="list">
+          <div class="item star-item">
+            <div class="item-count">
+              <span>{{ formatAmount(bdxProRight.count || 0) }}</span><span>{{ bdxProRight.unit }}</span>
+            </div>
+            <div class="item-title">
+              <div>{{ bdxProRight.title }}次数</div>
+              <div class="item-title-button" v-if="!isAppEnv || (isAppEnv && !isIOS())">
+                <div v-track-click @click="gotoTrade(bdxProRight)">风控个人风险Pro充值</div>
+                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rights-card" v-if="bdxBillRight">
+        <div class="title">风控流水智报权益</div>
+        <div class="list">
+          <div class="item star-item">
+            <div class="item-count">
+              <span>{{ formatAmount(bdxBillRight.count || 0) }}</span><span>{{ bdxBillRight.unit }}</span>
+            </div>
+            <div class="item-title">
+              <div>{{ bdxBillRight.title }}次数</div>
+              <div class="item-title-button" v-if="!isAppEnv || (isAppEnv && !isIOS())">
+                <div v-track-click @click="gotoTrade(bdxBillRight)">风控流水智报充值</div>
+                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rights-card" v-if="balance.privileges?.corporateStar">
+        <div class="title">企明星权益</div>
+        <div class="list">
+          <div class="item star-item" v-for="(item, index) in balance.privileges.corporateStar" :key="index">
+            <div class="item-count">
+              <span>{{ formatAmount(item.count || 0) }}</span><span>{{ item.unit }}</span>
+            </div>
+            <div class="item-title">
+              <div>{{ item.title }}次数</div>
+              <div class="item-title-button" v-if="item.id && (!isAppEnv || (isAppEnv && !isIOS()))">
+                <div v-track-click @click="gotoTrade(item)">企明星优惠充值</div>
+                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rights-card" v-if="balance.privileges?.aiapprove">
+        <div class="title">AI审批权益</div>
+        <div class="list">
+          <div class="item star-item" v-for="(item, index) in balance.privileges.aiapprove" :key="index">
+            <div class="item-count">{{ formatAmount(item.count || 0) }}{{ item.unit }}</div>
+            <div class="item-title">
+              <div>{{ item.title }}次数</div>
+              <div class="item-title-button" v-if="item.id && (!isAppEnv || (isAppEnv && !isIOS()))">
+                <div v-track-click @click="gotoTrade(item)">AI审批充值</div>
+                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rights-card" v-if="balance.privileges?.signkit">
+        <div class="title">电子签约权益</div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in balance.privileges.signkit" :key="index">
+            <div class="item-count">{{ formatAmount(item.count || 0) }}{{ item.unit }}</div>
+            <div class="item-title">{{ item.title }}次数</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nut-popup pop-class="consumption-rules-popup" v-model:visible="rulesPopupOpen" :close-on-click-overlay="false">
+    <consumption-rules @complete="rulesPopupOpen = false" />
+  </nut-popup>
+  <nut-popup position="bottom" :style="{ height: '40%' }" round :close-on-click-overlay="true"
+    v-model:visible="datePickerOpen">
+    <date-filter v-if="datePickerOpen" :from="filtering.dateFrom" :to="filtering.dateTo" @reset="onDateReset"
+      @complete="onDateFilterComplete" />
+  </nut-popup>
+  <nut-popup position="bottom" :style="{ height: '75%' }" round :close-on-click-overlay="true"
+    v-model:visible="filterOpen">
+    <consumption-filter :modelValue="[
+      filtering.账户类型,
+      filtering.收入还是支出,
+      filtering.交易类型,
+      filtering.权益类目,
+    ]" @complete="onFilterComplete" />
+  </nut-popup>
+  <app-drawer v-model="secondBalanceOpen" title="收支明细">
+    <div class="operation-box">
+      <div class="operation-title spa-between" :class="{ 'with-shadow': scrolled > 0 }">
+        <div class="search-time">
+          <div class="title">收支明细</div>
+          <div class="time" @click="openDateFilter" v-show="filtering.dateFrom">
+            <div class="text number">{{ dateRangeDisplay }}</div>
+            <img style="margin-top: -2px" class="time-icon"
+              src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-down.png" />
+          </div>
+        </div>
+        <div class="search" v-track-click @click="filterOpen = true">
+          <span class="text">筛选</span>
+          <img class="time-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png" />
+        </div>
+      </div>
+      <div class="operation-list">
+        <ScrollView class="operation-scroll" :scroll-y="true" @scroll="onScroll" :lower-threshold="100"
+          @scrolltolower="onReachBottom">
+          <div class="box" v-if="consumptionGroups.length > 0">
+            <div class="box-detail" v-for="(item, index) in consumptionGroups" :key="index">
+              <div class="title number">{{ item.date }}</div>
+              <div class="item" v-for="(it, i) in item.consumptions" :key="i">
+                <div class="item-type">
+                  {{ it.交易类型 }}
+                </div>
+                <div class="item-detail">
+                  <div class="item-info spa-between">
+                    <div>
+                      <div class="item-info-type">
+                        {{ it.账户类型 }}
+                      </div>
+                      <div class="item-info-title">{{ it.title }}</div>
+                    </div>
+                    <div class="item-info-right">
+                      <div class="item-info-amount number">
+                        {{ it.收入还是支出 == '支出' ? '-' : '+' }}{{ it.amount }}
+                      </div>
+                      <div class="item-info-time number">{{ formatItemTime(it.time) }}</div>
+                    </div>
+                  </div>
+                  <div class="item-detail-remark">{{ it.description }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="box-not-text" v-if="reachedLastPage">没有更多了</div>
+          </div>
+          <empty-view v-else></empty-view>
+        </ScrollView>
+      </div>
+    </div>
+  </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import Taro, { useDidShow, showLoading, hideLoading } from '@tarojs/taro'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { endpoints, useHttp } from '../api'
+import { 账户流水筛选项, Balance, ConsumptionGroup, 账户流水 } from '../types'
+import ConsumptionFilter from './ConsumptionFilter.vue'
+import DateFilter from './DateFilter.vue'
+import ConsumptionRules from './ConsumptionRules.vue'
+import { AppDrawer, PageHeader, WithPaging } from '../../shared'
+import dayjs from 'dayjs'
+import EmptyView from '../../shared/components/EmptyView.vue'
+import Tip from './Tip.vue'
+import groupBy from 'lodash-es/groupBy'
+import { useAmount } from '../../shared/composables/useAmount'
+import { ScrollView } from '@tarojs/components'
+import { isApp } from '../../utils/utils'
+import { isIOS } from '../../shared/composables/useDeviceEnv'
+
+type AccountViewProps = {
+  app: string
+}
+const props = withDefaults(defineProps<AccountViewProps>(), {
+  app: '',
+})
+
+const refreshing = ref(false)
+const { formatAmount } = useAmount()
+const emit = defineEmits(['recharge', 'trade'])
+
+const filterOpen = ref<boolean>(false)
+
+// 规则说明弹窗
+const rulesPopupOpen = ref<boolean>(false)
+
+const filtering = reactive<账户流水筛选项>({
+  账户类型: '全部',
+  收入还是支出: '全部',
+  交易类型: '全部',
+  权益类目: '',
+  dateFrom: '',
+  dateTo: '',
+  page: 1,
+  pageSize: 20,
+})
+
+const reachedLastPage = ref<boolean>(false)
+
+/**
+ * 全新搜索
+ * 重置某些查询条件
+ */
+function restartSearch() {
+  // 从第一页开始
+  filtering.page = 1
+  consumptionGroups.value = []
+  loadConsumptions()
+}
+
+// 时间筛选
+const datePickerOpen = ref<boolean>(false)
+
+function openDateFilter() {
+  datePickerOpen.value = true
+}
+
+const dateRangeDisplay = computed(() => {
+  let startTime = (filtering.dateFrom || '').replace(/-/g, '.').substring(2)
+  let endTime = (filtering.dateTo || '').replace(/-/g, '.').substring(2)
+  return startTime + ' - ' + endTime
+})
+
+function formatItemTime(time: number) {
+  return dayjs(time).format('HH:mm:ss')
+}
+
+const consumptionGroups = ref<ConsumptionGroup[]>([])
+
+/**
+ * 余额数据
+ */
+const balance = ref<Balance>({
+  total: 0,
+  privileges: {},
+})
+
+const activitykitPrivileges = computed(
+  () => balance.value.privileges?.activitykit ?? [],
+)
+// const bdxLiteRight = computed(() =>
+//   activitykitPrivileges.value.find((item: any) => item.code === 'bdxLiteQuery'),
+// )
+const bdxProRight = computed(() =>
+  activitykitPrivileges.value.find((item: any) => item.code === 'bdxProQuery'),
+)
+const bdxBillRight = computed(() =>
+  activitykitPrivileges.value.find((item: any) => item.code === 'bdxBillQuery'),
+)
+
+useDidShow(() => {
+  if (Taro.getEnv() !== 'WEB') {
+    Taro.setNavigationBarTitle({
+      title: '我的账户',
+    })
+  }
+  loadBalance()
+})
+
+function groupDataByDate(data: 账户流水[]): ConsumptionGroup[] {
+  // 按照日期分组
+  const groups: ConsumptionGroup[] = consumptionGroups.value || []
+  // [
+  //  date: '2023-10-1',
+  //  consumptions: []
+  // ]
+  // 组装成按日期分组
+  data.forEach((d) => {
+    const date = dayjs(d.time).format('YYYY-MM-DD')
+    let group: ConsumptionGroup | undefined = groups.find((g) => g.date === date)
+    if (!group) {
+      group = {
+        date,
+        consumptions: [],
+      }
+      groups.push(group)
+    }
+    group.consumptions.push(d)
+  })
+  groups.sort((a, b) => (a.date > b.date ? -1 : 1))
+  return groups
+}
+
+/**
+ * 请求账户流水
+ * @param append 搜索结果累加 上拉分页时
+ */
+async function loadConsumptions(append: boolean = false) {
+  if (!append) {
+    consumptionGroups.value = []
+  }
+  const $http = useHttp()
+  showLoading({
+    title: `加载中...`,
+    mask: true,
+  })
+  $http
+    .get<WithPaging<账户流水[]>>(endpoints.获取账户流水, {
+      app: props.app,
+      ...filtering,
+    })
+    .then((response) => {
+      consumptionGroups.value = groupDataByDate(response.data)
+      if (filtering.page >= response.totalPages) {
+        filtering.page = response.totalPages
+        reachedLastPage.value = true
+      } else {
+        reachedLastPage.value = false
+      }
+    }).finally(() => {
+      hideLoading()
+    })
+}
+
+/**
+ * 获取账户余额明细
+ */
+async function loadBalance() {
+  const $http = useHttp()
+  $http
+    .get<Balance>(endpoints.获取余额明细, {
+      app: props.app,
+    })
+    .then((data) => {
+      const { privileges, total } = data
+      const filterData = {
+        total,
+        privileges: groupBy(privileges, 'appCode'),
+      }
+      balance.value = filterData
+    })
+}
+
+const onFilterComplete = (value) => {
+  filtering.账户类型 = value[0]
+  filtering.收入还是支出 = value[1]
+  filtering.交易类型 = value[2]
+  filtering.权益类目 = value[3]
+  filterOpen.value = false
+  restartSearch()
+}
+
+const onDateFilterComplete = (value) => {
+  filtering.dateFrom = value.from
+  filtering.dateTo = value.to
+  datePickerOpen.value = false
+  restartSearch()
+}
+
+function gotoRecharge() {
+  emit('recharge')
+}
+
+function gotoTrade(item: any) {
+  emit('trade', item)
+}
+
+function loadNextPage() {
+  filtering.page++
+  loadConsumptions(true)
+}
+
+// 以下这一大段处理下拉刷新、上滑分页以及弹窗与页面滑动的逻辑
+const scrolled = ref<number>(0)
+
+/**
+ * 记录 scroll-view 滚动的位置
+ */
+const onScroll = (e) => {
+  const { scrollTop } = e
+  scrolled.value = scrollTop
+}
+
+/**
+ * 下拉刷新 pull down refresh
+ */
+const onPullDownRefresh = () => {
+  refreshing.value = true
+  // 重新请求余额数据
+  loadBalance()
+  setTimeout(() => {
+    refreshing.value = false
+  }, 500)
+}
+
+/**
+ * 滑动到底部请求下一页并合并查询结果
+ */
+const onReachBottom = () => {
+  console.log('到底了')
+  if (reachedLastPage.value) {
+    return false
+  }
+  loadNextPage()
+}
+
+const secondBalanceOpen = ref<boolean>(false)
+
+function onSecondBalanceButtonClick() {
+  secondBalanceOpen.value = true
+  loadConsumptions()
+}
+
+watch(secondBalanceOpen, () => {
+  if (Taro.getEnv() !== 'WEB') {
+    Taro.setNavigationBarColor({
+      frontColor: secondBalanceOpen.value ? '#000000' : '#ffffff',
+      backgroundColor: '#ffffff',
+      animation: {
+        duration: 400,
+        timingFunc: 'easeIn',
+      },
+    })
+  }
+})
+
+function onDateReset() {
+  resetDateRange()
+  datePickerOpen.value = false
+  restartSearch()
+}
+
+/**
+ * 充值筛选的起止时间
+ */
+function resetDateRange() {
+  // 筛选的起止时间
+  filtering.dateTo = dayjs().format('YYYY-MM-DD')
+  filtering.dateFrom = dayjs().add(-3, 'M').format('YYYY-MM-DD')
+}
+
+function onPageHeaderClose() {
+  Taro.navigateBack({
+    delta: 1,
+  })
+}
+
+const isAppEnv = computed(() => {
+  return isApp()
+})
+
+onMounted(() => {
+  resetDateRange()
+})
+</script>
+
+<style lang="scss">
+.account-view {
+  height: 100vh;
+
+  .scroll-content {
+    background-image: url('https://cdn.ddjf.com/static/images/customer-center/blue-bg.png');
+    background-position: center 0;
+    background-repeat: no-repeat;
+    background-size: 100% 200px;
+  }
+
+  .page-header {
+    background-color: transparent;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    transition: background-color 0.3s;
+
+    &.with-background {
+      background-color: #3b393c;
+      color: #fff;
+    }
+  }
+
+  .spa-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 15px;
+  }
+
+  .jusify-right {
+    justify-content: flex-end;
+  }
+
+  .small-bean-button {
+    height: 22px;
+    border-radius: 11px;
+    background-color: #fff;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 10px;
+    color: #353535;
+    font-size: 12px;
+
+    .label {
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDZMMTYgMTJMMTAgMThWNloiIGZpbGw9IiMzNTM1MzUiIHN0cm9rZT0iIzM1MzUzNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
+      padding-right: 18px;
+      background-repeat: no-repeat;
+      background-position: right center;
+      background-size: 16px;
+    }
+  }
+
+  .balance {
+    border-radius: 15px;
+    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
+    height: 112px;
+    padding: 20px;
+    margin: 0 15px;
+    box-sizing: border-box;
+    font-size: 10px;
+
+    .bean-img {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      .bean-icon {
+        display: block;
+        font-size: 0;
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+      }
+
+      .bean-tag {
+        color: #353535;
+        height: 15px;
+        line-height: 15px;
+        border-radius: 30px 50px 50px 0px;
+        background: rgba(#ff8320, 0.3);
+        padding-left: 5px;
+        padding-right: 10px;
+      }
+
+      .tag {
+        background: #ff8320;
+        color: #fff;
+      }
+    }
+
+    .rule {
+      color: #353535;
+      opacity: 0.5;
+    }
+  }
+
+  .bean-counts {
+    margin-top: 12px;
+
+    .counts {
+      color: #3d3835;
+      font-size: 32px;
+      font-weight: 700;
+    }
+
+    .pay {
+      padding: 0 20px;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
+      border-radius: 16px;
+      color: #e7caad;
+      font-size: 15px;
+      font-weight: 500;
+    }
+  }
+}
+
+.consumption-rules-popup {
+  border-radius: 16px;
+  width: 70%;
+  max-height: 80%;
+  padding: 24px;
+}
+
+.operation-box {
+  width: 100vw;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 87px);
+
+  .operation-title {
+    padding: 10px 15px;
+    background: #fff;
+    transition: box-shadow 0.3s;
+
+    &.with-shadow {
+      box-shadow: 0px 1px 10px 0px #99999933;
+    }
+
+    .text {
+      color: #353535;
+      font-size: 12px;
+      opacity: 0.5;
+    }
+
+    .time-icon {
+      display: block;
+      font-size: 0;
+      width: 12px;
+      height: 12px;
+      margin-left: 4px;
+    }
+
+    .search-time {
+      display: flex;
+      align-items: center;
+
+      .title {
+        color: #000;
+        font-weight: 500;
+        font-size: 17px;
+        margin-right: 10px;
+      }
+
+      .time {
+        height: 22px;
+        padding-right: 5px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .search {
+      display: flex;
+      align-items: center;
+      height: 22px;
+      padding-left: 5px;
+    }
+  }
+
+  .spa-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .operation-list {
+    flex: 1;
+    width: 100%;
+
+    .operation-scroll {
+      height: calc(100vh - 132px);
+      box-sizing: border-box;
+    }
+
+    .box {
+      padding: 0 10px;
+
+      &-detail {
+        .title {
+          line-height: 22px;
+          font-weight: 700;
+          font-size: 12px;
+          color: #000;
+          opacity: 0.5;
+          margin-bottom: 10px;
+        }
+
+        .item {
+          border-radius: 5px;
+          background: rgba(255, 255, 255, 0.5);
+          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
+          border-radius: 5px;
+          padding: 12px 10px;
+          display: flex;
+          margin-bottom: 10px;
+
+          &-type {
+            background: linear-gradient(113.95deg, #f4e2ce 1.2%, #debb9b 77.63%);
+            width: 30px;
+            height: 30px;
+            border-radius: 15px;
+            margin-right: 15px;
+            line-height: 30px;
+            font-size: 10px;
+            font-weight: 500;
+            color: #000;
+            text-align: center;
+          }
+
+          &-detail {
+            flex: 1;
+
+            .item-info {
+              padding: 0;
+              font-size: 14px;
+              font-weight: 700;
+              color: #000;
+
+              &-type {
+              }
+
+              &-title {
+                font-weight: 400;
+                opacity: 0.8;
+                font-size: 11px;
+              }
+
+              &-right {
+                text-align: right;
+              }
+
+              &-amount {
+                color: #9e7b5a;
+              }
+
+              &-time {
+                font-weight: 400;
+                opacity: 0.5;
+                font-size: 11px;
+              }
+            }
+
+            &-remark {
+              opacity: 0.3;
+              line-height: 15px;
+              font-size: 10px;
+            }
+          }
+        }
+      }
+
+      &-not-text {
+        opacity: 0.4;
+        color: #353535;
+        font-size: 12px;
+        line-height: 20px;
+        margin: 0 auto 40px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+.rights-card {
+  margin: 10px 15px 0px;
+  background: rgb(255, 248, 243, 0.8);
+  border-radius: 5px;
+  padding: 15px 20px;
+  box-shadow: 0px 5px 18.9px 2px #0000000D;
+
+
+  .title {
+    height: 25px;
+    line-height: 25px;
+    background: rgba($color: #ff8320, $alpha: 0.3);
+    border-radius: 20px 50px 50px 0px;
+    color: #353535;
+    font-size: 12px;
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 12px;
+  }
+
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item {
+      width: 50%;
+      margin-top: 15px;
+
+      .item-count {
+        font-size: 20px;
+        color: #353535;
+        font-weight: 700;
+        line-height: 23px;
+      }
+
+      .item-title {
+        line-height: 23px;
+        color: #987356;
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+
+        .item-title-button {
+          padding: 0 14px;
+          height: 27px;
+          line-height: 27px;
+          background: -webkit-linear-gradient(262.82deg, #353535 10.04%, #433f46 90.21%);
+          background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
+          border-radius: 14px;
+          color: #e7caad;
+          font-size: 12px;
+          font-weight: 400;
+          margin-left: 20px;
+          display: flex;
+          align-items: center;
+
+          .button-icon {
+            display: block;
+            width: 12px;
+            height: 12px;
+            font-size: 0;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+
+    .star-item {
+      width: 100%;
+    }
+  }
+}
+</style>