<template> <view class="sales-edit-wrap"> <!-- 基础信息 --> <view class="sales-info-con"> <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>{{detailData && detailData.salesBillNo || '--'}}</text> </view> <view class="info-item-box"> <text class="info-item-tit color_6">客户名称</text> <text>{{detailData && detailData.buyerName || '--'}}</text> </view> </view> <!-- 产品列表 --> <view class="sales-product-con"> <!-- 标题 --> <view class="sales-product-header border-b flex align_center justify_between"> <u-section title="产品列表" :right="pageData.type=='edit'" :line-color="$config('primaryColor')"> <template slot="right" v-if="pageData.type=='edit'"> <view class="sales-product-operation"> <u-button @click="discountModal=true" size="mini" :hair-line="false" plain type="primary" hover-class="none"> 打折 <text v-if="detailData&&detailData.discountAmount">:¥{{detailData.discountAmount}}</text> </u-button> <u-button @click="handleProduct" 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')}">{{detailData && (detailData.totalCategory || detailData.totalCategory==0) ? toThousands(detailData.totalCategory) : '--'}}</text>;总数量:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{detailData && (detailData.totalQty || detailData.totalQty==0) ? toThousands(detailData.totalQty) : '--'}}</text>;总售价:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{detailData && (detailData.totalAmount || detailData.totalAmount==0) ? toThousands(detailData.totalAmount, 2) : '--'}}</text>; </view> <view> 折扣金额:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{detailData && (detailData.discountAmount || detailData.discountAmount==0) ? toThousands(detailData.discountAmount, 2) : '--'}}</text>;折扣:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{detailData && (detailData.discountRate || detailData.discountRate==0) ? detailData.discountRate+'%' : '--'}}</text>;折后总售价:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{detailData && (detailData.discountedAmount || detailData.discountedAmount==0) ? toThousands(detailData.discountedAmount, 2) : '--'}}</text>; </view> <view> 急件总款数:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{detailData && (detailData.oosCategory || detailData.oosCategory==0) ? toThousands(detailData.oosCategory) : '--'}}</text>;急件总数量:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{detailData && (detailData.oosQty || detailData.oosQty==0) ? toThousands(detailData.oosQty) : '--'}}</text>;赠品总数量:<text class="sales-total-num" :style="{color: $config('warringColor')}">{{detailData && (detailData.giftQty || detailData.giftQty==0) ? toThousands(detailData.giftQty) : '--'}}</text>; </view> <view> 总成本:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{detailData && (detailData.totalCost || detailData.totalCost==0) ? toThousands(detailData.totalCost, 2) : '--'}}</text>;总毛利:<text class="sales-total-num" :style="{color: $config('warringColor')}">¥{{detailData && (detailData.grossProfit || detailData.grossProfit==0) ? toThousands(detailData.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.productMainImage?item.productMainImage:`../../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 v-if="pageData.type=='edit'" @click="handleDel(item)" 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" v-if="detailData&&detailData.discountAmount">折后¥{{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"> <view v-if="pageData.type=='edit'" class="flex align_center justify_between"> <u-button class="handle-btn" size="medium" hover-class="none" @click="handleDel()">整单删除</u-button> <u-button class="handle-btn search-btn" @click="handleSubmit" size="medium" hover-class="none" :custom-style="customBtnStyle">提交</u-button> </view> <u-button v-if="pageData.type=='detail' && (detailData&&detailData.billStatus !== 'CANCEL' && detailData.billStatus !== 'FINISH' && detailData.billStatus != 'WAIT_OUT_WAREHOUSE')" class="edit-btn" @click="goPage" size="medium" hover-class="none" :custom-style="customBtnStyle">编辑</u-button> </view> <!-- 基础信息 --> <orderInfoModal :openModal="infoModal" :infoData="detailData" @close="infoModal=false" /> <!-- 折扣 --> <discountModal :openModal="discountModal" :infoData="detailData" :amount="detailData&&detailData.discountAmount" @confirm="discountConfirm" @close="discountModal=false" /> <!-- 删除产品/整单删除弹框 --> <common-modal :openModal="delModal" :content="delText" @confirm="handleConfirm" @close="delModal=false" /> </view> </template> <script> import commonModal from '@/pages/common/commonModal.vue' import OrderInfoModal from './orderInfoModal.vue' import DiscountModal from './discountModal.vue' import { toThousands } from '@/libs/tools' import { salesDetailList, salesDetailDel, salesDel, salesDetail, salesSubmit, salesDiscount } from '@/api/sales' export default{ components: { OrderInfoModal, DiscountModal, commonModal }, 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: 916, infoModal: false, discountModal: false, delModal: false, delText: '确认要删除吗?', dataInfo: null, detailData: null // 销售单详情 } }, onLoad(opt) { this.theme = getApp().globalData.theme if(opt){ this.pageData = { type: opt.pageType || 'edit', data: opt.data ? JSON.parse(opt.data) : null } } this.init() // 监听整改完成后刷新事件 uni.$on('refreshBL', this.init) }, onUnload() { uni.$off('refreshBL') }, methods: { init(){ this.getList(1) this.getDetail() }, // 列表 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() } }, // 折扣金额 discountConfirm(amount){ let params = { discountAmount: amount, salesBillSn: this.detailData.salesBillSn, id: this.detailData.id } salesDiscount(params).then(res => { if(res.status == 200){ this.init() this.discountModal = false } }) }, // 提交 handleSubmit(){ salesSubmit({ id: this.detailData.id }).then(res => { if(res.status == 200){ this.toashMsg(res.message) uni.$emit('refreshBL') uni.navigateBack() } }) }, // 删除 handleDel(item){ if(item){ // 删除产品 this.dataInfo = item this.delText = '确认要删除吗?' this.delModal = true }else{ // 整单删除 this.dataInfo = null this.delText = '确认删除该销售单吗?' this.delModal = true } }, // 删除 handleConfirm(){ let url = salesDetailDel let params = {} if(this.dataInfo){ // 删除产品 url = salesDetailDel params = { id: this.dataInfo.id } }else{ // 整单删除 url = salesDel params = { id: this.detailData && this.detailData.id } } url(params).then(res => { if (res.status == 200) { if(this.dataInfo){ // 删除产品 this.toashMsg(res.message) this.init() }else{ // 整单删除 this.toashMsg(res.message) uni.$emit('refreshBL') uni.navigateBack() } this.delModal = false } else { this.delModal = false } }) }, // 选择产品 handleProduct(){ uni.navigateTo({ url: '/pages/sales/chooseProduct?data='+JSON.stringify(this.detailData) }) }, // 编辑 goPage(){ uni.redirectTo({ url: '/pages/sales/edit?pageType=edit&data='+JSON.stringify(this.detailData) }) }, // 销售单详情 getDetail(){ salesDetail({ id: this.pageData.data.id }).then(res => { if(res.status == 200){ this.detailData = res.data }else{ this.detailData = null } }) }, changeScrollH(){ const _this = this uni.getSystemInfo({ success: function (res) { const winH = res.windowHeight * 2 let totalH = _this.$refs.salesTotal && _this.$refs.salesTotal.$el && _this.$refs.salesTotal.$el.offsetHeight || 0 if(_this.toggle){ _this.scrollH = winH - 656 - totalH }else{ _this.scrollH = winH - 522 - totalH } } }) } }, watch: { toggle (newValue, oldValue) { this.changeScrollH() } } } </script> <style lang="scss"> .sales-edit-wrap{ width: 100%; .color_6{ color: #666; } .font_13{ font-size: 26upx; } .border-b{ border-bottom: 1px solid #e4e7ed; } .u-line{ display: inline-block; width: 8upx; height: 40upx; background-color: red; vertical-align: bottom; margin: 0 20upx 0 0; } .sales-info-con{ background-color: #fff; margin-bottom: 20upx; padding: 0 20upx; >view{ padding: 14upx 0; border-bottom: 1px solid #e4e7ed; } >view:last-child{ border-bottom: none; } .info-item-box{ .info-item-tit{ display: inline-block; width: 20%; } } } .sales-product-con{ background-color: #fff; padding: 0 20upx; .sales-product-header{ padding: 14upx 0; .sales-product-operation{ button{ margin: 0 0 0 10upx; } } } .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; padding: 16upx 20upx 12upx; .handle-btn{ width: 47%; } .edit-btn{ width: 100%; } } } </style>