11 changed files with 280 additions and 146 deletions
@ -0,0 +1,3 @@ |
|||
import http from './index.js'; |
|||
import {SERVER_API_URL} from "@/config"; |
|||
export const listChargePackage = () => http.get(`/shop/charge-package`) |
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<view class="bg-gray-light min-height p-20"> |
|||
<view class="rounded"> |
|||
<view class="p-50 rounded-top bg text-white flex flex-col justify-center items-center"> |
|||
<text class="text-25">当前余额</text> |
|||
<text class="mt-30 text-40 font-bold">¥{{ userInfo.balance }}</text> |
|||
</view> |
|||
<view class="font-bold py-20 border-bottom">充值套餐</view> |
|||
<view class="flex justify-start items-start flex-wrap"> |
|||
<view v-for="(item, index) in chargePackageList" :key="index" class="w-50p"> |
|||
<view :class="[packageId === item.id ? 'selected' : '']" |
|||
@click="packageId = item.id" |
|||
class="border rounded mr-10 mb-10 flex flex-col justify-center items-center p-20"> |
|||
<text class="font-bold text-35">{{ item.amount }}元</text> |
|||
<text v-if="item.sendAmount && item.sendAmount > 0" class="text-25">送{{ item.sendAmount }}元</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="mt-20"> |
|||
<uv-button :disabled="!packageId" type="primary" shape="circle" @click="doCharge">立即充值</uv-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import {ref} from 'vue' |
|||
import {getUser} from "@/api/user"; |
|||
import {listChargePackage} from "@/api/chargePackage"; |
|||
import {toast} from "@/uni_modules/uv-ui-tools/libs/function"; |
|||
import {newChargeOrderReq} from "@/api/shop"; |
|||
|
|||
const userInfo = ref({}) |
|||
const getUserDetail = async () => { |
|||
const {data} = await getUser() |
|||
userInfo.value = data |
|||
} |
|||
getUserDetail() |
|||
|
|||
const chargePackageList = ref([]) |
|||
const getChargePackageList = async () => { |
|||
const {data} = await listChargePackage() |
|||
chargePackageList.value = data |
|||
} |
|||
getChargePackageList() |
|||
const packageId = ref(0) |
|||
|
|||
const doCharge = async () => { |
|||
uni.showLoading({title: '正在提交'}) |
|||
const {data} = await newChargeOrderReq({ |
|||
type: 3, |
|||
payType: 3, |
|||
chargePackageId: packageId.value, |
|||
}) |
|||
uni.requestPayment({ |
|||
provider: 'alipay', |
|||
orderInfo: data, |
|||
success: async (res) => { |
|||
packageId.value = null |
|||
uni.hideLoading() |
|||
// if (payMethod.value === 'alipay') { |
|||
const rawData = JSON.parse(res.rawdata) |
|||
// console.log(res.errMsg, parseInt(rawData.resultCode), rawData.resultCode) |
|||
if (res.errMsg === 'requestPayment:ok' && parseInt(rawData.resultStatus) === 9000) { |
|||
toast('支付成功') |
|||
await getUserDetail() |
|||
} else { |
|||
toast('支付失败') |
|||
} |
|||
// } |
|||
|
|||
}, |
|||
complete: async (res) => { |
|||
console.log('complete', res) |
|||
uni.hideLoading() |
|||
packageId.value = null |
|||
}, |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg { |
|||
background: url("https://oss.wsdns.cn/20250316/430511e96efe4ecb9f27e10f75d27389.png") 700rpx 220rpx; |
|||
} |
|||
|
|||
.selected { |
|||
border: 1px solid #3c9cff; |
|||
background-color: #f3f8ff; |
|||
color: #007dff; |
|||
} |
|||
</style> |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 3.7 KiB |
Loading…
Reference in new issue