shang/yfs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
zpc 2025-04-07 01:07:20 +08:00
parent f691d86c72
commit 5af976d289
4 changed files with 2332 additions and 2168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
components/detail-list-item/detail-list-item.vue
View File

@ -1,37 +1,47 @@
<template>
<view class="res-item" @click="handleItemClick">
<view class="pic center">
<image :src="item.imgurl" lazy-load mode="aspectFill"></image>
<view class="tag center"
:style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
{{ item.shang_info ? item.shang_info.title : "" }}
<!-- 图片插槽 -->
<slot name="image">
<view class="pic center" :style="{ height: imageHeight }">
<image :src="item.imgurl" lazy-load mode="aspectFill" :style="{ height: imageHeight }"></image>
<view class="tag center" v-if="item.shang_info != null"
:style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
{{ item.shang_info ? item.shang_info.title : "" }}
</view>
<view class="num center" v-if="item.stock != null">{{ item.surplus_stock }}/{{ item.stock }}</view>
<!-- 预售标签 -->
<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
<view v-if="item.doubling != null && item.doubling > 1" class="yu-tag ziti"
style="top:75%;right: 15rpx; font-size:40rpx;color: #FF5722;font-style: italic;transform: skewX(-10deg);">x{{
item.doubling }}</view>
<!-- 售罄遮罩 -->
<view class="sold-out-mask center" v-if="item.surplus_stock != null && item.surplus_stock <= 0">
<text>售罄</text>
</view>
</view>
<view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
<!-- 预售标签 -->
<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
<!-- 售罄遮罩 -->
<view class="sold-out-mask center" v-if="item.surplus_stock <= 0">
<text>售罄</text>
</slot>
<!-- 内容插槽 -->
<slot name="content">
<view class="item-info">
<view class="item-title hang1">
<text>{{ item.title }}</text>
</view>
<view class="item-probability hang1">
<text>{{ item.pro }}</text>
</view>
<view class="item-price hang1">
<text>售价：<text style="font-size: 21rpx;">￥</text>{{ item.sc_money }}</text>
</view>
</view>
</view>
<view class="item-info">
<view class="item-title hang1">
<text>{{ item.title }}</text>
</view>
<view class="item-probability hang1">
<text>{{ item.pro }}</text>
</view>
<view class="item-price hang1">
<text>售价：<text style="font-size: 21rpx;">￥</text>{{ item.sc_money }}</text>
</view>
</view>
</slot>
</view>
</template>
<script>
export default {
name: 'DetailListItem',
props: {
/**
* 商品数据项
@ -50,9 +60,18 @@ export default {
type: Object,
required: true,
default: () => ({})
},
/**
* 图片高度
* @type {String}
*/
imageHeight: {
type: String,
default: '220rpx'
}
},
methods: {
/**
* 处理点击事件
@ -80,14 +99,12 @@ export default {
.pic {
width: 100%;
height: 180rpx;
position: relative;
background: #d8d8d8;
border-radius: 16rpx 16rpx 0rpx 0rpx;
>image {
width: 100%;
height: 180rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
}
@ -148,7 +165,7 @@ export default {
line-height: 28rpx;
color: #333333;
}
// 售罄遮罩
.sold-out-mask {
position: absolute;
@ -170,7 +187,7 @@ export default {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
}
.tag {
position: absolute;
display: flex;
@ -200,4 +217,4 @@ export default {
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
}
}
</style>
</style>

19
components/detail-preview-popup/detail-preview-popup.vue
View File

@ -7,7 +7,7 @@
<!-- 正面：商品图片 -->
<view class="front">
<view class="pic center relative" @click="toggleList">
<image :src="innerImgUrl" lazy-load mode="aspectFit"></image>
<image :src="innerImgUrl" lazy-load mode="aspectFill"></image>
<view class="type-tag justify-center"
:style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
v-if="innerTipTitle">{{ innerTipTitle }}</view>
@ -32,12 +32,8 @@
</view>
<!-- 赏品列表内容 -->
<view class="res-list" v-else>
<detail-list-item
v-for="(item, i) in children"
:key="item.id || i"
:item="item"
@click="handleItemClick"
/>
<detail-list-item v-for="(item, i) in children" :key="item.id || i" :item="item" imageHeight="180rpx"
@click="handleItemClick" />
</view>
</scroll-view>
</view>
@ -228,9 +224,11 @@ export default {
this.loadError = false;
this.showList = false;
this.isTips = false;
this.dataItem = data.dataItem;
// 更新商品基本信息
if (data.dataItem) {
console.log(data.dataItem.shang_info.color);
const item = data.dataItem;
this.innerTitle = item.title || '';
this.innerImgUrl = item.imgurl || '';
@ -241,11 +239,12 @@ export default {
// 更新其他信息
if (data.productType) this.innerProductType = data.productType;
if (data.extraInfo) this.innerExtraInfo = data.extraInfo;
console.log('data.goods', data.goods, data.dataItem);
// 设置商品和数据项
if (data.dataItem && data.goods && data.dataItem.goods_type == 4) {
this.goods = data.goods;
this.dataItem = data.dataItem;
this.isTips = true;
this.children = [];
}
@ -585,6 +584,7 @@ export default {
}
@keyframes bounce {
0%,
100% {
transform: scale(0);
@ -595,5 +595,6 @@ export default {
transform: scale(1);
opacity: 1;
}
}
</style>

81
pages/shouye/detail.vue
View File

@ -89,8 +89,21 @@
</view>
<!-- 赏品列表 -->
<view class="list">
<detail-list-item v-for="(item, i) in pageData.goodslist" :key="i" :item="item"
@click="previewDetail" />
<detail-list-item v-for="(item, i) in pageData.goodslist" :key="i" :item="item" @click="previewDetail">
<template #content>
<view class="item-info">
<view class="item-title hang1">
<text>{{ item.title }}</text>
</view>
<view class="item-probability hang1">
<text>{{ item.pro }}</text>
</view>
<view class="item-price hang1">
<text>售价:<text style="font-size: 22rpx;">￥{{ item.sc_money }}</text></text>
</view>
</view>
</template>
</detail-list-item>
</view>
</view>
@ -1383,5 +1396,69 @@ export default {
height: 1624rpx;
}
}
.item-info {
padding: 5rpx 0;
}
.item-title {
padding: 0 2%;
margin: 1rpx 0;
width: 100%;
font-size: 21rpx;
text-align: left;
height: 35rpx;
line-height: 35rpx;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-probability {
padding: 0 2%;
margin: 1rpx 0;
width: 100%;
font-size: 21rpx;
text-align: left;
height: 35rpx;
line-height: 35rpx;
color: #f39205;
}
.item-price {
padding: 0 2%;
margin: 1rpx 0;
width: 100%;
font-size: 21rpx;
text-align: left;
height: 35rpx;
line-height: 35rpx;
color: #333333;
}
// 售罄遮罩
.sold-out-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
border-radius: 16rpx 16rpx 0 0;
z-index: 10;
text {
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
}
}
</style>

4323
pages/shouye/detail_wuxian.vue
View File

File diff suppressed because it is too large Load Diff