<template>
	<view class="introduce-section">
		<view class="flex">

			<view class="price-box">
				<text class="price-tip">¥</text>
				<view class="price margin-l-10">
					{{ goodsObjact.price }}
					<!-- <text class="text">/份</text> -->
					<text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text>
				</view>
			</view>
			<view class="sales">
				{{(goodsObjact.sales+goodsObjact.ficti)|getNum}}+
				<text class="margin-l-10">
					付款
				</text>
			</view>
		</view>
		<text class="title clamp2">{{ goodsObjact.store_name }}</text>
		<text class="info" v-if="goodsObjact.store_info">{{ goodsObjact.store_info }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			goodsObjact: {
				type: Object,
				default: function() {
					return {
						percent: 1
					};
				}
			}
		},
		filters: {
			getNum(num) {
				if (num) {
			
					// 转为字符串
					num += '';
					let nu = num.slice(0, 1);
					for (let i = 0; i < num.length - 1; i++) {
						nu += 0
					}
					return nu
				}
			}
		},
		data() {
			return {};
		}
	};
</script>

<style lang="scss">
	/* 标题简介 */
	.introduce-section {
		position: relative;
		background: #fff;
		padding: 35rpx 35rpx;

		.sales {
			color: $font-color-light;
			font-size: 24rpx;
		}

		.title {
			font-size: 32rpx;
			color: $font-color-dark;

			.tip-o {
				color: #ff3334;
				padding-left: 15rpx;
			}
		}

		.shareDate {
			position: absolute;
			top: 25rpx;
			right: 25rpx;
			font-size: 26rpx;
			color: #3d3f46;
			border-radius: 15rpx;
			background-color: #ffffff;
			height: 60rpx;
			line-height: 60rpx;
		}

		.share-img {
			width: 30rpx;
			height: 30rpx;
			position: relative;
			top: 5rpx;
			left: 0;
			margin-right: 10rpx;
		}

		.info {
			color: #999999;
			font-size: 26rpx;
			padding-bottom: 15rpx;
		}

		.progress-box {
			width: 260rpx;
			position: relative;
			margin-top: 15rpx;
			line-height: 10px;

			.number {
				font-size: 17rpx;
				position: absolute;
				z-index: 999;
				top: 3rpx;
				left: 15rpx;
				color: #ffffff;
			}
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64rpx;
			padding: 10rpx 0;
			font-size: 26rpx;
			color: $color-red;
		}

		.price {
			font-size: 44rpx;
			font-weight: bold;
			
			.text {
				padding-left: 5rpx;
				color: #b0b0b0;
				font-size: 22rpx !important;
			}
		}

		.m-price {
			margin: 0 12rpx;
			color: $font-color-light;
			text-decoration: line-through;
			margin-left: 25rpx;
			font-size: 24rpx;
		}
	}
</style>
