148 lines
5.4 KiB
Vue
148 lines
5.4 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="u-p-40" style="background-color: #ffffff;">
|
||
|
|
<view class="header u-border-bottom"
|
||
|
|
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||
|
|
<view>
|
||
|
|
<u-image width="100rpx" height="100rpx" src="/static/image/mt.jpg"
|
||
|
|
shape="circle"></u-image>
|
||
|
|
</view>
|
||
|
|
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||
|
|
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="center u-p-t-20">
|
||
|
|
<view>
|
||
|
|
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-r-18">
|
||
|
|
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||
|
|
:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
|
||
|
|
placeholder=" "></u-field>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
|
||
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
|
||
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||
|
|
<view style="padding-left: 165rpx;color: #909399;">
|
||
|
|
<text>由网联清算有限公司提供收款清算服务</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view>
|
||
|
|
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-r-30">
|
||
|
|
<u-field class="field-class" v-model="shanghu" label="商户单号" :label-width="160"
|
||
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||
|
|
placeholder=" "></u-field>
|
||
|
|
</view>
|
||
|
|
<view class="u-text-center u-m-t-20 u-m-b-30">
|
||
|
|
<view class="u-flex u-row-center u-col-center">
|
||
|
|
<view>
|
||
|
|
<u-image src="./imgs/tiao-code.jpg" height="150rpx" width="480rpx" mode="aspectFill"></u-image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>{{shanghuCode}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
|
||
|
|
style="background-color: #ffffff;font-size: 30rpx;">
|
||
|
|
<view>商家小程序</view>
|
||
|
|
<view class="u-flex u-row-between u-col-center">
|
||
|
|
<view class="u-flex u-row-left u-col-center">
|
||
|
|
<view class="u-m-r-10">
|
||
|
|
<u-image width="36rpx" height="36rpx" src="/static/image/xiaochengxu.png"></u-image>
|
||
|
|
</view>
|
||
|
|
<view style="color: #909399;">
|
||
|
|
<view class="u-flex u-row-left u-col-center">
|
||
|
|
<view><text>美团</text></view>
|
||
|
|
<view class="u-m-r-10 u-m-l-10">
|
||
|
|
<u-line color="#909399" direction="col" length="30rpx" />
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view>外卖美食买菜酒店电影</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view>购物</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-m-l-30">
|
||
|
|
<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||
|
|
<view style="padding-bottom: 30rpx;">
|
||
|
|
<text>账单服务</text>
|
||
|
|
</view>
|
||
|
|
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||
|
|
<view>
|
||
|
|
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||
|
|
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="">
|
||
|
|
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||
|
|
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view style="width: 30rpx;"> </view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||
|
|
<text>本服务由财付通提供</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
fieldStyle: {
|
||
|
|
//width:'460rpx',
|
||
|
|
color: '#000000',
|
||
|
|
padding: '0rpx',
|
||
|
|
margin: '0rpx',
|
||
|
|
height: '70rpx',
|
||
|
|
},
|
||
|
|
tradeStatus: '支付成功',
|
||
|
|
goodName: '美团收银909700180095643047',
|
||
|
|
company: '商户_李敏',
|
||
|
|
settleCompany: '北京钱袋宝支付技术有限公司',
|
||
|
|
paytime: '2022年9月30日 12:50:56',
|
||
|
|
payway: '零钱',
|
||
|
|
tradeCode: '4200066259202209304888262262',
|
||
|
|
shanghu:'可在支持的商户扫码退款',
|
||
|
|
shanghuCode: '0461368604225767873608013',
|
||
|
|
tradeValue: '-74.08',
|
||
|
|
target: '万象三顾冒菜'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.field-class {
|
||
|
|
color: #909399 !important;
|
||
|
|
font-size: 28rpx !important;
|
||
|
|
margin: 0rpx !important;
|
||
|
|
padding: 0rpx !important;
|
||
|
|
}
|
||
|
|
</style>
|