103 lines
2.4 KiB
Vue
103 lines
2.4 KiB
Vue
<template>
|
||
<view class="card-wrapper" @tap="emits('click')">
|
||
<view class="img-box" :style="{ backgroundColor: payImg(wayCodeType).bgColor }">
|
||
<image :src="payImg(wayCodeType).imgUrl" mode="scaleToFill" />
|
||
</view>
|
||
<view class="card-info">
|
||
<view class="card-title">
|
||
<view class="title">收款</view>
|
||
<view class="num">+{{ (amount / 100).toFixed(2) }}</view>
|
||
</view>
|
||
<view class="order-number">
|
||
<view class="order-title">订单编号：</view>
|
||
{{ payOrderId }}
|
||
</view>
|
||
<view class="card-time">
|
||
<view class="created-time">{{ createdAt }}</view>
|
||
<view class="card-state" :style="{ backgroundColor: payState(state).color }">{{ payState(state).text }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const emits = defineEmits(['click'])
|
||
const props = defineProps({
|
||
payOrderId: { type: String }, //订单编号
|
||
createdAt: { type: String }, //创建 时间
|
||
amount: { type: [String, Number] }, //收款金额
|
||
wayCodeType: { type: String }, // 支付方式
|
||
state: { type: [String, Number] }, // 状态
|
||
})
|
||
const payImg = uni.$J.dataMap.payImg
|
||
const payState = uni.$J.dataMap.payStateMap
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.card-wrapper {
|
||
display: flex;
|
||
|
||
margin: 30rpx;
|
||
padding: 20rpx 0 20rpx 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 15rpx;
|
||
|
||
.img-box {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 30rpx;
|
||
width: 20%;
|
||
border-radius: 14rpx;
|
||
|
||
image {
|
||
width: 80%;
|
||
height: 80%;
|
||
}
|
||
}
|
||
|
||
.card-info {
|
||
flex: 1;
|
||
|
||
.card-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
|
||
.num {
|
||
margin-right: 20rpx;
|
||
color: rgba(45, 218, 119, 1);
|
||
}
|
||
}
|
||
|
||
.order-number {
|
||
display: flex;
|
||
margin: 20rpx 0;
|
||
font-size: 18rpx;
|
||
color: rgba(102, 102, 102, 1);
|
||
}
|
||
|
||
.card-time {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.created-time {
|
||
font-size: 18rpx;
|
||
color: rgba(179, 179, 179, 1);
|
||
}
|
||
|
||
.card-state {
|
||
padding: 8rpx 30rpx;
|
||
background-color: rgba(45, 218, 119, 1);
|
||
border-radius: 20rpx 0 0 20rpx;
|
||
font-size: 12rpx;
|
||
color: #fff;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|