bingyi/shopxo-uniapp
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo-uniapp.git synced 2026-06-07 02:12:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

商品详情价格信息组合布局优化

Browse Source
This commit is contained in:
gongfuxiang
2026-03-20 22:28:48 +08:00
parent 36ad3f0b2f
commit 8e66dfa87f
7 changed files with 115 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/countdown/countdown.vue
View File

@ -201,7 +201,7 @@
-moz-border-radius: 8rpx;
border-radius: 8rpx;
color: #fff;
min-width: 40rpx;
min-width: 46rpx;
text-align: center;
}
.countdown .ds {

2
components/wholesale-rules/wholesale-rules.vue
View File

@ -3,7 +3,7 @@
<!-- 批发规则展示 -->
<view v-if="(data || null) != null" class="plugins-wholesale-container scroll-view-horizontal" :class="propIsAlone ? 'is-alone' : ''">
<scroll-view scroll-x="true">
<view :class="'plugins-wholesale-container-rules-view wh-auto padding-main item-number-'+data.rules.length" @tap="popup_wholesale_event">
<view :class="'plugins-wholesale-container-rules-view wh-auto padding-horizontal-main padding-top-main padding-bottom-sm bs-bb item-number-'+data.rules.length" @tap="popup_wholesale_event">
<view v-for="(item, index) in data.rules" :key="index" class="item">
<view class="price">
<text v-if="item.arr.type == 1" class="cr-red text-size-xs">{{propCurrencySymbol}}</text>

28
pages/goods-detail/goods-detail.css
View File

@ -156,14 +156,8 @@
.goods-base-content .goods-title-content .goods-title {
font-size: 30rpx;
line-height: 40rpx;
font-weight: bold;
width: calc(100% - 200rpx);
}
.goods-base-content image {
width: 40rpx;
height: 40rpx;
}
.goods-base-content .collect {
.goods-base-content .favor {
width: 76rpx;
}
@ -246,22 +240,10 @@
/**
* 价格信息与倒计时（限时秒杀，预售）
*/
.countdown-content {
width: 38%;
}
.countdown-content .time-title {
font-size: 38rpx;
margin-bottom: 10rpx;
}
.goods-base-price-countdown {
background-color: #e84742 !important;
}
.goods-base-price-countdown .price-content {
background-color: #f9534e;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 60%;
min-height: 164rpx;
}
.goods-base-price-countdown .price-content .price-icon {
border-color: #fff;
@ -275,15 +257,9 @@
color: #fff !important;
}
.goods-base-price-countdown .price-content .original-price,
.goods-base-price-countdown .price-content .unit{
.goods-base-price-countdown .price-content .unit {
color: #ffcece !important;
}
.price-content .price-icon.countdown-drift {
position: absolute;
right: 20rpx;
bottom: 20rpx;
margin-right: 0;
}
/*
* 商品参数

147
pages/goods-detail/goods-detail.vue
View File

@ -75,75 +75,93 @@
</view>
</view>
<!-- 价格信息 -->
<view class="goods-base-price bg-white oh spacing-mb" :class="countdown_is_valid ? 'goods-base-price-countdown' : ''" :style="countdown_is_valid ? 'background-color: '+countdown_data.config.goods_detail_bg_color+' !important;' : ''">
<!-- 基础信息 -->
<view class="goods-base-price bg-white oh spacing-mb" :class="countdown_is_valid ? 'goods-base-price-countdown' : ''" :style="countdown_is_valid ? 'background-image: url(' + countdown_data.config.goods_detail_header + ');background-color: '+countdown_data.config.goods_detail_bg_color+' !important;' : ''">
<!-- 批发规则、未隐藏商品售价的时候独立行展示 -->
<block v-if="(plugins_wholesale_data || null) != null && (plugins_wholesale_data.is_hide_goods_price || 0) != 1">
<component-wholesale-rules :propIsPopup="true" :propCurrencySymbol="currency_symbol" :propData="plugins_wholesale_data" :propIsAlone="true"></component-wholesale-rules>
</block>
<!-- 价格 -->
<view class="price-content padding-vertical-main padding-left-main bs-bb fl" :style="countdown_is_valid ? 'background-image: url(' + countdown_data.config.goods_detail_header + ');background-color: '+countdown_data.config.goods_detail_bg_color+' !important;' : ''">
<!-- 批发插件是否开启隐藏价格信息 -->
<block v-if="(plugins_wholesale_data || null) == null || (plugins_wholesale_data.is_hide_goods_price || 0) != 1">
<!-- 售价 -->
<view v-if="(goods.show_field_price_status || 0) == 1" class="item single-text">
<!-- 图标 -->
<text v-if="(show_field_price_text || null) != null" :class="'price-icon round va-m margin-right-xs '+((countdown_is_valid) ? 'countdown-drift' : '')">{{ show_field_price_text }}</text>
<!-- 售价 -->
<text class="sales-price va-m">{{ goods.show_price_symbol }}{{ goods_spec_base_price }}</text>
<text class="sales-price-unit text-size-xs cr-grey va-m">{{ goods_show_price_unit }}</text>
<!-- 倒计时 -->
<view v-if="countdown_is_valid" class="padding-horizontal-main padding-top-main oh">
<view class="cr-white text-size-xl fw-b single-text fl">{{ countdown_data.config.goods_detail_title }}</view>
<view class="fr">
<view class="dis-inline-block va-m">
<iconfont name="icon-timing-time" color="#ffe500" size="40rpx"></iconfont>
</view>
<!-- 预售定金信息 -->
<view v-if="countdown_is_valid && (countdown_data.presale_goods || null) != null" class="item cr-white">
<text class="text-size-xs va-m">{{ countdown_data.config.goods_detail_icon }}</text>
<text class="text-size-xl margin-right-sm va-m">{{ goods.show_price_symbol }}{{ countdown_data.presale_goods.deposit_price }}</text>
<text v-if="countdown_data.presale_goods.deduct_price > 0" class="price-icon round va-m">{{ countdown_data.config.goods_detail_deduct_text }}{{ goods.show_price_symbol }}{{ countdown_data.presale_goods.deduct_price }}</text>
<view class="dis-inline-block va-m margin-left-sm">
<component-countdown
:propHour="countdown_data.time.hours"
:propMinute="countdown_data.time.minutes"
:propSecond="countdown_data.time.seconds"
:propMsecShow="true"
propTimeSize="38"
propTimePadding="0"
propTimeWeight="bold"
propTimeBackgroundColor="transparent"
propTimeColor="#ffe500"
propDsColor="#fff"
></component-countdown>
</view>
<!-- 原价 -->
<view v-if="(goods.show_field_original_price_status || 0) == 1 && (goods_spec_base_original_price || null) != null && goods_spec_base_original_price != 0" class="item original-price single-text">{{ goods.show_original_price_symbol }}{{ goods_spec_base_original_price }}{{ goods_show_original_price_unit }}</view>
<!-- 积分兑换 -->
<view v-if="(goods.plugins_points_data || null) != null && (goods.plugins_points_data.is_goods_detail_show || 0) == 1" class="item">
<text class="points-price-value text-size-lg cr-base va-m">{{ goods.plugins_points_data.points_value }}</text>
<text class="points-price-unit text-size-xs cr-grey va-m margin-left-xs">{{goods.plugins_points_data.points_unit}}</text>
</view>
</block>
<block v-else>
<!-- 批发开启了隐藏价格，则价格容器这里展示批发价格信息 -->
<component-wholesale-rules :propIsPopup="true" :propCurrencySymbol="currency_symbol" :propData="plugins_wholesale_data"></component-wholesale-rules>
</block>
</view>
</view>
<block v-if="countdown_is_valid">
<view class="countdown-content padding-top-lg padding-bottom-lg padding-left-xs padding-right-xs fr tc">
<view class="time-title cr-white single-text">{{ countdown_data.config.goods_detail_title }}</view>
<component-countdown
:propHour="countdown_data.time.hours"
:propMinute="countdown_data.time.minutes"
:propSecond="countdown_data.time.seconds"
:propMsecShow="true"
propTimeSize="32"
propTimePadding="0"
propTimeWeight="bold"
propTimeBackgroundColor="transparent"
propTimeColor="#ffe500"
propDsColor="#fff"
></component-countdown>
<!-- 价格信息 -->
<view class="oh">
<!-- 价格 -->
<view class="price-content padding-vertical-main padding-left-main bs-bb fl">
<!-- 批发插件是否开启隐藏价格信息 -->
<block v-if="(plugins_wholesale_data || null) == null || (plugins_wholesale_data.is_hide_goods_price || 0) != 1">
<!-- 售价 -->
<view v-if="(goods.show_field_price_status || 0) == 1" class="item single-text">
<!-- 图标 -->
<text v-if="(show_field_price_text || null) != null" class="price-icon round va-m margin-right-xs">{{ show_field_price_text }}</text>
<!-- 售价 -->
<text class="sales-price va-m">{{ goods.show_price_symbol }}{{ goods_spec_base_price }}</text>
<text class="sales-price-unit text-size-xs cr-grey va-m">{{ goods_show_price_unit }}</text>
</view>
<!-- 预售定金信息 -->
<view v-if="countdown_is_valid && (countdown_data.presale_goods || null) != null" class="item cr-white">
<text class="text-size-xs va-m">{{ countdown_data.config.goods_detail_icon }}</text>
<text class="text-size-xl margin-right-sm va-m">{{ goods.show_price_symbol }}{{ countdown_data.presale_goods.deposit_price }}</text>
<text v-if="countdown_data.presale_goods.deduct_price > 0" class="price-icon round va-m">{{ countdown_data.config.goods_detail_deduct_text }}{{ goods.show_price_symbol }}{{ countdown_data.presale_goods.deduct_price }}</text>
</view>
<!-- 原价 -->
<view v-if="(goods.show_field_original_price_status || 0) == 1 && (goods_spec_base_original_price || null) != null && goods_spec_base_original_price != 0" class="item original-price single-text">{{ goods.show_original_price_symbol }}{{ goods_spec_base_original_price }}{{ goods_show_original_price_unit }}</view>
<!-- 积分兑换 -->
<view v-if="(goods.plugins_points_data || null) != null && (goods.plugins_points_data.is_goods_detail_show || 0) == 1" class="item">
<text class="points-price-value text-size-lg cr-base va-m">{{ goods.plugins_points_data.points_value }}</text>
<text class="points-price-unit text-size-xs cr-grey va-m margin-left-xs">{{goods.plugins_points_data.points_unit}}</text>
</view>
</block>
<block v-else>
<!-- 批发开启了隐藏价格，则价格容器这里展示批发价格信息 -->
<component-wholesale-rules :propIsPopup="true" :propCurrencySymbol="currency_symbol" :propData="plugins_wholesale_data"></component-wholesale-rules>
</block>
</view>
</block>
<block v-else>
<!-- 右侧操作 -->
<view class="goods-base-right-opt padding-top-lg padding-bottom-lg padding-left-xs padding-right-main fr oh">
<!-- 收藏 -->
<view class="collect tc cp fr margin-left" @tap="goods_favor_event">
<image :src="common_static_url + 'favor' + (nav_favor_button_info.status == 1 ? '-active' : '') + '-icon.png'" mode="scaleToFill" class="dis-block auto"></image>
<view :class="'cr-grey text-size-xs ' + (nav_favor_button_info.status == 1 ? 'cr-main' : 'cr-grey')">{{ nav_favor_button_info.text }}</view>
</view>
<view class="goods-base-right-opt padding-vertical-main padding-right-main padding-left-xs fr oh">
<!-- 分享 -->
<view class="goods-share tc cp fr" @tap="popup_share_event">
<image :src="common_static_url + 'share-icon.png'" mode="scaleToFill" class="dis-block auto"></image>
<view class="cr-grey text-size-xs">{{$t('common.share')}}</view>
<view class="goods-share tc cp fl" @tap="popup_share_event">
<view>
<iconfont name="icon-share-circle" :color="countdown_is_valid ? '#fff' : '#999'" size="38rpx" propClass="lh-il"></iconfont>
</view>
<view :class="'text-size-xs '+(countdown_is_valid ? 'cr-white' : 'cr-grey')">{{$t('common.share')}}</view>
</view>
<!-- 收藏 -->
<view class="favor tc cp fr margin-left" @tap="goods_favor_event">
<view>
<iconfont :name="'icon-heart'+(nav_favor_button_info.status == 1 ? '' : '-o')" :color="countdown_is_valid ? '#fff' : (nav_favor_button_info.status == 1 ? theme_color : '#999')" size="38rpx" propClass="lh-il"></iconfont>
</view>
<view :class="'text-size-xs ' + (countdown_is_valid ? 'cr-white' : (nav_favor_button_info.status == 1 ? 'cr-main' : 'cr-grey'))">{{ nav_favor_button_info.text }}</view>
</view>
</view>
</block>
</view>
<!-- 预售定金信息 -->
<view v-if="countdown_is_valid && (countdown_data.presale_goods || null) != null" class="padding-horizontal-main padding-bottom-main cr-white text-size-xs">
<view>{{countdown_data.presale_goods.lastpay_tips}}</view>
<view>{{countdown_data.presale_goods.delivery_tips}}</view>
</view>
</view>
<view class="padding-horizontal-main">
@ -152,7 +170,7 @@
<view class="padding-main">
<view class="goods-title-content oh flex-row jc-sb align-c">
<!-- 标题容器 -->
<view class="goods-title flex-1 flex-width" :style="'color:' + goods.title_color">
<view class="goods-title fw-b flex-1 flex-width" :style="'color:' + goods.title_color">
<!-- icon -->
<block v-if="(goods.plugins_view_icon_data || null) != null && goods.plugins_view_icon_data.length > 0">
<block v-for="(item, index) in goods.plugins_view_icon_data" :key="index">
@ -167,18 +185,6 @@
<!-- 标题 -->
<text class="va-m">{{ goods.title }}</text>
</view>
<view v-if="(countdown_data || null) !== null" class="flex-row align-c padding-left-main">
<!-- 分享 -->
<view class="goods-share tc cp" @tap="popup_share_event">
<image :src="common_static_url + 'share-icon.png'" mode="scaleToFill" class="dis-block auto"></image>
<view class="cr-grey text-size-xs">{{$t('common.share')}}</view>
</view>
<!-- 收藏 -->
<view class="collect tc cp margin-left-xxxl" @tap="goods_favor_event">
<image :src="common_static_url + 'favor' + (nav_favor_button_info.status == 1 ? '-active' : '') + '-icon.png'" mode="scaleToFill" class="dis-block auto"></image>
<view :class="'cr-grey text-size-xs ' + (nav_favor_button_info.status == 1 ? 'cr-main' : 'cr-grey')">{{ nav_favor_button_info.text }}</view>
</view>
</view>
</view>
<!-- 简述 -->
<view v-if="(goods.simple_desc || null) != null" class="cr-red text-size-xs margin-top-sm">{{ goods.simple_desc }}</view>
@ -682,6 +688,7 @@
data() {
return {
theme_view: app.globalData.get_theme_value_view(),
theme_color: app.globalData.get_theme_color(),
status_bar_height: bar_height,
common_static_url: common_static_url,
bottom_fixed_style: '',

14
static/icon/iconfont.css
View File

File diff suppressed because one or more lines are too long

21
static/icon/iconfont.json
View File

@ -5,6 +5,27 @@
"css_prefix_text": "icon-",
"description": "1. diy, form, 小程序仅base64, TIF，（web端也可以使用这个方式）；2. web端 Base64, WOFF2, WOFF, TEF, SVG, EOT",
"glyphs": [
{
"icon_id": "16534420",
"name": "分享-圆形",
"font_class": "share-circle",
"unicode": "e62f",
"unicode_decimal": 58927
},
{
"icon_id": "40047917",
"name": "进销存更多",
"font_class": "more",
"unicode": "e76f",
"unicode_decimal": 59247
},
{
"icon_id": "15872071",
"name": "没有数据",
"font_class": "no-data",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "39482322",
"name": "医生",

BIN
static/icon/iconfont.ttf
View File

Binary file not shown.