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>
                        <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}`" :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>
                           <view class="dir-left-nowrap cross-bottom">
                               <view v-if="isSales === 1" class="bd-sales" >销量{{sales}}{{unit}}</view>
                           </view>
                       </template>
                    </view>
                </template>
                <template v-else>
                    <text :class="[theme.color, 'bd-negotiable']">价格面议</text>
                </template>
            </view>
			<!-- <template v-if="isShowShare">
                <view class="box-grow-0 bd-share dir-top-nowrap" @click="contrastClick" style="margin-right:8px;">
                    <image class="bd-icon" src="../../../static/image/icon/icon-contrast.png"></image>
                    <text class="bd-text">对比</text>
                </view>
            </template> -->
            <template v-if="isShowShare">
                <view class="box-grow-0 bd-share dir-top-nowrap" @click="shareClick">
                    <image class="bd-icon" src="../../../static/image/icon/icon-share.png"></image>
                    <text class="bd-text">分享</text>
                </view>
            </template>
            <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>
        <text class="bd-name u-line-2">{{name}}</text>
        <text class="bd-subtitle u-line-3" v-if="subtitle">{{subtitle}}</text>
		<slot></slot>
        <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 main-between box-grow-1" style="font-size: 28upx;" >
		    <view class="box-grow-0 bd-share" @click="gotoPriceMove">
		        <image class="nbd-icon" src="../../../static/image/icon/icon-share.png"></image>
		        <text class="">价格走势</text>
		    </view>
			<view class="box-grow-0 bd-share" @click="gotoPriceTell">
			    <image class="nbd-icon" src="../../../static/image/icon/icon-share.png"></image>
			    <text class="">降价通知</text>
			</view>
			<view class="box-grow-0 bd-share" @click="contrastClick">
			    <image class="nbd-icon" src="../../../static/image/icon/icon-contrast.png"></image>
			    <text class="">商品对比</text>
			</view>
			<view class="box-grow-0 bd-share" @click="gotoOpenPic">
			    <image class="nbd-icon" src="../../../static/image/icon/icon-share.png"></image>
			    <text class="">开箱展示</text>
			</view>
		</view>
        <view class="bd-margin" v-if="levelShow === 2 && isNegotiable === 0">
            <bd-join-member
                :member-max-price="`${priceMemberMax}`"
                :member-min-price="`${priceMemberMin}`"
                :price="`${price}`"
            ></bd-join-member>
        </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,
			signid:String,
			attrid:String,
			checkprice:String,
            isVip: Boolean
        },
        data() {
            return {
                shareShow: false,
                quickShareShow: false
            }
        },
        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: {
			gotoOpenPic(){
				this.$emit('gotoOpenPic');
			},
			gotoPriceMove(){
				if(!this.signid||this.signid=='')
				{
					uni.showToast({
						title:"请先选择规格",
						 icon:"none"
					})
					return;
				}	
				let title=this.name+this.subtitle;
				uni.navigateTo({
					url:`/pages/goods/priceMove?id=${this.goodsId}&&signid=${this.signid}&&title=${title}`
				})
			},
			gotoPriceTell(){
				if(!this.attrid||this.attrid=='')
				{
					uni.showToast({
						title:"请先选择规格",
						 icon:"none"
					})
					return;
				}	
				let title=this.name+this.subtitle;
				uni.navigateTo({
					url:`/pages/priceTell/priceTell?id=${this.goodsId}&&attrid=${this.attrid}&&price=${this.checkprice}`
				})
			},
            quickShare(e) {
                this.$emit('quickShare', e);
            },
			contrastClick(){
				// 判断登入
				// if (!this.$user.isLogin()) {
				//     this.$user.getInfo().then(() => {
				//     });
				// } else { 
				    uni.navigateTo({
				    	url: `/pages/goods/contrast?id=${this.goodsId}`
				    });
				//}
			},
            shareClick() {
                // 判断登入
                if (!this.$user.isLogin()) {
                    this.$user.getInfo().then(() => {
                    });
                } else {
                    if (this.extraQuickShare) {
                        this.quickShareShow = true;
                    } else {
                        this.shareShow = true;
                    }
                }
            }
        }
    }
</script>

<style>
    .bd-info {
        width: 702upx;
        background-color: #ffffff;
        border-radius: 15upx;
        padding: 20upx;
        margin: 24upx 24upx 24upx 24upx;
    }
    .bd-name {
        font-size: 32upx;
        color: #353535;
        line-height: 42upx;
        margin-top: 5upx;
    }
    .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 .nbd-icon {
	    width: 28upx;
	    height: 28upx;
		margin-right:10upx;
	}
    .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: 24upx;
        margin-top: 22upx;
    }
    .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;
    }
</style>