272 lines
6.3 KiB
Vue
272 lines
6.3 KiB
Vue
<template>
|
|
<view class="color-333 u-font-28">
|
|
<up-sticky :offset-top="0">
|
|
<view class=" bg-fff u-flex u-p-l-30 u-row-between">
|
|
<view class="u-flex ">
|
|
<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="timeToggle">
|
|
<text class="u-m-r-12 no-wrap" :class="{'color-main':pageData.query.beginDate&&pageData.query.endDate}">筛选时间</text>
|
|
<image src="/pageProduct/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
|
mode="">
|
|
</image>
|
|
</view>
|
|
<view class="u-flex u-m-l-60 u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="showTypesToggle">
|
|
<text class="u-m-r-12" v-if="types.active===''"> 选择类型</text>
|
|
<text class="u-m-r-12 no-wrap color-main" v-else>{{types.list[types.active].text}}</text>
|
|
<image src="/pageProduct/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
|
mode="">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
|
|
<view :style="{height:types.show?typesHeight:0}" class="tranistion types overflow-hide">
|
|
<view @tap="changeTypesActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
|
v-for="(item,index) in types.list" :key="index">
|
|
<view>{{item.text}}</view>
|
|
<uni-icons v-if="types.active===index" type="checkmarkempty" :color="$utils.ColorMain"></uni-icons>
|
|
</view>
|
|
<view :style="{height: types.bottomHeight+'px'}"></view>
|
|
</view>
|
|
</view>
|
|
</up-sticky>
|
|
|
|
|
|
<view class=" min-page bg-gray list u-p-30">
|
|
<view class="u-flex u-m-b-30" v-if="pageData.query.beginDate&&pageData.query.endDate">
|
|
<view class="time-area u-font-24 color-main u-flex">
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="pageData.query.beginDate"></uni-dateformat>
|
|
<text class="u-p-l-10 u-p-r-10">至</text>
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="pageData.query.endDate"></uni-dateformat>
|
|
<view class="u-m-l-10 u-flex" @tap="clearTime">
|
|
<uni-icons type="clear" size="18" :color="$utils.ColorMain"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<template v-if="pageData.list.length">
|
|
<view class="u-m-b-28 " v-for="(item,index) in pageData.list" :key="index">
|
|
<my-list-item :data="item" ></my-list-item>
|
|
</view>
|
|
<my-pagination :size="pageData.size" :totalElements="pageData.totalElements"
|
|
@change="pageChange"></my-pagination>
|
|
<!-- <uni-load-more :status="pageData.status" /> -->
|
|
</template>
|
|
<template v-if="pageData.hasAjax&&!pageData.list.length">
|
|
<view class="" style="margin-top: 150rpx;">
|
|
<my-img-empty tips="暂无记录"></my-img-empty>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
|
|
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker" mode="all"></my-date-pickerview>
|
|
<my-mask ref="mask" @close="hideType"></my-mask>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onLoad, onReady, onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
|
import { ref, reactive, computed, watch } from 'vue';
|
|
|
|
import myListItem from './components/list-item.vue';
|
|
|
|
import { $invoicingType } from '@/commons/goodsData.js'
|
|
import { productStockFlow } from '@/http/api/product.js'
|
|
|
|
|
|
const search = reactive({
|
|
keyword: '',
|
|
show: false
|
|
})
|
|
|
|
function searchConfirm() {
|
|
|
|
}
|
|
|
|
function hideSearch() {
|
|
search.show = false
|
|
maskHide()
|
|
}
|
|
|
|
function showSearch() {
|
|
search.show = true
|
|
types.show = false
|
|
maskShow()
|
|
}
|
|
|
|
|
|
// 库存分类
|
|
const types = reactive({
|
|
list:$invoicingType,
|
|
active: '',
|
|
show: false,
|
|
bottomHeight: 14
|
|
})
|
|
|
|
function hideType() {
|
|
types.show = false
|
|
search.show = false
|
|
}
|
|
const typesHeight = computed(() => {
|
|
return 30 * types.list.length + types.bottomHeight + 'px'
|
|
})
|
|
|
|
function changeTypesActive(i) {
|
|
types.active = i
|
|
pageData.query.inOutItem = types.list[i].value
|
|
types.show = false
|
|
toggleMask()
|
|
}
|
|
|
|
/**
|
|
* 类型选择
|
|
*/
|
|
function showTypesToggle() {
|
|
types.show = !types.show
|
|
maskShow()
|
|
}
|
|
|
|
function resetQuery(){
|
|
pageData.query.page = 1
|
|
}
|
|
function clearTime() {
|
|
pageData.query.beginDate = ''
|
|
pageData.query.endDate = ''
|
|
resetQuery()
|
|
init()
|
|
}
|
|
|
|
const datePicker = ref(null)
|
|
const mask = ref(null)
|
|
const pageData = reactive({
|
|
query: {
|
|
page: 1,
|
|
size: 10,
|
|
productId:'',
|
|
inOutItem:'',
|
|
beginDate:'',
|
|
endDate:'',
|
|
},
|
|
totalElements: 0,
|
|
list: [],
|
|
status: 'noMore',
|
|
hasAjax:false,
|
|
changeSum:0
|
|
})
|
|
watch(()=>types.active,(newval)=>{
|
|
resetQuery()
|
|
init()
|
|
})
|
|
|
|
onLoad(opt => {
|
|
console.log(opt);
|
|
Object.assign(pageData.query,opt)
|
|
init()
|
|
})
|
|
async function init() {
|
|
const res = await productStockFlow(pageData.query)
|
|
pageData.hasAjax=true
|
|
pageData.list = res.records
|
|
pageData.totalElements = res.totalRow
|
|
}
|
|
function timeToggle() {
|
|
datePicker.value.toggle()
|
|
}
|
|
function datePickerConfirm(e) {
|
|
pageData.query.beginDate = e.start
|
|
pageData.query.endDate = e.end
|
|
resetQuery()
|
|
init()
|
|
}
|
|
|
|
function toggleMask(show) {
|
|
mask.value.toggle()
|
|
}
|
|
|
|
function maskShow() {
|
|
mask.value.open()
|
|
}
|
|
|
|
function maskHide() {
|
|
mask.value.close()
|
|
}
|
|
|
|
// 页数改变事件
|
|
function pageChange(page) {
|
|
pageData.query.page = page
|
|
init()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fixed-top {
|
|
z-index: 10;
|
|
}
|
|
|
|
.recoreds {
|
|
background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
|
|
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
padding: 32rpx 40rpx 40rpx 48rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: '';
|
|
top: -112rpx;
|
|
border-radius: 50%;
|
|
display: block;
|
|
position: absolute;
|
|
right: 56rpx;
|
|
width: 224rpx;
|
|
box-shadow: 0 0 1px #666;
|
|
height: 224rpx;
|
|
background: linear-gradient(180deg, rgba(103, 204, 254, 0.6) 0%, rgba(144, 87, 255, 0) 100%);
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
background-color: #fff;
|
|
padding: 16rpx 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
display: flex;
|
|
|
|
.search-btn {
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
// width: 164rpx;
|
|
transition: all .3s ease-in-out;
|
|
background-color: rgb(247, 247, 247);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
|
|
.types {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.time-area {
|
|
background: #E6F0FF;
|
|
border-radius: 100px;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.icon-arrow-down-fill {
|
|
width: 16rpx;
|
|
height: 10rpx;
|
|
}
|
|
|
|
.list {
|
|
}
|
|
</style> |