添加茶室充值页面
This commit is contained in:
wangxiaowei
@ -59,3 +59,10 @@ export interface IRefundParams {
|
|||||||
export function refund(data: IRefundParams) {
|
export function refund(data: IRefundParams) {
|
||||||
return http.Post<any>('/api/pay/refund', data)
|
return http.Post<any>('/api/pay/refund', data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 充值活动创建顶订单
|
||||||
|
*/
|
||||||
|
export function createRechargeOrder(data: {id: number}) {
|
||||||
|
return http.Post<any>('/api/order/addRechargeOrder', data)
|
||||||
|
}
|
||||||
|
|||||||
@ -11,152 +11,105 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="bg">
|
<view class="bg">
|
||||||
<view>
|
<view>
|
||||||
<navbar title="充值" custom-class='!bg-[#F6F7F8]'></navbar>
|
<navbar title="门店充值" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="mt-24rpx mx-30rpx">
|
<view class="mt-24rpx text-center font-400 text-30rpx leading-42rpx text-[#303133]" v-if="rechargeList.length == 0">
|
||||||
|
当前门店暂无充值活动
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="mt-24rpx mx-30rpx" v-if="rechargeList.length > 0">
|
||||||
<view class="ml-70rpx flex items-center">
|
<view class="ml-70rpx flex items-center">
|
||||||
<view class="mr-72rpx font-400 text-30rpx leading-42rpx text-[#303133]">
|
<view class="font-400 text-30rpx leading-42rpx text-[#303133]">
|
||||||
转入方式
|
充值活动
|
||||||
</view>
|
|
||||||
<view class="flex items-center">
|
|
||||||
<view class="flex items-center mr-20rpx">
|
|
||||||
<wd-img width="50rpx" height="50rpx" :src="`${OSS}icon/icon_weichat.png`"></wd-img>
|
|
||||||
</view>
|
|
||||||
<view class="font-bold text-32rpx leading-44rpx text-[#303133]">微信</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="bg-white rounded-16rpx px-38rpx py-28rpx mt-28rpx">
|
<view class="mt-32rpx recharge-radio" >
|
||||||
<view class="font-400 text-28rpx leading-40rpx text-[#303133]">
|
<wd-radio-group v-model="rechargeValue">
|
||||||
转入方式
|
<view
|
||||||
</view>
|
class="bg-white rounded-16rpx mt-20rpx px-30rpx py-28rpx flex items-center justify-between border border-2rpx border-solid border-[#FFF]"
|
||||||
<view class="flex items-center">
|
:class="{acitve: item.id === rechargeValue }"
|
||||||
<view class="font-400 text-36rpx leading-50rpx text-[#303133] mr-20rpx mt-40rpx">￥</view>
|
v-for="item in rechargeList" :key="item.id"
|
||||||
<view class="mt-44rpx">
|
@click="rechargeValue = item.id">
|
||||||
<wd-input type="text" v-model="rechargeMoney" placeholder="请输入金额" no-border custom-input-class="!h-80rpx !text-48rpx !leading-66rpx" >
|
<view class="text-28rpx text-[#606266] leading-40rpx flex items-center">
|
||||||
</wd-input>
|
<view class="text-36rpx leading-50rpx text-[#121212] mr-24rpx">充{{ item.price }}</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="w-44rpx h-44rpx rounded-44rpx bg-[#FF5951] text-[#fff] text-30rpx text-center leading-44rpx mr-18rpx">送</view>
|
||||||
|
<view class="font-bold text-32rpx leading-40rpx text-[#FF5951]">{{ item.gift_price }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-radio :value="item.id" checked-color="#4C9F44" size='large' shape="dot"></wd-radio>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</wd-radio-group>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 推广方式 -->
|
|
||||||
<!-- <view class="mt-60rpx">
|
|
||||||
<view class="mx-30rpx text-32rpx leading-44rpx text-[#303133]">
|
|
||||||
<text class="mr-12rpx">推广方式</text>
|
|
||||||
<text class="text-26rpx leading-36rpx text-[#909399]">(选填)</text>
|
|
||||||
</view>
|
|
||||||
<view class="bg-white rounded-16rpx py-26rpx mt-28rpx pay-tabs">
|
|
||||||
<wd-tabs v-model="tab" swipeable slidable="always">
|
|
||||||
<wd-tab title="门店">
|
|
||||||
<view>
|
|
||||||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
|
||||||
</view>
|
|
||||||
<view class="mx-30rpx mt-34rpx flex items-center">
|
|
||||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">门店推广</view>
|
|
||||||
<view class="bg-[#F8F9FA] px-28rpx p-20rpx text-30rpx text-[#C9C9C9] h-80rpx rounded-8rpx flex items-center flex-1" @click="showStorePopup = true">
|
|
||||||
<text class="mr-14rpx">请选择门店</text>
|
|
||||||
<wd-icon name="arrow-down" size="22rpx"></wd-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</wd-tab>
|
|
||||||
<wd-tab title="茶艺师">
|
|
||||||
<view>
|
|
||||||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
|
||||||
</view>
|
|
||||||
<view class="mx-30rpx mt-34rpx flex items-center">
|
|
||||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">茶艺师推广</view>
|
|
||||||
<view class="flex items-center flex-1">
|
|
||||||
<wd-input type="text" v-model="person" no-border custom-class="!bg-[#F6F7F8] !rounded-8rpx w-full" custom-input-class="!px-32rpx !h-80rpx">
|
|
||||||
</wd-input>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</wd-tab>
|
|
||||||
</wd-tabs>
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<view class="fixed left-0 right-0 bottom-92rpx z-2 bg-[#4C9F44] text-[#fff] flex justify-center items-center h-90rpx rounded-8rpx mx-60rpx" @click="buy.handleRecharge">
|
<view class="fixed left-0 right-0 bottom-92rpx z-2 bg-[#4C9F44] text-[#fff] flex justify-center items-center h-90rpx rounded-8rpx mx-60rpx" @click="Recharge.handleRecharge">
|
||||||
确定转入
|
充值
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 推广方式 -->
|
|
||||||
<wd-popup v-model="showStorePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
|
||||||
<view class="relative">
|
|
||||||
<view class="absolute top-18rpx right-30rpx" @click="showStorePopup = false">
|
|
||||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
|
||||||
</view>
|
|
||||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">推广方式 </view>
|
|
||||||
<scroll-view scroll-y class="h-500rpx pb-20rpx">
|
|
||||||
<view class="mx-56rpx" v-for="(item, index) in 5" :key="index">
|
|
||||||
<view class="flex items-center justify-between mb-66rpx" @click="buy.handleChooseStore(item)">
|
|
||||||
<view class="mr-32rpx">
|
|
||||||
<wd-img width="80rpx" height='80rpx' :src="`${OSS}icon/icon_location3.png`"></wd-img>
|
|
||||||
</view>
|
|
||||||
<view class="flex-1">
|
|
||||||
<view>这是茶馆名字</view>
|
|
||||||
<view class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
|
|
||||||
<view>距您5.3km</view>
|
|
||||||
<view>
|
|
||||||
<wd-divider vertical />
|
|
||||||
</view>
|
|
||||||
<view class="w-350rpx line-1">北京市海淀区宏福苑西区20号楼2单元30</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PayList, PayCategory, PayValue, PayOrderType, PayOrderSource } from '@/utils/pay'
|
import { PayList, PayCategory, PayValue, PayOrderType, PayOrderSource } from '@/utils/pay'
|
||||||
import { teaRoomRecharge } from '@/api/tea-room'
|
import { teaRoomRecharge, getRechargeActivity } from '@/api/tea-room'
|
||||||
import { wechatPay } from '@/hooks/usePay'
|
import { wechatPay } from '@/hooks/usePay'
|
||||||
import { prePay, balancePay } from '@/api/pay'
|
import { prePay, createRechargeOrder } from '@/api/pay'
|
||||||
import { toast } from '@/utils/toast'
|
import { useToast } from 'wot-design-uni'
|
||||||
|
|
||||||
const pay = ref<number>(PayValue.WeChatPay) // 默认微信支付方式
|
const toast = useToast()
|
||||||
const OSS = inject('OSS')
|
|
||||||
|
|
||||||
// 推广方式
|
// 门店ID
|
||||||
const tab = ref<number>(0)
|
const storeId = ref<number>(0)
|
||||||
const person = ref<string>('') // 个人推广码
|
const rechargeList = ref<Array<{
|
||||||
const showStorePopup = ref<boolean>(false) // 显示门店列表弹窗
|
id: number
|
||||||
const rechargeMoney = ref<string>('')
|
price: number
|
||||||
|
gift_price: number
|
||||||
|
title: string
|
||||||
|
}>>([]) // 充值活动列表
|
||||||
|
const rechargeValue = ref<number>(0) // 充值活动选择
|
||||||
|
|
||||||
onLoad(() => {
|
|
||||||
|
|
||||||
|
onLoad((args) => {
|
||||||
|
storeId.value = Number(args.storeId) || 0
|
||||||
|
if (storeId.value) {
|
||||||
|
Recharge.handleInit()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const buy = {
|
const Recharge = {
|
||||||
// 选择门店
|
/**
|
||||||
handleChooseStore: (item: any) => {
|
* 充值活动列表
|
||||||
|
*/
|
||||||
|
handleInit: async () => {
|
||||||
|
const res = await getRechargeActivity({store_id: storeId.value})
|
||||||
|
rechargeList.value = res || []
|
||||||
},
|
},
|
||||||
|
|
||||||
// 确定转入
|
/**
|
||||||
handleConfirmRecharge: () => {
|
* 购买套餐
|
||||||
uni.navigateTo({
|
*/
|
||||||
url: '/pages/notice/pay?type=vip'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 购买会员
|
|
||||||
handleRecharge: async () => {
|
handleRecharge: async () => {
|
||||||
if (!rechargeMoney.value) {
|
if (rechargeValue.value === 0) {
|
||||||
toast.info('请输入转入金额')
|
toast.show('请选择充值套餐')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
uni.showLoading({ title: '支付中...' })
|
toast.loading({
|
||||||
|
loadingType: 'ring',
|
||||||
|
loadingColor: '#4C9F44',
|
||||||
|
msg: '操作中...'
|
||||||
|
})
|
||||||
try {
|
try {
|
||||||
// 先请求充值接口
|
// 先请求充值接口
|
||||||
const res = await teaRoomRecharge(Number(rechargeMoney.value))
|
const res = await createRechargeOrder({id: rechargeValue.value})
|
||||||
|
console.log("🚀 ~ res:", res)
|
||||||
|
|
||||||
// 预支付
|
// 预支付
|
||||||
const pay = await prePay({
|
const pay = await prePay({
|
||||||
@ -171,31 +124,32 @@
|
|||||||
wechatPay(pay.pay.config).then((res) => {
|
wechatPay(pay.pay.config).then((res) => {
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
if (res === 'success') {
|
if (res === 'success') {
|
||||||
toast.success('支付成功')
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.navigateBack()
|
toast.success('支付成功')
|
||||||
}, 800)
|
}, 100);
|
||||||
return
|
return
|
||||||
} else if (res === 'cancel') {
|
} else if (res === 'cancel') {
|
||||||
toast.info('已取消支付')
|
setTimeout(() => {
|
||||||
|
toast.show('已取消支付')
|
||||||
|
}, 100);
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
toast.info('支付失败，请重试')
|
setTimeout(() => {
|
||||||
|
toast.show('支付失败，请重试')
|
||||||
|
}, 100);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
uni.hideLoading()
|
toast.close()
|
||||||
toast.info('支付失败，请重试')
|
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
uni.hideLoading()
|
toast.close()
|
||||||
toast.info('支付失败，请重试')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background: $cz-page-background;
|
background: $cz-page-background;
|
||||||
}
|
}
|
||||||
@ -207,4 +161,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.recharge-radio {
|
||||||
|
:deep() {
|
||||||
|
.wd-radio-group {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-radio {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.acitve {
|
||||||
|
background: #FFF4F4;
|
||||||
|
border: 2rpx solid #FF5951;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -351,6 +351,15 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "wallet/recharge20260110_bck",
|
||||||
|
"type": "page",
|
||||||
|
"needLogin": true,
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "wallet/wallet",
|
"path": "wallet/wallet",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
|
|||||||
Reference in New Issue
Block a user