Commit df8604ea authored by 阮藤's avatar 阮藤

建模订单页面提交

parent c21d994f
<template>
<!-- 款式委托 -->
<view class="">
<view class="u-relative l_r_t_b" :style="{ height: 'calc(100vh - ' + footerHeight + 'px)' }">
<view class="bg_img" id="header">
<u-navbar :is-back="true" :border-bottom="false" :background="background" title-color="#000" title="建模订单">
<template v-slot:right>
<view class="u-m-r-24"><u-icon name="search" size="38"></u-icon></view>
</template>
</u-navbar>
<!-- 总数 -->
<view class="u-m-30 entrus_sum u-flex justify-around text-center">
<view class="" @click="change(1)">
<view class="color_FA5353 u-font-48 hs-weight-500">{{ exceptionNum }}</view>
<view class="color_AF8D66 u-font-28 hs-weight-500">异常</view>
</view>
<view class="split_line"></view>
<view class="" @click="change(4)">
<view class="u-font-48 hs-weight-500">{{ abolishIds }}</view>
<view class="color_AF8D66 u-font-28 hs-weight-500">待寄样</view>
</view>
<view class="split_line"></view>
<view class="" @click="change(6)">
<view class="u-font-48 hs-weight-500">{{ quantityNum }}</view>
<view class="color_AF8D66 u-font-28 hs-weight-500">待确认</view>
</view>
</view>
<!-- tabs -->
<u-sticky :enable="enable" :offset-top="offsetTop" class="bd_rad" style="background: #fff;">
<u-tabs :list="list" font-size="28" :show-bar="false" active-color="#AF8D66" :current="current" @change="change"></u-tabs>
</u-sticky>
</view>
<view class="content" :style="{ bottom: footerHeight + 'px', top: headerHeight + 'px' }">
<view class="u-flex u-row-between u-p-t-24 u-p-b-24 u-p-l-30 u-p-r-30">
<view class="">全部订单:共30单</view>
<view class="">截止日期:2021-12-21</view>
</view>
<!-- list -->
<view class="u-p-t-20 u-p-l-30 u-p-r-30 u-p-b-20">
<!-- entrustmentList -->
<view v-if="!isEmpty" class="u-m-b-20 bd_rad1 u-p-30" @click="detaileCli(item)" v-for="item in entrustmentList" :key="item.id" style="background: #fff;">
<view class="u-m-b-30 u-flex justify-between">
<view class="entrus_list_title u-font-32">{{ item.materialName }}</view>
<view class="u-font-28">{{ item.status | filterStatus }}</view>
</view>
<view class="dis_flex">
<image class="hs-img-160" :src="`${item.fileCode}`" mode=""></image>
<view class="u-m-l-20">
<view class="u-m-b-10">
<span class="color_00004">发布日期</span>
<span class="u-m-l-20">{{ item.releaseDate }}</span>
</view>
<view class="">
<span class="color_00004">截止日期</span>
<span class="u-m-l-20">{{ item.expirationDate }}</span>
</view>
</view>
</view>
<view class="u-m-t-30 bd_split_line"></view>
<view class="text-right">
<view v-if="item.status == 7" class="u-m-t-30 u-m-l-10 btn">寄样</view>
<view v-if="item.status == 6" class="u-m-t-30 u-m-l-10 btn">撤回</view>
<view v-if="item.status == 4" @click.stop="removeCli(item)" class="u-m-t-30 u-m-l-10 btn">删除</view>
<view v-if="item.status == 4" @click.stop="dateilEnt(item, '编辑')" class="u-m-t-30 u-m-l-10 btn">编辑</view>
<view v-if="item.status == 5" @click.stop="cancelCli(item)" class="u-m-t-30 u-m-l-10 btn">取消</view>
<view v-if="item.status == 3 || item.status == 9" class="u-m-t-30 u-m-l-10 btn">选款</view>
<view v-if="item.status == 2" class="u-m-t-30 u-m-l-10 btn">催单</view>
<view v-if="item.status == 1 || item.status == 5 || item.status == 6" @click.stop="dateilEnt(item, '拆单')" class="u-m-t-30 u-m-l-10 btn">拆单</view>
</view>
</view>
<!-- 加载更多 -->
<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
<!-- 缺省页 -->
<u-empty v-if="isEmpty" tipText="没有数据"></u-empty>
</view>
</view>
</view>
<view class="footer" id="footer">
<view class="footer-btn">
<view class="custom-style-round-circle custom-style-btn custom-style">
<view class="custom-style-left save">新面料建模</view>
<view class="custom-style-right submit">已有面料建模</view>
</view>
</view>
</view>
<u-modal v-model="modal.show" :show-cancel-button="true" :content="modal.title" @cancel="modal.show = false" @confirm="confirm"></u-modal>
<u-toast ref="uToast" />
</view>
</template>
<script>
import dom from '@/mixins/dom.js';
export default {
mixins: [dom],
data() {
return {
loadStatus: 'loadmore',
offsetTop: 0,
enable: true,
statusBtn: true,
timeOut: null,
background: { backgroundColor: 'rgba(245,245,245,0)' },
modal: {
show: false,
title: ''
},
quantityNum: 0,
exceptionNum: 0,
abolishIds: 0,
pages: {
materialName: '',
size: 5
},
entrustmentId: '',
current: 0,
entrustmentList: [],
total: 0,
list: [
{
name: '全部'
},
{
name: '异常'
},
{
name: '待发布'
},
{
name: '待接单'
},
{
name: '待寄样'
},
{
name: '建模中'
},
{
name: '待确认'
},
{
name: '完成'
}
]
};
},
onLoad() {
this.entrustmentPage();
this.toBeSelectedQuantity();
this.orderTicketExceptionNum();
this.noSampleOrder();
},
onShow() {
this.enable = true;
// #ifdef APP-PLUS
this.setOffestTop();
// #endif
},
onHide() {
this.enable = false;
},
onPullDownRefresh() {
this.pages.size = 5;
this.entrustmentPage();
this.toBeSelectedQuantity();
this.orderTicketExceptionNum();
this.noSampleOrder();
},
// 上拉加载更多
onReachBottom() {
if (this.total > this.entrustmentList.length) {
this.pages.size = this.pages.size + 5;
this.entrustmentPage();
}
},
onPageScroll(object) {
this.statusBtn = false;
if (this.timeOut) {
clearTimeout(this.timeOut);
}
this.timeOut = setTimeout(() => {
this.statusBtn = true;
}, 1000);
let a = JSON.stringify(object);
if (object.scrollTop >= this.headerHeight) {
this.background.backgroundColor = 'rgba(245,245,245,1)';
} else {
this.background.backgroundColor = 'rgba(245,245,245,0)';
}
},
computed: {
isEmpty() {
return this.entrustmentList.length === 0 ? true : false;
}
},
filters: {
filterStatus(v) {
switch (v) {
case 1:
return '无人接单';
case 2:
return '延误';
case 3:
return '已待定超期';
case 4:
return '待发布';
case 5:
return '审核中';
case 6:
return '待接单';
case 7:
return '已接单';
case 8:
return '已寄样';
case 9:
return '待选款';
case 10:
return '已结束';
default:
return '';
}
}
},
methods: {
// 适配吸顶tab高度
setOffestTop() {
let systemInfo = uni.getSystemInfoSync();
let topPx = systemInfo.statusBarHeight + 44; // 顶部状态栏+沉浸式自定义顶部导航
console.log(systemInfo, topPx);
this.offsetTop = topPx / (uni.upx2px(topPx) / topPx); // px转rpx
},
// 选款总数
toBeSelectedQuantity() {
this.$http('plm.toBeSelectedQuantity', {}).then(res => {
let { code, data } = res;
if (code == 200) {
this.quantityNum = data;
}
});
},
// 异常总数
orderTicketExceptionNum() {
this.$http('plm.orderTicketExceptionNum', {}).then(res => {
let { code, data } = res;
if (code == 200) {
this.exceptionNum = data;
}
});
},
// 寄样单总数
noSampleOrder() {
this.$http('orderTicket.noSampleOrder', {}).then(res => {
let { code, data } = res;
if (code == 200) {
this.abolishIds = data.length;
}
});
},
entrustmentPage() {
this.loadStatus = 'loading';
let { materialName, size } = this.pages;
this.$http(
'orderTicket.entrustmentPage',
{
materialName: materialName ? materialName : null,
status: this.current,
size: size
},
'加载中...'
)
.then(res => {
let { code, data } = res;
if (code === 200) {
this.entrustmentList = data.data || [];
this.total = data.total || 0;
this.loadStatus = this.entrustmentList.length < data.total ? 'loadmore' : 'nomore';
this.$refs.uToast.show({
title: '操作成功'
});
}
uni.stopPullDownRefresh();
})
.catch(err => {
this.$refs.uToast.show({
title: '操作失败'
});
uni.stopPullDownRefresh();
});
},
change(index) {
this.current = index;
this.pages.size = 5;
this.entrustmentPage();
},
detaileCli(item) {
this.$Router.push('/pages/designCommissioned/item?id=' + item.id);
},
// 删除操作
removeCli(item) {
this.modal.title = '删除后不可恢复,确定删除吗?';
this.modal.show = true;
this.entrustmentId = item.id;
},
confirm() {
this.delEntrustment();
},
delEntrustment() {
this.$http('orderTicket.del', [this.entrustmentId]).then(res => {
let { code, data } = res;
if (code === 200) {
this.pages.size = 5;
this.entrustmentList = [];
this.entrustmentPage();
this.$refs.uToast.show({
title: '删除成功'
});
}
});
},
// 取消发布
cancelCli(item) {
this.$http('orderTicket.abolishByIds', [item.id]).then(res => {
let { code, data } = res;
if (code === 200) {
this.pages.size = 5;
this.entrustmentList = [];
this.entrustmentPage();
this.$refs.uToast.show({
title: '取消成功'
});
}
});
},
// 编辑 拆单
dateilEnt(item, val) {
if (val == '拆单') {
this.$Router.push('/pages/designCommissioned/splitItem?id=' + item.id);
} else if (val == '编辑') {
// &id=${item.id}
uni.setStorageSync('_item', item);
this.$Router.push(`/pages/designCommissioned/addItem?id=${item.id}&status=1`);
} else if (val == '选款') {
// this.$Router.push(`/pages/designCommissioned/addItem?id=${item.id}&status=2`);
} else if (val == '寄样') {
this.$Router.push(`/pages/designCommissioned/addItem?id=${item.id}&status=3`);
} else {
this.$Router.push('/pages/designCommissioned/listSelectToAdd');
}
}
}
};
</script>
<style>
.color_AF8D66 {
color: #af8d66;
}
.color_FA5353 {
color: #fa5353;
}
.color_00004 {
color: rgba(0, 0, 0, 0.4);
}
.dis_flex {
display: flex;
}
</style>
<style lang="scss" scoped>
@mixin vue-flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: $direction;
/* #endif */
}
.l_r_t_b {
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.custom-style {
color: #fff;
height: 88rpx;
line-height: 88rpx;
@include vue-flex;
&-btn {
overflow: hidden;
}
&-round-circle {
border-radius: 100rpx;
}
.custom-style-left {
// width: 240rpx;
flex: 1;
background: #d6d6d6;
text-align: center;
}
.custom-style-right {
flex: 1;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
.save {
font-size: 34rpx;
color: #000000;
}
.submit {
font-weight: 500;
font-size: 34rpx;
.title {
}
.desc {
font-size: 20rpx;
.color {
color: #dda973;
}
}
}
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
z-index: 998;
background: #fff;
box-shadow: 0px -4rpx 6rpx 0px rgba(178, 182, 214, 0.1);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.footer-btn {
padding: 20rpx 60rpx;
}
}
.bg_img {
width: 100%;
background: url(../../static/images/home/entrustment@2x.png) no-repeat;
background-size: 100% 100%;
}
.content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
}
.entrus_sum {
height: 164rpx;
border-radius: 20rpx;
background: rgba(255, 255, 255, 0.8);
line-height: 1.5;
}
.bd_rad {
border-radius: 10rpx 10rpx 0 0;
overflow: hidden;
}
.bd_rad1 {
border-radius: 10rpx;
overflow: hidden;
}
.entrus_list_title {
&::before {
content: '';
display: inline-block;
width: 8rpx;
height: 32rpx;
background: #af8d66;
border-radius: 6rpx;
vertical-align: middle;
margin-right: 10rpx;
}
}
.btn {
width: 160rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
border: 1px solid #333333;
border-radius: 44rpx;
display: inline-block;
}
.split_line {
height: 70rpx;
line-height: 70rpx;
width: 1rpx;
background: rgba(68, 53, 37, 0.2);
}
.bd_split_line {
width: 100%;
border-top: 1px solid #f6f6f6;
padding: 0 20rpx;
position: relative;
&::before {
content: ' ';
position: absolute;
left: -45rpx;
top: -15rpx;
display: block;
width: 30rpx;
height: 30rpx;
background: #f6f6f6;
border-radius: 100rpx;
}
&::after {
content: ' ';
position: absolute;
right: -45rpx;
top: -15rpx;
display: block;
width: 30rpx;
height: 30rpx;
background: #f6f6f6;
border-radius: 100rpx;
}
}
</style>
......@@ -8,7 +8,7 @@
<view class="u-m-r-30">
<u-icon :name="index === selectedIndex ? 'checkmark-circle-fill' : 'checkmark-circle'" color="#000" size="40" @click="triggerSelectItem(index)" />
</view>
<view class="ab">租户{{ index }}</view>
<view :class="{ tenant_list: true, border_000: index === selectedIndex }">租户{{ index }}</view>
</view>
</view>
<!-- 底部按钮 确定-->
......@@ -120,7 +120,7 @@ $main-color: #fff;
color: $h-color;
background-color: whitesmoke;
}
.ab {
.tenant_list {
flex: 1;
height: 160rpx;
line-height: 160rpx;
......@@ -128,6 +128,7 @@ $main-color: #fff;
background: url(../../static/images/home/tenSelet@2x.png) no-repeat;
background-size: 100% 100%;
border-radius: 16rpx;
border: 1px solid #979797;
}
.bg-fff {
background: $main-color;
......@@ -144,6 +145,9 @@ $main-color: #fff;
border: 1px solid #000;
}
}
.border_000 {
border: 1px solid #000;
}
.custom-style {
color: #fff;
background: #000;
......
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