博客

1、可以新建一个组件

zhezhao.vue

<template>
	<u-overlay :show="show" @click="handleClose">
		<view v-if="odata" class="bg-fff pop-cont" @tap.stop>
			<view class="flex padding u-border-bottom">
				<image class="poster margin-right" :src="odata.img" mode="aspectFill"></image>
				<view class="fs-24">
					<view class="">
						{{odata.name}}
					</view>
					{{odata.french}}
					<view class="margin-tb-xs">
						￥{{odata.list[dropIdx].price}}
					</view>
					<text class="iconfont icon-canju"></text>
					{{odata.list[dropIdx].fittings}}
				</view>
			</view>
			<view class="flex justify-between padding u-border-bottom">
				<text>规格选择</text>
				<view class="spec-cont">
					<view @tap="listShow=!listShow">
						{{odata.list[dropIdx].spec}}
						({{odata.list[dropIdx].weight}})
						 - 
						 {{odata.list[dropIdx].edible}}
						<text class="iconfont icon-xiala"></text>
					</view>
					<view v-if="listShow" class="spec-list bg-fff my-shadow">
						<view v-for="(item,index) in odata.list" @tap="handleDrop(index)" :class="{'bg-grey':index==dropIdx}" class="padding-sm">
							{{item.spec}}({{item.weight}}) - {{item.edible}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding">
				<text>数量选择</text>
				<u-number-box v-model="num" :min="1" :max="100" buttonSize="20"></u-number-box>
			</view>
			<view class="flex btn-cont">
				<view  @tap="handleClose" class="bg-grey padding">
					取消
				</view>
				<view @tap="handleOk" class="bg-yellow padding">
					确认
				</view>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		name:"good-spec",
		data() {
			return {
				listShow:false,
				dropIdx:0,  //被选中下拉规格序号
				num:1 //商品数量
			};
		},
		computed: {
			show() {
				return this.$store.state.cart.show 
			},
			odata(){ //弹窗商品数据
				return this.$store.state.cart.overlayData
			}
		},
		created(){
			console.log('弹窗组件显示了');
			if(!this.odata){return} //弹窗未显示的容错处理
			let {dropIdx,num} = this.odata
			if(dropIdx){ //判断新增、编辑
				this.dropIdx = dropIdx
				this.num = num
			}
		},
		methods: {
			handleClose() {
				this.$store.commit('cart/cartOverlayMut',false)
			},
			handleDrop(idx){ //规格选择
				this.dropIdx = idx
				this.listShow = false
			},
			handleOk(){ //商品添加
				let obj = {...this.odata}
				obj.dropIdx = this.dropIdx
				obj.id = obj.list[this.dropIdx].id //将商品id换为规格id
				obj.num = this.num
				this.$store.commit('cart/cartAddMut',obj)
				this.handleClose()
			}
		},
	}
</script>

<style lang="scss">
.pop-cont{   //这里是把遮罩控制在页面居中
	position: absolute;
	top: 50%;
	left: 3%;
	width: 94%;
	box-sizing: border-box;
	transform: translateY(-50%);
}
.poster{
	height: 160upx;
	width: 160upx;
}
.btn-cont{
	view{
		width: 50%;
		text-align: center;
	}
}
.spec-cont{
	position: relative;
	.spec-list{
		position: absolute;
		right: 0;
		top: 70upx;
		z-index: 2;
		width: 400upx;
	}
}
</style>

2、挂载在main.js

import GoodSpec from 'components/good-spec.vue'
Vue.component('good-spec',GoodSpec)

3、哪里需要这个组件就写在那个页面

<good-spec v-if="show"></good-spec>

4、

<u-overlay :show="show" @click="handleClose">
		<view v-if="odata" class="bg-fff pop-cont" @tap.stop>   //@tap.stop是阻止冒泡

在状态机新建一个数据包data 为null  然后把页面点击的数据传给this.data

页面代码

handleCartAdd(){ 
				this.$store.commit('cart/initOverlayDataMut',{  //连接状态机这个方法
					obj:this.gdata,  //传入的数据
					edit:-1
				})

状态代码

overlayData:null,  //存放弹窗商品数据
initOverlayDataMut(state,{obj,edit}){ //购物车按钮、编辑按钮，初始化弹窗数据
			state.overlayData = obj  //设置弹窗数据
			state.edit = edit
			state.show = true
		}

弹窗显示页面为 v-if=“data”   //说明 这个数据包有数据的时候才能开启遮罩

然后弹窗页面拿到数据包 渲染页面

computed: {
			show() {//接住一个bool判断是否开启弹窗
				return this.$store.state.cart.show 
			},
			odata(){ //弹窗商品数据接收
				return this.$store.state.cart.overlayData
			}
}


页面渲染
{{odata.name}}