0
点赞
收藏
分享

微信扫一扫

1-20 very good饭店的分类Id选择

alonwang 2022-03-12 阅读 24
vue.js

1、

 

2、接下来就是小红点(需要分类关联) 实在不会记得带日常小例子普通了解一下

3、对象用户 有多个数组对象

https://gitcode.net/David2121/uniapp-b2/-/edit/master/.gitignore

4、加减的

方法一:

方法二:

 

 

<template>
	<view class="container">
		<view class="title">
			<text>VERY GOOD饭店</text>
		</view>
		<view class="taocan">
			<view class="qg">
				<text>抢购专区</text>
			</view>
			<!-- 三个 -->
			<view class="threebox">
				<!-- 这是第一个框 -->
				<view class="firstbox">
					<view class="tupian">
						<image src="../../images-fandian/taocan.png" mode="" class="tcphoto"></image>
					</view>
					<view class="fontone">
						一人吃超值套餐
					</view>
					<view class="fonttwobox">
						<view class="fonttwo1">¥9.9</view>
						<view class="fonttwo2">
							¥4.9</view>
					</view>
				</view>

				<view class="secondbox">
					<view class="tupian">
						<image src="../../images-fandian/taocan.png" mode="" class="tcphoto"></image>
					</view>
					<view class="fontone">
						一人吃超值套餐
					</view>
					<view class="fonttwobox">
						<view class="fonttwo1">¥9.9</view>
						<view class="fonttwo2">
							¥4.9</view>
					</view>
				</view>

				<view class="thirdbox">
					<view class="tupian">
						<image src="../../images-fandian/taocan.png" mode="" class="tcphoto"></image>
					</view>
					<view class="fontone">
						一人吃超值套餐
					</view>
					<view class="fonttwobox">
						<view class="fonttwo1">¥9.9</view>
						<view class="fonttwo2">
							¥4.9</view>
					</view>
				</view>
			</view>
			<!-- 套餐end @click="showGoodsByCategoryId(category.id)-->
			<view class="category">
				<view v-for="(category,index) in category" :key="index" class="saola"
					@click="loadMenus(category.id)">{{category.name}}
					<view v-if="category.count > 0" class="redradia">
						{{category.count}}
					</view>
				</view>
				<!-- 健康食品 公式烧腊 -->
			</view>
			<!-- 三个分类名end!!!!!!!!!!!!!! -->
			<view class="cookiebox">
				<!-- 餅乾第一个 !!!!!!!!!!!!!!!!!!!!!-->
				<view v-for="(good,index) in goods" class="onecookiebox">
					<view class="cookiephotobox">
						<image :src="good.img" mode="" class="cookiephoto">
						</image>
					</view>
					<view class="fontbox">
						<view class="cfontone">{{good.name}}</view>
						<view class="cfonttwo">{{good.desc}}</view>
						<view class="cfontthree">{{good.price}}</view>
					</view>
					<view class="changebox">
						<view class="changeboxleft">
							<view class="changeleftfont" @click="alterGoods(good,-1)">-</view>
						</view>
						<view class="changenum">{{good.count}}
						</view>
						<view class="changeboxright">
							<view class="changerightfont" @click="alterGoods(good,1)">+
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 工具透明-->
			<view class="transparentbox">
				<view class="transparentfont">+</view>
			</view>
			<!-- 开始總價的-->
			<view class="bottombox">
				<!-- 左边 -->
				<view class="bottomboxleft">
					<view class="zongjiabox">
						<view>总价:</view>
						<view class="zongjianum">{{totalPrice.toFixed(2)}}</view>
					</view>
					<view>数量:{{totalCount}}</view>
				</view>
				<!-- 右边 -->
				<view class="bottomboxright">
					<view class="settlement" @click="gotosettle()">去结算</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Helloasdasd',
				totalCount: 0,
				totalPrice: 0,
				showCategoryId: 1,
				category: [{
						id: 1,
						name: "烧腊",
						count: 0
					},
					{
						id: 2,
						name: "奶茶",
						count: 0
					},
					{
						id: 3,
						name: "米饭",
						count: 0
					},

				],
				goods: [{
					id: 1,
					name: "曲奇饼干01",
					price: 0.5,
					desc: "我很好吃",
					img: "../../static/images-fandian/cookie1.png",
					count: 0
				}, {
					id: 2,
					name: "大白兔01",
					price: 1.5,
					desc: "我很好吃",
					img: "../../static/images-fandian/cookie1.png",
					count: 0
				}, ]
			}
		},
		onLoad() {
			this.loadCategorys();

		},
		methods: {
			loadCategorys() {
				var that = this
				uni.request({
					url: `http://yhjtp.com:8761/menu/category/list`, //仅为示例,并非真实接口地址。
					success: (res) => {
						that.category = res.data.data;
						that.loadMenus(that.category[0].id); //默认的第一个
						console.log(res);

					}
				});
			},
			loadMenus(categoryId) {
				var that = this;
				uni.request({
					// ===============================``
					url: `http://yhjtp.com:8761/menu/menu/listmenu/${categoryId}/100/1`, //仅为示例,并非真实接口地址。
					success: (res) => {
						console.log(res);
						that.goods = [];
						for(let g of res.data.data.menuPage.records){
							that.goods.push({
								id:g.id,
								categoryId:g.categoryId,
								img:"http://yhjtp.com:8761/"+g.cover,
								price:g.price,
								desc:g.menuDesc,
								count:0
							})
						}
					}
				});
			},
			// showGoodsByCategoryId(categoryId) {
			// 	this.showCategoryId = categoryId;
			// 	this.loadMenus(categoryId);
			// },
			alterGoods(good, val) {
				// good.count = good.count +val;
				good.count = Math.max(good.count + val, 0);
				this.category[0].count = 0;
				this.totalCount = 0;
				this.totalPrice = 0;
				for (let g of this.goods) {
					;
					this.category[0].count = this.category[0].count + g.count;
					this.totalCount += g.count;
					this.totalPrice += g.count * g.price;
				}
			},
			showGoods(cate) {

			},
			gotosettle() {
				let orderInfo = {
					menuInfoDtoList: [],
					userId: 1,

				}
				for (let g of this.goods) {
					orderInfo.menuInfoDtoList.push({
						menuId: g.id,
						num: g.count,
					})
				}
				console.log(orderInfo);
				uni.request({
					url: 'http://www.yhjtp.com:8761/menu/order/confirm', //仅为示例,并非真实接口地址。
					data: orderInfo,
					method: "POST",
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},

					success: (res) => {
						console.log(res.data);
						// this.text = 'request success';
					}
				});
			},
			settlement() {
				//this.goods
				let orderInfo = { //1.因为服务器要接收数组和userID,所以要先定义好,然后再接收
					menuInfoDtoList: [],
					userId: 1,
				}

				for (let g of this.goods) { //2.循环商品数组
					orderInfo.menuInfoDtoList.push({ //3.接收到之后,传递进数组
						menuId: g.id,
						num: g.count,
					});

				}
				console.log(orderInfo);
				uni.request({ //1.连接接口
					url: 'http://www.yhjtp.com:8761/menu/order/confirm', //仅为示例,并非真实接口
					data: orderInfo, //传递的数组
					method: "POST", //传递的方法
					header: {
						'custom-header': 'hello', //自定义请求头信息,服务器没有要header的时候,可以不传
					},
					success: (res) => { //es6语法写法 2.成功之后的返回告知的文字
						console.log(res.data);
						this.text = 'request success'; //传递成功之后 输出的文字。
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import url("../../static/can.scss");
</style>

举报

相关推荐

0 条评论