余额充值，支付

uniapp/src/api/app.ts

@@ -1,3 +1,4 @@
+import wechatOa from '@/utils/wechat'
 import request from '@/utils/request'
 
 //发送短信
@@ -24,3 +25,7 @@ export function uploadImage(file: any, token?: string) {
         fileType: 'image'
     })
 }
+
+export function wxJsConfig(data: any) {
+    return request.get({ url: '/wechat/jsConfig', data })
+}

uniapp/src/api/pay.ts

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+//支付方式
+export function getPayWay(data: any) {
+    return request.get({ url: '/pay/payWay', data }, { isAuth: true })
+}
+
+// 预支付
+export function prepay(data: any) {
+    return request.post({ url: '/pay/prepay', data }, { isAuth: true })
+}
+
+// 预支付
+export function getPayResult(data: any) {
+    return request.get({ url: '/pay/payStatus', data }, { isAuth: true })
+}

uniapp/src/api/recharge.ts

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+//充值
+export function recharge(data: any) {
+    return request.post({ url: '/recharge/placeOrder', data }, { isAuth: true })
+}
+
+//充值记录
+export function rechargeRecord(data: any) {
+    return request.get({ url: '/recharge/record', data }, { isAuth: true })
+}
+
+// 充值配置
+export function rechargeConfig() {
+    return request.get({ url: '/recharge/config' }, { isAuth: true })
+}

uniapp/src/api/user.ts

@@ -41,3 +41,8 @@ export function oaAuthBind(data: any) {
 export function updateUser(data: Record<string, any>, header: any) {
     return request.post({ url: '/user/updateUser', data, header })
 }
+
+//余额明细
+export function accountLog(data: any) {
+    return request.get({ url: '/logs/userMoney', data })
+}

uniapp/src/components/page-status/page-status.vue

@@ -0,0 +1,62 @@
+<template>
+    <view
+        class="page-status"
+        v-if="status !== PageStatusEnum['NORMAL']"
+        :class="{ 'page-status--fixed': fixed }"
+    >
+        <!-- Loading -->
+        <template v-if="status === PageStatusEnum['LOADING']">
+            <slot name="loading">
+                <u-loading :size="60" mode="flower" />
+            </slot>
+        </template>
+        <!-- Error -->
+        <template v-if="status === PageStatusEnum['ERROR']">
+            <slot name="error"></slot>
+        </template>
+        <!-- Empty -->
+        <template v-if="status === PageStatusEnum['EMPTY']">
+            <slot name="empty"></slot>
+        </template>
+    </view>
+    <template v-else>
+        <slot> </slot>
+    </template>
+</template>
+
+<script lang="ts" setup>
+import { PageStatusEnum } from '@/enums/appEnums'
+
+const props = defineProps({
+    status: {
+        type: String,
+        default: PageStatusEnum['LOADING']
+    },
+    fixed: {
+        type: Boolean,
+        default: true
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.page-status {
+    height: 100%;
+    width: 100%;
+    min-height: 100%;
+    padding: 0;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffffff;
+    &--fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 900;
+    }
+}
+</style>

uniapp/src/components/payment/payment.vue

@@ -0,0 +1,330 @@
+<template>
+    <u-popup
+        v-model="showPay"
+        mode="bottom"
+        safe-area-inset-bottom
+        :mask-close-able="false"
+        border-radius="14"
+        closeable
+        @close="handleClose"
+    >
+        <view class="h-[900rpx]">
+            <page-status :status="popupStatus" :fixed="false">
+                <template #error>
+                    <u-empty text="订单信息错误，无法查询到订单信息" mode="order"></u-empty>
+                </template>
+                <template #default>
+                    <view class="payment h-full w-full flex flex-col">
+                        <view class="header py-[50rpx] flex flex-col items-center">
+                            <price
+                                :content="payData.orderAmount"
+                                mainSize="44rpx"
+                                minorSize="40rpx"
+                                fontWeight="500"
+                                color="#333"
+                            ></price>
+                        </view>
+                        <view class="main flex-1 mx-[20rpx]">
+                            <view>
+                                <view class="payway-lists">
+                                    <u-radio-group v-model="payWay" class="w-full">
+                                        <view
+                                            class="p-[20rpx] flex items-center w-full payway-item"
+                                            v-for="(item, index) in payData.list"
+                                            :key="index"
+                                            @click="selectPayWay(item.id)"
+                                        >
+                                            <u-icon
+                                                class="flex-none"
+                                                :size="48"
+                                                :name="item.icon"
+                                            ></u-icon>
+                                            <view class="mx-[16rpx] flex-1">
+                                                <view class="payway-item--name flex-1">
+                                                    {{ item.name }}
+                                                </view>
+                                                <view class="text-muted text-xs">{{
+                                                    item.extra
+                                                }}</view>
+                                            </view>
+
+                                            <u-radio class="mr-[-20rpx]" :name="item.id"> </u-radio>
+                                        </view>
+                                    </u-radio-group>
+                                </view>
+                            </view>
+                        </view>
+
+                        <view class="submit-btn p-[20rpx]">
+                            <u-button
+                                @click="handlePay"
+                                shape="circle"
+                                type="primary"
+                                :loading="isLock"
+                            >
+                                立即支付
+                            </u-button>
+                        </view>
+                    </view>
+                </template>
+            </page-status>
+        </view>
+    </u-popup>
+
+    <u-popup
+        class="pay-popup"
+        v-model="showCheckPay"
+        round
+        mode="center"
+        borderRadius="10"
+        :maskCloseAble="false"
+    >
+        <view class="content bg-white w-[560rpx] p-[40rpx]">
+            <view class="text-2xl font-medium text-center"> 支付确认 </view>
+            <view class="pt-[30rpx] pb-[40rpx]">
+                <view> 请在微信内完成支付，如果您已支付成功，请点击`已完成支付`按钮 </view>
+            </view>
+            <view class="flex justify-between">
+                <view class="w-[48%]">
+                    <u-button
+                        shape="circle"
+                        type="primary"
+                        plain
+                        size="medium"
+                        hover-class="none"
+                        :customStyle="{ width: '100%' }"
+                        @click="queryPayResult(false)"
+                    >
+                        重新支付
+                    </u-button>
+                </view>
+                <view class="w-[48%]">
+                    <u-button
+                        shape="circle"
+                        type="primary"
+                        size="medium"
+                        hover-class="none"
+                        :customStyle="{ width: '100%' }"
+                        @click="queryPayResult()"
+                    >
+                        已完成支付
+                    </u-button>
+                </view>
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<script lang="ts" setup>
+import { pay, PayWayEnum } from '@/utils/pay'
+import { getPayWay, prepay, getPayResult } from '@/api/pay'
+import { computed, ref, watch } from 'vue'
+import { useLockFn } from '@/hooks/useLockFn'
+import { series } from '@/utils/util'
+import { ClientEnum, PageStatusEnum, PayStatusEnum } from '@/enums/appEnums'
+import { useUserStore } from '@/stores/user'
+import { client } from '@/utils/client'
+import { onShow } from '@dcloudio/uni-app'
+/*
+页面参数 orderId：订单id，from：订单来源
+*/
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        required: true
+    },
+    showCheck: {
+        type: Boolean
+    },
+    // 订单id
+    orderId: {
+        type: Number,
+        required: true
+    },
+    //订单来源
+    from: {
+        type: String,
+        required: true
+    },
+    //h5微信支付回跳路径，一般为拉起支付的页面路径
+    redirect: {
+        type: String
+    }
+})
+
+const emit = defineEmits(['update:showCheck', 'update:show', 'close', 'success', 'fail'])
+
+const payWay = ref()
+const popupStatus = ref(PageStatusEnum.LOADING)
+const payData = ref<any>({
+    orderAmount: '',
+    list: []
+})
+
+const payStatus = ref()
+const showCheckPay = computed({
+    get() {
+        return props.showCheck
+    },
+    set(value) {
+        emit('update:showCheck', value)
+    }
+})
+
+const showPay = computed({
+    get() {
+        return props.show
+    },
+    set(value) {
+        emit('update:show', value)
+    }
+})
+
+const handleClose = () => {
+    showPay.value = false
+    emit('close')
+}
+const getPayData = async () => {
+    popupStatus.value = PageStatusEnum.LOADING
+    try {
+        payData.value = await getPayWay({
+            orderId: props.orderId,
+            from: props.from
+        })
+        popupStatus.value = PageStatusEnum.NORMAL
+        const checkPay =
+            payData.value.list.find((item: any) => item.isDefault) || payData.value.list[0]
+        payWay.value = checkPay?.id
+    } catch (error) {
+        popupStatus.value = PageStatusEnum.ERROR
+    }
+}
+
+const userStore = useUserStore()
+const selectPayWay = (pay: number) => {
+    payWay.value = pay
+}
+const payment = (() => {
+    // 查询是否绑定微信
+    const checkIsBindWx = async () => {
+        if (
+            userStore.userInfo.isBindWechat == 0 &&
+            [ClientEnum.OA_WEIXIN, ClientEnum.MP_WEIXIN].includes(client) &&
+            payWay.value == PayWayEnum.WECHAT
+        ) {
+            const res: any = await uni.showModal({
+                title: '温馨提示',
+                content: '当前账号未绑定微信，无法完成支付',
+                confirmText: '去绑定'
+            })
+            if (res.confirm) {
+                uni.navigateTo({
+                    url: '/pages/user_set/user_set'
+                })
+            }
+            return Promise.reject()
+        }
+    }
+
+    // 调用预支付
+    const prepayTask = async () => {
+        uni.showLoading({
+            title: '正在支付中'
+        })
+        const data = await prepay({
+            orderId: props.orderId,
+            scene: props.from,
+            payWay: payWay.value,
+            redirectUrl: props.redirect
+        })
+
+        return data
+    }
+
+    //拉起支付
+    const payTask = async (data: any) => {
+        try {
+            const res = await pay.payment(payWay.value, data)
+            return res
+        } catch (error) {
+            return Promise.reject(error)
+        }
+    }
+    return series(checkIsBindWx, prepayTask, payTask)
+})()
+const { isLock, lockFn: handlePay } = useLockFn(async () => {
+    try {
+        const res: PayStatusEnum = await payment()
+        handlePayResult(res)
+        uni.hideLoading()
+    } catch (error) {
+        uni.hideLoading()
+        console.log(error)
+    }
+})
+
+const handlePayResult = (status: PayStatusEnum) => {
+    payStatus.value = status
+    switch (status) {
+        case PayStatusEnum.SUCCESS:
+            emit('success')
+            break
+        case PayStatusEnum.FAIL:
+            emit('fail')
+            break
+    }
+}
+
+const queryPayResult = async (confirm = true) => {
+    const res = await getPayResult({
+        orderId: props.orderId,
+        from: props.from
+    })
+
+    if (res.payStatus === 0) {
+        if (confirm == true) {
+            uni.$u.toast('您的订单还未支付，请重新支付')
+        }
+        showPay.value = true
+        handlePayResult(PayStatusEnum.FAIL)
+    } else {
+        if (confirm == false) {
+            uni.$u.toast('您的订单已经支付，请勿重新支付')
+        }
+        handlePayResult(PayStatusEnum.SUCCESS)
+    }
+    showCheckPay.value = false
+}
+
+watch(
+    () => props.show,
+    (value) => {
+        if (value) {
+            if (!props.orderId) {
+                popupStatus.value = PageStatusEnum.ERROR
+                return
+            }
+            getPayData()
+        }
+    },
+    {
+        immediate: true
+    }
+)
+onShow(() => {
+    if (payStatus.value == PayStatusEnum.PENDING) {
+        showPay.value = false
+        showCheckPay.value = true
+    }
+})
+</script>
+
+<style lang="scss">
+.payway-lists {
+    .payway-item {
+        border-bottom: 1px solid;
+        @apply border-page;
+    }
+}
+</style>

uniapp/src/components/price/price.vue

@@ -0,0 +1,126 @@
+<template>
+    <view class="price-container">
+        <view
+            :class="['price-wrap', { 'price-wrap--disabled': lineThrough }]"
+            :style="{ color: color }"
+        >
+            <!-- Prefix -->
+            <view class="fix-pre" :style="{ fontSize: minorSize }">
+                <slot name="prefix">{{ prefix }}</slot>
+            </view>
+
+            <!-- Content -->
+            <view :style="{ 'font-weight': fontWeight }">
+                <!-- Integer -->
+                <text :style="{ fontSize: mainSize }">{{ integer }}</text>
+                <!-- Decimals -->
+                <text :style="{ fontSize: minorSize }">{{ decimals }}</text>
+            </view>
+
+            <!-- Suffix -->
+            <view class="fix-suf" :style="{ fontSize: minorSize }">
+                <slot name="suffix">{{ suffix }}</slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+/**
+ * @description 价格展示，适用于有前后缀，小数样式不一
+ * @property {String|Number} content 价格 (必填项)
+ * @property {Number} prec 小数位 (默认: 2)
+ * @property {Boolean} autoPrec 自动小数位【注：以prec为最大小数位】 (默认: true)
+ * @property {String} color 颜色 (默认: 'unset')
+ * @property {String} mainSize 主要内容字体大小 (默认: 46rpx)
+ * @property {String} minorSize 主要内容字体大小 (默认: 32rpx)
+ * @property {Boolean} lineThrough 贯穿线 (默认: false)
+ * @property {String|Number} fontWeight 字重 (默认: normal)
+ * @property {String} prefix 前缀 (默认: ￥)
+ * @property {String} suffix 后缀
+ * @example <price content="100" suffix="\/元" />
+ */
+import { computed } from 'vue'
+import { formatPrice } from '@/utils/util'
+
+/** Props Start **/
+const props = withDefaults(
+    defineProps<{
+        content: string | number // 标题
+        prec?: number // 小数数量
+        autoPrec?: boolean // 动态小数
+        color?: string // 颜色
+        mainSize?: string // 主要内容字体大小
+        minorSize?: string // 次要内容字体大小
+        lineThrough?: boolean // 贯穿线
+        fontWeight?: string // 字重
+        prefix?: string // 前缀
+        suffix?: string // 后缀
+    }>(),
+    {
+        content: '',
+        prec: 2,
+        autoPrec: true,
+        color: '#FA8919',
+        mainSize: '36rpx',
+        minorSize: '28rpx',
+        lineThrough: false,
+        fontWeight: 'normal',
+        prefix: '￥',
+        suffix: ''
+    }
+)
+/** Props End **/
+
+/** Computed Start **/
+/**
+ * @description 金额主体部分
+ */
+const integer = computed(() => {
+    return formatPrice({
+        price: props.content,
+        take: 'int'
+    })
+})
+/**
+ * @description 金额小数部分
+ */
+const decimals = computed(() => {
+    let decimals = formatPrice({
+        price: props.content,
+        take: 'dec',
+        prec: props.prec
+    })
+    // 小数余十不能是 .10||.20||.30以此类推，
+    decimals = decimals % 10 == 0 ? decimals.substr(0, decimals.length - 1) : decimals
+    return props.autoPrec ? (decimals * 1 ? '.' + decimals : '') : props.prec ? '.' + decimals : ''
+})
+/** Computed End **/
+</script>
+
+<style lang="scss" scoped>
+.price-container {
+    display: inline-block;
+}
+
+.price-wrap {
+    display: flex;
+    align-items: baseline;
+
+    &--disabled {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            display: block;
+            content: '';
+            height: 0.05em;
+            background-color: currentColor;
+        }
+    }
+}
+</style>

uniapp/src/enums/appEnums.ts

@@ -32,3 +32,18 @@ export enum FieldType {
     NICKNAME = 'nickname',
     SEX = 'sex'
 }
+
+// 支付结果
+export enum PayStatusEnum {
+    SUCCESS = 'success',
+    FAIL = 'fail',
+    PENDING = 'pending'
+}
+
+// 页面状态
+export enum PageStatusEnum {
+    LOADING = 'loading', // 加载中
+    NORMAL = 'normal', // 正常
+    ERROR = 'error', // 异常
+    EMPTY = 'empty' // 为空
+}

uniapp/src/packages/pages/recharge/recharge.vue

@@ -0,0 +1,102 @@
+<template>
+    <view class="recharge p-[20rpx]">
+        <view class="bg-white rounded-[14rpx] p-[40rpx]">
+            <view class="text-content">充值金额</view>
+            <view class="border-0 border-b border-solid border-light">
+                <input
+                    v-model="money"
+                    class="text-[60rpx] h-[60rpx] py-[24rpx]"
+                    placeholder="0.00"
+                    type="text"
+                />
+            </view>
+            <view class="mt-[20rpx] text-xs text-muted">
+                当前可用余额
+                <text class="text-primary"> {{ wallet.userMoney }}</text>
+            </view>
+        </view>
+        <view class="mt-[40rpx]">
+            <u-button :loading="isLock" type="primary" shape="circle" @click="rechargeLock">
+                立即充值
+            </u-button>
+        </view>
+        <view class="flex justify-center m-[60rpx]">
+            <navigator url="/packages/pages/recharge_record/recharge_record" hover-class="none">
+                <text class="text-content text-sm">充值记录</text>
+            </navigator>
+        </view>
+        <payment
+            v-model:show="payState.showPay"
+            v-model:show-check="payState.showCheck"
+            :order-id="payState.orderId"
+            :from="payState.from"
+            :redirect="payState.redirect"
+            @success="handlePaySuccess"
+            @fail="handlePayFail"
+        />
+    </view>
+</template>
+<script lang="ts" setup>
+import { recharge, rechargeConfig } from '@/api/recharge'
+import { useLockFn } from '@/hooks/useLockFn'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { reactive, ref } from 'vue'
+const money = ref('')
+
+const payState = reactive({
+    orderId: '',
+    from: 'recharge',
+    showPay: false,
+    showCheck: false,
+    redirect: '/packages/pages/recharge/recharge'
+})
+const wallet = reactive({
+    userMoney: '',
+    minRechargeMoney: 0
+})
+
+const { isLock, lockFn: rechargeLock } = useLockFn(async () => {
+    const minNum = wallet.minRechargeMoney
+    if (!money.value) return uni.$u.toast('请输入充值金额')
+    if (minNum == 0 && Number(money.value) == minNum) {
+        return uni.$u.toast(`充值金额必须大于0`)
+    }
+    if (Number(money.value) < minNum) return uni.$u.toast(`最低充值金额${minNum}`)
+    const data = await recharge({
+        orderAmount: money.value,
+        payWay: 2
+    })
+    payState.orderId = data.orderId
+    payState.showPay = true
+})
+
+const handlePaySuccess = async () => {
+    payState.showPay = false
+    payState.showCheck = false
+
+    uni.navigateTo({
+        url: `/pages/payment_result/payment_result?id=${payState.orderId}&from=${payState.from}`
+    })
+}
+
+// const handlePayFail = async () => {
+//     uni.$u.toast('支付失败')
+// }
+
+const getWallet = async () => {
+    const data = await rechargeConfig()
+    Object.assign(wallet, data)
+}
+
+onLoad((options: any) => {
+    // h5支付用于弹起手动确认支付弹窗
+    // if (options?.checkPay) {
+    //     payState.orderId = options.orderId
+    //     payState.from = options.scene
+    //     payState.showCheck = true
+    // }
+})
+onShow(() => {
+    getWallet()
+})
+</script>

uniapp/src/packages/pages/recharge_record/recharge_record.vue

@@ -0,0 +1,44 @@
+<template>
+    <z-paging
+        ref="paging"
+        v-model="dataList"
+        @query="queryList"
+        :show-loading-more-when-reload="true"
+    >
+        <view class="pt-2.5">
+            <view
+                v-for="item in dataList"
+                :key="item.id"
+                class="bg-white border-solid border-b border-0 border-light px-[26rpx] py-[24rpx]"
+            >
+                <view class="flex justify-between">
+                    <view class="mr-2">{{ item.tips }}</view>
+                    <view class="text-lg text-primary"> +{{ item.orderAmount }} </view>
+                </view>
+                <view class="text-sm text-muted mr-1">{{ item.createTime }}</view>
+            </view>
+        </view>
+    </z-paging>
+</template>
+
+<script lang="ts" setup>
+import { ref, shallowRef } from 'vue'
+import { rechargeRecord } from '@/api/recharge'
+
+const paging = shallowRef()
+const dataList = ref<any[]>([])
+
+const queryList = async (pageNo: number, pageSize: number) => {
+    try {
+        const data = await rechargeRecord({
+            page_no: pageNo,
+            page_size: pageSize
+        })
+        paging.value.complete(data.lists)
+    } catch (error) {
+        paging.value.complete(false)
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

uniapp/src/packages/pages/user_wallet/user_wallet.vue

@@ -0,0 +1,118 @@
+<template>
+    <z-paging
+        ref="paging"
+        v-model="dataList"
+        @query="queryList"
+        :auto="false"
+        @onRefresh="getWallet()"
+        :show-loading-more-when-reload="true"
+    >
+        <view class="user-wallet">
+            <view class="p-[20rpx]">
+                <view
+                    class="bg-primary rounded-[14rpx] flex items-center justify-between pl-[44rpx] py-[54rpx] text-white"
+                >
+                    <view>
+                        <view class="text-sm">钱包余额</view>
+                        <view class="text-[60rpx]">{{ wallet.userMoney }}</view>
+                    </view>
+                    <navigator
+                        v-if="wallet.openRecharge"
+                        url="/packages/pages/recharge/recharge"
+                        hover-class="none"
+                    >
+                        <view class="text-primary px-[30rpx] py-[15rpx] bg-white rounded-l-full">
+                            去充值
+                        </view>
+                    </navigator>
+                </view>
+            </view>
+            <u-tabs
+                :list="tabList"
+                :is-scroll="false"
+                v-model="current"
+                @change="changeType"
+            ></u-tabs>
+
+            <view class="pt-2.5">
+                <view
+                    v-for="item in dataList"
+                    :key="item.id"
+                    class="bg-white border-solid border-b border-0 border-light px-[26rpx] py-[24rpx]"
+                >
+                    <view class="flex justify-between">
+                        <view class="mr-2">{{ item.tips }}</view>
+                        <view
+                            class="text-lg"
+                            :class="{
+                                'text-primary': item.action == 1
+                            }"
+                        >
+                            {{ item.orderAmount }}
+                        </view>
+                    </view>
+                    <view class="text-sm text-muted mr-1">{{ item.createTime }}</view>
+                </view>
+            </view>
+        </view>
+    </z-paging>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref, shallowRef } from 'vue'
+import { accountLog } from '@/api/user'
+import { rechargeConfig } from '@/api/recharge'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+const tabList = ref([
+    {
+        name: '全部',
+        type: 0
+    },
+    {
+        name: '收入',
+        type: 1
+    },
+    {
+        name: '支出',
+        type: 2
+    }
+])
+const paging = shallowRef()
+const dataList = ref<any[]>([])
+const current = ref(0)
+
+const changeType = (index: number) => {
+    current.value = index
+    paging.value.reload()
+}
+
+const queryList = async (pageNo: number, pageSize: number, from: any) => {
+    try {
+        console.log(from)
+        const type = tabList.value[current.value].type
+        const data = await accountLog({
+            type,
+            page_no: pageNo,
+            page_size: pageSize
+        })
+        paging.value.complete(data.lists)
+    } catch (error) {
+        paging.value.complete(false)
+    }
+}
+
+const wallet = ref<any>({})
+const getWallet = async () => {
+    wallet.value = await rechargeConfig()
+}
+onShow(() => {
+    getWallet()
+})
+onLoad(() => {
+    nextTick(() => {
+        paging.value?.reload()
+    })
+})
+</script>
+
+<style lang="scss" scoped></style>

uniapp/src/pages.json

@@ -109,7 +109,14 @@
             "style": {
                 "navigationStyle": "custom"
             }
-        },
+        },
+		{
+		    "path": "pages/payment_result/payment_result",
+		    "style": {
+		        "navigationBarTitleText": "支付结果"
+		    },
+		    "auth": true
+		},
         {
             "path": "uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper",
             "style": {
@@ -117,7 +124,33 @@
                 "navigationBarBackgroundColor": "#000000"
             }
         }
-    ],
+    ],
+	"subPackages": [{
+		"root": "packages",
+		"pages": [
+			{
+				"path": "pages/user_wallet/user_wallet",
+				"style": {
+				    "navigationBarTitleText": "我的钱包"
+				},
+				"auth": true
+			},
+	        {
+				"path": "pages/recharge/recharge",
+				"style": {
+				    "navigationBarTitleText": "充值"
+				},
+				"auth": true
+			},
+	        {
+				"path": "pages/recharge_record/recharge_record",
+				"style": {
+				    "navigationBarTitleText": "充值记录"
+				},
+				"auth": true
+			}
+		]
+	}],
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "商城",

uniapp/src/pages/payment_result/payment_result.vue

@@ -0,0 +1,157 @@
+<template>
+    <!-- 页面状态 -->
+    <page-status :status="status">
+        <template #error>
+            <u-empty text="订单不存在" mode="order"></u-empty>
+        </template>
+        <template #default>
+            <view class="payment-result p-[20rpx]">
+                <view class="result bg-white p-[20rpx] rounded-md">
+                    <view class="flex flex-col items-center my-[40rpx]">
+                        <!-- 支付状态图片 -->
+                        <u-image
+                            class="status-image"
+                            :src="paymentStatus['image']"
+                            width="100"
+                            height="100"
+                            shape="circle"
+                        />
+                        <!-- 支付状态文字 -->
+                        <text class="text-2xl font-medium mt-[20rpx]">{{
+                            paymentStatus['text']
+                        }}</text>
+                        <view class="text-3xl font-medium mt-[20rpx]">
+                            ¥ {{ orderInfo.orderAmount }}
+                        </view>
+                    </view>
+
+                    <!-- 支付信息 -->
+                    <view class="result-info">
+                        <view class="result-info__item">
+                            <text>订单编号</text>
+                            <text>{{ orderInfo.orderSn }}</text>
+                        </view>
+                        <view class="result-info__item">
+                            <text>付款时间</text>
+                            <text>{{ orderInfo.payTime || '-' }}</text>
+                        </view>
+                        <view class="result-info__item">
+                            <text>支付方式</text>
+                            <template v-if="orderInfo.payStatus">
+                                <text>{{ orderInfo.payWay || '-' }}</text>
+                            </template>
+                            <template v-else>
+                                <text>未支付</text>
+                            </template>
+                        </view>
+                    </view>
+                </view>
+                <view class="mt-[40rpx]">
+                    <view class="mb-[20rpx]">
+                        <u-button
+                            v-if="pageOptions.from == 'recharge'"
+                            type="primary"
+                            shape="circle"
+                            hover-class="none"
+                            @click="goOrder"
+                        >
+                            继续充值
+                        </u-button>
+                    </view>
+                    <view class="mb-[20rpx]">
+                        <u-button
+                            type="primary"
+                            plain
+                            shape="circle"
+                            hover-class="none"
+                            @click="goHome"
+                        >
+                            返回首页
+                        </u-button>
+                    </view>
+                </view>
+            </view>
+        </template>
+    </page-status>
+</template>
+
+<script lang="ts" setup>
+import { getPayResult } from '@/api/pay'
+import { PageStatusEnum } from '@/enums/appEnums'
+import { onLoad } from '@dcloudio/uni-app'
+import { computed, reactive, ref } from 'vue'
+const mapStatus = {
+    succeed: {
+        text: '支付成功',
+        image: '/static/images/payment/icon_succeed.png'
+    },
+    waiting: {
+        text: '等待支付',
+        image: '/static/images/payment/icon_waiting.png'
+    }
+}
+const status = ref(PageStatusEnum['LOADING'])
+const pageOptions = ref({
+    id: '',
+    from: ''
+})
+const orderInfo = reactive<any>({
+    order: {}
+})
+const paymentStatus = computed(() => {
+    const status = !!orderInfo.payStatus
+    return mapStatus[status ? 'succeed' : 'waiting']
+})
+
+const initPageData = () => {
+    return new Promise((resolve, reject) => {
+        getPayResult({
+            orderId: pageOptions.value.id,
+            from: pageOptions.value.from
+        })
+            .then((data) => {
+                Object.assign(orderInfo, data)
+                resolve(data)
+            })
+            .catch((err) => {
+                reject(err)
+            })
+    })
+}
+
+const goHome = () => {
+    uni.reLaunch({
+        url: '/pages/index/index'
+    })
+}
+
+const goOrder = () => {
+    switch (pageOptions.value.from) {
+        case 'recharge':
+            uni.navigateBack()
+            break
+    }
+}
+
+onLoad(async (options: any) => {
+    try {
+        if (!options.id) throw new Error('订单不存在')
+        pageOptions.value = options
+        await initPageData()
+        status.value = PageStatusEnum['NORMAL']
+    } catch (err) {
+        console.log(err)
+        status.value = PageStatusEnum['ERROR']
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.result-info {
+    .result-info__item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20rpx;
+    }
+}
+</style>

uniapp/src/pages/user_set/user_set.vue

@@ -145,13 +145,14 @@ const bindWechat = async () => {
         await mnpAuthBind({
             code: code
         })
+
+        uni.$u.toast('绑定成功')
         //#endif
         // #ifdef H5
         if (isWeixin.value) {
             wechatOa.getUrl()
         }
         // #endif
-        uni.$u.toast('绑定成功')
         await userStore.getUser()
         uni.hideLoading()
     } catch (e) {

uniapp/src/router/index.ts

@@ -1,7 +1,12 @@
+import { ClientEnum } from '@/enums/appEnums'
 import { BACK_URL } from '@/enums/cacheEnums'
 import { useUserStore } from '@/stores/user'
 import { getToken } from '@/utils/auth'
 import cache from '@/utils/cache'
+import { client } from '@/utils/client'
+// #ifdef H5
+import wechatOa from '@/utils/wechat'
+// #endif
 import { routes } from './routes'
 
 const whiteList = ['register', 'login', 'forget_pwd']
@@ -41,6 +46,11 @@ export function setupRouter() {
             cache.set(BACK_URL, from.fullPath)
         }
     })
-
+    setTimeout(async () => {
+        if (client == ClientEnum.OA_WEIXIN) {
+            // jssdk配置
+            await wechatOa.config()
+        }
+    })
     // #endif
 }

uniapp/src/uni_modules/vk-uview-ui/components/u-tabs/u-tabs.vue

@@ -183,13 +183,18 @@
 		watch: {
 			// 监听tab的变化，重新计算tab菜单的布局信息，因为实际使用中菜单可能是通过
 			// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息
-			list(n, o) {
-				// list变动时，重制内部索引，否则可能导致超出数组边界的情况
-				if(n.length !== o.length) this.currentIndex = 0;
-				// 用$nextTick等待视图更新完毕后再计算tab的局部信息，否则可能因为tab还没生成就获取，就会有问题
-				this.$nextTick(() => {
-					this.init();
-				});
+			list: {
+				immediate: true,
+				handler(n, o) {
+					if(o) {
+					// list变动时，重制内部索引，否则可能导致超出数组边界的情况
+						if(n.length !== o.length) this.currentIndex = 0;
+						// 用$nextTick等待视图更新完毕后再计算tab的局部信息，否则可能因为tab还没生成就获取，就会有问题
+					}
+					setTimeout(() => {
+						this.init();
+					},200)
+				}
 			},
 			current: {
 				immediate: true,
@@ -290,6 +295,7 @@
 				for (let i = 0; i < this.list.length; i++) {
 					// 只要size和rect两个参数
 					query.select(`#u-tab-item-${i}`).fields({
+						id: true,
 						size: true,
 						rect: true
 					});
@@ -319,6 +325,7 @@
 				let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
 				// 计算当前活跃item到组件左边的距离
 				this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2;
+				
 				// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
 				// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
 				if(this.barFirstTimeMove == true) {

uniapp/src/utils/client.ts

@@ -43,7 +43,7 @@ export const getClient = () => {
 
 // 根据端处理事件
 //@ts-ignore
-export const handleClientEvent = ({ MP_WEIXIN, OA_WEIXIN, H5, IOS, ANDROID, OTHER }) => {
+export const handleClientEvent = ({ MP_WEIXIN, OA_WEIXIN, H5, IOS, ANDROID, OTHER }: any) => {
     // #ifdef MP-WEIXIN
     return MP_WEIXIN()
     // #endif

uniapp/src/utils/pay/index.ts

@@ -0,0 +1,14 @@
+import { Pay } from './pay'
+import { Wechat } from './wechat'
+
+// 支付方式
+enum PayWayEnum {
+    BALANCE = 1,
+    WECHAT = 2,
+    ALIPAY = 3
+}
+const wechat = new Wechat()
+// 注入微信支付
+Pay.inject(PayWayEnum[2], wechat)
+const pay = new Pay()
+export { pay, PayWayEnum }

uniapp/src/utils/pay/pay.ts

@@ -0,0 +1,28 @@
+import { PayWayEnum } from '.'
+
+export class Pay {
+    private static modules = new Map()
+    static inject(name: string, module: any) {
+        this.modules.set(name, module)
+    }
+    constructor() {
+        //动态注入支付方式
+        for (const [name, module] of Pay.modules.entries()) {
+            module.init(name, this)
+        }
+    }
+
+    //调用支付
+    async payment(payWay: PayWayEnum, options: any) {
+        try {
+            //@ts-ignore
+            const module = this[PayWayEnum[payWay]]
+            if (!module) {
+                throw new Error(`can not find pay way ${payWay}`)
+            }
+            return await module.run(options)
+        } catch (error) {
+            return Promise.reject(error)
+        }
+    }
+}

uniapp/src/utils/pay/wechat.ts

@@ -0,0 +1,58 @@
+import { PayStatusEnum } from '@/enums/appEnums'
+import { handleClientEvent } from '../client'
+//#ifdef H5
+import wechatOa from '../wechat'
+//#endif
+export class Wechat {
+    init(name: string, pay: any) {
+        pay[name] = this
+    }
+
+    async run(options: any) {
+        try {
+            const res = await handleClientEvent({
+                MP_WEIXIN: () => {
+                    return new Promise((resolve) => {
+                        console.log(options)
+                        uni.requestPayment({
+                            orderInfo: '',
+                            provider: 'wxpay',
+                            timeStamp: options.timeStamp,
+                            nonceStr: options.nonceStr,
+                            package: options.packageValue,
+                            paySign: options.paySign,
+                            signType: options.signType,
+                            success() {
+                                resolve(PayStatusEnum.SUCCESS)
+                            },
+                            fail() {
+                                resolve(PayStatusEnum.FAIL)
+                            }
+                        })
+                    })
+                },
+                OA_WEIXIN: () => {
+                    return new Promise((resolve) => {
+                        wechatOa
+                            .pay(options)
+                            .then(() => {
+                                resolve(PayStatusEnum.SUCCESS)
+                            })
+                            .catch(() => {
+                                resolve(PayStatusEnum.FAIL)
+                            })
+                    })
+                },
+                H5: () => {
+                    return new Promise((resolve) => {
+                        window.open(options.url, '_self')
+                        resolve(PayStatusEnum.PENDING)
+                    })
+                }
+            })
+            return res
+        } catch (error) {
+            return Promise.reject(error)
+        }
+    }
+}

uniapp/src/utils/util.ts

@@ -94,6 +94,33 @@ export function objectToQuery(params: Record<string, any>): string {
     return query.slice(0, -1)
 }
 
+/**
+ * @description 格式化输出价格
+ * @param  { string } price 价格
+ * @param  { string } take 小数点操作
+ * @param  { string } prec 小数位补
+ */
+export function formatPrice({ price, take = 'all', prec = undefined }: any) {
+    let [integer, decimals = ''] = (price + '').split('.')
+
+    // 小数位补
+    if (prec !== undefined) {
+        const LEN = decimals.length
+        for (let i = prec - LEN; i > 0; --i) decimals += '0'
+        decimals = decimals.substr(0, prec)
+    }
+
+    switch (take) {
+        case 'int':
+            return integer
+        case 'dec':
+            return decimals
+        case 'all':
+            return integer + '.' + decimals
+    }
+}
+
+
 /**
  * @description 组合异步任务
  * @param  { string } task 异步任务

uniapp/src/utils/wechat.ts

@@ -1,7 +1,7 @@
 import weixin from 'weixin-js-sdk'
 import { getWxCodeUrl, OALogin } from '@/api/account'
-import { useUserStore } from '@/stores/user'
 import { isAndroid } from './client'
+import { wxJsConfig } from '@/api/app'
 
 const wechatOa = {
     getSignLink() {
@@ -15,6 +15,27 @@ const wechatOa = {
             location.href = res.url
         })
     },
+    config() {
+        return new Promise((resolve, reject) => {
+            wxJsConfig({
+                url: this.getSignLink()
+            }).then((res) => {
+                weixin.config({
+                    appId: res.appid, // 必填，公众号的唯一标识
+                    timestamp: res.timestamp, // 必填，生成签名的时间戳
+                    nonceStr: res.nonceStr, // 必填，生成签名的随机串
+                    signature: res.signature, // 必填，签名
+                    jsApiList: res.jsApiList,
+                    success: () => {
+                        resolve('success')
+                    },
+                    fail: (res: any) => {
+                        reject('weixin config is fail')
+                    }
+                })
+            })
+        })
+    },
     authLogin(code: string) {
         return new Promise((resolve, reject) => {
             OALogin({
@@ -35,6 +56,36 @@ const wechatOa = {
             })
         })
     },
+    pay(options: Record<any, any>) {
+        return new Promise((resolve, reject) => {
+            this.ready()
+                .then(() => {
+                    weixin.chooseWXPay({
+                        timestamp: options.timeStamp,
+                        nonceStr: options.nonceStr,
+                        package: options.packageValue,
+                        signType: options.signType,
+                        paySign: options.paySign,
+                        success: (res: any) => {
+                            if (res.errMsg === 'chooseWXPay:ok') {
+                                resolve(res)
+                            } else {
+                                reject(res.errMsg)
+                            }
+                        },
+                        cancel: (res: any) => {
+                            reject(res)
+                        },
+                        fail: (res: any) => {
+                            reject(res)
+                        }
+                    })
+                })
+                .catch((err) => {
+                    reject(err)
+                })
+        })
+    },
     share(options: Record<any, any>) {
         this.ready().then(() => {
             const { shareTitle, shareLink, shareImage, shareDesc } = options
@@ -91,24 +142,3 @@ const wechatOa = {
 }
 
 export default wechatOa
-// export function wxOaConfig() {
-//     return new Promise((resolve, reject) => {
-//         apiJsConfig().then((res) => {
-//             console.log(res) //微信配置
-//             weixin.config({
-//                 debug: false, // 开启调试模式
-//                 appId: res.appId, // 必填，公众号的唯一标识
-//                 timestamp: res.timestamp, // 必填，生成签名的时间戳
-//                 nonceStr: res.nonceStr, // 必填，生成签名的随机串
-//                 signature: res.signature, // 必填，签名
-//                 jsApiList: res.jsApiList, // 必填，需要使用的JS接口列表
-//                 success: () => {
-//                     resolve('success')
-//                 },
-//                 fail: (res: any) => {
-//                     reject('weixin config is fail')
-//                 }
-//             })
-//         })
-//     })
-// }

uniapp/tsconfig.json

@@ -17,5 +17,12 @@
             "@/*": ["./src/*"]
         }
     },
-    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "typings/**/*.d.ts"]
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue",
+        "typings/**/*.d.ts",
+        "../admin/src/api/finance.ts"
+    ]
 }