@uxda/appkit 4.1.12 → 4.1.19

package/src/payment/components/TradeView.vue

@@ -1,298 +1,294 @@
-<template>
-  <view class="view recharge-view2">
-    <view class="flex-grow">
-      <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>
-        <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>
-      </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>
-      </view>
-      <div class="buy-amount">
-        <div class="left">
-          待支付：
-          <span class="amount">
-            <i>￥</i>{{ currentAmount }}
-          </span>
-        </div>
-        <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" >
-      <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>
-      </template>
-    </nut-dialog>
-  </view>
-</template>
-
-<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'
-
-// 充值用户界面
-// 配置了必须的属性后
-// 自动获取支付套餐包列表
-// 并发起微信支付
-export interface RechargeViewProps {
-  /**
-   * 应用
-   **/
-  app: string,
-  /**
-   * 充值场景
-   */
-  // stage?: string, // 这个参数暂时不用
-  /**
-   * 租户
-   */
-  tenant: string
-}
-
-const props = defineProps<RechargeViewProps>()
-
-const emit = defineEmits<{
-  (event: 'complete', value: {result: boolean, type: string}): void
-}>()
-
-const state = reactive({
-  agreed: false,
-  selected: 0,
-  agreementOpen: false,
-  buttonLoading: false,
-})
-
-
-const balance = ref<number>(0)
-const amounts = ref<Amount[]>([])
-const selectBean = ref<boolean>(false)
-
-const onAgreementLinkClick = ($event) => {
-  state.agreementOpen = true
-}
-
-const onAmountSelect = (selected: number) => {
-  state.selected = selected
-  selectBean.value = false
-}
-
-const currentAmount = computed(()=>{
-  return amounts.value[state.selected] && !selectBean.value ? amounts.value[state.selected].paymentAmount : 0
-})
-
-onMounted(() => {
-  const $http = useHttp()
-  $http.get<any[]>(endpoints.获取增值权益类目).then((res: any) => {
-    balance.value = res.balance
-    amounts.value = res.paymentCaseConfigVOS
-  })
-})
-
-// 云豆支付
-const showDialog = ref<boolean>(false)
-async function beanPay(){
-  const $http = useHttp()
-  $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 {
-      Taro.showToast({
-        title: response.message,
-        icon: 'none',
-      })
-    }
-  })
-}
-
-
-const onPayClick = () => {
-  // 用云豆支付
-  if(selectBean.value){
-    showDialog.value = true
-    return 
-  }
-  
-  // 微信支付
-  if (!selectBean.value && !state.agreed) {
-    Taro.showToast({
-      title: '请勾选《大道云平台云豆充值协议》',
-      icon: 'none',
-    })
-    return false
-  }
-  state.buttonLoading = true
-  wx.login({
-    success ({code}: {code: string}) {
-      requestPaymentByBean({
-        caseConfigId: amounts.value[state.selected].id,
-        amount: amounts.value[state.selected].paymentAmount,
-        app: 'corporateStar', // 'crm',
-        tenant: props.tenant, // '17454646',
-        user: code
-      }).then(result => {
-        state.buttonLoading = false
-        if (result) {
-          emit('complete', {result: true, type: 'wePay'})
-        }
-      })
-    }
-  })
-}
-</script>
-
-<style lang="scss">
-.recharge-view2 {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .flex-grow {
-    flex-grow: 1;
-  }
-  .bean-buy{
-    margin: 0 15px;
-    padding: 10px;
-    background: #FFFBF3;
-    border-radius: 5px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .left{
-      .title{
-        color:#FD6701;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 20px; 
-        margin-bottom: 6px;
-      }
-      .amount{
-        color:#353535;
-        font-size: 13px;
-        line-height: 16px;
-        background-image: url('https://cdn.ddjf.com/static/images/appkit/yundou.png');
-        background-repeat: no-repeat;
-        background-size: 16px 16px;
-        padding-left: 24px;
-      }
-    }
-    .right{
-      display: flex;
-      align-items: center;
-      .amount{
-        color:#353535;
-        font-size: 15px;
-        line-height: 20px;
-        margin-right: 10px;
-      }
-      .icon{
-        display: block;
-        width: 16px;
-        height: 16px;
-        font-size: 0;
-      }
-    }
-  }
-  .amount-footer {
-    padding: 10px 0;
-    padding-bottom: 20px;
-    .agreement {
-      font-size: 12px;
-      display: flex;
-      justify-content: center;
-      align-items: cebter;
-      height: 40px;
-    }
-    .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{
-        width: 70%;
-        color:#353535;
-        font-size: 13px;
-        .amount{
-          color:#FD6701;
-          font-size: 20px;
-          font-weight: 600;
-          i{
-            font-size: 14px;
-            font-style: normal;
-          }
-        }
-      }
-      .recharge-button {
-        background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
-        color: #353535;
-        margin: 12px 0;
-        border: 0;
-        border-radius: 8px;
-        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{
-    font-size: 16px;
-    color: #262626
-  }
-  .item{
-    font-size: 14px;
-    color:#666666;
-    line-height: 21px;
-  }
-  .nut-dialog__footer-cancel{
-    color: #353535 !important;
-    border-color: #CCCCCC !important;
-  }
-  .nut-dialog__footer-ok {
-    border:none;
-    color: #353535;
-    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
-  }
-}
-</style>
+<template>
+  <view class="view recharge-view2">
+    <view class="flex-grow">
+      <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>
+        <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>
+      </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>
+      </view>
+      <div class="buy-amount">
+        <div class="left">
+          待支付：
+          <span class="amount">
+            <i>￥</i>{{ currentAmount }}
+          </span>
+        </div>
+        <nut-button block
+        shape="square"
+        :loading="state.buttonLoading"
+        @click="onPayClick"
+        class="recharge-button">购买</nut-button>
+      </div>
+    </view>
+    <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>
+      </template>
+    </nut-dialog>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import RightsPicker, { Amount } from './RightsPicker.vue'
+import { endpoints, useHttp } from '../api'
+import { requestPaymentByBean } from '../services'
+import Taro from '@tarojs/taro'
+
+// 充值用户界面
+// 配置了必须的属性后
+// 自动获取支付套餐包列表
+// 并发起微信支付
+export interface RechargeViewProps {
+  /**
+   * 应用
+   **/
+  app: string,
+  /**
+   * 充值场景
+   */
+  // stage?: string, // 这个参数暂时不用
+  /**
+   * 租户
+   */
+  tenant: string
+}
+
+const props = defineProps<RechargeViewProps>()
+
+const emit = defineEmits<{
+  (event: 'complete', value: {result: boolean, type: string}): void,
+  (event: 'agree'): void,
+}>()
+
+const state = reactive({
+  agreed: false,
+  selected: 0,
+  // agreementOpen: false,
+  buttonLoading: false,
+})
+
+
+const balance = ref<number>(0)
+const amounts = ref<Amount[]>([])
+const selectBean = ref<boolean>(false)
+
+const onAgreementLinkClick = (e) => {
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  emit('agree')
+  // state.agreementOpen = true
+}
+
+const onAmountSelect = (selected: number) => {
+  state.selected = selected
+  selectBean.value = false
+}
+
+const currentAmount = computed(()=>{
+  return amounts.value[state.selected] && !selectBean.value ? amounts.value[state.selected].paymentAmount : 0
+})
+
+onMounted(() => {
+  const $http = useHttp()
+  $http.get<any[]>(endpoints.获取增值权益类目).then((res: any) => {
+    balance.value = res.balance
+    amounts.value = res.paymentCaseConfigVOS
+  })
+})
+
+// 云豆支付
+const showDialog = ref<boolean>(false)
+async function beanPay(){
+  const $http = useHttp()
+  $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 {
+      Taro.showToast({
+        title: response.message,
+        icon: 'none',
+      })
+    }
+  })
+}
+
+
+const onPayClick = () => {
+  // 用云豆支付
+  if(selectBean.value){
+    showDialog.value = true
+    return 
+  }
+  
+  // 微信支付
+  if (!selectBean.value && !state.agreed) {
+    Taro.showToast({
+      title: '请勾选《大道云平台云豆充值协议》',
+      icon: 'none',
+    })
+    return false
+  }
+  state.buttonLoading = true
+  wx.login({
+    success ({code}: {code: string}) {
+      requestPaymentByBean({
+        caseConfigId: amounts.value[state.selected].id,
+        amount: amounts.value[state.selected].paymentAmount,
+        app: 'corporateStar', // 'crm',
+        tenant: props.tenant, // '17454646',
+        user: code
+      }).then(result => {
+        state.buttonLoading = false
+        if (result) {
+          emit('complete', {result: true, type: 'wePay'})
+        }
+      })
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.recharge-view2 {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .bean-buy{
+    margin: 0 15px;
+    padding: 10px;
+    background: #FFFBF3;
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left{
+      .title{
+        color:#FD6701;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px; 
+        margin-bottom: 6px;
+      }
+      .amount{
+        color:#353535;
+        font-size: 13px;
+        line-height: 16px;
+        background-image: url('https://cdn.ddjf.com/static/images/appkit/yundou.png');
+        background-repeat: no-repeat;
+        background-size: 16px 16px;
+        padding-left: 24px;
+      }
+    }
+    .right{
+      display: flex;
+      align-items: center;
+      .amount{
+        color:#353535;
+        font-size: 15px;
+        line-height: 20px;
+        margin-right: 10px;
+      }
+      .icon{
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 0;
+      }
+    }
+  }
+  .amount-footer {
+    padding: 10px 0;
+    padding-bottom: 20px;
+    .agreement {
+      font-size: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: cebter;
+      height: 40px;
+    }
+    .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{
+        width: 70%;
+        color:#353535;
+        font-size: 13px;
+        .amount{
+          color:#FD6701;
+          font-size: 20px;
+          font-weight: 600;
+          i{
+            font-size: 14px;
+            font-style: normal;
+          }
+        }
+      }
+      .recharge-button {
+        background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
+        color: #353535;
+        margin: 12px 0;
+        border: 0;
+        border-radius: 8px;
+        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{
+    font-size: 16px;
+    color: #262626
+  }
+  .item{
+    font-size: 14px;
+    color:#666666;
+    line-height: 21px;
+  }
+  .nut-dialog__footer-cancel{
+    color: #353535 !important;
+    border-color: #CCCCCC !important;
+  }
+  .nut-dialog__footer-ok {
+    border:none;
+    color: #353535;
+    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
+  }
+}
+</style>