aiot-app/pages/saleManage/saleOrder/components/drawer.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" title="订单详情"
			@clickLeft="back">
		</uni-nav-bar>
		<myCard :item="form" :columns="columns"></myCard>
		<view class="item">
			<view class="card">

				<view>
					<view class="lable">订单数量</view>
					<view>{{orderNoCountData.saleOrderNumber}}</view>
				</view>
				<view>
					<view class="lable">订单总金额</view>
					<view>{{orderNoCountData.totalAmountSaleOrder}}</view>
				</view>
				<view>
					<view class="lable">应收款</view>
					<view>{{orderNoCountData.receivable}}</view>
				</view>
				<view>
					<view class="lable">
						发货数量</view>
					<view>{{orderNoCountData.sendNumber}}</view>
				</view>
				<view>
					<view class="lable">
						退货数量</view>
					<view>{{orderNoCountData.returnNumber}}</view>
				</view>
				<view>
					<view class="lable">
						退货金额</view>
					<view>{{orderNoCountData.returnAmount}}</view>
				</view>
			</view>
		</view>

		<u-sticky bgColor="#fff" :customNavHeight="88">
			<u-tabs :list="list1" @change="change" :current="current"></u-tabs>
		</u-sticky>
		<info ref="infoRef" :isDrawer="true" v-show="current==0"></info>
		<produceList v-show="current==1" ref="produceListRef" :pricingWay="form.pricingWay"
			:contractId="form.contractId" :columns="produceLisTcolumns">
		</produceList>





	</view>
</template>

<script>
	import produceList from "../../components/produceList.vue"
	import info from "./info.vue"
	import {
		getSaleOrderDetail,
		queryOrderNoCount
	} from '@/api/saleManage/saleorder'

	import myCard from '../../components/myCard.vue'
	export default {
		components: {
			produceList,
			info,
			myCard
		},
		data() {
			return {
				columns: [
					[{
						label: '编码：',
						prop: 'orderNo',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '产品名称：',
						prop: 'productNames',
						className: 'perce100',
					}],
					[{
						label: '项目名称：',
						prop: 'projectName'
					}, {
						label: '客户名称：',
						prop: 'partaName'
					}],
					[{
						label: '合同名称：',
						prop: 'contractName',
					}, {
						label: '销售类型：',
						prop: 'saleTypeName',
					}],
				],
				produceLisTcolumns: [
					[{
						label: '产品名称：',
						prop: 'productName',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '编码：',
						prop: 'productCode'
					}, {
						label: '牌号：',
						prop: 'productBrand'
					}],
					[{
						label: '规格：',
						prop: 'specification'
					}, {
						label: '型号：',
						prop: 'modelType'
					}],
					[{
						label: '数量：',
						prop: 'totalCount',
						slot: 'totalCount',
					}, {
						label: '计量单位：',
						prop: 'measuringUnit',
					}],


					[{
						label: '单价：',
						prop: 'singlePrice',
						slot: 'singlePrice',
					}, {
						label: '折让单价：',
						formatter: (item) => {
							return (item.discountSinglePrice ?
								Number(item.discountSinglePrice).toFixed(2) :
								'') + '元';
						}
					}],
					[{
						label: '合计：',
						prop: 'totalPrice',
						formatter: (item) => {
							return (item.totalPrice || '') + '元';
						}
					}, {
						label: '折让合计：',
						formatter: (item) => {
							return (item.discountTotalPrice ?
								Number(item.discountTotalPrice).toFixed(2) :
								'') + '元';
						}
					}],
					[{
						label: '客户代号：',
						prop: 'customerMark',
						slot: 'customerMark',
					}],
					[{
						label: '单重：',
						prop: 'singleWeight',
						slot: 'singleWeight',
					}, {
						label: '总重：',
						prop: 'totalWeight',
					}],
					[{
						label: '客户期望交期：',
						prop: 'customerExpectDeliveryDeadline',
						slot: 'customerExpectDeliveryDeadline',
						className: 'perce100',
					}],
					[{
						label: '质保期：',
						prop: 'guaranteePeriod',
						slot: 'guaranteePeriod',
					}, {
						label: '单位：',
						prop: 'guaranteePeriodUnitCode',
						slot: 'guaranteePeriodUnitCode',
					}],
					[{
						label: '操作：',
						prop: 'action',
						type: 'action',
						className: 'perce100',
					}],
				],
				current: 0,
				list1: [{
					name: '详细信息',
				}, {
					name: '产品清单',
				}],
				form: {
					id: '',
					contractId: '',
					orderFiles: [],
					contractName: '',
					salesDeptName: '',
					pricingWay: 1,
					payAmount: '',
					generatePurchase: 0,
					generateProduce: 0,
					generateProject: 0,
					projectName: '',
					projectId: '',
					receiveAddress: '',
					remark: '',
					saleType: '',
					saleTypeName: '',
					totalAmount: '',
					settlementMode: '4',
					settlementModeName: '分期付款',
					partaUnifiedSocialCreditCode: '',
					partbUnifiedSocialCreditCode: '',
					partaAddress: '',
					partaEmail: '',
					partaFax: '',
					partaId: '',
					partaLinkId: '',
					partaLinkName: '',
					partaName: '',
					partaTel: '',
					partbAddress: '',
					partbEmail: '',
					partbFax: '',
					partbId: '',
					partbLinkId: '',
					partbLinkName: '',
					partbName: '',
					partbTel: '',
					needProduce: 1
				},
				orderNoCountData: {
					saleOrderNumber: '', //订单数量
					totalAmountSaleOrder: '', //订单总金额
					sendNumber: '', //发货数量
					receivable: '', //应收款
					returnNumber: '', //退货数量
					returnAmount: '' //退货金额
				}
			}
		},

		onLoad(data) {

			getSaleOrderDetail(data.id).then(async res => {
				this.form = res
				this.form.contractId = this.form.contractId || '11'
				this.$nextTick(() => {
					this.$refs.infoRef.init(res)
					this.$refs.produceListRef.init(res.productList)
				})
				this.orderNoCountData = await queryOrderNoCount(res.orderNo)
			})

		},

		methods: {
			change(data) {
				this.current = data.index
				// console.log(data,'current')

			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 16rpx 32rpx;

		.card {
			padding: 16rpx 32rpx;
			margin-top: 32rpx;
			display: flex;
			flex-wrap: wrap;
			height: 200rpx;
			border-radius: 12rpx;
			border: 1px solid #cbcbcb;

			>view {
				font-size: 26rpx;
				width: 33%;

				.lable {
					color: #999;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>