制作商品详情页面新风格

This commit is contained in:
大灰灰
2022-09-15 02:37:33 +08:00
parent 0e87700656
commit 91982b29c5

View File

@@ -6,6 +6,8 @@
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
<u-line direction="column" :hairline="false" margin="0 8px"></u-line>
<u-icon name="home" size="22" @click="goHome"></u-icon>
<u-line direction="column" :hairline="false" margin="0 8px"></u-line>
<u-icon name="share" size="22" @click="goShare"></u-icon>
</view>
<view slot="right">
</view>
@@ -19,8 +21,19 @@
<text class="coreshop-font-16">¥</text>
<text class="coreshop-font-24">{{ product.price || '0.00' }}</text>
</view>
<view class="coreshop-flex-sub coreshop-text-left coreshop-margin-left-12 coreshop-margin-top-6">
<text class="coreshop-font-16 coreshop-text-gray coreshop-text-through">{{ priceSection }}</text>
<view class="coreshop-flex-sub coreshop-flex coreshop-text-left coreshop-margin-left-12 coreshop-margin-top-6 coreshop-justify-start coreshop-align-center">
<view class="coreshop-font-16 coreshop-text-gray coreshop-text-through">{{ priceSection }}</view>
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-column coreshop-margin-left-12" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && product.pointsDeduction > 0">
<view class="coreshop-padding-bottom-5 coreshop-font-12">
兑换价{{pointDiscountedProportion * product.pointsDeduction }}{{ pointShowName}}+{{ product.price - product.pointsDeduction}}
</view>
<view class="coreshop-font-12" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">买就送{{product.points}}{{ pointShowName}}</view>
</view>
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-column coreshop-margin-left-12" v-else>
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row">
<view class="coreshop-font-12" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">买就送{{product.points}}{{ pointShowName}}</view>
</view>
</view>
</view>
<view class="coreshop-flex coreshop-align-center">
<u-icon name="star-fill" :size="20" label="收藏" :labelSize="14" labelPos="right" @click="collection" v-if="isfav"></u-icon>
@@ -33,14 +46,10 @@
<view class="coreshop-margin-top-8 coreshop-single-line-clamp">
<text class="coreshop-font-14 coreshop-text-gray">{{ goodsInfo.brief || '' }}</text>
</view>
<view class="coreshop-flex coreshop-margin-top-8">
<view class="coreshop-flex coreshop-margin-top-8" v-if="goodsInfo.brand || goodsInfo.labels">
<u-tag :text="goodsInfo.brand.name" v-if="goodsInfo.brand"></u-tag>
<view class="tag-64 cp832" wx:if="{{$root.m1}}">
<text class="font-color-orange">832产品</text>
</view>
<view class="tag-64 shitang" wx:if="{{$root.m2}}">
<text class="font-color-blue">食堂专供</text>
<view class="coreshop-margin-left-6" v-for="item in goodsInfo.labels" :key="item.id">
<u-tag :text="item.name" :bgColor="item.style" :borderColor="item.style"></u-tag>
</view>
</view>
<view class="coreshop-margin-top-16 coreshop-padding-top-16 coreshop-solid-top coreshop-flex coreshop-justify-between coreshop-align-center coreshop-text-gray">
@@ -60,46 +69,6 @@
</view>
<!--限时秒杀-->
<!--<view class="coreshop-limited-seckill-box coreshop-bg-red coreshop-flex coreshop-justify-start">-->
<!--<text class="coreshop-text-price coreshop-font-20">{{ product.price || '0.00' }}</text>-->
<!--<text class="coreshop-text-price coreshop-font-20">{{ priceSection }}</text>
<view class="coreshop-font-xs price-4 coreshop-margin-left-20">
<view v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && product.pointsDeduction > 0">
<view class="coreshop-padding-bottom-5 coreshop-font-14">
兑换价{{pointDiscountedProportion * product.pointsDeduction }}{{ pointShowName}}+{{ product.price - product.pointsDeduction}}
</view>
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row">
<view class="coreshop-text-through coreshop-padding-bottom-5">原价{{ product.mktprice || '0.00'}}</view>
<view class="coreshop-margin-left-10">{{ goodsInfo.buyCount || '0' }} 人已购买</view>
<view class="coreshop-margin-left-10" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">购买赠送:{{product.points}}{{ pointShowName}}</view>
</view>
</view>
<view v-else>
<view class="coreshop-text-through coreshop-padding-bottom-5">原价{{ product.mktprice || '0.00'}}</view>
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row">
<view>{{ goodsInfo.buyCount || '0' }} 人已购买</view>
<view class="coreshop-margin-left-10" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">购买赠送:{{product.points}}{{ pointShowName}}</view>
</view>
</view>
</view>
<view class="coreshop-text-right coreshop-share-right">
<u-icon name="share" @click="goShare()" label="分享" size="20" labelSize="11" color="#fff" labelColor="#fff" labelPos="bottom"></u-icon>
</view>
</view>-->
<!--标题-->
<!--<view class="coreshop-bg-white coreshop-common-view-box coreshop-good-title-view-box">
<view class="title-view coreshop-text-black coreshop-font-lg coreshop-text-bold">
<view class="brand-tag" v-if="goodsInfo.brand"><u-tag :text="goodsInfo.brand.name" type="error" size="mini" /></view>
{{ goodsInfo.name || '' }}
</view>
<view class="coreshop-bg-red-light radius coreshop-margin-top-10 coreshop-title-tip-box">
<text class="coreshop-font-sm">{{ goodsInfo.brief || '' }}</text>
</view>
</view>-->
<!--促销-->
<view class="coreshop-margin-top-10 coreshop-bg-white coreshop-common-view-box" v-if="promotion.length > 0" @tap="promotionTap">
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row">
@@ -342,7 +311,7 @@
<!--底部操作-->
<view class="coreshop-good-footer-fixed">
<view class="tabbar">
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-5">
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-4">
<!-- 客服按钮 -->
<!-- #ifdef H5 || APP-PLUS-NVUE || APP-PLUS -->
<view class="action" @click="showChat()">
@@ -358,12 +327,6 @@
</button>
</view>
<!-- #endif -->
<view class="action" @click="collection">
<button class="noButtonStyle">
<u-icon name="star-fill" :size="20" label="已收藏" :labelSize="12" labelPos="bottom" v-if="isfav"></u-icon>
<u-icon name="star" :size="20" label="加收藏" :labelSize="12" labelPos="bottom" v-else></u-icon>
</button>
</view>
<view class="action" @click="redirectCart">
<button class="noButtonStyle">
<u-badge type="warning" :value="cartNums" showZero="false" absolute="true" :offset="[1, 4]"></u-badge>
@@ -702,7 +665,7 @@
if (res.data.minPrice != res.data.maxPrice) {
_this.priceSection = res.data.minPrice + '~' + res.data.maxPrice;
} else {
_this.priceSection = res.data.product.price;
_this.priceSection = res.data.product.mktprice;
}
if (_this.goodsInfo.album) {