UNIAPP实战项目笔记48 确认支付页面的布局

我不是女神ヾ 2024-03-31 15:59 40阅读 0赞

### UNIAPP实战项目笔记48 确认支付页面的布局 ###

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

![确认支付页面][3991eecd60cc43baa40315a52588dc78.png]

显示确认支付页面布局

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

#### 代码 payment.vue部分 ####

payment.vue 确认订单页面布局和渲染

<template>
        <view>
            <view class="">
                
                <uniNavBar
                    title='确认支付'
                    :left-text='关闭'
                    fixed='true'
                    @clickLeft='goBack'
                ></uniNavBar>
            </view>
    
            <view class="pay-main">
                <label for="">
                <view class="pay-item">
                    <image class="pay-img" src="../../static/img/zfbzf.png" mode=""></image>
                    <view class="">
                        <view class="">支付宝支付</view>
                        <view class="pay-txt">推荐支付宝用户使用</view>
                    </view>
                    <label class="radio">
                        <radio value="" color="#ff3333"/><text></text>
                    </label>
                </view>
                </label>
                <label for="">
                <view class="pay-item">
                    <image class="pay-img" src="../../static/img/wxzf.jpg" mode=""></image>
                    <view class="">
                        <view class="">微信支付</view>
                        <view class="pay-txt">推荐微信的用户使用</view>
                    </view>
                    <label class="radio">
                        <radio value="" color="#ff3333"/><text></text>
                    </label>
                </view>
                </label>
            </view>
            <view class="pay-foot">
                <view class="total">
                    <text class="f-color">合计:</text>
                    <text class="total-price">$259.00</text>
                </view>
                <view class="go-pay">
                    去支付
                </view>
            </view>
        </view>
    </template>
    
    <script>
        import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
        export default {
        
            data() {
        
                return {
        
                    
                };
            },
            components:{
        
                uniNavBar
            },
            methods:{
        
                // 点击关闭返回上一页
                goBack(){
        
                    uni.navigateBack();
                }
            }
        }
    </script>
    
    <style lang="scss">
    .pay-item{
        
        display:flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-bottom: 2rpx solid #ccc;
    }
    .pay-txt{
        
        color: #bbb;
    }
    .pay-img{
        
        width: 100rpx;
        height: 100rpx;
    }
    .pay-foot{
        
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .total-price{
        
        color: #fff;
    }
    .total{
        
        padding-left: 100rpx;
        flex: 1;
        background-color: #000;
        line-height: 100rpx;
    }
    .go-pay{
        
        color: #fff;
        background-color: #49bdfb;
        line-height: 100rpx;
        text-align: center;
        width: 220rpx;
    }
    .f-color{
        
        color: #ccc;
    }
    </style>

#### pages.json文件代码 ####

,{
        
                "path" : "pages/payment/payment",
                "style" :                                                                                    
                {
        
                    "app-plus": {
        
                        "titleNView": false,
                        "scrollIndicator": "none"
                    }
                }
                
            }

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

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

*  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
     *  payment
        
         *  `payment.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

[3991eecd60cc43baa40315a52588dc78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e04accacf75143eb8589680689154433.png