new-cashier/jeepay-ui-uapp-merchant/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="isAllDisabled||!goods.isGrounding"><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
	} from 'vue';
	import myModel from '@/components/my-components/my-model.vue'
	import myButton from '@/components/my-components/my-button.vue'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		skuMap: {
			type: Object,
			default: () => {
				return {}
			}
		},
		skus: {
			type: Array,
			default: () => {
				return []
			}
		},
		defaultIndex: {
			type: Array,
			default: () => {
				return []
			}
		}
	})
	
	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(()=>{
		return props.skuMap[selSku.value]
	})
	
	//全部规格是否都无法使用
	const isAllDisabled=computed(()=>{
		console.log(props.skus);
		 return props.skus.reduce((prve,cur)=>{
			return prve&&cur.values.filter(v=>v.disabled).length===cur.values.length
		},true)
	})
	
	const emits = defineEmits(['confirm','updateSku'])
	let number = ref(1)
	
	
	function chooseSkd(skusIndex, skd) {
		const {name,disabled}=skd
		if(disabled){
			return
		}
		if(props.skus[skusIndex].sel!=name){
			emits('updateSku',skusIndex,name)
		}
	}
	const defaultIndex=reactive(new Array(props.skus.length).fill(''))
	for(let i in props.defaultIndex){
		defaultIndex[i]=props.defaultIndex[i]
	}
	const activeArr = defaultIndex

	console.log(activeArr);

	const model = ref(null)

	function open() {
		model.value.open()
	}

	function close() {
		model.value.close()
	}

	function reduce() {
		if(isDisabled()){
			return
		}
		const newval = number.value - 1
		number.value = newval <= 1 ? 1 : newval
	}

	function add() {
		if(isDisabled()){
			return
		}
		const newval = number.value + 1
		number.value = newval
	}
	
	function isDisabled(){
		return isAllDisabled.value
	}

	function confirm() {
		close()
		if(isDisabled()){
			return
		}
		emits('confirm',goods.value,number.value)
	}
	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>