UNIAPP实战项目笔记49 支付成功页面的布局

叁歲伎倆 2024-03-31 16:14 70阅读 0赞

### UNIAPP实战项目笔记49 支付成功页面的布局 ###

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

![支付成功页面][1268856a4d16478dafbeb3149605400c.png]

显示确认支付成功页面布局

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

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

<template>
        <view class="payment-success">
            <view class="f-active-color">
                恭喜您支付成功
            </view>
            <view class="return-index" @tap="goIndex">
                返回首页再买点
            </view>
        </view>
    </template>
    
    <script>
        export default {
        
            data() {
        
                return {
        
                    
                };
            },
            methods:{
        
                goIndex(){
        
                    uni.switchTab({
        
                        url:'/pages/index/index'
                    })
                }
            }
        }
    </script>
    
    <style lang="scss">
    .payment-success{
        
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .return-index{
        
        margin: 20rpx;
        color: #49bdfb;
        padding: 10rpx 60rpx;
        border: 2px solid #49bdfb;
        border-radius: 40rpx;
    }
    .f-active-color{
        
        font-size: 52rpx;
    }
    </style>

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

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

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

[1268856a4d16478dafbeb3149605400c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1cecb082f00c4b10ab110b1b57a86f95.png