110 lines
2.8 KiB
Vue
110 lines
2.8 KiB
Vue
<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> |