@uxda/appkit 4.3.6 → 4.3.8

package/src/balance/components/PromoterCard.vue

@@ -1,308 +1,307 @@
-<template>
-  <div class="promoter-card" :class="{ inAccount }"
-    v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
-    <div class="promoter-card-tab" v-if="useCase === 'company' && isAdmin">
-      <div>
-        <ns-button-group size="sm" :items="options" v-model="tab" round fill="transparent" foreground="#808080"
-          @change="onTabChange" />
-      </div>
-      <slot name="tab-btn"></slot>
-    </div>
-    <div class="promoter-card-hd" v-track-click @click="emits('blance', tab)"
-      v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
-      <div class="promoter-card-hd-num number">{{ formatAmount(promoter.allowWithdrawalBalance || 0) }}</div>
-      <div class="promoter-card-hd-info">可提现余额(元)</div>
-      <img class="arrow-img" style="margin-left: 8px;" :src="arrowImg" alt="">
-    </div>
-    <div class="promoter-card-ft">
-      <div class="promoter-card-ft-item" v-if="applyRecord.accessCheckStatus === 'Y'">
-        <template v-if="显示下级分销商">
-          <div class="promoter-card-ft-info">下级分销商数量</div>
-          <div class="promoter-card-ft-num number">
-            {{ formatAmount(promoter.subDistributorNum || 0) }}
-          </div>
-        </template>
-        <template v-else>
-          <div class="promoter-card-ft-info">产品销售收益(元)
-            <IconFont class="icon" name="ask" v-track-click="'产品销售收益-说明'" @click="onHelpClick('profits')" />
-          </div>
-          <div class="promoter-card-ft-num number" v-track-click @click="emits('profits', tab)">
-            {{ formatAmount(promoter.totalIncome || 0) }}
-            <img class="arrow-img" :src="arrowImg" alt="">
-          </div>
-        </template>
-      </div>
-      <div class="promoter-card-ft-line"
-        v-if="applyRecord.accessCheckStatus === 'Y' && applyRecord.distributorFlag === 'Y'">
-      </div>
-      <div class="promoter-card-ft-item" v-if="applyRecord.distributorFlag === 'Y'">
-        <div class="promoter-card-ft-info">分销返佣收益(元)
-          <IconFont class="icon" name="ask" v-track-click="'分销返佣收益-说明'" @click="onHelpClick('rebate')" />
-        </div>
-        <div class="promoter-card-ft-num number" v-track-click @click="emits('rebate', tab)">
-          {{ formatAmount(promoter.totalRebateIncome || 0) }}
-          <img class="arrow-img" :src="arrowImg" alt="">
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { endpoints, useHttp } from '../api'
-import { Promoter } from '../types'
-import { useDidShow, showModal } from '@tarojs/taro'
-import { useAmount } from '../../shared/composables/useAmount'
-import { IconFont } from '@nutui/icons-vue-taro'
-import { NsButtonGroup } from "@uxda/nutshell/taro";
-
-type PromoterCardProps = {
-  useCase: string
-  applyRecord: any
-  isAdmin?: boolean
-  显示下级分销商?: boolean
-}
-const props = withDefaults(defineProps<PromoterCardProps>(), {
-  useCase: '',
-  applyRecord: {},
-  isAdmin: false,
-  显示下级分销商: false
-})
-
-const inAccount = computed(() => {
-  return !props.显示下级分销商
-})
-
-const { formatAmount } = useAmount()
-const tab = ref('person')
-
-const promoter = ref<Promoter>({
-  balance: 0,
-  allowWithdrawalBalance: 0,
-  totalIncome: 0,
-  totalRebateIncome: 0,
-  subDistributorNum: 0,
-})
-
-const options = [
-  { label: '个人', value: 'person' },
-  { label: '企业', value: 'company' },
-]
-
-
-function onTabChange(type: string) {
-  // tab.value = type
-  loadPromoter()
-
-  emits('tab', tab.value)
-}
-
-async function loadPromoter() {
-  const $http = useHttp()
-  $http
-    .get<Promoter>(endpoints.获取推广方账户信息, {
-      useCase: tab.value,
-      companyFlag: tab.value === 'person' ? '2' : '1',
-    })
-    .then((data) => {
-      promoter.value.balance = data?.balance || 0
-      promoter.value.allowWithdrawalBalance = data?.allowWithdrawalBalance || 0
-      promoter.value.totalIncome = data?.totalIncome || 0
-      promoter.value.totalRebateIncome = data?.totalRebateIncome || 0
-      promoter.value.subDistributorNum = data?.subDistributorNum || 0
-    })
-}
-
-const emits = defineEmits([
-  /**
-   * 跳可提现余额
-   */
-  'blance',
-  /**
-   * 跳收益页面
-   */
-  'profits',
-  /**
-   * 跳返佣统计页面
-   */
-  'rebate',
-  /**
-   * tab切换
-   */
-  'tab',
-])
-
-useDidShow(() => {
-  Object.keys(props.applyRecord)?.length && loadPromoter()
-})
-watch(() => props.applyRecord, () => {
-  Object.keys(props.applyRecord)?.length && loadPromoter()
-}, { immediate: true })
-
-defineExpose({
-  reload: loadPromoter,
-})
-
-const toastMap = {
-  profits: '推广北斗星报告获取，每笔报告销售收益= 客户查询价 - 我的成本价',
-  rebate: '推荐朋友使用北斗星、企明星获取，返佣收益= 返佣基数 * 返佣比例',
-}
-function onHelpClick(type: string) {
-  showModal({
-    content: toastMap[type],
-    showCancel: false,
-    confirmColor: '#017fff',
-    confirmText: '知道了',
-  })
-}
-
-const arrowImg = computed(() => {
-  if (props.显示下级分销商) {
-    return 'https://cdn.ddjf.com/static/images/appkit/arrow.png'
-  } else {
-    return 'https://cdn.ddjf.com/static/images/appkit/arrow-blue.png'
-  }
-})
-</script>
-
-<style lang="scss">
-.promoter-card {
-  position: relative;
-  padding: 20px;
-  background: #fff;
-  box-sizing: border-box;
-  margin: 0 auto;
-  border-radius: 15px;
-
-  &.inAccount {
-    background: linear-gradient(90deg, #DAEFFF 0%, #DEE7FF 52.22%, #C8CAFF 108.62%);
-
-    &::after,
-    &::before {
-      content: '';
-      position: absolute;
-      width: 15px;
-      height: 15px;
-      border-radius: 50%;
-      background: #F4F6FA;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    &::before {
-      left: -7.5px;
-    }
-
-    &::after {
-      right: -7.5px;
-    }
-
-    .ns-button-group .ns-button {
-      background: rgba(1, 127, 255, 0.1);
-      font-weight: normal;
-      color: #353535;
-
-      &.active {
-        background: #017FFF;
-        color: #fff;
-      }
-    }
-  }
-
-  .icon {
-    font-size: 10px;
-    color: rgba(53, 53, 53, 0.3);
-  }
-
-  &-hd {
-    display: flex;
-    align-items: center;
-    color: #353535;
-    margin-bottom: 15px;
-
-    &-num {
-      font-size: 22px;
-      font-weight: bold;
-    }
-
-    &-info {
-      font-size: 13px;
-      margin-left: 8px;
-    }
-  }
-
-  &-ft {
-    display: flex;
-    align-items: center;
-
-    &-item {
-      flex: 1;
-    }
-
-    &-info {
-      font-size: 12px;
-      color: #434242;
-      margin-bottom: 5px;
-      display: flex;
-      align-items: center;
-    }
-
-    &-num {
-      display: flex;
-      align-items: center;
-      font-size: 20px;
-      color: #353535;
-    }
-
-    &-line {
-      width: 1px;
-      height: 19px;
-      background: rgba(53, 53, 53, 0.2);
-      margin-right: 30px;
-    }
-  }
-
-  .ns-button-group .ns-button {
-    background: #F8F8F8;
-    font-weight: normal;
-
-    &.active {
-      color: #017FFF;
-      background: #EEF5FF;
-    }
-  }
-
-  &-tab {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-
-    &-item {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      height: 29px;
-      width: 46px;
-      font-size: 13px;
-      color: #808080;
-      border-radius: 23px;
-      background: #F8F8F8;
-      margin-right: 12px;
-
-      &.focus {
-        background: #EEF5FF;
-        color: #017FFF;
-      }
-    }
-  }
-
-  .arrow-img {
-    width: 16px;
-    height: 12px;
-    margin-left: 5px;
-  }
-}
-</style>
+<template>
+  <div class="promoter-card" :class="{ inAccount }"
+    v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
+    <div class="promoter-card-tab" v-if="useCase === 'company' && isAdmin">
+      <div>
+        <ns-button-group size="sm" :items="options" v-model="tab" round fill="transparent" foreground="#808080"
+          @change="onTabChange" />
+      </div>
+      <slot name="tab-btn"></slot>
+    </div>
+    <div class="promoter-card-hd" v-track-click @click="emits('blance', tab)"
+      v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
+      <div class="promoter-card-hd-num number">{{ formatAmount(promoter.allowWithdrawalBalance || 0) }}</div>
+      <div class="promoter-card-hd-info">可提现余额(元)</div>
+      <img class="arrow-img" style="margin-left: 8px;" :src="arrowImg" alt="">
+    </div>
+    <div class="promoter-card-ft">
+      <div class="promoter-card-ft-item" v-if="applyRecord.accessCheckStatus === 'Y'">
+        <template v-if="显示下级分销商">
+          <div class="promoter-card-ft-info">下级分销商数量</div>
+          <div class="promoter-card-ft-num number">
+            {{ formatAmount(promoter.subDistributorNum || 0) }}
+          </div>
+        </template>
+        <template v-else>
+          <div class="promoter-card-ft-info">产品销售收益(元)
+            <IconFont class="icon" name="ask" v-track-click="'产品销售收益-说明'" @click="onHelpClick('profits')" />
+          </div>
+          <div class="promoter-card-ft-num number" v-track-click @click="emits('profits', tab)">
+            {{ formatAmount(promoter.totalIncome || 0) }}
+            <img class="arrow-img" :src="arrowImg" alt="">
+          </div>
+        </template>
+      </div>
+      <div class="promoter-card-ft-line"
+        v-if="applyRecord.accessCheckStatus === 'Y' && applyRecord.distributorFlag === 'Y'">
+      </div>
+      <div class="promoter-card-ft-item" v-if="applyRecord.distributorFlag === 'Y'">
+        <div class="promoter-card-ft-info">分销返佣收益(元)
+          <IconFont class="icon" name="ask" v-track-click="'分销返佣收益-说明'" @click="onHelpClick('rebate')" />
+        </div>
+        <div class="promoter-card-ft-num number" v-track-click @click="emits('rebate', tab)">
+          {{ formatAmount(promoter.totalRebateIncome || 0) }}
+          <img class="arrow-img" :src="arrowImg" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { endpoints, useHttp } from '../api'
+import { Promoter } from '../types'
+import { useDidShow, showModal } from '@tarojs/taro'
+import { useAmount } from '../../shared/composables/useAmount'
+import { IconFont } from '@nutui/icons-vue-taro'
+import { NsButtonGroup } from "@uxda/nutshell/taro";
+
+type PromoterCardProps = {
+  useCase: string
+  applyRecord: any
+  isAdmin?: boolean
+  显示下级分销商?: boolean
+}
+const props = withDefaults(defineProps<PromoterCardProps>(), {
+  useCase: '',
+  applyRecord: {},
+  isAdmin: false,
+  显示下级分销商: false
+})
+
+const inAccount = computed(() => {
+  return !props.显示下级分销商
+})
+
+const { formatAmount } = useAmount()
+const tab = ref('person')
+
+const promoter = ref<Promoter>({
+  balance: 0,
+  allowWithdrawalBalance: 0,
+  totalIncome: 0,
+  totalRebateIncome: 0,
+  subDistributorNum: 0,
+})
+
+const options = [
+  { label: '个人', value: 'person' },
+  { label: '企业', value: 'company' },
+]
+
+
+function onTabChange(type: string) {
+  // tab.value = type
+  loadPromoter()
+
+  emits('tab', tab.value)
+}
+
+async function loadPromoter() {
+  const $http = useHttp()
+  $http
+    .get<Promoter>(endpoints.获取推广方账户信息, {
+      useCase: tab.value,
+      companyFlag: tab.value === 'person' ? '2' : '1',
+    })
+    .then((data) => {
+      promoter.value.balance = data?.balance || 0
+      promoter.value.allowWithdrawalBalance = data?.allowWithdrawalBalance || 0
+      promoter.value.totalIncome = data?.totalIncome || 0
+      promoter.value.totalRebateIncome = data?.totalRebateIncome || 0
+      promoter.value.subDistributorNum = data?.subDistributorNum || 0
+    })
+}
+
+const emits = defineEmits([
+  /**
+   * 跳可提现余额
+   */
+  'blance',
+  /**
+   * 跳收益页面
+   */
+  'profits',
+  /**
+   * 跳返佣统计页面
+   */
+  'rebate',
+  /**
+   * tab切换
+   */
+  'tab',
+])
+
+useDidShow(() => {
+  Object.keys(props.applyRecord)?.length && loadPromoter()
+})
+watch(() => props.applyRecord, () => {
+  Object.keys(props.applyRecord)?.length && loadPromoter()
+}, { immediate: true })
+
+defineExpose({
+  reload: loadPromoter,
+})
+
+const toastMap = {
+  profits: '推广北斗星报告获取，每笔报告销售收益= 客户查询价 - 我的成本价',
+  rebate: '推荐朋友使用北斗星、企明星获取，返佣收益= 返佣基数 * 返佣比例',
+}
+function onHelpClick(type: string) {
+  showModal({
+    content: toastMap[type],
+    showCancel: false,
+    confirmText: '知道了',
+  })
+}
+
+const arrowImg = computed(() => {
+  if (props.显示下级分销商) {
+    return 'https://cdn.ddjf.com/static/images/appkit/arrow.png'
+  } else {
+    return 'https://cdn.ddjf.com/static/images/appkit/arrow-blue.png'
+  }
+})
+</script>
+
+<style lang="scss">
+.promoter-card {
+  position: relative;
+  padding: 20px;
+  background: #fff;
+  box-sizing: border-box;
+  margin: 0 auto;
+  border-radius: 15px;
+
+  &.inAccount {
+    background: linear-gradient(90deg, #DAEFFF 0%, #DEE7FF 52.22%, #C8CAFF 108.62%);
+
+    &::after,
+    &::before {
+      content: '';
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      border-radius: 50%;
+      background: #F4F6FA;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &::before {
+      left: -7.5px;
+    }
+
+    &::after {
+      right: -7.5px;
+    }
+
+    .ns-button-group .ns-button {
+      background: rgba(1, 127, 255, 0.1);
+      font-weight: normal;
+      color: #353535;
+
+      &.active {
+        background: #017FFF;
+        color: #fff;
+      }
+    }
+  }
+
+  .icon {
+    font-size: 10px;
+    color: rgba(53, 53, 53, 0.3);
+  }
+
+  &-hd {
+    display: flex;
+    align-items: center;
+    color: #353535;
+    margin-bottom: 15px;
+
+    &-num {
+      font-size: 22px;
+      font-weight: bold;
+    }
+
+    &-info {
+      font-size: 13px;
+      margin-left: 8px;
+    }
+  }
+
+  &-ft {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      flex: 1;
+    }
+
+    &-info {
+      font-size: 12px;
+      color: #434242;
+      margin-bottom: 5px;
+      display: flex;
+      align-items: center;
+    }
+
+    &-num {
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      color: #353535;
+    }
+
+    &-line {
+      width: 1px;
+      height: 19px;
+      background: rgba(53, 53, 53, 0.2);
+      margin-right: 30px;
+    }
+  }
+
+  .ns-button-group .ns-button {
+    background: #F8F8F8;
+    font-weight: normal;
+
+    &.active {
+      color: #017FFF;
+      background: #EEF5FF;
+    }
+  }
+
+  &-tab {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+
+    &-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 29px;
+      width: 46px;
+      font-size: 13px;
+      color: #808080;
+      border-radius: 23px;
+      background: #F8F8F8;
+      margin-right: 12px;
+
+      &.focus {
+        background: #EEF5FF;
+        color: #017FFF;
+      }
+    }
+  }
+
+  .arrow-img {
+    width: 16px;
+    height: 12px;
+    margin-left: 5px;
+  }
+}
+</style>