JM-MiniApp/components/goodsSpecs.vue

<script setup>
	// 引入
	import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
	import {ref,onMounted,nextTick,reactive,watch} from "vue"
	import myButton from "@/components/myButton.vue"
	import { useStore } from '@/store'
	import api from "@/api/index"
	const store = useStore()
	/* 
	！！！！！注意区分：show_status-按钮是否有效；show_state-是否展示本组件 
	show_type如果是团购或秒杀，无法添加到购物车
	 */
	const props = defineProps(['show_type','goods_info','btn_text','show_state','show_status','payBtn']);// goods_info:商品详情(goodsDetail页面的info变量)
	const emits = defineEmits(['choosedOk','choosedDeliveryOk'])
	onLoad((e) => {
		console.log('规格！！！',props)
		// styleObject.value.height = store.systemInfo.screenHeight/1.5+'px'
		// console.log("组件:",styleObject.value)
		getDelivery()
	})
	onShow(() =>{
		// styleObject.value.height = store.systemInfo.screenHeight/1.5+'px'
	})
	watch(
	  () => props.goods_info,
	  (newVal, oldVal) => {
		info.value = newVal
		console.log('监听参数',info.value)
		goods_type.value = info.value.type
		handleFunc()
	  }
	)
	watch(()=>props.show_state,(newVal, oldVal) => {
		// console.log(11111,props.show_type)
		if(newVal && !deliveryInfo.value) {
			getDelivery()
		}
		styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
		popup.value.open('bottom')
		// console.log(deliveryInfo.value)
		// console.log("组件:",props.show_state)
	  })
	// 变量
	const goods_type = ref(null)
	const update_fields = ref(['cost_price','createtime','market_price','sales','sell_price','stock','weight']) // 需要更新的商品字段
	const styleObject = ref({
	  height: '',
	})
	const info = ref(null)
	const total_num = ref(1)
	const popup = ref()
	const info_text = ref('')
	const deliveryInfo = ref(null)
	// 函数
	async function getDelivery(){ // 获取配送相关的选项
		const res = await api.getDelivery()
		// console.log(res)
		if(res.code === 1) {
			deliveryInfo.value = res.data
			// console.log(deliveryInfo.value)
		}
	}
	function chooseFunc(type){
		// type.value = type
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		popup.value.open(type)
	}
	function change(e) {
		// console.log('当前模式：' + e.type + ',状态：' + e.show);
	}
	function handleFunc() {
		if(info.value.specs && info.value.specs.length>0) {
			choosed_list.value = new Array(info.value.specs.length);
			// console.log("choosed_list:",choosed_list.value)
		}
	}
	const choosed_list = ref([])
	function choosePopFunc2(i,i2) { // 规格选择函数 
		choosed_list.value[i] = i2
		let str = choosed_list.value.join()
		getNewinfo(i,i2,str)
	}
	const current_specs_id = ref(null)
	const emitParams = ref({total_num:1})
	async function getNewinfo(i,i2,str) {
		// console.log(str)
		const res = await api.getNewinfo({
			goods_id:info.value.id,
			ks:str
		})
		if(res.code === 1) {
			info.value.specs[i].choosed_val = i2
			// 更新对应数据
			for(let prop in update_fields.value) {
				info.value[update_fields.value[prop]] = res.data[update_fields.value[prop]]
			}
			info_text.value = res.data.name
			// console.log(info.value)
			current_specs_id.value = res.data.id
			emitParams.value.current_specs_id = res.data.id
			emitParams.value.flag_res = checkFunc()
			emits('choosedOk',emitParams.value)
		}
		else{
			// res.msg
			uni.showToast({
				duration:2000,
				title:res.msg,
				icon:'error'
			})
		}
	}
	function changeNumFunc(value){
		if(value<info.value.stock && value>0) { 
			// info.value.sell_price = parseFloat(info.value.sell_price) ++
			total_num.value = value
		}
		else if(value<1) {
			total_num.value = 1
		}
		else{ // 超过库存 
		  uni.showToast({
		  	title:"超出库存了",
			icon:"error"
		  })
		  return 
		}
		emitParams.value.total_num = total_num.value
		emitParams.value.flag_res = checkFunc()
		emits("choosedOk",emitParams.value)
		// console.log(value)
	}
	async function ofunc(type) { // 加入购物车
		if(['group','limited'].includes(props.show_type)){ // 秒杀和团购 无法添加购物车
			return 
		}
		let flag_res = checkFunc()
		let iocn_flag = 'success',title = '已加入购物车！'
		// console.log(flag_res)
		if(!flag_res.flag) {
			iocn_flag = 'error',
			title = flag_res.text
		}
		else{ 
			if(goods_type==1) {
				// 检查配送相关
				let warning_text = checkDeliveryInfo()
				if(warning_text) {
					uni.showToast({
						title:warning_text,
						icon:"error"
					})
					return
				}
			}
			let add_res = await addCart()
			if(add_res.state) {
				popup.value.close()
				emitParams.value.state = 1
				emitParams.value.flag_res = checkFunc()
				store.cartChange = !store.cartChange
				emits('choosedOk',emitParams.value)
			}
			else{
				iocn_flag = 'error'
			}
			title = add_res.msg
		    
		}
		uni.showToast({
			title,
			icon:iocn_flag,
			duration: 2000,
			// mask:true
		});
	}
	async function addCart() {
		// let add_res = false
		let add_res = {
			state:false,
			msg:''
		}
		let params = {
			goods_id:info.value.id,
			spec_id:current_specs_id.value?current_specs_id.value:-1,
			num:total_num.value,
			frequency:deliveryInfo.value.frequency[deliveryInfo.value.frequency_index],
			delivery_start_time:deliveryInfo.value.start_time[deliveryInfo.value.start_time_index],
			need_milk_box:deliveryInfo.value.need_milk_box[deliveryInfo.value.need_milk_box_index]
		}
		const res = await api.addCart(params)
		if(res.code === 1) {
			add_res.state = true
		}
		add_res.msg = res.msg
		return add_res
	}
	function checkDeliveryInfo() { // 检查配送相关
		if(!deliveryInfo.value) {
			return '请选择配送频率'
		}
		let c_arr = [
			{
				prop:'frequency_index',
				title:'请选择配送频率'
			},
			{
				prop:'start_time_index',
				title:'请选择起送时间'
			},
			{
				prop:'need_milk_box_index',
				title:'请选择是否需要奶箱'
			}
		]
		// deliveryInfo.value.
		for(let i = 0;i<c_arr.length;i++) {
			if(!deliveryInfo.value.hasOwnProperty(c_arr[i].prop)) {
				return c_arr[i].title
			}
		}
	}
	function checkFunc() {
		let flag = true
		let res_flag = {
			flag:true,
			text:''
		}
		if(info.value.specs && info.value.specs.length>0) {
			for(let item of info.value.specs) {
				if(!item.hasOwnProperty('choosed_val')) {
					res_flag.flag = false
					res_flag.text = '请选择'+item.title
					break;
				}
			}
		}
		// console.log(info.value)
		return res_flag
	}
	function chooseDeliveryFunc(prop,title) {
		// console.log(prop,title)
		deliveryInfo.value[prop] = title
		emits('choosedDeliveryOk',{info:deliveryInfo.value})
	}
	function determine(func) {
		emits('payOk')
	}
</script>
<template>
	<view class="goodsSpecsBox">
		<!-- <view class="g-cart btn-css" @tap="chooseFunc('bottom')">
			选择
		</view> -->
		<uni-popup ref="popup" @change="change">
			<view class="popup-content" :style="styleObject" >
				<!-- 产品主信息 -->
				<view class="pc-row main-info">
					<view class="pcr-left">
						<view class="pcrl-img-box">
							<image :src="info?.goods_image" mode=""></image>
						</view>						
					</view>
					<view class="pcr-right">
						<view class="pcrr-row bold-text">
							{{info?.goods_name}}
						</view>
						<view class="pcrr-row small-text">
							产品描述
						</view>
						<view class="pcrr-row small-text">
							{{info?.sellpoint}}
						</view>
					</view>
				</view>
				<!-- 规格 -->
				<view class="pc-row" v-for="(item,i) in info?.specs">
					<view class="pcr-title">
						{{item.title}}
					</view>
					<view class="pc-choose-card-box">
						<view @tap="choosePopFunc2(i,i2)" :class="{choosedCard:item.choosed_val==i2}" class="pc-choose-card" v-for="(item2,i2) in item.items">
							{{item2.title}}
						</view>
					</view>
					<!-- <view class="small-text">
						温馨提示:配送区域为重庆市南岸区四公里到六公里
					</view> -->
				</view>
				<!-- 配送相关选项 -->
				<!-- deliveryInfo -->
				<template v-if="goods_type == 1">
					<view class="pc-row">
						<view class="pcr-title">
							配送频率
						</view>
						<view class="pc-choose-card-box">
							<view @tap="chooseDeliveryFunc('frequency_index',i2)" :class="{choosedCard:deliveryInfo?.frequency_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.frequency">
								{{item2}}
							</view>
						</view>
					</view>
					<view class="pc-row">
						<view class="pcr-title">
							起送时间
						</view>
						<view class="pc-choose-card-box">
							<view @tap="chooseDeliveryFunc('start_time_index',i2)" :class="{choosedCard:deliveryInfo?.start_time_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.start_time">
								{{item2}}
							</view>
						</view>
					</view>
					<view class="pc-row">
						<view class="pcr-title">
							是否需要奶箱
						</view>
						<view class="pc-choose-card-box">
							<view @tap="chooseDeliveryFunc('need_milk_box_index',i2)" :class="{choosedCard:deliveryInfo?.need_milk_box_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.need_milk_box">
								{{item2}}
							</view>
						</view>
					</view>
				</template>
				<!-- 数量 -->
				<view class="pc-row total-info-box">
					<view class="tib-left">
						<view class="tib-left-row">
							<text class="total-price bold-text">￥{{parseFloat(info?.sell_price) * total_num}}</text>
							<text class="small-text">（库存{{info?.stock}}）</text>
						</view>
						<view class="tib-left-row small-text">
							{{info_text}}
						</view>
					</view>
					<view class="tib-right">
						<uni-number-box :value="total_num" @change="changeNumFunc" />
					</view>
				</view>
				<!-- 按钮 -->
				<view class="pc-row total-info-box">
					<myButton :invalid="['group','limited'].includes(show_type)" showType="plain" style="width: 100%;" class="op-right" :type="2" @tap="ofunc(3)">
						加入购物车
					</myButton>
					<myButton @tap="determine(1)" v-if="['group','limited'].includes(show_type) && payBtn" style="width: 100%;" class="op-right" :type="2">
						{{btn_text}}
					</myButton>
					<myButton v-else-if="payBtn" style="width: 100%;" class="op-right" :type="2" @tap="determine(1)">
						去结算
					</myButton>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<style scoped lang="scss">
	// .invalidCss .add-btn-part .add-btn {
	// 	color: white !important;
	// 	background-color: #d7d7d7 !important;
	// 	border: 2rpx solid #d7d7d7 !important;
	// }
	.btn-css{
		background: #7CC4E8;
		color: white;
		padding: 6rpx 40rpx;
		border-radius: 20px;
		font-size: 28rpx;
		white-space: nowrap;
		margin-left: 10rpx;
		position: relative;
	}
	// 数量
	.total-info-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.tib-left{
			margin-right: 20rpx;
			.tib-left-row{
				color: red;
				margin-bottom: 20rpx;
			}
		}
	}
	// 选择区域
	.choosedCard{
		background-color: rgb(124, 196, 232) !important;
		color: white !important;
	}
	.goodsSpecsBox{
		.popup-content{
			padding-top: 40rpx;
			background-color: white;
			border-radius: 10px 10px 0 0;
			overflow: scroll;
			.pc-row{
				padding:0 40rpx;
				padding-bottom: 40rpx;
				.pcr-title{
					color: gray;
					font-size: 30rpx;
					padding: 20rpx 0;
				}
				.pc-choose-card-box{
					.pc-choose-card{
						display: inline-block;
						background: #f1f1f1;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						// font-weight: bolder;
						font-size: 28rpx;
					}
				}
			}
			.main-info{
				display: flex;
				// align-items:;
				.pcr-left{
					margin-right: 40rpx;
					.pcrl-img-box{
						border: 2rpx solid #dadada;
						width: 180rpx;
						height: 180rpx;
						image{
							width: 180rpx;
							height: 180rpx;
						}
					}  
				}
				.pcr-right{
					.pcrr-row{
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>