@uxda/appkit 1.2.8 → 1.2.12

package/src/payment/components/AmountPicker.vue

@@ -1,94 +1,94 @@
-<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">
-      <h4 class="token-line number">{{ amount.token }}</h4>
-      <h5>¥<span class="number">{{ amount.amount }}</span></h5>
-    </nut-grid-item>
-  </nut-grid>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue'
-
-// 充值金额选取
-
-type Amount = {
-  token: number,
-  amount: number
-}
-
-interface AmountPickerProps {
-  items: Amount[],
-  selected?: number
-}
-
-const emit = defineEmits<{
-  (event: 'change', selected: number): void
-}>()
-
-withDefaults(
-  defineProps<AmountPickerProps>(),
-  {
-    items: () => [],
-    selected: () => 0
-  }
-)
-
-const state = reactive({
-  selected: 0
-})
-
-const onGridItemClick = (index: number) => {
-  state.selected = index
-  emit('change', state.selected)
-}
-</script>
-
-<style lang="scss">
-.amount-picker {
-  padding: 14px 0 14px 14px;
-  .nut-grid-item__content {
-    border: solid 2px 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,
-          linear-gradient(to bottom, #efd082, #ffb877) border-box;
-      }
-    }
-  }
-  h4.token-line {
-    background-image: url("https://cdn.ddjf.com/static/images/appkit/yundou.png");
-    background-size: 20px;
-    background-repeat: no-repeat;
-    background-position: left center;
-    padding-left: 24px;
-    color: #FD6701;
-    font-weight: 600;
-    line-height: 25px;
-    font-size: 18px;
-  }
-  h5 {
-    line-height: 18px;
-    color: #353535;
-    font-weight: 600;
-    opacity: 0.6;
-    margin-top: 4px;
-    font-size: 12px;
-  }
-}
+<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">
+      <h4 class="token-line number">{{ amount.token }}</h4>
+      <h5>¥<span class="number">{{ amount.amount }}</span></h5>
+    </nut-grid-item>
+  </nut-grid>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+// 充值金额选取
+
+type Amount = {
+  token: number,
+  amount: number
+}
+
+interface AmountPickerProps {
+  items: Amount[],
+  selected?: number
+}
+
+const emit = defineEmits<{
+  (event: 'change', selected: number): void
+}>()
+
+withDefaults(
+  defineProps<AmountPickerProps>(),
+  {
+    items: () => [],
+    selected: () => 0
+  }
+)
+
+const state = reactive({
+  selected: 0
+})
+
+const onGridItemClick = (index: number) => {
+  state.selected = index
+  emit('change', state.selected)
+}
+</script>
+
+<style lang="scss">
+.amount-picker {
+  padding: 14px 0 14px 14px;
+  .nut-grid-item__content {
+    border: solid 2px 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,
+          linear-gradient(to bottom, #efd082, #ffb877) border-box;
+      }
+    }
+  }
+  h4.token-line {
+    background-image: url("https://cdn.ddjf.com/static/images/appkit/yundou.png");
+    background-size: 20px;
+    background-repeat: no-repeat;
+    background-position: left center;
+    padding-left: 24px;
+    color: #FD6701;
+    font-weight: 600;
+    line-height: 25px;
+    font-size: 18px;
+  }
+  h5 {
+    line-height: 18px;
+    color: #353535;
+    font-weight: 600;
+    opacity: 0.6;
+    margin-top: 4px;
+    font-size: 12px;
+  }
+}
 </style>

package/src/payment/components/RechargeResult.vue

@@ -1,55 +1,67 @@
-<template>
-  <div class="recharge-result">
-    <div class="content">
-      <div class="figure"></div>
-      <h2>充值成功</h2>
-      <div class="caption">云豆将在5分钟之内到账</div>
-      <nut-button class="back-button" type="default" @click="onBackClick">返回</nut-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const emit = defineEmits(['dismiss'])
-
-function onBackClick () {
-  emit('dismiss')
-}
-
-</script>
-
-<style lang="scss">
-.recharge-result {
-  background-color: #fff;
-  height: 100vh;
-  padding-top: 120px;
-  box-sizing: border-box;
-  .content {
-    display: flex;
-    width: 100%;
-    height: fit-content;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  h2 {
-    font-size: 16px;
-    font-weight: bold;
-    margin-top: 20px;
-  }
-  .caption {
-    color: #353535;
-    opacity: 0.5;
-    margin-top: 8px;
-  }
-  .figure {
-    width: 100px;
-    height: 100px;
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01MC41IDEwQzcyLjg2NzUgMTAgOTEgMjcuOTA4NiA5MSA1MEM5MSA3Mi4wOTE0IDcyLjg2NzUgOTAgNTAuNSA5MEMyOC4xMzI1IDkwIDEwIDcyLjA5MTQgMTAgNTBDMTAgMjcuOTA4NiAyOC4xMzI1IDEwIDUwLjUgMTBaIiBmaWxsPSIjOUFFMkNEIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTAuNSAxOEM2OS4wMDE1IDE4IDg0IDMyLjU1MDggODQgNTAuNUM4NCA2OC40NDkyIDY5LjAwMTUgODMgNTAuNSA4M0MzMS45OTg1IDgzIDE3IDY4LjQ0OTIgMTcgNTAuNUMxNyAzMi41NTA4IDMxLjk5ODUgMTggNTAuNSAxOFoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTM3IDQ5LjVMNDcgNjBMNjcgMzkiIHN0cm9rZT0iIzNEQ0E5RCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE5LjEyMDQgMTYuMjkxOUw3Ljk5ODg0IDEyLjczMjFMMTUuOTI5NCA1LjA1ODk3TDE5LjEyMDQgMTYuMjkxOVoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTEyLjgzNCAyMy40NjQyTDguNTQ2MzEgMjcuNTc3OEw3LjEyNzY1IDIxLjgwNzhMMTIuODM0IDIzLjQ2NDJaIiBmaWxsPSIjQ0FGQUVDIi8+Cjwvc3ZnPgo=");
-  }
-  .back-button {
-    margin-top: 40px;
-    width: 128px;
-  }
-}
+<template>
+  <div class="recharge-result">
+    <div class="content">
+      <div class="figure"></div>
+      <h2>{{views[type][0]}}成功</h2>
+      <div class="caption">{{views[type][1]}}将在1分钟之内到账</div>
+      <nut-button class="back-button" type="default" @click="onBackClick">返回</nut-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(['dismiss'])
+
+type viewProps = {
+  type: string;
+};
+const props = withDefaults(defineProps<viewProps>(), {
+  type: "recharge",
+});
+
+const views = {
+  recharge: ['充值', '云豆'],
+  trade: ['购买', '权益']
+}
+
+function onBackClick () {
+  emit('dismiss')
+}
+
+</script>
+
+<style lang="scss">
+.recharge-result {
+  background-color: #fff;
+  height: 100vh;
+  padding-top: 120px;
+  box-sizing: border-box;
+  .content {
+    display: flex;
+    width: 100%;
+    height: fit-content;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  h2 {
+    font-size: 16px;
+    font-weight: bold;
+    margin-top: 20px;
+  }
+  .caption {
+    color: #353535;
+    opacity: 0.5;
+    margin-top: 8px;
+  }
+  .figure {
+    width: 100px;
+    height: 100px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01MC41IDEwQzcyLjg2NzUgMTAgOTEgMjcuOTA4NiA5MSA1MEM5MSA3Mi4wOTE0IDcyLjg2NzUgOTAgNTAuNSA5MEMyOC4xMzI1IDkwIDEwIDcyLjA5MTQgMTAgNTBDMTAgMjcuOTA4NiAyOC4xMzI1IDEwIDUwLjUgMTBaIiBmaWxsPSIjOUFFMkNEIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTAuNSAxOEM2OS4wMDE1IDE4IDg0IDMyLjU1MDggODQgNTAuNUM4NCA2OC40NDkyIDY5LjAwMTUgODMgNTAuNSA4M0MzMS45OTg1IDgzIDE3IDY4LjQ0OTIgMTcgNTAuNUMxNyAzMi41NTA4IDMxLjk5ODUgMTggNTAuNSAxOFoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTM3IDQ5LjVMNDcgNjBMNjcgMzkiIHN0cm9rZT0iIzNEQ0E5RCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE5LjEyMDQgMTYuMjkxOUw3Ljk5ODg0IDEyLjczMjFMMTUuOTI5NCA1LjA1ODk3TDE5LjEyMDQgMTYuMjkxOVoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTEyLjgzNCAyMy40NjQyTDguNTQ2MzEgMjcuNTc3OEw3LjEyNzY1IDIxLjgwNzhMMTIuODM0IDIzLjQ2NDJaIiBmaWxsPSIjQ0FGQUVDIi8+Cjwvc3ZnPgo=");
+  }
+  .back-button {
+    margin-top: 40px;
+    width: 128px;
+  }
+}
 </style>

package/src/payment/components/RechargeView.vue

@@ -1,154 +1,154 @@
-<template>
-  <view class="view recharge-view">
-    <view class="flex-grow">
-      <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>
-      </view>
-      <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'
-
-// 充值用户界面
-// 配置了必须的属性后
-// 自动获取支付套餐包列表
-// 并发起微信支付
-export interface RechargeViewProps {
-  /**
-   * 应用
-   **/
-  app: string,
-  /**
-   * 充值场景
-   */
-  // stage?: string, // 这个参数暂时不用
-  /**
-   * 租户
-   */
-  tenant: string
-}
-
-const props = defineProps<RechargeViewProps>()
-
-const emit = defineEmits<{
-  (event: 'complete', value: boolean): void
-}>()
-
-const state = reactive({
-  agreed: false,
-  selected: 0,
-  agreementOpen: false,
-  buttonLoading: false,
-})
-
-const amounts = ref<any[]>([])
-
-const onAgreementLinkClick = ($event) => {
-  state.agreementOpen = true
-}
-
-const onAmountSelect = (selected: number) => {
-  state.selected = selected
-}
-
-onMounted(() => {
-  const $http = useHttp()
-  $http.get<any[]>(endpoints.获取充值金额列表, {
-    app: props.app,
-    // stage: 'aiApproveRecharge', // 支付场景
-    tenant: props.tenant
-  }).then(response => {
-    amounts.value = response
-  })
-})
-
-const onPayClick = () => {
-  if (!state.agreed) {
-    Taro.showToast({
-      title: '请勾选《大道云平台云豆充值协议》',
-      icon: 'none',
-    })
-    return false
-  }
-  state.buttonLoading = true
-  wx.login({
-    success ({code}: {code: string}) {
-      requestPayment({
-        amount: amounts.value[state.selected].amount,
-        app: props.app, // 'crm',
-        tenant: props.tenant, // '17454646',
-        user: code
-      }).then(result => {
-        state.buttonLoading = false
-        if (result) {
-          emit('complete', true)
-        }
-      })
-    }
-  })
-}
-</script>
-
-<style lang="scss">
-.recharge-view {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .flex-grow {
-    flex-grow: 1;
-  }
-  .amount-footer {
-    padding: 10px;
-    padding-bottom: 20px;
-    .agreement {
-      font-size: 12px;
-      display: flex;
-      justify-content: center;
-      align-items: cebter;
-      height: 40px;
-    }
-    .recharge-button {
-      background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
-      color: #353535;
-      margin: 12px 0;
-      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;
-    }
-  }
-}
-</style>
+<template>
+  <view class="view recharge-view">
+    <view class="flex-grow">
+      <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>
+      </view>
+      <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'
+
+// 充值用户界面
+// 配置了必须的属性后
+// 自动获取支付套餐包列表
+// 并发起微信支付
+export interface RechargeViewProps {
+  /**
+   * 应用
+   **/
+  app: string,
+  /**
+   * 充值场景
+   */
+  // stage?: string, // 这个参数暂时不用
+  /**
+   * 租户
+   */
+  tenant: string
+}
+
+const props = defineProps<RechargeViewProps>()
+
+const emit = defineEmits<{
+  (event: 'complete', value: boolean): void
+}>()
+
+const state = reactive({
+  agreed: false,
+  selected: 0,
+  agreementOpen: false,
+  buttonLoading: false,
+})
+
+const amounts = ref<any[]>([])
+
+const onAgreementLinkClick = ($event) => {
+  state.agreementOpen = true
+}
+
+const onAmountSelect = (selected: number) => {
+  state.selected = selected
+}
+
+onMounted(() => {
+  const $http = useHttp()
+  $http.get<any[]>(endpoints.获取充值金额列表, {
+    app: props.app,
+    // stage: 'aiApproveRecharge', // 支付场景
+    tenant: props.tenant
+  }).then(response => {
+    amounts.value = response
+  })
+})
+
+const onPayClick = () => {
+  if (!state.agreed) {
+    Taro.showToast({
+      title: '请勾选《大道云平台云豆充值协议》',
+      icon: 'none',
+    })
+    return false
+  }
+  state.buttonLoading = true
+  wx.login({
+    success ({code}: {code: string}) {
+      requestPayment({
+        amount: amounts.value[state.selected].amount,
+        app: props.app, // 'crm',
+        tenant: props.tenant, // '17454646',
+        user: code
+      }).then(result => {
+        state.buttonLoading = false
+        if (result) {
+          emit('complete', true)
+        }
+      })
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.recharge-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .amount-footer {
+    padding: 10px;
+    padding-bottom: 20px;
+    .agreement {
+      font-size: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: cebter;
+      height: 40px;
+    }
+    .recharge-button {
+      background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
+      color: #353535;
+      margin: 12px 0;
+      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;
+    }
+  }
+}
+</style>