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

256
pages/blog/resource.vue
View File

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