first

pagesCreateOrder/index/components/guige.vue

@@ -0,0 +1,211 @@
+<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>