school_uni/package1/goods/goodsDetail.vue

<template>
	<view class="page1">
		<view class="title" :style="{'background-image': productImage ? 'url(' + productImage + ')' : ''}">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="goods-top">
				<view class="goods-content">
					<view class="goods-name">
						{{goodsItem.productName || ''}}
					</view>
					<view class="goods-content-center">
						<view class="goods-deal1">
							<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
								￥{{soloPrice}}
							</view>
							<view class="pintuan-left-price" v-if="groupPrice">
								拼团<text style="color: red;">￥{{groupPrice}}</text>
							</view>
						</view>
						<view class="goods-tag">
							销量 <text>{{goodsItem.tailWarn != null ? goodsItem.tailWarn : 0}}</text>
						</view>
					</view>
					<view class="goods-fee" v-if="packageFeeNumber > 0">
						餐盒费 ￥{{packageFee}}
					</view>
				</view>
			</view>
			<view class="goods-bottom">
				<view class="detail1">
					商品详情
				</view>
				<view class="detail2" v-if="productIntro">
					<rich-text :nodes="productIntro"></rich-text>
				</view>
				<view class="detail2 detail-empty" v-else>
					暂无商品详情
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				goodsItem: {},
				shopItem: {}
			}
		},
		components: {

		},
		onLoad(option) {
			if (option.item) {
				this.goodsItem = JSON.parse(decodeURIComponent(option.item));
			}
			if (option.shopItem) {
				this.shopItem = JSON.parse(decodeURIComponent(option.shopItem));
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		computed: {
			productImage() {
				return this.goodsItem.productPicture || '';
			},
			productIntro() {
				if (this.goodsItem.productIntro == undefined || this.goodsItem.productIntro == null) return '';
				if (typeof this.goodsItem.productIntro === 'object') {
					return this.goodsItem.productIntro.html || this.goodsItem.productIntro.text || '';
				}
				return this.goodsItem.productIntro;
			},
			groupRules() {
				return Array.isArray(this.goodsItem.productGroupBuyPrices) ? this.goodsItem.productGroupBuyPrices : [];
			},
			soloPrice() {
				return this.formatMoney(this.getAttributePrice(this.goodsItem));
			},
			groupPrice() {
				if (!this.groupRules.length || this.goodsItem.isMoreBuy == 1) return '';
				let rule = this.groupRules[0];
				return rule && rule.groupPrice ? this.formatMoney(rule.groupPrice) : '';
			},
			packageFeeNumber() {
				let fee = parseFloat(this.goodsItem.lunchBox || 0);
				return isNaN(fee) ? 0 : fee;
			},
			packageFee() {
				return this.formatMoney(this.packageFeeNumber);
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getAttributePrice(item) {
				let price = 0;
				if (!item || !item.attributeListPrice) return price;
				try {
					let pObj = typeof item.attributeListPrice === 'string' ? JSON.parse(item.attributeListPrice) : item.attributeListPrice;
					if (Array.isArray(pObj) && pObj.length > 0) {
						price = parseFloat(pObj[0].specPrice);
					} else {
						for (let k in pObj) {
							price = parseFloat(pObj[k].specPrice);
							break;
						}
					}
				} catch (e) {}
				return isNaN(price) ? 0 : price;
			},
			formatMoney(value) {
				let amount = parseFloat(value);
				return (isNaN(amount) ? 0 : amount).toFixed(2);
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png') no-repeat;
		width: 100%;
		height: 700rpx;
		background-size: cover;
		background-position: center;
		position: fixed;
		top: 0;
		z-index: -1;
	}

	.title-sreach {
		width: 75%;
		display: flex;
		height: 200rpx;
	}

	.back-btn {
		padding-top: 110rpx;
	}

	.content {
		margin-top: 700rpx;
		background: #fff;
		overflow: hidden;
		height: 100%;
	}

	.goods-top {
		padding: 20rpx;
		display: flex;
	}

	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}

	.goods-content-center {
		display: flex;
		margin: 16rpx 0;
	}

	.goods-deal1 {
		width: 60%;
		display: flex;
	}

	.goods-tag {
		margin: 0;
		width: 40%;
		text-align: right;
	}

	.goods-fee {
		display: inline-block;
		padding: 8rpx 18rpx;
		border-radius: 999rpx;
		background: rgba(255, 244, 232, 0.92);
		border: 1rpx solid rgba(255, 180, 118, 0.54);
		color: #b4572d;
		font-size: 22rpx;
		font-weight: 800;
	}

	.pintuan-left-price {
		display: inline;
		padding: 10rpx;
		background: rgba(255, 57, 57, 0.1);
		border-radius: 10rpx;
	}

	.goods-btn {
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		width: 130rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 40rpx;
	}

	.goods-bottom {
		width: 95%;
		margin: 0 auto;
	}

	.detail1 {
		height: 48rpx;
		font-size: 30rpx;
		font-weight: 700;
	}

	.detail2 {
		line-height: 52rpx;
		font-size: 28rpx;
		padding-bottom: 80rpx;
	}

	.detail-empty {
		color: #999;
	}

</style>