first

pageInvoicing/category-management/components/list-item.vue

@@ -0,0 +1,120 @@
+<template>
+
+	<view class="item bg-fff border-r-12  u-font-28">
+		<view class="">
+			<view class="">食物</view>
+		</view>
+		<view class="u-font-24 u-flex u-m-t-10">
+			<view class="u-m-r-10">炒面</view>
+			<view class="u-m-r-10">米饭</view>
+			<view>鸡蛋</view>
+		</view>
+
+
+		<view class="u-flex u-row-right u-m-t-20">
+			<view class="u-flex ">
+				<my-button shape="circle" height="56" type="cancel" @tap="toRcored">
+					<view class="color-999">查看记录</view>
+				</my-button>
+			</view>
+			<view class="u-flex u-m-l-30">
+				<my-button shape="circle" height="56"  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'
+	import {
+		reactive
+	} from 'vue';
+	function toRcored(){
+		go.to('PAGES_CATEGORY_MAN_RECORDS',{
+			title:'分类：测试分类',
+			id:1
+		})
+	}
+	function retract() {
+		console.log('retract');
+		uni.showModal({
+			title: '提示',
+			content: '确定删除该记录?删除后，将恢复改动前的数量',
+			success: function(res) {
+				if (res.confirm) {
+					console.log('用户点击确定');
+				} else if (res.cancel) {
+					console.log('用户点击取消');
+				}
+			}
+		});
+	}
+	const props = defineProps({
+		index: {
+			type: Number
+		},
+		data: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		}
+	})
+	const emits = defineEmits(['more'])
+
+	function more() {
+		emits('more', props.index)
+	}
+
+	let state = reactive({
+		showRemark: false
+	})
+
+	function toggleRemark() {
+		state.showRemark = !state.showRemark
+	}
+</script>
+
+<style lang="scss">
+	.item {
+		padding: 32rpx 32rpx 28rpx 28rpx;
+
+		.title-min-width {
+			min-width: 132rpx;
+		}
+
+		.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%;
+		transform: translateY(-50%);
+	}
+
+	.icon-down {
+		transform: rotate(90deg);
+	}
+
+	.icon-up {
+		transform: rotate(-90deg);
+	}
+</style>