@uxda/appkit 4.1.29 → 4.1.42

package/src/balance/components/DateFilter.vue

@@ -4,11 +4,7 @@
     <div class="content">
       <div class="title">自定义</div>
       <div class="time">
-        <div
-          class="item"
-          :class="focused === 'from' ? 'current' : ''"
-          @click="switchDateInput('from')"
-        >
+        <div class="item" :class="focused === 'from' ? 'current' : ''" @click="switchDateInput('from')">
           {{ formatDate(result.from) }}
         </div>
         <div class="line">-</div>
@@ -22,18 +18,10 @@
       <div class="btn confirm" @click="onOkClick">确定</div>
     </div>
     <div class="bottom"></div>
-    <nut-popup v-model:visible="datePickerOpen"
-      class="appkit-date-filter-picker-popup"
-      position="bottom"
+    <nut-popup v-model:visible="datePickerOpen" class="appkit-date-filter-picker-popup" position="bottom"
       overlay-class="appkit-date-filter-picker-overlay">
-      <nut-date-picker
-        v-model="focusedDate"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :is-show-chinese="false"
-        :three-dimensional="false"
-        @cancel="onDatePickerCancel"
-        @confirm="onDatePickerComplete" />
+      <nut-date-picker v-model="focusedDate" :min-date="minDate" :max-date="maxDate" :is-show-chinese="false"
+        :three-dimensional="false" @cancel="onDatePickerCancel" @confirm="onDatePickerComplete" />
     </nut-popup>
   </div>
 </template>
@@ -113,7 +101,7 @@ function onDatePickerComplete({ selectedValue, selectedOptions }) {
   state.couldClose = true
 }
 
-function onDatePickerCancel () {
+function onDatePickerCancel() {
   datePickerOpen.value = false
   state.couldClose = true
 }
@@ -123,7 +111,7 @@ function onDatePickerCancel () {
  * 当选择开始时间大于结束时间，结束时间改为开始时间
  * 时间选择器都要小于当前时间，结束时间的时间选择器要以开始时间为最小值，
  */
-function switchDateInput (shift: string) {
+function switchDateInput(shift: string) {
   // 要设置一下结束时间的起始值 开始时间往前倒5年
   if (shift === 'from') {
     let time = result.from.split('-').map(Number)
@@ -146,6 +134,7 @@ function switchDateInput (shift: string) {
   flex-direction: column;
   width: 100%;
   position: relative;
+
   .date-filter-header {
     text-align: center;
     height: 44px;
@@ -154,21 +143,25 @@ function switchDateInput (shift: string) {
     font-size: 17px;
     background-color: #f5f5f5;
   }
+
   .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;
@@ -176,27 +169,26 @@ function switchDateInput (shift: string) {
         border-radius: 6px;
         text-align: center;
       }
+
       .current {
         border: 1px solid;
-        border-image-source: linear-gradient(
-          180deg,
-          rgba(239, 208, 130, 0.8) 0%,
-          rgba(255, 185, 120, 0.8) 100%
-        );
-        background: linear-gradient(
-            180deg,
+        border-image-source: linear-gradient(180deg,
             rgba(239, 208, 130, 0.8) 0%,
-            rgba(255, 185, 120, 0.8) 100%
-          ),
+            rgba(255, 185, 120, 0.8) 100%);
+        background: linear-gradient(180deg,
+            rgba(239, 208, 130, 0.8) 0%,
+            rgba(255, 185, 120, 0.8) 100%),
           linear-gradient(180deg, #fff7e3 0%, #fefde6 100%);
       }
     }
   }
+
   .buttons {
     margin: 32px 15px 0 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .btn {
       flex: 1;
       height: 40px;
@@ -208,21 +200,25 @@ function switchDateInput (shift: string) {
       font-size: 16px;
       border-radius: 6px;
     }
+
     .confirm {
       margin-left: 11px;
-      color: #000;
+      color: #fff;
       border: none;
-      background: linear-gradient(90deg, #ffebc1 0%, #ffd7a7 52.29%, #ffb875 100%);
+      background: #017FFF;
     }
   }
+
   .time {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     margin: 10px 0 30px 0;
+
     .line {
       margin: 0 8px;
     }
+
     .item {
       height: 30px;
       line-height: 30px;
@@ -234,15 +230,18 @@ function switchDateInput (shift: string) {
       background: rgba(#f5f5f5, 0.8);
       border-radius: 6px;
     }
+
     .current {
       border: 1px solid #353535;
     }
   }
+
   .bottom {
     height: 32px;
     background: #fff;
   }
 }
+
 .nut-overlay {
   &.date-filter-picker-overlay {
     height: 100vh;

package/src/balance/components/ListFilterPicker.vue

@@ -3,26 +3,22 @@
     <div class="list-filter-picker-title">
       <h3>选择筛选项</h3>
     </div>
-    <div class="consumption-filter-content">
+    <div class="list-filter-picker-content">
       <template v-for="(item, index) in filterSections" :key="index">
         <div class="title">{{ item.label }}</div>
         <div class="info">
-          <div
-            v-for="(it, i) in item.data"
-            @click="() => onFilterSectionClick(item.name, it.value)"
-            :class="getItemClass(item.name, it.value)"
-            class="info-item"
-            :key="i">
+          <div v-for="(it, i) in item.data" @click="() => onFilterSectionClick(item.name, it.value)"
+            :class="getItemClass(item.name, it.value)" class="info-item" :key="i">
             {{ typeof it === 'string' ? it : it.label }}
           </div>
         </div>
       </template>
     </div>
-    <div class="consumption-filter-btn spa-between">
+    <div class="list-filter-picker-btn spa-between">
       <div class="btn" @click="reset">重置</div>
       <div class="btn confirm" @click="onOkClick">确定</div>
     </div>
-    <div class="consumption-filter-bottom"></div>
+    <div class="list-filter-picker-bottom"></div>
   </div>
 </template>
 
@@ -99,6 +95,7 @@ const onOkClick = () => {
   display: flex;
   flex-direction: column;
   width: 100%;
+
   &-title {
     position: relative;
     height: 44px;
@@ -108,21 +105,25 @@ const onOkClick = () => {
     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;
@@ -130,45 +131,45 @@ const onOkClick = () => {
         border-radius: 6px;
         text-align: center;
       }
+
       .current {
         border-radius: 5px;
-        border: 1px solid #EFD082;
-        background: linear-gradient(180deg, #FFF7E3 0%, #FEFDE6 100%);
+        border: 1px solid rgba(1, 127, 255, 0.5);
+        background: #E6F2FF;
       }
     }
   }
+
   &-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;
+      color: #fff;
       border: none;
-      background: linear-gradient(
-        90deg,
-        #ffebc1 0%,
-        #ffd7a7 52.29%,
-        #ffb875 100%
-      );
+      background: #017fff;
     }
   }
+
   &-bottom {
     height: 32px;
     background: #fff;
   }
+
   .icon {
     display: block;
     width: 20px;
@@ -176,6 +177,7 @@ const onOkClick = () => {
     background-size: 40px;
     background-repeat: no-repeat;
     background-position: center center;
+
     &.icon-x {
       position: absolute;
       right: 10px;

package/src/balance/components/PromoterCard.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="promoter-card">
+    <div class="promoter-card-tab" v-if="useCase === 'company' && isAdmin">
+      <div class="promoter-card-tab-item" @click="onTabChange('person')" :class="{ focus: tab === 'person' }">个人</div>
+      <div class="promoter-card-tab-item" @click="onTabChange('company')" :class="{ focus: tab === 'company' }">企业</div>
+    </div>
+    <div class="promoter-card-hd" @click="emits('blance', tab)"
+      v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
+      <div class="promoter-card-hd-num">{{ promoter.total }}</div>
+      <div class="promoter-card-hd-info">可提现余额(元)</div>
+      <img class="arrow-img" src="https://cdn.ddjf.com/static/images/appkit/arrow.png" alt="">
+    </div>
+    <div class="promoter-card-ft">
+      <div class="promoter-card-ft-item" v-if="applyRecord.accessCheckStatus === 'Y'" @click="emits('profits', tab)">
+        <div class="promoter-card-ft-info">销售累计收益(笔)</div>
+        <div class="promoter-card-ft-num">
+          {{ promoter.totalIncome }}
+          <img class="arrow-img" src="https://cdn.ddjf.com/static/images/appkit/arrow.png" alt="">
+        </div>
+      </div>
+      <div class="promoter-card-ft-line"
+        v-if="applyRecord.accessCheckStatus === 'Y' && applyRecord.distributorFlag === 'Y'"></div>
+      <div class="promoter-card-ft-item" @click="emits('rebate', tab)" v-if="applyRecord.distributorFlag === 'Y'">
+        <div class="promoter-card-ft-info">返佣累计收益(元)</div>
+        <div class="promoter-card-ft-num">
+          {{ promoter.totalRebateIncome }}
+          <img class="arrow-img" src="https://cdn.ddjf.com/static/images/appkit/arrow.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { endpoints, useHttp } from '../api'
+import { Promoter } from '../types'
+import { useDidShow } from '@tarojs/taro'
+
+type PromoterCardProps = {
+  useCase: string
+  applyRecord: any
+  isAdmin?: boolean
+}
+const props = withDefaults(defineProps<PromoterCardProps>(), {
+  useCase: '',
+  applyRecord: {},
+  isAdmin: true
+})
+
+const tab = ref('person')
+
+const promoter = ref<Promoter>({
+  total: 0,
+  totalIncome: 0,
+  totalRebateIncome: 0,
+})
+
+function onTabChange(type: string) {
+  tab.value = type
+  loadPromoter()
+}
+
+async function loadPromoter() {
+  const $http = useHttp()
+  $http
+    .get<Promoter>(endpoints.获取推广方账户信息, {
+      useCase: tab.value,
+    })
+    .then((data) => {
+      promoter.value.total = data?.total || 0
+      promoter.value.totalIncome = data?.totalIncome || 0
+      promoter.value.totalRebateIncome = data?.totalRebateIncome || 0
+    })
+}
+
+const emits = defineEmits([
+  /**
+   * 跳可提现余额
+   */
+  'blance',
+  /**
+   * 跳收益页面
+   */
+  'profits',
+  /**
+   * 跳返佣统计页面
+   */
+  'rebate',
+])
+
+useDidShow(() => {
+  loadPromoter()
+})
+
+defineExpose({
+  reload: loadPromoter,
+})
+</script>
+
+<style lang="scss">
+.promoter-card {
+  padding: 15px 20px;
+  background: linear-gradient(180deg, #FFEEDB 0%, #FEFEFC 100%);
+  box-sizing: border-box;
+  margin: 0 auto;
+  border-radius: 15px;
+
+  &-hd {
+    display: flex;
+    align-items: center;
+    color: #353535;
+    margin-bottom: 12px;
+
+    &-num {
+      font-size: 22px;
+      font-weight: bold;
+      margin-right: 8px;
+    }
+
+    &-info {
+      font-size: 14px;
+    }
+  }
+
+  &-ft {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      flex: 1;
+    }
+
+    &-info {
+      font-size: 12px;
+      color: #434242;
+      margin-bottom: 5px;
+    }
+
+    &-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;
+    }
+  }
+
+  &-tab {
+    margin-top: -3px;
+    margin-bottom: 15px;
+
+    &-item {
+      display: inline-flex;
+      align-items: center;
+      background: #fff;
+      border-radius: 15px;
+      height: 29px;
+      padding: 0 10px;
+      font-size: 12px;
+      color: #6D4523;
+      margin-right: 12px;
+
+      &.focus {
+        background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
+        color: #6D4523;
+      }
+    }
+  }
+
+  .arrow-img {
+    width: 16px;
+    height: 12px;
+    margin-left: 5px;
+  }
+}
+</style>

package/src/balance/components/index.ts

@@ -3,11 +3,6 @@ import AccountView from './AccountView.vue'
 import BalanceReminder from './BalanceReminder.vue'
 import DateRange from './DateRange.vue'
 import ListFilter from './ListFilter.vue'
+import PromoterCard from './PromoterCard.vue'
 
-export {
-  BalanceCard,
-  AccountView,
-  BalanceReminder,
-  DateRange,
-  ListFilter
-}
+export { BalanceCard, AccountView, BalanceReminder, DateRange, ListFilter, PromoterCard }

package/src/balance/types.ts

@@ -89,3 +89,9 @@ export type 权益类目 = {
   name: string
   code: string
 }
+
+export type Promoter = {
+  total: number
+  totalIncome: number
+  totalRebateIncome: number
+}

package/src/index.ts

@@ -46,7 +46,6 @@ const $app: DollarApp = {
   },
   setTempToken: (token: () => string) => {
     const appKitOptions = useAppKitOptions()
-    console.log('setTempToken: ' + token)
     appKitOptions.tempToken = token
   },
   requestPayment: (options: PaymentParams) => {},

package/src/payment/api/index.ts

@@ -61,7 +61,6 @@ interface DefaultHeaderType {
 }
 function useHttp(defaultHeader?: DefaultHeaderType) {
   const appkitOptions = useAppKitOptions()
-  console.log(appkitOptions.tempToken(), ':----- appkitOptions.tempToken()')
   const headers = {
     Token: appkitOptions.tempToken() || appkitOptions.token(),
     Appcode: defaultHeader?.Appcode || appkitOptions.app(),

package/src/payment/components/AmountPicker.vue

@@ -1,15 +1,7 @@
 <template>
-  <nut-grid
-    class="amount-picker"
-    :column-num="3"
-    :gutter="10"
-    :border="false">
-    <nut-grid-item
-      class="tile"
-      v-for="(amount, index) in items"
-      :class="{selected: state.selected === index}"
-      @click="() => onGridItemClick(index)"
-      :key="index">
+  <nut-grid class="amount-picker" :column-num="3" :gutter="10" :border="false">
+    <nut-grid-item class="tile" v-for="(amount, index) in items" :class="{ selected: state.selected === index }"
+      @click="() => onGridItemClick(index)" :key="index">
       <h4 class="token-line number">{{ amount.token }}</h4>
       <h5>¥<span class="number">{{ amount.amount }}</span></h5>
     </nut-grid-item>
@@ -56,14 +48,17 @@ const onGridItemClick = (index: number) => {
 <style lang="scss">
 .amount-picker {
   padding: 14px 0 14px 14px;
+
   .nut-grid-item__content {
-    border: solid 2px transparent;
+    border: solid 1px transparent;
     background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
       linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
     border-radius: 5px;
   }
+
   .tile {
     height: 80px;
+
     &.selected {
       .nut-grid-item__content {
         background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
@@ -71,6 +66,7 @@ const onGridItemClick = (index: number) => {
       }
     }
   }
+
   h4.token-line {
     background-image: url("https://cdn.ddjf.com/static/images/appkit/yundou.png");
     background-size: 20px;
@@ -82,6 +78,7 @@ const onGridItemClick = (index: number) => {
     line-height: 25px;
     font-size: 18px;
   }
+
   h5 {
     line-height: 18px;
     color: #353535;

package/src/shared/components/AppVerify.vue

@@ -4,35 +4,21 @@
     <p class="caption">{{ message || '短信将发送至账号绑定手机号' }}</p>
     <p class="number">{{ phone }}</p>
     <ns-form v-model="formData" class="form">
-      <ns-input
-        class="form-input"
-        name="code"
-        v-model="formData.code"
-        placeholder="请输入验证码"
-        maxlength="6"
-        variant="solid"
-        :rules="['required', {
+      <ns-input class="form-input" name="code" v-model="formData.code" placeholder="请输入验证码" maxlength="6"
+        variant="solid" :rules="['required', {
           name: 'function',
           message: '输入错误, 请重新输入',
           method: (value: string) => value.length === 6,
-          }]"
-      >
+        }]">
       </ns-input>
       <div class="form-btn">
-        <ns-button
-          v-if="!sent"
-          size="xs"
-          variant="plain"
-          color="primary"
-          @click="send"
-          label="获取验证码"
-        />
+        <ns-button v-if="!sent" size="xs" variant="plain" color="primary" @click="send" label="获取验证码" />
         <div class="caption" v-if="sent">{{ countdown }}s后重新发送</div>
       </div>
     </ns-form>
     <div class="row buttons">
       <ns-button class="cancel-btn" @click="emits('cancel')">取消</ns-button>
-      <ns-button gradient="#FFEBC1,#FFD7A7,#FFB875/90" @click="onOk">确认</ns-button>
+      <ns-button color="primary" @click="onOk">确认</ns-button>
     </div>
   </div>
 </template>
@@ -81,25 +67,29 @@ const props = defineProps<AppVerifyProps>();
 
 <style lang="scss">
 .app-verify {
-  padding: var(--ns-spacing);
+  padding: 10px 30px 20px;
 
   h2 {
     font-size: 16px;
     font-weight: bold;
     margin: 10px;
   }
+
   .caption {
-    font-size: 10px !important;
+    font-size: 13px !important;
     color: #ccc;
     line-height: 21px;
   }
+
   .number {
     line-height: 21px;
   }
+
   .form .nut-cell-group__wrap {
     display: flex;
     align-items: center;
     margin: 20px 0 !important;
+
     .form-input {
       height: 36px;
       line-height: 36px;
@@ -109,18 +99,31 @@ const props = defineProps<AppVerifyProps>();
       flex: 1;
       padding-left: 12px;
     }
+
     .form-btn {
       margin-left: 12px;
       width: 105px;
     }
   }
+
   .buttons {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 10px;
+
     .ns-button {
       width: 104px;
+      border-radius: 30px;
+      --radius: 30px;
     }
+
     .cancel-btn {
       border: 1px solid #969696 !important;
     }
   }
+
+  .nut-input {
+    background: transparent !important;
+  }
 }
 </style>