【uniapp】仿微信支付界面

效果图

完整代码

<template>
    <view class="my-pay-page">
        <view :style="{ height: statusBarHeight + 'px' }">view>
        <view class="nav-container">
            <view class="nav-back" @click="goBack">
                <view>取消view>
            view>
            <view class="nav-title">付款view>
        view>
        <view class="main-container" :style="computedMainHeight">
            <view class="center-container">
                
                <view class="pay-wrap">
                    <view class="gray-text">金额view>
                    <view class="money-box">
                        <text class="unit">￥text>
                        <text class="money">{
  { payMoney }}text>
                        <text class="mark">text>
                    view>
                    <view class="gray-text">付款方式view>
                    <view class="flex-justify">
                        <image class="left-img" src="~@/static/images/myImgs/sfb@2x.png" alt="" />
                        <view class="left-text">支付宝view>
                        <image class=
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24