mnsx/pages/menu/Child/dialogBar.vue

<template>
	<view class="all">
		<view class="dialogBar">
			<view class="top">
				<view class="top-img"><image :src="actionImage" mode=""></image></view>
				<view class="goods">
					<view id="b">
						<b>{{ dataList.store_name }}</b>
					</view>
					<view id="span">￥{{ actionPrice * num }}</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-y">
				<view class="material clist pd" v-for="(d, int) in specList" :key="int">
					<text class="text">{{ d.attr_name }}</text>
					<view class="materials-c lists-c">
						<view
							v-for="(childItem, childIndex) in d.attr_value"
							:key="childIndex"
							class="tit"
							:class="{ selected: childItem.check }"
							@click="selectSpec(childItem, d, int)"
						>
							{{ childItem.attr }}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="buy">
				<view class="buy-top">
					<span>购买数量</span>
					<view class="num"><uni-number-box class="step" :isMin="true" :value="num" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box></view>
				</view>
				<button type="default" class="shop" @click="setShop(dataList)">加入购物车</button>
			</view>
			<view class="button" @click="del"><image src="../../../static/icon/tc-del.png"></image></view>
		</view>

		<view class="curtain"></view>
	</view>
</template>

<script>
import { goodsDetail, cartAdd } from '@/api/product.js';
import uniNumberBox from '@/components/uni-number-box.vue';
export default {
	components: {
		uniNumberBox
	},
	data() {
		return {
			buys_show: true,
			buys_shows: false,
			pid: '',
			num: 1,
			uniqueId: '',
			actionPrice: 0, //默认选中商品价格
			actionImage: '', //默认选中图片
			dataList: [], //商品数据
			specList: [], //规格
			feeding: '', //加料
			goodsNumberMax: 0, //最大可购买数量
			goodsNumberMin: 0 //最小可购买数量
		};
	},
	props: {
		showItem: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	created() {
		this.loadData();
	},
	methods: {
		loadData() {
			const obj = this;
			console.log(this.showItem, 'dangqian duixiang ');
			goodsDetail({}, this.showItem.id).then(({ data }) => {
				console.log(data);
				let goods = data.storeInfo;
				this.dataList = goods;
				obj.specList = data.productAttr; //保存分类列表
				if (Array.isArray(data.productValue) != true) {
					obj.many = 2;
					obj.specList = data.productAttr; //保存产品属性
					obj.productValue = data.productValue; //保存属性值
					obj.specSelected = []; //初始化默认选择对象
					for (let i = 0; i < obj.specList.length; i++) {
						// 设置默认数据
						let attrValue = obj.specList[i].attr_value[0];
						attrValue.check = true;
						obj.specSelected.push(attrValue.attr);
					}
					let str = obj.specSelected.join(',');
					console.log(str, 'str');
					// 设置默认值
					obj.actionPrice = obj.productValue[str].price;
					obj.goodsNumberMax = obj.productValue[str].stock;
					obj.actionImage = obj.productValue[str].image;
					obj.uniqueId = obj.productValue[str].unique;
					obj.goodsStore = obj.productValue[str].stock;
				} else {
					obj.many = 1;
					obj.productValue = data.productValue; //保存分类查询数据
					obj.actionPrice = goods.price; //保存默认选中商品价格
					obj.actionImage = goods.image_base; //保存默认选中商品图片
					obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
					obj.shopId = data.mer_id; //保存商店id
				}
			});
		},
		del() {
			this.$emit('tcDel');
		},
		//选择数量
		numberChange(e) {
			this.num = e.number;
		},
		//选择规格
		selectSpec(item, arr, ind) {
			arr.attr_value.forEach(function(e) {
				e.check = false;
			});
			item.check = true;
			let obj = this;
			obj.specSelected[ind] = item.attr;
			let str = obj.specSelected.join(',');
			// 获取当前选中的对象
			if (obj.productValue[str]) {
				obj.buys_show = true;
				obj.buys_shows = false;
				obj.actionPrice = obj.productValue[str].price;
				// obj.goodsNumberMax = obj.productValue[str].quota;
				obj.actionImage = obj.productValue[str].image;
				obj.uniqueId = obj.productValue[str].unique;
				obj.goodsStore = obj.productValue[str].stock;
			} else {
				(obj.buys_show = false), (obj.buys_shows = true);
			}
			if (obj.goodsStore == 0) {
				obj.buys_show = false;
				obj.buys_shows = true;
			}
			obj.specSelected[ind] = item.attr;
		},
		//加入购物车
		setShop(item) {
			let obj = this;
			cartAdd({
				cartNum: this.num, //商品数量
				uniqueId: this.uniqueId, //商品标签
				new: 0, //商品是否新增加到购物车1为不加入0为加入
				mer_id: '',
				productId: item.id //商品编号
			})
				.then(function(e) {
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 500,
						icon: 'none'
					});
					obj.$emit('setShop');
				})
				.catch(e => {
					console.log(e);
				});
		}
	},
	watch: {
		num() {
			this.num = Math.ceil(this.num);
		},
		totalPrice() {
			this.feedingList();
		}
	},
	computed: {
		//总价格(不算倍数)
		totalPrice() {
			let price = this.price;
			for (let i = 0; i < this.dataList.length; i++) {
				for (let a = 0; a < this.dataList.length; a++) {
					if (this.dataList[i].list[a].isChoose) {
						price += this.dataList[i].list[a].price;
					}
				}
			}
			return price;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}
#hr {
	width: 90%;
	height: 1rpx;
	margin-top: 10rpx;
	background-color: #eeeeee;
	margin-bottom: 0;
}
.button {
	border-radius: 50%;
	width: 83rpx;
	height: 83rpx;
	position: relative;
	z-index: 99;
	margin-top: 60rpx;
	margin-left: calc(50% - 40rpx);
	margin-bottom: -150rpx;
	image {
		width: 83rpx;
		height: 83rpx;
	}
}
.dialogBar {
	z-index: 99;
	width: 670rpx;
	position: absolute;
	top: calc(50% - 391rpx);
	left: calc(50% - 335rpx);
	background-color: #ffffff;
	border-radius: 20rpx;
	display: grid;
	.top {
		color: #1c2023;
		width: 100%;
		height: 200rpx;
		font-size: 36rpx;
		font-family: PingFang-SC-Bold;
		display: flex;

		.top-img {
			margin: auto 30rpx;
		}
		image {
			width: 140rpx;
			height: 140rpx;
		}

		.goods {
			display: grid;
			margin: auto 10rpx;

			#span {
				font-size: 45rpx;
				color: #ee2f72;
				line-height: 70rpx;
			}

			#b {
				line-height: 70rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
		}
	}
	.scroll-y {
		width: 100%;
		height: calc(100%+15rpx);
	}

	.clist {
		width: 90%;
		margin: 0 auto;
		color: #333333;
		font-size: 28rpx;
		padding-bottom: 20rpx;
		font-family: PingFang-SC-Medium;
		border-bottom: 1px solid #eeeeee;
		.text {
			margin-top: 30rpx;
			font-weight: bold;
		}
		.lists-c {
			display: flex;
			flex-flow: row wrap;
		}
		.tit {
			margin-right: 20rpx;
			margin-top: 28rpx;
			font-size: 28rpx;
			background: #f6f6f6;
			width: 120rpx;
			text-align: center;
			flex-shrink: 0;
			font-size: 30rpx;
			color: #666666;
		}
		.selected {
			background: #ffeff1;
			border: 1rpx solid #ff5263;
			color: #f3120a;
		}
	}

	.buy {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		margin-top: 40rpx;
		padding-bottom: 30rpx;
		.buy-top {
			height: 90rpx;
			span {
				margin-left: 30rpx;
				font-weight: bold;
			}
		}
		.shop {
			width: 279rpx;
			height: 84rpx;
			line-height: 84rpx;
			background-color: #ee2f72;
			text-align: center;
			border-radius: 40rpx;
			color: #ffffff;
		}
		.num {
			display: flex;
			width: 227rpx;
			float: right;
			margin: -10rpx 40rpx;

			$heightAw: 64rpx;
			input {
				width: 150rpx;
				border: solid 1rpx #cfcfcf;

				height: $heightAw;
				line-height: $heightAw;
				text-align: center;
			}
			.da {
				width: 84rpx;
				height: $heightAw;
				line-height: $heightAw;
				border: solid 1rpx #cfcfcf;
				text-align: center;
				background-color: #f6f6f6;
				color: #333333;
			}
		}
	}
}
.curtain {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 11;
}
</style>