hxj/src/pages/case/components/hxj-bd-info.vue

<template>
	<view class="bd-info">
		<view class="main-between hxj-goods-name">
			<view class="main-between-y">
				<view class="main-left cross-center">
					<view class="hxj-name t-omit">{{name}}</view>
					<view class="hxj-tags">套装</view>
					<view class="hxj-ynum">已售{{sales}}+</view>
				</view>
				<view class="main-left cross-center hjx-tc-999 hjx-ts-22">
					<view style="margin-right: 31rpx;">A1 200m²</view>
					<view class="hjx-text-decoration-line-through">{{originalPrice}}元</view>
				</view>
				<view class="hjx-tc-AE8445 hjx-ts-22 hjx-tw-500" style="margin:26rpx 0 22rpx ;">券后价</view>
				<view class="hxj-price"><text class="rmb">￥</text>{{price}}<text class="dw">元</text></view>
			</view>
			<view class="main-between-y">
				<view class="lq" @click="receive">领券</view>
				<view class="cross-center se" v-if="isShowShare" @click="shareClick">
					<image src="https://t17.9026.com/web/statics/image/index/share_y.png" mode=""></image>分享
				</view>
			</view>
		</view>

		<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"
				:is-video-number="goods.is_video_number" :extra-quick-share="extraQuickShare"
				:app-share-pic="appSharePic" :app-share-title="appShareTitle"></bd-quick-share>
			<app-share-qr-code @share="testShare" v-model="shareShow" :url="newShareUrl" :goods="goods"
				:poster-config="posterConfig" :poster-generate="posterGenerate" :has-poster-nav="hasPosterNav"
				:app-share-pic="appSharePic" :app-share-title="appShareTitle"></app-share-qr-code>
		</template>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import bdQuickShare from '@/components/page-component/goods/bd-quick-share.vue';
	import appShareQrCode from '@/components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

	export default {
		name: "u-info",
		props: {
			name: String,
			theme: Object,
			price: {
				type: [Number, String]
			},
			originalPrice: {
				type: [Number, String]
			},
			sales: {
				type: [Number, String]
			},
			goodsId: Number,
			goods: Object,
			isShowShare: {
				type: Boolean,
				default () {
					return true;
				}
			},
			posterConfig: String,
			posterGenerate: String,
			hasPosterNav: {
				type: Boolean,
				default () {
					return false
				},
			},
			shareUrl: String,
			appShareTitle: String,
			appSharePic: String,
			extraQuickShare: Object,
			hasUnderlinePrice: {
				type: [Boolean, String],
				default: true
			}
		},
		data() {
			return {
				shareShow: false,
				quickShareShow: false
			}
		},
		components: {
			bdQuickShare,
			appShareQrCode,
		},
		computed: {
			isUnderlinePrice() {
				return Number(this.is_underline_price) && this.hasUnderlinePrice
			},
			...mapState({
				is_underline_price: 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: {
			receive(){
				this.$emit('receive')
			},
			testShare(s) {
				this.$emit('share', s);
			},
			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;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hxj-goods-name {
		width: 750rpx;
		height: auto;
		background: #F6F6F6;
		padding: 43rpx 30rpx 28rpx 46rpx;

		.hxj-name {
			width: 360rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #121212;
			line-height: 56rpx;
			margin-right: 14rpx;
		}

		.hxj-tags {
			width: 56rpx;
			height: 30rpx;
			background: #040404;
			font-size: 20rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 13rpx;
			text-align: center;
		}

		.hxj-ynum {
			width: auto;
			height: 30rpx;
			border: 1rpx solid #AE8445;
			border-radius: 4rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #AE8445;
			opacity: 0.6;
			padding: 0 6rpx;
			line-height: 30rpx;
			text-align: center;
		}

		.hxj-price {
			font-size: 46rpx;
			font-weight: bold;
			color: #A6814F;

			.rmb {
				font-size: 18rpx;
				font-weight: 500;
				color: #A6814F;
				margin-right: 9rpx;
			}

			.dw {
				font-size: 20rpx;
				font-weight: 500;
				color: #A6814F;
				margin-left: 13rpx;
			}
		}

		.lq {
			width: 92rpx;
			height: 38rpx;
			background: #FF0000;
			border-radius: 19rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 38rpx;
			margin-top: 10rpx;
		}

		.se {
			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 6rpx;
			}

			font-size: 24rpx;
			font-weight: 500;
			color: #AE8445;
		}
	}


	.bd-share {
		margin-top: 15upx;
		margin-right: -20upx;
	}

	.bd-share .bd-share-box {
		height: 48upx;
		border-radius: 40upx 0 0 40upx;
		padding: 0 14upx;
		width: 103upx;
	}

	.bd-share .bd-icon {
		width: 22upx;
		height: 22upx;
	}

	.bd-share .bd-text {
		color: #ffffff;
		font-size: 22upx;
		line-height: 30upx;
		margin-left: 10upx;
	}

	.process {
		background-color: rgb(221, 183, 102);
		background-size: 100% 100%;
		width: 20.66rem;
		height: 2.78rem;
	}
</style>