Skip to content

W
wly-APP
Commit ddb48118 authored by chuan.liu's avatar chuan.liu
Browse files
Options

新增生产计划提交界面

parent 453719a0
Hide whitespace changes
Inline Side-by-side
Showing with 468 additions and 34 deletions
manifest.json
View file @ ddb48118
......@@ -10,6 +10,7 @@
/* 5+App特有相关 */
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"nvueStyleCompiler" : "uni-app",
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
......
pages/produce-order/produce-order.nvue
View file @ ddb48118
<template>
<view class="page-news">
<view class="status_bar" :style="navHeight"></view>
<view class="conditon-block">
<uni-collapse>
<uni-collapse-item titleBorder="none">
<template v-slot:title>
<uni-list>
<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
</uni-list-item>
</uni-list>
</template>
<view class="content">
<text class="text">折叠内容主体，可自定义内容及样式</text>
</view>
</uni-collapse-item>
</uni-collapse>
<view class="conditon-block" :class="{'conditon-block-auto':ishowDetail}">
<view class="filter-title">
<button type="default" class="filter-btn filter-btn-active">一周内</button>
<button type="default" @click="handleFilter(item)" :class="{'filter-btn-active':item === filterActiveIndex}" class="filter-btn" v-for="item in 3" :key='item'>{{item}}月内</button>
<image @click="handleShowDetail" class="icon-arrow" :class="{'icon-arrow-rotate':ishowDetail}"
src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
</view>
<view class="filter-content">
<button type="default" @click="handleFilter(item+3)" class="filter-btn" :class="{'filter-btn-active':item+3 === filterActiveIndex}" v-for="item in 9" :key='item'>{{item+3}}月内</button>
</view>
</view>
<uni-list ref="list" class="listview" :enableBackToTop="true" :scroll-y="true" @scrolltolower="loadMore()">
<uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
......@@ -92,12 +88,9 @@
contentdown: '',
contentrefresh: '',
contentnomore: ''
},
extraIcon: {
color: '#4cd964',
size: '26',
type: 'image'
},
},
ishowDetail:false,
filterActiveIndex:0,
refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg=="
}
},
......@@ -108,6 +101,12 @@
}
},
...mapState(['sysinfo'])
},
onNavigationBarButtonTap(e){
console.log('onNavigationBarButtonTap：',e);
uni.navigateTo({
url: `/pages/produce-order/produce-plan`
});
},
created() {
this.pullTimer = null;
......@@ -246,6 +245,12 @@
}
return (s4() + s4() + "-" + s4() + "-4" + s4().substr(0, 3) + "-" + s4() + "-" + s4() + s4() + s4())
.toUpperCase();
},
handleShowDetail() {
this.ishowDetail = !this.ishowDetail
},
handleFilter(item){
this.filterActiveIndex = item
}
}
}
......@@ -289,7 +294,7 @@
.listview {
position: absolute;
left: 0;
top: 216rpx;
top: 216rpx;
right: 0;
bottom: 0;
background: #f0f4f5;
......@@ -303,7 +308,68 @@
}
.conditon-block{
height: 128rpx;
position: absolute;
left: 0;
top: 88rpx;
right: 0;
bottom: 0;
z-index:10;
height: 124rpx;
overflow:hidden;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 40rpx 32rpx 0 16rpx;
}
.conditon-block-auto{
height: auto;
overflow:auto;
max-height:230px;
}
.icon-arrow {
width: 28rpx;
height: 16rpx;
margin-left: 16rpx;
margin-top: 24rpx;
transition-property: transform;
transition-duration: 0.15s;
transform: rotate(0deg);
}
.icon-arrow-rotate {
transform: rotate(180deg);
}
.filter-btn{
flex: 0 0 148rpx;
height: 68rpx;
line-height: 68rpx;
background: #f8f8f8;
border-radius: 16rpx;
color: #8e8e8e;
font-size: 24rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
border: 2rpx solid #f8f8f8;
}
.filter-btn-active{
background: #f61d30;
color: #fff;
border: 2rpx solid #f61d30;
box-shadow: 0px 4rpx 12rpx 0px rgba(255,29,50,0.56);
}
.filter-content{
display: flex;
flex-wrap: wrap;
}
.uni-collapse-item{
flex-direction: column;
}
.refresh {
......
pages/produce-order/produce-plan.nvue
View file @ ddb48118
<template>
<div>
</div>
</template>
<script>
export default {
<template>
<view class="lists">
<view class="status_bar" :style="navHeight"></view>
<view class="middle upload summary">
<view class="summary-line">
<view class="summary-block">
<text class="upload-text">预约</text>
</view>
<switch class="summary-num" color='red' :checked="isChecked" @change="switchChange" />
</view>
<view class="summary-line summary-line-last">
<text>材料保证金</text>
<text>0.00</text>
</view>
</view>
<view class="planout-block">
<text class="planout-block-title">生产产品</text>
<image class="planout-block-icon" src="@/static/image/shop_more@3x.png" mode="aspectFit"></image>
</view>
<uni-swipe-action class="planout-block-lists">
<uni-swipe-action-item v-for="item in 2" :key='item'>
<view class="middle view planout-block-item">
<view class="text-block title-first">
<text class="middle-date title-first__text">1</text>
</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">
<text class="middle-date-des">请选择</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">数量（件）</text>
<input class="middle-date-des" type="text" value="" placeholder="请填写" />
</view>
<view class="text-block">
<text class="middle-date">期望交货日期</text>
<text class="middle-date-des">789</text>
</view>
<view class="text-block text-block-last">
<text class="middle-date">备注</text>
<text class="middle-date-des">789*6*4</text>
</view>
</view>
<template v-slot:right>
<view class="swipe-right-block" @click="handleDel"><text class="swipe-right-block__text">删除</text>
</view>
</template>
</uni-swipe-action-item>
</uni-swipe-action>
<uni-popup ref="popup" background-color="#fff" @change="change" :mask-click='false'>
<view class="popup-content">
<view class="popup-content-head">
<image class="popup-content-head__icon" src="@/static/image/icon_plan@3x.png" mode=""></image>
</view>
<view class="popup-content-content">
<text class="popup-content-content__title">提交成功</text>
<text class="popup-content-content__title2">生产计划编号：{{ orderNo }}</text>
<text class="popup-content-content__title2">生产计划单号：{{ orderNo }}</text>
</view>
<view class="popup-content-foot">
<text class="popup-content-foot__btn" @click="fnBackHome()">继续添加</text>
<text class="popup-content-foot__btn popup-content-foot__sure"
@click="fnCheckOrderByNo()">查看计划</text>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
data() {
return {
isChecked:false,
orderNo: '',
}
},
computed: {
navHeight() {
return {
'height': `${this.sysinfo.safeArea.top + 44}px`
}
},
...mapState(['sysinfo'])
},
onNavigationBarButtonTap(e){
this.$refs.popup.open('center')
},
methods: {
change(e) {
console.log('当前模式：' + e.type + ',状态：' + e.show);
},
fnBackHome() {
this.$refs.popup.close()
},
fnCheckOrderByNo() {
this.$refs.popup.close()
uni.navigateTo({
url: `/pages/produce-order/produce-order`
})
},
handleDel() {
console.log(1)
},
preStep() {
uni.switchTab({
url: `/pages/go-order/go-order`
})
},
switchChange(e) {
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
this.isChecked = e.detail.value
},
}
}
</script>
<style lang="scss" scoped>
.view {
flex-direction: column;
}
/* #ifndef APP-PLUS */
page {
width: 100%;
min-height: 100%;
display: flex;
background: $background-color-1;
}
.status_bar {
height: var(--status-bar-height);
}
/* #endif */
.lists {
flex: 1;
position: relative;
flex-direction: column;
padding: 32rpx 16rpx 0;
overflow-y: scroll;
}
.middle {
background-color: #fff;
border-radius: 16rpx;
padding: 32rpx 64rpx 40rpx 48rpx;
}
.summary-block {
display: flex;
align-items: center;
}
.text-block {
over-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: #333;
margin-bottom: 8rpx;
}
.middle-date-des {
flex: 3;
font-size: 28rpx;
line-height: 96rpx;
height: 96rpx;
color: #888;
}
.picker-year {
position: relative;
border-radius: 4px;
align-items: center;
}
.title-first {
border-bottom: 0;
margin-bottom: 24rpx;
}
.title-first__text {
font-size: 28rpx;
color: #333333;
font-weight: 600;
}
.uni-list-cell {
flex: 1;
}
.uni-list-cell-db {
flex: 1;
}
.picker-block {
flex: 1;
}
.icon-arrow {
position: absolute;
right: 0;
top: 16px;
width: 12rpx;
height: 20rpx;
z-index: 10;
}
.upload-text {
flex: 2;
color: #333;
font-size: 28rpx;
}
.summary {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-bottom: 32rpx;
padding: 32rpx 48rpx;
}
.summary-line {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.summary-line-last{
margin-top: 12rpx;
padding-right: 8rpx;
}
.planout-block-lists {
display: flex;
flex-direction: column;
}
.uni-swipe {
flex: 1;
margin-bottom: 26rpx;
}
/deep/ .uni-swipe_box {
flex: 1;
}
.swipe-right-block {
width: 152rpx;
background: linear-gradient(90deg, #fb4d61, #ff0f00 100%);
border-radius: 0px 8px 8px 0px;
justify-content: center;
}
.swipe-right-block__text {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 34rpx;
font-weight: 500;
}
.planout-block {
display: flex;
justify-content: space-between;
height: 40rpx;
margin-top: 48rpx;
margin-bottom: 32rpx;
padding: 0 24rpx;
}
.planout-block-title {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.planout-block-icon {
width: 32rpx;
height: 40rpx;
}
.planout-block-item {
flex: 1;
}
/deep/ .uni-popup__wrapper {
border-radius: 20rpx;
}
.popup-content {
display: flex;
flex-direction: column;
align-items: center;
width: 580rpx;
height: 408rpx;
background: #ffffff;
border-radius: 20rpx;
}
.popup-content-head {
margin-top: 56rpx;
margin-bottom: 16rpx;
}
.popup-content-head__icon {
width: 80rpx;
height: 80rpx;
}
.popup-content-content {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 52rpx;
}
.popup-content-content__title {
font-size: 32rpx;
color: #444;
font-weight: 500;
margin-bottom: 8rpx;
}
.popup-content-content__title2 {
color: #999999;
font-size: 24rpx;
}
.popup-content-foot {}
.popup-content-foot__btn {
width: 152rpx;
height: 60rpx;
line-height: 60rpx;
background: #ffedee;
text-align: center;
color: #ff0f00;
font-weight: 500;
border-radius: 32rpx;
}
</script>
<style>
.popup-content-foot__sure {
margin-left: 40rpx;
color: #fff;
background: #ff1d32;
border: 1px solid #ff1d32;
}
</style>
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