QianNiaoShop/pages/goods/goodsDetail.vue

<template>
	<view class="">
		<view class="goods-scroll"><u-swiper :list="list" :height="340" indicator-pos="bottomRight" mode="number"></u-swiper></view>
		<view class="goods-info info-view">
			<view class="goods-name">{{ goods_detail.title||'' }}</view>
			<view class="goods-desc">{{ goods_detail.describe||'' }}</view>
			<view class="goods-code clearfix">
				<view class="float_left">
					<text class="info-label">商品编码</text>
					{{ goods_detail.code||'' }}
				</view>
				<view class="float_right" v-if="goods_detail.storage">
					<text class="info-label">货架编码</text>
					{{ goods_detail.storage || '未设置' }}
				</view>
			</view>
		</view>
		<view class="goods-info-other info-view">
			<view class="info-li">
				<view class="info-label">商品分类</view>
				<view class="info-val">{{ goods_detail.categoryTitle||'' }}</view>
			</view>
			<view class="info-li">
				<view class="info-label">商品品牌</view>
				<view class="info-val">{{ goods_detail.brandTitle || '未设置'}}</view>
			</view>
			<view class="info-li">
				<view class="info-label">保质期/天</view>
				<view class="info-val">{{ goods_detail.expireTime || '未设置' }}</view>
			</view>
			<view class="info-li">
				<view class="info-label">商品状态</view>
				<view class="info-val">{{ goods_detail.enableStatus === 5 ? '启用' : '禁用' }}</view>
			</view>
		</view>
		<view class="info-view tag-view" >
			<text class="info-label">关键词</text>
			<u-tag v-for="(item,index) in tag_list" :key="index" class="tag-li" mode="plain" :text="item" />
			<text v-if="!tag_list.length" class="input-pl">未设置</text>
		</view>
		<view class="info-view tag-view">
			<view class="unit-master">
				<text class="info-label">基本单位</text>
				<text>{{ master_unit.unitName||'' }}</text>
			</view>
			<view>
				<text class="info-label">辅助单位</text>
				<block v-for="(item, index) in other_unit_data" :key="index">
					<u-tag v-if="item.isMaster !== 5" class="tag-li" mode="plain" :text="'1' + item.unitName + '='+ Number(item.conversion) + master_unit.unitName" />
				</block>
				<text v-if="!other_unit_data.length" class="input-pl">未设置</text>
			</view>
		</view>

		<view class="sku-detail" v-if="goods_detail.specType === 1">
			<view class="info-title">规格明细</view>
			<view class="info-view uni-sku-view" v-for="(item, index) in goods_detail.unitData" :key="index">
				<view class="sku-label">{{ item.unitName }}</view>
				<view class="sku-info-ul">
					<view class="sku-info-li">
						<view class="sku-info-name">商品条码</view>
						<view class="sku-info-val">{{ item.barCode|| '未设置' }}</view>
					</view>
					<view class="sku-info-li">
						<view class="sku-info-name">商品重量</view>
						<view class="sku-info-val">{{ (item.weight||0) / 1000 }}kg</view>
					</view>
					<view class="sku-info-li">
						<view class="sku-info-name">默认属性</view>
						<view class="sku-info-val">{{ item.isDefault === 5 ? '是' : '否' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sku-detail" v-if="goods_detail.specType === 2">
			<view class="info-title">规格明细</view>
			<view class="info-view" v-for="(item, index) in goods_detail.specMultiple">
				<view class="sku-label">
					<image :src="item.specImage || list[0].image" mode="aspectFill"></image>
					<text class="sku-name">
						<block v-for="(its, ins) in item.specGroup" :key="ins">{{ its.specValueName }};</block>
					</text>
				</view>
				<view class="clearfix sku-info-ul">
					<text class="info-label">商品条码</text>
					<view class="info-val">
						<view class="val-li" v-for="(itu, inu) in goods_detail.unitData" :key="inu">{{ itu.unitName }}：{{ item.barCode[itu.unitId] || '未设置' }}</view>
					</view>
				</view>
				<view class="clearfix sku-info-ul">
					<text class="info-label">商品重量</text>
					<view class="info-val">
						<view class="val-li" v-for="(itu, inu) in goods_detail.unitData" :key="inu">{{ itu.unitName }}：{{ item.weight[itu.unitId] || '未设置' }}</view>
					</view>
				</view>
				<view class="clearfix sku-info-ul">
					<text class="info-label">默认属性</text>
					<view class="info-val">
						<view class="val-li" v-for="(itu, inu) in goods_detail.unitData" :key="inu">{{ itu.unitName }}：{{ item.isDefault[itu.unitId] === 5 ? '是' : '否' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sku-detail">
			<view class="info-title">商品详情</view>
			<view class="detail-view"><rich-text :nodes="goods_detail.description"></rich-text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			goods_id: '',
			goods_detail: {},
			master_unit: {},
			other_unit_data: [],
			tag_list:[]
		};
	},
	onLoad(options) {
		if(options.id){
			this.goods_id = options.id;
			this.getGoodsBasicInfoById();
		}

	},
	methods: {
		getGoodsBasicInfoById() {
			this.$u.api.getGoodsBasicInfoById(this.goods_id).then(res => {
				this.goods_detail = res.data;
				this.list = res.data.images.map(item => {
					return {
						image: item
					};
				});
				this.tag_list=res.data.tag?res.data.tag.split(','):[]
				this.master_unit = res.data.unitData.find(item => item.isMaster === 5);
				this.other_unit_data = res.data.unitData.filter(item => item.isMaster === 4);
			});
		}
	}
};
</script>

<style scoped lang="scss">
.goods-scroll {
	width: 702rpx;
	margin: 0 auto 20rpx;
}
.info-view {
	background-color: #ffffff;
	width: 702rpx;
	margin: 0 auto;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	.info-label {
		font-size: 24rpx;
		color: #999999;
	}
}
.goods-info {
	font-size: 24rpx;
	.goods-name {
		font-size: 28rpx;
		font-weight: 700;
	}
	.goods-desc {
		padding: 10rpx 0;
		color: #999999;
	}
	.goods-code {
		.info-label {
			margin-right: 10rpx;
		}
	}
}
.goods-info-other {
	display: flex;
	.info-li {
		flex: 4;
		font-size: 26rpx;
		text-align: center;
		border-right: 1px solid #f5f5f5;
		.info-label {
			padding-bottom: 20rpx;
		}
		&:last-child {
			border-right: 0 none;
		}
	}
}
.tag-view {
	.info-label {
		margin-right: 20rpx;
	}
	.tag-li {
		margin-right: 10rpx;
	}
}
.unit-master {
	padding-bottom: 20rpx;
}
.sku-detail {
	.info-title {
		text-align: center;
		line-height: 90rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.sku-label {
		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			vertical-align: middle;
			margin-right: 30rpx;
		}
	}
	.sku-info-ul {
		position: relative;
		padding: 20rpx 0;
		padding-left: 120rpx;
		border-bottom: 1px solid #f5f5f5;
		line-height: 40rpx;
		&:last-child {
			border-bottom: 0;
		}
		.info-label {
			position: absolute;
			left: 0;
			top: 50%;
			font-size: 24rpx;
			transform: translateY(-50%);
		}
		.info-val {
			border-left: 1px solid #f5f5f5;
			padding-left: 30rpx;
			font-size: 28rpx;
		}
	}
	.uni-sku-view {
		.sku-label {
			padding-bottom: 20rpx;
			position: relative;
			text-align: center;
			&::before {
				display: block;
				content: '';
				width: 50rpx;
				height: 6rpx;
				background-color: $uni-color-primary;
				bottom: 10rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.sku-info-ul {
			display: flex;
			padding-left: 0;
			.sku-info-li {
				flex: 3;
				text-align: center;
				border-right: 1px solid #f5f5f5;
				.sku-info-name {
					color: #999999;
					padding-bottom: 10rpx;
					font-size: 24rpx;
				}
				&:last-child {
					border-right: 0;
				}
			}
		}
	}
}
.detail-view {
	background-color: #ffffff;
	padding: 20rpx;
	img{
		width: 100%;
	}
}
</style>