store-manage-app/src/components/list-item/index.vue

46 lines
1.5 KiB
Vue

<template>
<view class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx">
<view class="flex items-center justify-between pb-10rpx">
<view class="text-30rpx">{{ title }}</view>
<view class="text-24rpx" :style="{color: statusColor}">{{ statusText }}</view>
</view>
<template v-if="body && body.length > 0">
<uv-line />
<view class="body text-hex-999999 text-28rpx">
<view v-for="(item, i) in body" :key="i" class="body-item flex mt-10rpx">
<view class="label mr-10rpx">{{ item.label }}</view>
<view class="value">{{ item.value }}</view>
</view>
</view>
</template>
<template v-if="images && images.length > 0">
<uv-scroll-list :indicator="false">
<view class="space-x-15rpx flex">
<view v-for="(url, index) in images" :key="index">
<image :src="url" mode="heightFix" style="height: 160rpx"></image>
</view>
</view>
</uv-scroll-list>
</template>
<slot name="footer"></slot>
</view>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
title: [String, Number],
statusText: [String, Number],
statusColor: {
type: String,
default: '#3c9cff'
},
body: Array,
images: Array,
})
</script>
<style scoped>
.uv-scroll-list {
padding-bottom: 0;
}
</style>