chenrui 3 роки тому
батько
коміт
8ce9c2c3b7

+ 11 - 0
api/sales.js

@@ -43,6 +43,17 @@ export const salesDel = (params) => {
     method: 'post'
   })
 }
+//  销售详情 列表  分页
+export const salesDetailList = (params) => {
+  const url = `salesDetail/queryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
 
 // 产品报价列表
 export const dealerProductList = (params) => {

+ 112 - 0
pages/sales/discountModal.vue

@@ -0,0 +1,112 @@
+<template>
+	<u-mask class="discountModal" :show="isShow" :mask-click-able="false">
+		<view class="discount-con">
+			<view class="discount-main">
+				<view class="text-c">请输入折扣金额</view>
+				<view class="discount-price text-c">
+					<u-input class="price" v-model="discountAmount" @input="numberToFixed" :clearable="false" type="number" style="display: inline-block;vertical-align: middle;" />元
+				</view>
+			</view>
+			<view class="discount-footer">
+				<view class="button-cancel" @click="isShow=false">取消</view>
+				<view class="button-confirm" @click="handleConfirm">确定</view>
+			</view>
+		</view>
+	</u-mask>
+</template>
+
+<script>
+	export default {
+		props: {
+			openModal: { //  弹框显示状态
+				type: Boolean,
+				default: false
+			},
+			infoData: {
+				tyoe: Object,
+				default: ()=>{
+					return null
+				}
+			}
+		},
+		data() {
+			return {
+				isShow: this.openModal, //  是否打开弹框
+				discountAmount: ''
+			}
+		},
+		methods: {
+			// 确认
+			handleConfirm(){
+				this.$emit('confirm', this.printType)
+			},
+			numberToFixed(){
+				if(this.discountAmount){
+					this.discountAmount = Math.floor(this.discountAmount * 100) / 100  // 保留两位小数,不四舍五入
+					if(this.discountAmount < 0){
+						this.discountAmount = Math.abs(this.discountAmount)  // 金额为正数
+					}
+				}
+			}
+		},
+		watch: {
+			//  父页面传过来的弹框状态
+			openModal (newValue, oldValue) {
+				this.isShow = newValue
+			},
+			//  重定义的弹框状态
+			isShow (newValue, oldValue) {
+			  if (!newValue) {
+			    this.$emit('close')
+			  }
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.discountModal{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		.text-c{
+			text-align: center;
+		}
+		.discount-con{
+			width: 78%;
+			margin: 45% auto 0;
+			background-color: #fff;
+			border-radius: 24upx;
+			.discount-main{
+				padding: 20upx 20upx;
+				.discount-price{
+					margin: 10upx 0;
+					.price{
+						border-bottom: 1upx solid #e4e7ed;
+					}
+				}
+			}
+			.discount-footer{
+				font-size: 30upx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				text-align: center;
+				border-top: 1upx solid #E5E5E5;
+				.button-cancel{
+					color: #999;
+					border-right: 1upx solid #E5E5E5;
+					flex-grow: 1;
+					padding: 20upx 0;
+				}
+				.button-confirm{
+					color: #2A86F4;
+					flex-grow: 1;
+					padding: 20upx 0;
+				}
+			}
+		}
+	}
+</style>

+ 222 - 20
pages/sales/edit.vue

@@ -2,59 +2,185 @@
 	<view class="sales-edit-wrap">
 		<!-- 基础信息 -->
 		<view class="sales-info-con">
-			<view class="sales-info-header flex align_center justify_between">
-				<view>
-					<view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>基础信息
-				</view>
-				<view class="sales-info-all" @click="getInfo">
-					查看全部<u-icon name="arrow-right" color="#666" size="28"></u-icon>
-				</view>
-			</view>
+			<u-section @click="infoModal=true" title="基础信息" sub-title="查看全部" :line-color="$config('primaryColor')"></u-section>
 			<view class="info-item-box">
 				<text class="info-item-tit color_6">销售单号</text>
-				<text>XS321132312</text>
+				<text>{{pageData.data && pageData.data.salesBillNo || '--'}}</text>
 			</view>
 			<view class="info-item-box">
 				<text class="info-item-tit color_6">客户名称</text>
-				<text>XS321132312</text>
+				<text>{{pageData.data && pageData.data.buyerName || '--'}}</text>
 			</view>
 		</view>
 		<!-- 产品列表 -->
 		<view class="sales-product-con">
-			<view class="sales-product-header flex align_center justify_between">
-				<view>
-					<view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>产品列表
-				</view>
-				<view class="sales-product-operation">
-					<u-button @click="" size="mini" :hair-line="false" plain type="primary" hover-class="none">打折</u-button>
-					<u-button @click="" size="mini" :hair-line="false" plain type="primary" hover-class="none">选择产品</u-button>
+			<!-- 标题 -->
+			<view class="sales-product-header border-b flex align_center justify_between">
+				<u-section title="产品列表" :line-color="$config('primaryColor')">
+					<template slot="right">
+						<view class="sales-product-operation">
+							<u-button @click="discountModal=true" size="mini" :hair-line="false" plain type="primary" hover-class="none">打折</u-button>
+							<u-button @click="" size="mini" :hair-line="false" plain type="primary" hover-class="none">选择产品</u-button>
+						</view>
+					</template>
+				</u-section>
+			</view>
+			<!-- 合计 -->
+			<view ref="salesTotal" class="sales-total-box border-b font_13 flex justify_between">
+				<view class="sales-total-con flex_1" :style="{height: toggle ? 'auto' : '44upx'}">
+					<view>
+						总款数:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{pageData.data && (pageData.data.totalCategory || pageData.data.totalCategory==0) ? toThousands(pageData.data.totalCategory) : '--'}}</text>;总数量:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{pageData.data && (pageData.data.totalQty || pageData.data.totalQty==0) ? toThousands(pageData.data.totalQty) : '--'}}</text>;总售价:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{pageData.data && (pageData.data.totalAmount || pageData.data.totalAmount==0) ? toThousands(pageData.data.totalAmount, 2) : '--'}}</text>;
+					</view>
+					<view>
+						折扣金额:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{pageData.data && (pageData.data.discountAmount || pageData.data.discountAmount==0) ? toThousands(pageData.data.discountAmount, 2) : '--'}}</text>;折扣:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{pageData.data && (pageData.data.discountRate || pageData.data.discountRate==0) ? pageData.data.discountRate+'%' : '--'}}</text>;折后总售价:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{pageData.data && (pageData.data.discountedAmount || pageData.data.discountedAmount==0) ? toThousands(pageData.data.discountedAmount, 2) : '--'}}</text>;
+					</view>
+					<view>
+						急件总款数:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{pageData.data && (pageData.data.oosCategory || pageData.data.oosCategory==0) ? toThousands(pageData.data.oosCategory) : '--'}}</text>;急件总数量:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{pageData.data && (pageData.data.oosQty || pageData.data.oosQty==0) ? toThousands(pageData.data.oosQty) : '--'}}</text>;赠品总数量:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{pageData.data && (pageData.data.giftQty || pageData.data.giftQty==0) ? toThousands(pageData.data.giftQty) : '--'}}</text>;
+					</view>
+					<view>
+						总成本:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{pageData.data && (pageData.data.totalCost || pageData.data.totalCost==0) ? toThousands(pageData.data.totalCost, 2) : '--'}}</text>;总毛利:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{pageData.data && (pageData.data.grossProfit || pageData.data.grossProfit==0) ? toThousands(pageData.data.grossProfit, 2) : '--'}}</text>;
+					</view>
 				</view>
+				<text class="sales-total-btn" @click="toggle=!toggle" :style="{color: $config('primaryColor')}">{{ toggle ? '收起' : '展开' }}</text>
+			</view>
+			<!-- 产品列表 -->
+			<view class="sales-list-box">
+				<scroll-view class="sales-list-con" :style="{height: scrollH+'upx'}" scroll-y @scrolltolower="onreachBottom">
+					<view class="sales-list-item border-b font_13 flex justify_between" v-for="(item, index) in listData" :key="item.id">
+						<view class="pimgs">
+							<u-image :src="item.productMainMsg?item.productMainMsg:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
+							<view v-if="item.oosFlag == 1" class="sign" :style="{backgroundColor: $config('errorColor')}">急</view>
+							<view v-if="item.price < item.cost" class="sign" :style="{backgroundColor: $config('errorColor')}">亏</view>
+							<view v-if="item.price == 0" class="sign" :style="{backgroundColor: $config('errorColor')}">赠</view>
+						</view>
+						<view class="sales-item-main flex_1">
+							<view class="sales-item-name">{{item.productName || '--'}}</view>
+							<view class="sales-item-txt flex align_center justify_between">
+								<view>{{item.productCode || '--'}}</view>
+								<u-icon name="trash-fill" :color="$config('errorColor')" size="34"></u-icon>
+							</view>
+							<view class="sales-item-txt color_6" style="font-size: 24upx;" v-if="item.warehouseEntity&&item.warehouseEntity.name || item.warehouseLocationEntity&&item.warehouseLocationEntity.name">{{item.warehouseEntity&&item.warehouseEntity.name}} > {{item.warehouseLocationEntity&&item.warehouseLocationEntity.name}}</view>
+							<view class="sales-item-txt flex align_center justify_between">
+								<view class="sales-item-priceInfo">
+									<view :style="{color: $config('errorColor'), display: 'inline-block'}">¥<text style="font-size: 30upx;">{{toThousands(item.price||0, 2)}}</text></view>
+									<text style="display: inline-block;margin: 0 10upx;">*</text> 
+									<text style="font-size: 30upx;">{{toThousands(item.qty||0)}}</text>
+									{{item.productUnit}}
+								</view>
+								<view class="sales-item-price">¥{{toThousands(item.totalAmount||0, 2)}}</view>
+							</view>
+							<view class="sales-item-price">折后¥{{toThousands(item.discountedAmount||0, 2)}}</view>
+						</view>
+					</view>
+					<view v-if="listData && listData.length == 0">
+						<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
+					</view>
+				</scroll-view>
 			</view>
 		</view>
+		<!-- 操作按钮 -->
+		<view class="sales-btn-box flex align_center justify_between">
+			<u-button class="handle-btn" size="medium" hover-class="none" @click="resetForm">整单删除</u-button>
+			<u-button class="handle-btn search-btn" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">提交</u-button>
+		</view>
+		<!-- 基础信息 -->
+		<orderInfoModal :openModal="infoModal" :infoData="pageData.data" @close="infoModal=false" />
+		<!-- 折扣 -->
+		<discountModal :openModal="discountModal" :infoData="pageData.data" @close="discountModal=false" />
 	</view>
 </template>
 
 <script>
+	import OrderInfoModal from './orderInfoModal.vue'
+	import DiscountModal from './discountModal.vue'
+	import { toThousands } from '@/libs/tools'
+	import { salesDetailList } from '@/api/sales'
 	export default{
+		components: { OrderInfoModal, DiscountModal },
 		data(){
 			return{
 				pageData: {
 					type: 'edit',
 					data: null
-				}
+				},
+				toggle: false,
+				toThousands,
+				customBtnStyle: {  //  自定义按钮样式
+					borderColor: this.$config('primaryColor'),
+					backgroundColor: this.$config('primaryColor'),
+					color: '#fff'
+				},
+				listData: [],
+				pageNo: 1,
+				pageSize: 6,
+				totalNum: 0,
+				noDataText: '暂无数据',
+				theme: '',
+				scrollH: 836,
+				infoModal: false,
+				discountModal: false
 			}
 		},
 		onLoad(opt) {
-			console.log(opt)
+			this.theme = getApp().globalData.theme
 			if(opt){
 				this.pageData = {
 					type: opt.pageType || 'edit',
 					data: opt.data ? JSON.parse(opt.data) : null
 				}
 			}
+			this.getList()
 		},
 		methods: {
-			
+			// 列表
+			getList(pageNo){
+				const _this = this
+				if (pageNo) {
+					this.pageNo = pageNo
+				}
+				let params = {
+					pageNo: this.pageNo,
+					pageSize: this.pageSize,
+					salesBillSn: this.pageData.data && this.pageData.data.salesBillSn
+				}
+				salesDetailList(params).then(res => {
+					if (res.status == 200) {
+						if(res.data && res.data.list){
+							res.data.list.map(item => {
+								item.productName = item.productEntity && item.productEntity.name || item.dealerProductEntity && item.dealerProductEntity.name
+								item.productCode = item.productEntity && item.productEntity.code || item.dealerProductEntity && item.dealerProductEntity.code
+								item.productUnit = item.productEntity && item.productEntity.unit || item.dealerProductEntity && item.dealerProductEntity.unit
+							})
+							if(this.pageNo>1){
+								this.listData = this.listData.concat(res.data && res.data.list || [])
+							}else{
+								this.listData = res.data.list || []
+							}
+						}else{
+							this.listData = []
+						}
+						this.totalNum = res.data && res.data.count || 0
+					} else {
+						this.listData = []
+						this.totalNum = 0
+						this.noDataText = res.message
+					}
+				})
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				if(this.listData.length < this.totalNum){
+					this.pageNo += 1
+					this.getList()
+				}
+			},
+		},
+		watch: {
+			toggle (newValue, oldValue) {
+				const winH = window.innerHeight * 2
+				let totalH = this.$refs.salesTotal && this.$refs.salesTotal.$el && this.$refs.salesTotal.$el.offsetHeight || 0
+				this.scrollH = winH - 396 - totalH
+			}
 		}
 	}
 </script>
@@ -62,12 +188,16 @@
 <style lang="scss">
 	.sales-edit-wrap{
 		width: 100%;
+		position: relative;
 		.color_6{
 			color: #666;
 		}
 		.font_13{
 			font-size: 26upx;
 		}
+		.border-b{
+			border-bottom: 1px solid #e4e7ed;
+		}
 		.u-line{
 			display: inline-block;
 			width: 8upx;
@@ -105,6 +235,78 @@
 					}
 				}
 			}
+			.sales-total-box{
+				align-items: flex-end;
+				padding: 16upx 0;
+				.sales-total-con{
+					color: #666;
+					overflow: hidden;
+					view{
+						padding: 4upx 0;
+						.sales-total-num{
+							font-size: 24upx;
+							color: rgb(48, 49, 51);
+						}
+					}
+				}
+				.sales-total-btn{
+					display: inline-block;
+					margin-bottom: 6upx;
+				}
+			}
+			.sales-list-box{
+				.sales-list-con{
+					.sales-list-item{
+						padding: 20upx 0;
+						.pimgs{
+							margin-right: 20upx;
+							position: relative;
+							.sign{
+								position: absolute;
+								right: -14upx;
+								top: -14upx;
+								color: #fff;
+								border-radius: 50%;
+								width: 40upx;
+								height: 40upx;
+								text-align: center;
+							}
+						}
+						.sales-item-main{
+							.sales-item-name{
+								font-size: 28upx;
+								color: rgb(48, 49, 51);
+								font-weight: bold;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								display: -webkit-box;
+								-webkit-box-orient: vertical;
+								-webkit-line-clamp: 1;
+							}
+							.sales-item-txt{
+								margin: 8upx 0;
+							}
+							.sales-item-price{
+								text-align: right;
+							}
+						}
+					}
+					.sales-list-item:last-child{
+						border: none;
+					}
+				}
+			}
+		}
+		.sales-btn-box{
+			background-color: #fff;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			padding: 16upx 20upx 12upx;
+			.handle-btn{
+				width: 47%;
+			}
 		}
 	}
 </style>

+ 2 - 2
pages/sales/index.vue

@@ -35,7 +35,7 @@
 		<view class="sales-list">
 			<view class="title">
 				<text class="title-name">销售单</text>
-				<view class="title-all" @click="toPage('/pages/sales/list')">查看全部<u-icon name="arrow-right" color="#666" size="28"></u-icon></view>
+				<view class="title-all" @click="toPage('/pages/sales/list')">查看全部<u-icon name="arrow-right" color="rgb(144, 147, 153)" size="28"></u-icon></view>
 			</view>
 			<!-- 销售单列表 -->
 			<listComponent height="458" />
@@ -171,7 +171,7 @@
 					font-weight: 1000;
 				}
 				.title-all{
-					color: #666;
+					color: rgb(144, 147, 153);
 				}
 			}
 		}

+ 1 - 1
pages/sales/listComponent.vue

@@ -4,7 +4,7 @@
 			<view class="sales-list-main">
 				<view class="sales-list-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
 					<view class="list-item-tit">
-						<view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>{{item.buyerName}}
+						<u-section :title="item.buyerName":right="false" :line-color="$config('primaryColor')"></u-section>
 					</view>
 					<view class="list-item-con">
 						<view class="list-item-line flex align_center justify_between">

+ 124 - 0
pages/sales/orderInfoModal.vue

@@ -0,0 +1,124 @@
+<template>
+	<u-mask class="orderInfoModal" :show="isShow" :mask-click-able="false">
+		<view class="order-info-con">
+			<view class="order-info-main">
+				<view>
+					<text class="info-item-tit">销售单号:</text>
+					<text class="info-item-txt">{{infoData && infoData.salesBillNo || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">客户名称:</text>
+					<text class="info-item-txt">{{infoData && infoData.buyerName || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">客户地址:</text>
+					<text class="info-item-txt" v-if="infoData && (infoData.shippingAddressProvinceName || infoData.shippingAddressCityName || infoData.shippingAddressCountyName || infoData.shippingAddress)">
+						{{infoData.shippingAddress || ''}}{{infoData.shippingAddressCityName || ''}}{{infoData.shippingAddressCountyName || ''}}{{infoData.shippingAddress || ''}}
+					</text>
+					<text class="info-item-txt" v-else>--</text>
+				</view>
+				<view>
+					<text class="info-item-tit">联系电话:</text>
+					<text class="info-item-txt">{{infoData && infoData.consigneeTel || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">收款方式:</text>
+					<text class="info-item-txt">{{infoData && infoData.settleStyleEntity && infoData.settleStyleEntity.name || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">制单人:</text>
+					<text class="info-item-txt">{{infoData && infoData.operatorName || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">业务员:</text>
+					<text class="info-item-txt">{{infoData && infoData.salesManName || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">来源:</text>
+					<text class="info-item-txt">{{infoData && infoData.salesBillSourceDictValue || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">业务状态:</text>
+					<text class="info-item-txt">{{infoData && infoData.billStatusDictValue || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">财务状态:</text>
+					<text class="info-item-txt">{{infoData && infoData.financialStatusDictValue || '--'}}</text>
+				</view>
+				<view>
+					<text class="info-item-tit">备注:</text>
+					<text class="info-item-txt">{{infoData && infoData.remarks || '--'}}</text>
+				</view>
+			</view>
+			<view class="order-info-footer">
+				<view class="button-cancel" @click="isShow=false">关闭</view>
+			</view>
+		</view>
+	</u-mask>
+</template>
+
+<script>
+	export default {
+		props: {
+			openModal: { //  弹框显示状态
+				type: Boolean,
+				default: false
+			},
+			infoData: {
+				tyoe: Object,
+				default: ()=>{
+					return null
+				}
+			}
+		},
+		data() {
+			return {
+				isShow: this.openModal, //  是否打开弹框
+			}
+		},
+		methods: {},
+		watch: {
+			//  父页面传过来的弹框状态
+			openModal (newValue, oldValue) {
+				this.isShow = newValue
+			},
+			//  重定义的弹框状态
+			isShow (newValue, oldValue) {
+			  if (!newValue) {
+			    this.$emit('close')
+			  }
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.orderInfoModal{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		.order-info-con{
+			width: 78%;
+			margin: 20% auto 0;
+			background-color: #fff;
+			border-radius: 24upx;
+			.order-info-main{
+				padding: 20upx 20upx;
+				>view{
+					padding: 10upx 0;
+					border-bottom: 1upx solid #e4e7ed;
+					.info-item-tit{
+						color: #666;
+						display: inline-block;
+					}
+				}
+			}
+			.order-info-footer{
+				text-align: center;
+				padding-bottom: 20upx;
+			}
+		}
+	}
+</style>