UNIAPP实战项目笔记30 购物车内容块布局

主要代码:

主要代码 shopcart.vue

<template>
    <view class="shop-view">
        <!-- 自定义导航栏 -->
        <uniNavBar
            title="购物车"
            :rightText=" isNavBar ? '完成' : '编辑'"
            fixed="true"
            statusBar="true"
            @clickRight=" isNavBar = !isNavBar"
        ></uniNavBar>
        
        <!-- 商品内容 -->
        <view class="shop-item" v-for="(item,index) in list" :key="index">
            <label for="" class="radio">
                <radio value="" color="#FF3333" /> <text></text>
            </label>
            <image class="shop-img" :src="item.imgUrl" mode=""></image>
            <view class="shop-text">
                <view class="shop-name">
                    {{item.name}}
                </view>
                <view class="shop-color f-color">
                    {{item.color}}
                </view>
                <view class="shop-price">
                    <view class="">
                        ￥{{item.pprice}}
                    </view>
                    <view class="">
                        X {{item.num}}
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部 -->
        <view class="shop-foot">
            <label for="" class="radio foot-radio">
                <radio value="" color="#FF3333"></radio><text>全选</text>
            </label>
            <view class="foot-total">
                <view class="foot-count">
                    合计：
                    <text class="f-active-color">
                        ￥0
                    </text>
                </view>
                <view class="foot-num">
                    结算(0)
                </view>
            </view>
            
        </view>
    </view>
</template>

<script>
    import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
    export default {
        data() {
            return {
                isNavBar:false,
                list:[
                    {
                        id:1,
                        name:"经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                        color:"颜色：嘿嘿嘿激活",
                        imgUrl:"../../static/logo.png",
                        pprice:"27",
                        num:1,
                        checked:false
                    },{
                        id:2,
                        name:"经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                        color:"颜色：嘿嘿嘿激活",
                        imgUrl:"../../static/logo.png",
                        pprice:"48",
                        num:6,
                        checked:false
                    }
                ]
            }
        },
        components:{
            uniNavBar
        },
        methods: {
            
        }
    }
</script>

<style lang="scss">
.shop-view{
    // padding-bottom: 50rpx;
}
.shop-list{
    padding-bottom: 100rpx;
}
.shop-item{
    display: flex;
    padding: 20rpx;
    align-items: center;
    background-color: #f7f7f7;
    margin-bottom: 10rpx;
}
.shop-img{
    width: 200rpx;
    height: 200rpx;
}
.shop-text{
    flex: 1;
    padding-left: 20rpx;
}
.shop-color{
    font-size: 24rpx;
}
.shop-price{
    display: flex;
    justify-content: space-between;
}

.shop-foot{
    border-top: 2rpx solid #f7f7f7;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100rpx;
}
.foot-radio{
    padding-left: 20rpx;
}
.foot-total{
    display: flex;
}
.foot-count{
    line-height: 100rpx;
    padding: 0 20rpx;
    font-size: 32rpx;
}
.foot-num{
    background-color: #49bdfb;
    color: #FFFFFF;
    padding: 0 60rpx;
    line-height: 100rpx;
}
</style>

案例实例图片

目录结构

前端目录结构

• manifest.json 配置文件： appid、logo…

• pages.json 配置文件： 导航、 tabbar、 路由

• main.js vue初始化入口文件

• App.vue 全局配置：样式、全局监视

• static 静态资源：图片、字体图标

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue
  • details
    • details.vue

• components 组件

  • index
    • Banner.vue
    • Hot.vue
    • Icons.vue
    • indexSwiper.vue
    • Recommend.vue
    • Shop.vue
  • common
    • Card.vue
    • Commondity.vue
    • CommondityList.vue
    • Line.vue
    • ShopList.vue
  • uni
    • uni-number-box
      • uni-number-box.vue
    • uni-icons
      • uni-icons.vue
    • uni-nav-bar
      • uni-nav-bar.vue

• common 公共文件：全局css文件 || 全局js文件

  • api
    • request.js
  • common.css
  • uni.css