商家详细信息页：
3.1 根据商家列表页传入的商家信息显示到上面
3.2 根据商家列表页传入的商家id查询t_food表中的商品信息，显示到下面
3.3 加号和减号操作购物车数据 t_cart
3.4 如果登录了，还需要在下面显示此人的购物车情况 t_cart
computed:计算属性计算食品总价，食品总数，结算总价格
step1 商家列表页新增加click事件，跳转到商家详情页
<div class="product-item" v-for="business in businessList" @click="findBusinessInfo(business)">
methods:{
findBusinessInfo:function(business){
//alert(businessId);
//请示findBusinessInfo页面，携带着商家id
this.$router.push({path:'/BusinessInfo',query:{business:business}});
}
}
3.1 BusinessInfo.vue根据商家列表页传入的商家信息，显示到上面
<script>
export default{
data(){
return{
//第一步：接收上一个页传输的商家
business:this.$route.query.business
}
}
}
</script>
<div class="log">
<img :src="business.businessImg">
</div>
<div class="business">
<h1>{{business.businessName}}</h1>
<p>￥{{business.starPrice}}起送 ￥{{business.deliveryPrice}}配送</p>
<p>{{business.businessExplain}}</p>
</div>
## 3.2 根据商家列表页传入的商家id查询t_food表中的商品信息，显示到下面 ##
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int businessId=Integer.parseInt(request.getParameter("businessId"));
IFoodInfoService service = new FoodInfoServiceImpl();
List<Food> foodlist = service.foodinfo(businessId);
ObjectMapper om=new ObjectMapper();
String json=om.writeValueAsString(foodlist);
System.out.println(json);
response.getWriter().append(json);
}
@Override
public List<Food> findBybusinessId(int businessId) throws Exception {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Food> list=new ArrayList();
try {
// 获取连接
conn = DBUtil.getConnection();
// 预处理语句
ps = conn.prepareStatement("select * from t_food where businessId=?");
ps.setInt(1, businessId);
// 执行查询，处理结果集
rs = ps.executeQuery();
while (rs.next()) {
Food obj = new Food();
// 逐个取出结果集里的列
// 封装到Food对象里
obj.setFoodExplain(rs.getString("foodExplain"));
obj.setFoodName(rs.getString("foodName"));
obj.setFoodId(rs.getInt("foodId"));
obj.setFoodImg(rs.getString("foodImg"));
obj.setFoodPrice(rs.getDouble("foodPrice"));
obj.setRemarks(rs.getString("remarks"));
obj.setBusinessId(rs.getInt("businessId"));
//放入list里
list.add(obj);
}
} catch (SQLException e) {
// 打印异常详情
e.printStackTrace();
// 抛给service层，让service层知道
throw new Exception(e.getMessage());
} finally {
try {
DBUtil.closeConnection(rs, ps, conn);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return list;
}
data(){
return{
//第一步：接收上一个页传输的商家id
business:this.$route.query.business,
foodList:[]
}
}
this.$axios.post('http://localhost:8082/webelement/foodInfoServlet',this.$qs.stringify({businessId:this.business.businessId}))
.then(res=>{
console.log(res.data);
this.foodList=res.data;
})
.catch(error=>{
console.log(error);
})
## 3.3 加号和减号操作购物车数据 t_cart ##
<template>
<div class="container">
<div class="header">
<p>商家列表</p>
</div>
<div class="log">
<img :src="business.businessImg">
</div>
<div class="business">
<h1>{{business.businessName}}</h1>
<p>￥{{business.starPrice}}起送 ￥{{business.deliveryPrice}}配送</p>
<p>{{business.businessExplain}}</p>
</div>
<!-- 食品部分 -->
<ul class="food">
<li v-for="(food,index) in foodList">
<div class="food-left">
<img :src="food.foodImg">
<div class="food-left-info">
<h3>{{food.foodName}}</h3>
<p>{{food.foodExplain}}</p>
<p>￥{{food.foodPrice}}</p>
</div>
</div>
<div class="food-right">
<div>
<i class="fa fa-minus-circle" @click="update(index,-1)" v-show="food.foodNum>0" ></i>
</div>
<p><span>{{food.foodNum}}</span></p>
<div>
<i class="fa fa-plus-circle" @click="add(index)"></i>
</div>
</div>
</li>
</ul>
<!-- 页脚部分 -->
<div class="footer">
<div class="cart-left">
<!-- 车-->
<div class="cart-car">
<div class="cart-icon">
<i class="fa fa-shopping-cart"></i>
<div class="txt">
4
</div>
</div>
</div>
<!-- 文字-->
<div class="cart-info">
<p class="money1">￥12.88</p>
<p class="money2">另需配送费3元</p>
</div>
</div>
<div class="cart-right">
<a href="#">去结算</a>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
//第一步：接收上一个页传输的商家id
business:this.$route.query.business,
foodList:[]
}
},
created() {
//1、根据商家上一页传入的商家信息更新上面商家信息（修改页面 显示business里的信息）
//2、根据商家id获取商品列表
this.$axios.post('http://localhost:8082/webelement/foodInfoServlet',this.$qs.stringify({businessId:this.business.businessId}))
.then(res=>{
console.log(res.data);
this.foodList=res.data;
})
.catch(error=>{
console.log(error);
})
//3、如果已登录状态需要显示当前人购物车情况
//4、购物车加减号的事件响应。。。。。。
},
methods:{
add:function(index){
//应该首先判断用户是否登录，如果没登录，让他先登录
// 如果已经登录，再做购物车相关操作
let getstr=sessionStorage.getItem('user');
let userId=this.$qs.parse(getstr).userId;
let foodId=this.foodList[index].foodId;
let businessId=this.business.businessId;
//获取当前商品的购买数量
let foodNum=this.foodList[index].foodNum;
if(foodNum==0){
//alert("数量为0");
//数量如果为0 向购物车里面做添加操作
this.$axios.post('http://localhost:8082/webelement/addCart',this.$qs.stringify({
quantity:1,foodId:foodId,businessId:businessId,userId:userId
}))
.then(res=>{
if(res.data.code==0){
//后台如果响应成功，把页面上当前商品的数量加1
alert("添加成功");
this.foodList[index].foodNum=1;
}else{
alert(res.data.msg);
}
})
}else{
alert("第二次操作这个商品，需要做修改操作");
//数量>0时，做修改操作 当前数量+1,传给后台做修改操作
this.update(index,1);
}
},
update:function(index,num){//num=1/-1
let newnum=this.foodList[index].foodNum+num;
//newnum>0 走修改
let getstr=sessionStorage.getItem('user');
let userId=this.$qs.parse(getstr).userId;
let foodId=this.foodList[index].foodId;
let businessId=this.business.businessId;
if(newnum>0){
this.$axios.post('http://localhost:8082/webelement/updateCartServlet',this.$qs.stringify({
quantity:newnum,foodId:foodId,businessId:businessId,userId:userId
}))
.then(res=>{
if(res.data.code==0){
//后台如果响应成功，把页面上当前商品的数量加1
alert("修改成功");
this.foodList[index].foodNum=newnum;
}else{
alert(res.data.msg);
}
})
}else{ //newnum==0走删除
this.$axios.post('http://localhost:8082/webelement/delCart',this.$qs.stringify({
foodId:foodId,businessId:businessId,userId:userId
}))
.then(res=>{
if(res.data.code==0){
//后台如果响应成功，把页面上当前商品的数量加1
alert("删除成功");
this.foodList[index].foodNum=newnum;
}else{
alert(res.data.msg);
}
})
}
}
}
}
</script>
<style type="text/css">
.container {
width: 100vw;
height: 100vh;
}
.header {
width: 100%;
height: 12vw;
background-color: #0097FF;
color: #fff;
font-size: 4.8vw;
position: fixed;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.log {
width: 100%;
height: 35vw;
margin-top: 12vw;
display: flex;
justify-content: center;
align-items: center;
}
.log img {
width: 40vw;
height: 30vw;
border-radius: 5px;
}
.business {
width: 100%;
height: 20vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.business h1 {
font-size: 5vw;
}
.business p {
font-size: 3vw;
color: #666;
margin-top: 1vw;
}
.food li {
width: 100%;
box-sizing: border-box;
padding: 2.5vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.food li .food-left {
display: flex;
align-items: center;
}
.food li .food-left img {
width: 20vw;
height: 20vw;
}
.food li .food-left .food-left-info {
margin-left: 3vw;
}
.food li .food-left .food-left-info h3 {
font-size: 3.8vw;
color: #555;
}
.food li .food-left .food-left-info p {
font-size: 3vw;
color: #888;
margin-top: 2vw;
}
.food li .food-right {
width: 16vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.food li .food-right .fa-minus-circle{
font-size: 5.5vw;
color: #999;
cursor: pointer;
}
.food li .food-right p{
font-size: 3.6vw;
color: #333;
}
.food li .food-right .fa-plus-circle{
font-size: 5.5vw;
color: #0097EF;
cursor: pointer;
}
.footer {
width: 100vw;
height: 14vw;
background-color: #008CFF;
position: fixed;
bottom: 0;
right: 0;
display: flex;
flex-direction: row;
}
.footer .cart-left {
flex: 2;
background-color: #505051;
/* step1 */
display: flex;
}
.footer .cart-right {
flex: 1;
background-color: #38CA73;
}
.footer .cart-car {
box-sizing: border-box;
width: 16vw;
height: 16vw;
border: 1.5vw solid #444;
background-color: #3190E8;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 50%;
margin-top: -4vw;
margin-left: 3vw;
}
.cart-icon {
font-size: 7vw;
color: white;
}
.cart-icon .txt {
width: 5vw;
height: 5vw;
background-color: red;
position: absolute;
right: -1.5vw;
top: -1.5vw;
font-size: 4vw;
text-align: center;
border-radius: 50%;
}
/* step2 */
.cart-info .money1 {
font-size: 4.5vw;
font-weight: 800;
color: white;
}
.cart-info .money2 {
font-size: 3vw;
color: gray;
}
/* step3 */
.cart-right {
display: flex;
justify-content: center;
align-items: center;
}
.cart-right a {
color: white;
font-size: 4.5vw;
font-weight: 800;
}
</style>
后台添加 ，修改，删除购物车略
## 3.4 如果登录了，还需要在下面显示此人的购物车情况 t_cart ##
computed:计算属性计算食品总价，食品总数，结算总价格
网友评论