fish-uniapp/pages/goods/good_com/good.vue

<template>
	<view class="goods_page">
		<view class="goods_item" @click="detail">
			<image mode="aspectFit" class="goods_img" :src="data.goods_thumbnail_url"></image>
			<view class="good_group_text">
				<text class="goods_title">{{data.goods_name}}</text>
				<view class="goods_description">
					<view class="juanjia">
						<text class="juanjia_title">领劵免拼</text>
						<text class="juanjia_price">￥{{priceFormat(data.min_group_price-data.coupon_discount)}}</text>
					</view>
					<view class="yuanjia">原价￥{{priceFormat(data.min_normal_price)}}</view>
					<view class="tuanjia">团购￥{{priceFormat(data.min_group_price)}}</view>
					<view class="youhui" v-if="data.has_coupon">{{data.coupon_discount/100}}元卷</view>
					<view class="yishou">已售{{data.sales_tip}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {

			};
		},
		computed: {
			
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			},
			search_id: {
				type: String,
				default: () => {
					return ""
				}
			},
			pid: {
				type: [String],
				default: () => {
					return ""
				}
			}
		},
		methods: {
			detail() {
				let url = '/uni_modules/aliea-goods/pages/goods/goodDetail?id=' + this.data.goods_sign +
					'&search_id=' + this.search_id
				if (this.pid) {
					url += '&p_id=' + this.pid
				}
				uni.navigateTo({
					url: url
				})
			},
			priceFormat(price) {
				let sj = price / 100
				if (sj > 100) {
					sj = Math.floor(sj)
				}
				return sj
			}
		}
	}
</script>

<style lang="scss">
	.goods_page {
		width: 355rpx;


		.goods_item {
			width: 355rpx;
			border-radius: 15rpx;
			background-color: #fff;
			padding: 10rpx 0;

			.goods_img {
				display: block;
				width: 335rpx;
				height: 335rpx;
				border-radius: 15rpx;
				margin: 0 auto;
			}

			.good_group_text {
				padding: 0 10rpx;


				.goods_title {
					display: block;
					font-size: 30rpx;
					overflow: hidden;
					margin: 20rpx 0;
					height: 120rpx;
				}

				.goods_description {
					line-height: 38rpx;
					font-size: 26rpx;

					.yuanjia {
						text-decoration: line-through;
						color: #999;
						width: 50%;
						display: inline-block;
					}

					.tuanjia {
						text-decoration: line-through;
						width: 50%;
						display: inline-block;
						text-align: right;
					}

					.juanjia {
						color: red;
						font-weight: bold;
						position: relative;

						.juanjia_title {
							font-size: 26rpx;
							text-align: justify;
						}

						.juanjia_price {
							font-size: 45rpx;
							position: absolute;
							right: 10rpx;
							top: -10rpx;
						}
					}

					.yishou {
						color: #999;
						width: 50%;
						display: inline-block;
						text-align: right;
					}

					.youhui {
						width: 50%;
						display: inline-block;
						color: #ff5500;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>