CommunityApp/pagesM/comps/foot_goods_book.vue

<template>
	<FootDialog :isTitle="false" :isRadius="true" :visible.sync="dialogShow" :zIndex="300">
		<view slot="main" class="book-wrap">
			<view class="goods-img-price-wrap">
				<view class="goods-img"><image :src="selectSkuItemObj.thumbnail || base.thumbnail"></image></view>
				<view class="goods-price-box">
					<view class="price">
						<text>¥ {{ selectSkuItemObj.price ? selectSkuItemObj.price : base.price }}</text>
					</view>
					<view class="sku-params" v-if="selectSkuItemObj.specificationValues && selectSkuItemObj.specificationValues.length > 0">
						<text>选择：</text>
						<text class="sku_str">
							<block v-for="(item, index) in selectSkuItemObj.specificationValues" :key="index">{{ space + item.value }}</block>
						</text>
					</view>
					<view class="count-num" v-if="selectSkuItemObj.availableStock">
						<text>库存：</text>
						<text>{{ space }}{{ selectSkuItemObj.availableStock }}</text>
					</view>
				</view>
			</view>
			<view class="goods-sku-list-wrap">
				<view class="sku-item" v-for="(item, index) in specifications" :key="index">
					<view class="sku-name">{{ item.name }}</view>
					<view class="sku-value-box">
						<block v-for="(skuItem, idx) in item.entries" :key="idx">
							<text
								v-if="JSON.stringify(selectSpecificationValueMaps)!=='{}'"
								@tap="onSelectSku(index, skuItem)"
								:class="[!skuItem.isSelected ? disabled : selectSpecificationValueMaps[index + ''].id == skuItem.id ? 'active' : '']"
								:style="skuItem.isSelected && selectSpecificationValueMaps[index + ''].id == skuItem.id ? 'color: #FFFFFF;' : 'color: #666666;'"
							>
								{{ skuItem.value }}
							</text>
							<text
								v-else
								@tap="onSelectSku(index, skuItem)"
								style="color: #666666;"
							>
								{{ skuItem.value }}
							</text>
						</block>
					</view>
				</view>
			</view>
			<view class="goods-num-select-wrap">
				<text class="num-text">数量</text>
				<view class="number-select">
					<view class="number-change-less" @tap.stop="onGoodsNum(-1)">-</view>
					<input class="goods-number" type="number" :value="number" @input="onInput" @blur="onGoodsNumBlur" />
					<view class="number_change_add" @tap.stop="onGoodsNum(1)">+</view>
				</view>
			</view>
			<view class="comfirm-btn-box"><button @tap="onConfirm">确定</button></view>
			<image @tap.stop="hide" class="book-close" src="http://139.9.103.171:1888/img/image/close.png"></image>
		</view>
	</FootDialog>
</template>

<script>
import FootDialog from './foot_dialog.vue';
export default {
	components: {
		FootDialog
	},
	props: {
		number: {
			type: [Number, String],
			default: 0
		},
		specifications: {
			type: Array,
			default: () => {
				return [];
			}
		},
		selectSpecificationValueMaps: {
			type: Object,
			default: () => {
				return {};
			}
		},
		base: {
			type: Object,
			default: () => {
				return {};
			}
		},
		selectSkuItemObj: {
			type: Object,
			default: () => {
				return {};
			}
		},
		dataList: {
			type: Array,
			default: () => {
				return []; // [{label:'选项',value:1}]
			}
		},
		type: {
			type: Number,
			default: -1
		}
	},
	data() {
		return {
			isSelected: false,
			space: '\xa0\xa0',
			dialogShow: false
		};
	},
	methods: {
		show() {
			if (!this.isSelected && this.specifications != null && this.specifications.length > 0) {
				for (var i = 0; i < this.specifications.length; i++) {
					if (this.specifications[i].entries != null && this.specifications[i].entries.length > 0) this.$emit('selectSku', i, this.specifications[i].entries[0]);
				}
				this.isSelected = true;
			}
			this.dialogShow = true;
		},
		hide() {
			this.dialogShow = false;
		},

		onSelectSku(index, skuItem) {
			this.$emit('selectsku', index, skuItem);
		},
		onInput(e) {
			this.$emit('update:number', e.detail.value);
		},
		onGoodsNumBlur(e) {
			this.$emit('goodsnumblur', e);
		},
		// 数量变化
		onGoodsNum(delta) {
			this.$emit('goodsnum', delta);
		},
		// 确认
		onConfirm(item) {
			this.$emit('confirm', item);
		}
	}
};
</script>

<style lang="scss">
.book-wrap {
	background: white;
	border-top-left-radius: 20upx;
	border-top-right-radius: 20upx;
	width: 100%;
	.goods-img-price-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30upx 0;
		border-bottom: 1 solid #e5e5e5;
		.goods-img {
			height: 120upx;
			width: 120upx;
			padding-left: 30upx;
			image {
				width: 120upx;
				height: 120upx;
			}
		}
		.goods-price-box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 120upx;
			padding-left: 28upx;
			.price {
				display: flex;
				flex-direction: row;
				align-items: center;
				text {
					padding-left: 10upx;
					padding-top: 7upx;
					font-size: 48upx;
					color: #2f7ff5;;
				}
			}
			.sku-params {
				font-size: 24upx;
				color: #999;
			}
			.count-num {
				font-size: 24upx;
				color: #999;
			}
		}
	}

	.goods-sku-list-wrap {
		display: flex;
		flex-direction: column;
		.sku-item {
			padding: 0 30upx;
			.sku-name {
				font-size: 24upx;
				color: #333;
				padding: 20upx 0upx;
			}
			.sku-value-box {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				text {
					font-size: 26upx;
					color: #333;
					padding: 10upx 20upx;
					margin-right: 15upx;
					border: 2upx solid #ebebeb;
					opacity: 0.6;
					border-radius: 5px;
					margin-bottom: 10upx;
				}
				.active {
					background-color:$base;
					border: 2upx solid $base;
					color: #fff;
					opacity: 1;
				}

				.disabled {
					background-color: #e5e5e5;
					color: #ccc;
					opacity: 1;
				}
			}
		}
	}

	.goods-num-select-wrap {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx 30upx 30upx;
		.num-text {
			font-size: 24upx;
			color: rgb(51, 51, 51);
		}
		.number-select {
			height: 50upx;
			border-radius: 6upx;
			border: 2upx solid #e5e5e5;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			width: 200upx;
			.number-change-less {
				width: 60upx;
				text-align: center;
				border-right: 2upx solid #e5e5e5;
				height: 100%;
				line-height: 50upx;
				font-size: 36upx;
			}
			.number_change_add {
				width: 60upx;
				text-align: center;
				border-left: 2upx solid #e5e5e5;
				height: 100%;
				line-height: 50upx;
				font-size: 36upx;
			}

			.goods-number {
				margin-bottom: 0;
				width: 60upx;
				padding: 0 10upx;
				text-align: center;
				font-size: 36upx;
				color: #353535;
			}
		}
	}

	.comfirm-btn-box {
		margin: 40upx;
		button {
			color: #fff;
			border-radius: 6upx;
			text-align: center;
			background: $base;
		}
	}
	.book-close {
		position: absolute;
		width: 30upx;
		height: 30upx;
		right: 10upx;
		top: 0upx;
		padding: 20upx;
	}
}
</style>