oak-pay-business/es/components/pay/detail/index.xml

<view class="container">
    <view class="info">
        <view class="title-bar-wrapper">
            <view class="title-bar">
                <view class="title">{{t('title')}}</view>
                <l-tag bg-color="{{iStateColor}}" type="reading">{{t('pay:v.iState.' + pay.iState)}}</l-tag>
            </view>
        </view>
        <view class="list">
            <l-list title="{{t('type.label')}}" icon="warning" right-desc="{{t('type.' + type)}}" is-link="{{false}}" />
            <l-list title="{{t('pay:attr.price')}}" icon="cart" right-desc="{{priceStr}}" is-link="{{false}}" />
            <l-list title="{{t('pay:attr.entity')}}" icon="research" right-desc="{{t('payChannel::' + pay.entity)}}" is-link="{{false}}" />
        </view>
    </view>
    <view class="meta">
        <block wx:if="{{pay.entity !== 'offlineAccount' && notSameApp}}">
            <view class="wariningAlert">{{t('notSameApp')}}</view>
        </block>
        <block wx:elif="{{pay.entity === 'offlineAccount'}}">
            <view wx:if="{{pay.iState === 'paying'}}" class="infoAlert" style="margin-bottom:20rpx;">{{t('code.help')}}</view>
            <l-popup wx:if="{{showChannelSelectMp}}" show="{{showChannelSelectMp}}" content-align="bottom" bind:lintap="closeChannelSelectMp">
                <view class="my-panel-class">
                    <l-radio-group
                        wx:for="{{offlines}}" 
                        wx:key="value"
                        current="{{offline.id}}"
                        bind:linchange="updateOfflineIdMp"
                    >
                        <l-radio wx:key="{{item.id}}" key="{{item.id}}">
                            <view class="radio">
                                <view style="white-space:nowrap">{{t('offlineAccount:v.type.'+ item.type)}}</view>
                            </view>
                        </l-radio>
                    </l-radio-group>
                </view>
            </l-popup>
            <l-form style="margin-top:24rpx;width:100%;background-color:#fff;">
                <l-form-item label-width="240rpx" label="{{t('channel.prefix')}}">
                    <block wx:if="{{pay.iState === 'paying' && offlines.length > 1}}">
                        <view style="display: flex; align-items: center; justify-content: flex-start;">
                            <view class="defaultBtn" bindtap="openChannelSelectMp">{{t('offlineAccount:v.type.' + offline.type)}}</view>
                        </view>
                    </block>
                    <block wx:else>
                        <view>{{t('offlineAccount:v.type.' + offline.type)}}</view>
                    </block>
                </l-form-item>
                <l-form-item label-width="240rpx"  label="{{t('code.label')}}">
                    <l-tag bg-color="#d9363e">{{pay.phantom3}}</l-tag>
                </l-form-item>
                <l-form-item label-width="240rpx"  label="{{t('externalId.label')}}">
                    <l-input 
                        hide-label="{{true}}"
                        clear="{{true}}"
                        disabled="{{pay.iState !== 'paying'}}"
                        placeholder="{{t('externalId.help')}}"
                        bind:lininput="updateExternalIdMp"
                        bind:linclear="clearExternalIdMp"
                    />
                </l-form-item>
                <block wx:if="{{offline.type === 'bank'}}">
                    <l-form-item label-width="240rpx" label="{{t('offlineAccount::label.channel.bank')}}">
                        <view>{{offline.channel}}</view>
                    </l-form-item>
                    <l-form-item label-width="240rpx" label="{{t('offlineAccount::label.name.bank')}}">
                        <view>{{offline.name}}</view>
                    </l-form-item>
                    <l-form-item label-width="240rpx" label="{{t('offlineAccount::label.qrCode.bank')}}">
                        <view>{{offline.qrCode}}</view>
                    </l-form-item>
                </block>
                <block wx:else>
                    <block wx:if="{{offline.type === 'others'}}">
                        <l-form-item label-width="240rpx" label="{{t('offlineAccount::label.channel.others')}}">
                            <view>{{offline.channel}}</view>
                        </l-form-item>
                    </block>
                    <block wx:if="{{offline.name}}">
                        <l-form-item label-width="240rpx" label="{{t('offlineAccount::label.name.' + offline.type)}}">
                            <view>{{offline.name}}</view>
                        </l-form-item>
                    </block>
                    <!-- <block wx:if="{{offline.qrCode}}">
                        <l-form-item label-width="240rpx" label="{{t('offlineAccount::label.qrCode.' + offline.type)}}">
                            <view class="qrCode"></view>
                        </l-form-item>
                    </block> -->
                </block>
            </l-form>
        </block>
        <block wx:elif="{{pay.entity === 'wpProduct'}}">
            <view wx:if="{{pay.iState === 'paid'}}" class="paid">
                <l-icon name="success" color="green" size="140" />
                <view class="text">{{t('success')}}</view>
            </view>
            <block wx:if="{{pay.wpProduct.type === 'native'}}">
                <view wx:if="{{pay.iState === 'paying'}}">
                    <l-countdown time-type="second" time="{{duration}}" format="{%h}:{%m}:{%s}"/>
                    <view>QRCode</view>
                    <view class="qrCodeTips">
                        <view wx:if="{{process.env.NODE_ENV === 'production'}}" class="infoAlert">{{t('wechat.native.tips')}}</view>
                        <view wx:else class="warningAlert">{{t('wechat.native.tips2')}}</view>
                    </view>
                </view>
            </block>
        </block>
    </view>
    <view class="padding"></view>
    <block wx:if="{{startPayable}}">
        <l-button
            size="long"
            bind:lintap="startPay"
            bg-color="#04BE02"
        >
            {{t('pay')}}
        </l-button>
    </block>
    <block wx:elif="{{oakExecutable === true}}">
        <view class="btn">
            <l-button
            size="long"
            bind:lintap="executeMp"
        >
            {{t('common::action.update')}}
        </l-button>
            <l-button
            plain="true"
            size="long"
            bind:lintap="resetMp"
        >
            {{t('common::reset')}}
        </l-button>
        </view>
    </block>
    <block wx:elif="{{closable}}">
        <l-button
            type="error"
            size="long"
            bind:lintap="closeMp"
        >
            {{t('pay:action.close')}}
        </l-button>
        <l-dialog 
            show="{{showCloseConfirmMp}}"
            type="confirm"     
            title="{{t('cc.title')}}"
            content="{{t('cc.content')}}"
            bind:linconfirm="confirmCloseMp"
            bind:lincancel="cancelCloseMp"
            bind:lintap="cancelCloseMp" 
        />
    </block>
    <block wx:else>
        <l-button
            type="default"
            size="long"
            bind:lintap="goBack"
        >
            {{t('common::back')}}
        </l-button>
    </block>
</view>