5、商家详情页

商家详细信息页：
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:计算属性计算食品总价，食品总数，结算总价格