first

pageStoringWine/index/compoents/my-tags.vue

@@ -0,0 +1,51 @@
+<template>
+	<view class="u-flex u-flex-wrap">
+		<view class="tag-item u-m-r-32" @tap="changeActive(index)" :class="{active:index===active}" v-for="(item,index) in list" :key="index">
+			{{item}}
+		</view>
+	</view>
+	
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+	const props=defineProps({
+		list: {
+			type: Array,
+			default: () => {
+				return []
+			}
+		},
+		defaultIndex: {
+			type: Number,
+			default: 0
+		}
+	})
+	
+	let active=ref(props.defaultIndex)
+	
+	function changeActive(index){
+		active.value=index
+	}
+	const emits=defineEmits(['change'])
+	
+	watch(()=>active.value,(newval)=>{
+		emits('change',active.value)
+	})
+	
+	
+</script>
+
+<style lang="scss">
+	.tag-item {
+		padding: 8rpx 22rpx;
+		border-radius: 4rpx 4rpx 4rpx 4rpx;
+		text-align: center;
+		color: #666;
+		background: #F7F7FA;
+		&.active {
+			background: #E6F0FF;
+			color: $my-main-color;
+		}
+	}
+</style>

pageStoringWine/index/compoents/recoder-item.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="recoder-item bg-fff default-box-padding border-r-18">
+		<view class="u-flex u-row-between">
+			<view class="u-flex user-head-img">
+				<image lazy-load src="@/static/uni.png" class="user-head-img" mode=""></image>
+			</view>
+			<view class="u-flex-1 u-flex u-row-between u-p-l-24">
+				<view class="color-666">13416472917</view>
+				<view class="u-font-32 font-bold">
+					<text class="color-999">已过期</text>
+				</view>
+			</view>
+		</view>
+		
+		<view class="u-m-t-24 goods border-bottom u-p-b-24">
+			<view class="u-flex bg-gray u-p-10 border-r-12">
+				<view class="u-flex goods-img">
+					<image lazy-load src="@/static/uni.png" class="goods-img" mode=""></image>
+				</view>
+				<view class="u-flex-1  u-p-l-24">
+					<view class="font-bold">言力经典330ml</view>
+					<view class="color-999 u-m-t-16">剩余：9瓶</view>
+				</view>
+			</view>
+		
+		</view>
+		
+		<view class="u-m-t-24">
+			<view class="u-flex">
+				<text class="color-999">取酒码</text>
+				<text class="font-bold u-m-l-24">3920240529160807875</text>
+			</view>
+			<view class="u-flex u-m-t-16">
+				<text class="color-999">到期时间</text>
+				<text class="font-bold u-m-l-24">2024-06-18 16:08:07</text>
+			</view>
+			<view class="u-flex u-m-t-16">
+				<text class="color-999">最新记录</text>
+				<text class="font-bold u-m-l-24">取出1瓶，还剩下9瓶</text>
+			</view>
+		</view>
+		<view class="u-flex u-row-right u-m-t-24">
+			<view class="u-m-r-30">
+				<my-button shape="circle" plain width="160" height="60" type="cancel"><view>取酒</view></my-button>
+			</view>
+			<my-button shape="circle" width="180" height="60"><view>查看详情</view></my-button>
+		</view>
+	</view>
+	
+	
+</template>
+
+<script setup>
+	import myButton from '@/components/my-components/my-button'
+	import go from '@/commons/utils/go.js'
+	function toDetail(){
+		go.to('PAGES_STORING_WINE_RECORD_DETAIL',{id:1})
+	}
+</script>
+
+<style lang="scss">
+	.border-bottom{
+		border-color: rgb(245, 245, 245);
+	}
+	$head-img-size:80rpx;
+	.recoder-item {
+		margin-bottom: 32rpx;
+
+		.user-head-img {
+			width: $head-img-size;
+			height: $head-img-size;
+			background-color: rgb(204, 204, 204);
+			border-radius: 8rpx;
+			overflow: hidden;
+		}
+		.goods{
+			padding-left: calc( $head-img-size + 24rpx);
+			.goods-img{
+				width: 100rpx;
+				height: 100rpx;
+				background-color: rgb(204, 204, 204);
+				border-radius: 8rpx;
+				overflow: hidden;
+			}
+		}
+		
+	}
+</style>