九鸿蒙的商品购物车项目和参数传递的实现 原创

         之前介绍的组件都是分开介绍的,相对碎片化.一些读者可能比较迷,不清楚在项目中怎样实施.本片文章我将会把之前所介绍的组件融合到一起,通过商品购物车的小项目展示出来.并同时引出带参数跳转页面(路由的基础上).下篇文章也将会是这篇文章的接续,持续更新,持续关注...

带参数的页面跳转实现:  在跳转的页面定义一个与参数名称相同的数组即可完成接收如下(具体展示见代码)

主页面js业务逻辑:

import router from '@system.router';
export default {
    data: {
        count:0,
        currentIndex:0,
       specilties:[
              {"cname":"张飞牛肉","cimg":"common/niurou.jpg","price":"50"},
              {"cname":"老妈兔头","cimg":"common/tuzi.jpg","price":"50"},
              {"cname":"乐山甜皮鸭","cimg":"common/yazi.jpg","price":"50"},
              {"cname":"青城老腊肉","cimg":"common/larou.jpg","price":"50"},
              {"cname":"蜀绣","cimg":"common/shuxiu.jpg","price":"50"},
              {"cname":"五粮液","cimg":"common/jiu.jpg","price":"50"},
              {"cname":"泸州老窖","cimg":"common/luzhou.jpg","price":"50"},
              {"cname":"乐山钵钵鸡","cimg":"common/leshan.jpg","price":"50"},
              {"cname":"峨眉山竹叶青","cimg":"common/emeishan.jpg","price":"50"},
              {"cname":"自贡冷吃兔","cimg":"common/lengchitu.jpg","price":"50"},
              {"cname":"蜀大侠火锅料","cimg":"common/shudaxia.jpg","price":"50"},

       ],
        usercar:[]
    },
    changeclick(index){
     //表示当前的值加1
        ++this.count;
        //用户的购物车的商品怎么来记录
        this.usercar.push(this.specilties[index]);
        this.currentIndex=index
    },
    showitem(){
        let that=this;
        router.push({
            uri:"pages/shopping1/shopping1",     //跳转页面带参数
            params:{
                shopping1:that.usercar

            }
        })
    }
}

主页面渲染层:

<div class="container">
<list class="list">
    <block for="{{specilties}}">
        <list-item class="list-item">
            <image class="img1" src="{{$item.cimg}}"></image>
            <div class="txt3">
                <text class="tex1">{{$item.cname}}</text>
                   <div class="txt4">
                      <image class="img4" src="common/RMB.png"></image>
                      <text class="txt2">{{$item.price}}</text>
                   </div>
            </div>
             <image class="{{currentIndex==$idx?'img22':'img2'}}" src="common/add.png" onclick="changeclick({{$idx}})  "></image>
        </list-item>
    </block>
</list>
    <div class="bottomview">
        <div class="yuan" onclick="showitem">
            <image class="img3" src="common/gouwu.png"> </image>
        </div>
        <div if="{{count>0?true:false}}" class="countview">
            <text class="txt5">{{count}}</text>
        </div>
    </div>
</div>

主页面css属性设置

.container {
    width: 100%;
    height: 1200px;
    display: flex;
    flex-direction: column;
}
.list{
    width: 100%;
}
.list-item{
    width: 100%;
    height: 15%;
    border-bottom:3px solid  grey;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.img1{
    width: 20%;
    height: 90%;
    /**border:2px solid red;**/
    border-radius: 20px;
}
.img2{
    width: 60px;
    height: 60px;
}
.img22{
    width: 60px;
    height: 60px;
    background-color: orange;
}
.txt3{
    width: 40%;
    height: 90%;
    /**border: 1px solid black;**/
    display: flex;
    flex-direction:column;
    justify-content: flex-end;
    align-items: flex-start;
}
.tex1{
    font-size: 35px;
    font-weight: bold;
    font-family: sans-serif;
    
}
.txt2{
    font-size: 50px;
    font-weight: bold;
    color: orange;

}
.bottomview{
    width: 100%;
    height: 10%;
    border-top: 2px solid grey;
    display: flex;
    justify-content: center;
}
.yuan{
    width: 150px;
    height: 150px;
    border-radius: 100px;
    border:3px solid orange;
    background-color: orange;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -55px;

}
.img3{
    width: 100px;
    height: 100px;
}
.txt4{
    width: 100%;
    height:40%;
    display: flex;
    align-items: flex-end;
}
.img4{
    width: 20px;
    height: 40px;
}
.countview{
    position: absolute;
    padding: 8px 23px;
    /**border: 5px solid grey;**/
    top: -65px;
    left: 380px;
    border-radius: 100px;
    background-color: red;

}
.txt5{
    font-weight: bold;
    color: white;
    font-size: 38px;

}

跳转页面js业务逻辑:

export default {
    data: {
        title: 'World',
        shopping1:[] //接收参数的页面定义一个与参数名称相同的数组即可完成接收
    }
}

跳转页面的渲染层:

<div class="container">
    <text class="title">
        {{"小主您选购了以下商品"}}
    </text>
    <list class="listview">
        <block for="{{shopping1}}">
            <list-item class="listitem">
                <image class="img1" src="{{$item.cimg}}">
                </image>
                <text class="tex1"> {{$item.cname}}</text>
            </list-item>
        </block>
    </list>
</div>

css属性设置

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:100%;
    height: 1200px;
}
.title {
    text-align: center;
    width: 100%;
    height: 120px;
    font-size: 35px;
    font-weight: bold;
    font-family: sans-serif;
}
.listview{
    width: 100%;
}
.listitem{
    width: 100%;
    height: 15%;
    border-bottom: 2px solid grey;
    display:flex;
    justify-content: space-around;
}
.img1{
    width: 20%;
    height: 90%;
/**border:2px solid red;**/
    border-radius: 20px;
}
.tex1{
    font-size: 35px;
    font-weight: bold;
    font-family: sans-serif;

}

效果展示如下(图中价格纯属虚构):

                主页面:

               跳转页面: