book-hi/pages-mall/components/goods/goods-info.vue

<template>
	<view class="goods_info">
		<view class="title">
			<u-tag text="HOT" type="error" size="mini" mode="dark" v-if="data.tags_type=='hot'" />
			<u-tag text="推荐" type="success" size="mini" mode="dark" v-if="data.tags_type=='recommend'" />
			<text>{{ data.title }}</text>
		</view>
		<view class="count">
			<view class="price">
				<text>￥</text>
				<text>{{ selectedSku.price_selling||data.price_selling }}</text>
				<!-- <text>￥{{ data.oldPrice }}</text> -->
			</view>
			<view class="sale">
				<text>月销</text>
				<!-- <text>{{ $replaceSale(data.stock_sales) }}</text> -->
				<text>{{ data.stock_sales}}</text>
			</view>
		</view>
		<!-- <view class="notice">
			<text>恭喜小主，您有优惠券可用哦</text>
			<text>查看</text>
			<u-icon name="arrow-right" :color="appThemeBuyBtnBgColor" size="24"></u-icon>
		</view> -->
	</view>
</template>

<script>
export default {
	name: 'goods-info',
	props: {
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 选中的sku
		selectedSku: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 商品类型
		goodsType: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			appThemeColor: this.$appTheme.appThemeColor
		};
	}
};
</script>

<style lang="scss" scoped>
.goods_info {
	margin-bottom: 16rpx;
	background-color: $app-theme-bg-color;
}
.count {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 30rpx 26rpx;
	.price {
		font-weight: bold;
		text:nth-child(1) {
			font-size: 28rpx;
			color: $app-theme-text-money-color;
		}
		text:nth-child(2) {
			font-size: 40rpx;
			color: $app-theme-text-money-color;
			margin-right: 24rpx;
		}
		text:nth-child(3) {
			font-size: 28rpx;
			color: $app-theme-card-gray-light-color;
			text-decoration-line: line-through;
		}
	}
.sale {
		text:nth-child(1) {
			font-size: 28rpx;
			color: $app-theme-card-gray-deep-color;
			margin-right: 8rpx;
		}
		text:nth-child(2) {
			font-size: 28rpx;
			color: $app-theme-card-gray-deep-color;
		}
	}
}
.title {
	padding: 26rpx 30rpx 16rpx;
	text {
		vertical-align: middle;
		padding-left: 8rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: $app-theme-text-black-deep-color;
	}
}
.notice {
	padding: 0 30rpx 30rpx 30rpx;
	font-size: 28rpx;
	text:nth-child(1) {
		color: $app-theme-text-gray-color;
		margin-right: 20rpx;
	}
	text:nth-child(2) {
		color: $app-theme-buybtn-bg-color;
	}
}
</style>