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>