QianNiaoShop/pages/goods/SaleGoodsDetail.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_base_detail.title || '' }}</view>
			<view class="goods-desc">{{ goods_base_detail.describe || '' }}</view>
			<view class="goods-code clearfix">
				<view class="float_left">
					<text class="info-label">商品编码</text>
					{{ goods_base_detail.code || '' }}
				</view>
				<view class="float_right" v-if="goods_base_detail.storage">
					<text class="info-label">货架编码</text>
					{{ goods_base_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_base_detail.categoryTitle || '' }}</view>
			</view>
			<view class="info-li">
				<view class="info-label">商品品牌</view>
				<view class="info-val">{{ goods_base_detail.brandTitle || '未设置' }}</view>
			</view>
			<view class="info-li">
				<view class="info-label">保质期/天</view>
				<view class="info-val">{{ goods_base_detail.expireTime || '未设置' }}</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="goods-info-other info-view">
			<view class="info-li">
				<view class="info-label">商品状态</view>
				<view class="info-val">{{ goods_detail.enableStatus === 5 ? '上架' : '下架' }}</view>
			</view>
			<view class="info-li">
				<view class="info-label">负库存销售</view>
				<view class="info-val">{{ goods_detail.isDistribution === 5 ? '开启' : '禁用' }}</view>
			</view>
			<view class="info-li">
				<view class="info-label">经营屏蔽</view>
				<view class="info-val">{{ goods_detail.isShield === 5 ? '开启' : '禁用' }}</view>
			</view>
			<view class="info-li">
				<view class="info-label">快递运费</view>
				<view class="info-val">{{ goods_detail.enableStatus === 1 ? '包邮' : goods_detail.enableStatus === 2 ? '运费模版' : '统一运费' }}</view>
			</view>
		</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">
			<view class="info-title">规格明细</view>
			<view class="sku-li" v-for="(item, index) in goods_detail.specMultiple" :key="index">
				<view class="clearfix">
					<view class="float_left sku-img">
						<image :src="item.specImage || '../../static/img/goods.png'" mode="aspectFill"></image>
						<text class="default-sku" v-if="item.isDefault === 5">默认规格</text>
					</view>
					<view class="float_left sku-info">
						<view class="sku-name">
							{{ item.unitName }};
							<text v-for="(spec, s) in item.specGroup" :key="s">{{ spec.specValueName }}</text>
						</view>
						<view class="price">
							<text class="sale-price" v-if="item.enabledLadder !== 1">{{ $utils.formattedNumber(item.salePrice) }}</text>
							<text class="market-price">{{ $utils.formattedNumber(item.marketPrice) }}</text>
						</view>
						<view class="num">
							<text>库存：{{ $utils.formatNub(item.inventory) }}{{ item.unitName }}</text>
							<text>起订：{{ $utils.formatNub(item.setNum) }}{{ item.unitName }}</text>
						</view>
						<view class="num">
							<text>重量：{{ item.weight ? item.weight / 1000 : 0 }}kg</text>
							<text>销量：{{ $utils.formatNub(item.salesNum) }}{{ item.unitName }}</text>
						</view>
					</view>
				</view>
				<view class="ladder-price" v-if="item.enabledLadder === 1">
					<view class="price-li" v-for="(la, laI) in item.ladderPrice" :key="laI">
						<view class="num-top">
							{{ la.from }}-
							<text v-if="laI === item.ladderPrice.length - 1">∞</text>
							<text v-else>{{ la.to }}</text>
							{{ item.unitName }}
						</view>
						<view class="price">{{ $utils.formattedNumber(la.price) }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sku-detail">
			<view class="info-title">商品详情</view>
			<view class="detail-view"><rich-text :nodes="goods_base_detail.description"></rich-text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			goods_id: '',
			goods_base_detail: {},
			master_unit: {},
			other_unit_data: [],
			tag_list: [],
			basic_goods_id: '',
			goods_detail: {
				specMultiple: []
			}
		};
	},
	onLoad(options) {
		if (options.id) {
			this.goods_id = options.id;
			this.basic_goods_id = options.basicGoodsId;
			this.getGoodsBasicInfoById();
			this.getGoodsInfo();
		}
	},
	methods: {
		// 商品详情
		getGoodsInfo() {
			this.$u.api.getGoodsInfo(this.goods_id).then(res => {
				this.goods_detail = res.data;
			});
		},
		// 商品基础资料
		getGoodsBasicInfoById() {
			this.$u.api.getGoodsBasicInfoById(this.basic_goods_id).then(res => {
				this.goods_base_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-li {
		margin: 0 auto 20rpx;
		width: 702rpx;
		background-color: #ffffff;
		padding: 24rpx;
		border-radius: 20rpx;
		.sku-img {
			position: relative;
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
			.default-sku {
				position: absolute;
				width: 100%;
				font-size: 20rpx;
				line-height: 36rpx;
				height: 36rpx;
				text-align: center;
				color: #ffffff;
				left: 0;
				bottom: 0;
				background-color: $uni-color-success;
			}
		}
		.sku-info {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #6c6c6c;
			.sku-name {
				color: #000000;
				font-size: 28rpx;
				font-weight: bold;
			}
			.price {
				padding-top: 6rpx;
				.sale-price {
					font-size: 28rpx;
					color: $uni-color-error;
					font-weight: bold;
					margin-right: 20rpx;
				}
				.market-price {
					font-size: 22rpx;
					color: #999999;
					text-decoration: line-through;
				}
			}
			.num {
				line-height: 36rpx;
				padding-top: 10rpx;
				text {
					margin-right: 20rpx;
				}
			}
		}
		.ladder-price {
			margin-top: 20rpx;
			border-top: 1px solid #eeeeee;
			font-size: 24rpx;
			padding: 20rpx 0;
			display: flex;
			.price-li {
				flex: 3;
				text-align: center;
				border-right: 1px solid #eeeeee;
				.price {
					font-size: 28rpx;
					font-weight: bold;
					padding-top: 8rpx;
					color: $uni-color-error;
				}
				&:last-child {
					border-right: 0 none;
				}
			}
		}
	}
}
.detail-view {
	background-color: #ffffff;
	padding: 20rpx;
	img {
		width: 100%;
	}
}
</style>