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

fix: polish paid resource purchase layout

Browse Source
This commit is contained in:
王鹏
2026-07-30 09:11:38 +08:00
parent 01c382522a
commit cf40df23f4
1 changed files with 178 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
pages/blog/resource.vue
View File

@@ -8,8 +8,8 @@
</view>
<view class="resource-box">
<view class="resource-view">
<view class="resource-img">
<image class="ui-img" src="https://img.yidaima.cn/feast/xiazai.svg" mode="aspectFit"></image>
<view class="resource-section-icon resource-section-icon-large resource-title-icon">
<uni-icons type="cloud-download" size="28" color="#6d52f5"></uni-icons>
</view>
<view class="resource-font">
{{resourceInfo.resourceTitle}}
@@ -18,8 +18,8 @@
<view class="resource-list">
<view v-if="type != 1" class="resource-view">
<view class="resource-img2">
<image class="ui-img" src="https://img.yidaima.cn/shuoming.svg" mode="aspectFit"></image>
<view class="resource-section-icon">
<uni-icons type="info" size="22" color="#6d52f5"></uni-icons>
</view>
<view class="resource-font2">
下载说明
@@ -36,8 +36,8 @@
<!-- 付费资源规格 -->
<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 class="resource-section-icon">
<uni-icons type="list" size="22" color="#6d52f5"></uni-icons>
</view>
<view class="resource-font2">选择版本</view>
</view>
@@ -49,14 +49,18 @@
: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 class="spec-content">
<view class="spec-name">
<text class="spec-name-text">{{item.listName}}</text>
</view>
<view v-if="item.purchased || item.status == 0" class="spec-meta">
<text v-if="item.purchased" class="purchased-tag">已拥有</text>
<text v-else class="disabled-tag">已停用</text>
</view>
</view>
<view class="spec-price">
<text v-if="isUpgradeSpec(item)" class="upgrade-price-label">补</text>
¥{{formatPrice(getPayablePriceFen(item))}}
<text v-if="isUpgradeSpec(item)" class="upgrade-price-label">补差价</text>
<text class="spec-price-value">¥{{formatPrice(getPayablePriceFen(item))}}</text>
</view>
</view>
</view>
@@ -66,8 +70,8 @@
<!-- 资源列表 -->
<view>
<view class="resource-view">
<view class="resource-img2">
<image class="ui-img" src="https://img.yidaima.cn/feastwenjian.svg" mode="aspectFit"></image>
<view class="resource-section-icon">
<uni-icons type="download" size="22" color="#6d52f5"></uni-icons>
</view>
<view class="resource-font2">
{{isLookAd == 3 ? '已购资源' : '资源列表'}}
@@ -75,20 +79,20 @@
</view>
<template v-if="isLookAd == 3">
<view v-if="purchasedSpecs.length" id="purchased-resources">
<view class="shuoming2">复制下方链接打开手机浏览器进行下载！！！</view>
<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 class="file-header">
<view class="file-type-icon">
<uni-icons type="link" size="20" color="#6d52f5"></uni-icons>
</view>
<view class="resource-font3">
{{item.listName}}
<text class="password" v-if="item.password">密码：{{item.password}}</text>
<view class="file-heading">
<text class="file-title">{{item.listName}}</text>
<text class="file-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 @click="copy(item.listUrl)" class="file-copy">复制</view>
</view>
</view>
</view>
@@ -100,15 +104,19 @@
</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 class="file-header">
<view class="file-type-icon">
<uni-icons type="link" size="20" color="#6d52f5"></uni-icons>
</view>
<view class="resource-font3">
{{item.listName}}<text class="password" v-if="item.password != '' && item.password != null"> 密码：{{item.password}} </text>
<view class="file-heading">
<text class="file-title">{{item.listName}}</text>
<text class="file-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 class="file-url-box">
<text class="file-url">{{item.listUrl}}</text>
<view @click="copy(item.listUrl)" class="file-copy">复制</view>
</view>
</view>
</template>
@@ -445,7 +453,11 @@
data: url,
showToast: false,
success: function () {
uni.showToast({
title: '链接已复制',
icon: 'success',
duration: 1200
});
}
});
},
@@ -643,11 +655,6 @@
background-color: #ffffff;
min-height: 100%;
}
.password{
font-size: 24rpx;
color: #4a4a4a;
margin-left: 40rpx;
}
.data-view {
margin: 0upx 20upx;
font-size: 34upx;
@@ -739,9 +746,10 @@
margin: 24rpx 10rpx 0;
}
.spec-item{
min-height: 92rpx;
box-sizing: border-box;
min-height: 104rpx;
margin-bottom: 18rpx;
padding: 0 28rpx;
padding: 16rpx 24rpx;
border: 2rpx solid #e5e5e5;
border-radius: 18rpx;
display: flex;
@@ -754,26 +762,52 @@
background: #f5f2ff;
box-shadow: 0 8rpx 20rpx rgba(122, 96, 253, 0.12);
}
.spec-content{
flex: 1;
min-width: 0;
padding-right: 16rpx;
}
.spec-name{
font-size: 29rpx;
font-weight: 500;
line-height: 42rpx;
color: #2b2b2b;
}
.spec-name-text{
display: block;
word-break: keep-all;
overflow-wrap: break-word;
}
.spec-meta{
margin-top: 8rpx;
line-height: 1;
}
.spec-price{
font-size: 31rpx;
font-weight: 600;
color: #e54d42;
flex-shrink: 0;
min-width: 120rpx;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.upgrade-price-label{
margin-right: 6rpx;
font-size: 22rpx;
margin-bottom: 4rpx;
font-size: 20rpx;
font-weight: 500;
line-height: 28rpx;
color: #7a60fd;
}
.spec-price-value{
white-space: nowrap;
text-align: right;
font-size: 31rpx;
font-weight: 600;
line-height: 42rpx;
color: #e54d42;
}
.purchased-tag,
.disabled-tag{
display: inline-block;
margin-left: 16rpx;
padding: 4rpx 12rpx;
border-radius: 999rpx;
font-size: 21rpx;
@@ -795,49 +829,108 @@
color: #8799a3;
background: #f7f7f7;
}
.purchased-file{
padding: 24rpx;
border-radius: 20rpx;
background: #fafafa;
}
.file-list{
margin: 30rpx;
box-sizing: border-box;
margin: 24rpx 10rpx 0;
padding: 24rpx;
border: 1rpx solid #eeeeee;
border-radius: 20rpx;
background: #ffffff;
box-shadow: 0 8rpx 24rpx rgba(45, 45, 45, 0.05);
}
.file-header{
display: flex;
align-items: flex-start;
}
.file-type-icon{
box-sizing: border-box;
width: 44rpx;
height: 44rpx;
flex: 0 0 44rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12rpx;
background: #f3f0ff;
}
.file-heading{
min-width: 0;
margin-left: 16rpx;
display: flex;
flex: 1;
flex-direction: column;
}
.file-title{
font-size: 27rpx;
font-weight: 500;
line-height: 42rpx;
color: #2b2b2b;
}
.file-password{
align-self: flex-start;
margin-top: 8rpx;
padding: 4rpx 12rpx;
border-radius: 999rpx;
font-size: 22rpx;
line-height: 30rpx;
color: #8a4b00;
background: #fff7db;
}
.file-url-box{
background: #dcdcdc;
height: 80rpx;
box-sizing: border-box;
width: 100%;
border-radius: 20rpx;
min-height: 80rpx;
margin-top: 20rpx;
line-height: 80rpx;
padding: 12rpx 12rpx 12rpx 20rpx;
display: flex;
align-items: center;
border: 1rpx solid #e8e8ec;
border-radius: 16rpx;
background: #f6f6f8;
}
.file-url{
float: left;
margin-left: 40rpx;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
/* 你还需要设置容器的宽度，以便知道何时文本应该溢出 */
width: 450rpx; /* 或者其他你需要的宽度 */
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 25rpx;
line-height: 56rpx;
color: #3f3f46;
}
.file-copy{
float: right;
margin-right: 40rpx;
min-width: 96rpx;
height: 56rpx;
margin-left: 16rpx;
padding: 0 16rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14rpx;
font-size: 24rpx;
font-weight: 500;
color: #6d52f5;
background: #ebe7ff;
}
.shuoming{
margin: 25rpx 25rpx 30rpx 25rpx;
font-size: 25rpx;
}
.shuoming2{
margin: 25rpx 35rpx 30rpx 35rpx;
margin: 25rpx 20rpx 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 85rpx;
padding: 20rpx 16rpx;
font-size: 26rpx;
background-color: #fff9d7;
height: 85rpx;
line-height: 85rpx;
line-height: 1.6;
background-color: #fff7db;
border: 1rpx solid #f2d18a;
text-align: center;
border-radius: 20rpx;
color: orange;
color: #8a4b00;
}
.resource-list{
margin: 40rpx 20rpx;
@@ -853,29 +946,32 @@
align-items: center;
justify-content: flex-start;
}
.resource-img {
height: 60rpx;
width: 60rpx;
.resource-section-icon {
box-sizing: border-box;
width: 48rpx;
height: 48rpx;
flex: 0 0 48rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid #ddd6ff;
border-radius: 14rpx;
background: #f3f0ff;
}
.resource-font3 {
font-weight: 400;
font-size: 25rpx;
margin-left: 15rpx;
.resource-section-icon-large {
width: 64rpx;
height: 64rpx;
flex-basis: 64rpx;
border-radius: 18rpx;
}
.resource-img3 {
height: 30rpx;
width: 30rpx;
.resource-title-icon {
display: none;
}
.resource-font2 {
font-weight: 600;
font-size: 30rpx;
margin-left: 20rpx;
}
.resource-img2 {
height: 45rpx;
width: 45rpx;
}
.resource-box{
min-height: 350rpx;
width: 100%;