同步代码

pageInvoicing/storage-record/components/list-item.vue

@@ -0,0 +1,122 @@
+<template>
+	<view class="item bg-fff border-r-12">
+		<view class="u-flex u-text-left u-row-between border-bottom u-p-b-30">
+			<view class="">2024-07-24 14:23:09</view>
+			<view class="">东风</view>
+		</view>
+		<view class="u-flex u-text-left u-row-left u-m-t-30">
+			<view class="name">名称</view>
+			<view class="category u-flex u-m-l-10">
+				<view class="tag">分类</view>
+			</view>
+			<view class="id color-999 u-font-24 bg-gray u-m-l-10">
+				ID:1234
+			</view>
+		</view>
+		<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
+			<view class="u-text-right">
+				<view>
+					<text>总价值</text>
+					<text class="u-m-l-10">3</text>
+				</view>
+				<view class="u-m-t-10">
+					<text>单价</text>
+					<text class="u-m-l-10">2</text>
+				</view>
+				<view class="u-m-t-10">
+					<text>货品编码</text>
+					<text class="u-m-l-10">2</text>
+				</view>
+				<view class="u-m-t-10">
+					<text>供应商名称</text>
+					<text class="u-m-l-10">2</text>
+				</view>
+				<view class="u-m-t-10 u-relative">
+					<text>库存</text>
+					<text class="u-m-l-10">2</text>
+					<view class="u-absolute u-flex addNumber" >
+						<uni-icons type="arrow-right" :color="color.ColorMain" size="16"></uni-icons>
+						<text class="color-main u-m-l-10">3</text>
+					</view>
+				</view>
+				<view class="u-m-t-10">
+					<text>剩余库存</text>
+					<text class="u-m-l-10 color-main">2</text>
+				</view>
+			</view>
+			<view class="u-flex-1 u-flex u-row-right">
+				<view>
+					<view class="color-main font-bold">+22</view>
+					<!-- <view class="u-m-t-10">剩余库存</view> -->
+				</view>
+
+			</view>
+		</view>
+
+		<view class="u-flex u-row-right u-m-t-20">
+			<view class="u-flex u-m-r-30">
+				<my-button shape="circle" height="70" type="default" @tap="del">
+					<view class="u-p-l-30 u-p-r-30">
+						删除
+					</view>
+					</my-button>
+			</view>
+			<!-- <view class="u-flex">
+				<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
+			</view> -->
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import myButton from '@/components/my-components/my-button';
+	import go from '@/commons/utils/go.js'
+	import color from '@/commons/color.js'
+	function del(){
+		console.log('del');
+	}
+	const props = defineProps({
+		index: {
+			type: Number
+		},
+		data: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		}
+	})
+	const emits = defineEmits(['more'])
+
+	function more() {
+		emits('more', props.index)
+	}
+</script>
+
+<style lang="scss">
+	.item {
+		padding: 32rpx 32rpx 28rpx 28rpx;
+
+		.tag {
+			color: $my-main-color;
+			background-color: rgb(234, 244, 255);
+			border-radius: 8rpx;
+			padding: 2rpx 10rpx;
+			font-size: 24rpx;
+		}
+
+		.id {
+			padding: 2rpx 10rpx;
+			border-radius: 8rpx;
+		}
+
+		.info {}
+	}
+	.addNumber{
+		position: absolute;
+		left: 100%;
+		top: 50%;
+		padding-left: 20rpx;
+		transform: translateY(-50%);
+	}
+</style>