first

pageStoringWine/index/index.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="min-page bg-gray u-font-28 color-333">
+		<view class="top bg-fff default-box-padding">
+			<view class="tab">
+				<my-tabs @change="tabsChange" :list="pageData.tabs.list" :defaultIndex="pageData.tabs.active"></my-tabs>
+			</view>
+			<view class="u-m-t-32">
+				<my-search :placeholder="pageData.tabs.active===0?'搜索用户昵称/手机号/酒名':'搜索酒名' "></my-search>
+			</view>
+			<view class="u-m-t-24" v-if="pageData.tabs.active===0">
+				<my-tags :list="pageData.status.list" @change="statusChange"></my-tags>
+			</view>
+		</view>
+
+
+		<view class="default-box-padding">
+			<template v-if="wineRecoders.list.length">
+				<view v-for="(item,index) in wineRecoders.list" :key="index">
+					<recoder-item></recoder-item>
+				</view>
+			</template>
+			<template v-else>
+				<my-empty text="暂没有存酒记录"></my-empty>
+			</template>
+			<view style="height: 200rpx;"></view>
+		</view>
+	</view>
+
+
+	<view class="u-fixed bottom u-flex bg-fff ">
+		<view class="u-flex-1 u-relative border-r">
+			<my-button bgColor="#333" color="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain type="primary"
+				@tap="">存酒</my-button>
+		</view>
+		<view class="u-flex-1">
+			<my-button bgColor="#333" color="#fff" borderRadius="0 0 0 0" plain type="primary" @tap="">添加酒品</my-button>
+		</view>
+		<view class="u-flex-1">
+			<my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="">
+				<view class="u-flex">
+					<uni-icons type="scan" color="#fff" size="16"></uni-icons>
+					<text class="u-m-l-12">取酒</text>
+				</view>
+			</my-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive
+	} from 'vue';
+	import myTabs from '@/components/my-components/my-tabs'
+	import myEmpty from '@/components/my-components/my-empty'
+	import myButton from '@/components/my-components/my-button'
+	import myTags from './compoents/my-tags'
+	import recoderItem from './compoents/recoder-item'
+	import mySearch from '@/components/my-components/my-search'
+	const pageData = reactive({
+		searchValue: ' ',
+		tabs: {
+			list: ['存酒记录', '可存酒管理'],
+			active: 0
+		},
+		status: {
+			list: ['全部', '储存中', '已取完', '已过期'],
+			active: 0
+		}
+	})
+
+	function tabsChange(i) {
+		pageData.tabs.active = i
+	}
+
+	function statusChange(i) {
+		pageData.status.active = i
+	}
+
+	const wineRecoders = reactive({
+		list: [1, 3, 4, 5]
+	})
+</script>
+
+<style lang="scss" scoped>
+	.border-r{
+		position: relative;
+		&::after{
+			content: '';
+			display: block;
+			position: absolute;
+			right: 0;
+			top: 14rpx;
+			bottom: 14rpx;
+			width: 2rpx;
+			background-color: rgba(255, 255, 255, 0.19);
+		}
+	}
+	.bottom {
+		background-color: transparent;
+		bottom: 100rpx;
+		left: 28rpx;
+		right: 28rpx;
+	}
+
+	.top {
+		.tab {
+			padding: 0 140rpx;
+		}
+	}
+</style>