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

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

实际案例图片

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

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

代码 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