143 lines
3.2 KiB
Vue
143 lines
3.2 KiB
Vue
<!--
|
||
|
||
订单列表页面， 数据渲染
|
||
业务： 支付订单列表页
|
||
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/11/23 16:57
|
||
-->
|
||
<template>
|
||
<!-- 列表卡片循环渲染start -->
|
||
<view class="order-card" hover-class="touch-hover" hover-stay-time="150" @tap="toDetail()">
|
||
<view class="img-wrapper flex-center" :style="{ backgroundColor: datamap.payOrderImage(record?.wayCodeType)?.bgColor }">
|
||
<image :src="datamap.payOrderImage(record?.wayCodeType)?.imgUrl" mode="scaleToFill"></image>
|
||
</view>
|
||
<view class="order-info">
|
||
<view class="order-num">
|
||
<view> <text class="icon-money">￥</text> {{ cal.cert2Dollar(props.record.amount) }} </view>
|
||
<view class="order-state">
|
||
{{ datamap.payOrderState(props.record.state).text }}
|
||
<text class="order-spot" :style="{ backgroundColor: datamap.payOrderState(props.record.state).color }"></text>
|
||
</view>
|
||
</view>
|
||
<view class="order-time">{{ props.record.createdAt }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import cal from '@/commons/utils/cal.js'
|
||
import go from '@/commons/utils/go.js'
|
||
import datamap from '@/commons/utils/datamap.js'
|
||
|
||
// 跳转详情页
|
||
function toDetail() {
|
||
go.to('PAGES_PAY_ORDER_DETAIL', { payOrderId: props.record.payOrderId })
|
||
}
|
||
|
||
// 定义传入属性
|
||
const props = defineProps({
|
||
record: { type: Object, default: () => {} }, // 渲染对象
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.store-name {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 33rpx;
|
||
font-weight: 500;
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-left: 5rpx;
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.input-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
padding-top: 22rpx;
|
||
height: 110rpx;
|
||
background-color: $J-bg-ff;
|
||
.input-main {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 70rpx;
|
||
background: $J-bg-f5;
|
||
border-radius: $J-b-r12;
|
||
image {
|
||
padding: 22rpx;
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
input {
|
||
flex: 1;
|
||
font-size: 27rpx;
|
||
}
|
||
}
|
||
.screen-wrapper {
|
||
margin: 0 12rpx 0 20rpx;
|
||
font-size: 32rpx;
|
||
color: $J-color-t99;
|
||
image {
|
||
width: 28rpx;
|
||
height: 26rpx;
|
||
padding: 0 21rpx;
|
||
}
|
||
}
|
||
}
|
||
.order-card {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
height: 170rpx;
|
||
background-color: $J-bg-ff;
|
||
.img-wrapper {
|
||
margin-right: 30rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.order-info {
|
||
flex: 1;
|
||
.order-num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
.icon-money {
|
||
font-size: 23rpx;
|
||
}
|
||
.order-state {
|
||
display: flex;
|
||
align-items: center;
|
||
color: $J-color-t80;
|
||
.order-spot {
|
||
display: block;
|
||
margin: 0 10rpx 0 20rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.order-time {
|
||
margin-top: 16rpx;
|
||
font-size: 26rpx;
|
||
color: $J-color-t99;
|
||
}
|
||
}
|
||
}
|
||
</style>
|