Commit aedb6fa6 authored by xiangzj's avatar xiangzj

销售订单

parent 26fe3218
<template> <template>
<view class="ticket-order-page"> <view class="lists">
<view class="status_bar" :style="navHeight"></view> <view class="status_bar" :style="navHeight"></view>
<view class="tabs"> <!-- <view class="header-bg">
<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true" <image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image>
:scroll-into-view="scrollInto"> </view> -->
<view class="tab-bar-list"> <view class="main" :style="mainHeight">
<view class="tab-bar-list-wrapper"> <view class="middle view planout-block-item">
<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :ref="'tabitem'+index"> <view class="text-block">
<text :id="tab.id" :data-id="index" :data-current="index" class="uni-tab-item-title" <text class="middle-date">订单类型</text>
:class="{'uni-tab-item-title-active':tabIndex==index}" <view class="middle-date-des uni-list picker-year">
@click="ontabtap">{{tab.name}}</text> <view class="uni-list-cell">
<view class="uni-list-cell-db">
<picker class="picker-block" @change="bindPickerTypeChange" range-key='name' mode="selector"
:value="typeView" :range="selectProcessType">
<text class="uni-input-text">{{typeView}}</text>
</picker>
</view>
</view> </view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view> </view>
<view class="scroll-view-indicator"> </view>
<view ref="underline" class="scroll-view-underline" :class="{'scroll-view-animation':isTap}" <view class="text-block">
:style="underlineStyle"></view> <text class="middle-date">订单状态</text>
<view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<picker class="picker-block" @change="bindPickerStatusChange" range-key='name' mode="selector"
:value="statusView" :range="selectProcessStatus">
<text class="uni-input-text">{{statusView}}</text>
</picker>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view> </view>
</view> </view>
</scroll-view> <view class="text-block">
<text class="middle-date">年度</text>
<view class="conditon-block" :style="conditionTop" :class="{'conditon-block-auto':ishowDetail}"> <view class="middle-date-des uni-list picker-year">
<view class="filter-title"> <view class="uni-list-cell">
<button type="default" class="filter-btn" :class="{'filter-btn-active':0 === filterActiveIndex}" <view class="uni-list-cell-db">
@tap="handleFilter('week')"><text class="filter-btn__text" <picker class="picker-block" @change="bindPickerYearChange" mode="date"
:class="{'filter-btn-active__text':0 === filterActiveIndex}">一周内</text></button> :value="condition.posting_date [0].low" fields='year'>
<button type="default" @tap="handleFilter(item)" class="filter-btn" <text class="uni-input-text">{{condition.posting_date [0].low}}</text>
:class="{'filter-btn-active':item === filterActiveIndex}" v-for="item in 3" :key='item'> </picker>
<text class="filter-btn__text" </view>
:class="{'filter-btn-active__text':item === filterActiveIndex}">{{item}}月内</text></button> </view>
<image @tap="handleShowDetail" class="icon-arrow" :class="{'icon-arrow-rotate':ishowDetail}" <image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image> </view>
</view> </view>
<view class="filter-content"> <view class="text-block text-block-last">
<button type="default" @tap="handleFilter(item+3)" class="filter-btn" <text class="middle-date">销售计划编号</text>
:class="{'filter-btn-active':item+3 === filterActiveIndex}" v-for="item in 9" :key='item'><text <input class="middle-date-des" type="text" v-model="condition.object_id[0].low" placeholder="请输入" />
class="filter-btn__text"
:class="{'filter-btn-active__text':item+3 === filterActiveIndex}">{{item+3}}月内</text></button>
</view> </view>
</view> </view>
<view class="planout-block">
<view class="empty"></view> <button class="btn" type="default" @tap="search">
<text class="btn-text">查询</text>
<swiper ref="swiper1" class="tab-box" :current="tabIndex" :duration="300" @change="onswiperchange" </button>
@transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish"> </view>
<swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index"> <list ref="list" class="scroll-area view" loadmoreoffset='100' @loadmore="scrolltolower"
<orderPage :ref="'page' + index" class="page-item" :date-range="dateRange" :nid="page.newsid"> :show-scrollbar='false'>
</orderPage> <refresh @refresh="refresh" :display="refreshing ? 'show' : 'hide'">
</swiper-item> <!-- <loading-indicator></loading-indicator> -->
</swiper> </refresh>
<cell v-for="(item,index) in lists" :key="item.plan_number">
<order-item :newsItem="item" @click.native="goDetail(item)"></order-item>
</cell>
<cell>
<view class="loading-more" v-if='lists.length>2'>
<text class="loading-more-text">{{loadingText}}</text>
</view>
</cell>
<view class="planout-block-item__last"> </view>
</list>
<no-data v-if="lists.length === 0"></no-data>
</view> </view>
</view> </view>
</template> </template>
...@@ -58,504 +84,495 @@ ...@@ -58,504 +84,495 @@
} from 'vuex' } from 'vuex'
import { import {
timeRangeFormat apiSalesPlanTypesSelect
} from '@/utils/date.js' } from '@/servers/common.js'
// #ifdef APP-PLUS
const dom = weex.requireModule('dom');
// #endif
import orderPage from './order-page.nvue';
// 缓存每页最多
const MAX_CACHE_DATA = 100;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;
const TAB_PRELOAD_OFFSET = 1;
import {
apiGetSalesOrder
} from '@/servers/salesOrder.js'
import {
querySysDictionaryDetailsByCode,
} from '@/servers/purchaseList.js'
import timeFormat from '@/uview-ui/libs/function/timeFormat.js'
import noData from '@/components/nodata.nvue';
import orderItem from './order-item.nvue';
export default { export default {
components: {
orderPage
},
data() { data() {
return { return {
tabList: [{ scrollTop: 0,
id: "tab01", isOpened: 'none',
name: '全部', loadingText: '加载中...',
newsid: '' refreshing: false,
}, { condition:{
id: "tab02", object_id: [{sign: "I", option: "CP", low: "", high: ""}],
name: '配额', process_type: [{sign: "I", option: "EQ", low: "", high: ""}],
newsid: 'ZS01' role: "WLY001",
}, { status: [{sign: "I", option: "EQ", low: "", high: ""}],
id: "tab03", user_bp: '',
name: '非配额', posting_date: [{sign: "I", option: "EQ", low: "", high: ""}]
newsid: 'ZS02' },
}, selectProcessType: [],
{ selectProcessStatus: [],
id: "tab04", page: {
name: '公关团购', "PAGE": "1",
newsid: 'V013' "PAGESIZE": "10",
} },
], loadParams: {
tabIndex: 0, total: 0,
cacheTab: [], totalPage: 1,
scrollInto: "", isDone: false,
navigateFlag: false, isRefresh: false
indicatorLineLeft: 0, },
indicatorLineWidth: 0, selectedSalePlan: {},
isTap: false, selectedSalePlanTypes: [],
// 测试使用观察变化 typesIndex: 0,
_lastTabIndex: 0, lists: [],
swiperWidth: 0, typeView: '',
tabbarWidth: 0, statusView: '',
tabListSize: {},
_touchTabIndex: 0,
ishowDetail: false,
filterActiveIndex: 0,
dateRange: {
start: '',
end: ''
}
} }
}, },
components: {
noData,
orderItem
},
computed: { computed: {
underlineStyle() { ...mapState(['sysinfo', 'userInfo']),
return {
left: this.indicatorLineLeft + 'px',
width: this.indicatorLineWidth + 'px'
}
},
navHeight() { navHeight() {
return { return {
'height': `${this.sysinfo.safeArea.top + 44}px` 'height': `${this.sysinfo.safeArea.top + 44}px`
} }
}, },
conditionTop() { mainHeight() {
return { return {
'top': `${this.sysinfo.safeArea.top + 44 + 42}px` 'height': `${this.sysinfo.safeArea.height - 44 }px`,
} }
}, },
...mapState(['sysinfo']) scrollHeight() {
}, return {
onReady() { 'height': `${this.sysinfo.safeArea.height - 44 - 156 }px`
this._lastTabIndex = 0;
this.swiperWidth = 0;
this.tabbarWidth = 0;
this.tabListSize = {};
this._touchTabIndex = 0;
this.dateRange.start = timeRangeFormat('week')
this.dateRange.end = timeRangeFormat('now')
this.pageList = [];
for (let i = 0; i < this.tabList.length; i++) {
let item = this.$refs['page' + i]
if (Array.isArray(item)) {
this.pageList.push(item[0])
} else {
this.pageList.push(item)
} }
} },
this.switchTab(this.tabIndex);
this.selectorQuery(); },
created() {
this.condition.user_bp = this.userInfo.code
this.reset()
this.getSelectDictDataOrigin('A0043','selectProcessType')
this.getSelectDictDataOrigin('A0041','selectProcessStatus')
this.getSalesPlan(true);
}, },
methods: { methods: {
ontabtap(e) { search() {
let index = e.target.dataset.current || e.currentTarget.dataset.current; console.log(this.condition)
//let offsetIndex = this._touchTabIndex = Math.abs(index - this._lastTabIndex) > 1; this.reset()
this.getSalesPlan(true);
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
this.isTap = true;
var currentSize = this.tabListSize[index];
this.updateIndicator(currentSize.left, currentSize.width);
this._touchTabIndex = index;
// #endif
// this.dateRange = {
// start: '',
// end: ''
// }
// this.filterActiveIndex = -1
this.switchTab(index);
}, },
onswiperchange(e) { getSelectDictDataOrigin(dictcode,key) {
// 注意:百度小程序会触发2次 querySysDictionaryDetailsByCode({'code': dictcode})
.then(res => {
// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ if(res.data.Rows.length>0){
let index = e.target.current || e.detail.current; switch (key) {
this.switchTab(index); case 'selectProcessType':
// #endif this.selectProcessType = res.data.Rows
break;
case 'selectProcessStatus':
this.selectProcessStatus = res.data.Rows
break;
}
}
})
.catch(() => {})
}, },
onswiperscroll(e) { bindPickerStatusChange(e) {
if (this.isTap) { console.log('bindPickerStatusChange', e)
return; this.condition.status[0].low = this.selectProcessStatus[e.detail.value].value
} this.statusView = this.selectProcessStatus[e.detail.value].name
var offsetX = e.detail.dx;
var preloadIndex = this._lastTabIndex;
if (offsetX > TAB_PRELOAD_OFFSET) {
preloadIndex++;
} else if (offsetX < -TAB_PRELOAD_OFFSET) {
preloadIndex--;
}
if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
return;
}
if (this.pageList[preloadIndex].dataList.length === 0) {
// this.loadTabData(preloadIndex);
}
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
var percentage = Math.abs(this.swiperWidth / offsetX);
var currentSize = this.tabListSize[this._lastTabIndex];
var preloadSize = this.tabListSize[preloadIndex];
var lineL = currentSize.left + (preloadSize.left - currentSize.left) / percentage;
var lineW = currentSize.width + (preloadSize.width - currentSize.width) / percentage;
this.updateIndicator(lineL, lineW);
// #endif
}, },
animationfinish(e) { bindPickerTypeChange(e) {
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ console.log('bindPickerTypeChange', e)
let index = e.detail.current; this.condition.process_type[0].low = this.selectProcessType[e.detail.value].value
if (this._touchTabIndex === index) { this.typeView = this.selectProcessType[e.detail.value].name
this.isTap = false;
}
this._lastTabIndex = index;
this.switchTab(index);
this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
// #endif
}, },
selectorQuery() { bindPickerYearChange(e) {
// #ifdef APP-NVUE console.log('bindPickerYearChange', e.detail.value)
dom.getComponentRect(this.$refs.tabbar1, res => { this.condition.posting_date [0].low = e.detail.value
this.tabbarWidth = res.size.width;
});
dom.getComponentRect(this.$refs['swiper1'], res => {
this.swiperWidth = res.size.width;
});
// 因 nvue 暂不支持 class 查询
let queryTabSize = uni.createSelectorQuery().in(this);
for (let i = 0; i < this.tabList.length; i++) {
queryTabSize.select('#' + this.tabList[i].id).boundingClientRect();
}
queryTabSize.exec(rects => {
rects.forEach((rect) => {
this.tabListSize[rect.dataset.id] = rect;
})
this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex]
.width);
this.switchTab(this.tabIndex);
});
// #endif
// #ifdef MP-WEIXIN || H5 || MP-QQ
uni.createSelectorQuery().in(this).select('.tab-box').fields({
dataset: true,
size: true,
}, (res) => {
this.swiperWidth = res.width;
}).exec();
uni.createSelectorQuery().in(this).selectAll('.uni-tab-item-title').boundingClientRect((rects) => {
rects.forEach((rect) => {
this.tabListSize[rect.dataset.id] = rect;
})
this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex]
.width);
}).exec();
// #endif
}, },
updateIndicator(left, width) { goDetail(detail) {
this.indicatorLineLeft = left; let path = ''
this.indicatorLineWidth = width; if (detail.process_type === 'ZS01') {
path = 'order-detail-quota/order-detail-quota'
} else if (detail.process_type === 'ZS02') {
if (detail.zzfld00002j === 'V013') {
path = 'order-detail-group/order-detail-group'
} else {
path = 'order-detail-noquota/order-detail-noquota'
}
} else {
path = 'order-other-detail/order-other-detail'
}
uni.navigateTo({
url: `/pages/${path}?order=${JSON.stringify(detail)}`
})
}, },
switchTab(index) { async getSalesPlan(isRefresh) {
if (this.pageList[index].dataList.length === 0) { if (isRefresh) {
this.loadTabData(index); this.page.PAGE = 1
} }
if (this.loadParams.isDone) {
if (this.tabIndex === index) { return
return;
} }
const params = {
// 缓存 tabId ...this.page,
if (this.pageList[this.tabIndex].dataList.length > MAX_CACHE_DATA) { ...this.condition
let isExist = this.cacheTab.indexOf(this.tabIndex); }
if (isExist < 0) { !params.object_id[0].low && delete params.object_id
this.cacheTab.push(this.tabIndex); !params.posting_date[0].low && delete params.posting_date
} !params.process_type[0].low && delete params.process_type
!params.status[0].low && delete params.status
uni.showLoading({
title: '加载中'
});
setTimeout(function() {
uni.hideLoading();
}, 2000);
const res = await apiGetSalesOrder(params)
uni.hideLoading();
const {
data,
page,
pagesize,
total
} = res
this.page.PAGE = page * 1
this.page.PAGESIZE = pagesize * 1
this.loadParams.total = total * 1
this.loadParams.totalPage = Math.ceil(total * 1 / this.page.PAGESIZE * 1)
if (isRefresh) {
this.lists = data
this.loadParams.isDone = false
} else {
this.lists = this.lists.concat(data)
} }
this.tabIndex = index; setTimeout(() => {
this.refreshing = false;
}, 300)
},
refresh(e) {
this.refreshing = true;
this.reset()
this.getSalesPlan(true)
// #ifdef APP-NVUE // #ifdef APP-NVUE
// this.scrollTabTo(index); try {
// #endif // console.log('-------', this.$refs.list)
this.$refs.list.resetLoadmore();
// #ifndef APP-NVUE } catch (e) {
this.scrollInto = this.tabList[index].id; console.log('onrefresh', e)
}
// #endif // #endif
// 释放 tabId
if (this.cacheTab.length > MAX_CACHE_PAGE) {
let cacheIndex = this.cacheTab[0];
this.clearTabData(cacheIndex);
this.cacheTab.splice(0, 1);
}
}, },
scrollTabTo(index) { scrolltolower() {
const el = this.$refs['tabitem' + index][0]; console.log('onReachBottom');
let offset = 0; if (this.page.PAGE < this.loadParams.totalPage) {
// TODO fix ios offset this.page.PAGE++
if (index > 0) { this.getSalesPlan()
offset = this.tabbarWidth / 2 - this.tabListSize[index].width / 2; } else {
if (this.tabListSize[index].right < this.tabbarWidth / 2) { this.loadParams.isDone = true
offset = this.tabListSize[0].width; this.loadingText = '-- 到底了 --'
}
} }
dom.scrollToElement(el, {
offset: -offset
});
},
loadTabData(index) {
this.pageList[index].refreshData()
// this.pageList[index].loadData(true, this.dateRange);
},
clearTabData(index) {
this.pageList[index].clear();
}, },
handleShowDetail() { reset() {
this.ishowDetail = !this.ishowDetail this.loadParams = {
}, total: 0,
handleFilter(item) { totalPage: 1,
this.filterActiveIndex = item isDone: false,
}, isRefresh: false
handleFilter(item) {
if (item === 'week') {
this.filterActiveIndex = 0
this.dateRange.start = timeRangeFormat('week')
} else {
this.filterActiveIndex = item
this.dateRange.start = timeRangeFormat(item)
} }
this.dateRange.end = timeRangeFormat('now') this.page.PAGE = 1
this.pageList[this.tabIndex].refreshData() this.lists = []
// this.pageList[this.tabIndex].loadData(true, this.dateRange); this.loadingText = '加载中'
} },
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ticket-order-page { .view {
flex-direction: column; flex-direction: column;
}
.header-bg {
height: 284rpx;
opacity: 0.72;
margin-top: -88rpx;
}
.header-bg-img {
width: 750rpx;
}
.lists {
position: relative;
flex-direction: column;
background: #f0f4f5;
flex: 1; flex: 1;
} }
/* #ifndef APP-PLUS */ .main {
page { position: relative;
width: 100%; flex-direction: column;
min-height: 100%; padding: 0 16rpx;
display: flex; padding-top: 40rpx;
background: $background-color-1; // background-color: #fff;
} }
.status_bar { .scroll-area {
height: var(--status-bar-height); overflow-y: scroll;
background: #f0f4f5;
} }
/* #endif */ .middle {
background-color: #fff;
border-radius: 16rpx;
padding: 0rpx 64rpx 0rpx 48rpx;
}
.tabs { .text-block {
flex: 1;
flex-direction: column;
overflow: hidden; overflow: hidden;
background-color: #ffffff; height: 96rpx;
margin-bottom: 14rpx;
border-bottom: 1px solid #f4f5f6;
} }
.tab-bar { .text-block-last {
width: 750rpx; margin-bottom: 0;
height: 42px; border-bottom: 0;
flex-direction: row;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
border-bottom: 0.5px solid #eeeeee;
} }
/* #ifndef APP-NVUE */ .middle-date {
.tab-bar ::-webkit-scrollbar { flex: 2;
display: none; font-size: 28rpx;
width: 0 !important; line-height: 96rpx;
height: 0 !important; color: #333;
-webkit-appearance: none; margin-bottom: 8rpx;
background: transparent;
} }
/* #endif */ .middle-date-des {
flex: 3;
font-size: 28rpx;
line-height: 96rpx;
height: 96rpx;
overflow: hidden;
text-overflow: ellipsis;
color: #888;
}
.tab-bar-list { .picker-year {
flex-direction: column; position: relative;
border-radius: 4px;
align-items: center;
line-height: normal;
} }
.tab-bar-list-wrapper { .uni-list-cell {
width: 750rpx; flex: 1;
flex-direction: row; height: 96rpx;
line-height: 96rpx;
} }
.scroll-view-indicator { .uni-list-cell-db {
position: relative; flex: 1;
height: 2px;
border-radius: 1px;
background-color: transparent;
} }
.scroll-view-underline { .picker-block {
position: absolute; flex: 1;
top: 0;
bottom: 0;
width: 0;
background-color: $tabbar-color;
} }
.scroll-view-animation { .uni-input-text {
transition-duration: 0.2s; height: 96rpx;
transition-property: left; line-height: 96rpx;
font-size: 14px;
color: #888;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.conditon-block { .icon-arrow {
position: fixed; position: absolute;
left: 0;
top: 172rpx;
right: 0; right: 0;
bottom: 0; top: 16px;
width: 12rpx;
height: 20rpx;
z-index: 10; z-index: 10;
width: 750rpx; }
height: 124rpx;
overflow: hidden; .planout-block-lists {
background-color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 40rpx 32rpx 0 16rpx;
} }
.conditon-block-auto { .planout-block-item {
height: 460rpx; // margin: 32rpx 0;
overflow: auto;
max-height: 230px;
} }
.icon-arrow { .scroll-item {
width: 32rpx; flex: 1;
height: 20rpx; display: flex;
margin-top: 24rpx; flex-direction: column;
transition-property: transform; margin-bottom: 32rpx;
transition-duration: 0.15s; background-color: #fff;
transform: rotate(0deg); border-radius: 16rpx;
padding: 32rpx 64rpx 40rpx 48rpx;
} }
.icon-arrow-rotate { .planout-block-item__last {
transform: rotate(180deg); height: 40px;
} }
.item-block {
.filter-btn {
width: 148rpx;
height: 68rpx;
line-height: 64rpx;
background-color: #f8f8f8;
border-radius: 8px;
margin-right: 20rpx;
margin-bottom: 20rpx;
margin-left: 0;
border: 2rpx solid transparent;
overflow: hidden; overflow: hidden;
padding: 0;
} }
.filter-btn__text { .item-block-label {
display: inline-block;
width: 148rpx;
height: 68rpx;
border-radius: 8px;
line-height: 68rpx;
color: #8e8e8e;
text-align: center;
font-size: 24rpx; font-size: 24rpx;
color: #333;
} }
.filter-btn-active { .item-block__label {
background: #f61d30; flex: 1;
text-align: left;
font-size: 32rpx;
color: #333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
} }
.filter-btn-active__text { .item-block-code {
color: #fff; padding-bottom: 16rpx;
background: #f61d30;
} }
.filter-content { .item-block-name {
padding-top: 24rpx;
padding-bottom: 32rpx;
}
.item-block-label-des {
flex: 1;
text-align: left;
font-size: 28rpx;
color: #333;
}
.block-detal {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
background: #f8f8f8;
border-radius: 20rpx;
padding: 32rpx;
margin-top: 32rpx;
} }
uni-button:after { .block-detal-item {
border: 0 display: flex;
margin-bottom: 32rpx;
justify-content: space-between;
} }
.empty { .block-detal-item-last {
height: 124rpx; margin-bottom: 0;
}
.detal-item-label {
color: #999;
font-size: 24rpx;
} }
.tab-box { .detal-item-value {
color: #333;
font-size: 28rpx;
}
.btn {
flex: 1; flex: 1;
background: $background-color-1; height: 92rpx;
padding: 0 16rpx; background: $wly-primary-color;
border-radius: 46rpx;
}
.btn-text {
color: #fff;
font-size: 34rpx;
} }
.uni-tab-item { .loading-more {
/* #ifndef APP-PLUS */
display: inline-block;
/* #endif */
flex-wrap: nowrap;
padding-left: 6px;
padding-right: 6px;
flex: 1; flex: 1;
align-items: center;
justify-content: center; justify-content: center;
padding-top: 14px;
padding-bottom: 14px;
text-align: center; text-align: center;
} }
.uni-tab-item-title { .loading-more-text {
color: $text-base-color; font-size: 12px;
font-size: 28rpx; color: #999;
height: 40px;
line-height: 40px;
font-weight: 400;
flex-wrap: nowrap;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
} }
.navs-block {
.uni-tab-item-title-active { flex-direction: column;
color: $tabbar-color; background-color: #fff;
font-weight: 500; padding-top: 40rpx;
} }
.swiper-item { .navs-tab {
display: flex;
flex: 1; flex: 1;
flex-direction: column; align-items: center;
height: 60rpx;
border-bottom: 1px solid #F4F5F6;
padding-bottom: 8rpx;
} }
.page-item { .navs-tab-item {
display: flex;
justify-content: center;
flex: 1; flex: 1;
flex-direction: row; align-items: center;
position: absolute; height: 50rpx;
left: 16rpx; overflow: hidden;
top: 0; }
right: 16rpx;
bottom: 0; .search-type-text {
color: #333;
font-size: 28rpx;
}
.icon-arrow-down {
width: 6px;
height: 4px;
margin-left: 16rpx;
}
.planout-block {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
margin-bottom: 30rpx;
padding: 0 24rpx;
}
.btn {
flex: 1;
height: 92rpx;
background: $wly-primary-color;
border-radius: 46rpx;
}
.btn-text {
color: #fff;
font-size: 34rpx;
} }
</style> </style>
<template> <template>
<view class="page-news"> <view class="">
<uni-list ref="list" class="listview" :enableBackToTop="true" :scroll-y="true" @scrolltolower="loadMore()"> <list ref="list" class="page-news" loadmoreoffset='100' @loadmore="scrolltolower"
<uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :show-scrollbar='false'>
<!-- <uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
:display="refreshing ? 'show' : 'hide'"> :display="refreshing ? 'show' : 'hide'">
<div class="refresh-view"> <div class="refresh-view">
<image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '32px'}" <image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '32px'}"
...@@ -10,16 +11,19 @@ ...@@ -10,16 +11,19 @@
:contentText="loadingMoreText"></uni-load-more> :contentText="loadingMoreText"></uni-load-more>
<text class="loading-text">{{refreshText}}</text> <text class="loading-text">{{refreshText}}</text>
</div> </div>
</uni-refresh> </uni-refresh> -->
<uni-cell v-for="(item, index) in dataList" :key="item.id"> <refresh @refresh="refresh" :display="refreshing ? 'show' : 'hide'">
<!-- <loading-indicator></loading-indicator> -->
</refresh>
<cell v-for="(item, index) in dataList" :key="item.id">
<order-item :newsItem="item" @click.native="goDetail(item)"></order-item> <order-item :newsItem="item" @click.native="goDetail(item)"></order-item>
</uni-cell> </cell>
<uni-cell v-if="isLoading || dataList.length > 4"> <cell v-if="isLoading || dataList.length > 4">
<view class="loading-more"> <view class="loading-more">
<text class="loading-more-text">{{loadingText}}</text> <text class="loading-more-text">{{loadingText}}</text>
</view> </view>
</uni-cell> </cell>
</uni-list> </list>
<no-data class="no-data" v-if="isNoData" @retry="loadMore"></no-data> <no-data class="no-data" v-if="isNoData" @retry="loadMore"></no-data>
</view> </view>
</template> </template>
...@@ -50,9 +54,9 @@ ...@@ -50,9 +54,9 @@
orderItem orderItem
}, },
props: { props: {
nid: { condition: {
type: String, type: Object,
default: '' default: () => {}
}, },
dateRange: { dateRange: {
type: Object, type: Object,
...@@ -83,22 +87,6 @@ ...@@ -83,22 +87,6 @@
contentnomore: '' contentnomore: ''
}, },
refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg==", refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg==",
condition: {
USER_BP: '50000215',
ROLE: 'WLY001',
PROCESS_TYPE: [{
"SIGN": "I",
"OPTION": "EQ",
LOW: '',
HIGH: ''
}],
POSTING_DATE: [{
"SIGN": "I",
"OPTION": "BT",
LOW: '',
HIGH: ''
}]
},
page: { page: {
"PAGE": "1", "PAGE": "1",
"PAGESIZE": "10", "PAGESIZE": "10",
...@@ -116,7 +104,6 @@ ...@@ -116,7 +104,6 @@
}, },
created() { created() {
this.pullTimer = null; this.pullTimer = null;
this.condition.USER_BP = this.userInfo.code
this._isWidescreen = false; this._isWidescreen = false;
// this.loadData(true) // this.loadData(true)
}, },
...@@ -128,89 +115,15 @@ ...@@ -128,89 +115,15 @@
this.isLoading = true; this.isLoading = true;
this.isNoData = false; this.isNoData = false;
this.condition.PROCESS_TYPE[0].LOW = this.nid
let POSTING_DATE = []
let PROCESS_TYPE = []
let dateParams = dateRange || this.dateRange
if (dateParams && dateParams.start) {
this.condition.POSTING_DATE[0].LOW = dateParams.start
this.condition.POSTING_DATE[0].HIGH = dateParams.end
POSTING_DATE = this.condition.POSTING_DATE
} else {
POSTING_DATE = []
}
// if (this.condition.POSTING_DATE[0].LOW === '') {
// POSTING_DATE = []
// } else {
// POSTING_DATE = this.condition.POSTING_DATE
// }
if (this.condition.PROCESS_TYPE[0].LOW === '') {
PROCESS_TYPE = [{
"SIGN": "I",
"OPTION": "EQ",
LOW: 'ZS01',
},
{
"SIGN": "I",
"OPTION": "EQ",
LOW: 'ZS02',
},
{
"SIGN": "I",
"OPTION": "EQ",
LOW: 'V013',
}
]
} else {
if (this.nid === 'V013') {
PROCESS_TYPE = [{
"SIGN": "I",
"OPTION": "EQ",
LOW: 'ZS02',
}]
} else {
PROCESS_TYPE = this.condition.PROCESS_TYPE
}
}
console.log('load---------', this.nid, PROCESS_TYPE)
const params = { const params = {
...this.condition, ...this.condition,
PROCESS_TYPE,
POSTING_DATE,
...this.page ...this.page
} }
if (this.nid === 'V013') { !params.object_id.low && delete params.object_id
params.ZZFLD00002J = [{ !params.posting_date.low && delete params.posting_date
"SIGN": "I", !params.process_type.low && delete params.process_type
"OPTION": "EQ", !params.status.low && delete params.status
LOW: 'V013',
}]
} else if (this.nid === 'ZS02'){
params.ZZFLD00002J = [
    {
        "SIGN": "E",
        "OPTION": "EQ",
        "LOW": "V013"
    },
    {
        "SIGN": "E",
        "OPTION": "EQ",
        "LOW": "V014"
    },
    {
        "SIGN": "E",
        "OPTION": "EQ",
        "LOW": "V015"
    }
]
} else {
delete params['ZZFLD00002J']
}
apiGetSalesOrder(params).then((res) => { apiGetSalesOrder(params).then((res) => {
console.log('loadData', res) console.log('loadData', res)
const { const {
...@@ -343,28 +256,28 @@ ...@@ -343,28 +256,28 @@
} }
.page-news { .page-news {
flex: 1; // flex: 1;
flex-direction: column; // flex-direction: column;
position: absolute; // position: absolute;
left: 0; // left: 0;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
} }
.listview { .listview {
position: absolute; // position: absolute;
left: 0; // left: 0;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
/* #ifndef APP-NVUE */ // /* #ifndef APP-NVUE */
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
/* #endif */ // /* #endif */
/* #ifndef MP-ALIPAY */ // /* #ifndef MP-ALIPAY */
flex-direction: column; // flex-direction: column;
/* #endif */ // /* #endif */
} }
.refresh { .refresh {
......
<template>
<view class="lists">
<view class="status_bar" :style="navHeight"></view>
<view class="header-bg">
<image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image>
</view>
<view class="main">
<view class="list-wrapper" :style="scrollHeight">
<list class="list-block" scrollable loadmoreoffset='1' show-scrollbar='false'>
<cell class="view scroll-area">
<view class="order-main view">
<view class="top">
<text class="title-no">订单编号:{{INFO.OBJECT_ID}}</text>
<view class="title-info">
<button class="title-info__status" type="default"><text
class="item-block-btn__text">{{INFO.STATUS_TEXT}}</text></button>
</view>
</view>
<view class="order-main-middle view">
<view class="middle-title">
<text class="middle-title__text">{{INFO.PROCESS_TYPE_TEXT}}</text>
</view>
<view class="text-block-box">
<view class="text-block text-block-last">
<text class="middle-date">{{INFO.POSTING_DATE}}</text>
<text class="middle-date-des">下单日期</text>
</view>
<view class="text-block text-block-last">
<view class="middle-date-right">
<text class="middle-date">{{INFO.TOTAL_AMOUNT}}</text>
</view>
<text class="middle-date-des middle-date-right">金额</text>
</view>
</view>
<!-- <view class="text-block-box">
<view class="text-block text-block-last">
<text class="middle-date">{{INFO.GRPNAME}}</text>
<text class="middle-date-des">团购单位</text>
</view>
</view>
<view class="text-block-box text-block-box-last">
<view class="text-block text-block-last">
<view class="middle-date">{{DIYC==='X'?'是':'否'}}
<button class="diy-entry" type="default" @click="goDiyPage" v-if="DIYC==='X'">
<image class="diy-icon" src="../../static/image/address@3x.png" mode="">
</image>
<text class="diy-entry-text">定制酒</text>
</button>
</view>
<text class="middle-date-des">是否盒外刻字</text>
</view>
<view class="text-block text-block-last">
<view class="middle-date-right">
<text class="middle-date">{{INFO.ZZFLD000098}}</text>
</view>
<text class="middle-date-des middle-date-right">外箱喷码内容</text>
</view>
</view> -->
</view>
</view>
<view class="order-middle view" :class="{'order-middle-auto':!ishowReceiveDetail}"
ref='receiveInfo' :style="receiveInfoHeightComputed">
<view class="middle view">
<view class="item-block item-block-name">
<text class="item-block-label">收货信息</text>
</view>
<view class="block-detal">
<!-- <view class="block-detal-item">
<text class="detal-item-label">收货单位</text>
<text class="detal-item-value">{{INFO.ZZFLD00008T_DSCR}}</text>
</view> -->
<view class="block-detal-item">
<text class="detal-item-label">联系人</text>
<text class="detal-item-value">{{INFO.ZZFLD00002L}}</text>
</view>
<view class="block-detal-item">
<text class="detal-item-label">联系电话</text>
<text class="detal-item-value">{{INFO.ZZFLD00002M}}</text>
</view>
<view class="block-detal-item block-detal-item-last">
<text class="detal-item-label">收货地址</text>
<text class="detal-item-value">{{INFO.ZZFLD00002N}}</text>
</view>
</view>
</view>
<view class="empty-block"></view>
<view class="middle view" v-for="(item,index) in ITEM" :key="index">
<view class="item-block item-block-name">
<text class="item-block-label">订购产品</text>
</view>
<view class="block-detal">
<view class="block-detal-item">
<text class="detal-item-label">产品</text>
<text class="detal-item-value">{{item.DESCRIPTION}}</text>
</view>
<view class="block-detal-item">
<text class="detal-item-label">数量(件))</text>
<text class="detal-item-value">{{item.ZZFLD000009}}</text>
</view>
<view class="block-detal-item">
<text class="detal-item-label">盒数</text>
<text class="detal-item-value">{{item.ZZFLD00002W}}</text>
</view>
<view class="block-detal-item">
<text class="detal-item-label">单价</text>
<text class="detal-item-value">{{item.NET_PRICE}}</text>
</view>
<view class="block-detal-item block-detal-item-last">
<text class="detal-item-label"></text>
<view class="detal-item-value">
<text class="item-value-intotal">小计:</text>
<text class="item-value-intotal-num">{{item.NET_VALUE}}</text>
</view>
</view>
</view>
</view>
<view class="float-btn-block">
<view class="float-btn" @click="handleShowReceiveDetail">
<text class="float-btn__text">{{ishowReceiveDetail?'收起':'展示完整信息'}}</text>
<image class="icon-arrow" :class="{'icon-arrow-rotate':!ishowReceiveDetail}"
src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
</view>
</view>
</view>
<!-- <view class="order-bottom view">
<view class="middle view">
<view class="item-block item-block-name">
<text class="item-block-label">附件</text>
</view>
<view class="block-detal">
<view class="block-detal-item">
<view class="detal-item-file">
<image class="icon-file" src="@/static/image/logo@3x.png" mode="widthFix">
</image>
<text class="detal-item-label">开票要求.docx</text>
</view>
<button class="btn" type="default">
<text class="btn-text">下载</text>
</button>
</view>
</view>
</view>
</view> -->
</cell>
</list>
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
import {
apiGetSalesOrderDetail
} from '@/servers/salesOrder.js'
export default {
data() {
return {
ishowReceiveDetail: false,
scrollTop: 0,
orderItem: {},
orderDetail: {
ITEM: [],
INFO: {},
ATTACHMENT: []
},
receiveInfoHeight: '132',
DIYC: ''
}
},
computed: {
...mapState(['sysinfo']),
navHeight() {
return {
'height': `${this.sysinfo.safeArea.top + 44}px`
}
},
ITEM() {
return this.orderDetail.ITEM || []
},
INFO() {
return this.orderDetail.INFO || {}
},
ATTACHMENT() {
return this.orderDetail.ATTACHMENT || []
},
receiveInfoHeightComputed() {
return {
"height": `${this.receiveInfoHeight}px`
}
},
scrollHeight() {
return {
'height': `${this.sysinfo.safeArea.height - 58 }px`,
}
},
},
onLoad(option) {
this.orderItem = JSON.parse(option.order)
this.getOrderDetail()
},
methods: {
async getOrderDetail() {
try{
const params = {
OBJECT_ID: this.orderItem.object_id
}
const res = await apiGetSalesOrderDetail(params)
this.orderDetail = res.DATA
this.DIYC = res.DIYC
}catch(e){
//TODO handle the exception
}
},
handleShowReceiveDetail() {
this.ishowReceiveDetail = !this.ishowReceiveDetail
if (this.ishowReceiveDetail === true) {
this.receiveInfoHeight = `${260*this.ITEM.length+285}`
} else {
this.receiveInfoHeight = '132'
}
},
goDiyPage() {
uni.navigateTo({
url: `/pages/diy-wine/diy-wine?orderDetail=${JSON.stringify(this.orderDetail)}`
})
}
}
}
</script>
<style lang="scss" scoped>
.view {
flex-direction: column;
}
.header-bg {
height: 284rpx;
opacity: 0.72;
margin-top: -88rpx;
}
.header-bg-img {
width: 750rpx;
}
.lists {
position: relative;
flex-direction: column;
flex: 1;
background: #f0f4f5;
// overflow-y: scroll;
}
.main {
position: relative;
flex-direction: column;
margin-top: -164rpx;
padding: 0 16rpx;
}
.list-wrapper {
display: flex;
flex-direction: column;
}
.scroll-area {
padding-bottom: 26rpx;
}
.list-block {
display: flex;
flex-direction: column;
}
.order-main {
flex: 1;
background: #ffffff;
border-radius: 16rpx 100rpx 16rpx 16rpx;
padding-top: 30rpx;
margin-bottom: 16rpx;
}
.top {
height: 72rpx;
align-items: center;
justify-content: space-between;
padding: 0 48rpx;
}
.title-no {
font-size: 24rpx;
color: #555555;
}
.title-info {
align-items: center;
// margin-right: 26rpx;
}
.title-info__status {
height: 48rpx;
line-height: 44rpx;
background: #f61d30;
border-radius: 80rpx 200rpx 200rpx 80rpx;
border: 1px solid #f61d30;
font-size: 12px;
color: #fff;
text-align: center;
}
.title-info__status:after {
border: 0;
}
.title-info__status-done {
background: #f8f8f8;
color: #888888;
border: 1px solid #f8f8f8;
}
.item-block-btn__text {
width: 180rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
font-size: 12px;
color: #fff;
}
.order-main-middle {
position: relative;
padding: 26rpx 48rpx 40rpx;
}
.middle-title {
display: flex;
align-items: center;
margin-bottom: 32rpx;
}
.middle-title__text {
font-weight: 500;
font-size: 32rpx;
color: $text-base-color;
font-family: PingFangSC, PingFangSC-Medium;
}
.text-block {
flex: 1;
flex-direction: column;
margin-bottom: 32rpx;
}
.text-block-last {
margin-bottom: 0;
}
.middle-date {
font-size: 28rpx;
color: $text-base-color;
margin-bottom: 16rpx;
}
.middle-date-des {
font-size: 24rpx;
color: #999;
}
.text-block-box {
display: flex;
justify-content: space-between;
margin-bottom: 32rpx;
}
.text-block-box-last {
margin-bottom: 0;
}
.middle-date-right {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
}
.order-middle {
position: relative;
background-color: #fff;
padding-bottom: 60rpx;
margin-bottom: 16rpx;
overflow: hidden;
}
.order-middle-auto {
// height: 290rpx;
}
.empty-block {
height: 8px;
background: #f0f4f5;
}
.middle {
background-color: #fff;
border-radius: 16rpx;
padding: 48rpx;
margin-bottom: 16rpx;
}
.item-block {
overflow: hidden;
}
.item-block-label {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.item-block-name {
padding-top: 24rpx;
padding-bottom: 32rpx;
}
.icon-file {
width: 29px;
height: 35px;
}
.block-detal {
display: flex;
flex-direction: column;
}
.block-detal-item {
display: flex;
margin-bottom: 32rpx;
justify-content: space-between;
}
.block-detal-item-last {
margin-bottom: 0;
}
.detal-item-label {
color: #999;
font-size: 24rpx;
}
.detal-item-file {
display: flex;
flex-direction: column;
}
.detal-item-value {
color: #333;
font-size: 28rpx;
}
.item-value-intotal {
color: #333;
font-size: 28rpx;
font-weight: 500;
}
.item-value-intotal-num {
color: #FF1D32;
font-size: 28rpx;
font-weight: 500;
}
.btn {
width: 116rpx;
height: 54rpx;
line-height: 50rpx;
border: 1px solid $wly-primary-color;
background: #fff;
border-radius: 30rpx;
}
.btn:after {
border: 0;
}
.btn-text {
color: $wly-primary-color;
font-size: 24rpx;
}
.float-btn-block {
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
width: 714rpx;
height: 120rpx;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.float-btn {
padding: 0 20px;
height: 60rpx;
border: 0.5px solid #d8d8d9;
border-radius: 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
.float-btn__text {
font-size: 24rpx;
}
.icon-arrow {
width: 7px;
height: 4px;
margin-left: 16rpx;
margin-top: 2px;
transition-property: transform;
transition-duration: 0.15s;
transform: rotate(0deg);
}
.icon-arrow-rotate {
transform: rotate(180deg);
}
.diy-entry {
width: 160rpx;
height: 50rpx;
line-height: 46rpx;
border: 1px solid #F61D30;
background: #fff;
border-radius: 32rpx;
margin-left: 16rpx;
}
.diy-icon {
width: 24rpx;
height: 20rpx;
margin-right: 8rpx;
}
.diy-entry-text {
color: #F61D30;
font-size: 12px;
}
</style>
...@@ -371,6 +371,8 @@ ...@@ -371,6 +371,8 @@
} }
.uni-input { .uni-input {
line-height: 100%;
height: 100%;
font-size: 14px; font-size: 14px;
color: $text-base-color; color: $text-base-color;
} }
......
...@@ -567,6 +567,8 @@ ...@@ -567,6 +567,8 @@
} }
.uni-input-text { .uni-input-text {
height: 96rpx;
line-height: 96rpx;
font-size: 14px; font-size: 14px;
color: #888; color: #888;
text-overflow: ellipsis; text-overflow: ellipsis;
......
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
logOut() { logOut() {
apiLogOut().then((res) => { apiLogOut().then((res) => {
uni.setStorageSync('lifeData', {}); uni.setStorageSync('lifeData', {});
uni.redirectTo({ uni.reLaunch({
url: "/pages/login/login" url: "/pages/login/login"
}) })
}).catch(() => { }).catch(() => {
......
...@@ -100,7 +100,7 @@ class Request { ...@@ -100,7 +100,7 @@ class Request {
duration: 2000, duration: 2000,
icon: 'none' icon: 'none'
}) })
uni.navigateTo({ uni.reLaunch({
url: "/pages/login/login" url: "/pages/login/login"
}) })
}else{ }else{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment