cashier_app/pagesCreateOrder/index/components/guige.vue

<template>
	<my-model ref="model" borderRadius="12" :title="title">
		<template #desc>
			<scroll-view scroll-y="true" style="height: 50vh;" class="u-p-30 guigeModel">
				<view class="u-m-b-40" v-for="(item,index) in skus" :key="index">
					<view class="u-text-left">
						<view class="color-333">{{item.name}}</view>
					</view>
					<view class="u-flex u-m-t-20 u-flex-wrap">
						<view class="item" @tap="chooseSkd(index,skd)"
							:class="{active:item.sel===skd.name,disabled:skd.disabled}"
							v-for="(skd,skdIndex) in item.values" :key="skdIndex">
							{{skd.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template #btn>
			<view class="u-p-30 border-top ">
				<view class="u-flex  u-p-b-30 u-row-between">
					<view class="price">
						<template v-if="goods&&goods.isGrounding">
							<text>￥</text>
							<text>{{to2(goods.salePrice*number) }}</text>
						</template>
					</view>
					<view class="u-flex">
						<view class="u-flex" @tap="reduce">
							<image src="/pagesCreateOrder/static/images/icon-reduce-black.svg" class="icon" mode="">
							</image>
						</view>
						<view class="u-m-l-30 u-m-r-30 color-333">
							{{number}}
						</view>
						<view class="u-flex" @tap="add">
							<image src="/pagesCreateOrder/static/images/icon-add-black.svg" class="icon" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="u-m-t-10">
					<my-button @tap="close" type="cancel" v-if="isDisabled">
						<view class="color-999">已下架/售罄</view>
					</my-button>
					<my-button @tap="confirm" v-else>添加</my-button>
				</view>
			</view>
		</template>
	</my-model>
</template>

<script setup>
	import { computed, reactive, ref, watch } from 'vue';
	import util from '../util.js';
	import infobox from '@/commons/utils/infoBox.js'
	import myModel from '@/components/my-components/my-model.vue'
	import myButton from '@/components/my-components/my-button.vue'
	const props = defineProps({
		goodsData: {
			type: Object,
			default: () => {}
		},
		title: {
			type: String,
			default: ''
		},
		skuMap: {
			type: Object,
			default: () => {
				return {}
			}
		},
		skus: {
			type: Array,
			default: () => {
				return []
			}
		},
		
	})
	const emits = defineEmits(['confirm', 'updateSku'])
	const model = ref(null)
	let number = ref(1)
	function to2(number) {
		return Number(number).toFixed(2)
	}

	const selSku = computed(() => {
		return props.skus.reduce((prve, cur) => {
			prve.push(cur.sel)
			return prve
		}, []).join()
	})

	const goods = computed(() => {
		console.log(props.skuMap[selSku.value])
		return props.skuMap[selSku.value]
	})
	watch(() => goods.value, (newval) => {
		number.value = newval.suitNum || 1
	})

	const isCanBuy = computed(() => {
		if (!goods.value) {
			return false
		}
		return util.isCanBuy(
			goods.value,
			props.goodsData
		)

	})

	/**
	 * 全部规格是否都无法使用
	 */
	const isAllDisabled = computed(() => {
		return props.skus.reduce((prve, cur) => {
			return prve && cur.values.filter(v => v.disabled).length === cur.values.length
		}, true)
	})

	/**
	 * 规格选择
	 * @param {Object} skusIndex
	 * @param {Object} skd
	 */
	function chooseSkd(skusIndex, skd) {
		const { name, disabled } = skd
		if (disabled) {
			return
		}
		if (props.skus[skusIndex].sel != name) {
			emits('updateSku', skusIndex, name)
		}
	}

	/**
	 * 禁止操作
	 */
	const isDisabled = computed(() => {
		return isAllDisabled.value || !isCanBuy.value
	})
	
	/**
	 * 数量减少
	 */
	function reduce() {
		if (isDisabled.value) {
			return
		}
		const suitNum = goods.value.suitNum || 1
		const newval = number.value - 1
		if (newval < suitNum) {
			return infobox.showToast(suitNum + '个起售')
		}
		number.value = newval <= 1 ? 1 : newval
	}
	
	/**
	 * 数量增加
	 */
	function add() {
		if (isDisabled.value) {
			return
		}
		number.value = number.value + 1
	}
	
	/**
	 * 都规格选择确认
	 */
	function confirm() {
		close()
		if (isDisabled.value) {
			return
		}
		emits('confirm', goods.value, number.value)
	}
	
	function open() {
		model.value.open()
	}
	
	function close() {
		model.value.close()
	}
	
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.border-top {}

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.guigeModel {
		.item {
			color: #666;
			font-size: 24rpx;
			padding: 4rpx 28rpx;
			border: 1px solid #E5E5E5;
			border-radius: 8rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			transition: all .2s ease-in-out;

			&.active {
				border-color: $my-main-color;
				color: $my-main-color;
			}

			&.disabled {
				color: #ccc;
				border-color: #eee;
			}
		}
	}

	.price {
		color: #EB4F4F;
	}

	.border-top {
		border-top: 1px solid #E5E5E5;
	}
</style>