shop4.3.57/components/page-component/goods/bd-info.vue

<template>
    <view class="bd-info">
        <view class="dir-left-nowrap bd-price-share">
            <view class="box-grow-1" :class="isNegotiable === 1 ? 'cross-center' : ''">
                <template v-if="isNegotiable !== 1">
                    <view v-if="isShowPrice">
                        <template v-if="levelShow === 1">
                            <view class="dir-left-nowrap cross-bottom">
                                <view class="bd-price box-grow-0" :class="theme.color">
                                    <app-price :max="`${priceMemberMax}`" :min="`${priceMemberMin}`" :default-price="`${price}`" :theme="theme.theme"></app-price>
                                </view>
                                <view v-if="isShowMember" class="bd-member-mark">
                                    <app-member-mark :theme="theme"></app-member-mark>
                                </view>
                                <app-sup-vip v-if="discount" :is_vip_card_user="isVipCardUser" margin="0 0 0 13rpx" :discount="discount"></app-sup-vip>
                            </view>
                            <view class="dir-left-nowrap cross-bottom">
                                <view v-if="isUnderlinePrice == 1" :class="[theme.color, 'box-grow-0', 'bd-member-price']">
                                    <app-price :price="`${price}`" type="text-price-all"></app-price>
                                </view>
                                <view v-if="isSales === 1" class="bd-sales">销量{{sales}}{{unit}}</view>
                            </view>
                        </template>
                       <template v-else>
                           <view class="dir-left-nowrap cross-bottom">
                               <view :class="[theme.color, 'bd-price']">
                                   <app-price :max="`${priceMax}`" :min="`${priceMin}`"  type="text-price-all" :default-price="`${price}`"></app-price>
                               </view>
                               <view v-if="isUnderlinePrice == 1" class="bd-origin-price" >
                                   <app-price :price="`${originalPrice}`" type="text-price-all"></app-price>
                               </view>
                               <app-sup-vip v-if="discount" :is_vip_card_user="isVipCardUser" margin="0 0 0 13rpx" :discount="discount"></app-sup-vip>
                           </view>
                       </template>
                    </view>
                </template>
                <template v-else>
                    <text :class="[theme.color, 'bd-negotiable']">价格面议</text>
                </template>
            </view>
        </view>
        <text class="bd-name u-line-2">
            {{name}}
            <text v-if="isSales === 1" class="bd-sales" >销量{{sales}}{{unit}}</text>
        </text>
        <text class="bd-subtitle u-line-3" v-if="subtitle">{{subtitle}}</text>
        <slot></slot>

        <view class="bd-tags">
            <div class="bd-tag-group">
                <view class="bd-tag">
                    <image src="../../../static/image/icon/icon-zheng.png"></image>
                    <text>正品保证</text>
                </view>
                <view class="bd-tag">
                    <image src="../../../static/image/icon/icon-tui.png" style="width: 34rpx;"></image>
                    <text>退换无忧</text>
                </view>
            </div>
            <block v-if="isShowShare" >
                <view class="bd-tag bd-tag-share" @click="shareClick" style="margin-right: 0;background-color:#F84469;">
                    <image src="../../../static/image/icon/icon-share1.png"></image>
                    <text style="background-color:#F84469;color: #fff;">分享商品</text>
                </view>
            </block>
            <template v-if="!isShowShare && $slots.share">
                <view class="bd-share">
                    <slot name="share"></slot>
                </view>
            </template>
            <template v-if="isShowShare">
                <bd-quick-share
                        v-model="quickShareShow"
                        @quickShare="quickShare"
                        :goods-id="goodsId"
                        :extra-quick-share="extraQuickShare"
                        :app-share-pic="appSharePic"
                        :app-share-title="appShareTitle"
                ></bd-quick-share>
                <app-share-qr-code
                        v-model="shareShow"
                        :url="newShareUrl"
                        :goods="goods"
                        :poster-config="posterConfig"
                        :poster-generate="posterGenerate"
                        :has-poster-nav="hasPosterNav"
                ></app-share-qr-code>
            </template>
        </view>

        <app-vip-card v-if="isVip" background="#fff" top="20rpx"></app-vip-card>
        <view class="bd-margin" v-if="flashSale">
            <bd-flash-sale :flash-sale="flashSale" :theme="theme"></bd-flash-sale>
        </view>
        <view class="bd-margin" v-if="levelShow === 21 && isNegotiable === 0">
            <view class="bd-vip" @click="goToMember">
                <img :src="root+'/web/statics/img/app/common/vip.png'" alt="">
            </view>
        </view>
    </view>
</template>

<script>
    import AppVipCard from '@/components/page-component/app-vip-card/app-vip-card';
    import bdFlashSale from '@/components/page-component/goods/bd-flash-sale.vue';
    import appPrice from '@/components/page-component/goods/app-price.vue';
    import bdJoinMember from '@/components/page-component/goods/bd-join-member.vue';
    import appMemberMark from '@/components/page-component/app-member-mark/app-member-mark.vue';
    import bdQuickShare from '@/components/page-component/goods/bd-quick-share.vue';
    import appShareQrCode from '../../page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

    import {mapState} from "vuex";

    export default {
        name: "u-info",
        props: {
            name: String,
            subtitle: String,
            isNegotiable: Number,
            theme: Object,
            flashSale: Object,
            levelShow: Number,
            price: Number,
            originalPrice: Number,
            priceMax: Number,
            priceMin: Number,
            priceMemberMax: Number,
            priceMemberMin: Number,
            isShowMember: {
                type: Boolean,
                default() {
                    return true;
                }
            },
            isShowShare: {
                type: Boolean,
                default() {
                    return true;
                }
            },
            discount: Number,
            isVipCardUser: {
                type: Number,
                default() {
                    return 0;
                }
            },
            sales: {
                type: [Number, String]
            },
            unit: String,
            isSales: Number,

            posterConfig: String,
            posterGenerate: String,
            hasPosterNav: {
                type: Boolean,
                default() {
                    return false
                },
            },
            goodsId: Number,
            shareUrl: String,
            extraQuickShare: Object,
            appSharePic: String,
            appShareTitle: String,
            goods: Object,
            isVip: Boolean,
            isShowPrice: {
                type: Boolean,
                default() {
                    return true
                },
            },
        },
        data() {
            return {
                shareShow: false,
                quickShareShow: false,
                root: this.$siteInfo.root,
            }
        },
        components: {
            AppVipCard,
            bdFlashSale,
            appPrice,
            appMemberMark,
            bdJoinMember,
            bdQuickShare,
            appShareQrCode
        },
        computed: {
            ...mapState({
                isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
            }),
            newShareUrl() {
                if (this.shareUrl) {
                    return this.shareUrl;
                } else {
                    if (this.goodsId) {
                        return this.$api.poster.goods + '&goods_id=' + this.goodsId;
                    } else {
                        return ``;
                    }
                }
            },
        },
        methods: {
            quickShare(e) {
                this.$emit('quickShare', e);
            },
            shareClick() {
                // 判断登入
                if (!this.$user.isLogin()) {
                    this.$user.getInfo().then(() => {
                    });
                } else {
                    if (this.extraQuickShare) {
                        this.quickShareShow = true;
                    } else {
                        this.shareShow = true;
                    }
                }
            },
            goToMember(){
                uni.navigateTo({
                    url:'/pages/member/index/index'
                })
            }
        }
    }
</script>

<style>
    .bd-info {
        width: 100%;
        background-color: #ffffff;
        padding: 20upx;
        margin-top: 16upx;
    }
    .bd-name {
        font-size: 32upx;
        color: #353535;
        line-height: 42upx;
        margin-top: 5upx;
        font-weight: 600;
    }
    .bd-subtitle {
        margin-top: 23upx;
        font-size: 24upx;
        line-height: 34upx;
        color: #999999;
    }
    .bd-price-share {
        margin-top: 20upx;
    }
    .bd-negotiable {
        font-size: 48upx;
        line-height: 53upx;
    }
    .bd-share {
        margin-top: 15upx;
    }
    .bd-share .bd-icon {
        width: 40upx;
        height: 40upx;
    }
    .bd-share .bd-text {
        color: #767676;
        font-size: 20upx;
        line-height: 30upx;
        margin-top: 5upx;
    }
    .bd-margin {
        margin-top: 20upx;
    }
    .bd-member-mark {
        margin-left: 12upx;
    }
    .bd-price {
        font-size: 56upx;
        line-height: 1;
        font-family: DIN;
    }
    .bd-sales {
        color: #999999;
        font-size: 32rpx;
        float: right;
    }
    .bd-member-price {
        font-size: 32upx;
        margin-right: 20upx;
        line-height: 1;
    }
    .bd-origin-price {
        text-decoration: line-through;
        margin-left: 20upx;
        color: #999999;
        font-size: 28upx;
    }
    .bd-tags{
        width: 100%;
        display: flex;
        margin-top: 24rpx;
        justify-content: space-between;
    }
    .bd-tag-group{
        flex: 1;
        display: flex;
    }
    .bd-tags .bd-tag{
        display: flex;
        align-items: center;
        margin-right: 10px;
    }
    .bd-tags .bd-tag image{
        width: 32rpx;
        height: 32rpx;
    }
    .bd-tags .bd-tag text{
        background: #FED2D5;
        color: #E73E67;
        padding: 5rpx 10rpx;
        border-radius: 10rpx;
        font-size: 26rpx;
        margin-left: 10rpx;
    }
    .bd-tag-share{
        background: #FED2D5;
        color: #E73E67;
        border-radius: 10rpx;
        padding: 5rpx 10rpx;
    }
    .bd-tag-share image{
        margin-right: -10rpx;
    }
    .bd-tag-share text{
        font-size: 30rpx;
        margin-left: 0;
    }
    .bd-vip{
        margin-top: 24rpx;
    }
    .bd-vip image{
        height: 72rpx;
        width: 100%;
    }
</style>