1054425342@qq.com
2 months ago
10 changed files with 2105 additions and 2159 deletions
@ -1,339 +1,382 @@ |
|||
<template> |
|||
<view class="memorial-detail"> |
|||
<!-- 主图区域 --> |
|||
<view class="main-image-section"> |
|||
<image |
|||
:src="showImg(detailInfo.image)" |
|||
mode="aspectFill" |
|||
class="main-image" |
|||
@click="previewMainImage" |
|||
/> |
|||
</view> |
|||
|
|||
<!-- 数字资产信息卡片 --> |
|||
<view class="asset-info-card"> |
|||
<view class="card-header"> |
|||
<text class="asset-title">{{ detailInfo.title }}</text> |
|||
</view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">发行数量：</text> |
|||
<text class="info-value">{{ detailInfo.totalSupply }}份</text> |
|||
</view> |
|||
|
|||
<view class="divider"></view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">数字资产所有方：</text> |
|||
<text class="info-value">{{ detailInfo.owner }}</text> |
|||
</view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">数字资产权利方：</text> |
|||
<text class="info-value">{{ detailInfo.rightHolder }}</text> |
|||
</view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">数字资产所有方：</text> |
|||
<text class="info-value">{{ detailInfo.assetOwner }}</text> |
|||
</view> |
|||
|
|||
<!-- 收藏信息 --> |
|||
<view class="collection-info"> |
|||
<view class="collection-header">— 收藏信息 —</view> |
|||
<view class="collector-info"> |
|||
<text class="collector-label">收藏者</text> |
|||
<text class="collector-name">{{ detailInfo.collector }}</text> |
|||
<text class="collection-number">编号</text> |
|||
<text class="collection-code">{{ detailInfo.collectionCode }}</text> |
|||
<text class="collection-time-label">收藏时间</text> |
|||
<text class="collection-time">{{ detailInfo.collectionTime }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 认证信息卡片 --> |
|||
<view class="cert-info-card"> |
|||
<view class="cert-header">— 认证信息 —</view> |
|||
|
|||
<view class="cert-row"> |
|||
<text class="cert-label">权证码</text> |
|||
<text class="cert-value">{{ detailInfo.certificateCode }}</text> |
|||
</view> |
|||
|
|||
<view class="cert-row"> |
|||
<text class="cert-label">合约地址</text> |
|||
<text class="cert-value">{{ detailInfo.contractAddress }}</text> |
|||
</view> |
|||
|
|||
<view class="cert-row"> |
|||
<text class="cert-label">交易HASH</text> |
|||
<text class="cert-value">{{ detailInfo.transactionHash }}</text> |
|||
</view> |
|||
|
|||
<view class="cert-row"> |
|||
<text class="cert-label">钱包地址</text> |
|||
<text class="cert-value">{{ detailInfo.walletAddress }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 藏品详情卡片 --> |
|||
<view class="product-detail-card"> |
|||
<view class="product-header">— 藏品详情 —</view> |
|||
<view class="product-content"> |
|||
<!-- 这里可以放置藏品的详细描述内容 --> |
|||
<text class="product-description">{{ detailInfo.description }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="memorial-detail"> |
|||
<!-- 轮播图区域 --> |
|||
<view class="banner-content"> |
|||
<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" :indicator-dots="false" |
|||
:autoplay="true" @change="swiperChange"> |
|||
<swiper-item v-for="(item, index) in topBanner" :key="index"> |
|||
<image class="top-banner" :src="showImg(item)" mode="aspectFill"></image> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="dot-container"> |
|||
<view :class="['dot-line', index == swiperIndex ? 'active' : '']" v-for="(item, index) in topBanner" |
|||
:key="index"></view> |
|||
</view> |
|||
|
|||
<!-- 页码指示器 --> |
|||
<view class="page-indicator"> |
|||
<text class="page-text">{{ swiperIndex + 1 }}/{{ topBanner.length }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 数字资产信息卡片 --> |
|||
<view class="asset-info-card"> |
|||
<view class="card-header"> |
|||
<text class="asset-title">{{ detailInfo.goodsName }}</text> |
|||
</view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">发行数量：</text> |
|||
<text class="info-value">{{ detailInfo.publishQuantity||0 }}份</text> |
|||
</view> |
|||
|
|||
<view class="divider"></view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">数字资产所有方：</text> |
|||
<text class="info-value">{{ detailInfo.ownPart||'-' }}</text> |
|||
</view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">数字资产权利方：</text> |
|||
<text class="info-value">{{ detailInfo.powerPart||'-' }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">授权品牌：</text> |
|||
<text class="info-value">{{ detailInfo.authorizeBrand||'-' }}</text> |
|||
</view> |
|||
<!-- 收藏信息 --> |
|||
<view class="collection-info"> |
|||
<view class="collection-header">— 收藏信息 —</view> |
|||
<view class="collector-info"> |
|||
<text class="collector-label">收藏者</text> |
|||
<text class="collector-name">{{ detailInfo.nickname||'--' }}</text> |
|||
<text class="collection-number">编号</text> |
|||
<text class="collection-code">{{ detailInfo.code||'--' }}</text> |
|||
<text class="collection-time-label">收藏时间</text> |
|||
<text class="collection-time">{{ detailInfo.activeTime||'--' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 认证信息卡片 --> |
|||
<view class="cert-info-card"> |
|||
<view class="cert-header">— 认证信息 —</view> |
|||
|
|||
<view class="cert-row"> |
|||
<text class="cert-label">授权码</text> |
|||
<text class="cert-value">{{ detailInfo.activeCode||"--" }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 藏品详情卡片 --> |
|||
<view class="product-detail-card"> |
|||
<view class="product-header">— 藏品详情 —</view> |
|||
<view class="product-content"> |
|||
<view class="" v-html="detailInfo.detailUrl"> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "MemorialDetail", |
|||
data() { |
|||
return { |
|||
detailInfo: { |
|||
id: "", |
|||
title: "这里是数字资产的名称", |
|||
totalSupply: "2000", |
|||
owner: "XXX博物馆", |
|||
rightHolder: "江苏大运河公司", |
|||
assetOwner: "江苏大运河公司", |
|||
collector: "XXX用户", |
|||
collectionCode: "#001-0050/1000", |
|||
collectionTime: "2025-085-04 15:20:20", |
|||
certificateCode: "SUA-DA-01-20250729A123456-001-0050/1000-v1", |
|||
contractAddress: "0xd4efaba236f7c110fe85fcbcde5489a7a3c71ec3", |
|||
transactionHash: "0xd412da236f7c110fe81ewl5fcbcde5489a7a3c7", |
|||
walletAddress: "0x8df5d733a0dd127022f7740be4f9c10ec8a23b", |
|||
image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png", |
|||
description: "这里是藏品的详细描述信息...", |
|||
}, |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
// 获取传入的参数 |
|||
if (options.id) { |
|||
this.loadDetailInfo(options.id); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 加载详情信息 |
|||
async loadDetailInfo(id) { |
|||
try { |
|||
// 这里应该调用实际的API获取详情数据 |
|||
// const response = await this.getMemorialDetail(id); |
|||
// this.detailInfo = response.data; |
|||
|
|||
// 模拟数据加载 |
|||
console.log("加载纪念册详情，ID:", id); |
|||
} catch (error) { |
|||
console.error("加载详情失败:", error); |
|||
uni.showToast({ |
|||
title: "加载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 预览主图 |
|||
previewMainImage() { |
|||
const imageUrl = this.showImg(this.detailInfo.image); |
|||
uni.previewImage({ |
|||
urls: [imageUrl], |
|||
current: imageUrl, |
|||
}); |
|||
}, |
|||
|
|||
// 图片路径处理 |
|||
showImg(img) { |
|||
if (!img) return ""; |
|||
if (img.startsWith("http")) { |
|||
return img; |
|||
} |
|||
const NEWAPIURL = "https://epic.js-dyyj.com"; |
|||
return `${NEWAPIURL}${img}`; |
|||
}, |
|||
}, |
|||
}; |
|||
export default { |
|||
name: "MemorialDetail", |
|||
data() { |
|||
return { |
|||
swiperIndex: 0, |
|||
detailInfo: { |
|||
|
|||
}, |
|||
topBanner: [] |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
// 获取传入的参数 |
|||
if (options.id) { |
|||
this.loadDetailInfo(options.id); |
|||
} |
|||
}, |
|||
methods: { |
|||
swiperChange(e) { |
|||
this.swiperIndex = e.detail.current; |
|||
}, |
|||
// 加载详情信息 |
|||
async loadDetailInfo(id) { |
|||
try { |
|||
this.Post({ |
|||
orderChildId: id |
|||
}, `/framework/order/ipOrderDetail`, "DES").then((res) => { |
|||
if (res.code == 200) { |
|||
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl) |
|||
this.detailInfo = res.data; |
|||
this.topBanner = res.data.hdUrl.split(',') |
|||
|
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}); |
|||
// 模拟数据加载 |
|||
console.log("加载纪念册详情，ID:", id); |
|||
} catch (error) { |
|||
console.error("加载详情失败:", error); |
|||
uni.showToast({ |
|||
title: "加载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 预览主图 |
|||
previewMainImage() { |
|||
const imageUrl = this.showImg(this.detailInfo.image); |
|||
uni.previewImage({ |
|||
urls: [imageUrl], |
|||
current: imageUrl, |
|||
}); |
|||
}, |
|||
|
|||
// 图片路径处理 |
|||
showImg(img) { |
|||
if (!img) return ""; |
|||
if (img.startsWith("http")) { |
|||
return img; |
|||
} |
|||
const NEWAPIURL = "https://epic.js-dyyj.com"; |
|||
return `${NEWAPIURL}${img}`; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.memorial-detail { |
|||
min-height: 100vh; |
|||
background: #f8f9fa; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
// 主图区域 |
|||
.main-image-section { |
|||
width: 100%; |
|||
height: 600rpx; |
|||
background: #f0f0f0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.main-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
// 通用卡片样式 |
|||
.asset-info-card, |
|||
.cert-info-card, |
|||
.product-detail-card { |
|||
margin: 20rpx; |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
// 数字资产信息卡片 |
|||
.asset-info-card { |
|||
.card-header { |
|||
margin-bottom: 32rpx; |
|||
|
|||
.asset-title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
align-items: flex-start; |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-right: 16rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.divider { |
|||
height: 1rpx; |
|||
background: #e0e0e0; |
|||
margin: 24rpx 0; |
|||
} |
|||
|
|||
// 收藏信息 |
|||
.collection-info { |
|||
margin-top: 40rpx; |
|||
padding: 32rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 2rpx solid #e0e0e0; |
|||
|
|||
.collection-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 24rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collector-info { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
gap: 16rpx 24rpx; |
|||
text-align: center; |
|||
|
|||
.collector-label, |
|||
.collection-number, |
|||
.collection-time-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.collector-name, |
|||
.collection-code, |
|||
.collection-time { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collection-code { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
|
|||
.collection-time { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 认证信息卡片 |
|||
.cert-info-card { |
|||
.cert-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.cert-row { |
|||
margin-bottom: 24rpx; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.cert-label { |
|||
display: block; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.cert-value { |
|||
display: block; |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
font-family: "Courier New", monospace; |
|||
word-break: break-all; |
|||
line-height: 1.5; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 藏品详情卡片 |
|||
.product-detail-card { |
|||
.product-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.product-content { |
|||
.product-description { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
.memorial-detail { |
|||
min-height: 100vh; |
|||
background: #f8f9fa; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
// 主图区域 |
|||
.main-image-section { |
|||
width: 100%; |
|||
height: 600rpx; |
|||
background: #f0f0f0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.main-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
// 通用卡片样式 |
|||
.asset-info-card, |
|||
.cert-info-card, |
|||
.product-detail-card { |
|||
margin: 20rpx; |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
// 数字资产信息卡片 |
|||
.asset-info-card { |
|||
.card-header { |
|||
margin-bottom: 32rpx; |
|||
|
|||
.asset-title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
align-items: flex-start; |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-right: 16rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.divider { |
|||
height: 1rpx; |
|||
background: #e0e0e0; |
|||
margin: 24rpx 0; |
|||
} |
|||
|
|||
// 收藏信息 |
|||
.collection-info { |
|||
margin-top: 40rpx; |
|||
padding: 32rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 2rpx solid #e0e0e0; |
|||
|
|||
.collection-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 24rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collector-info { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
gap: 16rpx 24rpx; |
|||
text-align: center; |
|||
|
|||
.collector-label, |
|||
.collection-number, |
|||
.collection-time-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.collector-name, |
|||
.collection-code, |
|||
.collection-time { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collection-code { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
|
|||
.collection-time { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 认证信息卡片 |
|||
.cert-info-card { |
|||
.cert-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.cert-row { |
|||
margin-bottom: 24rpx; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.cert-label { |
|||
display: block; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.cert-value { |
|||
display: block; |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
font-family: "Courier New", monospace; |
|||
word-break: break-all; |
|||
line-height: 1.5; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 藏品详情卡片 |
|||
.product-detail-card { |
|||
.product-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.product-content { |
|||
.product-description { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.banner-content { |
|||
width: 100%; |
|||
height: 700rpx; |
|||
position: relative; |
|||
|
|||
.top-banner { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.dot-container { |
|||
position: absolute; |
|||
bottom: 43rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
left: 0; |
|||
|
|||
.dot-line { |
|||
width: 52rpx; |
|||
height: 4rpx; |
|||
margin: 0 8rpx; |
|||
background: RGBA(189, 170, 173, 0.8); |
|||
|
|||
&.active { |
|||
background: #94fafa; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.page-indicator { |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
right: 20rpx; |
|||
// background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 10rpx; |
|||
padding: 10rpx 20rpx; |
|||
|
|||
.page-text { |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,212 +1,185 @@ |
|||
<template> |
|||
<view class="memorial-album"> |
|||
<!-- 纪念册网格 --> |
|||
<view class="memorial-grid"> |
|||
<view |
|||
class="memorial-item" |
|||
v-for="(item, index) in memorialItems" |
|||
:key="index" |
|||
@click="goToDetail(item)" |
|||
> |
|||
<view class="memorial-card"> |
|||
<image |
|||
:src="item.goodsImg.split(',')[0]" |
|||
mode="aspectFill" |
|||
class="memorial-image" |
|||
/> |
|||
<view class="memorial-info"> |
|||
<text class="memorial-title">{{ item.goodsTitle }}</text> |
|||
<text class="memorial-code">{{ item.code }}</text> |
|||
<text class="memorial-status">{{ item.ownPart }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="memorial-album"> |
|||
<!-- 纪念册网格 --> |
|||
<view class="memorial-grid"> |
|||
<view class="memorial-item" v-for="(item, index) in memorialItems" :key="index" @click="goToDetail(item)"> |
|||
<view class="memorial-card"> |
|||
<image :src="item.goodsImg.split(',')[0]" mode="aspectFill" class="memorial-image" /> |
|||
<view class="memorial-info"> |
|||
<text class="memorial-title">{{ item.goodsTitle }}</text> |
|||
<text class="memorial-code">{{ item.code }}</text> |
|||
<text class="memorial-status">{{ item.ownPart }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "MemorialAlbum", |
|||
data() { |
|||
return { |
|||
memorialItems: [ |
|||
|
|||
], |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
getList(){ |
|||
this.Post( |
|||
{ |
|||
}, |
|||
"/framework/order/ipOrderList", |
|||
"DES" |
|||
).then((res) => { |
|||
if (res.code == 200) { |
|||
this.memorialItems = res.data |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 跳转到详情页面 |
|||
goToDetail(item) { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/memorialAlbum/detail?id=${item.id}`, |
|||
}); |
|||
}, |
|||
|
|||
// 图片预览 |
|||
previewImage(imagePath) { |
|||
const imageUrl = this.showImg(imagePath); |
|||
uni.previewImage({ |
|||
urls: [imageUrl], |
|||
current: imageUrl, |
|||
}); |
|||
}, |
|||
|
|||
// 图片路径处理 |
|||
showImg(img) { |
|||
if (!img) return ""; |
|||
if (img.startsWith("http")) { |
|||
return img; |
|||
} |
|||
// 这里需要根据你的项目实际情况调整API地址 |
|||
const NEWAPIURL = "https://epic.js-dyyj.com"; |
|||
return `${NEWAPIURL}${img}`; |
|||
}, |
|||
}, |
|||
}; |
|||
export default { |
|||
name: "MemorialAlbum", |
|||
data() { |
|||
return { |
|||
memorialItems: [ |
|||
|
|||
], |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.Post({}, |
|||
"/framework/order/ipOrderList", |
|||
"DES" |
|||
).then((res) => { |
|||
if (res.code == 200) { |
|||
this.memorialItems = res.data |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 跳转到详情页面 |
|||
goToDetail(item) { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/memorialAlbum/detail?id=${item.orderChildId}`, |
|||
}); |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.memorial-album { |
|||
min-height: 100vh; |
|||
background: #f8f9fa; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
// 顶部导航 |
|||
.nav-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 30rpx; |
|||
background: white; |
|||
border-bottom: 1rpx solid #eee; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.nav-back { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.nav-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.nav-placeholder { |
|||
width: 60rpx; |
|||
} |
|||
|
|||
// 纪念册网格 |
|||
.memorial-grid { |
|||
padding: 30rpx; |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.memorial-item { |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
transition: transform 0.2s ease; |
|||
|
|||
&:active { |
|||
transform: scale(0.98); |
|||
} |
|||
} |
|||
|
|||
.memorial-card { |
|||
width: 100%; |
|||
} |
|||
|
|||
.memorial-image { |
|||
width: 100% !important; |
|||
height: 460rpx !important; |
|||
background: #f5f5f5; |
|||
display: block; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.memorial-info { |
|||
padding: 28rpx 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.memorial-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.memorial-code { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
|
|||
.memorial-status { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
// 响应式处理 |
|||
@media screen and (max-width: 400px) { |
|||
.memorial-grid { |
|||
padding: 20rpx; |
|||
gap: 15rpx; |
|||
} |
|||
|
|||
.memorial-image { |
|||
height: 460rpx !important; // 保持较高的高度，即使在小屏幕上 |
|||
} |
|||
|
|||
.memorial-info { |
|||
padding: 24rpx 20rpx; |
|||
} |
|||
|
|||
.memorial-title { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
</style> |
|||
.memorial-album { |
|||
min-height: 100vh; |
|||
background: #f8f9fa; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
// 顶部导航 |
|||
.nav-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 30rpx; |
|||
background: white; |
|||
border-bottom: 1rpx solid #eee; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.nav-back { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.nav-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.nav-placeholder { |
|||
width: 60rpx; |
|||
} |
|||
|
|||
// 纪念册网格 |
|||
.memorial-grid { |
|||
padding: 30rpx; |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.memorial-item { |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
transition: transform 0.2s ease; |
|||
|
|||
&:active { |
|||
transform: scale(0.98); |
|||
} |
|||
} |
|||
|
|||
.memorial-card { |
|||
width: 100%; |
|||
} |
|||
|
|||
.memorial-image { |
|||
width: 100% !important; |
|||
height: 460rpx !important; |
|||
background: #f5f5f5; |
|||
display: block; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.memorial-info { |
|||
padding: 28rpx 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.memorial-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.memorial-code { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
|
|||
.memorial-status { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
// 响应式处理 |
|||
@media screen and (max-width: 400px) { |
|||
.memorial-grid { |
|||
padding: 20rpx; |
|||
gap: 15rpx; |
|||
} |
|||
|
|||
.memorial-image { |
|||
height: 460rpx !important; // 保持较高的高度，即使在小屏幕上 |
|||
} |
|||
|
|||
.memorial-info { |
|||
padding: 24rpx 20rpx; |
|||
} |
|||
|
|||
.memorial-title { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue