#2020征文-手机#鸿蒙js开发8：鸿蒙的商品列表购物车的实现 原创

1.鸿蒙商品列表

2.js业务逻辑

import prompt from '@system.prompt';
import router from '@system.router';
export default {
    data: {
        title: 'World',

        count:0,

        //商品列表的数据
        plists:[{"pname":"六合三鲜面","price":20},
                {"pname":"六合猪头肉","price":50},
                {"pname":"六合活珠子","price":1},
                {"pname":"六合盆牛肉","price":80}],

        //用户商品购物车
        usercar:[]

    },
    additem(index)
    {
        //++ 表示当前的值加1
        ++this.count;

        //用户的购物车的商品怎么来记录了
        this.usercar.push(this.plists[index]);

    },
    showitem()
    {
        let  that= this;

        //JSON.stringify()把一个json数据转换成字符串
        prompt.showToast({
            message:JSON.stringify(that.usercar)
        });

        //跳转页面,跳转页面带参数
        router.push({
            uri:"pages/userlists/userlists",
            params:{
                userlists:that.usercar
            }
        });


    }
}

3.页面视图

<div class="container">
     
    <list class="listview">
       <block  for="{{plists}}">
          <list-item  class="list-item">
            <text>{{$item.pname}}</text>
              <text>{{$item.price}}</text>
              <image   class="cimg"  onclick="additem({{$idx}})"  src="common/ic_food_item_add.png"></image>
          </list-item>
       </block>
    </list>
    
    <div  class="carview">
        <div  class="{{count>0?'pinfoshow':'pinfo'}}"  onclick="showitem">
           <image class="img1" src="/common/ic_shop1.png"></image>
        </div>
        <!--初始时不出现的-->
         <div  if="{{count>0?true:false}}"  class="countview">
             <text  class="tv2">{{count}}</text>
        </div>
    </div>

</div>

4.样式

.container {
    width: 100%;
    height: 1500px;
    display: flex;
    flex-direction: column;
    background-color: powderblue;
}
.listview{
    width: 100%;
}
.list-item{
    width: 100%;
    height: 15%;
    border-bottom: 5px  solid  snow;
    display: flex;
    justify-content: space-around;
}
.cimg{
    width: 60px;
    height: 60px;
}
.carview{
    width: 100%;
    height: 8%;
    border-top: 5px  solid  black;
    position: fixed;
    left: 0px;
    bottom: 0px;
}
.pinfo{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: peru;
    position: absolute;
    left:300px;
    top:-50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pinfoshow{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: green;
    position: absolute;
    left:300px;
    top:-50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img1{
    width: 50px;
    height: 50px;
}
.countview{
    position: absolute;
    left:350px;
    top:-55px;
    background-color: red;
    color: #fff;
    padding: 10px  20px;
    border-radius: 20px;
}
.tv2{
    font-size: 23px;
    color: snow;
    font-weight: bold;
}

5. 购物车详细页面