new-uniapp-h5/pages/takeaway/compontents/page-info.vue

<template>
	<view class="product-info" v-if="goods">
		<view class="price">
			<view class="price-left">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="active">
						<template v-if="!goods.use_sku || goods.price_min == goods.price_max">
							<view>¥</view>
							<view v-for="(item, index) of getPrice(goods.price_min)" :class="!index ? 's2' : ''"
								:key="index">{{
	index ? "." + item : item }}</view>
	
						</template>
						<template v-else>
							<view class="flex">
								<view>¥</view>
								<view v-for="(item, index) of getPrice(goods.price_min)" :class="!index ? 's2' : ''"
									:key="index">{{
	  index ? "." + item : item }}</view>
							</view>
							<view class="flex">-</view>
							<view class="flex">
								<view v-for="(item, index) of getPrice(goods.price_max)" :class="!index ? 's2' : ''"
									:key="index">{{
	  index ? "." + item : item }}</view>
							</view>
						</template>
					</view>
					<view style="font-size: 24rpx;color: #999;margin-top: 16rpx;display: flex;">
						<view style="text-decoration: line-through;margin-right: 30rpx;">
							<template v-if="goods.original_price > 0">
								￥{{ goods.original_price }}
							</template>
						</view>
						<view>
							已售：{{ goods.sales }}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="name">{{ goods.name }}</view>
		<!-- <view class="page-server_project" v-if="server_project_list">
			<view class="tag" v-for="tag of server_project_list" :key="tag">
				<u-icon name="checkmark-circle" size="12" color="#f0250e" top="1"></u-icon>
				<text class="tagName" style="color: #f0250e;">
					{{ tag }}
				</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	

	export default {
		components: {},
		props: ["goods"],

		computed: {
			getPrice() {
				return (price = "0.00") => {
					return price.split(".");
				};
			},

			server_project_list() {
				return this.goods?.server_project?.split?.(",")
			}
		},
		data() {
			return {
				eventDiscount: ''
			}
		},
		methods: {
			openTheShare() {
				this.$refs.pageShare.showPop = true
			},
			calculateDiscount(_discount) {
				const discount = _discount

				if (discount == 0) {
					return "免费";
				}

				if (discount == 100) {
					return "0" + " 折";
				}

				var discountText = discount / 10 + " 折";
				if (discount % 10 === 0) {
					discountText = discount / 10 + " 折";
				} else {
					discountText = discount / 10 + " 折";
				}

				return discountText
			}
		}
	}
</script>
<style scoped lang="scss">
	.product-info {
		padding: 24rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.price {
		display: flex;
		align-items: flex-start;

		.price-left {
			padding-right: 10rpx;
			flex: 1;
			overflow: hidden;
			// display: flex;
			// align-items: flex-end;
			// line-height: 30rpx;

			.active {
				display: flex;
				align-items: flex-end;
				align-items: center;
				margin-right: 20rpx;
				color: #f0250e;
				font-size: 24rpx;
				font-weight: bold;

				.s2 {
					margin-left: 3px;
					line-height: 1.2;
					font-size: 38rpx;
				}
			}

			.old {
				position: relative;
				font-size: 24rpx;
				color: #8c8c8c;

				&:after {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					width: 100%;
					height: 1px;
					background: #8c8c8c;
				}
			}
		}
	}

	.memberBox {
		font-size: 26rpx;
		font-weight: bold;
		color: #f74715;
		line-height: 50rpx;
		background: linear-gradient(117.64deg, #ff0e87, #ff1e1e 61%, #ff640b), linear-gradient(#820c00, #820c00);
		color: white;
		margin: 20rpx -22rpx;
		padding: 16rpx 20rpx;
		display: flex;
		justify-content: space-between;
		// border-radius: 20rpx;
		position: relative;
		overflow: hidden;


		.Tvip {
			position: absolute;
			top: 0;
			right: 60rpx;
			opacity: 0.4;
			-webkit-transform: scale3d(2.1, 2, 8.2) rotate(-24deg);
		}

	}

	.name {
		padding-top: 10rpx;
		font-size: 34rpx;
		color: #262626;
		line-height: 1.5;
		font-weight: bold;
	}

	.flex {
		display: flex;
		align-items: flex-end;
	}

	.page-server_project {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: white;
		margin-top: 12rpx;

		.tag {
			display: flex;
			align-items: center;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
			font-size: 12px;

			.tagName {
				padding-left: 6rpx;
				font-size: 12px;
				color: #8c8c8c;
			}
		}
	}

	.tags {
		display: flex;
		flex-wrap: wrap;

		margin: 10rpx 0;
	}

	.afterTheDiscount {
		display: inline-flex;
		color: #8c8c8c;
		font-size: 22rpx;
	}

	.share {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		position: relative;

		.buttonShare {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
		}

		button {
			color: inherit !important;
			text-decoration: none !important;
			outline: none !important;
			border: none !important;
		}

		button {
			color: inherit !important;
			text-decoration: none !important;
		}

		button:link,
		button:visited {
			color: inherit !important;
			text-decoration: none !important;
		}

		button,
		button:hover,
		button:active,
		button:visited,
		button:link,
		button:focus {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
			-webkit-tap-highlight-color: transparent !important;
			outline: none !important;
			background: none !important;
			text-decoration: none !important;
		}
	}
</style>