zianxin/Friendship-and-chat-uniapp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:充值记录

Browse Source
This commit is contained in:
dzc committed 2025-12-12 17:06:08 +08:00
1 parent 626a20228a
commit 16aa24fbc1
2 files changed
+199 -206
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/profile/apply-vip.vue
+167 -188
View File
@@ -10,8 +10,7 @@
<scroll-view style="height: calc(100dvh - 88px)" scroll-y>
<view
class="mx-4 p-4 rounded-2 bg-gradient-to-b from-#111 to-#222 b-4 b-solid b-t-#D29E52/60 b-l-#D29E52/40 b-r-#D29E52/40 b-b-#D29E52/20"
>
class="mx-4 p-4 rounded-2 bg-gradient-to-b from-#111 to-#222 b-4 b-solid b-t-#D29E52/60 b-l-#D29E52/40 b-r-#D29E52/40 b-b-#D29E52/20">
<view class="text-color-theme-dark font-900 font-italic text-xl mb-1">VIP</view>
<view class="flex-col-center mb-4">
<view class="text-gray mb-2 text-xl font-900 font-italic tracking-1.5">
@@ -25,20 +24,12 @@
<view class="mt-3 px-4">
<scroll-view scroll-x class="w-full" :show-scrollbar="false">
<view class="flex">
<view
v-for="item in openTypeList"
:key="item.id"
class="mr-3 ml-1 my-1"
@click="curOpenTypeId = item.id"
>
<view
class="w-220rpx rounded-3 flex-col-center transition-all duration-200"
:class="[
curOpenTypeId === item.id
? 'bg-#111 text-white b-3 b-solid b-#D29E52/60'
: 'b-3 b-solid b-#333',
]"
>
<view v-for="item in openTypeList" :key="item.id" class="mr-3 ml-1 my-1" @click="curOpenTypeId = item.id">
<view class="w-220rpx rounded-3 flex-col-center transition-all duration-200" :class="[
curOpenTypeId === item.id
? 'bg-#111 text-white b-3 b-solid b-#D29E52/60'
: 'b-3 b-solid b-#333',
]">
<view class="mt-2 text-sm text-#ffffff">{{ item.title }}</view>
<view class="mt-1 text-lg font-900 text-color-theme-dark">
￥{{ fen2yuan(item.preferentialPrice) }}
@@ -59,18 +50,14 @@
<view class="flex justify-between gap-3">
<view
class="flex-1 rounded-full flex-row-center px-4 py-2 b-3 b-solid b-#222 bg-#333 transition-all duration-200"
:style="{ borderColor: payMethod === 'alipay' ? '#D29E52' : '' }"
@click="payMethod = 'alipay'"
>
:style="{ borderColor: payMethod === 'alipay' ? '#D29E52' : '' }" @click="payMethod = 'alipay'">
<image class="size-40rpx mr-2" src="@/static/alipay.png" mode="aspectFill" />
<text>支付宝</text>
</view>
<view
class="flex-1 rounded-full flex-row-center px-4 py-2 b-3 b-solid b-#222 bg-#333 transition-all duration-200"
:style="{ borderColor: payMethod === 'wechat' ? '#D29E52' : '' }"
@click="payMethod = 'wechat'"
>
:style="{ borderColor: payMethod === 'wechat' ? '#D29E52' : '' }" @click="payMethod = 'wechat'">
<image class="size-40rpx mr-2" src="@/static/weixin.png" mode="aspectFill" />
<text>微信支付</text>
</view>
@@ -85,21 +72,15 @@
</text>
</view>
<view
v-if="openTypeList.length"
<view v-if="openTypeList.length"
class="mt-4 w-2/3 mx-auto py-2 text-center rounded-full bg-color-theme-dark text-black text-sm active:bg-color-theme"
@click="handleOpenVip"
>
@click="handleOpenVip">
立即开通VIP
</view>
<view class="mt-6 px-4">
<view class="grid grid-cols-3 gap-2">
<view
v-for="(item, index) in benefits"
:key="index"
class="p-2 flex flex-col items-center"
>
<view v-for="(item, index) in benefits" :key="index" class="p-2 flex flex-col items-center">
<view class="mb-1 size-120rpx rounded-full bg-#333 text-center line-height-120rpx">
<uni-icons :type="item.icon" size="32" color="#d29e52"></uni-icons>
</view>
@@ -117,174 +98,172 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
// @ts-ignore
import { fen2yuan } from '@/sheep/hooks/useGoods';
import { onLoad, onShow } from '@dcloudio/uni-app';
import RecentApi from '@/sheep/api/member/recent';
import { useMessage } from '@/uni_modules/wot-design-uni';
// @ts-ignore
import $store from '@/sheep/store';
// @ts-ignore
import PayOrderApi from '@/sheep/api/pay/order';
// @ts-ignore
import sheep from '@/sheep';
import { jumpToWechatMiniProgram } from '@/sheep/util/wechat-tool';
import { computed, ref } from 'vue';
// @ts-ignore
import { fen2yuan } from '@/sheep/hooks/useGoods';
import { onLoad, onShow } from '@dcloudio/uni-app';
import RecentApi from '@/sheep/api/member/recent';
import { useMessage } from '@/uni_modules/wot-design-uni';
// @ts-ignore
import $store from '@/sheep/store';
// @ts-ignore
import PayOrderApi from '@/sheep/api/pay/order';
// @ts-ignore
import sheep from '@/sheep';
import { jumpToWechatMiniProgram } from '@/sheep/util/wechat-tool';
const messageBox = useMessage();
const vipProtocolMessageBox = useMessage('vip-protocol-message-box');
const messageBox = useMessage();
const vipProtocolMessageBox = useMessage('vip-protocol-message-box');
interface OpenTypeItem {
id: number;
title: string;
icon: string;
preferentialPrice: number;
originalPrice: number;
duration: number;
status: string;
isHot: boolean;
sort: number;
createTime: number;
interface OpenTypeItem {
id: number;
title: string;
icon: string;
preferentialPrice: number;
originalPrice: number;
duration: number;
status: string;
isHot: boolean;
sort: number;
createTime: number;
}
const benefits: any = [
{ icon: 'chat-filled', desc: '解锁微信', subDesc: '每天10个' },
{ icon: 'chatboxes-filled', desc: '无限畅聊', subDesc: '每天10个' },
{ icon: 'vip-filled', desc: '尊贵身份', subDesc: '专属标识' },
{ icon: 'locked-filled', desc: '个人身份', subDesc: '安全保密' },
{ icon: 'medal-filled', desc: '更多特权', subDesc: '敬请期待' },
];
const payMethodMap = [
{
title: '支付宝',
payment: '',
key: 'alipay',
},
{
title: '微信支付',
payment: 'wx_lite',
key: 'wechat',
},
];
const nodes = ref(''); // 会员协议文本
const payMethod = ref<'alipay' | 'wechat'>('alipay'); // 支付方式：alipay / wechat
const openTypeList = ref<OpenTypeItem[]>([]); // 会员类型列表
const curOpenTypeId = ref<number>(); // 当前选择的会员类型id
const currentOpenType = computed<OpenTypeItem | undefined>(() =>
openTypeList.value?.find((item) => item.id === curOpenTypeId.value),
); // 当前选择的会员类型
onLoad(async (params) => {
console.log('onLoad:', params);
if (params) {
if (params.openTypeId && params.payMethod) {
payMethod.value = params.payMethod;
disposeWechatPay(params.openTypeId);
}
}
});
const benefits: any = [
{ icon: 'chat-filled', desc: '解锁微信', subDesc: '每天10个' },
{ icon: 'chatboxes-filled', desc: '无限畅聊', subDesc: '每天10个' },
{ icon: 'vip-filled', desc: '尊贵身份', subDesc: '专属标识' },
{ icon: 'locked-filled', desc: '个人身份', subDesc: '安全保密' },
{ icon: 'medal-filled', desc: '更多特权', subDesc: '敬请期待' },
];
const payMethodMap = [
{
title: '支付宝',
payment: '',
key: 'alipay',
},
{
title: '微信支付',
payment: 'wx_lite',
key: 'wechat',
},
];
const nodes = ref(''); // 会员协议文本
const payMethod = ref<'alipay' | 'wechat'>('alipay'); // 支付方式：alipay / wechat
const openTypeList = ref<OpenTypeItem[]>([]); // 会员类型列表
const curOpenTypeId = ref<number>(); // 当前选择的会员类型id
const currentOpenType = computed<OpenTypeItem | undefined>(() =>
openTypeList.value?.find((item) => item.id === curOpenTypeId.value),
); // 当前选择的会员类型
onShow(async () => {
const { data = null } = await RecentApi.getMemberOpenTypeList();
openTypeList.value = data ?? [];
if (openTypeList.value && openTypeList.value[0]) {
curOpenTypeId.value = openTypeList.value[0].id;
}
getChatConfig();
});
onLoad(async (params) => {
console.log('onLoad:', params);
if (params) {
if (params.openTypeId && params.payMethod) {
payMethod.value = params.payMethod;
disposeWechatPay(params.openTypeId);
// 查看会员协议
async function alert(type: string | number, title: string) {
const { data } = await RecentApi.getPromotionArticle({ id: type });
nodes.value = data?.content || '';
vipProtocolMessageBox.alert({
title,
zIndex: 200,
});
}
// 查询小程序配置
const getChatConfig = async () => {
try {
const { data } = await RecentApi.reportType();
if (data) {
console.log('data:', data);
if (data.vipLookWechtCout) {
benefits[0].subDesc = `每天${data.vipLookWechtCout == -1 ? '无限制' : data.vipLookWechtCout
}个`;
}
if (data.vipChatUserCout) {
benefits[1].subDesc = `每天${data.vipChatUserCout == -1 ? '无限制' : data.vipChatUserCout
}个`;
}
}
});
onShow(async () => {
const { data = null } = await RecentApi.getMemberOpenTypeList();
openTypeList.value = data ?? [];
if (openTypeList.value && openTypeList.value[0]) {
curOpenTypeId.value = openTypeList.value[0].id;
}
getChatConfig();
});
// 查看会员协议
async function alert(type: string | number, title: string) {
const { data } = await RecentApi.getPromotionArticle({ id: type });
nodes.value = data?.content || '';
vipProtocolMessageBox.alert({
title,
zIndex: 200,
});
} catch (error) {
console.log('|获取聊天配置|,意外的错误error:', error);
}
};
// 查询小程序配置
const getChatConfig = async () => {
try {
const { data } = await RecentApi.reportType();
if (data) {
console.log('data:', data);
if (data.vipLookWechtCout) {
benefits[0].subDesc = `每天${
data.vipLookWechtCout == -1 ? '无限制' : data.vipLookWechtCout
}个`;
}
if (data.vipChatUserCout) {
benefits[1].subDesc = `每天${
data.vipChatUserCout == -1 ? '无限制' : data.vipChatUserCout
}个`;
}
}
} catch (error) {
console.log('|获取聊天配置|,意外的错误error:', error);
}
};
// 开通会员
const handleOpenVip = () => {
if (!curOpenTypeId.value || !currentOpenType.value?.id) {
uni.showToast({ title: '请选择会员类型', icon: 'none' });
return;
}
const payMethodItem = payMethodMap.find((item) => item.key === payMethod.value);
if (!payMethodItem) {
uni.showToast({ title: '请选择支付方式', icon: 'none' });
return;
}
if (!payMethodItem.payment) {
uni.showToast({ title: `不支持${payMethodItem.title}支付`, icon: 'none' });
return;
}
jumpToWechatPage();
// 开通会员
const handleOpenVip = () => {
if (!curOpenTypeId.value || !currentOpenType.value?.id) {
uni.showToast({ title: '请选择会员类型', icon: 'none' });
return;
messageBox
.confirm({
msg: '确认开通？',
title: '提示',
})
.then(async () => {
// #ifdef MP-WEIXIN
disposeWechatPay(curOpenTypeId.value);
// #endif
// #ifndef MP-WEIXIN
jumpToWechatPage();
// #endif
})
.catch(() => {});
};
}
const payMethodItem = payMethodMap.find((item) => item.key === payMethod.value);
if (!payMethodItem) {
uni.showToast({ title: '请选择支付方式', icon: 'none' });
return;
}
if (!payMethodItem.payment) {
uni.showToast({ title: `不支持${payMethodItem.title}支付`, icon: 'none' });
return;
}
// 处理微信支付
const disposeWechatPay = async (openTypeId: any) => {
uni.showLoading({ title: '支付中...', mask: true });
try {
const { code, data } = await RecentApi.memberOpenTypePay({
openTypeId: openTypeId,
});
console.log('开通vipId:', data);
if (code !== 0) {
uni.showToast({ title: '创建订单失败', icon: 'none' });
throw new Error('创建订单失败');
}
sheep.$platform.pay(payMethod.value, 'recharge', data);
// 更新用户信息
$store('user').getInfo();
uni.showToast({ title: '支付成功', icon: 'success' });
} catch (error) {
console.error('|处理微信支付|,意外的错误error:', error);
}
};
jumpToWechatPage();
return;
messageBox
.confirm({
msg: '确认开通？',
title: '提示',
})
.then(async () => {
// #ifdef MP-WEIXIN
disposeWechatPay(curOpenTypeId.value);
// #endif
// #ifndef MP-WEIXIN
jumpToWechatPage();
// #endif
})
.catch(() => { });
};
// 跳转到微信小程序
const jumpToWechatPage = async () => {
await jumpToWechatMiniProgram('openVip', {
openTypeId: curOpenTypeId.value,
payMethod: payMethod.value,
// 处理微信支付
const disposeWechatPay = async (openTypeId: any) => {
uni.showLoading({ title: '支付中...', mask: true });
try {
const { code, data } = await RecentApi.memberOpenTypePay({
openTypeId: openTypeId,
});
};
console.log('开通vipId:', data);
if (code !== 0) {
uni.showToast({ title: '创建订单失败', icon: 'none' });
throw new Error('创建订单失败');
}
sheep.$platform.pay(payMethod.value, 'recharge', data);
// 更新用户信息
$store('user').getInfo();
uni.showToast({ title: '支付成功', icon: 'success' });
} catch (error) {
console.error('|处理微信支付|,意外的错误error:', error);
}
};
// 跳转到微信小程序
const jumpToWechatPage = async () => {
await jumpToWechatMiniProgram('openVip', {
openTypeId: curOpenTypeId.value,
payMethod: payMethod.value,
});
};
</script>
src/pages/profile/recharge-record.vue
+32 -18
View File
@@ -8,29 +8,43 @@
</template>
</wd-navbar>
<scroll-list
style="height: calc(100dvh - 44px - 50px)"
:loadMoreStatus="loadMoreStatus"
@refresh="refreshList"
@loadMore="listLoadMore"
>
<!-- <moment-card v-for="item in listData" :data="item" :showChat="false" :showLike="false" /> -->
111
<scroll-list style="height: calc(100dvh - 44px - 50px)" :loadMoreStatus="loadMoreStatus" @refresh="refreshList"
@loadMore="listLoadMore">
<view class="flex items-center card-thin mx-20rpx px-20rpx py-18rpx mb-15rpx" v-for="(v, i) in listData"
:key="v.id">
<view class="flex items-center flex-1 text-xs">
<wd-tag size="30rpx" custom-class="space">
<view class="p-0.25">充值</view>
</wd-tag>
<view class="ml-10rpx flex items-center">
<text class="text-xs">支付</text>
<text class="flex-1 text-xs text-color-theme text-center">{{ fen2yuan(v.payPrice) }}元</text>
<text class="text-xs">获得</text>
<text class="flex-1 text-xs text-color-theme text-center">{{ fen2yuanSimple(v.totalPrice) }}</text>
<text>砖石</text>
</view>
</view>
<text class="text-xs">{{ formatDate(v.payTime) }}</text>
</view>
</scroll-list>
</wd-config-provider>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import ScrollList from '@/sheep/components/scroll-list/scroll-list.vue';
import useScroll from '@/sheep/hooks/use-scroll';
import RecentApi from '@/sheep/api/member/recent';
import { onMounted } from 'vue';
const { listData, loadMoreStatus, refreshList, listLoadMore } = useScroll(
RecentApi.walletRechargeRecord,
);
import { fen2yuan, fen2yuanSimple } from '@/sheep/hooks/useGoods';
import { formatDate } from '@/sheep/helper/utils';
onMounted(() => {
refreshList();
});
import ScrollList from '@/sheep/components/scroll-list/scroll-list.vue';
import useScroll from '@/sheep/hooks/use-scroll';
import RecentApi from '@/sheep/api/member/recent';
const { listData, loadMoreStatus, refreshList, listLoadMore } = useScroll(
RecentApi.walletRechargeRecord,
);
onMounted(() => {
refreshList();
});
</script>