纸板小程序:订单/送货单:列表与详情功能
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.label {
|
||||
min-width: 170rpx;
|
||||
max-width: 170rpx;
|
||||
font-size: 30rpx;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.value {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
// background: linear-gradient( 135deg, #ca7d79 0%, #c5140a 30%, #c5140a 50%, #ca7d79 100%);
|
||||
.info {
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
.info_code_status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.code {
|
||||
font-weight: bold;
|
||||
}
|
||||
.status {
|
||||
font-size: 22rpx;
|
||||
padding: 10rpx 25rpx;
|
||||
border-radius: 200px;
|
||||
}
|
||||
}
|
||||
.info_count {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
.count_item {
|
||||
text-align: center;
|
||||
.count_item_label {
|
||||
font-size: 24rpx;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.count_item_value {
|
||||
margin-top: 10rpx;
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.paper {
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 30rpx;
|
||||
background-color: #f4f4f4;
|
||||
text-align: center;
|
||||
border-radius: 200px;
|
||||
}
|
||||
.corrugatedtype {
|
||||
background-color: #f4f4f4;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.discountedPrice {
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
padding: 6rpx 20rpx;
|
||||
background-color: #c5140a20;
|
||||
color: #c5140a;
|
||||
text-align: center;
|
||||
border-radius: 200px;
|
||||
}
|
||||
.symbol {
|
||||
padding: 0 5rpx;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.number {
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
background-color: #f7f8fa;
|
||||
text-align: center;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
.asterisk {
|
||||
position: relative;
|
||||
top: 8rpx;
|
||||
}
|
||||
.remark {
|
||||
background-color: #fafafa;
|
||||
padding: 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
border-left: 6rpx solid #d9d9d9;
|
||||
border-bottom: 3rpx solid #d9d9d9;
|
||||
.label {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.radio {
|
||||
padding: 5rpx;
|
||||
// background-color: #f0f0f0;
|
||||
border-radius: 200px;
|
||||
.radio_item {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 22rpx;
|
||||
color: #8c8c8c;
|
||||
border-radius: 200px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.act_radio_item {
|
||||
color: #c5140a;
|
||||
background-color: #f8e2e0;
|
||||
}
|
||||
}
|
||||
.counts {
|
||||
justify-content: space-between;
|
||||
.count_item {
|
||||
width: 15%;
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
background-color: #fafafa;
|
||||
border-radius: 20rpx;
|
||||
.count_label {
|
||||
font-size: 22rpx;
|
||||
color: #8c8c8c;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.count_value {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.produce {
|
||||
background-color: #c5140a20;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
background-color: #f9fbfc;
|
||||
padding-top: 10rpx;
|
||||
.time_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
|
||||
import { getAppInstance } from '../../utils/app';
|
||||
import { getCardBoardOrderDetail } from '../../api/index'
|
||||
const app = getAppInstance();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
info: {},
|
||||
isCust: true
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
async onLoad(options) {
|
||||
const id = options.id;
|
||||
const res = await getCardBoardOrderDetail(id).catch(() => {});
|
||||
if (res) {
|
||||
const info = this.formatDetail(res.data.dto);
|
||||
const userInfo = wx.getStorageSync('userInfo');
|
||||
this.setData({
|
||||
isCust: userInfo.custid?true:false,
|
||||
info: info,
|
||||
statusColorMap: app.globalData.statusColorMap
|
||||
})
|
||||
console.log(res);
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化详情数据
|
||||
formatDetail(data) {
|
||||
let info = data;
|
||||
// 获取客户名称
|
||||
if (info.customercode) {
|
||||
const obj = app.globalData.customerList.find( item => item.code == info.customercode);
|
||||
info.customName = obj?obj.name:'未查询到客户';
|
||||
}
|
||||
// 获取供应商名称
|
||||
if (info.suppliercode) {
|
||||
const obj = app.globalData.supplierList.find( item => item.code == info.suppliercode);
|
||||
info.supplierName = obj?obj.name:'未查询到供应商';
|
||||
}
|
||||
// 计算最终价
|
||||
const val1 = info.squareprice?Number(info.squareprice):0;
|
||||
const val2 = info.specialprice?Number(info.specialprice):0;
|
||||
info.discountedPrice = (val1 + val2).toFixed(2);
|
||||
// 格式化压线
|
||||
if (info.line) {
|
||||
info.lineData = info.line.split('*');
|
||||
}
|
||||
// 格式化时间
|
||||
if (info.delitime) {
|
||||
info.delitime = info.delitime.split('T').join(' ');
|
||||
}
|
||||
if (info.predelitime) {
|
||||
info.predelitime = info.predelitime.split('T').join(' ');
|
||||
}
|
||||
if (info.intime) {
|
||||
info.intime = info.intime.split('T').join(' ');
|
||||
}
|
||||
return info;
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,133 @@
|
||||
<navigation-bar title="纸板订单详情" back="{{true}}" color="white" background="#c5140a"></navigation-bar>
|
||||
<view class="page-container">
|
||||
<scroll-view class="data_list" style="height: calc(100vh - 200rpx);" scroll-y>
|
||||
<view class="info">
|
||||
<view class="info_code_status">
|
||||
<view class="code">{{'单号:' + info.code}}</view>
|
||||
<view class="status" style="color: {{statusColorMap[info.productionstatus]}}; background-color: {{statusColorMap[info.productionstatus] + '20'}}">{{info.productionstatus}}</view>
|
||||
</view>
|
||||
<view class="info_count">
|
||||
<view class="count_item">
|
||||
<view class="count_item_label">总金额</view>
|
||||
<view class="count_item_value" style="color: #c5140a;">¥{{info.totalmoney}}</view>
|
||||
</view>
|
||||
<view class="count_item">
|
||||
<view class="count_item_label">总数量</view>
|
||||
<view class="count_item_value">{{info.totalnum}}</view>
|
||||
</view>
|
||||
<view class="count_item">
|
||||
<view class="count_item_label">总平方数</view>
|
||||
<view class="count_item_value">{{info.squaNum}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<t-divider custom-style="width: calc(100% + 60rpx); margin-left: -30rpx;"/>
|
||||
<view class=" flex" style="margin-top: 30rpx;">
|
||||
<view class=" label">客户</view>
|
||||
<view class="value">{{info.customName}}</view>
|
||||
</view>
|
||||
<t-divider custom-style="width: calc(100% + 60rpx); margin-left: -30rpx;"/>
|
||||
<view class=" flex">
|
||||
<view class=" label">供应商</view>
|
||||
<view class="value">{{info.supplierName}}</view>
|
||||
</view>
|
||||
<t-divider custom-style="width: calc(100% + 60rpx); margin-left: -30rpx;"/>
|
||||
<view class=" flex">
|
||||
<view class=" label">纸质 / 瓦楞</view>
|
||||
<view class="value paper">{{info.paper}}</view>
|
||||
<view class="value paper corrugatedtype">{{info.corrugatedtype}}</view>
|
||||
</view>
|
||||
<t-divider custom-style="width: calc(100% + 60rpx); margin-left: -30rpx;"/>
|
||||
<view class=" flex">
|
||||
<view class=" label">价格</view>
|
||||
<view class="value">
|
||||
平方单价 {{' ' + info.squareprice}}
|
||||
<text style="padding: 0 15rpx;">|</text>
|
||||
特价 {{' ' + info.specialprice}}
|
||||
<text class="discountedPrice">最终价 {{' ' + info.discountedPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=" flex" style="margin-top: 50rpx;">
|
||||
<view class=" label">纸度/长度</view>
|
||||
<view class="value">
|
||||
<text class="number">{{info.wide}}</text>
|
||||
<text class="symbol"> x </text>
|
||||
<text class="number">{{info.long}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<t-divider custom-style="width: calc(100% + 60rpx); margin-left: -30rpx;"/>
|
||||
<view class=" flex">
|
||||
<view class=" label" style="{{lineData && lineData.length > 3?'max-width: 80rpx;min-width: 80rpx;':''}}">压线</view>
|
||||
<view class="value">
|
||||
<text class="label line_type" wx:if="{{!info.linetype}}">{{' (开) '}}</text>
|
||||
<text class="number">{{info.lineData[0]}}</text>
|
||||
<text class="symbol asterisk" wx:if="{{info.lineData[1]}}"> * </text>
|
||||
<text class="number" wx:if="{{info.lineData[1]}}">{{info.lineData[1]}}</text>
|
||||
<text class="symbol asterisk" wx:if="{{info.lineData[2]}}"> * </text>
|
||||
<text class="number" wx:if="{{info.lineData[2]}}">{{info.lineData[2]}}</text>
|
||||
<text class="symbol asterisk" wx:if="{{info.lineData[3]}}"> * </text>
|
||||
<text class="number" wx:if="{{info.lineData[3]}}">{{info.lineData[3]}}</text>
|
||||
<text class="symbol asterisk" wx:if="{{info.lineData[4]}}"> * </text>
|
||||
<text class="number" wx:if="{{info.lineData[4]}}">{{info.lineData[4]}}</text>
|
||||
<text class=" label line_type" style="margin-left: 20rpx;font-size: 24rpx;" wx:if="{{info.linetype}}">({{info.linetype}})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="remark flex" style="margin-top: 50rpx;">
|
||||
<view class="label">外部备注</view>
|
||||
<view class="value">{{info.remark}}</view>
|
||||
</view>
|
||||
<view class="remark flex" style="margin-top: 15rpx;" wx:if="{{!isCust}}">
|
||||
<view class="label">内部备注</view>
|
||||
<view class="value">{{info.innerremark}}</view>
|
||||
</view>
|
||||
<view class="flex" style="justify-content: space-between;margin-top: 40rpx;">
|
||||
<view class="flex">
|
||||
<view class="label" style="min-width: 80rpx; max-width: 80rpx;display: flex;align-items: center;">加急</view>
|
||||
<view class="flex radio">
|
||||
<view class="radio_item act_radio_item" wx:if="{{info.isurgents}}">是</view>
|
||||
<view class="radio_item" wx:else>否</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex">
|
||||
<view class="label" style="min-width: 140rpx; max-width: 140rpx;display: flex;align-items: center;">强制保存</view>
|
||||
<view class="flex radio">
|
||||
<view class="radio_item act_radio_item" wx:if="{{info.forcesave}}">是</view>
|
||||
<view class="radio_item" wx:else>否</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex counts" style="margin-top: 40rpx;">
|
||||
<view class="count_item">
|
||||
<view class="count_value" style="color: #c5140a;">{{info.unnum}}</view>
|
||||
<view class="count_label">未入库</view>
|
||||
</view>
|
||||
<view class="count_item">
|
||||
<view class="count_value" style="color: #67C23A;">{{info.innum}}</view>
|
||||
<view class="count_label">已入库</view>
|
||||
</view>
|
||||
<view class="count_item">
|
||||
<view class="count_value" style="color: #E6A23C;">{{info.delinum}}</view>
|
||||
<view class="count_label">已送货</view>
|
||||
</view>
|
||||
<view class="count_item produce">
|
||||
<view class="count_value">{{info.productionLong}}</view>
|
||||
<view class="count_label" style="color: #c5140a;">生产长度</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time" style="margin-top: 30rpx;">
|
||||
<view class="time_item">
|
||||
<view class="time_label">🚚 送货时间</view>
|
||||
<view class="time_value">{{info.delitime}}</view>
|
||||
</view>
|
||||
<view class="time_item">
|
||||
<view class="time_label">📅 预计送货</view>
|
||||
<view class="time_value">{{info.predelitime}}</view>
|
||||
</view>
|
||||
<view class="time_item">
|
||||
<view class="time_label">⏰ 入库时间</view>
|
||||
<view class="time_value">{{info.intime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user