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

你的名字 2024-04-01 12:09 83阅读 0赞

### 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>

#### 案例实例图片 ####

![购物车内容块布局][98cd480ad2f841df93be62cf66c5637a.png]

#### 目录结构 ####

##### 前端目录结构 #####

*  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

[98cd480ad2f841df93be62cf66c5637a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/609e3928e8bb48ea9f0377595f8f1f99.png