本节：点击切换页面，出现对应页面的内容，对应页面的小红点数量也会增加减少。
1.div
（1.）循环输出产品信息，小红点的设置。
设置点击方法，循环输出分类，“子绝父相”定位小红点的位置，v-if=“变量名”>0，显示小红点。
(2.)判断分类ID，增加减少商品数量。
（3.底部价格和数量的设置，点击“结算”，调用计算方法。）
2.script
(1.)变量的定义，分类数组，显示分类ID，商品数组。（这里是没有连接接口数据，是死数据）
定义总价，总数的变量
（2.）接口调用：显示产品列表的方法
（3.）点击分类之后，判断商品的分类ID是否与分类ID一致，如果一致，就显示对应分类界面。
（4.）对应分类的增加与显示。
原理：判断，接收到的商品参数大于0时，定义一个新数组。
循环分类列表，如果商品id==分类ID，则把数量赋值到刚刚定义的数组。
小红点里面，商品总类的id和商品价钱商品数量设置为0,。
再次循环商品，如果商品ID等于分类的id，就对应分类，累计增加对应的商品数量。
最后，在循环外，在计算商品数量和总数。
（5.购物车接收商品的数量和价格形成数组，传参给接口 ）
最后，原代码
<template>
<view>
<view class="" style="background-color:#f7f7f7 ;">
<view style="height: 110rpx;width: 750rpx;line-height: 110rpx;background-color: #FFFFFF;">
藤原肠粉店
</view>
<view>
<view class="page-section swiper">
<view>
<swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
:indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval"
:duration="duration">
<swiper-item>
<view>
<image style="width: 750rpx; height: 422rpx; " src="../../../static/1.jpg" mode="">
</image>
</view>
</swiper-item>
<swiper-item>
<view>
<image style="width: 750rpx; height: 422rpx; " src="../../../static/1.jpg" mode="">
</image>
</view>
</swiper-item>
<swiper-item>
<view>
<image style="width: 750rpx; height: 422rpx; " src="../../../static/1.jpg" mode="">
</image>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="qianggoouqu" style="margin-top: 10rpx;background-color: #FFFFFF;">
<view class="" style="font-weight: 600;padding-bottom: 5rpx;">
抢购专区
</view>
<view class="">
<scroll-view class="nav1" scroll-x="true" style="">
<view class="" style="background-color:#FFFFFF;display: flex;width:1800rpx;height: 330rpx;">
<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
</image>
<view class="tc">
一人吃超值套餐
</view>
<view class="price" style="display: flex;font-size: 35rpx;">
￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
￥4.9
</del>
</view>
</view>
<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
</image>
<view class="tc">
一人吃超值套餐
</view>
<view class="price" style="display: flex;font-size: 35rpx;">
￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
￥4.9
</del>
</view>
</view>
<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
</image>
<view class="tc">
一人吃超值套餐
</view>
<view class="price" style="display: flex;font-size: 35rpx;">
￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
￥4.9
</del>
</view>
</view>
<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
</image>
<view class="tc">
一人吃超值套餐
</view>
<view class="price" style="display: flex;font-size: 35rpx;">
￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
￥4.9
</del>
</view>
</view>
<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
</image>
<view class="tc">
一人吃超值套餐
</view>
<view class="price" style="display: flex;font-size: 35rpx;">
￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
￥4.9
</del>
</view>
</view>
<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
</image>
<view class="tc">
一人吃超值套餐
</view>
<view class="price" style="display: flex;font-size: 35rpx;">
￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
￥4.9
</del>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="" style="margin-top: 10rpx;background-color: #FFFFFF;height: 80rpx;display: flex;">
<view @click="showGoodsByCategoryId(category.id)" v-for="(category,index) in categoryList"
:key="'c-' +index" style="margin-left: 20rpx;line-height: 80rpx;display:flex;
position: relative;">
<!-- :key="'c-' +index" 防止循环重复，不然电脑会以为只有一个循环 -->
{{category.id}}--{{category.name}}
<view v-if="category.count > 0" class="yuan2" style="position: absolute;top: 0rpx;right: -20rpx;">
{{category.count}}
</view>
<!-- <div style="position: relative;" v-for="(cate, index) in category"
:key="index">
{{ cate.name }}
</div> -->
</view>
</view>
<view class="" style="margin-top: 10rpx;background-color: #FFFFFF;height: 1200rpx;">
<view v-for="(good,index) in goods" style="padding-top: 30rpx;display: flex;align-items: center; ">
<div v-if="good.categoryId == showCategoryId">
<div>
<image style="width: 131rpx;height: 125rpx;margin-left: 20rpx;" :src="good.img"></image>
<!-- 冒号是变量，不是冒号的src是直接的路径 -->
</div>
<view style="margin-left: 10rpx;">
<div>{{good.name}}</div>
<div>{{good.desc}}</div>
<div>￥{{good.price}}</div>
</view>
<view class="" style="display: flex;margin-left:300rpx;margin-top:-100rpx">
<view class="btn1" @click="alterGoods(good,1)">+</view>
<view class="">
{{good.count}}
</view>
<view class="btn2" @click="alterGoods(good,-1)">-</view>
</view>
</div>
</view>
</view>
</view>
<view class="countlanmu">
<view class="" style="flex: 1;padding-left: 30rpx;">
<view class="">
总价:
{{totalprice.toFixed(2)}}
</view>
数量
{{totalcount}}
</view>
<view class="js" @click="settlement()">
去结算
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 1.任何变量的先加都要放在data里面
categoryList: [{
id: 1,
name: "烧腊",
count: 0,
},
{
id: 2,
name: "奶茶",
count: 0,
},
{
id: 3,
name: "米饭",
count: 0,
},
],
showCategoryId: 1,
totalprice: 0,
totalcount: 0,
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 500,
indicatorColor: "#292b40",
indicatorActiveColor: "#ffffff",
goods: [{
name: "曲奇饼",
price: 0.5,
desc: "我很好吃",
img: "../../../static/3.png",
count: 0,
categoryId: 1,
},
{
name: "奥利啊",
price: 0.5,
desc: "我很好吃",
count: 0,
img: "../../../static/1.jpg",
categoryId: 2,
},
{
name: "奥利啊",
price: 0.5,
desc: "我很好吃",
count: 0,
img: "../../../static/1.jpg",
categoryId: 3,
},
{
name: "奥利啊",
price: 0.5,
desc: "我很好吃",
count: 0,
img: "../../../static/1.jpg",
categoryId: 2,
},
]
}
},
created: function() {
// 4.最开始就运行这个程序，就是计算器
// this.loadcategoryList();
},
methods: {
settlement(){
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' //自定义请求头信息,服务器没有要header的时候，可以不传
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
},
alterGoods(good, val) {
// val是加减的参数
// good.count = good.count + val;
good.count = Math.max(good.count + val, 0);
// 大于0的时候才赋值
// 寻找分类的对象
// 增加对应商品，会在对应分类增加对应的数量。商品有分类的id，分类也有id，相等就可以互相对应。
let curCategory = {};//新定义的数组
for (let c of this.categoryList) {
// 循环分类列表，如果商品id和分类id一致，就把这个id参数赋值给新定义的数组
if (c.id == good.categoryId) {
curCategory = c;
}
curCategory.count = 0;//先把商品分类总数，小红点里面的值，定义为0
//this.categoryList[0].count = 0; //先把红点里面的内容定义为0
this.totalcount = 0;
this.totalprice = 0;
for (let g of this.goods) {
// 再次循环商品
if (curCategory.id == g.categoryId) {
// 如果商品的id等于新定义数组的id，就计算各个分类数组的总数，商品的数量加上对于分类的数量
curCategory.count = curCategory.count + g.count;
// this.curCategory[0].count = this.categoryList[0].count + g.count;
// 红点里面的内容，加商品的内容，不断累加
}
this.totalcount += g.count; //数量
this.totalprice += g.count * g.price; //价格
}
}
},
showGoodsByCategoryId(categoryId) {
this.showCategoryId = categoryId;
},
loadcategoryList() { //显示商品列表
var that = this;
// 方便指向，访问上面的数组，就是把上面之前的东西赋值到that上，就不需要再引入一遍，只需要that即可指到之前的对象
uni.request({
url: 'http://www.yhjtp.com:8761/menu/category/list/', //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
that.categoryList = res.data.data;//接收到的分类列表
for (let i of that.categoryList) {
i["count"] = 0;
// 定义一个变量count，默认值为0，因为服务器没有count变量，所以要定义一个，然后在根据上面加就加
}
}
});
}
},
}
</script>
<style>
.countlanmu {
position: fixed;
bottom: 0rpx;
height: 100rpx;
display: flex;
background-color: #FFFFFF;
width: 750rpx;
}
,
.js {
padding-right: 30rpx;
flex: 1;
background-color: #c09969;
width: 150rpx;
height: 80rpx;
border-radius: 50rpx;
line-height: 80rpx;
text-align: center;
}
,
.btn1 {
height: 50rpx;
width: 50rpx;
background-color: #6d8dc4;
border-radius: 50%;
text-align: center;
color: #FFFFFF;
font-weight: 600;
margin-right: 10rpx;
}
,
.btn2 {
margin-left: 10rpx;
height: 50rpx;
width: 50rpx;
background-color: #6d8dc4;
border-radius: 50%;
text-align: center;
color: #FFFFFF;
font-weight: 600;
}
,
.yuan2 {
height: 40rpx;
width: 40rpx;
background-color: #ff0000;
border-radius: 50%;
text-align: center;
line-height: 40rpx;
color: #FFFFFF;
font-size: 16rpx;
}
,
.banner {
width: 750rpx;
height: 422rpx;
background-color: #0f0f27;
}
.banner .swiper {
width: 750rpx;
height: 422rpx !important;
}
.banner .swiper-item {
width: 750rpx;
height: 422rpx !important;
}
.banner .swiper-item image {
display: block;
width: 750rpx;
height: 422rpx !important;
}
</style>
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
