UNIAPP实战项目笔记46 订单确认页面的布局

UNIAPP实战项目笔记46 订单确认页面的布局

实际案例图片

订单页面

具体内容图片自己替换哈，随便找了个图片的做示例
具体位置见目录结构
完善布局页面和样式

代码 confirm-order.vue部分

confirm-order.vue 确认订单页面布局和渲染

flex 样式布局

<template>
    <view class="confirm-order bg-active-color">
        <Lines></Lines>
        
        <!-- 地址 -->
        <view class="order-map">
            <view class="map-title">
                <view class="map-name">
                    收件人:曹国舅
                </view>
                <view class="">
                    13213213211
                </view>
            </view>
            <view class="map-add">
                收货地址:北京市朝阳区建国路9009号
            </view>
        </view>
        
        <!-- 商品 -->
        <view class="goods-list" v-for="(item,index) in 2">
                
            <view class="goods-content bg-active-color">
                <image class="goods-img" src="../../static/logo.png" mode=""></image>
                <view class="goods-text">
                    <view class="goods-name">
                        一大串文字介绍一大串文字介绍一大串文字介绍一大串文字介绍一大串文字介绍
                    </view>
                    <view class="goods-size f-color">
                        颜色分类:黑色
                    </view>
                    <view class="f-active-color">
                        7天无理由
                    </view>
                </view>
                <view class="">
                    <view class="">
                         ￥299.00
                    </view>
                    <view class="goods-size">
                        x 1
                    </view>
                </view>
            </view>
            
        </view>
    
        <!-- 底部:提交订单 -->
        <view class="order-foot">
            <view class="total-price">
                合计: <text class="f-active-color">$3999.00</text>
            </view>
            <view class="confirm">
                提交订单
            </view>
        </view>
    </view>
</template>

<script>
    import Lines from '@/components/common/Lines.vue'
    export default {
        data() {
            return {
                
            };
        },
        components:{
            Lines
        },
        methods:{
            
        }
    }
</script>

<style lang="less">
.confirm-order{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.order-map{
    margin-bottom: 10rpx;
    padding: 20rpx;
    background-color: #fff;
    line-height: 50rpx;
}
.map-title{
    display: flex;
    justify-content: space-between;
}
.map-name{
    font-weight: bold;
}
.goods-list{
    background-color: #fff;
    padding: 10rpx 0;
}

.goods-content{
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods-text{
    width: 360rpx;
    padding: 0 10rpx;
    font-size: 26rpx;
}
.goods-img{
    width: 160rpx;
    height: 160rpx;
}
.goods-size{
    font-size: 24rpx;
}

.order-foot{
    width: 100%;
    height: 80rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.confirm{
    color: #fff;
    background-color: #49bdfb;
    padding: 10rpx 30rpx;
}
.total-price{
    padding: 0 20rpx;
}


</style>

shopcart.vue 文件代码

购物车增加结算跳转

<template>
    <view class="shop-cart">
        <template v-if=" list.length > 0 ">
                
            <!-- 自定义导航栏 -->
            <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" @tap="selectedItem(index)">
                    <radio value="" color="#FF3333" :checked="item.checked" /> <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>
                        <template v-if="!isNavBar">
                            <view>x {{item.num}}</view>
                        </template>
                        <template v-else>
                            <uniNumberBox
                                :value="item.num"
                                min="1"
                                @change="changeNumber($event,index)"
                            ></uniNumberBox>
                        </template>
                    </view>
                </view>
            </view>
            <!-- 底部 -->
            <view class="shop-foot">
                <label for="" class="radio foot-radio" @tap='checkedAllFn'>
                    <radio value="" color="#FF3333" :checked="checkedAll"></radio><text>全选</text>
                </label>
                <template v-if="!isNavBar">
                    <view class="foot-total">
                        <view class="foot-count">
                            合计：
                            <text class="f-active-color">
                                ￥{{totalCount.pprice}}
                            </text>
                        </view>
                        <view class="foot-num" @tap="goConfirmOrder">
                            结算({{totalCount.num}})
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="foot-total">
                        <view class="foot-num" style="background-color: black;">
                            移入收藏夹
                        </view>
                        <view class="foot-num" @tap="delGoodsFn">
                            删除
                        </view>
                    </view>
                </template>
            </view>
            
        </template>
        <template v-else>
            <uniNavBar 
                title="购物车"
                fixed="true"
                statusBar="true"
            ></uniNavBar>
            <view class="shop-else-list">
                <text>囧~ 购物车还是空的~</text>
            </view>
        </template>
    </view>
</template>

<script>
    import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
    import uniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
    
    // 状态机引入
    import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
    export default {
        data() {
            return {
                isNavBar:false,
            }
        },
        computed:{
            // 状态机数据处理
            ...mapState({
                list:state=>state.cart.list
            }),
            ...mapGetters(['checkedAll','totalCount'])
        },
        components:{
            uniNavBar,uniNumberBox
        },
        methods: {
            ...mapActions(['checkedAllFn','delGoodsFn']),
            ...mapMutations(['selectedItem']),
            changeNumber(value,index){
                this.list[index].num = value;
            },
            // 进入确认订单
            goConfirmOrder(){
                uni.navigateTo({
                    url:'/pages/confirm-order/confirm-order'
                })
            }
        }
    }
</script>

<style lang="scss">

.shop-list{
    padding-bottom: 100rpx;
}
.shop-else-list{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.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>

pages.json文件代码

{
            "path" : "pages/confirm-order/confirm-order",
            "style" :                                                                                    
            {
                "navigationBarBackgroundColor": "#FFFFFF",
                "navigationBarTitleText": "确认订单",
                "enablePullDownRefresh": false
            }
            
        }

目录结构

前端目录结构

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

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

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

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

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

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • my-config
    • my-config.vue
  • my-config
    • my-config.vue
  • my-add-path
    • my-add-path.vue
  • my-path-list
    • my-path-list.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue
  • details
    • details.vue
  • my-order
    • my-order.vue
  • confirm-order
    • confirm-order.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
  • order
    • order-list.vue
  • uni
    • uni-number-box
      • uni-number-box.vue
    • uni-icons
      • uni-icons.vue
    • uni-nav-bar
      • uni-nav-bar.vue
    • mpvue-citypicker
      • mpvueCityPicker.vue

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

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

• store vuex状态机文件

  • modules
    • cart.js
    • path.js
  • index.js