wangpeng/yimo-resource-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add paid resource order flow

Browse Source
This commit is contained in:
王鹏
2026-07-29 14:35:13 +08:00
parent d14f005d34
commit 01c382522a
10 changed files with 1202 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
pages/blog/resource.vue
View File

@@ -33,6 +33,36 @@
selectable="true"> </mp-html> -->
</view>
<!-- 付费资源规格 -->
<view v-if="isLookAd == 3" class="spec-section">
<view class="resource-view">
<view class="resource-img2">
<image class="ui-img" src="https://img.yidaima.cn/feast/files.svg" mode="aspectFit"></image>
</view>
<view class="resource-font2">选择版本</view>
</view>
<view v-if="paySpecs.length" class="spec-list">
<view
v-for="item in paySpecs"
:key="item.id"
class="spec-item"
:class="{'spec-item-selected': selectedResourceListId == item.id}"
@click="selectSpec(item)"
>
<view class="spec-name">
{{item.listName}}
<text v-if="item.purchased" class="purchased-tag">已拥有</text>
<text v-else-if="item.status == 0" class="disabled-tag">已停用</text>
</view>
<view class="spec-price">
<text v-if="isUpgradeSpec(item)" class="upgrade-price-label">补</text>
¥{{formatPrice(getPayablePriceFen(item))}}
</view>
</view>
</view>
<view v-else class="empty-spec">暂无可购买规格，请联系管理员</view>
</view>
<!-- 资源列表 -->
<view>
<view class="resource-view">
@@ -40,23 +70,46 @@
<image class="ui-img" src="https://img.yidaima.cn/feastwenjian.svg" mode="aspectFit"></image>
</view>
<view class="resource-font2">
资源列表
{{isLookAd == 3 ? '已购资源' : '资源列表'}}
</view>
</view>
<view v-if="isLookAd == 0" class="shuoming2">复制下方链接打开手机浏览器进行下载！！！</view>
<view v-else class="shuoming2">请先点击下方按钮即可获取资源下载列表！</view>
<template v-if="isLookAd == 3">
<view v-if="purchasedSpecs.length" id="purchased-resources">
<view class="shuoming2">复制下方链接打开手机浏览器进行下载！！！</view>
<view v-for="item in purchasedSpecs" :key="item.id" class="file-list purchased-file">
<view class="resource-view">
<view class="resource-img3">
<image class="ui-img" src="https://img.yidaima.cn/feast/files.svg" mode="aspectFit"></image>
</view>
<view class="resource-font3">
{{item.listName}}
<text class="password" v-if="item.password">密码：{{item.password}}</text>
</view>
</view>
<view class="file-url-box">
<text class="file-url">{{item.listUrl}}</text>
<text @click="copy(item.listUrl)" class="file-copy">复制</text>
</view>
</view>
</view>
<view v-else class="shuoming2">选择上方版本并完成付款后，即可查看下载地址</view>
</template>
<template v-else>
<view v-if="isLookAd == 0" class="shuoming2">复制下方链接打开手机浏览器进行下载！！！</view>
<view v-else class="shuoming2">请先点击下方按钮即可获取资源下载列表！</view>
</template>
<template v-if="isLookAd == 0">
<view v-for="(item,index) in resourceInfo.appResourceListList" :key="index" class="file-list">
<view class="resource-view">
<view class="resource-img3">
<image class="ui-img" src="https://img.yidaima.cn/feast/files.svg" mode="aspectFit"></image>
</view>
<view class="resource-font3">
{{item.listName}}<text class="password" v-if="item.password != '' && item.password != null"> 密码：{{item.password}} </text>
<view class="resource-view">
<view class="resource-img3">
<image class="ui-img" src="https://img.yidaima.cn/feast/files.svg" mode="aspectFit"></image>
</view>
<view class="resource-font3">
{{item.listName}}<text class="password" v-if="item.password != '' && item.password != null"> 密码：{{item.password}} </text>
</view>
</view>
<view class="file-url-box"><text class="file-url">{{item.listUrl}}</text><text @click="copy(item.listUrl)" class="file-copy">复制</text></view>
</view>
<view class="file-url-box"><text class="file-url">{{item.listUrl}}</text><text @click="copy(item.listUrl)" class="file-copy">复制</text></view>
</view>
</template>
<view v-if="adUnitId" style="width: 100%; margin-top: 50rpx;">
@@ -67,15 +120,31 @@
</view>
</view>
<view v-if="isLookAd ==1 || isLookAd == 2 || isLookAd == 3" style="height: 140rpx; width: 100%;"></view>
<view v-if="isLookAd ==1" @click="lookAd()" class="resource-ad">
广告查看
</view>
<view v-if="isLookAd ==2" @click="jfAd()" class="resource-ad">
积分获取（ {{resourceInfo.adNumber}} 积分 ）
</view>
<view v-if="isLookAd ==3" @click="payResource()" class="resource-ad">
{{paying ? '支付结果确认中...' : '付费获取（ ¥' + formatPrice(resourceInfo.priceFen) + ' ）'}}
<view
v-if="(isLookAd == 1 || isLookAd == 2 || isLookAd == 3) && (isLookAd != 3 || selectedSpec)"
class="action-placeholder"
:class="{'action-placeholder-paid': isLookAd == 3}"
></view>
<view
v-if="(isLookAd == 1 || isLookAd == 2 || isLookAd == 3) && (isLookAd != 3 || selectedSpec)"
class="bottom-action-bar"
>
<view v-if="isLookAd == 3 && selectedSpec" class="action-summary">
<view class="action-summary-name">
<text class="action-summary-label">{{selectedIsUpgrade ? '升级补差' : '已选'}}</text>
<text class="action-summary-value">{{selectedSpec.listName}}</text>
</view>
<view class="action-summary-price">¥{{formatPrice(selectedPayPriceFen)}}</view>
</view>
<view v-if="isLookAd ==1" @click="lookAd()" class="resource-ad">
广告查看
</view>
<view v-if="isLookAd ==2" @click="jfAd()" class="resource-ad">
积分获取（ {{resourceInfo.adNumber}} 积分 ）
</view>
<view v-if="isLookAd ==3 && selectedSpec" @click="handlePaidAction()" class="resource-ad" :class="{'resource-owned': selectedSpec.purchased}">
{{paidButtonText}}
</view>
</view>
<u-toast ref="uToast"></u-toast>
@@ -103,6 +172,7 @@
},
isLookAd:null,
paying: false,
selectedResourceListId: null,
tag_style: {
h1: 'line-height: 50px;font-size:16px;',
h2: 'line-height: 50px;font-size:16px',
@@ -115,6 +185,53 @@
type:0
}
},
computed: {
paySpecs() {
var list = this.resourceInfo.appResourceListList || [];
return list.filter(function(item) {
return item.status == 1 || item.purchased;
});
},
purchasedSpecs() {
return this.paySpecs.filter(function(item) {
return !!item.purchased && !!item.listUrl;
});
},
highestPurchasedSpec() {
var purchased = this.paySpecs.filter(function(item) {
return !!item.purchased;
});
purchased.sort(function(left, right) {
var sortDiff = Number(right.sortOrder || 0) - Number(left.sortOrder || 0);
return sortDiff || Number(right.id || 0) - Number(left.id || 0);
});
return purchased.length ? purchased[0] : null;
},
selectedSpec() {
var selectedId = this.selectedResourceListId;
return this.paySpecs.find(function(item) {
return String(item.id) === String(selectedId);
}) || null;
},
selectedPayPriceFen() {
return this.getPayablePriceFen(this.selectedSpec);
},
selectedIsUpgrade() {
return this.isUpgradeSpec(this.selectedSpec);
},
paidButtonText() {
if (!this.selectedSpec) {
return '暂无可购买规格';
}
if (this.selectedSpec.purchased) {
return '已购买，查看资源';
}
if (this.paying) {
return '支付结果确认中...';
}
return this.selectedIsUpgrade ? '补差价升级' : '立即购买';
}
},
// 分享好友配置
onShareAppMessage(res) {
var that = this;
@@ -150,6 +267,9 @@
return
}
this.id = id
if (option && /^\d+$/.test(String(option.resourceListId || ''))) {
this.selectedResourceListId = option.resourceListId
}
if(option.type){
this.type = option.type
}
@@ -278,6 +398,9 @@
this.isLookAd = 3
}
that.resourceInfo = response.data
if (response.data.isAd == 3) {
that.selectDefaultSpec()
}
var str = that.resourceInfo.explain || ''
if (str.includes("/dev-api")) {
that.resourceInfo.explain = str.replace("/dev-api", that.baseUrl)
@@ -315,7 +438,9 @@
})
},
copy(url){
var that = this;
if (!url) {
return;
}
uni.setClipboardData({
data: url,
showToast: false,
@@ -324,6 +449,57 @@
}
});
},
isUpgradeSpec(item){
if (!item || item.purchased || !this.highestPurchasedSpec) {
return false;
}
return Number(item.sortOrder || 0) > Number(this.highestPurchasedSpec.sortOrder || 0);
},
getPayablePriceFen(item){
if (!item) {
return 0;
}
var targetPrice = Number(item.priceFen || 0);
if (!this.isUpgradeSpec(item)) {
return targetPrice;
}
var ownedPrice = Number(this.highestPurchasedSpec.priceFen || 0);
return Math.max(targetPrice - ownedPrice, 0);
},
selectDefaultSpec(){
var currentId = this.selectedResourceListId;
var currentExists = this.paySpecs.some(function(item) {
return String(item.id) === String(currentId);
});
if (currentExists) {
return;
}
var firstUnpurchased = this.paySpecs.find(function(item) {
return item.status == 1 && !item.purchased;
});
this.selectedResourceListId = firstUnpurchased
? firstUnpurchased.id
: (this.paySpecs.length ? this.paySpecs[0].id : null);
},
selectSpec(item){
if (this.paying) {
return;
}
this.selectedResourceListId = item.id;
},
handlePaidAction(){
if (!this.selectedSpec) {
return;
}
if (this.selectedSpec.purchased) {
uni.pageScrollTo({
selector: '#purchased-resources',
duration: 250
});
return;
}
this.payResource();
},
payResource(){
var that = this;
if (this.paying) {
@@ -336,7 +512,14 @@
});
return;
}
if (!this.resourceInfo.priceFen || this.resourceInfo.priceFen <= 0) {
if (!this.selectedSpec || this.selectedSpec.status != 1) {
uni.showToast({
title: '请选择可购买的版本',
icon: 'none'
});
return;
}
if (!this.selectedPayPriceFen || this.selectedPayPriceFen <= 0) {
uni.showToast({
title: '价格信息错误',
icon: 'none'
@@ -356,7 +539,7 @@
provider: 'weixin',
success: loginRes => {
createVirtualResourceOrder({
resourceId: that.id,
resourceListId: that.selectedSpec.id,
code: loginRes.code
}).then(response => {
var payParams = response.data;
@@ -403,6 +586,7 @@
message: '购买成功',
icon: false
});
resourceDownLoad({id: that.id}).then(function() {});
that.getInfo();
return;
}
@@ -476,18 +660,145 @@
padding: 20rpx 30rpx;
}
.resource-ad{
height: 100rpx;
width: 90%;
margin-left: 5%;
margin-bottom: 40rpx;
height: 88rpx;
width: 100%;
margin: 0;
border-radius: 100rpx;
background: #7a60fd;
position: absolute;
bottom: 0; /* 将按钮固定在容器的底部 */
line-height: 100rpx;
line-height: 88rpx;
text-align: center;
font-size: 38rpx;
font-size: 34rpx;
color: white;
box-shadow: 0 8rpx 22rpx rgba(122, 96, 253, 0.22);
}
.bottom-action-bar{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
box-sizing: border-box;
width: 100%;
padding: 18rpx 5% calc(18rpx + constant(safe-area-inset-bottom));
padding: 18rpx 5% calc(18rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.98);
border-top: 1rpx solid #eeeeee;
box-shadow: 0 -10rpx 30rpx rgba(45, 45, 45, 0.1);
}
.action-summary{
height: 54rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12rpx 12rpx;
}
.action-summary-name{
display: flex;
align-items: center;
min-width: 0;
}
.action-summary-label{
flex-shrink: 0;
margin-right: 14rpx;
padding: 3rpx 12rpx;
border-radius: 999rpx;
font-size: 21rpx;
color: #6d52f5;
background: #f0ecff;
}
.action-summary-value{
max-width: 420rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 27rpx;
color: #333333;
}
.action-summary-price{
flex-shrink: 0;
font-size: 31rpx;
font-weight: 600;
color: #e54d42;
}
.action-placeholder{
width: 100%;
height: calc(142rpx + constant(safe-area-inset-bottom));
height: calc(142rpx + env(safe-area-inset-bottom));
}
.action-placeholder-paid{
height: calc(208rpx + constant(safe-area-inset-bottom));
height: calc(208rpx + env(safe-area-inset-bottom));
}
.resource-owned{
background: #39b54a;
}
.spec-section{
margin-bottom: 45rpx;
}
.spec-list{
margin: 24rpx 10rpx 0;
}
.spec-item{
min-height: 92rpx;
margin-bottom: 18rpx;
padding: 0 28rpx;
border: 2rpx solid #e5e5e5;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff;
}
.spec-item-selected{
border-color: #7a60fd;
background: #f5f2ff;
box-shadow: 0 8rpx 20rpx rgba(122, 96, 253, 0.12);
}
.spec-name{
font-size: 29rpx;
font-weight: 500;
color: #2b2b2b;
}
.spec-price{
font-size: 31rpx;
font-weight: 600;
color: #e54d42;
}
.upgrade-price-label{
margin-right: 6rpx;
font-size: 22rpx;
font-weight: 500;
color: #7a60fd;
}
.purchased-tag,
.disabled-tag{
display: inline-block;
margin-left: 16rpx;
padding: 4rpx 12rpx;
border-radius: 999rpx;
font-size: 21rpx;
font-weight: 400;
}
.purchased-tag{
color: #248b3e;
background: #e8f7ec;
}
.disabled-tag{
color: #8799a3;
background: #f1f1f1;
}
.empty-spec{
margin: 24rpx 10rpx;
padding: 28rpx;
text-align: center;
border-radius: 18rpx;
color: #8799a3;
background: #f7f7f7;
}
.purchased-file{
padding: 24rpx;
border-radius: 20rpx;
background: #fafafa;
}
.file-list{
margin: 30rpx;