Commit c2efb3ce authored by xiangzj's avatar xiangzj

要货

parent 99dd3159
<template>
<view class="lists">
<view class="status_bar" :style="navHeight">
<view class="purchase-page">
<view class="status_bar" :style="navHeight"></view>
<view class="tabs">
<uni-cell v-for="(item, index) in dataList" :key="item.id" class="tab-box">
<uni-list ref="list" class="listview" :enableBackToTop="true" :scroll-y="true" @scrolltolower="loadMore()">
<!-- <uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
:display="refreshing ? 'show' : 'hide'">
<div class="refresh-view">
<image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '32px'}"
:class="{'refresh-icon-active': refreshFlag}"></image>
<uni-load-more v-if="refreshing" class="loading-icon" status="loading"
:contentText="loadingMoreText"></uni-load-more>
<text class="loading-text">{{refreshText}}</text>
</div>
</uni-refresh> -->
<view class="block-detal-item">
<text class="detal-item-label">品牌</text>
<text class="detal-item-value">尖庄2101</text>
</view>
<uni-cell v-if="isLoading || dataList.length > 4">
<view class="loading-more">
<text class="loading-more-text">{{loadingText}}</text>
</view>
</uni-cell>
</uni-list>
<no-data class="no-data" v-if="isNoData" @retry="loadMore"></no-data>
</uni-cell>
</view>
<scroll-view class="scroll-area view" :scroll-top="scrollTop" show-scrollbar='false' scroll-y="true">
<view class="main">
<view class="middle view">
<view class="text-block">
<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="bindPickerChange" :value="index"
:range="array">
<text class="uni-input">{{array[index]}}</text>
</picker>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
</view>
</view>
<view class="text-block">
<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="bindPickerChange" :value="index"
:range="array">
<text class="uni-input">{{array[index]}}</text>
</picker>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">开票客户</text>
<text class="middle-date-des">8510050100067259284</text>
</view>
<view class="text-block" @click="selectClient">
<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="bindPickerChange" :value="index"
:range="array">
<text class="uni-input">{{array[index]}}</text>
</picker>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
</view>
</view>
<view class="text-block">
<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="bindPickerChange" :value="index"
:range="array">
<text class="uni-input">{{array[index]}}</text>
</picker>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
</view>
</view>
<view class="text-block text-block-last">
<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="bindPickerChange" :value="index"
:range="array">
<text class="uni-input">{{array[index]}}</text>
</picker>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
</view>
</view>
</view>
<view class="middle view">
<view class="text-block">
<text class="middle-date">品牌</text>
<text class="middle-date-des">品牌XX</text>
</view>
<view class="text-block">
<text class="middle-date">产品</text>
<text class="middle-date-des">产品XX</text>
</view>
<view class="text-block">
<text class="middle-date">未发货件数</text>
<text class="middle-date-des">500,000.00</text>
</view>
<view class="text-block">
<text class="middle-date">传统当月计划量</text>
<text class="middle-date-des">500,000.00</text>
</view>
<view class="text-block">
<text class="middle-date">传统当月剩余量</text>
<text class="middle-date-des">500,000.00</text>
</view>
<view class="text-block">
<text class="middle-date">传统当年剩余量</text>
<text class="middle-date-des">8510050100067259284</text>
</view>
<view class="text-block text-block-last">
<text class="middle-date">本次要货件数</text>
<input class="middle-date-des" type="text" v-model="quantity" placeholder="请输入" />
</view>
</view>
<view class="middle view">
<view class="text-block">
<text class="middle-date">卖场简称</text>
<input class="middle-date-des" type="text" v-model="quantity" placeholder="请输入" />
</view>
<view class="text-block">
<text class="middle-date">卖场全称</text>
<input class="middle-date-des" type="text" v-model="quantity" placeholder="请输入" />
</view>
<view class="text-block text-block-last">
<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="bindPickerChange" :value="index"
:range="array">
<text class="uni-input">{{array[index]}}</text>
</picker>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
</view>
</view>
</view>
<view class="bottom">
<button class="btn" type="default" @tap="nextStep">
<text class="btn-text">下一步</text>
</button>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
import { mapState } from 'vuex'
import uniList from '@/components/uni-list.vue';
import uniCell from '@/components/uni-cell.vue';
import uniRefresh from '@/components/uni-refresh.vue';
import uniLoadMore from '@/components/uni-load-more.vue';
import noData from '@/components/nodata.nvue';
export default {
components: {
uniList,
uniCell,
uniRefresh,
uniLoadMore,
noData,
},
data() {
return {
array: ['2021', '2020', '2019', '2018'],
index: 0,
quantity: '',
scrollTop: 0
dataList: ['1','2','3','1','2','3','1','2'],
navigateFlag: false,
pulling: false,
refreshing: false,
refreshFlag: false,
refreshText: "",
isLoading: false,
loadingText: '加载中...',
isNoData: false,
pulling: false,
angle: 0,
loadingMoreText: {
contentdown: '',
contentrefresh: '',
contentnomore: ''
},
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": "1",
"PAGESIZE": "10",
},
loadParams: {
total: 0,
totalPage: 1,
isDone: false,
isRefresh: false
},
}
},
computed: {
...mapState(['sysinfo']),
navHeight() {
return {
'height': `${this.sysinfo.safeArea.top + 44}px`
}
},
...mapState(['sysinfo'])
},
onShow() {
uni.showToast({
title: '要货功能开发中...',
icon: 'none',
duration: 1200,
mask: true,
complete: () => {
uni.switchTab({
url: '/pages/usercenter/usercenter'
})
}
});
onReady() {
},
methods: {
selectClient() {
uni.navigateTo({
url: `/pages/select-client/select-client`
});
},
bindPickerChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.index = e.detail.value
},
nextStep() {
uni.navigateTo({
url: '/pages/purchase-receive/purchase-receive'
})
},
}
}
</script>
<style lang="scss" scoped>
.view {
.purchase-page {
flex-direction: column;
flex: 1;
}
/* #ifndef APP-PLUS */
......@@ -213,121 +117,31 @@
width: 100%;
min-height: 100%;
display: flex;
background: #fff;
background: $background-color-1;
}
.status_bar {
height: var(--status-bar-height);
background: #fff;
}
/* #endif */
.lists {
.tabs {
flex: 1;
flex-direction: column;
background: #f0f4f5;
overflow-y: scroll;
}
.scroll-area {
flex: 1;
}
.main {
margin: 0 16rpx;
flex-direction: column;
border-radius: 16rpx;
margin-top: 16rpx;
}
.middle {
background-color: #fff;
border-radius: 16rpx;
padding: 32rpx 64rpx 0 48rpx;
margin-bottom: 16rpx;
}
.text-block {
overflow: hidden;
height: 96rpx;
margin-bottom: 14rpx;
border-bottom: 1px solid #f4f5f6;
}
.text-block-last {
margin-bottom: 0;
border-bottom: 0;
}
.middle-date {
flex: 2;
font-size: 28rpx;
line-height: 96rpx;
color: #999;
margin-bottom: 8rpx;
}
.middle-date-des {
flex: 3;
font-size: 28rpx;
height: 96rpx;
line-height: 96rpx;
color: $text-base-color;
}
.picker-year {
position: relative;
align-items: center;
padding-left: 14rpx;
}
.uni-list-cell {
flex: 1;
padding: 0 7px;
width: 100%;
height: 100%;
}
.uni-list-cell-db {
.listview{
flex: 1;
background: #ffffff;
margin-top: 12px;
}
.picker-block {
.tab-box {
flex: 1;
width: 100%;
height: 100%;
}
.uni-input {
font-size: 14px;
color: $text-base-color;
}
.icon-arrow {
position: absolute;
right: 22rpx;
top: 40rpx;
width: 7px;
height: 10px;
z-index: 10;
}
.bottom {
margin-top: 68rpx;
padding: 0 16rpx;
justify-content: space-between;
}
.btn {
flex: 1;
height: 92rpx;
margin: 0 auto 48rpx;
background: $wly-primary-color;
border-radius: 46rpx;
}
.btn-text {
color: #fff;
font-size: 34rpx;
}
.btn-text-l {
color: $wly-primary-color;
}
</style>
\ No newline at end of file
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