@uxda/appkit 1.2.78 → 3.2.20

package/src/payment/components/RechargeView.vue

@@ -1,33 +1,22 @@
 <template>
   <view class="view recharge-view">
     <view class="flex-grow">
-      <amount-picker :items="amounts"
-        :selected="state.selected"
-        @change="onAmountSelect" />
+      <amount-picker :items="amounts" :selected="state.selected" @change="onAmountSelect" />
     </view>
     <view class="amount-footer">
       <view class="agreement">
-        <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline" @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
+        <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline"
+            @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
       </view>
-      <nut-button block
-        shape="square"
-        :loading="state.buttonLoading"
-        @click="onPayClick"
+      <nut-button block shape="square" :loading="state.buttonLoading" @click="onPayClick"
         class="recharge-button">立即充值</nut-button>
     </view>
-    <app-drawer
-      v-model="state.agreementOpen"
-      title="充值协议">
-      <user-agreement />
-    </app-drawer>
   </view>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue'
 import AmountPicker from './AmountPicker.vue'
-import UserAgreement from './UserAgreement.vue'
-import { AppDrawer } from '../../shared'
 import { useHttp, endpoints } from '../api'
 import { requestPayment } from '../services'
 import Taro from '@tarojs/taro'
@@ -54,7 +43,8 @@ export interface RechargeViewProps {
 const props = defineProps<RechargeViewProps>()
 
 const emit = defineEmits<{
-  (event: 'complete', value: boolean): void
+  (event: 'complete', value: boolean): void,
+  (event: 'agree'): void,
 }>()
 
 const state = reactive({
@@ -66,8 +56,11 @@ const state = reactive({
 
 const amounts = ref<any[]>([])
 
-const onAgreementLinkClick = ($event) => {
-  state.agreementOpen = true
+const onAgreementLinkClick = (e) => {
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  emit('agree')
+  // state.agreementOpen = true
 }
 
 const onAmountSelect = (selected: number) => {
@@ -75,10 +68,10 @@ const onAmountSelect = (selected: number) => {
 }
 
 onMounted(() => {
-  const $http = useHttp()
+  const $http = useHttp({ Appcode: props.app !== 'cloudkitPro' ? props.app : '', Tenant: props.tenant })
+
   $http.get<any[]>(endpoints.获取充值金额列表, {
     app: props.app,
-    // stage: 'aiApproveRecharge', // 支付场景
     tenant: props.tenant
   }).then(response => {
     amounts.value = response
@@ -95,7 +88,7 @@ const onPayClick = () => {
   }
   state.buttonLoading = true
   wx.login({
-    success ({code}: {code: string}) {
+    success({ code }: { code: string }) {
       requestPayment({
         amount: amounts.value[state.selected].amount,
         app: props.app, // 'crm',
@@ -117,12 +110,16 @@ const onPayClick = () => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  --nut-primary-color: #017fff;
+
   .flex-grow {
     flex-grow: 1;
   }
+
   .amount-footer {
     padding: 10px;
     padding-bottom: 20px;
+
     .agreement {
       font-size: 12px;
       display: flex;
@@ -130,6 +127,7 @@ const onPayClick = () => {
       align-items: cebter;
       height: 40px;
     }
+
     .recharge-button {
       background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
       color: #353535;
@@ -137,14 +135,17 @@ const onPayClick = () => {
       border: 0;
       border-radius: 8px;
     }
+
     .nut-checkbox {
       line-height: 40px;
     }
+
     .nut-checkbox__label {
       margin-left: 8px;
       flex: flex;
       font-size: 12px;
     }
+
     .link {
       display: inline;
       color: #FD6701;

package/src/payment/components/TradeView.vue

@@ -1,50 +1,42 @@
 <template>
   <view class="view recharge-view2">
     <view class="flex-grow">
-      <rights-picker :items="amounts"
-        :selected="state.selected"
-        @change="onAmountSelect" />
+      <rights-picker :items="amounts" :selected="state.selected" @change="onAmountSelect" />
       <div class="bean-buy" v-if="amounts[state.selected]">
         <div class="left">
           <div class="title">使用云豆支付</div>
-          <div class="amount" v-if="!selectBean">余额 {{balance}}</div>
-          <div class="amount" v-else>扣减后余额 {{(balance - amounts[state.selected].paymentAmount).toFixed(1)}}</div>
+          <div class="amount" v-if="!selectBean">余额 {{ formatAmount(balance || 0) }}</div>
+          <div class="amount" v-else>扣减后余额 {{ formatAmount(balance - amounts[state.selected].paymentAmount) }}</div>
         </div>
         <div class="right" v-if="balance >= amounts[state.selected].paymentAmount" @click="selectBean = !selectBean">
-          <div class="amount">-{{ amounts[state.selected].paymentAmount }}</div>
-          <img class="icon" :src="selectBean ? 'https://cdn.ddjf.com/static/images/appkit/select.svg' : 'https://cdn.ddjf.com/static/images/appkit/not-select.svg'" />
+          <div class="amount">-{{ formatAmount(amounts[state.selected].paymentAmount || 0) }}</div>
+          <img class="icon"
+            :src="selectBean ? 'https://cdn.ddjf.com/static/images/appkit/select.svg' : 'https://cdn.ddjf.com/static/images/appkit/not-select.svg'" />
         </div>
-      </div>  
+      </div>
     </view>
     <view class="amount-footer">
       <view class="agreement" v-if="!selectBean">
-        <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline" @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
+        <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline"
+            @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
       </view>
       <div class="buy-amount">
         <div class="left">
           待支付：
           <span class="amount">
-            <i>￥</i>{{ currentAmount }}
+            <i>￥</i>{{ formatAmount(currentAmount) }}
           </span>
         </div>
-        <nut-button block
-        shape="square"
-        :loading="state.buttonLoading"
-        @click="onPayClick"
-        class="recharge-button">购买</nut-button>
+        <nut-button block shape="square" :loading="state.buttonLoading" @click="onPayClick"
+          class="recharge-button">购买</nut-button>
       </div>
-      
     </view>
-    <app-drawer
-      v-model="state.agreementOpen"
-      title="充值协议">
-      <user-agreement />
-    </app-drawer>
-    <nut-dialog title="确认购买" custom-class="trade-dialog" v-model:visible="showDialog" @cancel="showDialog = !showDialog" @ok="beanPay" >
+    <nut-dialog title="确认购买" custom-class="trade-dialog" v-model:visible="showDialog" @cancel="showDialog = !showDialog"
+      @ok="beanPay">
       <template v-if="amounts[state.selected]">
-        <div class="item">云豆扣减：{{ amounts[state.selected].paymentAmount }}</div>
-        <div class="item">权益增加：{{ amounts[state.selected].priceRightNum }}笔</div>
-        <div class="item">扣减后云豆余额：{{ (balance - amounts[state.selected].paymentAmount).toFixed(1) }}</div>
+        <div class="item">云豆扣减：{{ formatAmount(amounts[state.selected].paymentAmount || 0) }}</div>
+        <div class="item">权益增加：{{ formatAmount(amounts[state.selected].priceRightNum || 0) }}笔</div>
+        <div class="item">扣减后云豆余额：{{ formatAmount(balance - amounts[state.selected].paymentAmount) }}</div>
       </template>
     </nut-dialog>
   </view>
@@ -53,11 +45,10 @@
 <script lang="ts" setup>
 import { computed, onMounted, reactive, ref } from 'vue'
 import RightsPicker, { Amount } from './RightsPicker.vue'
-import UserAgreement from './UserAgreement.vue'
-import { AppDrawer } from '../../shared'
 import { endpoints, useHttp } from '../api'
 import { requestPaymentByBean } from '../services'
 import Taro from '@tarojs/taro'
+import { useAmount } from '../../shared/composables/useAmount'
 
 // 充值用户界面
 // 配置了必须的属性后
@@ -79,15 +70,17 @@ export interface RechargeViewProps {
 }
 
 const props = defineProps<RechargeViewProps>()
+const { formatAmount } = useAmount()
 
 const emit = defineEmits<{
-  (event: 'complete', value: {result: boolean, type: string}): void
+  (event: 'complete', value: { result: boolean, type: string }): void,
+  (event: 'agree'): void,
 }>()
 
 const state = reactive({
   agreed: false,
   selected: 0,
-  agreementOpen: false,
+  // agreementOpen: false,
   buttonLoading: false,
 })
 
@@ -96,8 +89,11 @@ const balance = ref<number>(0)
 const amounts = ref<Amount[]>([])
 const selectBean = ref<boolean>(false)
 
-const onAgreementLinkClick = ($event) => {
-  state.agreementOpen = true
+const onAgreementLinkClick = (e) => {
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  emit('agree')
+  // state.agreementOpen = true
 }
 
 const onAmountSelect = (selected: number) => {
@@ -105,7 +101,7 @@ const onAmountSelect = (selected: number) => {
   selectBean.value = false
 }
 
-const currentAmount = computed(()=>{
+const currentAmount = computed(() => {
   return amounts.value[state.selected] && !selectBean.value ? amounts.value[state.selected].paymentAmount : 0
 })
 
@@ -119,13 +115,13 @@ onMounted(() => {
 
 // 云豆支付
 const showDialog = ref<boolean>(false)
-async function beanPay(){
+async function beanPay() {
   const $http = useHttp()
-  $http.post( `/payment/paymentCaseConfig/purchase/${amounts.value[state.selected].id}`).then((response: any) => {
+  $http.post(`/payment/paymentCaseConfig/purchase/${amounts.value[state.selected].id}`).then((response: any) => {
     if (response) {
       showDialog.value = false
-      emit('complete', {result: response, type: 'bean'})
-    }else {
+      emit('complete', { result: response, type: 'bean' })
+    } else {
       Taro.showToast({
         title: response.message,
         icon: 'none',
@@ -137,11 +133,11 @@ async function beanPay(){
 
 const onPayClick = () => {
   // 用云豆支付
-  if(selectBean.value){
+  if (selectBean.value) {
     showDialog.value = true
-    return 
+    return
   }
-  
+
   // 微信支付
   if (!selectBean.value && !state.agreed) {
     Taro.showToast({
@@ -152,7 +148,7 @@ const onPayClick = () => {
   }
   state.buttonLoading = true
   wx.login({
-    success ({code}: {code: string}) {
+    success({ code }: { code: string }) {
       requestPaymentByBean({
         caseConfigId: amounts.value[state.selected].id,
         amount: amounts.value[state.selected].paymentAmount,
@@ -162,7 +158,7 @@ const onPayClick = () => {
       }).then(result => {
         state.buttonLoading = false
         if (result) {
-          emit('complete', {result: true, type: 'wePay'})
+          emit('complete', { result: true, type: 'wePay' })
         }
       })
     }
@@ -175,10 +171,13 @@ const onPayClick = () => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  --nut-primary-color: #017fff;
+
   .flex-grow {
     flex-grow: 1;
   }
-  .bean-buy{
+
+  .bean-buy {
     margin: 0 15px;
     padding: 10px;
     background: #FFFBF3;
@@ -186,16 +185,18 @@ const onPayClick = () => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .left{
-      .title{
-        color:#FD6701;
+
+    .left {
+      .title {
+        color: #FD6701;
         font-size: 14px;
         font-weight: 600;
-        line-height: 20px; 
+        line-height: 20px;
         margin-bottom: 6px;
       }
-      .amount{
-        color:#353535;
+
+      .amount {
+        color: #353535;
         font-size: 13px;
         line-height: 16px;
         background-image: url('https://cdn.ddjf.com/static/images/appkit/yundou.png');
@@ -204,16 +205,19 @@ const onPayClick = () => {
         padding-left: 24px;
       }
     }
-    .right{
+
+    .right {
       display: flex;
       align-items: center;
-      .amount{
-        color:#353535;
+
+      .amount {
+        color: #353535;
         font-size: 15px;
         line-height: 20px;
         margin-right: 10px;
       }
-      .icon{
+
+      .icon {
         display: block;
         width: 16px;
         height: 16px;
@@ -221,9 +225,11 @@ const onPayClick = () => {
       }
     }
   }
+
   .amount-footer {
     padding: 10px 0;
     padding-bottom: 20px;
+
     .agreement {
       font-size: 12px;
       display: flex;
@@ -231,27 +237,33 @@ const onPayClick = () => {
       align-items: cebter;
       height: 40px;
     }
-    .buy-amount{
+
+    .buy-amount {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 10px;
       border-radius: 0px;
-      box-shadow: 0px -5px 14px -5px rgba(0, 0, 0, 0.1); /* 上边框阴影 */
-      .left{
+      box-shadow: 0px -5px 14px -5px rgba(0, 0, 0, 0.1);
+
+      /* 上边框阴影 */
+      .left {
         width: 70%;
-        color:#353535;
+        color: #353535;
         font-size: 13px;
-        .amount{
-          color:#FD6701;
+
+        .amount {
+          color: #FD6701;
           font-size: 20px;
           font-weight: 600;
-          i{
+
+          i {
             font-size: 14px;
             font-style: normal;
           }
         }
       }
+
       .recharge-button {
         background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
         color: #353535;
@@ -261,36 +273,43 @@ const onPayClick = () => {
         flex: 1;
       }
     }
+
     .nut-checkbox {
       line-height: 40px;
     }
+
     .nut-checkbox__label {
       margin-left: 8px;
       flex: flex;
       font-size: 12px;
     }
+
     .link {
       display: inline;
       color: #FD6701;
     }
   }
 }
-.trade-dialog{
-  .nut-dialog__header{
+
+.trade-dialog {
+  .nut-dialog__header {
     font-size: 16px;
     color: #262626
   }
-  .item{
+
+  .item {
     font-size: 14px;
-    color:#666666;
+    color: #666666;
     line-height: 21px;
   }
-  .nut-dialog__footer-cancel{
+
+  .nut-dialog__footer-cancel {
     color: #353535 !important;
     border-color: #CCCCCC !important;
   }
+
   .nut-dialog__footer-ok {
-    border:none;
+    border: none;
     color: #353535;
     background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
   }