feat: 首页改造
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<view class="seckill_card_container" @click="$emit('click', item)">
|
||||
<view class="seckill_card_container" @click="onSelectProct(item)">
|
||||
<!-- Left side image with optional countdown overlay -->
|
||||
<view class="seckill_card_left">
|
||||
<up-image :src="item.url || item.image || item.accessUrl" width="220rpx" height="220rpx" bgColor="#f1f6ff00" shape="square" radius="16rpx"></up-image>
|
||||
<up-image :src="item.url || item.image || item.accessUrl" width="220rpx" height="220rpx" bgColor="#f1f6ff00"
|
||||
shape="square" radius="16rpx"></up-image>
|
||||
<view class="countdown_bar" v-if="showCountdown && countdownText">
|
||||
<text class="countdown_text">{{ countdownText }}</text>
|
||||
</view>
|
||||
@@ -10,37 +11,44 @@
|
||||
|
||||
<!-- Right side content -->
|
||||
<view class="seckill_card_right">
|
||||
<!-- Tags row (Placeholders, toggleable via item flags) -->
|
||||
<view class="tags_row">
|
||||
<view class="tag_badge seckill" v-if="isSeckill">限时秒杀</view>
|
||||
<view class="tag_badge limit" v-if="isLimitTime">限时</view>
|
||||
<view class="tag_badge special" v-if="isSpecialSupply">
|
||||
<view class="vip_icon">V</view>特供
|
||||
<view>
|
||||
<!-- <view class="tags_row" v-if="Array.isArray(item.tags)"> -->
|
||||
<view class="tags_row">
|
||||
<image v-for="i in item.goodsTagList" :key="i.mchId" :src="i.icon"
|
||||
class="tag_image" mode="heightFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品名称 -->
|
||||
<view class="product_title">{{ item.title }}</view>
|
||||
</view>
|
||||
|
||||
<!-- Title -->
|
||||
<view class="product_title">{{ item.title || '商品名称' }}</view>
|
||||
|
||||
<!-- Coupon tag (秒杀券立减) -->
|
||||
<!-- (秒杀券立减) -->
|
||||
<view class="coupon_row" v-if="hasCoupon">
|
||||
<view class="coupon_badge">
|
||||
<view class="coupon_badge" >
|
||||
<!-- <view class="coupon_badge" v-if="activedType === 'seckill'"> -->
|
||||
<text class="flash_icon">⚡</text>
|
||||
<text class="coupon_text">秒杀券立减{{ item.couponAmount || '8.8' }}元</text>
|
||||
<text class="coupon_text" v-if="item.secDiscount || item.subsidy">加倍补{{ item.secDiscount || item.subsidy }}元</text>
|
||||
</view>
|
||||
<!-- <view class="coupon_badge" v-else>
|
||||
<text class="flash_icon">⚡</text>
|
||||
<text class="coupon_text">加倍补{{ item.subsidy }}积分</text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- Price and action card row -->
|
||||
<view class="price_action_row">
|
||||
<view class="price_section">
|
||||
<text class="price_symbol">¥</text>
|
||||
<text class="price_integer">{{ priceParts.integer }}</text>
|
||||
<text class="price_decimal">.{{ priceParts.decimal }}</text>
|
||||
<text class="original_price">¥{{ item.originalPrice || item.price || '0.00' }}</text>
|
||||
<text class="price_integer">{{ item.price }}</text>
|
||||
<text class="original_price seckill" >{{ `${attributes.leftTime ?
|
||||
`只剩${attributes.leftTime}` : ''}` }}</text>
|
||||
<!-- <text class="original_price" v-else>¥{{ formatOriginalPrice }}</text> -->
|
||||
</view>
|
||||
<!-- Alarm clock button -->
|
||||
<view class="alarm_btn_wrapper" @click.stop="$emit('action', item)">
|
||||
<up-image src="https://static.tbmall.xin/static/new-home/home_3.png" width="36rpx" height="36rpx" bgColor="#f1f6ff00"></up-image>
|
||||
<image class="uni-image" v-if="activedType === 'seckill'" src="https://static.tbmall.xin/static/new-home/home_3.png"></image>
|
||||
<image class="uni-image seckill-icon" v-else
|
||||
src="https://static.tbmall.xin/static/home/qiang.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -51,12 +59,12 @@
|
||||
export default {
|
||||
name: "product-seckill-card",
|
||||
props: {
|
||||
// Product details object
|
||||
// 单个商品
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
// Control showing countdown bar
|
||||
// 倒计时
|
||||
showCountdown: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@@ -65,6 +73,13 @@ export default {
|
||||
timeObj: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
activedType: {
|
||||
type: String,
|
||||
},
|
||||
attributes: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -84,31 +99,20 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
priceParts() {
|
||||
const price = String(this.item.price || '0.00');
|
||||
const parts = price.split('.');
|
||||
return {
|
||||
integer: parts[0] || '0',
|
||||
decimal: parts[1] || '00'
|
||||
};
|
||||
},
|
||||
hasCoupon() {
|
||||
return this.item.couponAmount !== undefined || this.item.couponText !== undefined;
|
||||
return this.item.secDiscount || this.item.subsidy;
|
||||
},
|
||||
isSeckill() {
|
||||
return this.item.isSeckill !== undefined ? this.item.isSeckill : true;
|
||||
},
|
||||
isLimitTime() {
|
||||
return this.item.isLimitTime !== undefined ? this.item.isLimitTime : true;
|
||||
},
|
||||
isSpecialSupply() {
|
||||
return this.item.isSpecialSupply !== undefined ? this.item.isSpecialSupply : true;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearTimer();
|
||||
},
|
||||
methods: {
|
||||
// 商品
|
||||
onSelectProct(item) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/other_package/productInfo/productInfo?id=" + item.id + "&activedType=" + this.activedType + "&activityId=" + item.activityId,
|
||||
});
|
||||
},
|
||||
startCountdown() {
|
||||
this.clearTimer();
|
||||
this.updateCountdown();
|
||||
@@ -160,11 +164,9 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.seckill_card_container {
|
||||
display: flex;
|
||||
padding: 24rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -206,38 +208,11 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
gap: 8rpx;
|
||||
|
||||
.tag_badge {
|
||||
font-size: 18rpx;
|
||||
font-weight: bold;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
margin-right: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.seckill {
|
||||
background-color: #ff1212;
|
||||
color: #ffffff;
|
||||
border: 1rpx dashed #ffffff;
|
||||
}
|
||||
|
||||
&.limit {
|
||||
background-color: #ae61fa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.special {
|
||||
background-color: #333333;
|
||||
color: #e2d2b2; // Gold/bronze text color
|
||||
border: 1rpx solid #e2d2b2;
|
||||
padding: 3rpx 10rpx;
|
||||
.tag_image {
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -256,8 +231,8 @@ export default {
|
||||
}
|
||||
|
||||
.product_title {
|
||||
font-size: 28rpx;
|
||||
color: #111111;
|
||||
font-size: 26rpx;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
word-break: break-all;
|
||||
@@ -271,18 +246,32 @@ export default {
|
||||
|
||||
.coupon_row {
|
||||
display: flex;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.coupon_badge {
|
||||
background: linear-gradient(90deg, #b164fb 0%, #7632ff 100%);
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.coupon_badge {
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
background: linear-gradient(90deg, #b164fb 0%, #7632ff 100%);
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8rpx;
|
||||
left: 24rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-top: 8rpx solid #b164fb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flash_icon {
|
||||
@@ -294,11 +283,29 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f1ebff; // Light purple box background
|
||||
background: linear-gradient(270deg, #F0E7FE 0%, rgba(240, 231, 254, 0) 100%);
|
||||
border-radius: 12rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.uni-image {
|
||||
display: block;
|
||||
width: 80rpx;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.seckill-icon {
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price_section {
|
||||
@@ -329,14 +336,18 @@ export default {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
margin-left: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&.seckill {
|
||||
color: #7934F6;
|
||||
font-size: 20rpx;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alarm_btn_wrapper {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
Reference in New Issue
Block a user